From 4af2e048f6efad08608670cb3ba4da144ec14301 Mon Sep 17 00:00:00 2001
From: Stephen Smith <stephen@curii.com>
Date: Fri, 12 Jan 2024 15:18:04 -0500
Subject: [PATCH] 21366: Tweaks the condition for displaying io panel
 subprocess spinner

It no longer shows when there are input mounts or output collection to show.
Also fixes possibility of spinner and no results showing simultaneously.

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>
---
 .../views/process-panel/process-io-card.tsx   | 23 +++++++++++--------
 .../registered-workflow-panel.tsx             |  4 ++--
 2 files changed, 15 insertions(+), 12 deletions(-)

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 b5afbf6545..393bde9667 100644
--- a/services/workbench2/src/views/process-panel/process-io-card.tsx
+++ b/services/workbench2/src/views/process-panel/process-io-card.tsx
@@ -219,7 +219,7 @@ export interface ProcessIOCardDataProps {
     raw: any;
     mounts?: InputCollectionMount[];
     outputUuid?: string;
-    showParams?: boolean;
+    forceShowParams?: boolean;
 }
 
 export interface ProcessIOCardActionProps {
@@ -251,7 +251,7 @@ export const ProcessIOCard = withStyles(styles)(
             panelName,
             process,
             navigateTo,
-            showParams,
+            forceShowParams,
         }: ProcessIOCardProps) => {
             const [mainProcTabState, setMainProcTabState] = useState(0);
             const [subProcTabState, setSubProcTabState] = useState(0);
@@ -266,14 +266,18 @@ 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);
 
             // 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 +354,7 @@ export const ProcessIOCard = withStyles(styles)(
                         }
                     />
                     <CardContent className={classes.content}>
-                        {mainProcess || showParams ? (
+                        {showParamTable ? (
                             <>
                                 {/* raw is undefined until params are loaded */}
                                 {loading && (
@@ -377,14 +381,14 @@ 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" />}
                                         </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>
                                         )}
@@ -409,7 +413,7 @@ export const ProcessIOCard = withStyles(styles)(
                         ) : (
                             // Subprocess
                             <>
-                                {loading && (
+                                {subProcessLoading ? (
                                     <Grid
                                         container
                                         item
@@ -418,8 +422,7 @@ export const ProcessIOCard = withStyles(styles)(
                                     >
                                         <CircularProgress />
                                     </Grid>
-                                )}
-                                {!loading && (hasInputMounts || hasOutputCollecton || hasRaw) ? (
+                                ) : !subProcessLoading && (hasInputMounts || hasOutputCollecton || hasRaw) ? (
                                     <>
                                         <Tabs
                                             value={subProcTabState}
@@ -429,7 +432,7 @@ export const ProcessIOCard = withStyles(styles)(
                                         >
                                             {hasInputMounts && <Tab label="Collections" />}
                                             {hasOutputCollecton && <Tab label="Collection" />}
-                                            <Tab label="JSON" />
+                                            {hasRaw && <Tab label="JSON" />}
                                         </Tabs>
                                         <div className={classes.tableWrapper}>
                                             {subProcTabState === 0 && hasInputMounts && <ProcessInputMounts mounts={mounts || []} />}
@@ -454,7 +457,7 @@ export const ProcessIOCard = withStyles(styles)(
                                                     />
                                                 </>
                                             )}
-                                            {(subProcTabState === 1 || (!hasInputMounts && !hasOutputCollecton)) && (
+                                            {hasRaw && (subProcTabState === 1 || (!hasInputMounts && !hasOutputCollecton)) && (
                                                 <div className={classes.tableWrapper}>
                                                     <ProcessIORaw data={raw} />
                                                 </div>
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 50192e543d..53c5928023 100644
--- a/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx
+++ b/services/workbench2/src/views/workflow-panel/registered-workflow-panel.tsx
@@ -184,7 +184,7 @@ export const RegisteredWorkflowPanel = withStyles(styles)(connect(
                                 label={ProcessIOCardType.INPUT}
                                 params={inputParams}
                                 raw={{}}
-                                showParams={true}
+                                forceShowParams={true}
                             />
                         </MPVPanelContent>
                         <MPVPanelContent forwardProps xs data-cy="process-outputs">
@@ -192,7 +192,7 @@ export const RegisteredWorkflowPanel = withStyles(styles)(connect(
                                 label={ProcessIOCardType.OUTPUT}
                                 params={outputParams}
                                 raw={{}}
-                                showParams={true}
+                                forceShowParams={true}
                             />
                         </MPVPanelContent>
                         <MPVPanelContent xs>
-- 
2.30.2