From d935d7638a20af0e2f989523cf912836e73e6785 Mon Sep 17 00:00:00 2001
From: Adam Chmara <adam.chmara1@gmail.com>
Date: Wed, 18 Dec 2024 12:43:20 +0100
Subject: [PATCH] fix(dashboard): tags client side validation

---
 .../src/components/create-workflow-button.tsx       | 10 +++++++++-
 .../workflow-editor/configure-workflow-form.tsx     |  3 +++
 apps/dashboard/src/hooks/use-form-autosave.ts       | 13 +++++++++----
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/src/components/create-workflow-button.tsx b/apps/dashboard/src/components/create-workflow-button.tsx
index 757ce353f37..1adebbae0d4 100644
--- 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
index ffde3661e53..dcab06a4816 100644
--- 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
index d261b5159b1..957e485cb76 100644
--- a/apps/dashboard/src/hooks/use-form-autosave.ts
+++ b/apps/dashboard/src/hooks/use-form-autosave.ts
@@ -1,8 +1,8 @@
 // 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;
 
@@ -10,11 +10,13 @@ export function useFormAutosave<U extends Record<string, unknown>, T extends Fie
   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);