refactor: select table into list

paula-stacho · paula-stacho · commit 362e0247c151 · 2025-05-06T17:24:26.000+02:00
diff --git a/packages/compass-components/src/components/select-table.spec.tsx b/packages/compass-components/src/components/select-table.spec.tsx
@@ -7,7 +7,7 @@ import {
 import { expect } from 'chai';
 import React from 'react';
 import sinon from 'sinon';
-import { SelectTable } from './select-table';
+import { SelectList } from './select-table';
 import { cloneDeep } from 'lodash';
 
 type TestItem = {
@@ -17,25 +17,17 @@ type TestItem = {
   col2: string;
 };
 
-describe('SelectTable', function () {
+describe('SelectList', function () {
   let items: TestItem[];
-  let columns: [key: keyof TestItem, label: string | JSX.Element][];
+  let label: [key: keyof TestItem, label: string | JSX.Element];
   let onChange: sinon.SinonStub;
 
   beforeEach(function () {
     items = [
       { id: 'id1', selected: true, col1: '1x1', col2: '1x2' },
       { id: 'id2', selected: true, col1: '2x1', col2: '2x2' },
     ];
-    columns = [
-      ['col1', 'Column1'],
-      [
-        'col2',
-        <span key="" data-testid="column2-span">
-          Column2
-        </span>,
-      ],
-    ];
+    label = ['col1', 'Column1'];
     onChange = sinon.stub();
   });
 
@@ -45,19 +37,13 @@ describe('SelectTable', function () {
 
   describe('render', function () {
     it('allows listing multiple selectable items in a table', function () {
-      render(
-        <SelectTable items={items} columns={columns} onChange={onChange} />
-      );
+      render(<SelectList items={items} label={label} onChange={onChange} />);
 
-      expect(screen.getByTestId('column2-span')).to.be.visible;
-      expect(screen.getByTestId('item-id1-col1')).to.have.text('1x1');
-      expect(screen.getByTestId('item-id1-col2')).to.have.text('1x2');
+      expect(screen.getByLabelText('1x1')).to.be.visible;
     });
 
     it('renders checkboxes as expected when all items are selected', function () {
-      render(
-        <SelectTable items={items} columns={columns} onChange={onChange} />
-      );
+      render(<SelectList items={items} label={label} onChange={onChange} />);
 
       expect(
         screen.getByTestId('select-table-all-checkbox').closest('input')
@@ -80,9 +66,7 @@ describe('SelectTable', function () {
     it('renders checkboxes as expected when no items are selected', function () {
       items[0].selected = false;
       items[1].selected = false;
-      render(
-        <SelectTable items={items} columns={columns} onChange={onChange} />
-      );
+      render(<SelectList items={items} label={label} onChange={onChange} />);
 
       expect(
         screen.getByTestId('select-table-all-checkbox').closest('input')
@@ -104,9 +88,7 @@ describe('SelectTable', function () {
 
     it('renders checkboxes as expected when some items are selected', function () {
       items[0].selected = false;
-      render(
-        <SelectTable items={items} columns={columns} onChange={onChange} />
-      );
+      render(<SelectList items={items} label={label} onChange={onChange} />);
 
       expect(
         screen.getByTestId('select-table-all-checkbox').closest('input')
@@ -131,9 +113,7 @@ describe('SelectTable', function () {
     it('calls onChange when a single item is selected', function () {
       const originalItems = cloneDeep(items);
       items[0].selected = false;
-      render(
-        <SelectTable items={items} columns={columns} onChange={onChange} />
-      );
+      render(<SelectList items={items} label={label} onChange={onChange} />);
 
       fireEvent.click(screen.getByTestId('select-id1'));
       expect(onChange).to.have.been.calledWith(originalItems);
@@ -142,9 +122,7 @@ describe('SelectTable', function () {
     it('calls onChange when a single item is deselected', function () {
       const expectedItems = cloneDeep(items);
       items[0].selected = false;
-      render(
-        <SelectTable items={items} columns={columns} onChange={onChange} />
-      );
+      render(<SelectList items={items} label={label} onChange={onChange} />);
 
       fireEvent.click(screen.getByTestId('select-id1'));
       expect(onChange).to.have.been.calledWith(expectedItems);
@@ -154,9 +132,7 @@ describe('SelectTable', function () {
       const originalItems = cloneDeep(items);
       items[0].selected = false;
       items[1].selected = false;
-      render(
-        <SelectTable items={items} columns={columns} onChange={onChange} />
-      );
+      render(<SelectList items={items} label={label} onChange={onChange} />);
 
       fireEvent.click(screen.getByTestId('select-table-all-checkbox'));
       expect(onChange).to.have.been.calledWith(originalItems);
@@ -166,9 +142,7 @@ describe('SelectTable', function () {
       const expectedItems = cloneDeep(items);
       items[0].selected = false;
       items[1].selected = false;
-      render(
-        <SelectTable items={items} columns={columns} onChange={onChange} />
-      );
+      render(<SelectList items={items} label={label} onChange={onChange} />);
 
       fireEvent.click(screen.getByTestId('select-table-all-checkbox'));
       expect(onChange).to.have.been.calledWith(expectedItems);
diff --git a/packages/compass-components/src/components/select-table.tsx b/packages/compass-components/src/components/select-table.tsx
@@ -1,40 +1,56 @@
 import React, { useCallback } from 'react';
-import {
-  Cell,
-  Checkbox,
-  HeaderCell,
-  HeaderRow,
-  Row,
-  Table,
-  TableBody,
-  TableHead,
-} from './leafygreen';
+import { Checkbox } from './leafygreen';
 import { spacing } from '@leafygreen-ui/tokens';
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
+import { useDarkMode } from '../hooks/use-theme';
 
 const checkboxStyles = css({
   padding: spacing[100],
 });
 
+const containerStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const listHeaderStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  fontWeight: 600,
+  borderBottom: `${spacing[100]}px solid ${palette.gray.light2}`,
+  flexShrink: 0,
+  padding: `${spacing[100]}px 0px`,
+});
+const listBodyStyles = css({
+  overflow: 'auto',
+});
+const listItemStyles = css({
+  padding: `${spacing[100]}px 0px`,
+});
+
 type SelectItem = {
   id: string;
   selected: boolean;
 };
 
-type SelectTableProps<T extends SelectItem> = {
+type SelectListProps<T extends SelectItem> = {
   items: T[];
-  columns: ReadonlyArray<
-    readonly [key: string & keyof T, label: string | JSX.Element]
-  >;
+  label: readonly [key: string & keyof T, label: string | JSX.Element];
   onChange: (newList: T[]) => void;
   disabled?: boolean;
   className?: string;
 };
 
-export function SelectTable<T extends SelectItem>(
-  props: SelectTableProps<T>
+export function SelectList<T extends SelectItem>(
+  props: SelectListProps<T>
 ): React.ReactElement {
-  const { items, columns, disabled, onChange } = props;
+  const { items, label, disabled, onChange } = props;
+
+  const isDarkMode = useDarkMode();
+  const evenRowStyles = isDarkMode
+    ? css({ backgroundColor: palette.gray.dark3 })
+    : css({ backgroundColor: palette.gray.light3 });
 
   const selectAll = items.every((item) => item.selected);
   const selectNone = items.every((item) => !item.selected);
@@ -61,53 +77,40 @@ export function SelectTable<T extends SelectItem>(
   );
 
   return (
-    <div className={props.className}>
-      <Table shouldAlternateRowColor>
-        <TableHead>
-          <HeaderRow>
-            <HeaderCell key="select-table-all-checkbox">
-              <Checkbox
-                className={checkboxStyles}
-                data-testid="select-table-all-checkbox"
-                aria-label="Select all"
-                onChange={handleSelectAllChange}
-                checked={selectAll}
-                indeterminate={!selectAll && !selectNone}
-                disabled={disabled}
-              />
-            </HeaderCell>
-            {columns.map((col) => (
-              <HeaderCell key={`col-${col[0]}`}>{col[1]}</HeaderCell>
-            ))}
-          </HeaderRow>
-        </TableHead>
-        <TableBody>
-          {items.map((item) => (
-            <Row key={item.id}>
-              <Cell>
-                <Checkbox
-                  className={checkboxStyles}
-                  key={`select-${item.id}`}
-                  name={`select-${item.id}`}
-                  data-testid={`select-${item.id}`}
-                  aria-label="Select item in row"
-                  onChange={handleSelectItemChange}
-                  checked={item.selected}
-                  disabled={disabled}
-                />
-              </Cell>
-              {columns.map(([name]) => (
-                <Cell
-                  key={`item-${name}`}
-                  data-testid={`item-${item.id}-${name}`}
-                >
-                  {item[name]}
-                </Cell>
-              ))}
-            </Row>
-          ))}
-        </TableBody>
-      </Table>
+    <div className={cx(props.className, containerStyles)}>
+      <div className={listHeaderStyles}>
+        <Checkbox
+          className={cx(checkboxStyles, css({ paddingRight: 0 }))}
+          data-testid="select-table-all-checkbox"
+          aria-label="Select all"
+          onChange={handleSelectAllChange}
+          checked={selectAll}
+          indeterminate={!selectAll && !selectNone}
+          disabled={disabled}
+        />
+        <div className={css({ lineHeight: '16px' })}>{label[1]}</div>
+      </div>
+      <div className={listBodyStyles}>
+        {items.map((item, index) => (
+          <div
+            className={cx(listItemStyles, index % 2 === 0 && evenRowStyles)}
+            key={`select-table-item-${item.id}`}
+            data-testid={`select-table-item-${item.id}`}
+          >
+            <Checkbox
+              className={checkboxStyles}
+              key={`select-${item.id}`}
+              name={`select-${item.id}`}
+              data-testid={`select-${item.id}`}
+              label={item[label[0]]}
+              aria-label={`Select ${item[label[0]]}`}
+              onChange={handleSelectItemChange}
+              checked={item.selected}
+              disabled={disabled}
+            />
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts
@@ -210,4 +210,4 @@ export {
   type VirtualListProps,
   type ItemRenderer as VirtualListItemRenderer,
 } from './components/virtual-list';
-export { SelectTable } from './components/select-table';
+export { SelectList } from './components/select-table';
diff --git a/packages/compass-connection-import-export/src/components/export-modal.tsx b/packages/compass-connection-import-export/src/components/export-modal.tsx
@@ -6,7 +6,7 @@ import {
   FormFieldContainer,
   FormModal,
   openToast,
-  SelectTable,
+  SelectList,
 } from '@mongodb-js/compass-components';
 import { FileInput } from './file-input';
 import { Passphrase } from './passphrase';
@@ -21,7 +21,7 @@ const tableStyles = css({
   overflow: 'auto',
 });
 
-const selectTableColumns = [['name', 'Connection Name']] as const;
+const SelectListLabel = ['name', 'Connection Name'] as const;
 
 export function ExportConnectionsModal({
   open,
@@ -97,10 +97,10 @@ export function ExportConnectionsModal({
       }
       data-testid="connection-export-modal"
     >
-      <SelectTable
+      <SelectList
         className={tableStyles}
         items={connectionList}
-        columns={selectTableColumns}
+        label={SelectListLabel}
         disabled={inProgress}
         onChange={onChangeConnectionList}
       />
diff --git a/packages/compass-connection-import-export/src/components/import-modal.tsx b/packages/compass-connection-import-export/src/components/import-modal.tsx
@@ -7,7 +7,7 @@ import {
   FormModal,
   spacing,
   openToast,
-  SelectTable,
+  SelectList,
 } from '@mongodb-js/compass-components';
 import { FileInput } from './file-input';
 import { Passphrase } from './passphrase';
@@ -26,7 +26,7 @@ const existingFavoriteBadgeStyles = css({
   marginLeft: spacing[200],
 });
 
-const selectTableColumns = [['displayName', 'Connection Name']] as const;
+const SelectListLabel = ['displayName', 'Connection Name'] as const;
 
 export function ImportConnectionsModal({
   open,
@@ -136,10 +136,10 @@ export function ImportConnectionsModal({
         />
       </FormFieldContainer>
       {connectionList.length > 0 && (
-        <SelectTable
+        <SelectList
           className={tableStyles}
           items={displayConnectionList}
-          columns={selectTableColumns}
+          label={SelectListLabel}
           disabled={inProgress}
           onChange={onChangeConnectionList}
         />
diff --git a/packages/compass-data-modeling/src/components/new-diagram-form.tsx b/packages/compass-data-modeling/src/components/new-diagram-form.tsx
