Improve WorkflowPresetSelect layout

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
index 46bdecdf9236853e77809fa7f869c6f39cc15d23..a69be951e0520e6a93128dd1799233510fbd8121 100644 (file)
--- a/src/views/run-process-panel/workflow-preset-select.tsx
+++ b/src/views/run-process-panel/workflow-preset-select.tsx
@@ -3,7 +3,7 @@
 // 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 { Select, FormControl, InputLabel, MenuItem, Tooltip, withStyles, WithStyles } from '@material-ui/core';
 import { WorkflowResource } from '~/models/workflow';
 import { DetailsIcon } from '~/components/icon/icon';
 
@@ -14,57 +14,55 @@ export interface WorkflowPresetSelectProps {
     onChange: (preset: WorkflowResource) => void;
 }
 
-export class WorkflowPresetSelect extends React.Component<WorkflowPresetSelectProps> {
+type CssRules = 'root' | 'icon';
 
-    render() {
+export const WorkflowPresetSelect = withStyles<CssRules>(theme => ({
+    root: {
+        display: 'flex',
+    },
+    icon: {
+        color: theme.palette.text.hint,
+        marginTop: 18,
+        marginLeft: 8,
+    },
+}))(
+    class extends React.Component<WorkflowPresetSelectProps & WithStyles<CssRules>> {
 
-        const { selectedPreset, workflow, presets } = this.props;
+        render() {
 
-        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>
-        );
-    }
+            const { selectedPreset, workflow, presets, classes } = this.props;
 
-    handleChange = ({ target }: React.ChangeEvent<HTMLSelectElement>) => {
+            return (
+                <div className={classes.root}>
+                    <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>
+                    <Tooltip title='List of already defined set of inputs to run a workflow'>
+                        <DetailsIcon className={classes.icon} />
+                    </Tooltip>
+                </div >
+            );
+        }
 
-        const { workflow, presets, onChange } = this.props;
+        handleChange = ({ target }: React.ChangeEvent<HTMLSelectElement>) => {
 
-        const selectedPreset = [workflow, ...presets]
-            .find(({ uuid }) => uuid === target.value);
+            const { workflow, presets, onChange } = this.props;
 
-        if (selectedPreset) {
-            onChange(selectedPreset);
-        }
-    }
-}
+            const selectedPreset = [workflow, ...presets]
+                .find(({ uuid }) => uuid === target.value);
 
-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>
-);
+            if (selectedPreset) {
+                onChange(selectedPreset);
+            }
+        }
+    });