do not use reset from superform, clean up

rilldata · Dec 11, 2024 · 0fc02d9 · 0fc02d9
1 parent d588375
commit 0fc02d9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 26 deletions.
diff --git a/web-admin/src/features/projects/environment-variables/AddDialog.svelte b/web-admin/src/features/projects/environment-variables/AddDialog.svelte
@@ -74,11 +74,11 @@
     }),
   );
 
-  const { form, enhance, submit, submitting, errors, allErrors, reset } =
-    superForm(defaults(initialValues, schema), {
+  const { form, enhance, submit, submitting, errors, allErrors } = superForm(
+    defaults(initialValues, schema),
+    {
       SPA: true,
       validators: schema,
-      // See: https://superforms.rocks/concepts/nested-data
       dataType: "json",
       async onUpdate({ form }) {
         if (!form.valid) return;
@@ -87,11 +87,9 @@
         // Check for duplicates before proceeding
         const duplicates = checkForExistingKeys();
         if (duplicates > 0) {
-          // Early return without resetting the form
           return;
         }
 
-        // Only filter and process if there are no duplicates
         const filteredVariables = values.variables.filter(
           ({ key }) => key !== "",
         );
@@ -108,7 +106,8 @@
           console.error(error);
         }
       },
-    });
+    },
+  );
 
   async function handleUpdateProjectVariables(
     flatVariables: AdminServiceUpdateProjectVariablesBodyVariables,
@@ -146,6 +145,8 @@
   function handleKeyChange(index: number, event: Event) {
     const target = event.target as HTMLInputElement;
     $form.variables[index].key = target.value;
+    delete inputErrors[index];
+    isKeyAlreadyExists = false;
   }
 
   function handleValueChange(index: number, event: Event) {
@@ -159,31 +160,37 @@
   }
 
   function handleReset() {
-    reset();
+    $form = initialValues;
     isDevelopment = true;
     isProduction = true;
     inputErrors = {};
     isKeyAlreadyExists = false;
+    showEnvironmentError = false;
   }
 
   function checkForExistingKeys() {
     inputErrors = {};
     isKeyAlreadyExists = false;
 
-    const existingKeys = $form.variables.map((variable) => {
-      return {
-        environment: getCurrentEnvironment(isDevelopment, isProduction),
-        name: variable.key,
-      };
-    });
+    const existingKeys = $form.variables
+      .filter((variable) => variable.key.trim() !== "")
+      .map((variable) => {
+        return {
+          environment: getCurrentEnvironment(isDevelopment, isProduction),
+          name: variable.key,
+        };
+      });
 
     let duplicateCount = 0;
     existingKeys.forEach((key, idx) => {
       const variableEnvironment = key.environment;
       const variableKey = key.name;
 
       if (isDuplicateKey(variableEnvironment, variableKey, variableNames)) {
-        inputErrors[idx] = true;
+        const originalIndex = $form.variables.findIndex(
+          (v) => v.key === variableKey,
+        );
+        inputErrors[originalIndex] = true;
         isKeyAlreadyExists = true;
         duplicateCount++;
       }
@@ -225,17 +232,29 @@
   }
 
   function handleEnvironmentChange() {
-    checkForExistingKeys();
-    inputErrors = {};
-    isKeyAlreadyExists = false;
     showEnvironmentError = true;
+    checkForExistingKeys();
   }
+
+  $: isSubmitDisabled =
+    $submitting ||
+    hasExistingKeys ||
+    !hasNewChanges ||
+    hasNoEnvironment ||
+    Object.values($form.variables).every((v) => !v.key.trim());
 </script>
 
 <Dialog
   bind:open
-  onOpenChange={() => handleReset()}
-  onOutsideClick={() => handleReset()}
+  onOpenChange={(isOpen) => {
+    if (!isOpen) {
+      handleReset();
+    }
+  }}
+  onOutsideClick={() => {
+    open = false;
+    handleReset();
+  }}
 >
   <DialogTrigger asChild>
     <div class="hidden"></div>
@@ -382,17 +401,18 @@
         on:click={() => {
           open = false;
           handleReset();
-        }}>Cancel</Button
+        }}
       >
+        Cancel
+      </Button>
       <Button
         type="primary"
         form={formId}
-        disabled={$submitting ||
-          hasExistingKeys ||
-          !hasNewChanges ||
-          hasNoEnvironment}
-        submitForm>Create</Button
+        disabled={isSubmitDisabled}
+        submitForm
       >
+        Create
+      </Button>
     </DialogFooter>
   </DialogContent>
 </Dialog>
diff --git a/web-admin/src/features/projects/environment-variables/EditDialog.svelte b/web-admin/src/features/projects/environment-variables/EditDialog.svelte
@@ -199,7 +199,9 @@
   }
 
   function handleReset() {
-    formReset();
+    $form.environment = initialValues.environment;
+    $form.key = initialValues.key;
+    $form.value = initialValues.value;
     isDevelopment = false;
     isProduction = false;
     inputErrors = {};