Create WorkflowPresetSelect

Feature #14490

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views/run-process-panel/workflow-preset-select.tsx b/src/views/run-process-panel/workflow-preset-select.tsx
new file mode 100644 (file)
index 0000000..46bdecd
--- /dev/null
+++ b/src/views/run-process-panel/workflow-preset-select.tsx
@@ -0,0 +1,70 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Select, FormControl, InputLabel, MenuItem, Tooltip, Grid, withStyles, WithStyles } from '@material-ui/core';
+import { WorkflowResource } from '~/models/workflow';
+import { DetailsIcon } from '~/components/icon/icon';
+
+export interface WorkflowPresetSelectProps {
+    workflow: WorkflowResource;
+    selectedPreset: WorkflowResource;
+    presets: WorkflowResource[];
+    onChange: (preset: WorkflowResource) => void;
+}
+
+export class WorkflowPresetSelect extends React.Component<WorkflowPresetSelectProps> {
+
+    render() {
+
+        const { selectedPreset, workflow, presets } = this.props;
+
+        return (
+            <Grid container wrap='nowrap' spacing={32}>
+                <Grid item xs container>
+                    <Grid item xs>
+                        <FormControl fullWidth>
+                            <InputLabel htmlFor="age-simple">Preset</InputLabel>
+                            <Select
+                                value={selectedPreset.uuid}
+                                onChange={this.handleChange}>
+                                <MenuItem value={workflow.uuid}>
+                                    <em>Default</em>
+                                </MenuItem>
+                                {presets.map(
+                                    ({ uuid, name }) => <MenuItem key={uuid} value={uuid}>{name}</MenuItem>
+                                )}
+                            </Select>
+                        </FormControl>
+                    </Grid>
+                    <WorkflowPresetSelectInfo />
+                </Grid>
+            </Grid>
+        );
+    }
+
+    handleChange = ({ target }: React.ChangeEvent<HTMLSelectElement>) => {
+
+        const { workflow, presets, onChange } = this.props;
+
+        const selectedPreset = [workflow, ...presets]
+            .find(({ uuid }) => uuid === target.value);
+
+        if (selectedPreset) {
+            onChange(selectedPreset);
+        }
+    }
+}
+
+const WorkflowPresetSelectInfo = withStyles<'icon'>(theme => ({
+    icon: {
+        marginTop: 18,
+        marginLeft: 8,
+    },
+}))(
+    ({ classes }: WithStyles<'icon'>) =>
+        <Tooltip title='List of already defined set of inputs to run a workflow'>
+            <DetailsIcon className={classes.icon} />
+        </Tooltip>
+);