16073: Use import/export as process i/o icons

[arvados-workbench2.git] / src / views / process-panel / process-io-card.tsx

diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index caea890eb1504643804af4ecea90c4e4ba622915..eafefb2e2699dd97994f722596985ee7d43ba6ea 100644 (file)
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -25,7 +25,7 @@ import {
     Chip,
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
-import { CloseIcon, InfoIcon, ProcessIcon } from 'components/icon/icon';
+import { CloseIcon, InfoIcon, ProcessIcon, InputIcon, OutputIcon } from 'components/icon/icon';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import {
   BooleanCommandInputParameter,
@@ -58,6 +58,7 @@ import { Link as MuiLink } from '@material-ui/core';
 import { InputCollectionMount } from 'store/processes/processes-actions';
 import { connect } from 'react-redux';
 import { RootState } from 'store/store';
+import { ProcessOutputCollectionFiles } from './process-output-collection-files';
 
 type CssRules = 'card' | 'content' | 'title' | 'header' | 'avatar' | 'iconHeader' | 'tableWrapper' | 'tableRoot' | 'paramValue' | 'keepLink' | 'imagePreview' | 'valArray' | 'emptyValue';
 
@@ -96,7 +97,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     paramValue: {
         display: 'flex',
-        alignItems: 'center',
+        alignItems: 'flex-start',
+        flexDirection: 'column',
     },
     keepLink: {
         color: theme.palette.primary.main,
@@ -106,7 +108,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     imagePreview: {
         maxHeight: '15em',
-        marginRight: theme.spacing.unit,
+        maxWidth: '15em',
+        marginBottom: theme.spacing.unit,
     },
     valArray: {
         display: 'flex',
@@ -130,16 +133,18 @@ export interface ProcessIOCardDataProps {
     params: ProcessIOParameter[];
     raw?: any;
     mounts?: InputCollectionMount[];
+    outputUuid?: string;
 }
 
 type ProcessIOCardProps = ProcessIOCardDataProps & WithStyles<CssRules> & MPVPanelProps;
 
 export const ProcessIOCard = withStyles(styles)(
-    ({ classes, label, params, raw, mounts, doHidePanel, panelName }: ProcessIOCardProps) => {
+    ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, panelName }: ProcessIOCardProps) => {
         const [tabState, setTabState] = useState(0);
         const handleChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
             setTabState(value);
         }
+        const PanelIcon = label == ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
 
         return <Card className={classes.card} data-cy="process-io-card">
             <CardHeader
@@ -148,7 +153,7 @@ export const ProcessIOCard = withStyles(styles)(
                     content: classes.title,
                     avatar: classes.avatar,
                 }}
-                avatar={<ProcessIcon className={classes.iconHeader} />}
+                avatar={<PanelIcon className={classes.iconHeader} />}
                 title={
                     <Typography noWrap variant='h6' color='inherit'>
                         {label}
@@ -168,6 +173,7 @@ export const ProcessIOCard = withStyles(styles)(
                         <Tab label="Preview" />
                         <Tab label="Raw" />
                         {label === ProcessIOCardType.INPUT && <Tab label="Input Mounts" />}
+                        {label === ProcessIOCardType.OUTPUT && <Tab label="Output Collection" />}
                     </Tabs>
                     {tabState === 0 && <div className={classes.tableWrapper}>
                         {params.length ?
@@ -185,6 +191,7 @@ export const ProcessIOCard = withStyles(styles)(
                         </div>}
                     {tabState === 2 && <div className={classes.tableWrapper}>
                         {label === ProcessIOCardType.INPUT && <ProcessInputMounts mounts={mounts || []} />}
+                        {label === ProcessIOCardType.OUTPUT && <ProcessOutputCollectionFiles isWritable={false} currentItemUuid={outputUuid} />}
                         </div>}
                 </div>
             </CardContent>