From 6c67f3b2e57d5a2ffe78b276911cbeab19e239dd Mon Sep 17 00:00:00 2001 From: Laurent Nguyen Date: Tue, 11 Jun 2024 16:57:17 +0200 Subject: [PATCH] Make table columns generic (no more id and partition keys) --- .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx | 23 ++++-- .../DocumentsTableComponent.test.tsx | 8 +- .../DocumentsTableComponent.tsx | 68 ++++++----------- .../DocumentsTabV2.test.tsx.snap | 21 ++--- .../DocumentsTableComponent.test.tsx.snap | 76 ++++++++++++------- .../Tabs/DocumentsTabV2/documentsTabPrefs.ts | 2 +- 6 files changed, 109 insertions(+), 89 deletions(-) diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx index 4dd1bb5fb..0eb132812 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx @@ -51,7 +51,7 @@ import { extractPartitionKeyValues } from "../../../Utils/QueryUtils"; import DocumentId from "../../Tree/DocumentId"; import ObjectId from "../../Tree/ObjectId"; import TabsBase from "../TabsBase"; -import { DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent"; +import { ColumnsDefinition, DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent"; export class DocumentsTabV2 extends TabsBase { public partitionKey: DataModels.PartitionKey; @@ -1266,10 +1266,21 @@ export const DocumentsTabComponent: React.FunctionComponent resizeObserver.disconnect(); // clean up }, []); - const columnHeaders = { - idHeader: isPreferredApiMongoDB ? "_id" : "id", - partitionKeyHeaders: (showPartitionKey(_collection, isPreferredApiMongoDB) && partitionKeyPropertyHeaders) || [], - }; + const columnsDefinition: ColumnsDefinition = [ + { + id: "id", + label: isPreferredApiMongoDB ? "_id" : "id", + }, + ]; + + if (showPartitionKey(_collection, isPreferredApiMongoDB)) { + partitionKeyPropertyHeaders.forEach((header) => { + columnsDefinition.push({ + id: header, + label: header, + }); + }); + } const onSelectedRowsChange = (selectedRows: Set) => { confirmDiscardingChange(() => { @@ -1797,7 +1808,7 @@ export const DocumentsTabComponent: React.FunctionComponent { height: 0, width: 0, }, - columnHeaders: { - idHeader: ID_HEADER, - partitionKeyHeaders: [PARTITION_KEY_HEADER], - }, + columnsDefinition: [ + { id: ID_HEADER, label: "ID" }, + { id: PARTITION_KEY_HEADER, label: "Partition Key" }, + ], isSelectionDisabled: false, }); diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx index 58f486c3b..9438e4418 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx @@ -16,7 +16,6 @@ import { TableRow, TableRowId, TableSelectionCell, - createTableColumn, useArrowNavigationGroup, useTableColumnSizing_unstable, useTableFeatures, @@ -32,17 +31,18 @@ export type DocumentsTableComponentItem = { id: string; } & Record; -export type ColumnHeaders = { - idHeader: string; - partitionKeyHeaders: string[]; -}; +export type ColumnsDefinition = { + id: string; + label: string; + defaultWidthPx?: number; +}[]; export interface IDocumentsTableComponentProps { items: DocumentsTableComponentItem[]; onItemClicked: (index: number) => void; onSelectedRowsChange: (selectedItemsIndices: Set) => void; selectedRows: Set; size: { height: number; width: number }; - columnHeaders: ColumnHeaders; + columnsDefinition: ColumnsDefinition; style?: React.CSSProperties; isSelectionDisabled?: boolean; } @@ -57,6 +57,9 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps { data: TableRowData[]; } +const DEFAULT_COLUMN_WIDTH_PX = 200; +const MIN_COLUMN_WIDTH_PX = 50; + export const DocumentsTableComponent: React.FC = ({ items, onItemClicked, @@ -64,21 +67,16 @@ export const DocumentsTableComponent: React.FC = selectedRows, style, size, - columnHeaders, + columnsDefinition, isSelectionDisabled, }: IDocumentsTableComponentProps) => { const [activeItemIndex, setActiveItemIndex] = React.useState(undefined); - const initialSizingOptions: TableColumnSizingOptions = { - id: { - idealWidth: 280, - minWidth: 50, - }, - }; - columnHeaders.partitionKeyHeaders.forEach((pkHeader) => { - initialSizingOptions[pkHeader] = { - idealWidth: 200, - minWidth: 50, + const initialSizingOptions: TableColumnSizingOptions = {}; + columnsDefinition.forEach((column) => { + initialSizingOptions[column.id] = { + idealWidth: column.defaultWidthPx || DEFAULT_COLUMN_WIDTH_PX, // 0 is not a valid width + minWidth: MIN_COLUMN_WIDTH_PX, }; }); @@ -97,33 +95,17 @@ export const DocumentsTableComponent: React.FC = // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes const columns: TableColumnDefinition[] = useMemo( () => - [ - createTableColumn({ - columnId: "id", - compare: (a, b) => a.id.localeCompare(b.id), - renderHeaderCell: () => columnHeaders.idHeader, - renderCell: (item) => ( - - {item.id} - - ), - }), - ].concat( - columnHeaders.partitionKeyHeaders.map((pkHeader) => - createTableColumn({ - columnId: pkHeader, - compare: (a, b) => a[pkHeader].localeCompare(b[pkHeader]), - // Show Refresh button on last column - renderHeaderCell: () => {pkHeader}, - renderCell: (item) => ( - - {item[pkHeader]} - - ), - }), + columnsDefinition.map((column) => ({ + columnId: column.id, + compare: (a, b) => a[column.id].localeCompare(b[column.id]), + renderHeaderCell: () => {column.label}, + renderCell: (item) => ( + + {item[column.id]} + ), - ), - [columnHeaders], + })), + [columnsDefinition], ); const [selectionStartIndex, setSelectionStartIndex] = React.useState(undefined); diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap index 52bc636a8..45c557f50 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap +++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap @@ -485,16 +485,17 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = ` >
@@ -526,11 +527,13 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = ` } > diff --git a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap index 2fbeba2da..93862b199 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap +++ b/src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap @@ -2,13 +2,17 @@ exports[`DocumentsTableComponent should not render selection column when isSelectionDisabled is true 1`] = ` - id + + ID +
- id + + ID + - partitionKey + Partition Key , @@ -323,9 +335,9 @@ exports[`DocumentsTableComponent should not render selection column when isSelec role="presentation" > - partitionKey + Partition Key @@ -994,13 +1006,17 @@ exports[`DocumentsTableComponent should not render selection column when isSelec exports[`DocumentsTableComponent should render documents and partition keys in header 1`] = ` - id + + ID + - id + + ID + - partitionKey + Partition Key , @@ -1355,9 +1379,9 @@ exports[`DocumentsTableComponent should render documents and partition keys in h role="presentation" > - partitionKey + Partition Key diff --git a/src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts b/src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts index 1a3fb9beb..06f45d690 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts +++ b/src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts @@ -8,7 +8,7 @@ export interface DocumentsTabPrefs { } const defaultPrefs: DocumentsTabPrefs = { - leftPaneWidthPercent: 50, + leftPaneWidthPercent: 35, }; export const readDocumentsTabPrefs = (): DocumentsTabPrefs => {