Merge branch 'main' into 19302-left-side-panel-changes

[arvados-workbench2.git] / src / views / workflow-panel / registered-workflow-panel.tsx

diff --git a/src/views/workflow-panel/registered-workflow-panel.tsx b/src/views/workflow-panel/registered-workflow-panel.tsx
index 4b658452175ad96b8a323d3fca34686feaa5a78b..50192e543dbe7f3cf7a3368a9743cd5a278b394d 100644 (file)
--- a/src/views/workflow-panel/registered-workflow-panel.tsx
+++ b/src/views/workflow-panel/registered-workflow-panel.tsx
@@ -7,19 +7,18 @@ import {
     StyleRulesCallback,
     WithStyles,
     withStyles,
-    Grid,
     Tooltip,
     Typography,
     Card,
     CardHeader,
-    IconButton,
+    CardContent,
+    IconButton
 } from '@material-ui/core';
-import { Dispatch } from "redux";
 import { connect, DispatchProp } from "react-redux";
 import { RouteComponentProps } from 'react-router';
 import { ArvadosTheme } from 'common/custom-theme';
 import { RootState } from 'store/store';
-import { WorkflowIcon, MoreOptionsIcon } from 'components/icon/icon';
+import { WorkflowIcon, MoreVerticalIcon } from 'components/icon/icon';
 import { WorkflowResource } from 'models/workflow';
 import { ProcessOutputCollectionFiles } from 'views/process-panel/process-output-collection-files';
 import { WorkflowDetailsAttributes, RegisteredWorkflowPanelDataProps, getRegisteredWorkflowPanelData } from 'views-components/details-panel/workflow-details';
@@ -27,6 +26,7 @@ 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';
 
 type CssRules = 'root'
     | 'button'
@@ -44,7 +44,8 @@ type CssRules = 'root'
     | 'readOnlyIcon'
     | 'header'
     | 'title'
-    | 'avatar';
+    | 'avatar'
+    | 'content';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -54,9 +55,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         cursor: 'pointer'
     },
     infoCard: {
-        paddingLeft: theme.spacing.unit * 2,
-        paddingRight: theme.spacing.unit * 2,
-        paddingBottom: theme.spacing.unit * 2,
     },
     propertiesCard: {
         padding: 0,
@@ -113,6 +111,13 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         alignSelf: 'flex-start',
         paddingTop: theme.spacing.unit * 0.5
     },
+    content: {
+        padding: theme.spacing.unit * 1.0,
+        paddingTop: theme.spacing.unit * 0.5,
+        '&:last-child': {
+            paddingBottom: theme.spacing.unit * 1,
+        }
+    }
 });
 
 type RegisteredWorkflowPanelProps = RegisteredWorkflowPanelDataProps & DispatchProp & WithStyles<CssRules>
@@ -163,17 +168,15 @@ export const RegisteredWorkflowPanel = withStyles(styles)(connect(
                                             <IconButton
                                                 aria-label="More options"
                                                 onClick={event => this.handleContextMenu(event)}>
-                                                <MoreOptionsIcon />
+                                                <MoreVerticalIcon />
                                             </IconButton>
                                         </Tooltip>}
 
                                 />
 
-                                <Grid container justify="space-between">
-                                    <Grid item xs={12}>
-                                        <WorkflowDetailsAttributes workflow={item} />
-                                    </Grid>
-                                </Grid>
+                                <CardContent className={classes.content}>
+                                    <WorkflowDetailsAttributes workflow={item} />
+                                </CardContent>
                             </Card>
                         </MPVPanelContent>
                         <MPVPanelContent forwardProps xs data-cy="process-inputs">
@@ -198,7 +201,11 @@ export const RegisteredWorkflowPanel = withStyles(styles)(connect(
                             </Card>
                         </MPVPanelContent>
                     </MPVContainer>
-                    : null;
+                    :
+                    <NotFoundView
+                        icon={WorkflowIcon}
+                        messages={["Workflow not found"]}
+                    />
             }
 
             handleContextMenu = (event: React.MouseEvent<any>) => {