Update is dirty logic

kurtosis-tech · Jan 5, 2024 · 289886a · 289886a
1 parent 560cf2c
commit 289886a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/.../web/packages/app/src/emui/enclaves/components/configuration/EnclaveConfigurationForm.tsx b/.../web/packages/app/src/emui/enclaves/components/configuration/EnclaveConfigurationForm.tsx
@@ -1,6 +1,5 @@
 import { KurtosisPackage } from "kurtosis-cloud-indexer-sdk";
-import { isDefined } from "kurtosis-ui-components";
-import { CSSProperties, forwardRef, PropsWithChildren, useImperativeHandle } from "react";
+import { CSSProperties, forwardRef, PropsWithChildren, useEffect, useImperativeHandle, useState } from "react";
 import { FormProvider, SubmitHandler, useForm, useFormContext } from "react-hook-form";
 import { ConfigureEnclaveForm } from "./types";
 import { transformFormArgsToKurtosisArgs } from "./utils";
@@ -22,7 +21,8 @@ export const EnclaveConfigurationForm = forwardRef<
   EnclaveConfigurationFormImperativeAttributes,
   EnclaveConfigurationFormProps
 >(({ children, kurtosisPackage, onSubmit, initialValues, style }: EnclaveConfigurationFormProps, ref) => {
-  const methods = useForm<ConfigureEnclaveForm>({ values: initialValues });
+  const [isDirty, setIsDirty] = useState(false);
+  const methods = useForm<ConfigureEnclaveForm>({ defaultValues: initialValues });
 
   useImperativeHandle(
     ref,
@@ -34,16 +34,22 @@ export const EnclaveConfigurationForm = forwardRef<
         methods.setValue(key, value);
       },
       isDirty: () => {
-        if (isDefined(initialValues)) {
-          return Object.keys(methods.formState.dirtyFields.args || {}).length > 0;
-        } else {
-          return Object.keys(methods.getValues().args || {}).length > 0;
-        }
+        return isDirty;
       },
     }),
-    [methods, initialValues],
+    [methods, initialValues, isDirty],
   );
 
+  useEffect(() => {
+    const { unsubscribe } = methods.watch((value) => {
+      // We manually track modified fields because we dynamically register values (this means that the
+      // isDirty field on the react-hook-form state cannot be used). Relying on the react-hook-form state isDirty field
+      // will actually trigger a cyclic setState (as it's secretly a getter method).
+      setIsDirty(true);
+    });
+    return () => unsubscribe();
+  }, [methods]);
+
   const handleSubmit: SubmitHandler<ConfigureEnclaveForm> = (data: { args: { [x: string]: any } }) => {
     onSubmit({
       enclaveName: "",
@@ -61,5 +67,6 @@ export const EnclaveConfigurationForm = forwardRef<
     </FormProvider>
   );
 });
+EnclaveConfigurationForm.displayName = "EnclaveConfigurationForm";
 
 export const useEnclaveConfigurationFormContext = () => useFormContext<ConfigureEnclaveForm>();
diff --git a/...ges/app/src/emui/enclaves/components/configuration/drawer/bodies/EnclaveConfigureBody.tsx b/...ges/app/src/emui/enclaves/components/configuration/drawer/bodies/EnclaveConfigureBody.tsx
@@ -348,13 +348,15 @@ export const EnclaveConfigureBody = forwardRef<EnclaveConfigureBodyAttributes, E
             </Tabs>
           </DrawerBody>
           <DrawerFooter>
-            <Flex justifyContent={"space-between"} gap={"12px"} width={"100%"}>
-              <Button color={"gray.100"} onClick={onBackClicked} isDisabled={isLoading}>
-                Back
-              </Button>
+            <Flex flexDirection={"row-reverse"} justifyContent={"space-between"} gap={"12px"} width={"100%"}>
               <Button type={"submit"} colorScheme={"kurtosisGreen"} isLoading={isLoading}>
                 {existingEnclave ? "Update" : "Run"}
               </Button>
+              {!isDefined(existingEnclave) && (
+                <Button color={"gray.100"} onClick={onBackClicked} isDisabled={isLoading}>
+                  Back
+                </Button>
+              )}
             </Flex>
           </DrawerFooter>
         </EnclaveConfigurationForm>