From 9a69d54521a905c3040f992eb3f7fdc5d0da4e12 Mon Sep 17 00:00:00 2001
From: liangfung <jueliang@tabbyml.com>
Date: Mon, 20 Jan 2025 14:49:17 +0800
Subject: [PATCH] update

---
 .../sso/components/ldap-credential-form.tsx   | 16 ++++-
 .../sso/components/oauth-credential-form.tsx  | 62 +++++++++++++++----
 .../sso/components/sso-type-radio.tsx         |  2 +-
 .../components/oauth-credential-detail.tsx    |  5 +-
 .../components/ldap-credential-detail.tsx     |  1 +
 .../sso/new/component/new-page.tsx            | 40 +++++++-----
 6 files changed, 92 insertions(+), 34 deletions(-)

diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/ldap-credential-form.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/ldap-credential-form.tsx
index eca1bafb668d..ee205bb82727 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/ldap-credential-form.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/ldap-credential-form.tsx
@@ -90,13 +90,18 @@ interface LDAPFormProps extends React.HTMLAttributes<HTMLDivElement> {
   isNew?: boolean
   defaultValues?: Partial<LDAPFormValues> | undefined
   onSuccess?: (formValues: LDAPFormValues) => void
+  existed?: boolean
 }
 
+const providerExistedError =
+  'LDAP provider already exists and cannot be created again.'
+
 export function LDAPCredentialForm({
   className,
   isNew,
   defaultValues,
   onSuccess,
+  existed,
   ...props
 }: LDAPFormProps) {
   const router = useRouter()
@@ -157,7 +162,7 @@ export function LDAPCredentialForm({
         .then(res => !!res?.data?.ldapCredential)
       if (hasExistingProvider) {
         form.setError('root', {
-          message: 'Provider already exists.'
+          message: providerExistedError
         })
         return
       }
@@ -205,8 +210,13 @@ export function LDAPCredentialForm({
   return (
     <Form {...form}>
       <div className={cn('grid gap-2', className)} {...props}>
+        {existed && (
+          <div className="text-sm font-medium text-destructive mt-2">
+            {providerExistedError}
+          </div>
+        )}
         <form
-          className="grid gap-4"
+          className="grid gap-4 mt-6"
           onSubmit={form.handleSubmit(onSubmit)}
           ref={formRef}
         >
@@ -381,7 +391,7 @@ export function LDAPCredentialForm({
             name="skipTlsVerify"
             render={({ field }) => (
               <FormItem>
-                <FormLabel required>Connection security</FormLabel>
+                <FormLabel>Connection security</FormLabel>
                 <div className="flex items-center gap-1">
                   <FormControl>
                     <Checkbox
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/oauth-credential-form.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/oauth-credential-form.tsx
index 81772601e892..f0c6b0cfaa44 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/oauth-credential-form.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/oauth-credential-form.tsx
@@ -12,6 +12,7 @@ import * as z from 'zod'
 import { graphql } from '@/lib/gql/generates'
 import { LicenseType, OAuthProvider } from '@/lib/gql/generates/graphql'
 import { useMutation } from '@/lib/tabby/gql'
+import { oauthCredential } from '@/lib/tabby/query'
 import { cn } from '@/lib/utils'
 import {
   AlertDialog,
@@ -47,7 +48,6 @@ import { CopyButton } from '@/components/copy-button'
 import { LicenseGuard } from '@/components/license-guard'
 
 import { SubTitle } from './form-sub-title'
-import { oauthCredential } from '@/lib/tabby/query'
 
 export const updateOauthCredentialMutation = graphql(/* GraphQL */ `
   mutation updateOauthCredential($input: UpdateOAuthCredentialInput!) {
@@ -67,28 +67,38 @@ const oauthCallbackUrl = graphql(/* GraphQL */ `
   }
 `)
 
-const formSchema = z.object({
+const defaultFormSchema = z.object({
   clientId: z.string(),
-  clientSecret: z.string().optional(),
+  clientSecret: z.string(),
   provider: z.nativeEnum(OAuthProvider)
 })
 
-export type OAuthCredentialFormValues = z.infer<typeof formSchema>
+const updateFormSchema = defaultFormSchema.extend({
+  clientSecret: z.string().optional()
+})
+
+const providerExistedError =
+  'Provider already exists. Please choose another one'
 
 interface OAuthCredentialFormProps
   extends React.HTMLAttributes<HTMLDivElement> {
   isNew?: boolean
-  provider: OAuthProvider
-  defaultValues?: Partial<OAuthCredentialFormValues> | undefined
-  onSuccess?: (formValues: OAuthCredentialFormValues) => void
+  defaultProvider: OAuthProvider
+  defaultValues?: Partial<z.infer<typeof defaultFormSchema>> | undefined
+  onSuccess?: (formValues: z.infer<typeof defaultFormSchema>) => void
+  /**
+   * for creation, if there are existed providers, show a error message
+   */
+  existedProviders?: OAuthProvider[]
 }
 
 export default function OAuthCredentialForm({
   className,
   isNew,
-  provider,
+  defaultProvider,
   defaultValues,
   onSuccess,
+  existedProviders,
   ...props
 }: OAuthCredentialFormProps) {
   const router = useRouter()
@@ -96,14 +106,26 @@ export default function OAuthCredentialForm({
   const formatedDefaultValues = React.useMemo(() => {
     return {
       ...(defaultValues || {}),
-      provider
+      provider: defaultProvider || OAuthProvider.Github
     }
   }, [])
 
   const [deleteAlertVisible, setDeleteAlertVisible] = React.useState(false)
   const [isDeleting, setIsDeleting] = React.useState(false)
 
-  const form = useForm<OAuthCredentialFormValues>({
+  const formSchema = React.useMemo(() => {
+    if (!isNew) return updateFormSchema
+
+    return defaultFormSchema.extend({
+      provider: z
+        .nativeEnum(OAuthProvider)
+        .refine(v => !existedProviders?.includes(v), {
+          message: providerExistedError
+        })
+    })
+  }, [isNew, existedProviders])
+
+  const form = useForm<z.infer<typeof defaultFormSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: formatedDefaultValues
   })
@@ -125,16 +147,32 @@ export default function OAuthCredentialForm({
     form
   })
 
+  const provider = form.watch('provider')
+
+  React.useEffect(() => {
+    if (!isNew) {
+      return
+    }
+
+    if (provider && existedProviders?.includes(provider)) {
+      form.setError('provider', {
+        message: providerExistedError
+      })
+    } else {
+      form.clearErrors('provider')
+    }
+  }, [provider, isNew, existedProviders])
+
   const deleteOAuthCredential = useMutation(deleteOauthCredentialMutation)
 
-  const onSubmit = async (values: OAuthCredentialFormValues) => {
+  const onSubmit = async (values: z.infer<typeof defaultFormSchema>) => {
     if (isNew) {
       const hasExistingProvider = await client
         .query(oauthCredential, { provider: values.provider })
         .then(res => !!res?.data?.oauthCredential)
       if (hasExistingProvider) {
         form.setError('provider', {
-          message: 'Provider already exists. Please choose another one'
+          message: providerExistedError
         })
         return
       }
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/sso-type-radio.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/sso-type-radio.tsx
index ec60c197d7a4..6a0f338abb51 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/sso-type-radio.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/sso-type-radio.tsx
@@ -17,7 +17,7 @@ export function SSOTypeRadio({
   readonly
 }: SSOTypeRadioProps) {
   return (
-    <div className={cn('mb-6 space-y-2', className)}>
+    <div className={cn('space-y-2', className)}>
       <Label>Type</Label>
       <RadioGroup
         value={value}
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/detail/[oauth-provider]/components/oauth-credential-detail.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/detail/[oauth-provider]/components/oauth-credential-detail.tsx
index 1d1a2b4e47db..0356117f42d9 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/detail/[oauth-provider]/components/oauth-credential-detail.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/detail/[oauth-provider]/components/oauth-credential-detail.tsx
@@ -6,10 +6,10 @@ import { isNil, pickBy } from 'lodash-es'
 import { useQuery } from 'urql'
 
 import { OAuthProvider } from '@/lib/gql/generates/graphql'
+import { oauthCredential } from '@/lib/tabby/query'
 import LoadingWrapper from '@/components/loading-wrapper'
 import { ListSkeleton } from '@/components/skeleton'
 
-import { oauthCredential } from '../../../components/credential-list'
 import OAuthCredentialForm from '../../../components/oauth-credential-form'
 import { SSOTypeRadio } from '../../../components/sso-type-radio'
 
@@ -46,9 +46,10 @@ const OAuthCredentialDetail: React.FC<OAuthCredentialDetailProps> = ({
       >
         <SSOTypeRadio value="oauth" readonly />
         <OAuthCredentialForm
-          provider={provider}
           defaultValues={defaultValues}
           onSuccess={onSubmitSuccess}
+          className="mt-6"
+          defaultProvider={provider}
         />
       </LoadingWrapper>
     </div>
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/detail/ldap/components/ldap-credential-detail.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/detail/ldap/components/ldap-credential-detail.tsx
index 04a05718c610..5a978ae1403b 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/detail/ldap/components/ldap-credential-detail.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/detail/ldap/components/ldap-credential-detail.tsx
@@ -44,6 +44,7 @@ export const LdapCredentialDetail: React.FC<
         <LDAPCredentialForm
           defaultValues={defaultValues}
           onSuccess={onSubmitSuccess}
+          className="-mt-64"
         />
       </LoadingWrapper>
     </div>
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/new/component/new-page.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/new/component/new-page.tsx
index b7e7b288a34d..68a87c8401bf 100644
--- a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/new/component/new-page.tsx
+++ b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/new/component/new-page.tsx
@@ -2,18 +2,18 @@
 
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { compact } from 'lodash-es'
+import { useQuery } from 'urql'
 
 import { OAuthProvider } from '@/lib/gql/generates/graphql'
+import { ldapCredentialQuery, oauthCredential } from '@/lib/tabby/query'
 import { SSOType } from '@/lib/types'
+import LoadingWrapper from '@/components/loading-wrapper'
+import { ListSkeleton } from '@/components/skeleton'
 
 import { LDAPCredentialForm } from '../../components/ldap-credential-form'
 import OAuthCredentialForm from '../../components/oauth-credential-form'
 import { SSOTypeRadio } from '../../components/sso-type-radio'
-import { useQuery } from 'urql'
-import { ldapCredentialQuery, oauthCredential } from '@/lib/tabby/query'
-import LoadingWrapper from '@/components/loading-wrapper'
-import { ListSkeleton } from '@/components/skeleton'
-import { compact } from 'lodash-es'
 
 export function NewPage() {
   const [type, setType] = useState<SSOType>('oauth')
@@ -35,30 +35,38 @@ export function NewPage() {
     query: ldapCredentialQuery
   })
 
-  const fetching = fetchingGithub || fetchingGoogle || fetchingGitlab || fetchingLdap
-  const isOauthAvaliable = compact([githubData?.oauthCredential, googleData?.oauthCredential, gitlabData?.oauthCredential]).length < 3
-  const isLdapAvaliable = !ldapData?.ldapCredential
+  const fetchingProviders =
+    fetchingGithub || fetchingGoogle || fetchingGitlab || fetchingLdap
+
+  const isLdapExisted = !!ldapData?.ldapCredential
+  const existedProviders = compact([
+    githubData?.oauthCredential && OAuthProvider.Github,
+    googleData?.oauthCredential && OAuthProvider.Google,
+    gitlabData?.oauthCredential && OAuthProvider.Gitlab
+  ])
 
   const onCreateSuccess = () => {
     router.replace('/settings/sso')
   }
 
   return (
-    <LoadingWrapper
-      loading={fetching}
-      fallback={<ListSkeleton />}
-    >
+    <LoadingWrapper loading={fetchingProviders} fallback={<ListSkeleton />}>
       <div>
         <SSOTypeRadio value={type} onChange={setType} />
         {type === 'oauth' ? (
-          <OAuthCredentialForm provider={OAuthProvider.Github} isNew />
+          <OAuthCredentialForm
+            isNew
+            defaultProvider={OAuthProvider.Github}
+            existedProviders={existedProviders}
+            onSuccess={onCreateSuccess}
+            className="mt-6"
+          />
         ) : (
           <LDAPCredentialForm
             isNew
             defaultValues={{ skipTlsVerify: false }}
-            onSuccess={() => {
-              router.replace('/settings/sso')
-            }}
+            onSuccess={onCreateSuccess}
+            existed={isLdapExisted}
           />
         )}
       </div>