Merge pull request TabbyML#2071 from TabbyML/feat-ui-filtering-repos-by-active-status

fix(ui): filtering repos by active status

Author: liangfung

ee/tabby-ui/app/(dashboard)/settings/(integrations)/repository/[kind]/detail/components/add-repository-form.tsx

@@ -27,7 +27,11 @@ import {
   FormItem,
   FormMessage
 } from '@/components/ui/form'
-import { IconCheck, IconChevronUpDown } from '@/components/ui/icons'
+import {
+  IconCheck,
+  IconChevronUpDown,
+  IconSpinner
+} from '@/components/ui/icons'
 import {
   Popover,
   PopoverContent,
@@ -43,11 +47,11 @@ const formSchema = z.object({
   id: z.string()
 })
 
-type LinkRepositoryFormValues = z.infer<typeof formSchema>
+type ActivateRepositoryFormValues = z.infer<typeof formSchema>
 
-interface LinkRepositoryFormProps {
+interface ActivateRepositoryFormProps {
   kind: RepositoryKind
-  onCreated?: () => void
+  onCreated?: (id: string) => void
   onCancel: () => void
   providerStatus: RepositoryProviderStatus | undefined
   repositories:
@@ -62,20 +66,21 @@ interface LinkRepositoryFormProps {
         }
       }>
     | undefined
+  fetchingRepos: boolean
 }
 
-export default function LinkRepositoryForm({
+export default function AddRepositoryForm({
   kind,
   onCreated,
   onCancel,
   repositories,
-  providerStatus
-}: LinkRepositoryFormProps) {
+  providerStatus,
+  fetchingRepos
+}: ActivateRepositoryFormProps) {
   const [open, setOpen] = React.useState(false)
-  const form = useForm<LinkRepositoryFormValues>({
+  const form = useForm<ActivateRepositoryFormValues>({
     resolver: zodResolver(formSchema)
   })
-  const [searchValue, setSearchValue] = React.useState<string>()
   const commandListRef = React.useRef<HTMLDivElement>(null)
 
   const { isSubmitting } = form.formState
@@ -94,41 +99,41 @@ export default function LinkRepositoryForm({
   const updateGithubProvidedRepositoryActive = useMutation(
     updateGithubProvidedRepositoryActiveMutation,
     {
-      onCompleted(data) {
-        if (data?.updateGithubProvidedRepositoryActive) {
-          form.reset({ id: undefined })
-          onCreated?.()
-        }
-      },
       form
     }
   )
 
   const updateGitlabProvidedRepositoryActive = useMutation(
     updateGitlabProvidedRepositoryActiveMutation,
     {
-      onCompleted(data) {
-        if (data?.updateGitlabProvidedRepositoryActive) {
-          form.reset({ id: undefined })
-          onCreated?.()
-        }
-      },
       form
     }
   )
 
-  const onSubmit = (values: LinkRepositoryFormValues) => {
+  const onSubmit = (values: ActivateRepositoryFormValues) => {
+    const id = values.id
+
     if (kind === RepositoryKind.Github) {
       return updateGithubProvidedRepositoryActive({
         id: values.id,
         active: true
+      }).then(res => {
+        if (res?.data?.updateGithubProvidedRepositoryActive) {
+          form.reset({ id: undefined })
+          onCreated?.(id)
+        }
       })
     }
 
     if (kind === RepositoryKind.Gitlab) {
       return updateGitlabProvidedRepositoryActive({
         id: values.id,
         active: true
+      }).then(res => {
+        if (res?.data?.updateGitlabProvidedRepositoryActive) {
+          form.reset({ id: undefined })
+          onCreated?.(id)
+        }
       })
     }
   }
@@ -188,7 +193,15 @@ export default function LinkRepositoryForm({
                         className="max-h-[30vh]"
                         ref={commandListRef}
                       >
-                        <CommandEmpty>{emptyText}</CommandEmpty>
+                        <CommandEmpty>
+                          {fetchingRepos ? (
+                            <div className="flex justify-center">
+                              <IconSpinner className="h-6 w-6" />
+                            </div>
+                          ) : (
+                            emptyText
+                          )}
+                        </CommandEmpty>
                         <CommandGroup>
                           {providerStatus !==
                             RepositoryProviderStatus.Pending &&