21448: removed toolbar width transition Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

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

diff --git a/services/workbench2/src/views/process-panel/process-io-card.tsx b/services/workbench2/src/views/process-panel/process-io-card.tsx
index b5afbf6545ed19f2eb84156f02534c3fa09ab3f8..5716340edc157342f97fd7534da09757d966faf0 100644 (file)
--- a/services/workbench2/src/views/process-panel/process-io-card.tsx
+++ b/services/workbench2/src/views/process-panel/process-io-card.tsx
@@ -89,7 +89,8 @@ type CssRules =
     | "symmetricTabs"
     | "imagePlaceholder"
     | "rowWithPreview"
-    | "labelColumn";
+    | "labelColumn"
+    | "primaryRow";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
@@ -123,7 +124,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     tableWrapper: {
         height: "auto",
-        maxHeight: `calc(100% - ${theme.spacing.unit * 4.5}px)`,
+        maxHeight: `calc(100% - ${theme.spacing.unit * 3}px)`,
         overflow: "auto",
     },
     tableRoot: {
@@ -173,10 +174,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         paddingLeft: "20px",
     },
     secondaryRow: {
-        height: "29px",
+        height: "24px",
         verticalAlign: "top",
         position: "relative",
-        top: "-9px",
+        top: "-4px",
     },
     emptyValue: {
         color: theme.customs.colors.grey700,
@@ -184,7 +185,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     noBorderRow: {
         "& td": {
             borderBottom: "none",
+            paddingTop: "2px",
+            paddingBottom: "2px",
         },
+        height: "24px",
     },
     symmetricTabs: {
         "& button": {
@@ -206,11 +210,18 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     labelColumn: {
         minWidth: "120px",
     },
+    primaryRow: {
+        height: "24px",
+        "& td": {
+            paddingTop: "2px",
+            paddingBottom: "2px",
+        },
+    },
 });
 
 export enum ProcessIOCardType {
-    INPUT = "Inputs",
-    OUTPUT = "Outputs",
+    INPUT = "Input Parameters",
+    OUTPUT = "Output Parameters",
 }
 export interface ProcessIOCardDataProps {
     process?: Process;
@@ -219,7 +230,7 @@ export interface ProcessIOCardDataProps {
     raw: any;
     mounts?: InputCollectionMount[];
     outputUuid?: string;
-    showParams?: boolean;
+    forceShowParams?: boolean;
 }
 
 export interface ProcessIOCardActionProps {
@@ -251,7 +262,7 @@ export const ProcessIOCard = withStyles(styles)(
             panelName,
             process,
             navigateTo,
-            showParams,
+            forceShowParams,
         }: ProcessIOCardProps) => {
             const [mainProcTabState, setMainProcTabState] = useState(0);
             const [subProcTabState, setSubProcTabState] = useState(0);
@@ -266,14 +277,20 @@ export const ProcessIOCard = withStyles(styles)(
 
             const PanelIcon = label === ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
             const mainProcess = !(process && process!.containerRequest.requestingContainerUuid);
+            const showParamTable = mainProcess || forceShowParams;
 
             const loading = raw === null || raw === undefined || params === null;
+
             const hasRaw = !!(raw && Object.keys(raw).length > 0);
             const hasParams = !!(params && params.length > 0);
+            // isRawLoaded allows subprocess panel to display raw even if it's {}
+            const isRawLoaded = !!(raw && Object.keys(raw).length >= 0);
 
             // Subprocess
             const hasInputMounts = !!(label === ProcessIOCardType.INPUT && mounts && mounts.length);
             const hasOutputCollecton = !!(label === ProcessIOCardType.OUTPUT && outputUuid);
+            // Subprocess should not show loading if hasOutputCollection or hasInputMounts
+            const subProcessLoading = loading && !hasOutputCollecton && !hasInputMounts;
 
             return (
                 <Card
@@ -350,7 +367,7 @@ export const ProcessIOCard = withStyles(styles)(
                         }
                     />
                     <CardContent className={classes.content}>
-                        {mainProcess || showParams ? (
+                        {showParamTable ? (
                             <>
                                 {/* raw is undefined until params are loaded */}
                                 {loading && (
@@ -364,9 +381,9 @@ export const ProcessIOCard = withStyles(styles)(
                                     </Grid>
                                 )}
                                 {/* Once loaded, either raw or params may still be empty
-                                 *   Raw when all params are empty
-                                 *   Params when raw is provided by containerRequest properties but workflow mount is absent for preview
-                                 */}
+                                 *   Raw when all params are empty
+                                 *   Params when raw is provided by containerRequest properties but workflow mount is absent for preview
+                                 */}
                                 {!loading && (hasRaw || hasParams) && (
                                     <>
                                         <Tabs
@@ -377,14 +394,15 @@ export const ProcessIOCard = withStyles(styles)(
                                         >
                                             {/* params will be empty on processes without workflow definitions in mounts, so we only show raw */}
                                             {hasParams && <Tab label="Parameters" />}
-                                            {!showParams && <Tab label="JSON" />}
+                                            {!forceShowParams && <Tab label="JSON" />}
+                                            {hasOutputCollecton && <Tab label="Collection" />}
                                         </Tabs>
                                         {mainProcTabState === 0 && params && hasParams && (
                                             <div className={classes.tableWrapper}>
                                                 <ProcessIOPreview
                                                     data={params}
                                                     showImagePreview={showImagePreview}
-                                                    valueLabel={showParams ? "Default value" : "Value"}
+                                                    valueLabel={forceShowParams ? "Default value" : "Value"}
                                                 />
                                             </div>
                                         )}
@@ -393,6 +411,28 @@ export const ProcessIOCard = withStyles(styles)(
                                                 <ProcessIORaw data={raw} />
                                             </div>
                                         )}
+                                        {mainProcTabState === 2 && hasOutputCollecton && (
+                                            <>
+                                                {outputUuid && (
+                                                    <Typography className={classes.collectionLink}>
+                                                        Output Collection:{" "}
+                                                        <MuiLink
+                                                            className={classes.keepLink}
+                                                            onClick={() => {
+                                                                navigateTo(outputUuid || "");
+                                                            }}
+                                                        >
+                                                            {outputUuid}
+                                                        </MuiLink>
+                                                    </Typography>
+                                                )}
+                                                <ProcessOutputCollectionFiles
+                                                    isWritable={false}
+                                                    currentItemUuid={outputUuid}
+                                                />
+                                            </>
+                                        )}
+
                                     </>
                                 )}
                                 {!loading && !hasRaw && !hasParams && (
@@ -409,7 +449,7 @@ export const ProcessIOCard = withStyles(styles)(
                         ) : (
                             // Subprocess
                             <>
-                                {loading && (
+                                {subProcessLoading ? (
                                     <Grid
                                         container
                                         item
@@ -418,8 +458,7 @@ export const ProcessIOCard = withStyles(styles)(
                                     >
                                         <CircularProgress />
                                     </Grid>
-                                )}
-                                {!loading && (hasInputMounts || hasOutputCollecton || hasRaw) ? (
+                                ) : !subProcessLoading && (hasInputMounts || hasOutputCollecton || isRawLoaded) ? (
                                     <>
                                         <Tabs
                                             value={subProcTabState}
@@ -429,7 +468,7 @@ export const ProcessIOCard = withStyles(styles)(
                                         >
                                             {hasInputMounts && <Tab label="Collections" />}
                                             {hasOutputCollecton && <Tab label="Collection" />}
-                                            <Tab label="JSON" />
+                                            {isRawLoaded && <Tab label="JSON" />}
                                         </Tabs>
                                         <div className={classes.tableWrapper}>
                                             {subProcTabState === 0 && hasInputMounts && <ProcessInputMounts mounts={mounts || []} />}
@@ -454,7 +493,7 @@ export const ProcessIOCard = withStyles(styles)(
                                                     />
                                                 </>
                                             )}
-                                            {(subProcTabState === 1 || (!hasInputMounts && !hasOutputCollecton)) && (
+                                            {isRawLoaded && (subProcTabState === 1 || (!hasInputMounts && !hasOutputCollecton)) && (
                                                 <div className={classes.tableWrapper}>
                                                     <ProcessIORaw data={raw} />
                                                 </div>
@@ -523,6 +562,7 @@ const ProcessIOPreview = memo(
                         const rest = param.value.slice(1);
                         const mainRowClasses = {
                             [classes.noBorderRow]: rest.length > 0,
+                            [classes.primaryRow]: true
                         };
 
                         return (
@@ -549,6 +589,7 @@ const ProcessIOPreview = memo(
                                     const rowClasses = {
                                         [classes.noBorderRow]: i < rest.length - 1,
                                         [classes.secondaryRow]: val.secondary,
+                                        [classes.primaryRow]: !val.secondary,
                                     };
                                     return (
                                         <TableRow
@@ -813,7 +854,7 @@ const KeepUrlPath = withStyles(styles)(({ auth, res, pdh, classes }: KeepUrlProp
                 className={classes.keepLink}
                 href={keepUrlPathNav}
                 target="_blank"
-                rel="noopener noreferrer"
+                rel="noopener"
             >
                 {keepUrlPath || "/"}
             </a>
@@ -893,6 +934,7 @@ const fileToProcessIOValue = (file: File, secondary: boolean, auth: AuthState, p
                 <MuiLink
                     href={file.location}
                     target="_blank"
+                    rel="noopener"
                 >
                     {file.location}
                 </MuiLink>