feat: Enables support for Blobs on the Launch form

src/components/Launch/LaunchWorkflowForm/BlobInput.tsx

@@ -0,0 +1,126 @@
+import {
+    FormControl,
+    FormHelperText,
+    InputLabel,
+    MenuItem,
+    Select,
+    TextField,
+    Typography
+} from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import { BlobDimensionality } from 'models';
+import * as React from 'react';
+import {
+    blobFormatHelperText,
+    blobUriHelperText,
+    defaultBlobValue
+} from './constants';
+import { InputProps } from './types';
+import { getLaunchInputId, isBlobValue } from './utils';
+
+const useStyles = makeStyles((theme: Theme) => ({
+    dimensionalityInput: {
+        flex: '1 1 auto',
+        marginLeft: theme.spacing(2)
+    },
+    formatInput: {
+        flex: '1 1 auto'
+    },
+    inputContainer: {
+        borderLeft: `1px solid ${theme.palette.divider}`,
+        marginTop: theme.spacing(1),
+        paddingLeft: theme.spacing(1)
+    },
+    metadataContainer: {
+        display: 'flex',
+        marginTop: theme.spacing(1),
+        width: '100%'
+    }
+}));
+
+/** A micro form for entering the values related to a Blob Literal */
+export const BlobInput: React.FC<InputProps> = props => {
+    const styles = useStyles();
+    const { error, label, name, onChange, value: propValue } = props;
+    const blobValue = isBlobValue(propValue) ? propValue : defaultBlobValue;
+    const hasError = !!error;
+    const helperText = hasError ? error : props.helperText;
+
+    const handleUriChange = ({
+        target: { value: uri }
+    }: React.ChangeEvent<HTMLInputElement>) => {
+        onChange({
+            ...blobValue,
+            uri
+        });
+    };
+
+    const handleFormatChange = ({
+        target: { value: format }
+    }: React.ChangeEvent<HTMLInputElement>) => {
+        onChange({
+            ...blobValue,
+            format
+        });
+    };
+
+    const handleDimensionalityChange = ({
+        target: { value }
+    }: React.ChangeEvent<{ value: unknown }>) => {
+        onChange({
+            ...blobValue,
+            dimensionality: value as BlobDimensionality
+        });
+    };
+
+    const selectId = getLaunchInputId(`${name}-select`);
+
+    return (
+        <div>
+            <Typography variant="body1" component="label">
+                {label}
+            </Typography>
+            <FormHelperText error={hasError}>{helperText}</FormHelperText>
+            <div className={styles.inputContainer}>
+                <TextField
+                    id={getLaunchInputId(`${name}-uri`)}
+                    helperText={blobUriHelperText}
+                    fullWidth={true}
+                    label="uri"
+                    onChange={handleUriChange}
+                    value={blobValue.uri}
+                    variant="outlined"
+                />
+                <div className={styles.metadataContainer}>
+                    <TextField
+                        className={styles.formatInput}
+                        id={getLaunchInputId(`${name}-format`)}
+                        helperText={blobFormatHelperText}
+                        label="format"
+                        onChange={handleFormatChange}
+                        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}
+                        >
+                            <MenuItem value={BlobDimensionality.SINGLE}>
+                                Single (File)
+                            </MenuItem>
+                            <MenuItem value={BlobDimensionality.MULTIPART}>
+                                Multipart (Directory)
+                            </MenuItem>
+                        </Select>
+                    </FormControl>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/Launch/LaunchWorkflowForm/LaunchWorkflowFormInputs.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { BlobInput } from './BlobInput';
 import { CollectionInput } from './CollectionInput';
 import { SimpleInput } from './SimpleInput';
 import { useStyles } from './styles';
@@ -14,6 +15,8 @@ import { useFormInputsState } from './useFormInputsState';
 function getComponentForInput(input: InputProps, showErrors: boolean) {
     const props = { ...input, error: showErrors ? input.error : undefined };
     switch (input.typeDefinition.type) {
+        case InputType.Blob:
+            return <BlobInput {...props} />;
         case InputType.Collection:
             return <CollectionInput {...props} />;
         case InputType.Map:

src/components/Launch/LaunchWorkflowForm/__mocks__/mockInputs.ts

@@ -2,7 +2,12 @@ import { dateToTimestamp, millisecondsToDuration } from 'common/utils';
 import { Core } from 'flyteidl';
 import { mapValues } from 'lodash';
 import * as Long from 'long';
-import { SimpleType, TypedInterface, Variable } from 'models/Common';
+import {
+    BlobDimensionality,
+    SimpleType,
+    TypedInterface,
+    Variable
+} from 'models/Common';
 import { literalNone } from '../inputHelpers/constants';
 import { primitiveLiteral } from './utils';
 
@@ -23,6 +28,7 @@ export type SimpleVariableKey =
     | 'simpleInteger'
     | 'simpleFloat'
     | 'simpleBoolean'
+    | 'simpleBlob'
     | 'simpleDuration'
     | 'simpleDatetime'
     | 'simpleBinary'
@@ -39,11 +45,14 @@ export const mockSimpleVariables: Record<SimpleVariableKey, Variable> = {
     simpleDatetime: simpleType(SimpleType.DATETIME, 'a simple datetime value'),
     simpleBinary: simpleType(SimpleType.BINARY, 'a simple binary value'),
     simpleError: simpleType(SimpleType.ERROR, 'a simple error value'),
-    simpleStruct: simpleType(SimpleType.STRUCT, 'a simple struct value')
+    simpleStruct: simpleType(SimpleType.STRUCT, 'a simple struct value'),
+    simpleBlob: {
+        description: 'a simple single-dimensional blob',
+        type: { blob: { dimensionality: BlobDimensionality.SINGLE } }
+    }
     // schema: {},
     // collection: {},
-    // mapValue: {},
-    // blob: {}
+    // mapValue: {}
 };
 
 export const simpleVariableDefaults: Record<
@@ -63,7 +72,20 @@ export const simpleVariableDefaults: Record<
     simpleError: literalNone(),
     simpleFloat: primitiveLiteral({ floatValue: 1.5 }),
     simpleInteger: primitiveLiteral({ integer: Long.fromNumber(12345) }),
-    simpleStruct: literalNone()
+    simpleStruct: literalNone(),
+    simpleBlob: {
+        scalar: {
+            blob: {
+                uri: 's3://someBlobUri/goesHere',
+                metadata: {
+                    type: {
+                        format: 'csv',
+                        dimensionality: BlobDimensionality.SINGLE
+                    }
+                }
+            }
+        }
+    }
 };
 
 export const mockCollectionVariables: Record<string, Variable> = mapValues(

src/components/Launch/LaunchWorkflowForm/__mocks__/utils.ts

@@ -1,5 +1,22 @@
 import { Core } from 'flyteidl';
+import { BlobDimensionality } from 'models';
 
 export function primitiveLiteral(primitive: Core.IPrimitive): Core.ILiteral {
     return { scalar: { primitive } };
 }
+
+export function blobLiteral({
+    uri,
+    format,
+    dimensionality
+}: {
+    uri?: string;
+    format?: string;
+    dimensionality?: BlobDimensionality;
+}): Core.ILiteral {
+    return {
+        scalar: {
+            blob: { uri, metadata: { type: { format, dimensionality } } }
+        }
+    };
+}

src/components/Launch/LaunchWorkflowForm/__stories__/LaunchWorkflowForm.stories.tsx

@@ -36,6 +36,7 @@ import { useExecutionLaunchConfiguration } from '../useExecutionLaunchConfigurat
 import { getWorkflowInputs } from '../utils';
 
 const booleanInputName = 'simpleBoolean';
+const blobInputName = 'simpleBlob';
 const stringInputName = 'simpleString';
 const integerInputName = 'simpleInteger';
 const submitAction = action('createWorkflowExecution');
@@ -168,6 +169,7 @@ stories.add('Required Inputs', () => {
     parameters[stringInputName].required = true;
     parameters[integerInputName].required = true;
     parameters[booleanInputName].required = true;
+    parameters[blobInputName].required = true;
     return renderForm({ mocks });
 });
 stories.add('Default Values', () => {

src/components/Launch/LaunchWorkflowForm/constants.ts

@@ -1,5 +1,5 @@
-import { SimpleType } from 'models';
-import { InputType } from './types';
+import { BlobDimensionality, SimpleType } from 'models';
+import { BlobValue, InputType } from './types';
 
 export const launchPlansTableRowHeight = 40;
 export const launchPlansTableColumnWidths = {
@@ -25,7 +25,7 @@ export const formStrings = {
 /** Maps any valid InputType enum to a display string */
 export const typeLabels: { [k in InputType]: string } = {
     [InputType.Binary]: 'binary',
-    [InputType.Blob]: 'blob',
+    [InputType.Blob]: 'file/blob',
     [InputType.Boolean]: 'boolean',
     [InputType.Collection]: '',
     [InputType.Datetime]: 'datetime - UTC',
@@ -55,6 +55,13 @@ export const simpleTypeToInputType: { [k in SimpleType]: InputType } = {
     [SimpleType.STRUCT]: InputType.Struct
 };
 
+export const defaultBlobValue: BlobValue = {
+    uri: '',
+    dimensionality: BlobDimensionality.SINGLE
+};
+
 export const requiredInputSuffix = '*';
 export const cannotLaunchWorkflowString = 'Workflow cannot be launched';
 export const unsupportedRequiredInputsString = `This Workflow version contains one or more required inputs which are not supported by Flyte Console and do not have default values specified in the Workflow definition or the selected Launch Plan.\n\nYou can launch this Workflow version with the Flyte CLI or by selecting a Launch Plan which provides values for the unsupported inputs.\n\nThe required inputs are :`;
+export const blobUriHelperText = '(required) location of the data';
+export const blobFormatHelperText = '(optional) csv, parquet, etc...';

src/components/Launch/LaunchWorkflowForm/inputHelpers/blob.ts

@@ -0,0 +1,91 @@
+import { Core } from 'flyteidl';
+import { isObject } from 'lodash';
+import { BlobDimensionality } from 'models';
+import { BlobValue, InputValue } from '../types';
+import { literalNone } from './constants';
+import { ConverterInput, InputHelper, InputValidatorParams } from './types';
+import { isKeyOfBlobDimensionality } from './utils';
+
+function fromLiteral(literal: Core.ILiteral): InputValue {
+    if (!literal.scalar || !literal.scalar.blob) {
+        throw new Error('Literal blob missing scalar.blob property');
+    }
+    const { blob } = literal.scalar;
+    const uri = blob.uri ?? '';
+    // throw away empty format values
+    const format = blob.metadata?.type?.format || undefined;
+    const dimensionality =
+        blob.metadata?.type?.dimensionality ?? BlobDimensionality.SINGLE;
+
+    return {
+        dimensionality,
+        format,
+        uri
+    };
+}
+
+// Allows for string values ('single'/'multipart') when specifying blobs manually in collections
+function getDimensionality(value: string | number) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (isKeyOfBlobDimensionality(value)) {
+        return BlobDimensionality[value];
+    }
+    return BlobDimensionality.SINGLE;
+}
+
+function toLiteral({ value }: ConverterInput): Core.ILiteral {
+    if (!isObject(value)) {
+        return literalNone();
+    }
+    const {
+        dimensionality: rawDimensionality,
+        format: rawFormat,
+        uri
+    } = value as BlobValue;
+    if (!uri) {
+        return literalNone();
+    }
+
+    const dimensionality = getDimensionality(rawDimensionality);
+
+    // Send undefined for empty string values of format
+    const format = rawFormat ? rawFormat : undefined;
+    return {
+        scalar: {
+            blob: { uri, metadata: { type: { dimensionality, format } } }
+        }
+    };
+}
+
+function validate({ value, required }: InputValidatorParams) {
+    if (typeof value !== 'object') {
+        throw new Error('Value must be an object');
+    }
+
+    const blobValue = value as BlobValue;
+    if (required && (typeof blobValue.uri == null || !blobValue.uri.length)) {
+        throw new Error('uri is required');
+    }
+    if (blobValue != null && typeof blobValue.uri !== 'string') {
+        throw new Error('uri must be a string');
+    }
+    if (blobValue.dimensionality == null) {
+        throw new Error('dimensionality is required');
+    }
+    if (!(getDimensionality(blobValue.dimensionality) in BlobDimensionality)) {
+        throw new Error(
+            `unknown dimensionality value: ${blobValue.dimensionality}`
+        );
+    }
+    if (blobValue.format != null && typeof blobValue.format !== 'string') {
+        throw new Error('format must be a string');
+    }
+}
+
+export const blobHelper: InputHelper = {
+    fromLiteral,
+    toLiteral,
+    validate
+};

src/components/Launch/LaunchWorkflowForm/inputHelpers/boolean.ts

@@ -1,7 +1,7 @@
 import { Core } from 'flyteidl';
 import { InputValue } from '../types';
 import { primitiveLiteralPaths } from './constants';
-import { ConverterInput, InputHelper } from './types';
+import { ConverterInput, InputHelper, InputValidatorParams } from './types';
 import { extractLiteralWithCheck } from './utils';
 
 /** Checks that a value is an acceptable boolean value. These can be
@@ -47,7 +47,7 @@ function fromLiteral(literal: Core.ILiteral): InputValue {
     );
 }
 
-function validate({ value }: ConverterInput) {
+function validate({ value }: InputValidatorParams) {
     if (!isValidBoolean(value)) {
         throw new Error('Value is not a valid boolean');
     }