From 917adbd7539ff70a6dace0341de05d169011e5c4 Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisa.knox@curii.com>
Date: Tue, 27 Aug 2024 11:53:54 -0400
Subject: [PATCH] 21720: fixed selected shading on tablerow

Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>
---
 .../src/components/data-table/data-table.tsx  | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/services/workbench2/src/components/data-table/data-table.tsx b/services/workbench2/src/components/data-table/data-table.tsx
index 39f9994282..f9eb4f1421 100644
--- a/services/workbench2/src/components/data-table/data-table.tsx
+++ b/services/workbench2/src/components/data-table/data-table.tsx
@@ -75,6 +75,7 @@ type CssRules =
     | "tableCell"
     | "firstTableHead"
     | "tableHead"
+    | "selected"
     | "arrow"
     | "arrowButton"
     | "tableCellWorkflows";
@@ -138,6 +139,9 @@ const styles: CustomStyleRulesCallback<CssRules> = (theme: Theme) => ({
         fontSize: "0.8125rem",
         backgroundColor: theme.palette.background.paper,
     },
+    selected: {
+        backgroundColor: `${CustomTheme.palette.grey['200']} !important`
+    },
     tableCellWorkflows: {
         "&:nth-last-child(2)": {
             padding: "0px",
@@ -450,6 +454,12 @@ export const DataTable = withStyles(styles)(
         renderBodyRow = (item: any, index: number) => {
             const { onRowClick, onRowDoubleClick, extractKey, classes, selectedResourceUuid, currentRoute } = this.props;
             const isSelected = item === selectedResourceUuid;
+            const getClassnames = (index: number) => {
+                if(currentRoute === '/workflows') return classes.tableCellWorkflows;
+                if(index === 0) return classnames(classes.checkBoxCell, isSelected ? classes.selected : "");
+                if(index === 1) return classnames(classes.tableCell, classes.firstTableCell, isSelected ? classes.selected : "");
+                return classnames(classes.tableCell, isSelected ? classes.selected : "");
+            };
             return (
                 <TableRow
                     data-cy={'data-table-row'}
@@ -459,19 +469,13 @@ export const DataTable = withStyles(styles)(
                     onContextMenu={this.handleRowContextMenu(item)}
                     onDoubleClick={event => onRowDoubleClick && onRowDoubleClick(event, item)}
                     selected={isSelected}
-                    style={isSelected ? { backgroundColor: CustomTheme.palette.grey['200'] } : {}}
+                    className={isSelected ? classes.selected : ""}
                 >
                     {this.mapVisibleColumns((column, index) => (
                         <TableCell
                             key={column.key || index}
                             data-cy={column.key || index}
-                            className={
-                                currentRoute === "/workflows"
-                                    ? classes.tableCellWorkflows
-                                    : index === 0
-                                    ? classes.checkBoxCell
-                                    : `${classes.tableCell} ${index === 1 ? classes.firstTableCell : ""}`
-                            }>
+                            className={getClassnames(index)}>
                             {column.render(item)}
                         </TableCell>
                     ))}
-- 
2.30.2