X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/2508b089d2369bf57811f9f96c14c2ee22dd664f..77b1491fbfdc80007308cbfd52afb53932133005:/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx

diff --git a/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx b/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx
index 5973efedc8..d85bef8dac 100644
--- a/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx
+++ b/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx
@@ -12,7 +12,7 @@ import {
     Card,
     CardHeader,
     CardContent,
-    IconButton,
+    IconButton
 } from '@material-ui/core';
 import { connect, DispatchProp } from "react-redux";
 import { RouteComponentProps } from 'react-router';
@@ -26,8 +26,10 @@ import { getResource } from 'store/resources/resources';
 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
 import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-panel-view/multi-panel-view';
 import { ProcessIOCard, ProcessIOCardType } from 'views/process-panel/process-io-card';
+import { NotFoundView } from 'views/not-found-panel/not-found-panel';
+import { WorkflowProcessesPanel } from './workflow-processes-panel';
 
-type CssRules = 'root'
+type CssRules =
     | 'button'
     | 'infoCard'
     | 'propertiesCard'
@@ -47,9 +49,6 @@ type CssRules = 'root'
     | 'content';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
-        width: '100%',
-    },
     button: {
         cursor: 'pointer'
     },
@@ -134,12 +133,13 @@ export const RegisteredWorkflowPanel = withStyles(styles)(connect(
                 const { classes, item, inputParams, outputParams, workflowCollection } = this.props;
                 const panelsData: MPVPanelState[] = [
                     { name: "Details" },
-                    { name: "Inputs" },
+                    { name: "Runs" },
                     { name: "Outputs" },
-                    { name: "Files" },
+                    { name: "Inputs" },
+                    { name: "Definition" },
                 ];
                 return item
-                    ? <MPVContainer className={classes.root} spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
+                    ? <MPVContainer spacing={8} direction="column" justify-content="flex-start" wrap="nowrap" panelStates={panelsData}>
                         <MPVPanelContent xs="auto" data-cy='registered-workflow-info-panel'>
                             <Card className={classes.infoCard}>
                                 <CardHeader
@@ -178,29 +178,37 @@ export const RegisteredWorkflowPanel = withStyles(styles)(connect(
                                 </CardContent>
                             </Card>
                         </MPVPanelContent>
-                        <MPVPanelContent forwardProps xs data-cy="process-inputs">
+                        <MPVPanelContent forwardProps xs maxHeight="100%">
+                            <WorkflowProcessesPanel />
+                        </MPVPanelContent>
+                        <MPVPanelContent forwardProps xs data-cy="process-outputs" maxHeight="100%">
                             <ProcessIOCard
-                                label={ProcessIOCardType.INPUT}
-                                params={inputParams}
+                                label={ProcessIOCardType.OUTPUT}
+                                params={outputParams}
                                 raw={{}}
-                                showParams={true}
+                                forceShowParams={true}
                             />
                         </MPVPanelContent>
-                        <MPVPanelContent forwardProps xs data-cy="process-outputs">
+                        <MPVPanelContent forwardProps xs data-cy="process-inputs" maxHeight="100%">
                             <ProcessIOCard
-                                label={ProcessIOCardType.OUTPUT}
-                                params={outputParams}
+                                label={ProcessIOCardType.INPUT}
+                                params={inputParams}
                                 raw={{}}
-                                showParams={true}
+                                forceShowParams={true}
                             />
                         </MPVPanelContent>
-                        <MPVPanelContent xs>
+                        <MPVPanelContent xs maxHeight="100%">
                             <Card className={classes.filesCard}>
+                                <CardHeader title="Workflow Definition" />
                                 <ProcessOutputCollectionFiles isWritable={false} currentItemUuid={workflowCollection} />
                             </Card>
                         </MPVPanelContent>
                     </MPVContainer>
-                    : null;
+                    :
+                    <NotFoundView
+                        icon={WorkflowIcon}
+                        messages={["Workflow not found"]}
+                    />
             }
 
             handleContextMenu = (event: React.MouseEvent<any>) => {