From c2eaee7be1d4802156dd094169c8361d77197be9 Mon Sep 17 00:00:00 2001
From: James <james@union.ai>
Date: Tue, 28 Feb 2023 23:16:57 -0500
Subject: [PATCH] fix: stuck issue

Signed-off-by: James <james@union.ai>
---
 .../LaunchForm/LaunchFormAdvancedInputs.tsx   | 124 +++++++++---------
 .../Launch/LaunchForm/LaunchWorkflowForm.tsx  |   7 +-
 .../Launch/LaunchForm/StructInput.tsx         |   8 +-
 3 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/packages/console/src/components/Launch/LaunchForm/LaunchFormAdvancedInputs.tsx b/packages/console/src/components/Launch/LaunchForm/LaunchFormAdvancedInputs.tsx
index 923315ab7..5fa632e89 100644
--- a/packages/console/src/components/Launch/LaunchForm/LaunchFormAdvancedInputs.tsx
+++ b/packages/console/src/components/Launch/LaunchForm/LaunchFormAdvancedInputs.tsx
@@ -81,68 +81,68 @@ export const LaunchFormAdvancedInputs = React.forwardRef<
     const [maxParallelism, setMaxParallelism] = React.useState('');
     const [rawOutputDataConfig, setRawOutputDataConfig] = React.useState('');
 
-    // React.useEffect(() => {
-    //   if (isValueValid(other.disableAll)) {
-    //     setDisableAll(other.disableAll!);
-    //   }
-    //   if (isValueValid(other.maxParallelism)) {
-    //     setMaxParallelism(`${other.maxParallelism}`);
-    //   }
-    //   if (
-    //     other?.rawOutputDataConfig?.outputLocationPrefix !== undefined &&
-    //     other.rawOutputDataConfig.outputLocationPrefix !== null
-    //   ) {
-    //     setRawOutputDataConfig(other.rawOutputDataConfig.outputLocationPrefix);
-    //   }
-    //   const newLabels = {
-    //     ...(other.labels?.values || {}),
-    //     ...(launchPlan?.spec?.labels?.values || {}),
-    //   };
-    //   const newAnnotations = {
-    //     ...(other.annotations?.values || {}),
-    //     ...(launchPlan?.spec?.annotations?.values || {}),
-    //   };
-    //   setLabelsParamData(newLabels);
-    //   setAnnotationsParamData(newAnnotations);
-    // }, [
-    //   other.disableAll,
-    //   other.maxParallelism,
-    //   other.rawOutputDataConfig,
-    //   other.labels,
-    //   other.annotations,
-    //   launchPlan?.spec,
-    // ]);
+    React.useEffect(() => {
+      if (isValueValid(other.disableAll)) {
+        setDisableAll(other.disableAll!);
+      }
+      if (isValueValid(other.maxParallelism)) {
+        setMaxParallelism(`${other.maxParallelism}`);
+      }
+      if (
+        other?.rawOutputDataConfig?.outputLocationPrefix !== undefined &&
+        other.rawOutputDataConfig.outputLocationPrefix !== null
+      ) {
+        setRawOutputDataConfig(other.rawOutputDataConfig.outputLocationPrefix);
+      }
+      const newLabels = {
+        ...(other.labels?.values || {}),
+        ...(launchPlan?.spec?.labels?.values || {}),
+      };
+      const newAnnotations = {
+        ...(other.annotations?.values || {}),
+        ...(launchPlan?.spec?.annotations?.values || {}),
+      };
+      setLabelsParamData(newLabels);
+      setAnnotationsParamData(newAnnotations);
+    }, [
+      other.disableAll,
+      other.maxParallelism,
+      other.rawOutputDataConfig,
+      other.labels,
+      other.annotations,
+      launchPlan?.spec,
+    ]);
 
-    // React.useImperativeHandle(
-    //   ref,
-    //   () => ({
-    //     getValues: () => {
-    //       return {
-    //         disableAll,
-    //         rawOutputDataConfig: {
-    //           outputLocationPrefix: rawOutputDataConfig,
-    //         },
-    //         maxParallelism: parseInt(maxParallelism || '', 10),
-    //         labels: {
-    //           values: labelsParamData,
-    //         },
-    //         annotations: {
-    //           values: annotationsParamData,
-    //         },
-    //       } as Admin.IExecutionSpec;
-    //     },
-    //     validate: () => {
-    //       return true;
-    //     },
-    //   }),
-    //   [
-    //     disableAll,
-    //     maxParallelism,
-    //     rawOutputDataConfig,
-    //     labelsParamData,
-    //     annotationsParamData,
-    //   ],
-    // );
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        getValues: () => {
+          return {
+            disableAll,
+            rawOutputDataConfig: {
+              outputLocationPrefix: rawOutputDataConfig,
+            },
+            maxParallelism: parseInt(maxParallelism || '', 10),
+            labels: {
+              values: labelsParamData,
+            },
+            annotations: {
+              values: annotationsParamData,
+            },
+          } as Admin.IExecutionSpec;
+        },
+        validate: () => {
+          return true;
+        },
+      }),
+      [
+        disableAll,
+        maxParallelism,
+        rawOutputDataConfig,
+        labelsParamData,
+        annotationsParamData,
+      ],
+    );
 
     const handleDisableAllChange = React.useCallback(() => {
       setDisableAll(prevState => !prevState);
@@ -170,8 +170,6 @@ export const LaunchFormAdvancedInputs = React.forwardRef<
       [],
     );
 
-    console.log('MYLOG', { annotationsParamData, labelsParamData });
-
     return (
       <>
         <section title="Labels" className={styles.collapsibleSection}>
diff --git a/packages/console/src/components/Launch/LaunchForm/LaunchWorkflowForm.tsx b/packages/console/src/components/Launch/LaunchForm/LaunchWorkflowForm.tsx
index ee01653a8..7e6d9f663 100644
--- a/packages/console/src/components/Launch/LaunchForm/LaunchWorkflowForm.tsx
+++ b/packages/console/src/components/Launch/LaunchForm/LaunchWorkflowForm.tsx
@@ -134,7 +134,12 @@ export const LaunchWorkflowForm: React.FC<LaunchWorkflowFormProps> = props => {
                 showErrors={state.context.showErrors}
               />
             ) : null}
-            <LaunchFormAdvancedInputs ref={advancedOptionsRef} state={state} />
+            {isEnterInputsState(baseState) ? (
+              <LaunchFormAdvancedInputs
+                ref={advancedOptionsRef}
+                state={state}
+              />
+            ) : null}
             <LaunchInterruptibleInput
               initialValue={state.context.interruptible}
               ref={interruptibleInputRef}
diff --git a/packages/console/src/components/Launch/LaunchForm/StructInput.tsx b/packages/console/src/components/Launch/LaunchForm/StructInput.tsx
index b8e02bb5e..d43c08d85 100644
--- a/packages/console/src/components/Launch/LaunchForm/StructInput.tsx
+++ b/packages/console/src/components/Launch/LaunchForm/StructInput.tsx
@@ -87,10 +87,10 @@ export const StructInput: React.FC<InputProps> = props => {
     jsonFormRenderable && value ? JSON.parse(value as string) : {},
   );
 
-  const onFormChange = (_e, newVal) => {
-    // onChange(JSON.stringify(formData));
-    // setParamData(formData);
-  };
+  const onFormChange = React.useCallback(({ target: { value } }) => {
+    onChange(JSON.stringify(value));
+    setParamData(value);
+  }, []);
 
   return jsonFormRenderable ? (
     <MuiThemeProvider theme={muiTheme}>