Update form on datalink save (#12823)

MrFlashAccount · somebody1234 · jdunkerley · web-flow · commit 381e91c75463 · 2025-04-11T22:51:23.000+03:00
* Update form on datalink save

* Reset to the latest default values.

* Make forms less memoized XD

* Fix dropdowns for Datalinks in Asset Properties?

* :(

---------

Co-authored-by: somebody1234 &lt;ehern.lee@gmail.com&gt;
Co-authored-by: James Dunkerley &lt;jdunkerley@users.noreply.github.com&gt;
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/Form.tsx b/app/gui/src/dashboard/components/AriaComponents/Form/Form.tsx
@@ -1,10 +1,6 @@
 /** @file Form component. */
 import * as React from 'react'
 
-import * as textProvider from '#/providers/TextProvider'
-
-import * as aria from '#/components/aria'
-
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { forwardRef } from '#/utilities/react'
 import * as dialog from '../Dialog'
@@ -23,8 +19,6 @@ export const Form = forwardRef(function Form<
   Schema extends components.TSchema,
   SubmitResult = void,
 >(props: types.FormProps<Schema, SubmitResult>, ref: React.Ref<HTMLFormElement>) {
-  /** Input values for this form. */
-  type FieldValues = components.FieldValues<Schema>
   const formId = React.useId()
 
   const {
@@ -47,8 +41,6 @@ export const Form = forwardRef(function Form<
     ...formProps
   } = props
 
-  const { getText } = textProvider.useText()
-
   const dialogContext = dialog.useDialogContext()
 
   const onSubmit = useEventCallback(
@@ -90,16 +82,6 @@ export const Form = forwardRef(function Form<
     gap,
   })
 
-  const { formState } = innerForm
-
-  // eslint-disable-next-line no-restricted-syntax
-  const errors = Object.fromEntries(
-    Object.entries(formState.errors).map(([key, error]) => {
-      const message = error?.message ?? getText('arbitraryFormErrorMessage')
-      return [key, message]
-    }),
-  ) as Record<keyof FieldValues, string>
-
   return (
     <form
       {...formProps}
@@ -111,11 +93,9 @@ export const Form = forwardRef(function Form<
       data-testid={testId}
       onSubmit={innerForm.submit}
     >
-      <aria.FormValidationContext.Provider value={errors}>
-        <components.FormProvider form={innerForm}>
-          {typeof children === 'function' ? children({ ...innerForm, form: innerForm }) : children}
-        </components.FormProvider>
-      </aria.FormValidationContext.Provider>
+      <components.FormProvider form={innerForm}>
+        {typeof children === 'function' ? children({ ...innerForm, form: innerForm }) : children}
+      </components.FormProvider>
     </form>
   )
 }) as unknown as (<Schema extends components.TSchema, SubmitResult = void>(
@@ -142,6 +122,7 @@ export const Form = forwardRef(function Form<
   useFieldRegister: typeof components.useFieldRegister
   useFieldState: typeof components.useFieldState
   useFormError: typeof components.useFormError
+  useFormState: typeof components.useFormState
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
@@ -165,3 +146,4 @@ Form.FIELD_STYLES = components.FIELD_STYLES
 Form.useFieldRegister = components.useFieldRegister
 Form.useFieldState = components.useFieldState
 Form.useFormError = components.useFormError
+Form.useFormState = components.useFormState
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/index.ts b/app/gui/src/dashboard/components/AriaComponents/Form/components/index.ts
@@ -14,3 +14,4 @@ export * from './useFieldState'
 export * from './useForm'
 export * from './useFormError'
 export * from './useFormSchema'
+export * from './useFormState'
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts b/app/gui/src/dashboard/components/AriaComponents/Form/components/useForm.ts
@@ -60,6 +60,12 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
     `,
   )
 
+  // We need to disable the eslint rules here, because we call hooks conditionally
+  // but it's safe to do so, because we don't switch between the two types of arguments
+  // and if we do, we throw an error.
+
+  /* eslint-disable react-compiler/react-compiler */
+  /* eslint-disable react-hooks/rules-of-hooks */
   if ('formState' in optionsOrFormInstance) {
     return optionsOrFormInstance
   } else {
@@ -134,29 +140,32 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
       ),
     })
 
-    const register: types.UseFormRegister<Schema> = (name, opts) => {
-      const registered = formInstance.register(name, opts)
-
-      const onChange: types.UseFormRegisterReturn<Schema>['onChange'] = (value) =>
-        registered.onChange(mapValueOnEvent(value))
-
-      const onBlur: types.UseFormRegisterReturn<Schema>['onBlur'] = (value) =>
-        registered.onBlur(mapValueOnEvent(value))
-
-      const result: types.UseFormRegisterReturn<Schema, typeof name> = {
-        ...registered,
-        disabled: registered.disabled ?? false,
-        isDisabled: registered.disabled ?? false,
-        invalid: !!formInstance.formState.errors[name],
-        isInvalid: !!formInstance.formState.errors[name],
-        required: registered.required ?? false,
-        isRequired: registered.required ?? false,
-        onChange,
-        onBlur,
-      }
+    const register: types.UseFormRegister<Schema> = React.useCallback(
+      (name, opts) => {
+        const registered = formInstance.register(name, opts)
+
+        const onChange: types.UseFormRegisterReturn<Schema>['onChange'] = (value) =>
+          registered.onChange(mapValueOnEvent(value))
+
+        const onBlur: types.UseFormRegisterReturn<Schema>['onBlur'] = (value) =>
+          registered.onBlur(mapValueOnEvent(value))
+
+        const result: types.UseFormRegisterReturn<Schema, typeof name> = {
+          ...registered,
+          disabled: registered.disabled ?? false,
+          isDisabled: registered.disabled ?? false,
+          invalid: !!formInstance.formState.errors[name],
+          isInvalid: !!formInstance.formState.errors[name],
+          required: registered.required ?? false,
+          isRequired: registered.required ?? false,
+          onChange,
+          onBlur,
+        }
 
-      return result
-    }
+        return result
+      },
+      [formInstance],
+    )
 
     // We need to disable the eslint rules here, because we call hooks conditionally
     // but it's safe to do so, because we don't switch between the two types of arguments
@@ -181,7 +190,7 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
           }
 
           if (resetOnSubmit) {
-            formInstance.reset()
+            form.reset()
           }
 
           return result
@@ -248,8 +257,14 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
       formInstance.setError('root.submit', { message: error })
     })
 
+    const reset = useEventCallback(() => {
+      // eslint-disable-next-line no-restricted-syntax
+      formInstance.reset(options.defaultValues as types.FieldValues<Schema>)
+    })
+
     const form: types.UseFormReturn<Schema> = {
       ...formInstance,
+      reset,
       submit,
       // @ts-expect-error Our `UseFormRegister<Schema>` is the same as `react-hook-form`'s,
       // just with an added constraint.
@@ -264,8 +279,8 @@ export function useForm<Schema extends types.TSchema, SubmitResult = void>(
 
     return form
   }
-  /* eslint-enable react-compiler/react-compiler */
   /* eslint-enable react-hooks/rules-of-hooks */
+  /* eslint-enable react-compiler/react-compiler */
 }
 
 /** Get the type of arguments passed to the useForm hook */
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/useFormState.tsx b/app/gui/src/dashboard/components/AriaComponents/Form/components/useFormState.tsx
@@ -0,0 +1,35 @@
+/**
+ * @file
+ *
+ * A hook for subscribing to the state of a form.
+ */
+import * as reactHookForm from 'react-hook-form'
+import { useFormContext } from './FormProvider'
+import type { FieldPath, FormWithValueValidation, TSchema } from './types'
+
+/** Options for {@link useFormState} hook. */
+export interface UseFormStateOptions<
+  BaseValueType,
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema, Constraint>,
+  Constraint,
+> extends FormWithValueValidation<BaseValueType, Schema, TFieldName, Constraint> {
+  /** Whether to subscribe to the state of the form. */
+  readonly isDisabled?: boolean | undefined
+}
+
+/** A hook that subscribes to the state of a form. */
+export function useFormState<
+  BaseValueType,
+  Schema extends TSchema,
+  TFieldName extends FieldPath<Schema, Constraint>,
+  Constraint,
+>(options: UseFormStateOptions<BaseValueType, Schema, TFieldName, Constraint>) {
+  const { isDisabled = false } = options
+  const form = useFormContext(options.form)
+
+  return reactHookForm.useFormState({
+    control: form.control,
+    disabled: isDisabled,
+  })
+}
diff --git a/app/gui/src/dashboard/layouts/AssetPanel/components/AssetProperties.tsx b/app/gui/src/dashboard/layouts/AssetPanel/components/AssetProperties.tsx
@@ -20,7 +20,6 @@ import { validateDatalink } from '#/data/datalinkValidator'
 import { backendMutationOptions, useBackendQuery } from '#/hooks/backendHooks'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useSpotlight } from '#/hooks/spotlightHooks'
-import { useSyncRef } from '#/hooks/syncRefHooks'
 import { assetPanelStore, useSetAssetPanelProps } from '#/layouts/AssetPanel/'
 import type { Category } from '#/layouts/CategorySwitcher/Category'
 import UpsertSecretModal from '#/modals/UpsertSecretModal'
@@ -203,28 +202,6 @@ function AssetPropertiesInternal(props: AssetPropertiesInternalProps) {
     resetEditDescriptionForm({ description: item.description ?? '' })
   }, [item.description, resetEditDescriptionForm])
 
-  const editDatalinkForm = Form.useForm({
-    schema: (z) => z.object({ datalink: z.custom((x) => validateDatalink(x)) }),
-    defaultValues: { datalink: datalinkQuery.data },
-    onSubmit: async ({ datalink }) => {
-      await createDatalinkMutation.mutateAsync([
-        {
-          // The UI to submit this form is only visible if the asset is a datalink.
-          // eslint-disable-next-line no-restricted-syntax
-          datalinkId: item.id as DatalinkId,
-          name: item.title,
-          parentDirectoryId: null,
-          value: datalink,
-        },
-      ])
-    },
-  })
-
-  const editDatalinkFormRef = useSyncRef(editDatalinkForm)
-  React.useEffect(() => {
-    editDatalinkFormRef.current.setValue('datalink', datalinkQuery.data)
-  }, [datalinkQuery.data, editDatalinkFormRef])
-
   return (
     <div className="flex w-full flex-col gap-8">
       {descriptionSpotlight.spotlightElement}
@@ -268,6 +245,7 @@ function AssetPropertiesInternal(props: AssetPropertiesInternalProps) {
           }
         </div>
       </div>
+
       {isCloud && (
         <div className={styles.section()}>
           <Heading
@@ -484,22 +462,38 @@ function AssetPropertiesInternal(props: AssetPropertiesInternalProps) {
             <div className="grid place-items-center self-stretch">
               <StatelessSpinner size={48} state="loading-medium" />
             </div>
-          : <Form form={editDatalinkForm} className="w-full">
-              <DatalinkFormInput
-                form={editDatalinkForm}
-                name="datalink"
-                readOnly={!canEditThisAsset}
-                dropdownTitle={getText('type')}
-              />
-              {canEditThisAsset && (
-                <ButtonGroup>
-                  <Form.Submit>{getText('update')}</Form.Submit>
-                  <Form.Reset
-                    onPress={() => {
-                      editDatalinkForm.reset({ datalink: datalinkQuery.data })
-                    }}
+          : <Form
+              schema={(z) => z.object({ datalink: z.custom((x) => validateDatalink(x)) })}
+              defaultValues={{ datalink: datalinkQuery.data }}
+              onSubmit={({ datalink }) =>
+                createDatalinkMutation.mutateAsync([
+                  {
+                    datalinkId: item.id,
+                    name: item.title,
+                    parentDirectoryId: null,
+                    value: datalink,
+                  },
+                ])
+              }
+              className="w-full bg-white"
+            >
+              {(form) => (
+                <>
+                  <DatalinkFormInput
+                    name="datalink"
+                    readOnly={!canEditThisAsset}
+                    dropdownTitle={getText('type')}
                   />
-                </ButtonGroup>
+
+                  {canEditThisAsset && form.formState.isDirty && (
+                    <ButtonGroup>
+                      <Form.Submit>{getText('update')}</Form.Submit>
+                      <Form.Reset />
+                    </ButtonGroup>
+                  )}
+
+                  <Form.FormError />
+                </>
               )}
             </Form>
           }
diff --git a/app/gui/src/dashboard/layouts/Settings/FormEntry.tsx b/app/gui/src/dashboard/layouts/Settings/FormEntry.tsx
@@ -2,7 +2,7 @@
 import { ButtonGroup, Form } from '#/components/AriaComponents'
 import { useText } from '#/providers/TextProvider'
 import { AnimatePresence, motion } from 'framer-motion'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import SettingsInput from './Input'
 import type { SettingsContext, SettingsFormEntryData } from './data'
 
@@ -27,10 +27,6 @@ export function SettingsFormEntry<T extends Record<keyof T, string>>(
   const [initialValueString] = useState(() => JSON.stringify(value))
   const valueStringRef = useRef(initialValueString)
 
-  const schema = useMemo(
-    () => (typeof schemaRaw === 'function' ? schemaRaw(context) : schemaRaw),
-    [context, schemaRaw],
-  )
   const isEditable = data.inputs.some((inputData) =>
     typeof inputData.editable === 'boolean' ?
       inputData.editable
@@ -39,16 +35,16 @@ export function SettingsFormEntry<T extends Record<keyof T, string>>(
 
   const form = Form.useForm({
     // @ts-expect-error This is SAFE, as the type `T` is statically known.
-    schema,
+    schema: typeof schemaRaw === 'function' ? schemaRaw(context) : schemaRaw,
     defaultValues: value,
-    onSubmit: async (newValue) => {
+    onSubmit: (newValue) => {
       // @ts-expect-error This is SAFE, as the type `T` is statically known.
-      await onSubmit(context, newValue)
-      form.reset(newValue)
-      // The form should not be reset on error.
+      return onSubmit(context, newValue)
     },
   })
 
+  const { isDirty } = Form.useFormState({ form })
+
   useEffect(() => {
     const newValueString = JSON.stringify(value)
 
@@ -60,7 +56,7 @@ export function SettingsFormEntry<T extends Record<keyof T, string>>(
 
   if (!visible) return null
 
-  const shouldShowSaveButton = isEditable && form.formState.isDirty
+  const shouldShowSaveButton = isEditable && isDirty
 
   return (
     <Form form={form}>
diff --git a/app/gui/src/dashboard/layouts/Settings/data.tsx b/app/gui/src/dashboard/layouts/Settings/data.tsx
@@ -69,20 +69,17 @@ export const SETTINGS_TAB_DATA: Readonly<Record<SettingsTabType, SettingsTabData
           settingsFormEntryData({
             type: 'form',
             schema: z.object({
-              name: z.string().regex(/.*\S.*/),
-              email: z.string().email(),
+              name: z.string().min(1),
+              email: z.string().email().or(z.literal('')),
               timeZone: z.string().or(z.undefined()),
             }),
             getValue: (context) => ({
               ...pick(context.user, 'name', 'email'),
-              timeZone: context.preferredTimeZone,
+              timeZone: context.preferredTimeZone ?? '',
             }),
             onSubmit: async (context, { name, timeZone }) => {
-              const oldName = context.user.name
-              if (name !== oldName) {
-                await context.updateUser([{ username: name }])
-              }
               context.setPreferredTimeZone(timeZone)
+              await context.updateUser([{ username: name }])
             },
             inputs: [
               { nameId: 'userNameSettingsInput', name: 'name' },
