feat: 0.8.0 release

src/common/formatters.ts

@@ -71,7 +71,7 @@ export function millisecondsToHMS(valueMS: number): string {
     }
 
     if (valueMS < 1000) {
-        return subSecondString;
+        return `${valueMS}ms`;
     }
 
     const duration = moment.duration(valueMS);

src/common/test/formatters.spec.ts

@@ -102,8 +102,8 @@ describe('formatDateLocalTimezone', () => {
 const millisecondToHMSTestCases: [number, string][] = [
     [-1, unknownValueString],
     [0, zeroSecondsString],
-    [1, subSecondString],
-    [999, subSecondString],
+    [1, '1ms'],
+    [999, '999ms'],
     [1000, '1s'],
     [60000, '1m'],
     [61000, '1m 1s'],

src/common/utils.ts

@@ -99,3 +99,20 @@ export function sortedObjectKeys(
 ): ReturnType<typeof Object.keys> {
     return Object.keys(object).sort((a, b) => a.localeCompare(b));
 }
+
+/**
+ * Helper function for exhaustive checks of discriminated unions.
+ * https://basarat.gitbooks.io/typescript/docs/types/discriminated-unions.html
+ */
+export function assertNever(
+    value: never,
+    { noThrow }: { noThrow?: boolean } = {}
+): never {
+    if (noThrow) {
+        return value;
+    }
+
+    throw new Error(
+        `Unhandled discriminated union member: ${JSON.stringify(value)}`
+    );
+}

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/LaunchWorkflowForm.tsx

@@ -16,12 +16,13 @@ import {
     workflowSortFields
 } from 'models';
 import * as React from 'react';
-import { formStrings } from './constants';
+import { formStrings, unsupportedRequiredInputsString } from './constants';
 import { InputValueCacheContext } from './inputValueCache';
 import { LaunchWorkflowFormInputs } from './LaunchWorkflowFormInputs';
 import { SearchableSelector } from './SearchableSelector';
 import { useStyles } from './styles';
 import { LaunchWorkflowFormProps } from './types';
+import { UnsupportedRequiredInputsError } from './UnsupportedRequiredInputsError';
 import { useLaunchWorkflowFormState } from './useLaunchWorkflowFormState';
 import { workflowsToSearchableSelectorOptions } from './utils';
 
@@ -67,6 +68,11 @@ export const LaunchWorkflowForm: React.FC<LaunchWorkflowFormProps> = props => {
         state.onSubmit();
     };
 
+    const preventSubmit =
+        submissionState.loading ||
+        !state.inputLoadingState.hasLoaded ||
+        state.unsupportedRequiredInputs.length > 0;
+
     return (
         <InputValueCacheContext.Provider value={state.inputValueCache}>
             <DialogTitle disableTypography={true} className={styles.header}>
@@ -114,12 +120,18 @@ export const LaunchWorkflowForm: React.FC<LaunchWorkflowFormProps> = props => {
                             {...state.inputLoadingState}
                         >
                             <section title={formStrings.inputs}>
-                                <LaunchWorkflowFormInputs
-                                    key={state.formKey}
-                                    inputs={state.inputs}
-                                    ref={state.formInputsRef}
-                                    showErrors={state.showErrors}
-                                />
+                                {state.unsupportedRequiredInputs.length > 0 ? (
+                                    <UnsupportedRequiredInputsError
+                                        inputs={state.unsupportedRequiredInputs}
+                                    />
+                                ) : (
+                                    <LaunchWorkflowFormInputs
+                                        key={state.formKey}
+                                        inputs={state.inputs}
+                                        ref={state.formInputsRef}
+                                        showErrors={state.showErrors}
+                                    />
+                                )}
                             </section>
                         </WaitForData>
                     ) : null}
@@ -143,10 +155,7 @@ export const LaunchWorkflowForm: React.FC<LaunchWorkflowFormProps> = props => {
                     </Button>
                     <Button
                         color="primary"
-                        disabled={
-                            submissionState.loading ||
-                            !state.inputLoadingState.hasLoaded
-                        }
+                        disabled={preventSubmit}
                         id="launch-workflow-submit"
                         onClick={submit}
                         type="submit"

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/UnsupportedRequiredInputsError.tsx

@@ -0,0 +1,62 @@
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import { NonIdealState } from 'components/common';
+import { useCommonStyles } from 'components/common/styles';
+import * as React from 'react';
+import {
+    cannotLaunchWorkflowString,
+    requiredInputSuffix,
+    unsupportedRequiredInputsString
+} from './constants';
+import { ParsedInput } from './types';
+
+const useStyles = makeStyles((theme: Theme) => ({
+    contentContainer: {
+        whiteSpace: 'pre-line',
+        textAlign: 'left'
+    },
+    errorContainer: {
+        marginBottom: theme.spacing(2)
+    }
+}));
+
+function formatLabel(label: string) {
+    return label.endsWith(requiredInputSuffix)
+        ? label.substring(0, label.length - 1)
+        : label;
+}
+
+export interface UnsupportedRequiredInputsErrorProps {
+    inputs: ParsedInput[];
+}
+/** An informational error to be shown if a Workflow cannot be launch due to
+ * required inputs for which we will not be able to provide a value.
+ */
+export const UnsupportedRequiredInputsError: React.FC<UnsupportedRequiredInputsErrorProps> = ({
+    inputs
+}) => {
+    const styles = useStyles();
+    const commonStyles = useCommonStyles();
+    return (
+        <NonIdealState
+            className={styles.errorContainer}
+            icon={ErrorOutline}
+            size="medium"
+            title={cannotLaunchWorkflowString}
+        >
+            <div className={styles.contentContainer}>
+                <p>{unsupportedRequiredInputsString}</p>
+                <ul className={commonStyles.listUnstyled}>
+                    {inputs.map(input => (
+                        <li
+                            key={input.name}
+                            className={commonStyles.textMonospace}
+                        >
+                            {formatLabel(input.label)}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </NonIdealState>
+    );
+};

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 } } }
+        }
+    };
+}