style: github integration ui (#329)
* fix: ellipsis added to issue title * feat: toolttip added * feat: assignees tooltip added * fix: build fix * fix: build fix * fix: build error * fix: minor bugs and ux improvements * style: github integration ui * chore: updated .env.example file --------- Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@caravel.tech>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
2b3cb839ad
commit
36a733cd06
16 changed files with 447 additions and 124 deletions
|
|
@ -1,10 +1,29 @@
|
|||
import { useRouter } from "next/router";
|
||||
import React, { useRef } from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button } from "components/ui";
|
||||
// icons
|
||||
import GithubLogo from "public/logos/github-black.png";
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { APP_INTEGRATIONS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
|
||||
import { IWorkspaceIntegrations } from "types";
|
||||
|
||||
const OAuthPopUp = ({ integration }: any) => {
|
||||
const [deletingIntegration, setDeletingIntegration] = useState(false);
|
||||
|
||||
const OAuthPopUp = ({ workspaceSlug, integration }: any) => {
|
||||
const popup = useRef<any>();
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const checkPopup = () => {
|
||||
const check = setInterval(() => {
|
||||
|
|
@ -19,7 +38,9 @@ const OAuthPopUp = ({ workspaceSlug, integration }: any) => {
|
|||
height = 600;
|
||||
const left = window.innerWidth / 2 - width / 2;
|
||||
const top = window.innerHeight / 2 - height / 2;
|
||||
const url = `https://github.com/apps/${process.env.NEXT_PUBLIC_GITHUB_APP_NAME}/installations/new?state=${workspaceSlug}`;
|
||||
const url = `https://github.com/apps/${
|
||||
process.env.NEXT_PUBLIC_GITHUB_APP_NAME
|
||||
}/installations/new?state=${workspaceSlug as string}`;
|
||||
|
||||
return window.open(url, "", `width=${width}, height=${height}, top=${top}, left=${left}`);
|
||||
};
|
||||
|
|
@ -29,12 +50,95 @@ const OAuthPopUp = ({ workspaceSlug, integration }: any) => {
|
|||
checkPopup();
|
||||
};
|
||||
|
||||
const { data: workspaceIntegrations } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
|
||||
() =>
|
||||
workspaceSlug ? workspaceService.getWorkspaceIntegrations(workspaceSlug as string) : null
|
||||
);
|
||||
|
||||
const handleRemoveIntegration = async () => {
|
||||
if (!workspaceSlug || !integration || !workspaceIntegrations) return;
|
||||
|
||||
const workspaceIntegrationId = workspaceIntegrations?.find(
|
||||
(i) => i.integration === integration.id
|
||||
)?.id;
|
||||
|
||||
setDeletingIntegration(true);
|
||||
|
||||
await workspaceService
|
||||
.deleteWorkspaceIntegration(workspaceSlug as string, workspaceIntegrationId ?? "")
|
||||
.then(() => {
|
||||
mutate<IWorkspaceIntegrations[]>(
|
||||
WORKSPACE_INTEGRATIONS(workspaceSlug as string),
|
||||
(prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId),
|
||||
false
|
||||
);
|
||||
setDeletingIntegration(false);
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Deleted successfully!",
|
||||
message: `${integration.title} integration deleted successfully.`,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setDeletingIntegration(false);
|
||||
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: `${integration.title} integration could not be deleted. Please try again.`,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const isInstalled = workspaceIntegrations?.find(
|
||||
(i: any) => i.integration_detail.id === integration.id
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<button onClick={startAuth}>{integration.title}</button>
|
||||
<div className="flex items-center justify-between gap-2 border p-4 rounded-lg">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-12 w-12">
|
||||
<Image src={GithubLogo} alt="GithubLogo" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="flex items-center gap-4 font-semibold text-xl">
|
||||
{integration.title}
|
||||
{isInstalled ? (
|
||||
<span className="flex items-center text-green-500 font-normal text-sm gap-1">
|
||||
<span className="h-1.5 w-1.5 bg-green-500 flex-shrink-0 rounded-full" /> Installed
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center text-gray-400 font-normal text-sm gap-1">
|
||||
<span className="h-1.5 w-1.5 bg-gray-400 flex-shrink-0 rounded-full" /> Not
|
||||
Installed
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{isInstalled
|
||||
? "Activate GitHub integrations on individual projects to sync with specific repositories."
|
||||
: "Connect with GitHub with your Plane workspace to sync project issues."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
{isInstalled ? (
|
||||
<Button
|
||||
theme="danger"
|
||||
size="rg"
|
||||
className="text-xs"
|
||||
onClick={handleRemoveIntegration}
|
||||
disabled={deletingIntegration}
|
||||
>
|
||||
{deletingIntegration ? "Removing..." : "Remove installation"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button theme="secondary" size="rg" className="text-xs" onClick={startAuth}>
|
||||
Add installation
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export * from "./create-project-modal";
|
||||
export * from "./sidebar-list";
|
||||
export * from "./join-project";
|
||||
export * from "./card";
|
||||
export * from "./create-project-modal";
|
||||
export * from "./join-project";
|
||||
export * from "./sidebar-list";
|
||||
export * from "./single-integration-card";
|
||||
|
|
|
|||
140
apps/app/components/project/single-integration-card.tsx
Normal file
140
apps/app/components/project/single-integration-card.tsx
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
import Image from "next/image";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// hooks
|
||||
import { useRouter } from "next/router";
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import GithubLogo from "public/logos/github-black.png";
|
||||
// types
|
||||
import { IWorkspaceIntegrations } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_GITHUB_REPOSITORY } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
integration: IWorkspaceIntegrations;
|
||||
};
|
||||
|
||||
export const SingleIntegration: React.FC<Props> = ({ integration }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { data: syncedGithubRepository } = useSWR(
|
||||
projectId ? PROJECT_GITHUB_REPOSITORY(projectId as string) : null,
|
||||
() =>
|
||||
workspaceSlug && projectId && integration
|
||||
? projectService.getProjectGithubRepository(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
integration.id
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: userRepositories } = useSWR("USER_REPOSITORIES", () =>
|
||||
workspaceSlug && integration
|
||||
? projectService.getGithubRepositories(workspaceSlug as any, integration.id)
|
||||
: null
|
||||
);
|
||||
|
||||
const handleChange = (repo: any) => {
|
||||
if (!workspaceSlug || !projectId || !integration) return;
|
||||
|
||||
const {
|
||||
html_url,
|
||||
owner: { login },
|
||||
id,
|
||||
name,
|
||||
} = repo;
|
||||
|
||||
projectService
|
||||
.syncGiuthubRepository(workspaceSlug as string, projectId as string, integration.id, {
|
||||
name,
|
||||
owner: login,
|
||||
repository_id: id,
|
||||
url: html_url,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
mutate(PROJECT_GITHUB_REPOSITORY(projectId as string));
|
||||
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: `${login}/${name} respository synced with the project successfully.`,
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Respository could not be synced with the project. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{integration && (
|
||||
<div className="flex items-center justify-between gap-2 border p-4 rounded-xl">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-12 w-12">
|
||||
<Image src={GithubLogo} alt="GithubLogo" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="flex items-center gap-4 font-semibold text-xl">
|
||||
{integration.integration_detail.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm">Select GitHub repository to enable sync.</p>
|
||||
</div>
|
||||
</div>
|
||||
<CustomSelect
|
||||
value={
|
||||
syncedGithubRepository && syncedGithubRepository.length > 0
|
||||
? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
|
||||
: null
|
||||
}
|
||||
onChange={(val: string) => {
|
||||
const repo = userRepositories?.repositories.find((repo) => repo.full_name === val);
|
||||
|
||||
handleChange(repo);
|
||||
}}
|
||||
label={
|
||||
syncedGithubRepository && syncedGithubRepository.length > 0
|
||||
? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
|
||||
: "Select Repository"
|
||||
}
|
||||
input
|
||||
>
|
||||
{userRepositories ? (
|
||||
userRepositories.repositories.length > 0 ? (
|
||||
userRepositories.repositories.map((repo) => (
|
||||
<CustomSelect.Option
|
||||
key={repo.id}
|
||||
value={repo.full_name}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<>{repo.full_name}</>
|
||||
</CustomSelect.Option>
|
||||
))
|
||||
) : (
|
||||
<p className="text-gray-400 text-center text-xs">No repositories found</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-gray-400 text-center text-xs">Loading repositories</p>
|
||||
)}
|
||||
</CustomSelect>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -143,7 +143,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
|
|||
}),
|
||||
new TableExtension(),
|
||||
],
|
||||
content: value,
|
||||
content: !value || (typeof value === "object" && Object.keys(value).length === 0) ? "" : value,
|
||||
selection: "start",
|
||||
stringHandler: "html",
|
||||
onError,
|
||||
|
|
@ -153,7 +153,12 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
|
|||
(value: any) => {
|
||||
// Clear out old state when setting data from outside
|
||||
// This prevents e.g. the user from using CTRL-Z to go back to the old state
|
||||
manager.view.updateState(manager.createState({ content: value ? value : "" }));
|
||||
manager.view.updateState(
|
||||
manager.createState({
|
||||
content:
|
||||
!value || (typeof value === "object" && Object.keys(value).length === 0) ? "" : value,
|
||||
})
|
||||
);
|
||||
},
|
||||
[manager]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -172,7 +172,11 @@ export const FloatingLinkToolbar = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{!isEditing && <FloatingToolbar>{linkEditButtons}</FloatingToolbar>}
|
||||
{!isEditing && (
|
||||
<FloatingToolbar className="shadow-lg rounded bg-white p-1">
|
||||
{linkEditButtons}
|
||||
</FloatingToolbar>
|
||||
)}
|
||||
{!isEditing && empty && (
|
||||
<FloatingToolbar positioner={linkPositioner} className="shadow-lg rounded bg-white p-1">
|
||||
{linkEditButtons}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue