fix(dashboard): tags client side validation

novuhq · Dec 18, 2024 · d935d76 · d935d76
1 parent 7294ed6
commit d935d76
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/apps/dashboard/src/components/create-workflow-button.tsx b/apps/dashboard/src/components/create-workflow-button.tsx
@@ -153,7 +153,15 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => {
                       <FormLabel hint={`(max. ${MAX_TAG_ELEMENTS})`}>Add tags</FormLabel>
                     </div>
                     <FormControl>
-                      <TagInput suggestions={tags.map((tag) => tag.name)} {...field} value={field.value ?? []} />
+                      <TagInput
+                        suggestions={tags.map((tag) => tag.name)}
+                        {...field}
+                        value={field.value ?? []}
+                        onChange={(tags) => {
+                          field.onChange(tags);
+                          form.setValue('tags', tags, { shouldValidate: true });
+                        }}
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>

diff --git a/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx b/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx
@@ -136,6 +136,7 @@ export const ConfigureWorkflowForm = (props: ConfigureWorkflowFormProps) => {
     form,
     isReadOnly,
     save: update,
+    shouldClientValidate: true,
   });
 
   const onPauseWorkflow = (active: boolean) => {
@@ -340,6 +341,8 @@ export const ConfigureWorkflowForm = (props: ConfigureWorkflowFormProps) => {
                         disabled={isReadOnly}
                         value={field.value ?? []}
                         suggestions={tags.map((tag) => tag.name)}
+                        // maxLength={MAX_TAG_ELEMENTS}
+                        // max={MAX_TAG_LENGTH}
                       />
                     </FormControl>
                     <FormMessage />

diff --git a/apps/dashboard/src/hooks/use-form-autosave.ts b/apps/dashboard/src/hooks/use-form-autosave.ts
@@ -1,20 +1,22 @@
 // useFormAutosave.ts
-import { useCallback, useEffect } from 'react';
-import { UseFormReturn, FieldValues } from 'react-hook-form';
 import { useDataRef } from '@/hooks/use-data-ref';
 import { useDebounce } from '@/hooks/use-debounce';
+import { useCallback, useEffect } from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
 
 const TEN_SECONDS = 10 * 1000;
 
 export function useFormAutosave<U extends Record<string, unknown>, T extends FieldValues = FieldValues>({
   previousData,
   form: propsForm,
   isReadOnly,
+  shouldClientValidate = false,
   save,
 }: {
   previousData: U;
   form: UseFormReturn<T>;
   isReadOnly?: boolean;
+  shouldClientValidate?: boolean;
   save: (data: U) => void;
 }) {
   const formRef = useDataRef(propsForm);
@@ -33,7 +35,10 @@ export function useFormAutosave<U extends Record<string, unknown>, T extends Fie
         return;
       }
       // manually trigger the validation of the form
-      await form.trigger();
+      const isValid = await form.trigger();
+      if (!isValid && shouldClientValidate) {
+        return;
+      }
 
       const values = { ...previousData, ...data };
       // reset the dirty fields right away because on slow networks the patch request might take a while
@@ -42,7 +47,7 @@ export function useFormAutosave<U extends Record<string, unknown>, T extends Fie
       form.reset(values, { keepErrors: true });
       save(values);
     },
-    [formRef, previousData, isReadOnly, save]
+    [formRef, previousData, isReadOnly, save, shouldClientValidate]
   );
 
   const debouncedOnSave = useDebounce(onSave, TEN_SECONDS);