chore: factor out the inner workings of the indexes table so we can have separate regular and search ones COMPASS-7163 (#4820)

* factor out the inner workings of the indexes table so we can have separate regular and search ones

* fix the generics

* don't export the styles

* Revert "don't export the styles"

This reverts commit 22227fe.

* move data-testid and aria-label out of the shared component

Author: lerouxb

packages/compass-indexes/src/components/indexes-table/index.ts

@@ -0,0 +1 @@
+export * from './indexes-table';

packages/compass-indexes/src/components/indexes-table/indexes-table.tsx

@@ -1,31 +1,15 @@
-import React, { useMemo, useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from 'react';
 import {
   css,
   Table,
-  TableHeader,
-  Row,
-  Cell,
-  cx,
   spacing,
   palette,
-  IndexKeysBadge,
   KeylineCard,
   useDOMRect,
 } from '@mongodb-js/compass-components';
 
-import TypeField from './type-field';
-import SizeField from './size-field';
-import UsageField from './usage-field';
-import PropertyField from './property-field';
-import type {
-  IndexDefinition,
-  SortColumn,
-  SortDirection,
-} from '../../modules/regular-indexes';
-import IndexActions from './index-actions';
-
 // When row is hovered, we show the delete button
-const rowStyles = css({
+export const rowStyles = css({
   ':hover': {
     '.index-actions-cell': {
       button: {
@@ -36,7 +20,7 @@ const rowStyles = css({
 });
 
 // When row is not hovered, we hide the delete button
-const indexActionsCellStyles = css({
+export const indexActionsCellStyles = css({
   button: {
     opacity: 0,
     '&:focus': {
@@ -46,19 +30,19 @@ const indexActionsCellStyles = css({
   minWidth: spacing[5],
 });
 
-const tableHeaderStyles = css({
+export const tableHeaderStyles = css({
   borderWidth: 0,
   borderBottomWidth: 3,
   '> div': {
     justifyContent: 'space-between',
   },
 });
 
-const cellStyles = css({
+export const cellStyles = css({
   verticalAlign: 'middle',
 });
 
-const nestedRowCellStyles = css({
+export const nestedRowCellStyles = css({
   padding: 0,
 });
 
@@ -81,54 +65,23 @@ const spaceProviderStyles = css({
   overflow: 'hidden',
 });
 
-type IndexesTableProps = {
-  indexes: IndexDefinition[];
-  canModifyIndex: boolean;
-  serverVersion: string;
-  onSortTable: (column: SortColumn, direction: SortDirection) => void;
-  onDeleteIndex: (index: IndexDefinition) => void;
-  onHideIndex: (name: string) => void;
-  onUnhideIndex: (name: string) => void;
+export type IndexesTableProps<Shape> = {
+  ['data-testid']: string;
+  ['aria-label']: string;
+  columns: JSX.Element[];
+  children: (args: { datum: Shape; index: number }) => JSX.Element;
+  data: Shape[];
 };
 
-export const IndexesTable: React.FunctionComponent<IndexesTableProps> = ({
-  indexes,
-  canModifyIndex,
-  serverVersion,
-  onSortTable,
-  onDeleteIndex,
-  onHideIndex,
-  onUnhideIndex,
-}) => {
+export function IndexesTable<Shape>({
+  ['data-testid']: dataTestId,
+  ['aria-label']: ariaLabel,
+  columns,
+  children,
+  data,
+}: IndexesTableProps<Shape>) {
   const cardRef = useRef<HTMLDivElement>(null);
   const [rectProps, { height: availableHeightInContainer }] = useDOMRect();
-  const columns = useMemo(() => {
-    const sortColumns: SortColumn[] = [
-      'Name and Definition',
-      'Type',
-      'Size',
-      'Usage',
-      'Properties',
-    ];
-    const _columns = sortColumns.map((name) => {
-      return (
-        <TableHeader
-          data-testid={`index-header-${name}`}
-          label={name}
-          key={name}
-          className={tableHeaderStyles}
-          handleSort={(direction) => {
-            onSortTable(name, direction);
-          }}
-        />
-      );
-    });
-    // Actions column
-    if (canModifyIndex) {
-      _columns.push(<TableHeader label={''} className={tableHeaderStyles} />);
-    }
-    return _columns;
-  }, [canModifyIndex, onSortTable]);
 
   useEffect(() => {
     /**
@@ -167,76 +120,21 @@ export const IndexesTable: React.FunctionComponent<IndexesTableProps> = ({
 
   return (
     <div className={spaceProviderStyles} {...rectProps}>
-      <KeylineCard ref={cardRef} data-testid="indexes" className={cardStyles}>
-        <Table
+      <KeylineCard
+        ref={cardRef}
+        data-testid={dataTestId}
+        className={cardStyles}
+      >
+        <Table<Shape>
           className={tableStyles}
-          data={indexes}
+          data={data}
           columns={columns}
-          data-testid="indexes-list"
-          aria-label="Indexes List Table"
+          data-testid={`${dataTestId}-list`}
+          aria-label={`${ariaLabel} List Table`}
         >
-          {({ datum: index }) => (
-            <Row
-              key={index.name}
-              data-testid={`index-row-${index.name}`}
-              className={rowStyles}
-            >
-              <Cell data-testid="index-name-field" className={cellStyles}>
-                {index.name}
-              </Cell>
-              <Cell data-testid="index-type-field" className={cellStyles}>
-                <TypeField type={index.type} extra={index.extra} />
-              </Cell>
-              <Cell data-testid="index-size-field" className={cellStyles}>
-                <SizeField
-                  size={index.size}
-                  relativeSize={index.relativeSize}
-                />
-              </Cell>
-              <Cell data-testid="index-usage-field" className={cellStyles}>
-                <UsageField usage={index.usageCount} since={index.usageSince} />
-              </Cell>
-              <Cell data-testid="index-property-field" className={cellStyles}>
-                <PropertyField
-                  cardinality={index.cardinality}
-                  extra={index.extra}
-                  properties={index.properties}
-                />
-              </Cell>
-              {/* Index actions column is conditional */}
-              {canModifyIndex && (
-                <Cell data-testid="index-actions-field" className={cellStyles}>
-                  {index.name !== '_id_' &&
-                    index.extra.status !== 'inprogress' && (
-                      <div
-                        className={cx(
-                          indexActionsCellStyles,
-                          'index-actions-cell'
-                        )}
-                      >
-                        <IndexActions
-                          index={index}
-                          serverVersion={serverVersion}
-                          onDeleteIndex={onDeleteIndex}
-                          onHideIndex={onHideIndex}
-                          onUnhideIndex={onUnhideIndex}
-                        ></IndexActions>
-                      </div>
-                    )}
-                </Cell>
-              )}
-              <Row>
-                <Cell
-                  className={cx(nestedRowCellStyles, cellStyles)}
-                  colSpan={canModifyIndex ? 6 : 5}
-                >
-                  <IndexKeysBadge keys={index.fields} />
-                </Cell>
-              </Row>
-            </Row>
-          )}
+          {children}
         </Table>
       </KeylineCard>
     </div>
   );
-};
+}

packages/compass-indexes/src/components/indexes/indexes.tsx

@@ -19,7 +19,7 @@ import type {
 
 import type { IndexView } from '../indexes-toolbar/indexes-toolbar';
 import { IndexesToolbar } from '../indexes-toolbar/indexes-toolbar';
-import { IndexesTable } from '../indexes-table/indexes-table';
+import { RegularIndexesTable } from '../regular-indexes-table/regular-indexes-table';
 import type { RootState } from '../../modules';
 import { SearchIndexesStatuses } from '../../modules/search-indexes';
 
@@ -99,7 +99,7 @@ export const Indexes: React.FunctionComponent<IndexesProps> = ({
       {!isReadonlyView &&
         !error &&
         currentIndexesView === 'regular-indexes' && (
-          <IndexesTable
+          <RegularIndexesTable
             indexes={indexes}
             serverVersion={serverVersion}
             canModifyIndex={isWritable && !readOnly}

…exes-table/badge-with-icon-link.spec.tsx …exes-table/badge-with-icon-link.spec.tsxpackages/compass-indexes/src/components/indexes-table/badge-with-icon-link.spec.tsx renamed to packages/compass-indexes/src/components/regular-indexes-table/badge-with-icon-link.spec.tsx packages/compass-indexes/src/components/indexes-table/badge-with-icon-link.spec.tsx renamed to packages/compass-indexes/src/components/regular-indexes-table/badge-with-icon-link.spec.tsx

@@ -4,7 +4,7 @@ import { expect } from 'chai';
 import userEvent from '@testing-library/user-event';
 import { spy } from 'sinon';
 
-import { IndexesTable } from './indexes-table';
+import { RegularIndexesTable } from './regular-indexes-table';
 import type { IndexDefinition } from '../../modules/regular-indexes';
 
 const indexes = [
@@ -95,10 +95,10 @@ const indexes = [
 ] as IndexDefinition[];
 
 const renderIndexList = (
-  props: Partial<React.ComponentProps<typeof IndexesTable>> = {}
+  props: Partial<React.ComponentProps<typeof RegularIndexesTable>> = {}
 ) => {
   render(
-    <IndexesTable
+    <RegularIndexesTable
       indexes={[]}
       serverVersion="4.4.0"
       canModifyIndex={true}
@@ -111,7 +111,7 @@ const renderIndexList = (
   );
 };
 
-describe('IndexesTable Component', function () {
+describe('RegularIndexesTable Component', function () {
   before(cleanup);
   afterEach(cleanup);