feat: Highlight row of selected cell in data browser (#3270)

Author: mtrezza

src/components/BrowserRow/BrowserRow.react.js

@@ -56,6 +56,7 @@ export default class BrowserRow extends Component {
       onMouseOverRow,
       stickyLefts,
       freezeIndex,
+      isHighlighted,
     } = this.props;
     const attributes = obj.attributes;
     let requiredCols = [];
@@ -74,8 +75,15 @@ export default class BrowserRow extends Component {
     } else if (obj.className === '_User' && obj.get('authData') !== undefined) {
       requiredCols = ['authData'];
     }
-    const rowBackground = row % 2 ? '#F4F5F7' : '#fdfafb';
+    const highlightColor = '#eef4fb';
+    const stickyHighlightColor = '#d6e4f0';
+    const defaultRowBackground = '#ffffff';
+    const rowBackground = isHighlighted ? highlightColor : defaultRowBackground;
+    const stickyBackground = isHighlighted ? stickyHighlightColor : defaultRowBackground;
     const rowStyle = { minWidth: rowWidth };
+    if (isHighlighted) {
+      rowStyle.background = highlightColor;
+    }
     return (
       <div className={styles.tableRow} style={rowStyle} onMouseOver={() => onMouseOverRow(obj.id)}>
         <span
@@ -86,7 +94,7 @@ export default class BrowserRow extends Component {
             position: 'sticky',
             left: 0,
             zIndex: 1,
-            background: rowBackground,
+            background: stickyBackground,
             borderBottom: '1px solid #e3e3ea',
           }}
         >
@@ -104,7 +112,7 @@ export default class BrowserRow extends Component {
               position: 'sticky',
               left: 30,
               zIndex: 1,
-              background: rowBackground,
+              background: stickyBackground,
               borderBottom: '1px solid #e3e3ea',
               width: rowNumberWidth,
             }}

src/dashboard/Data/Browser/Browser.scss

@@ -96,9 +96,6 @@ body:global(.expanded) {
   border-bottom: 1px solid #e3e3ea;
   will-change: transform;
 
-  &:nth-child(odd) {
-    background: #f4f5f7;
-  }
 }
 
 .checkCell {

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -135,6 +135,12 @@ export default class BrowserTable extends React.Component {
       });
     }
     let editor = null;
+    const isRowHighlighted = (rowIndex) =>
+      (this.props.current && this.props.current.row === rowIndex) ||
+      (this.props.selectedCells &&
+        this.props.selectedCells.rowStart >= 0 &&
+        rowIndex >= this.props.selectedCells.rowStart &&
+        rowIndex <= this.props.selectedCells.rowEnd);
     let table = <div ref={this.tableRef} />;
     if (this.props.data) {
       const rowWidth =
@@ -160,6 +166,7 @@ export default class BrowserTable extends React.Component {
                     appId={this.props.appId}
                     key={index}
                     isEditing={isEditingRow}
+                    isHighlighted={isRowHighlighted(index)}
                     className={this.props.className}
                     columns={this.props.columns}
                     schema={this.props.schema}
@@ -255,6 +262,7 @@ export default class BrowserTable extends React.Component {
             <BrowserRow
               appId={this.props.appId}
               key={-1}
+              isHighlighted={isRowHighlighted(-1)}
               className={this.props.className}
               columns={this.props.columns}
               currentCol={currentCol}
@@ -349,6 +357,7 @@ export default class BrowserTable extends React.Component {
             appId={this.props.appId}
             key={index}
             isEditing={isEditingRow}
+            isHighlighted={isRowHighlighted(i)}
             className={this.props.className}
             columns={this.props.columns}
             schema={this.props.schema}

src/lib/tests/BrowserRow.test.js

@@ -0,0 +1,107 @@
+jest.dontMock('../../components/BrowserRow/BrowserRow.react');
+jest.mock('idb-keyval');
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+const BrowserRow = require('../../components/BrowserRow/BrowserRow.react').default;
+
+const defaultProps = {
+  className: 'TestClass',
+  columns: {
+    objectId: { type: 'String' },
+    name: { type: 'String' },
+  },
+  currentCol: undefined,
+  isUnique: false,
+  obj: {
+    id: 'abc123',
+    className: 'TestClass',
+    attributes: { objectId: 'abc123', name: 'Test' },
+    get: function(key) { return this.attributes[key]; },
+  },
+  order: [
+    { name: 'objectId', width: 150, visible: true },
+    { name: 'name', width: 150, visible: true },
+  ],
+  readOnlyFields: ['objectId'],
+  row: 0,
+  rowWidth: 330,
+  showRowNumber: true,
+  rowNumberWidth: 30,
+  skip: 0,
+  selection: {},
+  selectRow: () => {},
+  setCopyableValue: () => {},
+  selectedObjectId: undefined,
+  setSelectedObjectId: () => {},
+  callCloudFunction: () => {},
+  isPanelVisible: false,
+  setCurrent: () => {},
+  setEditing: () => {},
+  setRelation: () => {},
+  onEditSelectedRow: () => {},
+  setContextMenu: () => {},
+  onFilterChange: () => {},
+  markRequiredFieldRow: undefined,
+  onMouseDownRowCheckBox: () => {},
+  onMouseUpRowCheckBox: () => {},
+  onMouseOverRowCheckBox: () => {},
+  onMouseOverRow: () => {},
+  onPointerClick: () => {},
+  onPointerCmdClick: () => {},
+  rowValue: undefined,
+  stickyLefts: [],
+  freezeIndex: -1,
+};
+
+describe('BrowserRow', () => {
+  describe('Row highlight', () => {
+    it('should not apply highlight styles when isHighlighted is false', () => {
+      const component = renderer
+        .create(<BrowserRow {...defaultProps} isHighlighted={false} />)
+        .toJSON();
+      // Row div should not have highlight background
+      expect(component.props.style.background).toBeUndefined();
+    });
+
+    it('should not apply highlight styles when isHighlighted is undefined', () => {
+      const component = renderer
+        .create(<BrowserRow {...defaultProps} />)
+        .toJSON();
+      expect(component.props.style.background).toBeUndefined();
+    });
+
+    it('should apply subtle blue tint to row div when isHighlighted is true', () => {
+      const component = renderer
+        .create(<BrowserRow {...defaultProps} isHighlighted={true} />)
+        .toJSON();
+      expect(component.props.style.background).toBe('#eef4fb');
+    });
+
+    it('should apply stronger blue to checkbox cell when isHighlighted is true', () => {
+      const component = renderer
+        .create(<BrowserRow {...defaultProps} isHighlighted={true} />)
+        .toJSON();
+      // First child is the checkbox span
+      const checkboxCell = component.children[0];
+      expect(checkboxCell.props.style.background).toBe('#d6e4f0');
+    });
+
+    it('should apply stronger blue to row number cell when isHighlighted is true', () => {
+      const component = renderer
+        .create(<BrowserRow {...defaultProps} isHighlighted={true} showRowNumber={true} />)
+        .toJSON();
+      // Second child is the row number span (when showRowNumber is true)
+      const rowNumberCell = component.children[1];
+      expect(rowNumberCell.props.style.background).toBe('#d6e4f0');
+    });
+
+    it('should use default background on checkbox cell when not highlighted', () => {
+      const component = renderer
+        .create(<BrowserRow {...defaultProps} row={1} isHighlighted={false} />)
+        .toJSON();
+      const checkboxCell = component.children[0];
+      expect(checkboxCell.props.style.background).toBe('#ffffff');
+    });
+  });
+});