Merge branch 'master' into 14490-workflow-presets
[arvados.git] / src / views / run-process-panel / workflow-preset-select.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import * as React from 'react';
6 import { Select, FormControl, InputLabel, MenuItem, Tooltip, withStyles, WithStyles } from '@material-ui/core';
7 import { WorkflowResource } from '~/models/workflow';
8 import { DetailsIcon } from '~/components/icon/icon';
9
10 export interface WorkflowPresetSelectProps {
11     workflow: WorkflowResource;
12     selectedPreset: WorkflowResource;
13     presets: WorkflowResource[];
14     onChange: (preset: WorkflowResource) => void;
15 }
16
17 type CssRules = 'root' | 'icon';
18
19 export const WorkflowPresetSelect = withStyles<CssRules>(theme => ({
20     root: {
21         display: 'flex',
22     },
23     icon: {
24         color: theme.palette.text.hint,
25         marginTop: 18,
26         marginLeft: 8,
27     },
28 }))(
29     class extends React.Component<WorkflowPresetSelectProps & WithStyles<CssRules>> {
30
31         render() {
32
33             const { selectedPreset, workflow, presets, classes } = this.props;
34
35             return (
36                 <div className={classes.root}>
37                     <FormControl fullWidth>
38                         <InputLabel>Preset</InputLabel>
39                         <Select
40                             value={selectedPreset.uuid}
41                             onChange={this.handleChange}>
42                             <MenuItem value={workflow.uuid}>
43                                 <em>Default</em>
44                             </MenuItem>
45                             {presets.map(
46                                 ({ uuid, name }) => <MenuItem key={uuid} value={uuid}>{name}</MenuItem>
47                             )}
48                         </Select>
49                     </FormControl>
50                     <Tooltip title='List of already defined set of inputs to run a workflow'>
51                         <DetailsIcon className={classes.icon} />
52                     </Tooltip>
53                 </div >
54             );
55         }
56
57         handleChange = ({ target }: React.ChangeEvent<HTMLSelectElement>) => {
58
59             const { workflow, presets, onChange } = this.props;
60
61             const selectedPreset = [workflow, ...presets]
62                 .find(({ uuid }) => uuid === target.value);
63
64             if (selectedPreset) {
65                 onChange(selectedPreset);
66             }
67         }
68     });