LaunchForm RJSF Form issue (#692)

* fix: launchform Signed-off-by: James <[email protected]> * fix: stuck issue Signed-off-by: James <[email protected]> * fix: on form change Signed-off-by: James <[email protected]> * fix: merge master into branch Signed-off-by: James <[email protected]> --------- Signed-off-by: James <[email protected]>
flyteorg · Mar 2, 2023 · 90e4fa2 · 90e4fa2
1 parent 1319917
commit 90e4fa2
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 72 deletions.
diff --git a/packages/console/package.json b/packages/console/package.json
@@ -61,10 +61,10 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/pickers": "^3.2.2",
-    "@rjsf/core": "3.2.1",
-    "@rjsf/material-ui": "3.2.1",
-    "@rjsf/utils": "^5.0.0-beta.12",
-    "@rjsf/validator-ajv6": "^5.0.0-beta.12",
+    "@rjsf/core": "^5.1.0",
+    "@rjsf/material-ui": "^5.1.0",
+    "@rjsf/utils": "^5.1.0",
+    "@rjsf/validator-ajv8": "^5.1.0",
     "@types/d3-shape": "^1.2.6",
     "@xstate/react": "^1.0.0",
     "axios": "^0.27.2",

diff --git a/packages/console/src/components/Launch/LaunchForm/LaunchFormAdvancedInputs.tsx b/packages/console/src/components/Launch/LaunchForm/LaunchFormAdvancedInputs.tsx
@@ -12,6 +12,7 @@ import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Form from '@rjsf/material-ui';
+import validator from '@rjsf/validator-ajv8';
 import { State } from 'xstate';
 import { LaunchAdvancedOptionsRef } from './types';
 import {
@@ -194,6 +195,7 @@ export const LaunchFormAdvancedInputs = React.forwardRef<
                       }}
                       formData={labelsParamData}
                       onChange={handleLabelsChange}
+                      validator={validator}
                     >
                       <div />
                     </Form>
@@ -226,6 +228,7 @@ export const LaunchFormAdvancedInputs = React.forwardRef<
                       }}
                       formData={annotationsParamData}
                       onChange={handleAnnotationsParamData}
+                      validator={validator}
                     >
                       <div />
                     </Form>

diff --git 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
@@ -3,6 +3,7 @@ import { TextField, Card, CardContent, CardHeader } from '@material-ui/core';
 import { useState } from 'react';
 import Form from '@rjsf/material-ui';
 import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
+import validator from '@rjsf/validator-ajv8';
 import { makeStringChangeHandler } from './handlers';
 import { InputProps } from './types';
 import { getLaunchInputId } from './utils';
@@ -86,10 +87,10 @@ export const StructInput: React.FC<InputProps> = props => {
     jsonFormRenderable && value ? JSON.parse(value as string) : {},
   );
 
-  const onFormChange = ({ formData }, _e) => {
+  const onFormChange = React.useCallback(({ formData }) => {
     onChange(JSON.stringify(formData));
     setParamData(formData);
-  };
+  }, []);
 
   return jsonFormRenderable ? (
     <MuiThemeProvider theme={muiTheme}>
@@ -98,6 +99,7 @@ export const StructInput: React.FC<InputProps> = props => {
         <CardContent>
           <Form
             schema={JSON.parse(JSON.stringify(parsedJson))}
+            validator={validator}
             formData={paramData}
             onChange={onFormChange}
           >