chore(ui): add prevalidate to sso creation

ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/components/credential-list.tsx

@@ -6,15 +6,14 @@ import { useRouter } from 'next/navigation'
 import { compact, find } from 'lodash-es'
 import { useQuery } from 'urql'
 
-import { graphql } from '@/lib/gql/generates'
 import {
   AuthProviderKind,
   LdapCredentialQuery,
   LicenseType,
   OAuthCredentialQuery,
   OAuthProvider
 } from '@/lib/gql/generates/graphql'
-import { ldapCredentialQuery } from '@/lib/tabby/query'
+import { ldapCredentialQuery, oauthCredential } from '@/lib/tabby/query'
 import { Button, buttonVariants } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import {
@@ -29,17 +28,6 @@ import LoadingWrapper from '@/components/loading-wrapper'
 
 import { PROVIDER_METAS } from '../constant'
 
-export const oauthCredential = graphql(/* GraphQL */ `
-  query OAuthCredential($provider: OAuthProvider!) {
-    oauthCredential(provider: $provider) {
-      provider
-      clientId
-      createdAt
-      updatedAt
-    }
-  }
-`)
-
 export const CredentialList = () => {
   const authProviderKindCount = useMemo(() => {
     return Object.keys(AuthProviderKind).length

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="mt-2 text-sm font-medium text-destructive">
+            {providerExistedError}
+          </div>
+        )}
         <form
-          className="grid gap-4"
+          className="mt-6 grid gap-4"
           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

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,
@@ -46,7 +47,6 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { CopyButton } from '@/components/copy-button'
 import { LicenseGuard } from '@/components/license-guard'
 
-import { oauthCredential } from './credential-list'
 import { SubTitle } from './form-sub-title'
 
 export const updateOauthCredentialMutation = graphql(/* GraphQL */ `
@@ -67,43 +67,65 @@ 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()
   const client = useClient()
   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
       }

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}

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>

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-6"
         />
       </LoadingWrapper>
     </div>

ee/tabby-ui/app/(dashboard)/settings/(integrations)/sso/new/component/new-page.tsx

@@ -2,9 +2,14 @@
 
 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'
@@ -13,27 +18,58 @@ import { SSOTypeRadio } from '../../components/sso-type-radio'
 export function NewPage() {
   const [type, setType] = useState<SSOType>('oauth')
   const router = useRouter()
+  const [{ data: githubData, fetching: fetchingGithub }] = useQuery({
+    query: oauthCredential,
+    variables: { provider: OAuthProvider.Github }
+  })
+  const [{ data: googleData, fetching: fetchingGoogle }] = useQuery({
+    query: oauthCredential,
+    variables: { provider: OAuthProvider.Google }
+  })
+  const [{ data: gitlabData, fetching: fetchingGitlab }] = useQuery({
+    query: oauthCredential,
+    variables: { provider: OAuthProvider.Gitlab }
+  })
+
+  const [{ data: ldapData, fetching: fetchingLdap }] = useQuery({
+    query: ldapCredentialQuery
+  })
+
+  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 (
-    <div>
-      <SSOTypeRadio value={type} onChange={setType} />
-      {type === 'oauth' ? (
-        <OAuthCredentialForm
-          provider={OAuthProvider.Github}
-          isNew
-          onSuccess={onCreateSuccess}
-        />
-      ) : (
-        <LDAPCredentialForm
-          isNew
-          defaultValues={{ skipTlsVerify: false }}
-          onSuccess={onCreateSuccess}
-        />
-      )}
-    </div>
+    <LoadingWrapper loading={fetchingProviders} fallback={<ListSkeleton />}>
+      <div>
+        <SSOTypeRadio value={type} onChange={setType} />
+        {type === 'oauth' ? (
+          <OAuthCredentialForm
+            isNew
+            defaultProvider={OAuthProvider.Github}
+            existedProviders={existedProviders}
+            onSuccess={onCreateSuccess}
+            className="mt-6"
+          />
+        ) : (
+          <LDAPCredentialForm
+            isNew
+            defaultValues={{ skipTlsVerify: false }}
+            onSuccess={onCreateSuccess}
+            existed={isLdapExisted}
+          />
+        )}
+      </div>
+    </LoadingWrapper>
   )
 }

ee/tabby-ui/lib/tabby/query.ts

@@ -493,6 +493,17 @@ export const ldapCredentialQuery = graphql(/* GraphQL */ `
   }
 `)
 
+export const oauthCredential = graphql(/* GraphQL */ `
+  query OAuthCredential($provider: OAuthProvider!) {
+    oauthCredential(provider: $provider) {
+      provider
+      clientId
+      createdAt
+      updatedAt
+    }
+  }
+`)
+
 export const repositorySourceListQuery = graphql(/* GraphQL */ `
   query RepositorySourceList {
     repositoryList {