19069: Scroll instead of overflow in run a process

Rename "Run a process" button to "Run a workflow"

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>

diff --git a/src/views-components/side-panel-button/side-panel-button.tsx b/src/views-components/side-panel-button/side-panel-button.tsx
index a219e55a26d768b47d0e8b97e28ed9abb87b7868..c813efb0a373f4080fe177b1234ce0222f5f5a1d 100644 (file)
--- a/src/views-components/side-panel-button/side-panel-button.tsx
+++ b/src/views-components/side-panel-button/side-panel-button.tsx
@@ -107,7 +107,7 @@ export const SidePanelButton = withStyles(styles)(
                         <CollectionIcon className={classes.icon} /> New collection
                     </MenuItem>
                     <MenuItem data-cy='side-panel-run-process' className={classes.menuItem} onClick={this.handleRunProcessClick}>
-                        <ProcessIcon className={classes.icon} /> Run a process
+                        <ProcessIcon className={classes.icon} /> Run a workflow
                     </MenuItem>
                     <MenuItem data-cy='side-panel-new-project' className={classes.menuItem} onClick={this.handleNewProjectClick}>
                         <ProjectIcon className={classes.icon} /> New project

diff --git a/src/views/run-process-panel/run-process-panel-root.tsx b/src/views/run-process-panel/run-process-panel-root.tsx
index 3c42437a674344e257b504caa6288b91166a0224..9dd5aa3fd0d98cd79b08a95315a9761b6c9c42e9 100644 (file)
--- a/src/views/run-process-panel/run-process-panel-root.tsx
+++ b/src/views/run-process-panel/run-process-panel-root.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { Stepper, Step, StepLabel, StepContent } from '@material-ui/core';
+import { Stepper, Step, StepLabel, StepContent, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
 import { RunProcessFirstStepDataProps, RunProcessFirstStepActionProps, RunProcessFirstStep } from 'views/run-process-panel/run-process-first-step';
 import { RunProcessSecondStepForm } from './run-process-second-step';
 
@@ -17,25 +17,34 @@ export type RunProcessPanelRootActionProps = RunProcessFirstStepActionProps & {
 
 type RunProcessPanelRootProps = RunProcessPanelRootDataProps & RunProcessPanelRootActionProps;
 
-export const RunProcessPanelRoot = ({ runProcess, currentStep, onSearch, onSetStep, onSetWorkflow, workflows, selectedWorkflow }: RunProcessPanelRootProps) =>
-    <Stepper activeStep={currentStep} orientation="vertical" elevation={2}>
-        <Step>
-            <StepLabel>Choose a workflow</StepLabel>
-            <StepContent>
-                <RunProcessFirstStep
-                    workflows={workflows}
-                    selectedWorkflow={selectedWorkflow}
-                    onSearch={onSearch}
-                    onSetStep={onSetStep} 
-                    onSetWorkflow={onSetWorkflow} />
-            </StepContent>
-        </Step>
-        <Step>
-            <StepLabel>Select inputs</StepLabel>
-            <StepContent>
-                <RunProcessSecondStepForm
-                    goBack={() => onSetStep(0)}
-                    runProcess={runProcess} />
-            </StepContent>
-        </Step>
-    </Stepper>;
\ No newline at end of file
+type CssRules = 'stepper';
+
+const styles: StyleRulesCallback<CssRules> = theme => ({
+    stepper: {
+        overflow: "scroll",
+    }
+});
+
+export const RunProcessPanelRoot = withStyles(styles)(
+    ({ runProcess, currentStep, onSearch, onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: WithStyles<CssRules> & RunProcessPanelRootProps) =>
+        <Stepper activeStep={currentStep} orientation="vertical" elevation={2} className={classes.stepper}>
+            <Step>
+                <StepLabel>Choose a workflow</StepLabel>
+                <StepContent>
+                    <RunProcessFirstStep
+                        workflows={workflows}
+                        selectedWorkflow={selectedWorkflow}
+                        onSearch={onSearch}
+                        onSetStep={onSetStep}
+                        onSetWorkflow={onSetWorkflow} />
+                </StepContent>
+            </Step>
+            <Step>
+                <StepLabel>Select inputs</StepLabel>
+                <StepContent>
+                    <RunProcessSecondStepForm
+                        goBack={() => onSetStep(0)}
+                        runProcess={runProcess} />
+                </StepContent>
+            </Step>
+        </Stepper>);