From 563950a8f0a465a5495c7b5769bbffd218e43379 Mon Sep 17 00:00:00 2001 From: eugenejahn Date: Fri, 8 Jul 2022 10:58:06 -0700 Subject: [PATCH 1/4] feat: support union type for launch plan Signed-off-by: eugenejahn --- .../Launch/LaunchForm/LaunchFormInputs.tsx | 6 +- .../Launch/LaunchForm/SimpleInput.tsx | 1 + .../Launch/LaunchForm/UnionInput.tsx | 156 ++++++++++++++++++ .../components/Launch/LaunchForm/constants.ts | 1 + .../inputHelpers/getHelperForInput.ts | 2 + .../Launch/LaunchForm/inputHelpers/union.ts | 62 +++++++ .../Launch/LaunchForm/inputHelpers/utils.ts | 20 ++- .../src/components/Launch/LaunchForm/types.ts | 9 +- .../src/components/Launch/LaunchForm/utils.ts | 19 ++- .../console/src/components/common/strings.ts | 2 + 10 files changed, 270 insertions(+), 8 deletions(-) create mode 100644 packages/zapp/console/src/components/Launch/LaunchForm/UnionInput.tsx create mode 100644 packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/union.ts diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/LaunchFormInputs.tsx b/packages/zapp/console/src/components/Launch/LaunchForm/LaunchFormInputs.tsx index 6a5169e94..62817abb2 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/LaunchFormInputs.tsx +++ b/packages/zapp/console/src/components/Launch/LaunchForm/LaunchFormInputs.tsx @@ -8,6 +8,7 @@ import { MapInput } from './MapInput'; import { NoInputsNeeded } from './NoInputsNeeded'; import { SimpleInput } from './SimpleInput'; import { StructInput } from './StructInput'; +import { UnionInput } from './UnionInput'; import { useStyles } from './styles'; import { BaseInterpretedLaunchState, InputProps, InputType, LaunchFormInputsRef } from './types'; import { UnsupportedInput } from './UnsupportedInput'; @@ -15,9 +16,12 @@ import { UnsupportedRequiredInputsError } from './UnsupportedRequiredInputsError import { useFormInputsState } from './useFormInputsState'; import { isEnterInputsState } from './utils'; -function getComponentForInput(input: InputProps, showErrors: boolean) { +export function getComponentForInput(input: InputProps, showErrors: boolean) { const props = { ...input, error: showErrors ? input.error : undefined }; + switch (input.typeDefinition.type) { + case InputType.Union: + return ; case InputType.Blob: return ; case InputType.Collection: diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/SimpleInput.tsx b/packages/zapp/console/src/components/Launch/LaunchForm/SimpleInput.tsx index f5077e233..ccafe29f0 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/SimpleInput.tsx +++ b/packages/zapp/console/src/components/Launch/LaunchForm/SimpleInput.tsx @@ -68,6 +68,7 @@ export const SimpleInput: React.FC = (props) => { ({ + inlineTitle: { + display: 'flex', + gap: theme.spacing(1), + alignItems: 'center', + paddingBottom: theme.spacing(3), + }, +})); + +const generateInputTypeToValueMap = ( + listOfSubTypes: InputTypeDefinition[] | undefined, + initialInputValue: UnionValue | undefined, + initialType: InputTypeDefinition, +): Record | {} => { + if (!listOfSubTypes?.length) { + return {}; + } + + return listOfSubTypes.reduce(function (map, subType) { + if (initialInputValue && subType === initialType) { + map[subType.type] = initialInputValue; + } else { + map[subType.type] = { value: '', typeDefinition: subType }; + } + return map; + }, {}); +}; + +const generateSearchableSelectorOption = ( + inputTypeDefinition: InputTypeDefinition, +): SearchableSelectorOption => { + return { + id: inputTypeDefinition.type, + data: inputTypeDefinition.type, + name: formatType(inputTypeDefinition), + } as SearchableSelectorOption; +}; + +const generateListOfSearchableSelectorOptions = ( + listOfInputTypeDefinition: InputTypeDefinition[], +): SearchableSelectorOption[] => { + return listOfInputTypeDefinition.map((inputTypeDefinition) => + generateSearchableSelectorOption(inputTypeDefinition), + ); +}; + +export const UnionInput = (props: InputProps) => { + const { initialValue, required, label, onChange, typeDefinition, error, description } = props; + + const classes = useStyles(); + + const listOfSubTypes = typeDefinition?.listOfSubTypes; + + if (!listOfSubTypes) { + return <>; + } + + const inputTypeToInputTypeDefinition = listOfSubTypes.reduce( + (previous, current) => ({ ...previous, [current.type]: current }), + {}, + ); + + const initialInputValue = + initialValue && + (getHelperForInput(typeDefinition.type).fromLiteral( + initialValue, + typeDefinition, + ) as UnionValue); + + const initialInputTypeDefinition = initialInputValue?.typeDefinition ?? listOfSubTypes[0]; + + if (!initialInputTypeDefinition) { + return <>; + } + + const [inputTypeToValueMap, setInputTypeToValueMap] = React.useState< + Record | {} + >(generateInputTypeToValueMap(listOfSubTypes, initialInputValue, initialInputTypeDefinition)); + + const [selectedInputType, setSelectedInputType] = React.useState( + initialInputTypeDefinition.type, + ); + + const selectedInputTypeDefintion = inputTypeToInputTypeDefinition[ + selectedInputType + ] as InputTypeDefinition; + + const handleTypeOnSelectionChanged = (value: SearchableSelectorOption) => { + setSelectedInputType(value.data); + }; + + const handleSubTypeOnChange = (input: InputValue) => { + onChange({ + value: input, + typeDefinition: selectedInputTypeDefintion, + } as UnionValue); + setInputTypeToValueMap({ + ...inputTypeToValueMap, + [selectedInputType]: { + value: input, + typeDefinition: selectedInputTypeDefintion, + } as UnionValue, + }); + }; + + return ( + + +
+ + {label} + + + +
+ +
+ {getComponentForInput( + { + description: description, + name: `${formatType(selectedInputTypeDefintion)}`, + label: '', + required: required, + typeDefinition: selectedInputTypeDefintion, + onChange: handleSubTypeOnChange, + value: inputTypeToValueMap[selectedInputType]?.value, + error: error, + } as InputProps, + true, + )} +
+ + + ); +}; diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/constants.ts b/packages/zapp/console/src/components/Launch/LaunchForm/constants.ts index 81a326c21..9b44cd7e3 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/constants.ts +++ b/packages/zapp/console/src/components/Launch/LaunchForm/constants.ts @@ -45,6 +45,7 @@ export const typeLabels: { [k in InputType]: string } = { [InputType.Schema]: 'schema - uri', [InputType.String]: 'string', [InputType.Struct]: 'struct', + [InputType.Union]: '', [InputType.Unknown]: 'unknown', }; diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/getHelperForInput.ts b/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/getHelperForInput.ts index 819faad78..106f31bbe 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/getHelperForInput.ts +++ b/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/getHelperForInput.ts @@ -11,6 +11,7 @@ import { noneHelper } from './none'; import { schemaHelper } from './schema'; import { stringHelper } from './string'; import { structHelper } from './struct'; +import { unionHelper } from './union'; import { InputHelper } from './types'; const unsupportedHelper = noneHelper; @@ -32,6 +33,7 @@ const inputHelpers: Record = { [InputType.Schema]: schemaHelper, [InputType.String]: stringHelper, [InputType.Struct]: structHelper, + [InputType.Union]: unionHelper, [InputType.Unknown]: unsupportedHelper, }; diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/union.ts b/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/union.ts new file mode 100644 index 000000000..6ceb44153 --- /dev/null +++ b/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/union.ts @@ -0,0 +1,62 @@ +import { Core } from 'flyteidl'; +import { isObject } from 'lodash'; +import { InputTypeDefinition, InputValue, UnionValue } from '../types'; +import { getHelperForInput } from './getHelperForInput'; +import { ConverterInput, InputHelper, InputValidatorParams } from './types'; +import t from '../../../common/strings'; + +function fromLiteral(literal: Core.ILiteral, inputTypeDefinition: InputTypeDefinition): InputValue { + const { listOfSubTypes } = inputTypeDefinition; + if (!listOfSubTypes?.length) { + throw new Error(t('missingUnionListOfSubType')); + } + + // loop though the subtypes to find the correct match literal type + for (let i = 0; i < listOfSubTypes.length; i++) { + try { + const value = getHelperForInput(listOfSubTypes[i].type).fromLiteral( + literal, + listOfSubTypes[i], + ); + return { value, typeDefinition: listOfSubTypes[i] } as UnionValue; + } catch (error) { + // do nothing here it's expected to have error + } + } + throw new Error(t('noMatchingResults')); +} + +function toLiteral({ value, typeDefinition: { listOfSubTypes } }: ConverterInput): Core.ILiteral { + if (!listOfSubTypes) { + throw new Error(t('missingUnionListOfSubType')); + } + + if (!isObject(value)) { + throw new Error(t('valueMustBeObject')); + } + + const { value: unionValue, typeDefinition } = value as UnionValue; + + return getHelperForInput(typeDefinition.type).toLiteral({ + value: unionValue, + typeDefinition: typeDefinition, + } as ConverterInput); +} + +function validate({ value, typeDefinition: { listOfSubTypes } }: InputValidatorParams) { + if (!value) { + throw new Error(t('valueRequired')); + } + if (!isObject(value)) { + throw new Error(t('valueMustBeObject')); + } + + const { typeDefinition } = value as UnionValue; + getHelperForInput(typeDefinition.type).validate(value as InputValidatorParams); +} + +export const unionHelper: InputHelper = { + fromLiteral, + toLiteral, + validate, +}; diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/utils.ts b/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/utils.ts index 2f989dba3..83b570cbc 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/utils.ts +++ b/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/utils.ts @@ -1,6 +1,6 @@ import { assertNever, stringifyValue } from 'common/utils'; import { Core } from 'flyteidl'; -import { get } from 'lodash'; +import { get, has } from 'lodash'; import { BlobDimensionality } from 'models/Common/types'; import { InputType, InputTypeDefinition } from '../types'; @@ -8,11 +8,10 @@ import { InputType, InputTypeDefinition } from '../types'; * if the given property doesn't exist. */ export function extractLiteralWithCheck(literal: Core.ILiteral, path: string): T { - const value = get(literal, path); - if (value === undefined) { + if (!has(literal, path)) { throw new Error(`Failed to extract literal value with path ${path}`); } - return value as T; + return get(literal, path) as T; } /** Converts a value within a collection to the appropriate string @@ -29,7 +28,7 @@ export function collectionChildToString(type: InputType, value: any) { * supported for use in the Launch form. */ export function typeIsSupported(typeDefinition: InputTypeDefinition): boolean { - const { type, subtype } = typeDefinition; + const { type, subtype, listOfSubTypes } = typeDefinition; switch (type) { case InputType.Binary: case InputType.Error: @@ -47,6 +46,17 @@ export function typeIsSupported(typeDefinition: InputTypeDefinition): boolean { case InputType.String: case InputType.Struct: return true; + case InputType.Union: + if (listOfSubTypes?.length) { + var isSupported = true; + listOfSubTypes.forEach((subtype) => { + if (!typeIsSupported(subtype)) { + isSupported = false; + } + }); + return isSupported; + } + return false; case InputType.Map: if (!subtype) { return false; diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/types.ts b/packages/zapp/console/src/components/Launch/LaunchForm/types.ts index 7c3ff2f52..e605a83f3 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/types.ts +++ b/packages/zapp/console/src/components/Launch/LaunchForm/types.ts @@ -159,6 +159,7 @@ export enum InputType { Schema = 'SCHEMA', String = 'STRING', Struct = 'STRUCT', + Union = 'Union', Unknown = 'UNKNOWN', } @@ -166,6 +167,7 @@ export interface InputTypeDefinition { literalType: LiteralType; type: InputType; subtype?: InputTypeDefinition; + listOfSubTypes?: InputTypeDefinition[]; } export interface BlobValue { @@ -174,7 +176,12 @@ export interface BlobValue { uri: string; } -export type InputValue = string | number | boolean | Date | BlobValue; +export interface UnionValue { + value: InputValue; + typeDefinition: InputTypeDefinition; +} + +export type InputValue = string | number | boolean | Date | BlobValue | UnionValue; export type InputChangeHandler = (newValue: InputValue) => void; export interface InputProps { diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/utils.ts b/packages/zapp/console/src/components/Launch/LaunchForm/utils.ts index 05b65e54a..75c748b7f 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/utils.ts +++ b/packages/zapp/console/src/components/Launch/LaunchForm/utils.ts @@ -75,13 +75,25 @@ export function getTaskInputs(task: Task): Record { /** Returns a formatted string based on an InputTypeDefinition. * ex. `string`, `string[]`, `map` */ -export function formatType({ type, subtype }: InputTypeDefinition): string { +export function formatType({ type, subtype, listOfSubTypes }: InputTypeDefinition): string { if (type === InputType.Collection) { return subtype ? `${formatType(subtype)}[]` : 'collection'; } if (type === InputType.Map) { return subtype ? `map` : 'map'; } + if (type === InputType.Union) { + if (!listOfSubTypes) return 'union'; + + const concatListOfSubTypes = listOfSubTypes.reduce((previous, currentValue, currentIndex) => { + if (currentIndex === listOfSubTypes.length - 1) { + return previous + `${formatType(currentValue)}`; + } + return previous + `${formatType(currentValue)} |`; + }, ''); + + return `union [${concatListOfSubTypes}]`; + } return typeLabels[type]; } @@ -157,6 +169,11 @@ export function getInputDefintionForLiteralType(literalType: LiteralType): Input result.type = simpleTypeToInputType[literalType.simple]; } else if (literalType.enumType) { result.type = InputType.Enum; + } else if (literalType.unionType) { + result.type = InputType.Union; + result.listOfSubTypes = literalType.unionType.variants?.map((variant) => + getInputDefintionForLiteralType(variant as LiteralType), + ); } return result; } diff --git a/packages/zapp/console/src/components/common/strings.ts b/packages/zapp/console/src/components/common/strings.ts index 97b6cad04..99d848ced 100644 --- a/packages/zapp/console/src/components/common/strings.ts +++ b/packages/zapp/console/src/components/common/strings.ts @@ -12,6 +12,7 @@ const str = { securityContextHeader: 'Security Context', serviceAccountHeader: 'Service Account', noMatchingResults: 'No matching results', + missingUnionListOfSubType: 'Unexpected missing type for union', missingMapSubType: 'Unexpected missing subtype for map', mapMissingMapProperty: 'Map literal missing `map` property', mapMissingMapLiteralsProperty: 'Map literal missing `map.literals` property', @@ -22,6 +23,7 @@ const str = { valueNotParse: 'Value did not parse to an object', valueKeyRequired: "Value's key is required", valueValueInvalid: "Value's value is invalid", + valueMustBeObject: 'Value must be an object', }; export { patternKey } from '@flyteconsole/locale'; From b9fe17e5df54d498e7dd50b2fbd3a1a1c66260da Mon Sep 17 00:00:00 2001 From: eugenejahn Date: Fri, 8 Jul 2022 11:31:34 -0700 Subject: [PATCH 2/4] fix: format Signed-off-by: eugenejahn --- .../src/components/Launch/LaunchForm/UnionInput.tsx | 3 ++- .../zapp/console/src/components/Launch/LaunchForm/utils.ts | 7 +------ packages/zapp/console/src/components/common/strings.ts | 1 + 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/UnionInput.tsx b/packages/zapp/console/src/components/Launch/LaunchForm/UnionInput.tsx index 8613ffdb3..27ca281df 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/UnionInput.tsx +++ b/packages/zapp/console/src/components/Launch/LaunchForm/UnionInput.tsx @@ -8,6 +8,7 @@ import { formatType } from './utils'; import { getComponentForInput } from './LaunchFormInputs'; import { getHelperForInput } from './inputHelpers/getHelperForInput'; import { SearchableSelector, SearchableSelectorOption } from './SearchableSelector'; +import t from '../../common/strings'; const useStyles = makeStyles((theme: Theme) => ({ inlineTitle: { @@ -128,7 +129,7 @@ export const UnionInput = (props: InputProps) => { { - if (currentIndex === listOfSubTypes.length - 1) { - return previous + `${formatType(currentValue)}`; - } - return previous + `${formatType(currentValue)} |`; - }, ''); + const concatListOfSubTypes = listOfSubTypes.map((subtype) => formatType(subtype)).join(' | '); return `union [${concatListOfSubTypes}]`; } diff --git a/packages/zapp/console/src/components/common/strings.ts b/packages/zapp/console/src/components/common/strings.ts index 99d848ced..31d84397f 100644 --- a/packages/zapp/console/src/components/common/strings.ts +++ b/packages/zapp/console/src/components/common/strings.ts @@ -24,6 +24,7 @@ const str = { valueKeyRequired: "Value's key is required", valueValueInvalid: "Value's value is invalid", valueMustBeObject: 'Value must be an object', + type: 'Type', }; export { patternKey } from '@flyteconsole/locale'; From 934e921e5205a6a566860ee123bfd7385528573d Mon Sep 17 00:00:00 2001 From: eugenejahn Date: Fri, 8 Jul 2022 11:39:15 -0700 Subject: [PATCH 3/4] fix: update type label Signed-off-by: eugenejahn --- .../console/src/components/Launch/LaunchForm/constants.ts | 2 +- .../zapp/console/src/components/Launch/LaunchForm/utils.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/constants.ts b/packages/zapp/console/src/components/Launch/LaunchForm/constants.ts index 9b44cd7e3..5b5081b04 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/constants.ts +++ b/packages/zapp/console/src/components/Launch/LaunchForm/constants.ts @@ -45,7 +45,7 @@ export const typeLabels: { [k in InputType]: string } = { [InputType.Schema]: 'schema - uri', [InputType.String]: 'string', [InputType.Struct]: 'struct', - [InputType.Union]: '', + [InputType.Union]: 'union', [InputType.Unknown]: 'unknown', }; diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/utils.ts b/packages/zapp/console/src/components/Launch/LaunchForm/utils.ts index 2e8312303..2b508f65a 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/utils.ts +++ b/packages/zapp/console/src/components/Launch/LaunchForm/utils.ts @@ -83,11 +83,11 @@ export function formatType({ type, subtype, listOfSubTypes }: InputTypeDefinitio return subtype ? `map` : 'map'; } if (type === InputType.Union) { - if (!listOfSubTypes) return 'union'; + if (!listOfSubTypes) return typeLabels[type]; const concatListOfSubTypes = listOfSubTypes.map((subtype) => formatType(subtype)).join(' | '); - return `union [${concatListOfSubTypes}]`; + return `${typeLabels[type]} [${concatListOfSubTypes}]`; } return typeLabels[type]; } From 866e71bac816085683611c907aa452035d3b3ee6 Mon Sep 17 00:00:00 2001 From: eugenejahn Date: Fri, 8 Jul 2022 11:45:00 -0700 Subject: [PATCH 4/4] fix: update the format Signed-off-by: eugenejahn --- .../console/src/components/Launch/LaunchForm/UnionInput.tsx | 2 +- .../src/components/Launch/LaunchForm/inputHelpers/union.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/UnionInput.tsx b/packages/zapp/console/src/components/Launch/LaunchForm/UnionInput.tsx index 27ca281df..edbe21d54 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/UnionInput.tsx +++ b/packages/zapp/console/src/components/Launch/LaunchForm/UnionInput.tsx @@ -63,7 +63,7 @@ export const UnionInput = (props: InputProps) => { const listOfSubTypes = typeDefinition?.listOfSubTypes; - if (!listOfSubTypes) { + if (!listOfSubTypes?.length) { return <>; } diff --git a/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/union.ts b/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/union.ts index 6ceb44153..a8e485a78 100644 --- a/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/union.ts +++ b/packages/zapp/console/src/components/Launch/LaunchForm/inputHelpers/union.ts @@ -20,7 +20,10 @@ function fromLiteral(literal: Core.ILiteral, inputTypeDefinition: InputTypeDefin ); return { value, typeDefinition: listOfSubTypes[i] } as UnionValue; } catch (error) { - // do nothing here it's expected to have error + // do nothing here. it's expected to have error from fromLiteral + // because we loop through all the type to decode the input value + // the error should be something like this + // new Error(`Failed to extract literal value with path ${path}`); } } throw new Error(t('noMatchingResults'));