New Directory Setup (#2065)
* chore: moved app & space from apps to root * chore: modified workspace configuration * chore: modified dockerfiles for space and web * chore: modified icons for space * feat: updated files for new svg icons supported by next-images * chore: added /spaces base path for next * chore: added compose config for space * chore: updated husky configuration * chore: updated workflows for new configuration * chore: changed app name to web * fix: resolved build errors with web * chore: reset file tracing root for both projects * chore: added nginx config for deploy * fix: eslint and tsconfig settings for space app * husky setup fixes based on new dir * eslint fixes * prettier formatting --------- Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
This commit is contained in:
sriram veeraghanta
GitHub
parent
20e36194b4
commit
1e152c666c
1022 changed files with 1475 additions and 1240 deletions
27
web/components/integration/github/auth.tsx
Normal file
27
web/components/integration/github/auth.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
// hooks
|
||||
import useIntegrationPopup from "hooks/use-integration-popup";
|
||||
// ui
|
||||
import { PrimaryButton } from "components/ui";
|
||||
// types
|
||||
import { IWorkspaceIntegration } from "types";
|
||||
|
||||
type Props = {
|
||||
workspaceIntegration: false | IWorkspaceIntegration | undefined;
|
||||
provider: string | undefined;
|
||||
};
|
||||
|
||||
export const GithubAuth: React.FC<Props> = ({ workspaceIntegration, provider }) => {
|
||||
const { startAuth, isConnecting } = useIntegrationPopup(provider);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{workspaceIntegration && workspaceIntegration?.id ? (
|
||||
<PrimaryButton disabled>Successfully Connected</PrimaryButton>
|
||||
) : (
|
||||
<PrimaryButton onClick={startAuth} loading={isConnecting}>
|
||||
{isConnecting ? "Connecting..." : "Connect"}
|
||||
</PrimaryButton>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
56
web/components/integration/github/import-configure.tsx
Normal file
56
web/components/integration/github/import-configure.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
// components
|
||||
import { GithubAuth, TIntegrationSteps } from "components/integration";
|
||||
// ui
|
||||
import { PrimaryButton } from "components/ui";
|
||||
// types
|
||||
import { IAppIntegration, IWorkspaceIntegration } from "types";
|
||||
|
||||
type Props = {
|
||||
provider: string | undefined;
|
||||
handleStepChange: (value: TIntegrationSteps) => void;
|
||||
appIntegrations: IAppIntegration[] | undefined;
|
||||
workspaceIntegrations: IWorkspaceIntegration[] | undefined;
|
||||
};
|
||||
|
||||
export const GithubImportConfigure: React.FC<Props> = ({
|
||||
handleStepChange,
|
||||
provider,
|
||||
appIntegrations,
|
||||
workspaceIntegrations,
|
||||
}) => {
|
||||
// current integration from all the integrations available
|
||||
const integration =
|
||||
appIntegrations &&
|
||||
appIntegrations.length > 0 &&
|
||||
appIntegrations.find((i) => i.provider === provider);
|
||||
|
||||
// current integration from workspace integrations
|
||||
const workspaceIntegration =
|
||||
integration &&
|
||||
workspaceIntegrations &&
|
||||
workspaceIntegrations.length > 0 &&
|
||||
workspaceIntegrations.find((i: any) => i.integration_detail.id === integration.id);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2 py-5">
|
||||
<div className="w-full">
|
||||
<div className="font-medium">Configure</div>
|
||||
<div className="text-sm text-custom-text-200">Set up your GitHub import.</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<PrimaryButton
|
||||
onClick={() => handleStepChange("import-data")}
|
||||
disabled={workspaceIntegration && workspaceIntegration?.id ? false : true}
|
||||
>
|
||||
Next
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
27
web/components/integration/github/import-confirm.tsx
Normal file
27
web/components/integration/github/import-confirm.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { FC } from "react";
|
||||
|
||||
// react-hook-form
|
||||
import { UseFormWatch } from "react-hook-form";
|
||||
// ui
|
||||
import { PrimaryButton, SecondaryButton } from "components/ui";
|
||||
// types
|
||||
import { TFormValues, TIntegrationSteps } from "components/integration";
|
||||
|
||||
type Props = {
|
||||
handleStepChange: (value: TIntegrationSteps) => void;
|
||||
watch: UseFormWatch<TFormValues>;
|
||||
};
|
||||
|
||||
export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
|
||||
<div className="mt-6">
|
||||
<h4 className="font-medium text-custom-text-200">
|
||||
You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm &
|
||||
Import{'" '}
|
||||
to complete the process.
|
||||
</h4>
|
||||
<div className="mt-6 flex items-center justify-between">
|
||||
<SecondaryButton onClick={() => handleStepChange("import-users")}>Back</SecondaryButton>
|
||||
<PrimaryButton type="submit">Confirm & Import</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
128
web/components/integration/github/import-data.tsx
Normal file
128
web/components/integration/github/import-data.tsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
import { FC } from "react";
|
||||
|
||||
// react-hook-form
|
||||
import { Control, Controller, UseFormWatch } from "react-hook-form";
|
||||
// hooks
|
||||
import useProjects from "hooks/use-projects";
|
||||
// components
|
||||
import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
|
||||
// ui
|
||||
import { CustomSearchSelect, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
|
||||
// helpers
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import { IWorkspaceIntegration } from "types";
|
||||
|
||||
type Props = {
|
||||
handleStepChange: (value: TIntegrationSteps) => void;
|
||||
integration: IWorkspaceIntegration | false | undefined;
|
||||
control: Control<TFormValues, any>;
|
||||
watch: UseFormWatch<TFormValues>;
|
||||
};
|
||||
|
||||
export const GithubImportData: FC<Props> = ({ handleStepChange, integration, control, watch }) => {
|
||||
const { projects } = useProjects();
|
||||
|
||||
const options = projects
|
||||
? projects.map((project) => ({
|
||||
value: project.id,
|
||||
query: project.name,
|
||||
content: <p>{truncateText(project.name, 25)}</p>,
|
||||
}))
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="mt-6">
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-12 gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-8">
|
||||
<h4 className="font-semibold">Select Repository</h4>
|
||||
<p className="text-xs text-custom-text-200">
|
||||
Select the repository that you want the issues to be imported from.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-4">
|
||||
{integration && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="github"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<SelectRepository
|
||||
integration={integration}
|
||||
value={value ? value.id : null}
|
||||
label={
|
||||
value ? (
|
||||
`${value.full_name}`
|
||||
) : (
|
||||
<span className="text-custom-text-200">Select Repository</span>
|
||||
)
|
||||
}
|
||||
onChange={onChange}
|
||||
characterLimit={50}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-8">
|
||||
<h4 className="font-semibold">Select Project</h4>
|
||||
<p className="text-xs text-custom-text-200">
|
||||
Select the project to import the issues to.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-4">
|
||||
{projects && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="project"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
label={
|
||||
value ? (
|
||||
projects.find((p) => p.id === value)?.name
|
||||
) : (
|
||||
<span className="text-custom-text-200">Select Project</span>
|
||||
)
|
||||
}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
optionsClassName="w-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-8">
|
||||
<h4 className="font-semibold">Sync Issues</h4>
|
||||
<p className="text-xs text-custom-text-200">
|
||||
Set whether you want to sync the issues or not.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="sync"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<ToggleSwitch value={value} onChange={() => onChange(!value)} />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex items-center justify-end gap-2">
|
||||
<SecondaryButton onClick={() => handleStepChange("import-configure")}>Back</SecondaryButton>
|
||||
<PrimaryButton
|
||||
onClick={() => handleStepChange("repo-details")}
|
||||
disabled={!watch("github") || !watch("project")}
|
||||
>
|
||||
Next
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
55
web/components/integration/github/import-users.tsx
Normal file
55
web/components/integration/github/import-users.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import { FC } from "react";
|
||||
|
||||
// react-hook-form
|
||||
import { UseFormWatch } from "react-hook-form";
|
||||
// ui
|
||||
import { PrimaryButton, SecondaryButton } from "components/ui";
|
||||
// types
|
||||
import {
|
||||
IUserDetails,
|
||||
SingleUserSelect,
|
||||
TFormValues,
|
||||
TIntegrationSteps,
|
||||
} from "components/integration";
|
||||
|
||||
type Props = {
|
||||
handleStepChange: (value: TIntegrationSteps) => void;
|
||||
users: IUserDetails[];
|
||||
setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
|
||||
watch: UseFormWatch<TFormValues>;
|
||||
};
|
||||
|
||||
export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers, watch }) => {
|
||||
const isInvalid = users.filter((u) => u.import !== false && u.email === "").length > 0;
|
||||
|
||||
return (
|
||||
<div className="mt-6">
|
||||
<div>
|
||||
<div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
|
||||
<div className="text-custom-text-200">Name</div>
|
||||
<div className="text-custom-text-200">Import as...</div>
|
||||
<div className="text-right">
|
||||
{users.filter((u) => u.import !== false).length} users selected
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{watch("collaborators").map((collaborator, index) => (
|
||||
<SingleUserSelect
|
||||
key={collaborator.id}
|
||||
collaborator={collaborator}
|
||||
index={index}
|
||||
users={users}
|
||||
setUsers={setUsers}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex items-center justify-end gap-2">
|
||||
<SecondaryButton onClick={() => handleStepChange("repo-details")}>Back</SecondaryButton>
|
||||
<PrimaryButton onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
|
||||
Next
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
9
web/components/integration/github/index.ts
Normal file
9
web/components/integration/github/index.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export * from "./auth";
|
||||
export * from "./import-configure";
|
||||
export * from "./import-confirm";
|
||||
export * from "./import-data";
|
||||
export * from "./import-users";
|
||||
export * from "./repo-details";
|
||||
export * from "./root";
|
||||
export * from "./select-repository";
|
||||
export * from "./single-user-select";
|
||||
105
web/components/integration/github/repo-details.tsx
Normal file
105
web/components/integration/github/repo-details.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
import { FC, useEffect } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { UseFormSetValue } from "react-hook-form";
|
||||
// services
|
||||
import GithubIntegrationService from "services/integration/github.service";
|
||||
// ui
|
||||
import { Loader, PrimaryButton, SecondaryButton } from "components/ui";
|
||||
// types
|
||||
import { IUserDetails, TFormValues, TIntegrationSteps } from "components/integration";
|
||||
// fetch-keys
|
||||
import { GITHUB_REPOSITORY_INFO } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
selectedRepo: any;
|
||||
handleStepChange: (value: TIntegrationSteps) => void;
|
||||
setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
|
||||
setValue: UseFormSetValue<TFormValues>;
|
||||
};
|
||||
|
||||
export const GithubRepoDetails: FC<Props> = ({
|
||||
selectedRepo,
|
||||
handleStepChange,
|
||||
setUsers,
|
||||
setValue,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { data: repoInfo } = useSWR(
|
||||
workspaceSlug && selectedRepo
|
||||
? GITHUB_REPOSITORY_INFO(workspaceSlug as string, selectedRepo.name)
|
||||
: null,
|
||||
workspaceSlug && selectedRepo
|
||||
? () =>
|
||||
GithubIntegrationService.getGithubRepoInfo(workspaceSlug as string, {
|
||||
owner: selectedRepo.owner.login,
|
||||
repo: selectedRepo.name,
|
||||
})
|
||||
: null
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!repoInfo) return;
|
||||
|
||||
setValue("collaborators", repoInfo.collaborators);
|
||||
|
||||
const fetchedUsers = repoInfo.collaborators.map((collaborator) => ({
|
||||
username: collaborator.login,
|
||||
import: "map",
|
||||
email: "",
|
||||
}));
|
||||
setUsers(fetchedUsers);
|
||||
}, [repoInfo, setUsers, setValue]);
|
||||
|
||||
return (
|
||||
<div className="mt-6">
|
||||
{repoInfo ? (
|
||||
repoInfo.issue_count > 0 ? (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="font-medium">Repository Details</div>
|
||||
<div className="text-sm text-custom-text-200">Import completed. We have found:</div>
|
||||
</div>
|
||||
<div className="mt-4 flex gap-16">
|
||||
<div className="flex-shrink-0 text-center">
|
||||
<p className="text-3xl font-bold">{repoInfo.issue_count}</p>
|
||||
<h6 className="text-sm text-custom-text-200">Issues</h6>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-center">
|
||||
<p className="text-3xl font-bold">{repoInfo.labels}</p>
|
||||
<h6 className="text-sm text-custom-text-200">Labels</h6>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-center">
|
||||
<p className="text-3xl font-bold">{repoInfo.collaborators.length}</p>
|
||||
<h6 className="text-sm text-custom-text-200">Users</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<h5>We didn{"'"}t find any issue in this repository.</h5>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="70px" />
|
||||
</Loader>
|
||||
)}
|
||||
<div className="mt-6 flex items-center justify-end gap-2">
|
||||
<SecondaryButton onClick={() => handleStepChange("import-data")}>Back</SecondaryButton>
|
||||
<PrimaryButton
|
||||
onClick={() => handleStepChange("import-users")}
|
||||
disabled={!repoInfo || repoInfo.issue_count === 0}
|
||||
>
|
||||
Next
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
273
web/components/integration/github/root.tsx
Normal file
273
web/components/integration/github/root.tsx
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { useForm } from "react-hook-form";
|
||||
// services
|
||||
import IntegrationService from "services/integration";
|
||||
import GithubIntegrationService from "services/integration/github.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import {
|
||||
GithubImportConfigure,
|
||||
GithubImportData,
|
||||
GithubRepoDetails,
|
||||
GithubImportUsers,
|
||||
GithubImportConfirm,
|
||||
} from "components/integration";
|
||||
// icons
|
||||
import { CogIcon, CloudUploadIcon, UsersIcon, CheckIcon } from "components/icons";
|
||||
import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
|
||||
// images
|
||||
import GithubLogo from "public/services/github.png";
|
||||
// types
|
||||
import { ICurrentUserResponse, IGithubRepoCollaborator, IGithubServiceImportFormData } from "types";
|
||||
// fetch-keys
|
||||
import {
|
||||
APP_INTEGRATIONS,
|
||||
IMPORTER_SERVICES_LIST,
|
||||
WORKSPACE_INTEGRATIONS,
|
||||
} from "constants/fetch-keys";
|
||||
|
||||
export type TIntegrationSteps =
|
||||
| "import-configure"
|
||||
| "import-data"
|
||||
| "repo-details"
|
||||
| "import-users"
|
||||
| "import-confirm";
|
||||
export interface IIntegrationData {
|
||||
state: TIntegrationSteps;
|
||||
}
|
||||
|
||||
export interface IUserDetails {
|
||||
username: string;
|
||||
import: any;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export type TFormValues = {
|
||||
github: any;
|
||||
project: string | null;
|
||||
sync: boolean;
|
||||
collaborators: IGithubRepoCollaborator[];
|
||||
users: IUserDetails[];
|
||||
};
|
||||
|
||||
const defaultFormValues = {
|
||||
github: null,
|
||||
project: null,
|
||||
sync: false,
|
||||
};
|
||||
|
||||
const integrationWorkflowData = [
|
||||
{
|
||||
title: "Configure",
|
||||
key: "import-configure",
|
||||
icon: CogIcon,
|
||||
},
|
||||
{
|
||||
title: "Import Data",
|
||||
key: "import-data",
|
||||
icon: CloudUploadIcon,
|
||||
},
|
||||
{ title: "Issues", key: "repo-details", icon: ListBulletIcon },
|
||||
{
|
||||
title: "Users",
|
||||
key: "import-users",
|
||||
icon: UsersIcon,
|
||||
},
|
||||
{
|
||||
title: "Confirm",
|
||||
key: "import-confirm",
|
||||
icon: CheckIcon,
|
||||
},
|
||||
];
|
||||
|
||||
type Props = {
|
||||
user: ICurrentUserResponse | undefined;
|
||||
};
|
||||
|
||||
export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
|
||||
const [currentStep, setCurrentStep] = useState<IIntegrationData>({
|
||||
state: "import-configure",
|
||||
});
|
||||
const [users, setUsers] = useState<IUserDetails[]>([]);
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, provider } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { handleSubmit, control, setValue, watch } = useForm<TFormValues>({
|
||||
defaultValues: defaultFormValues,
|
||||
});
|
||||
|
||||
const { data: appIntegrations } = useSWR(APP_INTEGRATIONS, () =>
|
||||
IntegrationService.getAppIntegrationsList()
|
||||
);
|
||||
|
||||
const { data: workspaceIntegrations } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
|
||||
workspaceSlug
|
||||
? () => IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const activeIntegrationState = () => {
|
||||
const currentElementIndex = integrationWorkflowData.findIndex(
|
||||
(i) => i?.key === currentStep?.state
|
||||
);
|
||||
|
||||
return currentElementIndex;
|
||||
};
|
||||
|
||||
const handleStepChange = (value: TIntegrationSteps) => {
|
||||
setCurrentStep((prevData) => ({ ...prevData, state: value }));
|
||||
};
|
||||
|
||||
// current integration from all the integrations available
|
||||
const integration =
|
||||
appIntegrations &&
|
||||
appIntegrations.length > 0 &&
|
||||
appIntegrations.find((i) => i.provider === provider);
|
||||
|
||||
// current integration from workspace integrations
|
||||
const workspaceIntegration =
|
||||
integration &&
|
||||
workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
|
||||
|
||||
const createGithubImporterService = async (formData: TFormValues) => {
|
||||
if (!formData.github || !formData.project) return;
|
||||
|
||||
const payload: IGithubServiceImportFormData = {
|
||||
metadata: {
|
||||
owner: formData.github.owner.login,
|
||||
name: formData.github.name,
|
||||
repository_id: formData.github.id,
|
||||
url: formData.github.html_url,
|
||||
},
|
||||
data: {
|
||||
users: users,
|
||||
},
|
||||
config: {
|
||||
sync: formData.sync,
|
||||
},
|
||||
project_id: formData.project,
|
||||
};
|
||||
|
||||
await GithubIntegrationService.createGithubServiceImport(workspaceSlug as string, payload, user)
|
||||
.then(() => {
|
||||
router.push(`/${workspaceSlug}/settings/imports`);
|
||||
mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string));
|
||||
})
|
||||
.catch(() =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Import was unsuccessful. Please try again.",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(createGithubImporterService)}>
|
||||
<div className="space-y-2">
|
||||
<Link href={`/${workspaceSlug}/settings/imports`}>
|
||||
<div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
|
||||
<ArrowLeftIcon className="h-3 w-3" />
|
||||
<div>Cancel import & go back</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-10 w-10 flex-shrink-0">
|
||||
<Image src={GithubLogo} alt="GithubLogo" />
|
||||
</div>
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
{integrationWorkflowData.map((integration, index) => (
|
||||
<React.Fragment key={integration.key}>
|
||||
<div
|
||||
className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
|
||||
index <= activeIntegrationState()
|
||||
? `border-custom-primary bg-custom-primary ${
|
||||
index === activeIntegrationState()
|
||||
? "border-opacity-100 bg-opacity-100"
|
||||
: "border-opacity-80 bg-opacity-80"
|
||||
}`
|
||||
: "border-custom-border-200"
|
||||
}`}
|
||||
>
|
||||
<integration.icon
|
||||
width="18px"
|
||||
height="18px"
|
||||
color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
|
||||
/>
|
||||
</div>
|
||||
{index < integrationWorkflowData.length - 1 && (
|
||||
<div
|
||||
key={index}
|
||||
className={`border-b px-7 ${
|
||||
index <= activeIntegrationState() - 1
|
||||
? `border-custom-primary`
|
||||
: `border-custom-border-200`
|
||||
}`}
|
||||
>
|
||||
{" "}
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full space-y-4">
|
||||
<div className="w-full">
|
||||
{currentStep?.state === "import-configure" && (
|
||||
<GithubImportConfigure
|
||||
handleStepChange={handleStepChange}
|
||||
provider={provider as string}
|
||||
appIntegrations={appIntegrations}
|
||||
workspaceIntegrations={workspaceIntegrations}
|
||||
/>
|
||||
)}
|
||||
{currentStep?.state === "import-data" && (
|
||||
<GithubImportData
|
||||
handleStepChange={handleStepChange}
|
||||
integration={workspaceIntegration}
|
||||
control={control}
|
||||
watch={watch}
|
||||
/>
|
||||
)}
|
||||
{currentStep?.state === "repo-details" && (
|
||||
<GithubRepoDetails
|
||||
selectedRepo={watch("github")}
|
||||
handleStepChange={handleStepChange}
|
||||
setUsers={setUsers}
|
||||
setValue={setValue}
|
||||
/>
|
||||
)}
|
||||
{currentStep?.state === "import-users" && (
|
||||
<GithubImportUsers
|
||||
handleStepChange={handleStepChange}
|
||||
users={users}
|
||||
setUsers={setUsers}
|
||||
watch={watch}
|
||||
/>
|
||||
)}
|
||||
{currentStep?.state === "import-confirm" && (
|
||||
<GithubImportConfirm handleStepChange={handleStepChange} watch={watch} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
97
web/components/integration/github/select-repository.tsx
Normal file
97
web/components/integration/github/select-repository.tsx
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWRInfinite from "swr/infinite";
|
||||
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// ui
|
||||
import { CustomSearchSelect } from "components/ui";
|
||||
// helpers
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import { IWorkspaceIntegration, IGithubRepository } from "types";
|
||||
|
||||
type Props = {
|
||||
integration: IWorkspaceIntegration;
|
||||
value: any;
|
||||
label: string | JSX.Element;
|
||||
onChange: (repo: any) => void;
|
||||
characterLimit?: number;
|
||||
};
|
||||
|
||||
export const SelectRepository: React.FC<Props> = ({
|
||||
integration,
|
||||
value,
|
||||
label,
|
||||
onChange,
|
||||
characterLimit = 25,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const getKey = (pageIndex: number) => {
|
||||
if (!workspaceSlug || !integration) return;
|
||||
|
||||
return `${
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL
|
||||
}/api/workspaces/${workspaceSlug}/workspace-integrations/${
|
||||
integration.id
|
||||
}/github-repositories/?page=${++pageIndex}`;
|
||||
};
|
||||
|
||||
const fetchGithubRepos = async (url: string) => {
|
||||
const data = await projectService.getGithubRepositories(url);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
const {
|
||||
data: paginatedData,
|
||||
size,
|
||||
setSize,
|
||||
isValidating,
|
||||
} = useSWRInfinite(getKey, fetchGithubRepos);
|
||||
|
||||
let userRepositories = (paginatedData ?? []).map((data) => data.repositories).flat();
|
||||
userRepositories = userRepositories.filter((data) => data?.id);
|
||||
|
||||
const totalCount = paginatedData && paginatedData.length > 0 ? paginatedData[0].total_count : 0;
|
||||
|
||||
const options =
|
||||
userRepositories.map((repo) => ({
|
||||
value: repo.id,
|
||||
query: repo.full_name,
|
||||
content: <p>{truncateText(repo.full_name, characterLimit)}</p>,
|
||||
})) ?? [];
|
||||
|
||||
return (
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
options={options}
|
||||
onChange={(val: string) => {
|
||||
const repo = userRepositories.find((repo) => repo.id === val);
|
||||
|
||||
onChange(repo);
|
||||
}}
|
||||
label={label}
|
||||
footerOption={
|
||||
<>
|
||||
{userRepositories && options.length < totalCount && (
|
||||
<button
|
||||
type="button"
|
||||
className="w-full p-1 text-center text-[0.6rem] text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => setSize(size + 1)}
|
||||
disabled={isValidating}
|
||||
>
|
||||
{isValidating ? "Loading..." : "Click to load more..."}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
position="right"
|
||||
optionsClassName="w-full"
|
||||
/>
|
||||
);
|
||||
};
|
||||
122
web/components/integration/github/single-user-select.tsx
Normal file
122
web/components/integration/github/single-user-select.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// ui
|
||||
import { Avatar, CustomSearchSelect, CustomSelect, Input } from "components/ui";
|
||||
// types
|
||||
import { IGithubRepoCollaborator } from "types";
|
||||
import { IUserDetails } from "./root";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
type Props = {
|
||||
collaborator: IGithubRepoCollaborator;
|
||||
index: number;
|
||||
users: IUserDetails[];
|
||||
setUsers: React.Dispatch<React.SetStateAction<IUserDetails[]>>;
|
||||
};
|
||||
|
||||
const importOptions = [
|
||||
{
|
||||
key: "map",
|
||||
label: "Map to existing",
|
||||
},
|
||||
{
|
||||
key: "invite",
|
||||
label: "Invite by email",
|
||||
},
|
||||
{
|
||||
key: false,
|
||||
label: "Do not import",
|
||||
},
|
||||
];
|
||||
|
||||
export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users, setUsers }) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null,
|
||||
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug.toString()) : null
|
||||
);
|
||||
|
||||
const options = members?.map((member) => ({
|
||||
value: member.member.display_name,
|
||||
query: member.member.display_name ?? "",
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar user={member.member} />
|
||||
{member.member.display_name}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3 items-center gap-2 rounded-md bg-custom-background-80 px-2 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative h-8 w-8 flex-shrink-0 rounded">
|
||||
<img
|
||||
src={collaborator.avatar_url}
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded"
|
||||
alt={`${collaborator.login} GitHub user`}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm">{collaborator.login}</p>
|
||||
</div>
|
||||
<div>
|
||||
<CustomSelect
|
||||
value={users[index].import}
|
||||
label={
|
||||
<div className="text-xs">
|
||||
{importOptions.find((o) => o.key === users[index].import)?.label}
|
||||
</div>
|
||||
}
|
||||
onChange={(val: any) => {
|
||||
const newUsers = [...users];
|
||||
newUsers[index].import = val;
|
||||
newUsers[index].email = "";
|
||||
setUsers(newUsers);
|
||||
}}
|
||||
optionsClassName="w-full"
|
||||
noChevron
|
||||
>
|
||||
{importOptions.map((option) => (
|
||||
<CustomSelect.Option key={option.label} value={option.key}>
|
||||
<div>{option.label}</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
</div>
|
||||
{users[index].import === "invite" && (
|
||||
<Input
|
||||
type="email"
|
||||
name={`userEmail${index}`}
|
||||
value={users[index].email}
|
||||
onChange={(e) => {
|
||||
const newUsers = [...users];
|
||||
newUsers[index].email = e.target.value;
|
||||
setUsers(newUsers);
|
||||
}}
|
||||
placeholder="Enter email of the user"
|
||||
className="py-1 text-xs"
|
||||
/>
|
||||
)}
|
||||
{users[index].import === "map" && members && (
|
||||
<CustomSearchSelect
|
||||
value={users[index].email}
|
||||
label={users[index].email !== "" ? users[index].email : "Select user from project"}
|
||||
options={options}
|
||||
onChange={(val: string) => {
|
||||
const newUsers = [...users];
|
||||
newUsers[index].email = val;
|
||||
setUsers(newUsers);
|
||||
}}
|
||||
optionsClassName="w-full"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue