fix: launch form fixes (#785)

* chore: launch form fixes Signed-off-by: Carina Ursu <carina@union.ai> * chore: collection of collections Signed-off-by: Carina Ursu <carina@union.ai> * chore: struct fix Signed-off-by: Carina Ursu <carina@union.ai> * chore: blobs Signed-off-by: Carina Ursu <carina@union.ai> * chore: collection fixes Signed-off-by: Carina Ursu <carina@union.ai> * chore: theme pollution Signed-off-by: Carina Ursu <carina@union.ai> * chore: errors should bubble Signed-off-by: Carina Ursu <carina@union.ai> * chore: fix collection Signed-off-by: Carina Ursu <carina@union.ai> * chore: progress Signed-off-by: Carina Ursu <carina@union.ai> * chore: progress Signed-off-by: Carina Ursu <carina@union.ai> * chore: fixes Signed-off-by: Carina Ursu <carina@union.ai> * chore: launch form inputs tests Signed-off-by: Carina Ursu <carina@union.ai> * chore: fix inputHelpers.test.ts Signed-off-by: Carina Ursu <carina@union.ai> * chore: launchworkflowform tests Signed-off-by: Carina Ursu <carina@union.ai> * chore: launch task form Signed-off-by: Carina Ursu <carina@union.ai> * chore: fix taskexecutiondetails.test Signed-off-by: Carina Ursu <carina@union.ai> * chore: fill blob format Signed-off-by: Carina Ursu <carina@union.ai> * chore: default blob format Signed-off-by: Carina Ursu <carina@union.ai> --------- Signed-off-by: Carina Ursu <carina@union.ai>
flyteorg · Jul 14, 2023 · 1da4d7a · 1da4d7a
1 parent f6d5fb9
commit 1da4d7a
Show file tree

Hide file tree

Showing 60 changed files with 1,651 additions and 1,014 deletions.
diff --git a/packages/console/src/components/Entities/test/EntityVersionDetails.test.tsx b/packages/console/src/components/Entities/test/EntityVersionDetails.test.tsx
@@ -21,7 +21,7 @@ describe('EntityVersionDetails', () => {
 
   const renderDetails = (id: ResourceIdentifier) => {
     return render(
-      <ThemeProvider theme={getMuiTheme()}>
+      <ThemeProvider theme={getMuiTheme({})}>
         <APIContext.Provider
           value={mockAPIContextValue({
             getTask: mockGetTask,

diff --git a/...s/console/src/components/Executions/TaskExecutionsList/test/TaskExecutionDetails.test.tsx b/...s/console/src/components/Executions/TaskExecutionsList/test/TaskExecutionDetails.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import { unknownValueString } from 'common/constants';
 import * as React from 'react';
 import { long } from 'test/utils';
@@ -44,8 +44,10 @@ describe('TaskExecutionDetails', () => {
     expect(queryByText('0s')).not.toBeInTheDocument();
   });
 
-  it('should render details with task updated info without duration', () => {
-    const { queryByText } = render(<TaskExecutionDetails updatedAt={date} />);
+  it('should render details with task updated info without duration', async () => {
+    const { queryByText } = await render(
+      <TaskExecutionDetails updatedAt={date} />,
+    );
 
     expect(queryByText('started')).not.toBeInTheDocument();
     expect(queryByText('last updated')).toBeInTheDocument();

diff --git a/packages/console/src/components/Launch/LaunchForm/CollectionInput.tsx b/packages/console/src/components/Launch/LaunchForm/CollectionInput.tsx
diff --git a/...omponents/Launch/LaunchForm/BlobInput.tsx → ...chForm/LaunchFormComponents/BlobInput.tsx b/...omponents/Launch/LaunchForm/BlobInput.tsx → ...chForm/LaunchFormComponents/BlobInput.tsx
@@ -1,18 +1,25 @@
+import React, { FC, useEffect, useMemo, useState } from 'react';
 import {
   FormControl,
-  FormHelperText,
   InputLabel,
   MenuItem,
   Select,
   TextField,
-  Typography,
 } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { BlobDimensionality } from 'models/Common/types';
-import * as React from 'react';
-import t from './strings';
-import { InputProps } from './types';
-import { getLaunchInputId, isBlobValue } from './utils';
+import { Core } from '@flyteorg/flyteidl-types';
+import t from '../strings';
+import {
+  BlobValue,
+  InputProps,
+  InputTypeDefinition,
+  InputValue,
+} from '../types';
+import { getLaunchInputId, isBlobValue } from '../utils';
+import { StyledCard } from './StyledCard';
+import { getHelperForInput } from '../inputHelpers/getHelperForInput';
+import { InputHelper } from '../inputHelpers/types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   dimensionalityInput: {
@@ -23,7 +30,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     flex: '1 1 auto',
   },
   inputContainer: {
-    borderLeft: `1px solid ${theme.palette.divider}`,
     marginTop: theme.spacing(1),
     paddingLeft: theme.spacing(1),
   },
@@ -34,70 +40,75 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+const tryGetBlobValue = (
+  typeDefinition: InputTypeDefinition,
+  helper: InputHelper,
+  value?: InputValue,
+) => {
+  if (isBlobValue(value)) {
+    return value;
+  }
+
+  let finalValue;
+  try {
+    finalValue = helper.fromLiteral(
+      value as Core.ILiteral,
+      typeDefinition,
+    ) as BlobValue;
+  } catch {
+    finalValue = helper.typeDefinitionToDefaultValue(
+      typeDefinition,
+    ) as BlobValue;
+  }
+
+  return finalValue;
+};
+
 /** A micro form for entering the values related to a Blob Literal */
-export const BlobInput: React.FC<InputProps> = props => {
+export const BlobInput: FC<InputProps> = props => {
   const styles = useStyles();
   const {
     error,
-    label,
     name,
     onChange,
     value: propValue,
     typeDefinition,
+    label,
   } = props;
-  const dimensionality = typeDefinition?.literalType?.blob?.dimensionality;
-  const blobValue = isBlobValue(propValue)
-    ? propValue
-    : {
-        uri: '',
-        dimensionality: dimensionality ?? BlobDimensionality.SINGLE,
-      };
-  const hasError = !!error;
-  const helperText = hasError ? error : props.helperText;
 
-  const handleUriChange = ({
-    target: { value: uri },
-  }: React.ChangeEvent<HTMLInputElement>) => {
-    onChange({
-      ...blobValue,
-      uri,
-    });
-  };
+  const helper = useMemo(
+    () => getHelperForInput(typeDefinition.type),
+    [typeDefinition],
+  );
 
-  const handleFormatChange = ({
-    target: { value: format },
-  }: React.ChangeEvent<HTMLInputElement>) => {
-    onChange({
-      ...blobValue,
-      format,
-    });
-  };
+  const [blobValue, setBlobValue] = useState<BlobValue>(
+    tryGetBlobValue(typeDefinition, helper, propValue),
+  );
 
-  const handleDimensionalityChange = ({
-    target: { value },
-  }: React.ChangeEvent<{ value: unknown }>) => {
-    onChange({
-      ...blobValue,
-      dimensionality: value as BlobDimensionality,
-    });
+  const handleChange = (input: Partial<BlobValue>) => {
+    const value = { ...blobValue, ...input } as BlobValue;
+    setBlobValue(value);
   };
 
+  useEffect(() => {
+    if (!blobValue) {
+      return;
+    }
+    onChange(blobValue);
+  }, [blobValue]);
+
   const selectId = getLaunchInputId(`${name}-select`);
 
   return (
-    <div>
-      <Typography variant="body1" component="label">
-        {label}
-      </Typography>
-      <FormHelperText error={hasError}>{helperText}</FormHelperText>
+    <StyledCard error={error} label={label}>
       <div className={styles.inputContainer}>
         <TextField
           id={getLaunchInputId(`${name}-uri`)}
           helperText={t('blobUriHelperText')}
           fullWidth={true}
           label="uri"
-          onChange={handleUriChange}
-          value={blobValue.uri}
+          onChange={e => handleChange({ uri: e.target.value })}
+          value={blobValue?.uri}
           variant="outlined"
         />
         <div className={styles.metadataContainer}>
@@ -106,17 +117,21 @@ export const BlobInput: React.FC<InputProps> = props => {
             id={getLaunchInputId(`${name}-format`)}
             helperText={t('blobFormatHelperText')}
             label="format"
-            onChange={handleFormatChange}
-            value={blobValue.format}
+            onChange={e => handleChange({ format: e.target.value })}
+            value={blobValue?.format}
             variant="outlined"
           />
           <FormControl className={styles.dimensionalityInput}>
             <InputLabel id={`${selectId}-label`}>Dimensionality</InputLabel>
             <Select
               labelId={`${selectId}-label`}
               id={selectId}
-              value={blobValue.dimensionality}
-              onChange={handleDimensionalityChange}
+              value={blobValue?.dimensionality}
+              onChange={e =>
+                handleChange({
+                  dimensionality: e.target.value as BlobDimensionality,
+                })
+              }
               disabled
             >
               <MenuItem value={BlobDimensionality.SINGLE}>
@@ -129,6 +144,6 @@ export const BlobInput: React.FC<InputProps> = props => {
           </FormControl>
         </div>
       </div>
-    </div>
+    </StyledCard>
   );
 };
diff --git a/packages/console/src/components/Launch/LaunchForm/LaunchFormComponents/BooleanInput.tsx b/packages/console/src/components/Launch/LaunchForm/LaunchFormComponents/BooleanInput.tsx
@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  Switch,
+} from '@material-ui/core';
+import { InputProps } from '../types';
+import { getLaunchInputId } from '../utils';
+import { makeSwitchChangeHandler } from '../handlers';
+
+/** A micro form for entering the values related to a Blob Literal */
+export const BooleanInput: FC<InputProps> = props => {
+  const { name, value, onChange, label, error, required } = props;
+
+  return (
+    <FormControl>
+      <FormControlLabel
+        control={
+          <Switch
+            id={getLaunchInputId(name)}
+            checked={!!value}
+            onChange={makeSwitchChangeHandler(onChange)}
+            value={name}
+            required={required}
+          />
+        }
+        label={label}
+      />
+      <FormHelperText error={!!error}>{error}</FormHelperText>
+    </FormControl>
+  );
+};