From: Stephen Smith <stephen@curii.com>
Date: Tue, 18 Oct 2022 01:47:49 +0000 (-0400)
Subject: 16073: Shrink secondary row spacing
X-Git-Tag: 2.5.0~31^2~8
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/299c20e6816fef465dd1a29ec4787ba7763a9285

16073: Shrink secondary row spacing

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>
---

diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx
index b2f36f52..40790e58 100644
--- a/src/views/process-panel/process-io-card.tsx
+++ b/src/views/process-panel/process-io-card.tsx
@@ -81,8 +81,9 @@ type CssRules =
   | "imagePreview"
   | "valArray"
   | "secondaryVal"
+  | "secondaryRow"
   | "emptyValue"
-  | "halfRow"
+  | "noBorderRow"
   | "symmetricTabs"
   | "imagePlaceholder"
   | "rowWithPreview"
@@ -166,10 +167,16 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     secondaryVal: {
         paddingLeft: '20px',
     },
+    secondaryRow: {
+        height: '29px',
+        verticalAlign: 'top',
+        position: 'relative',
+        top: '-9px',
+    },
     emptyValue: {
         color: theme.customs.colors.grey500,
     },
-    halfRow: {
+    noBorderRow: {
         '& td': {
             borderBottom: 'none',
         }
@@ -358,10 +365,12 @@ const ProcessIOPreview = withStyles(styles)(
                 {data.map((param: ProcessIOParameter) => {
                     const firstVal = param.value.length > 0 ? param.value[0] : undefined;
                     const rest = param.value.slice(1);
-                    const rowClass = rest.length > 0 ? classes.halfRow : undefined;
+                    const mainRowClasses = {
+                        [classes.noBorderRow]: (rest.length > 0),
+                    };
 
                     return <>
-                        <TableRow className={rowClass} data-cy="process-io-param">
+                        <TableRow className={classNames(mainRowClasses)} data-cy="process-io-param">
                             <TableCell>
                                 {param.id}
                             </TableCell>
@@ -375,8 +384,12 @@ const ProcessIOPreview = withStyles(styles)(
                                 </Typography>
                             </TableCell>
                         </TableRow>
-                        {rest.map((val, i) => (
-                            <TableRow className={(i < rest.length-1) ? rowClass : undefined}>
+                        {rest.map((val, i) => {
+                            const rowClasses = {
+                                [classes.noBorderRow]: (i < rest.length-1),
+                                [classes.secondaryRow]: val.secondary,
+                            };
+                            return <TableRow className={classNames(rowClasses)}>
                                 <TableCell />
                                 {showLabel && <TableCell />}
                                 <TableCell>
@@ -388,7 +401,7 @@ const ProcessIOPreview = withStyles(styles)(
                                     </Typography>
                                 </TableCell>
                             </TableRow>
-                        ))}
+                        })}
                     </>;
                 })}
             </TableBody>