chore: migrate continue trial form and remove steps [DET-3780 DET-3854]

webui/react/config-overrides.js

@@ -61,12 +61,13 @@ const webpackConfig = override(
       // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
       languages: ['yaml'],
       features: [
-        'suggest',
+        'codelens',
+        'colorDetector',
+        'find',
+        'parameterHints',
         'quickOutline',
+        'suggest',
         'wordHighlighter',
-        'colorDetector',
-        'codelens',
-        'parameterHints'
       ],
     })
   ),

webui/react/src/components/CreateExperimentModal.tsx

@@ -9,17 +9,19 @@ import { forkExperiment } from 'services/api';
 import css from './CreateExperimentModal.module.scss';
 
 interface Props {
-  title: string;
-  okText: string;
-  parentId: number;
-  visible: boolean;
   config: string;
-  onVisibleChange: (visible: boolean) => void;
+  error?: string;
+  okText: string;
+  onCancel?: () => void;
   onConfigChange: (config: string) => void;
+  onVisibleChange: (visible: boolean) => void;
+  parentId: number; // parent experiment ID.
+  title: string;
+  visible: boolean;
 }
 
 const CreateExperimentModal: React.FC<Props> = (
-  { visible, config, onVisibleChange, onConfigChange, parentId, ...props }: Props,
+  { visible, config, onVisibleChange, onConfigChange, parentId, error, ...props }: Props,
 ) => {
   const [ configError, setConfigError ] = useState<string>();
 
@@ -47,6 +49,7 @@ const CreateExperimentModal: React.FC<Props> = (
   };
 
   const handleCancel = (): void => {
+    props.onCancel && props.onCancel();
     onVisibleChange(false);
   };
   return <Modal
@@ -78,6 +81,9 @@ const CreateExperimentModal: React.FC<Props> = (
     {configError &&
           <Alert className={css.error} message={configError} type="error" />
     }
+    {error &&
+          <Alert className={css.error} message={error} type="error" />
+    }
   </Modal>;
 
 };

webui/react/src/pages/ExperimentDetails.tsx

@@ -29,6 +29,7 @@ import { clone } from 'utils/data';
 import { alphanumericSorter, numericSorter, runStateSorter, stringTimeSorter } from 'utils/data';
 import { humanReadableFloat } from 'utils/string';
 import { getDuration } from 'utils/time';
+import { upgradeConfig } from 'utils/types';
 
 import css from './ExperimentDetails.module.scss';
 
@@ -55,23 +56,34 @@ const ExperimentDetailsComp: React.FC = () => {
   const [ forkModalVisible, setForkModalVisible ] = useState(false);
   const [ forkModalConfig, setForkModalConfig ] = useState('Loading');
 
+  const setFreshForkConfig = useCallback(() => {
+    if (!experiment?.configRaw) return;
+    // do not reset the config if the modal is open
+    if (forkModalVisible) return;
+    const prefix = 'Fork of ';
+    const rawConfig = clone(experiment.configRaw);
+    rawConfig.description = prefix + rawConfig.description;
+    upgradeConfig(rawConfig);
+    setForkModalConfig(yaml.safeDump(rawConfig));
+  }, [ experiment?.configRaw, forkModalVisible ]);
+
+  const handleForkModalCancel = useCallback(() => {
+    setForkModalVisible(false);
+    setFreshForkConfig();
+  }, [ setFreshForkConfig ]);
+
   useEffect(() => {
-    if (experiment && experiment.config) {
-      try {
-        const prefix = 'Fork of ';
-        const rawConfig = clone(experiment.configRaw);
-        rawConfig.description = prefix + rawConfig.description;
-        setForkModalConfig(yaml.safeDump(rawConfig));
-      } catch (e) {
-        handleError({
-          error: e,
-          message: 'failed to load experiment config',
-          type: ErrorType.ApiBadResponse,
-        });
-        setForkModalConfig('failed to load experiment config');
-      }
+    try {
+      setFreshForkConfig();
+    } catch (e) {
+      handleError({
+        error: e,
+        message: 'failed to load experiment config',
+        type: ErrorType.ApiBadResponse,
+      });
+      setForkModalConfig('failed to load experiment config');
     }
-  }, [ experiment ]);
+  }, [ setFreshForkConfig ]);
 
   const showForkModal = useCallback((): void => {
     setForkModalVisible(true);
@@ -237,6 +249,7 @@ const ExperimentDetailsComp: React.FC = () => {
         parentId={id}
         title={`Fork Experiment ${id}`}
         visible={forkModalVisible}
+        onCancel={handleForkModalCancel}
         onConfigChange={setForkModalConfig}
         onVisibleChange={setForkModalVisible}
       />