feat(ui): integrate gitlab repositories

TabbyML · Apr 27, 2024 · 39339d7 · 39339d7
1 parent 4184b1b
commit 39339d7
Show file tree

Hide file tree

Showing 23 changed files with 947 additions and 170 deletions.
diff --git a/...ository/github/components/github-form.tsx → ...kind]/components/common-provider-form.tsx b/...ository/github/components/github-form.tsx → ...kind]/components/common-provider-form.tsx
@@ -9,6 +9,7 @@ import { useForm, UseFormReturn } from 'react-hook-form'
 import { toast } from 'sonner'
 import * as z from 'zod'
 
+import { RepositoryKind } from '@/lib/gql/generates/graphql'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -33,6 +34,8 @@ import {
 import { IconExternalLink, IconSpinner } from '@/components/ui/icons'
 import { Input } from '@/components/ui/input'
 
+import { useRepositoryKind } from '../hooks/use-repository-kind'
+
 export const repositoryProviderFormSchema = z.object({
   displayName: z.string(),
   accessToken: z.string()
@@ -51,14 +54,15 @@ interface GithubProviderFormProps {
   deletable?: boolean
 }
 
-export const GithubProviderForm: React.FC<GithubProviderFormProps> = ({
+export const ProviderForm: React.FC<GithubProviderFormProps> = ({
   isNew,
   form,
   onSubmit,
   onDelete,
   cancleable = true,
   deletable
 }) => {
+  const kind = useRepositoryKind()
   const router = useRouter()
 
   const [deleteAlertVisible, setDeleteAlertVisible] = React.useState(false)
@@ -83,6 +87,29 @@ export const GithubProviderForm: React.FC<GithubProviderFormProps> = ({
     }
   }
 
+  const displayNamePlaceholder = React.useMemo(() => {
+    switch (kind) {
+      case RepositoryKind.Github:
+        return 'e.g. GitHub'
+      case RepositoryKind.Gitlab:
+        return 'e.g. GitLab'
+      default:
+        return ''
+    }
+  }, [kind])
+
+  const accessTokenPlaceholder = React.useMemo(() => {
+    if (!isNew) return '*****'
+    switch (kind) {
+      case RepositoryKind.Github:
+        return 'e.g. github_pat_1ABCD1234ABCD1234ABCD1234ABCD1234ABCD1234'
+      case RepositoryKind.Gitlab:
+        return 'e.g. glpat_1ABCD1234ABCD1234ABCD1234ABCD1234'
+      default:
+        return ''
+    }
+  }, [kind, isNew])
+
   return (
     <Form {...form}>
       <div className="grid gap-2">
@@ -98,7 +125,7 @@ export const GithubProviderForm: React.FC<GithubProviderFormProps> = ({
                 </FormDescription>
                 <FormControl>
                   <Input
-                    placeholder="e.g. GitHub"
+                    placeholder={displayNamePlaceholder}
                     autoCapitalize="none"
                     autoCorrect="off"
                     autoComplete="off"
@@ -116,23 +143,11 @@ export const GithubProviderForm: React.FC<GithubProviderFormProps> = ({
               <FormItem>
                 <FormLabel required>Personal Access Token</FormLabel>
                 <FormDescription>
-                  <div>
-                    Create a dedicated service user and generate a{' '}
-                    <ExternalLink href="https://github.com/settings/personal-access-tokens/new">
-                      fine-grained personal access
-                    </ExternalLink>{' '}
-                    token with the member role for the organization or all
-                    projects to be managed.
-                  </div>
-                  <div className="my-2 ml-4">• Contents (Read-only)</div>
+                  <AccessTokenDescription />
                 </FormDescription>
                 <FormControl>
                   <Input
-                    placeholder={
-                      isNew
-                        ? 'e.g. github_pat_1ABCD1234ABCD1234ABCD1234ABCD1234ABCD1234'
-                        : '*****'
-                    }
+                    placeholder={accessTokenPlaceholder}
                     autoCapitalize="none"
                     autoCorrect="off"
                     autoComplete="off"
@@ -217,6 +232,45 @@ export function useRepositoryProviderForm(
   })
 }
 
+function AccessTokenDescription() {
+  const kind = useRepositoryKind()
+  if (kind === RepositoryKind.Github) {
+    return (
+      <>
+        <div>
+          Create a dedicated service user and generate a{' '}
+          <ExternalLink href="https://github.com/settings/personal-access-tokens/new">
+            fine-grained personal access
+          </ExternalLink>{' '}
+          token with the member role for the organization or all projects to be
+          managed.
+        </div>
+        <div className="my-2 ml-4">• Contents (Read-only)</div>
+      </>
+    )
+  }
+
+  if (kind === RepositoryKind.Gitlab) {
+    return (
+      <>
+        <div>
+          Create a dedicated service user and generate a{' '}
+          <ExternalLink href="https://gitlab.com/-/user_settings/personal_access_tokens">
+            personal access token
+          </ExternalLink>{' '}
+          with the maintainer role and at least following permissions for the
+          group or projects to be managed. You can generate a project access
+          token for managing a single project, or generate a group access token
+          to manage all projects within the group.
+        </div>
+        <div className="my-2 ml-4">• read repository</div>
+      </>
+    )
+  }
+
+  return null
+}
+
 function ExternalLink({
   href,
   children

diff --git a/...)/repository/github/components/github.tsx → ...itory/[kind]/components/provider-list.tsx b/...)/repository/github/components/github.tsx → ...itory/[kind]/components/provider-list.tsx
@@ -4,44 +4,88 @@ import Link from 'next/link'
 import { useQuery } from 'urql'
 
 import {
-  ListGithubRepositoryProvidersQuery,
+  RepositoryKind,
   RepositoryProviderStatus
 } from '@/lib/gql/generates/graphql'
-import { listGithubRepositoryProviders } from '@/lib/tabby/query'
+import {
+  listGithubRepositoryProviders,
+  listGitlabRepositoryProviders
+} from '@/lib/tabby/query'
 import { buttonVariants } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import LoadingWrapper from '@/components/loading-wrapper'
 
-export default function GitProvidersPage() {
+import { useRepositoryKind } from '../hooks/use-repository-kind'
+
+interface GitProvidersListProps {
+  kind: RepositoryKind
+}
+
+export default function RepositoryProvidersPage({
+  kind
+}: GitProvidersListProps) {
+  if (kind === RepositoryKind.Github) {
+    return <GithubProviders />
+  }
+
+  if (kind === RepositoryKind.Gitlab) {
+    return <GitlabProviders />
+  }
+
+  return <div>404</div>
+}
+
+function GithubProviders() {
   const [{ data, fetching }] = useQuery({
     query: listGithubRepositoryProviders
   })
-  const githubRepositoryProviders = data?.githubRepositoryProviders?.edges
+  const providers = data?.githubRepositoryProviders?.edges
+
+  return <RepositoryProvidersView fetching={fetching} providers={providers} />
+}
+
+function GitlabProviders() {
+  const [{ data, fetching }] = useQuery({
+    query: listGitlabRepositoryProviders
+  })
+  const providers = data?.gitlabRepositoryProviders?.edges
 
+  return <RepositoryProvidersView fetching={fetching} providers={providers} />
+}
+
+interface RepositoryProvidersViewProps {
+  fetching: boolean
+  providers:
+    | Array<{
+        node: {
+          id: string
+          displayName: string
+          status: RepositoryProviderStatus
+        }
+      }>
+    | undefined
+}
+function RepositoryProvidersView({
+  fetching,
+  providers
+}: RepositoryProvidersViewProps) {
   return (
-    <>
-      <LoadingWrapper loading={fetching}>
-        {githubRepositoryProviders?.length ? (
-          <div>
-            <GitProvidersList data={githubRepositoryProviders} />
-            <div className="mt-4 flex justify-end">
-              <Link href="./github/new" className={buttonVariants()}>
-                Create
-              </Link>
-            </div>
-          </div>
-        ) : (
-          <GitProvidersPlaceholder />
-        )}
-      </LoadingWrapper>
-    </>
+    <LoadingWrapper loading={fetching}>
+      {providers?.length ? (
+        <>
+          <GitProvidersList data={providers} />
+          <CreateRepositoryProvider />·
+        </>
+      ) : (
+        <GitProvidersPlaceholder />
+      )}
+    </LoadingWrapper>
   )
 }
 
 interface GitProvidersTableProps {
-  data: ListGithubRepositoryProvidersQuery['githubRepositoryProviders']['edges']
+  data: RepositoryProvidersViewProps['providers']
 }
-
 const GitProvidersList: React.FC<GitProvidersTableProps> = ({ data }) => {
   return (
     <div className="space-y-8">
@@ -78,6 +122,20 @@ const GitProvidersList: React.FC<GitProvidersTableProps> = ({ data }) => {
   )
 }
 
+const CreateRepositoryProvider = () => {
+  const kind = useRepositoryKind()
+  return (
+    <div className="mt-4 flex justify-end">
+      <Link
+        href={`./${kind.toLocaleLowerCase()}/new`}
+        className={buttonVariants()}
+      >
+        Create
+      </Link>
+    </div>
+  )
+}
+
 function toStatusMessage(status: RepositoryProviderStatus) {
   switch (status) {
     case RepositoryProviderStatus.Ready:
@@ -90,12 +148,13 @@ function toStatusMessage(status: RepositoryProviderStatus) {
 }
 
 const GitProvidersPlaceholder = () => {
+  const kind = useRepositoryKind()
   return (
     <div className="flex flex-col items-center gap-4 rounded-lg border-4 border-dashed py-8">
       <div>No Data</div>
       <div className="flex justify-center">
         <Link
-          href="./github/new"
+          href={`./${kind.toLocaleLowerCase()}/new`}
           className={buttonVariants({ variant: 'default' })}
         >
           Create

diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/[kind]/constants.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/[kind]/constants.tsx
@@ -0,0 +1,27 @@
+import { RepositoryKind } from '@/lib/gql/generates/graphql'
+
+export const REPOSITORY_KIND_METAS: Array<{
+  name: string
+  enum: RepositoryKind
+  meta: {
+    domain: string
+    displayName: string
+  }
+}> = [
+  {
+    name: 'github',
+    enum: RepositoryKind.Github,
+    meta: {
+      domain: 'github.com',
+      displayName: 'GitHub'
+    }
+  },
+  {
+    name: 'gitlab',
+    enum: RepositoryKind.Gitlab,
+    meta: {
+      domain: 'gitlab.com',
+      displayName: 'GitLab'
+    }
+  }
+]