-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #30 from lyft/more-input-types
Add support for Collections in the launch UI
- Loading branch information
Showing
10 changed files
with
486 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
src/components/Launch/LaunchWorkflowForm/CollectionInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { TextField } from '@material-ui/core'; | ||
| import * as React from 'react'; | ||
| import { InputChangeHandler, InputProps, InputType } from './types'; | ||
| import { UnsupportedInput } from './UnsupportedInput'; | ||
|
|
||
| function stringChangeHandler(onChange: InputChangeHandler) { | ||
| return ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => { | ||
| onChange(value); | ||
| }; | ||
| } | ||
|
|
||
| /** Handles rendering of the input component for a Collection of SimpleType values*/ | ||
| export const CollectionInput: React.FC<InputProps> = props => { | ||
| const { | ||
| label, | ||
| helperText, | ||
| onChange, | ||
| typeDefinition: { subtype }, | ||
| value = '' | ||
| } = props; | ||
| if (!subtype) { | ||
| console.error( | ||
| 'Unexpected missing subtype for collection input', | ||
| props.typeDefinition | ||
| ); | ||
| return <UnsupportedInput {...props} />; | ||
| } | ||
| switch (subtype.type) { | ||
| case InputType.Blob: | ||
| case InputType.Boolean: | ||
| case InputType.Collection: | ||
| case InputType.Datetime: | ||
| case InputType.Duration: | ||
| case InputType.Error: | ||
| case InputType.Float: | ||
| case InputType.Integer: | ||
| case InputType.Map: | ||
| case InputType.String: | ||
| case InputType.Struct: | ||
| return ( | ||
| <TextField | ||
| helperText={helperText} | ||
| fullWidth={true} | ||
| label={label} | ||
| multiline={true} | ||
| onChange={stringChangeHandler(onChange)} | ||
| rowsMax={8} | ||
| value={value} | ||
| variant="outlined" | ||
| /> | ||
| ); | ||
| default: | ||
| return <UnsupportedInput {...props} />; | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 68 additions & 35 deletions
103
src/components/Launch/LaunchWorkflowForm/__stories__/LaunchWorkflowForm.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,88 @@ | ||
| import { action } from '@storybook/addon-actions'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { resolveAfter } from 'common/promiseUtils'; | ||
| import { mockAPIContextValue } from 'components/data/__mocks__/apiContext'; | ||
| import { APIContext } from 'components/data/apiContext'; | ||
| import { Workflow } from 'models'; | ||
| import { Admin } from 'flyteidl'; | ||
| import { mapValues } from 'lodash'; | ||
| import { Variable, Workflow } from 'models'; | ||
| import { createMockLaunchPlan } from 'models/__mocks__/launchPlanData'; | ||
| import { | ||
| createMockWorkflow, | ||
| createMockWorkflowClosure, | ||
| createMockWorkflowVersions | ||
| } from 'models/__mocks__/workflowData'; | ||
| import { mockExecution } from 'models/Execution/__mocks__/mockWorkflowExecutionsData'; | ||
| import * as React from 'react'; | ||
| import { LaunchWorkflowForm } from '../LaunchWorkflowForm'; | ||
| import { mockParameterMap, mockWorkflowInputsInterface } from './mockInputs'; | ||
| import { | ||
| createMockWorkflowInputsInterface, | ||
| mockCollectionVariables, | ||
| mockNestedCollectionVariables, | ||
| mockSimpleVariables | ||
| } from './mockInputs'; | ||
|
|
||
| const mockWorkflow = createMockWorkflow('MyWorkflow'); | ||
| const mockLaunchPlan = createMockLaunchPlan( | ||
| mockWorkflow.id.name, | ||
| mockWorkflow.id.version | ||
| ); | ||
| const submitAction = action('createWorkflowExecution'); | ||
|
|
||
| const mockWorkflowVersions = createMockWorkflowVersions( | ||
| mockWorkflow.id.name, | ||
| 10 | ||
| ); | ||
| const renderForm = (variables: Record<string, Variable>) => { | ||
| const mockWorkflow = createMockWorkflow('MyWorkflow'); | ||
| const mockLaunchPlan = createMockLaunchPlan( | ||
| mockWorkflow.id.name, | ||
| mockWorkflow.id.version | ||
| ); | ||
|
|
||
| const mockWorkflowVersions = createMockWorkflowVersions( | ||
| mockWorkflow.id.name, | ||
| 10 | ||
| ); | ||
|
|
||
| mockLaunchPlan.closure!.expectedInputs = mockParameterMap; | ||
| const parameterMap = { | ||
| parameters: mapValues(variables, v => ({ var: v })) | ||
| }; | ||
|
|
||
| const mockApi = mockAPIContextValue({ | ||
| getLaunchPlan: () => resolveAfter(500, mockLaunchPlan), | ||
| getWorkflow: id => { | ||
| const workflow: Workflow = { | ||
| id | ||
| }; | ||
| workflow.closure = createMockWorkflowClosure(); | ||
| workflow.closure!.compiledWorkflow!.primary.template.interface = mockWorkflowInputsInterface; | ||
| mockLaunchPlan.closure!.expectedInputs = parameterMap; | ||
|
|
||
| return resolveAfter(500, workflow); | ||
| }, | ||
| listWorkflows: () => resolveAfter(500, { entities: mockWorkflowVersions }), | ||
| listLaunchPlans: () => resolveAfter(500, { entities: [mockLaunchPlan] }) | ||
| }); | ||
| const mockApi = mockAPIContextValue({ | ||
| createWorkflowExecution: input => { | ||
| console.log(input); | ||
| submitAction('See console for data'); | ||
| return Promise.reject('Not implemented'); | ||
| }, | ||
| getLaunchPlan: () => resolveAfter(500, mockLaunchPlan), | ||
| getWorkflow: id => { | ||
| const workflow: Workflow = { | ||
| id | ||
| }; | ||
| workflow.closure = createMockWorkflowClosure(); | ||
| workflow.closure!.compiledWorkflow!.primary.template.interface = createMockWorkflowInputsInterface( | ||
| variables | ||
| ); | ||
|
|
||
| const onClose = () => console.log('Close'); | ||
| return resolveAfter(500, workflow); | ||
| }, | ||
| listWorkflows: () => | ||
| resolveAfter(500, { entities: mockWorkflowVersions }), | ||
| listLaunchPlans: () => resolveAfter(500, { entities: [mockLaunchPlan] }) | ||
| }); | ||
|
|
||
| const onClose = () => console.log('Close'); | ||
|
|
||
| return ( | ||
| <APIContext.Provider value={mockApi}> | ||
| <div style={{ width: 600, height: '95vh' }}> | ||
| <LaunchWorkflowForm | ||
| onClose={onClose} | ||
| workflowId={mockWorkflow.id} | ||
| /> | ||
| </div> | ||
| </APIContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| const stories = storiesOf('Launch/LaunchWorkflowForm', module); | ||
| stories.addDecorator(story => ( | ||
| <APIContext.Provider value={mockApi}> | ||
| <div style={{ width: 600, height: '95vh' }}>{story()}</div> | ||
| </APIContext.Provider> | ||
| )); | ||
|
|
||
| stories.add('Basic', () => ( | ||
| <LaunchWorkflowForm onClose={onClose} workflowId={mockWorkflow.id} /> | ||
| )); | ||
|
|
||
| stories.add('Simple', () => renderForm(mockSimpleVariables)); | ||
| stories.add('Collections', () => renderForm(mockCollectionVariables)); | ||
| stories.add('Nested Collections', () => | ||
| renderForm(mockNestedCollectionVariables) | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.