From 583b6a94befcf24cf46ab64ec98be05d495e4b0f Mon Sep 17 00:00:00 2001
From: aliang <1098486429@qq.com>
Date: Fri, 26 Apr 2024 12:04:18 +0800
Subject: [PATCH] fix(ui): update github providers (#1969)

* fix(ui): update github providers

* remove useless var
---
 .../github/components/github-form.tsx         | 260 ++++++++++++------
 .../components/provider-detail-form.tsx       |  91 +-----
 .../github/new/components/new-page.tsx        |  32 +--
 3 files changed, 193 insertions(+), 190 deletions(-)

diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/components/github-form.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/components/github-form.tsx
index a2015493a17b..2b1c11cee917 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/components/github-form.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/components/github-form.tsx
@@ -2,10 +2,25 @@
 
 import * as React from 'react'
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { isEmpty } from 'lodash-es'
 import { useForm, UseFormReturn } from 'react-hook-form'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog'
+import { Button, buttonVariants } from '@/components/ui/button'
 import {
   Form,
   FormControl,
@@ -15,7 +30,7 @@ import {
   FormLabel,
   FormMessage
 } from '@/components/ui/form'
-import { IconExternalLink } from '@/components/ui/icons'
+import { IconExternalLink, IconSpinner } from '@/components/ui/icons'
 import { Input } from '@/components/ui/input'
 
 export const createGithubProviderSchema = z.object({
@@ -41,8 +56,10 @@ export type UpdateGithubProviderFormValues = z.infer<
 interface GithubProviderFormProps {
   isNew?: boolean
   defaultValues?: Partial<z.infer<typeof createGithubProviderSchema>>
-  footer: React.ReactNode
   onSubmit: (values: any) => Promise<any>
+  onDelete?: () => Promise<any>
+  cancleable?: boolean
+  deletable?: boolean
 }
 
 export const GithubProviderForm = React.forwardRef<
@@ -52,87 +69,172 @@ export const GithubProviderForm = React.forwardRef<
     >
   },
   GithubProviderFormProps
->(({ isNew, defaultValues, footer, onSubmit }, ref) => {
-  const formSchema = isNew
-    ? createGithubProviderSchema
-    : updateGithubProviderSchema
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues
-  })
+>(
+  (
+    { isNew, defaultValues, onSubmit, onDelete, cancleable = true, deletable },
+    ref
+  ) => {
+    const router = useRouter()
+    const formSchema = isNew
+      ? createGithubProviderSchema
+      : updateGithubProviderSchema
+
+    const [deleteAlertVisible, setDeleteAlertVisible] = React.useState(false)
+    const [isDeleting, setIsDeleting] = React.useState(false)
+    const form = useForm<z.infer<typeof formSchema>>({
+      resolver: zodResolver(formSchema),
+      defaultValues
+    })
+    const { isSubmitting, dirtyFields } = form.formState
+    const isDirty = !isEmpty(dirtyFields)
+
+    const handleDeleteRepositoryProvider: React.MouseEventHandler<
+      HTMLButtonElement
+    > = async e => {
+      e.preventDefault()
+      if (!onDelete) return
 
-  React.useImperativeHandle(
-    ref,
-    () => {
-      return {
-        form
+      setIsDeleting(true)
+      try {
+        await onDelete()
+      } catch (error) {
+        toast.error('Failed to delete GitHub repository provider')
+      } finally {
+        setIsDeleting(false)
       }
-    },
-    [form]
-  )
+    }
 
-  return (
-    <Form {...form}>
-      <div className="grid gap-2">
-        <form className="grid gap-6" onSubmit={form.handleSubmit(onSubmit)}>
-          <FormField
-            control={form.control}
-            name="displayName"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel required>Display name</FormLabel>
-                <FormDescription>
-                  A display name to help identifying different providers.
-                </FormDescription>
-                <FormControl>
-                  <Input
-                    placeholder="e.g. GitHub"
-                    autoCapitalize="none"
-                    autoCorrect="off"
-                    autoComplete="off"
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="accessToken"
-            render={({ field }) => (
-              <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>
-                </FormDescription>
-                <FormControl>
-                  <Input
-                    placeholder="e.g. github_pat_1ABCD1234ABCD1234ABCD1234ABCD1234ABCD1234"
-                    autoCapitalize="none"
-                    autoCorrect="off"
-                    autoComplete="off"
-                    {...field}
-                  />
-                </FormControl>
+    React.useImperativeHandle(
+      ref,
+      () => {
+        return {
+          form
+        }
+      },
+      [form]
+    )
+
+    return (
+      <Form {...form}>
+        <div className="grid gap-2">
+          <form className="grid gap-6" onSubmit={form.handleSubmit(onSubmit)}>
+            <FormField
+              control={form.control}
+              name="displayName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>Display name</FormLabel>
+                  <FormDescription>
+                    A display name to help identifying different providers.
+                  </FormDescription>
+                  <FormControl>
+                    <Input
+                      placeholder="e.g. GitHub"
+                      autoCapitalize="none"
+                      autoCorrect="off"
+                      autoComplete="off"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="accessToken"
+              render={({ field }) => (
+                <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>
+                  </FormDescription>
+                  <FormControl>
+                    <Input
+                      placeholder="e.g. github_pat_1ABCD1234ABCD1234ABCD1234ABCD1234ABCD1234"
+                      autoCapitalize="none"
+                      autoCorrect="off"
+                      autoComplete="off"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex items-center justify-between">
+              <div>
                 <FormMessage />
-              </FormItem>
-            )}
-          />
-          {footer}
-        </form>
-      </div>
-    </Form>
-  )
-})
+              </div>
+              <div className="flex gap-2">
+                {cancleable && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    disabled={isSubmitting}
+                    onClick={() => router.back()}
+                  >
+                    Cancel
+                  </Button>
+                )}
+                {deletable && (
+                  <AlertDialog
+                    open={deleteAlertVisible}
+                    onOpenChange={setDeleteAlertVisible}
+                  >
+                    <AlertDialogTrigger asChild>
+                      <Button type="button" variant="hover-destructive">
+                        Delete
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>
+                          Are you absolutely sure?
+                        </AlertDialogTitle>
+                        <AlertDialogDescription>
+                          This will delete the provider and remove any
+                          repositories that have already been added to the
+                          provider.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction
+                          className={buttonVariants({ variant: 'destructive' })}
+                          onClick={handleDeleteRepositoryProvider}
+                          disabled={isDeleting}
+                        >
+                          {isDeleting && <IconSpinner className="mr-2" />}
+                          Yes, delete it
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                )}
+                <Button
+                  type="submit"
+                  disabled={isSubmitting || (!isNew && !isDirty)}
+                >
+                  {isSubmitting && <IconSpinner className="mr-2" />}
+                  {isNew ? 'Create' : 'Update'}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </Form>
+    )
+  }
+)
 
 GithubProviderForm.displayName = 'GithubProviderForm'
 
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/detail/components/provider-detail-form.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/detail/components/provider-detail-form.tsx
index 048ad7b6f7d8..617e94223b13 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/detail/components/provider-detail-form.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/detail/components/provider-detail-form.tsx
@@ -1,27 +1,12 @@
 'use client'
 
 import React from 'react'
-import { isEmpty } from 'lodash-es'
 import { UseFormReturn } from 'react-hook-form'
 import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { graphql } from '@/lib/gql/generates'
 import { useMutation } from '@/lib/tabby/gql'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger
-} from '@/components/ui/alert-dialog'
-import { Button, buttonVariants } from '@/components/ui/button'
-import { FormMessage } from '@/components/ui/form'
-import { IconSpinner } from '@/components/ui/icons'
 
 import {
   GithubProviderForm,
@@ -61,11 +46,7 @@ export const UpdateProviderForm: React.FC<UpdateProviderFormProps> = ({
   const formRef = React.useRef<{
     form: UseFormReturn<UpdateGithubProviderFormValues>
   }>(null)
-  const [deleteAlertVisible, setDeleteAlertVisible] = React.useState(false)
-  const [isDeleting, setIsDeleting] = React.useState(false)
   const form = formRef.current?.form
-  const isSubmitting = form?.formState?.isSubmitting
-  const isDirty = !isEmpty(form?.formState?.dirtyFields)
 
   const deleteGithubRepositoryProvider = useMutation(
     deleteGithubRepositoryProviderMutation
@@ -94,24 +75,14 @@ export const UpdateProviderForm: React.FC<UpdateProviderFormProps> = ({
     })
   }
 
-  const handleDeleteRepositoryProvider: React.MouseEventHandler<
-    HTMLButtonElement
-  > = async e => {
-    e.preventDefault()
-    setIsDeleting(true)
-    try {
-      const res = await deleteGithubRepositoryProvider({ id })
-      if (res?.data?.deleteGithubRepositoryProvider) {
-        onDelete?.()
-      } else {
-        toast.error(
-          res?.error?.message || 'Failed to delete GitHub repository provider'
-        )
-      }
-    } catch (error) {
-      toast.error('Failed to delete GitHub repository provider')
-    } finally {
-      setIsDeleting(false)
+  const handleDeleteRepositoryProvider = async () => {
+    const res = await deleteGithubRepositoryProvider({ id })
+    if (res?.data?.deleteGithubRepositoryProvider) {
+      onDelete?.()
+    } else {
+      toast.error(
+        res?.error?.message || 'Failed to delete GitHub repository provider'
+      )
     }
   }
 
@@ -119,50 +90,10 @@ export const UpdateProviderForm: React.FC<UpdateProviderFormProps> = ({
     <GithubProviderForm
       ref={formRef}
       defaultValues={defaultValues}
-      footer={
-        <div className="flex justify-between">
-          <div>
-            <FormMessage />
-          </div>
-          <div className="items-cetner flex gap-4">
-            <AlertDialog
-              open={deleteAlertVisible}
-              onOpenChange={setDeleteAlertVisible}
-            >
-              <AlertDialogTrigger asChild>
-                <Button type="button" variant="hover-destructive">
-                  Delete
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    This will delete the provider and remove any repositories
-                    that have already been added to the provider.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                  <AlertDialogAction
-                    className={buttonVariants({ variant: 'destructive' })}
-                    onClick={handleDeleteRepositoryProvider}
-                    disabled={isDeleting}
-                  >
-                    {isDeleting && <IconSpinner className="mr-2" />}
-                    Yes, delete it
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-            <Button type="submit" disabled={!isDirty}>
-              {isSubmitting && <IconSpinner className="mr-2 " />}
-              Update
-            </Button>
-          </div>
-        </div>
-      }
       onSubmit={onSubmit}
+      onDelete={handleDeleteRepositoryProvider}
+      deletable
+      cancleable={false}
     />
   )
 }
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/new/components/new-page.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/new/components/new-page.tsx
index 83e971d7f74d..f3c94ce4d2b0 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/new/components/new-page.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/github/new/components/new-page.tsx
@@ -8,9 +8,6 @@ import { toast } from 'sonner'
 
 import { graphql } from '@/lib/gql/generates'
 import { useMutation } from '@/lib/tabby/gql'
-import { Button } from '@/components/ui/button'
-import { FormMessage } from '@/components/ui/form'
-import { IconSpinner } from '@/components/ui/icons'
 
 import {
   CreateGithubProviderFormValues,
@@ -31,8 +28,6 @@ export const NewProvider = () => {
   const formRef = React.useRef<{
     form: UseFormReturn<UpdateGithubProviderFormValues>
   }>(null)
-  const isSubmitting = formRef.current?.form?.formState?.isSubmitting
-
   const createGithubRepositoryProviderMutation = useMutation(
     createGithubRepositoryProvider,
     {
@@ -56,32 +51,7 @@ export const NewProvider = () => {
 
   return (
     <div className="ml-4">
-      <GithubProviderForm
-        isNew
-        ref={formRef}
-        footer={
-          <div className="flex items-center justify-between">
-            <div>
-              <FormMessage />
-            </div>
-            <div className="flex gap-2">
-              <Button
-                type="button"
-                variant="ghost"
-                disabled={isSubmitting}
-                onClick={() => router.back()}
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isSubmitting}>
-                {isSubmitting && <IconSpinner className="mr-2" />}
-                Create
-              </Button>
-            </div>
-          </div>
-        }
-        onSubmit={handleSubmit}
-      />
+      <GithubProviderForm isNew ref={formRef} onSubmit={handleSubmit} />
     </div>
   )
 }