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