Merge branch '19793-collection-back' refs #19793

[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 7a2f80949af9d7a2dbdaf8c912a4725806d8e6df..c0dcb7f0886071ff5c97e0dc7934f40feb4be538 100644 (file)
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, memo, useState } from 'react';
 import { Dispatch } from 'redux';
 import {
     StyleRulesCallback,
@@ -255,7 +255,7 @@ export const ProcessIOCard = withStyles(styles)(connect(null, mapDispatchToProps
         const [showImagePreview, setShowImagePreview] = useState(false);
 
         const PanelIcon = label === ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
-        const mainProcess = process && process!.containerRequest.requestingContainerUuid;
+        const mainProcess = !(process && process!.containerRequest.requestingContainerUuid);
 
         const loading = raw === null || raw === undefined || params === null;
         const hasRaw = !!(raw && Object.keys(raw).length > 0);
@@ -384,7 +384,7 @@ interface ProcessIOPreviewDataProps {
 
 type ProcessIOPreviewProps = ProcessIOPreviewDataProps & WithStyles<CssRules>;
 
-const ProcessIOPreview = withStyles(styles)(
+const ProcessIOPreview = memo(withStyles(styles)(
     ({ classes, data, showImagePreview, valueLabel }: ProcessIOPreviewProps) => {
         const showLabel = data.some((param: ProcessIOParameter) => param.label);
         return <Table className={classes.tableRoot} aria-label="Process IO Preview">
@@ -404,7 +404,7 @@ const ProcessIOPreview = withStyles(styles)(
                         [classes.noBorderRow]: (rest.length > 0),
                     };
 
-                    return <>
+                    return <React.Fragment key={param.id}>
                         <TableRow className={classNames(mainRowClasses)} data-cy="process-io-param">
                             <TableCell>
                                 {param.id}
@@ -424,7 +424,7 @@ const ProcessIOPreview = withStyles(styles)(
                                 [classes.noBorderRow]: (i < rest.length - 1),
                                 [classes.secondaryRow]: val.secondary,
                             };
-                            return <TableRow className={classNames(rowClasses)}>
+                            return <TableRow className={classNames(rowClasses)} key={i}>
                                 <TableCell />
                                 {showLabel && <TableCell />}
                                 <TableCell>
@@ -437,11 +437,11 @@ const ProcessIOPreview = withStyles(styles)(
                                 </TableCell>
                             </TableRow>
                         })}
-                    </>;
+                    </React.Fragment>;
                 })}
             </TableBody>
-        </Table>;
-    });
+        </Table >;
+    }));
 
 interface ProcessValuePreviewProps {
     value: ProcessIOValue;
@@ -588,16 +588,16 @@ export const getIOParamDisplayValue = (auth: AuthState, input: CommandInputParam
             const fileArrayMainFiles = ((input as FileArrayCommandInputParameter).value || []);
             const firstMainFilePdh = (fileArrayMainFiles.length > 0 && fileArrayMainFiles[0]) ? getResourcePdhUrl(fileArrayMainFiles[0], pdh) : "";
 
-            // Convert each main file into separate arrays of ProcessIOValue to preserve secondaryFile grouping
-            const fileArrayValues = fileArrayMainFiles.map((mainFile: File, i): ProcessIOValue[] => {
-                const secondaryFiles = ((mainFile as unknown) as FileWithSecondaryFiles)?.secondaryFiles || [];
-                return [
+            // Convert each main and secondaryFiles into array of ProcessIOValue preserving ordering
+            let fileArrayValues: ProcessIOValue[] = [];
+            for(let i = 0; i < fileArrayMainFiles.length; i++) {
+                const secondaryFiles = ((fileArrayMainFiles[i] as unknown) as FileWithSecondaryFiles)?.secondaryFiles || [];
+                fileArrayValues.push(
                     // Pass firstMainFilePdh to secondary files and every main file besides the first to hide pdh if equal
-                    ...(mainFile ? [fileToProcessIOValue(mainFile, false, auth, pdh, i > 0 ? firstMainFilePdh : "")] : []),
+                    ...(fileArrayMainFiles[i] ? [fileToProcessIOValue(fileArrayMainFiles[i], false, auth, pdh, i > 0 ? firstMainFilePdh : "")] : []),
                     ...(secondaryFiles.map(file => fileToProcessIOValue(file, true, auth, pdh, firstMainFilePdh)))
-                ];
-                // Reduce each mainFile/secondaryFile group into single array preserving ordering
-            }).reduce((acc: ProcessIOValue[], mainFile: ProcessIOValue[]) => (acc.concat(mainFile)), []);
+                );
+            }
 
             return fileArrayValues.length ?
                 fileArrayValues :