fix(ui): clear fields after deleting mail settings (#1436)

* fix(ui): clear fields after deleting mail settings * fix: rename
TabbyML · Feb 11, 2024 · 7cd79a6 · 7cd79a6
1 parent c57d82c
commit 7cd79a6
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 22 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/mail/components/mail-form.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/mail/components/mail-form.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { isEmpty } from 'lodash-es'
-import { useForm } from 'react-hook-form'
+import { useForm, UseFormReturn } from 'react-hook-form'
 import { toast } from 'sonner'
 import * as z from 'zod'
 
@@ -70,12 +70,17 @@ interface MailFormProps {
   onDelete?: () => void
 }
 
-export const MailForm: React.FC<MailFormProps> = ({
-  isNew,
-  onSuccess,
-  onDelete,
-  defaultValues: propsDefaultValues
-}) => {
+interface MailFormRef {
+  form: UseFormReturn<MailFormValues>
+}
+
+const MailForm = React.forwardRef<MailFormRef, MailFormProps>((props, ref) => {
+  const {
+    isNew,
+    onSuccess,
+    onDelete,
+    defaultValues: propsDefaultValues
+  } = props
   const defaultValues = React.useMemo(() => {
     return {
       encryption: Encryption.None,
@@ -96,9 +101,6 @@ export const MailForm: React.FC<MailFormProps> = ({
       if (data?.updateEmailSetting) {
         onSuccess?.()
         toast.success('Email configuration is updated')
-
-        // clear dirty status
-        form.reset(defaultValues)
       }
     }
   })
@@ -131,6 +133,14 @@ export const MailForm: React.FC<MailFormProps> = ({
     })
   }
 
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      form
+    }),
+    [form]
+  )
+
   return (
     <Form {...form}>
       <div className="flex flex-col items-start gap-4">
@@ -324,7 +334,7 @@ export const MailForm: React.FC<MailFormProps> = ({
                 </AlertDialogContent>
               </AlertDialog>
             )}
-            <Button type="submit" disabled={!isDirty}>
+            <Button type="submit" disabled={!isNew && !isDirty}>
               {isNew ? 'Create' : 'Update'}
             </Button>
           </div>
@@ -333,4 +343,9 @@ export const MailForm: React.FC<MailFormProps> = ({
       </div>
     </Form>
   )
-}
+})
+
+MailForm.displayName = 'MailForm'
+
+export { MailForm }
+export type { MailFormRef }
diff --git a/ee/tabby-ui/app/(dashboard)/settings/(integrations)/mail/components/mail.tsx b/ee/tabby-ui/app/(dashboard)/settings/(integrations)/mail/components/mail.tsx
@@ -1,13 +1,16 @@
 'use client'
 
-import { useQuery } from 'urql'
+import React from 'react'
+import { OperationResult } from 'urql'
 
 import { graphql } from '@/lib/gql/generates'
-import { useIsQueryInitialized } from '@/lib/tabby/gql'
+import { EmailSettingQuery } from '@/lib/gql/generates/graphql'
+import { client } from '@/lib/tabby/gql'
 import { ListSkeleton } from '@/components/skeleton'
 
 import { MailDeliveryHeader } from './header'
 import { MailForm } from './mail-form'
+import type { MailFormRef } from './mail-form'
 import MailTestingForm from './mail-testing-form'
 
 const emailSetting = graphql(/* GraphQL */ `
@@ -23,23 +26,61 @@ const emailSetting = graphql(/* GraphQL */ `
   }
 `)
 
+const ENCODE_PASSWORD = '********************************'
+
 export const Mail = () => {
-  const [{ data, error }, reexecuteQuery] = useQuery({ query: emailSetting })
-  const [initialized] = useIsQueryInitialized({ data, error })
+  const [queryResult, setQueryResult] =
+    React.useState<OperationResult<EmailSettingQuery, any>>()
+  const [initialized, setInitialized] = React.useState(false)
+  const mailFormRef = React.useRef<MailFormRef>(null)
+
+  const queryEmailSettings = () => {
+    return client
+      .query(emailSetting, {})
+      .toPromise()
+      .then(res => {
+        setQueryResult(res)
+        setInitialized(true)
+        return res
+      })
+  }
 
-  const isNew = !data?.emailSetting
+  const isNew = !queryResult?.data?.emailSetting
 
   const onSendTest = async () => {
     // todo
   }
 
+  const handleMailFormSuccess = () => {
+    queryEmailSettings().then(res => {
+      const newEmailSettings = res?.data?.emailSetting
+      if (newEmailSettings) {
+        // reset latest settings
+        mailFormRef.current?.form?.reset({
+          ...newEmailSettings,
+          smtpPassword: ENCODE_PASSWORD
+        })
+      }
+    })
+  }
+
+  const handleMailFormDelete = () => {
+    // MailForm re-render
+    setInitialized(false)
+    queryEmailSettings()
+  }
+
   const defaultValues = isNew
     ? {}
     : {
-        ...data.emailSetting,
-        smtpPassword: '********************************'
+        ...queryResult?.data?.emailSetting,
+        smtpPassword: ENCODE_PASSWORD
       }
 
+  React.useEffect(() => {
+    queryEmailSettings()
+  }, [])
+
   return (
     <>
       <MailDeliveryHeader />
@@ -49,8 +90,9 @@ export const Mail = () => {
             <MailForm
               defaultValues={defaultValues}
               isNew={isNew}
-              onSuccess={reexecuteQuery}
-              onDelete={reexecuteQuery}
+              onSuccess={handleMailFormSuccess}
+              onDelete={handleMailFormDelete}
+              ref={mailFormRef}
             />
           </div>
           <MailTestingForm onSendTest={onSendTest} />

diff --git a/ee/tabby-ui/lib/tabby/gql.ts b/ee/tabby-ui/lib/tabby/gql.ts
@@ -95,7 +95,7 @@ function useIsQueryInitialized({
 }: {
   data?: any
   error?: CombinedError
-}) {
+}): [boolean, React.Dispatch<React.SetStateAction<boolean>>] {
   // todo urql do cache data, considering passing default `initialized` with data & stale
   const [initialized, setInitialized] = useState(false)