From 9c2af84b4c5ea44fe3240bb8e878763c289402aa Mon Sep 17 00:00:00 2001 From: Le Roux Bodenstein Date: Fri, 8 Sep 2023 14:38:02 +0100 Subject: [PATCH] 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 22227fea8ac3ffd960e098c1dae499bd6b53f744. * move data-testid and aria-label out of the shared component --- .../src/components/indexes-table/index.ts | 1 + .../indexes-table/indexes-table.tsx | 162 ++++-------------- .../src/components/indexes/indexes.tsx | 4 +- .../badge-with-icon-link.spec.tsx | 0 .../badge-with-icon-link.tsx | 0 .../index-actions.spec.tsx | 0 .../index-actions.tsx | 0 .../property-field.spec.tsx | 0 .../property-field.tsx | 0 .../regular-indexes-table.spec.tsx} | 8 +- .../regular-indexes-table.tsx | 145 ++++++++++++++++ .../size-field.spec.tsx | 0 .../size-field.tsx | 0 .../type-field.spec.tsx | 0 .../type-field.tsx | 0 .../usage-field.spec.tsx | 0 .../usage-field.tsx | 0 17 files changed, 182 insertions(+), 138 deletions(-) create mode 100644 packages/compass-indexes/src/components/indexes-table/index.ts rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/badge-with-icon-link.spec.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/badge-with-icon-link.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/index-actions.spec.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/index-actions.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/property-field.spec.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/property-field.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table/indexes-table.spec.tsx => regular-indexes-table/regular-indexes-table.spec.tsx} (95%) create mode 100644 packages/compass-indexes/src/components/regular-indexes-table/regular-indexes-table.tsx rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/size-field.spec.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/size-field.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/type-field.spec.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/type-field.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/usage-field.spec.tsx (100%) rename packages/compass-indexes/src/components/{indexes-table => regular-indexes-table}/usage-field.tsx (100%) diff --git a/packages/compass-indexes/src/components/indexes-table/index.ts b/packages/compass-indexes/src/components/indexes-table/index.ts new file mode 100644 index 00000000000..93719efa019 --- /dev/null +++ b/packages/compass-indexes/src/components/indexes-table/index.ts @@ -0,0 +1 @@ +export * from './indexes-table'; diff --git a/packages/compass-indexes/src/components/indexes-table/indexes-table.tsx b/packages/compass-indexes/src/components/indexes-table/indexes-table.tsx index 4bdb6489f21..8688fc308d9 100644 --- a/packages/compass-indexes/src/components/indexes-table/indexes-table.tsx +++ b/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,7 +30,7 @@ const indexActionsCellStyles = css({ minWidth: spacing[5], }); -const tableHeaderStyles = css({ +export const tableHeaderStyles = css({ borderWidth: 0, borderBottomWidth: 3, '> div': { @@ -54,11 +38,11 @@ const tableHeaderStyles = css({ }, }); -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 = { + ['data-testid']: string; + ['aria-label']: string; + columns: JSX.Element[]; + children: (args: { datum: Shape; index: number }) => JSX.Element; + data: Shape[]; }; -export const IndexesTable: React.FunctionComponent = ({ - indexes, - canModifyIndex, - serverVersion, - onSortTable, - onDeleteIndex, - onHideIndex, - onUnhideIndex, -}) => { +export function IndexesTable({ + ['data-testid']: dataTestId, + ['aria-label']: ariaLabel, + columns, + children, + data, +}: IndexesTableProps) { const cardRef = useRef(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 ( - { - onSortTable(name, direction); - }} - /> - ); - }); - // Actions column - if (canModifyIndex) { - _columns.push(); - } - return _columns; - }, [canModifyIndex, onSortTable]); useEffect(() => { /** @@ -167,76 +120,21 @@ export const IndexesTable: React.FunctionComponent = ({ return (
- - + 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 }) => ( - - - {index.name} - - - - - - - - - - - - - - {/* Index actions column is conditional */} - {canModifyIndex && ( - - {index.name !== '_id_' && - index.extra.status !== 'inprogress' && ( -
- -
- )} - - )} - - - - - - - )} + {children}
); -}; +} diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx index 7af722c193d..4989f91a912 100644 --- a/packages/compass-indexes/src/components/indexes/indexes.tsx +++ b/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 = ({ {!isReadonlyView && !error && currentIndexesView === 'regular-indexes' && ( - > = {} + props: Partial> = {} ) => { render( - void; + onHideIndex: (name: string) => void; + onUnhideIndex: (name: string) => void; + onSortTable: (column: SortColumn, direction: SortDirection) => void; +}; + +export const RegularIndexesTable: React.FunctionComponent< + RegularIndexesTableProps +> = ({ + indexes, + canModifyIndex, + serverVersion, + onDeleteIndex, + onHideIndex, + onUnhideIndex, + onSortTable, +}) => { + const columns = useMemo(() => { + const sortColumns: SortColumn[] = [ + 'Name and Definition', + 'Type', + 'Size', + 'Usage', + 'Properties', + ]; + const _columns = sortColumns.map((name) => { + return ( + { + onSortTable(name, direction); + }} + /> + ); + }); + // Actions column + if (canModifyIndex) { + _columns.push(); + } + return _columns; + }, [canModifyIndex, onSortTable]); + + return ( + + data-testid="indexes" + aria-label="Indexes" + columns={columns} + data={indexes} + > + {({ datum: index }) => { + return ( + + + {index.name} + + + + + + + + + + + + + + {/* Index actions column is conditional */} + {canModifyIndex && ( + + {index.name !== '_id_' && index.extra.status !== 'inprogress' && ( +
+ +
+ )} + + )} + + + + + + + ); + }} + + ); +}; diff --git a/packages/compass-indexes/src/components/indexes-table/size-field.spec.tsx b/packages/compass-indexes/src/components/regular-indexes-table/size-field.spec.tsx similarity index 100% rename from packages/compass-indexes/src/components/indexes-table/size-field.spec.tsx rename to packages/compass-indexes/src/components/regular-indexes-table/size-field.spec.tsx diff --git a/packages/compass-indexes/src/components/indexes-table/size-field.tsx b/packages/compass-indexes/src/components/regular-indexes-table/size-field.tsx similarity index 100% rename from packages/compass-indexes/src/components/indexes-table/size-field.tsx rename to packages/compass-indexes/src/components/regular-indexes-table/size-field.tsx diff --git a/packages/compass-indexes/src/components/indexes-table/type-field.spec.tsx b/packages/compass-indexes/src/components/regular-indexes-table/type-field.spec.tsx similarity index 100% rename from packages/compass-indexes/src/components/indexes-table/type-field.spec.tsx rename to packages/compass-indexes/src/components/regular-indexes-table/type-field.spec.tsx diff --git a/packages/compass-indexes/src/components/indexes-table/type-field.tsx b/packages/compass-indexes/src/components/regular-indexes-table/type-field.tsx similarity index 100% rename from packages/compass-indexes/src/components/indexes-table/type-field.tsx rename to packages/compass-indexes/src/components/regular-indexes-table/type-field.tsx diff --git a/packages/compass-indexes/src/components/indexes-table/usage-field.spec.tsx b/packages/compass-indexes/src/components/regular-indexes-table/usage-field.spec.tsx similarity index 100% rename from packages/compass-indexes/src/components/indexes-table/usage-field.spec.tsx rename to packages/compass-indexes/src/components/regular-indexes-table/usage-field.spec.tsx diff --git a/packages/compass-indexes/src/components/indexes-table/usage-field.tsx b/packages/compass-indexes/src/components/regular-indexes-table/usage-field.tsx similarity index 100% rename from packages/compass-indexes/src/components/indexes-table/usage-field.tsx rename to packages/compass-indexes/src/components/regular-indexes-table/usage-field.tsx