- return <TableRow key={param.id}>
- <TableCell component="th" scope="row">
- {param.id}
- </TableCell>
- <TableCell>{param.doc}</TableCell>
- <TableCell>{param.value.map(val => (
- <Typography className={classes.paramValue}>
- {val.imageUrl ? <img className={classes.imagePreview} src={val.imageUrl} alt="Inline Preview" /> : ""}
- <span className={classes.valArray}>
- {val.display}
- </span>
- </Typography>
- ))}</TableCell>
- </TableRow>;
+ const firstVal = param.value.length > 0 ? param.value[0] : undefined;
+ const rest = param.value.slice(1);
+ const mainRowClasses = {
+ [classes.noBorderRow]: (rest.length > 0),
+ };
+
+ return <React.Fragment key={param.id}>
+ <TableRow className={classNames(mainRowClasses)} data-cy="process-io-param">
+ <TableCell>
+ {param.id}
+ </TableCell>
+ {showLabel && <TableCell >{param.label}</TableCell>}
+ <TableCell>
+ {firstVal && <ProcessValuePreview value={firstVal} showImagePreview={showImagePreview} />}
+ </TableCell>
+ <TableCell className={firstVal?.imageUrl ? classes.rowWithPreview : undefined}>
+ <Typography className={classes.paramValue}>
+ {firstVal?.collection}
+ </Typography>
+ </TableCell>
+ </TableRow>
+ {rest.map((val, i) => {
+ const rowClasses = {
+ [classes.noBorderRow]: (i < rest.length - 1),
+ [classes.secondaryRow]: val.secondary,
+ };
+ return <TableRow className={classNames(rowClasses)} key={i}>
+ <TableCell />
+ {showLabel && <TableCell />}
+ <TableCell>
+ <ProcessValuePreview value={val} showImagePreview={showImagePreview} />
+ </TableCell>
+ <TableCell className={firstVal?.imageUrl ? classes.rowWithPreview : undefined}>
+ <Typography className={classes.paramValue}>
+ {val.collection}
+ </Typography>
+ </TableCell>
+ </TableRow>
+ })}
+ </React.Fragment>;