random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make table columns generic (no more id and partition keys)

This commit is contained in:
Laurent Nguyen 2024-06-11 16:57:17 +02:00
parent 1ee79881ef
commit 6c67f3b2e5
6 changed files with 109 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -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<IDocumentsTabCompone
return () => 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<TableRowId>) => {
confirmDiscardingChange(() => {
@ -1797,7 +1808,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
onSelectedRowsChange={onSelectedRowsChange}
selectedRows={selectedRows}
size={tableContainerSizePx}
columnHeaders={columnHeaders}
columnsDefinition={columnsDefinition}
isSelectionDisabled={
configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
}

8
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
View File

@ -20,10 +20,10 @@ describe("DocumentsTableComponent", () => {
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,
});

68
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
View File

@ -16,7 +16,6 @@ import {
TableRow,
TableRowId,
TableSelectionCell,
createTableColumn,
useArrowNavigationGroup,
useTableColumnSizing_unstable,
useTableFeatures,
@ -32,17 +31,18 @@ export type DocumentsTableComponentItem = {
id: string;
} & Record<string, string>;
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<TableRowId>) => void;
selectedRows: Set<TableRowId>;
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<IDocumentsTableComponentProps> = ({
items,
onItemClicked,
@ -64,21 +67,16 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
selectedRows,
style,
size,
columnHeaders,
columnsDefinition,
isSelectionDisabled,
}: IDocumentsTableComponentProps) => {
const [activeItemIndex, setActiveItemIndex] = React.useState<number>(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<IDocumentsTableComponentProps> =
// Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes
const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = useMemo(
() =>
[
createTableColumn<DocumentsTableComponentItem>({
columnId: "id",
compare: (a, b) => a.id.localeCompare(b.id),
renderHeaderCell: () => columnHeaders.idHeader,
renderCell: (item) => (
<TableCellLayout truncate title={item.id}>
{item.id}
</TableCellLayout>
),
}),
].concat(
columnHeaders.partitionKeyHeaders.map((pkHeader) =>
createTableColumn<DocumentsTableComponentItem>({
columnId: pkHeader,
compare: (a, b) => a[pkHeader].localeCompare(b[pkHeader]),
// Show Refresh button on last column
renderHeaderCell: () => <span title={pkHeader}>{pkHeader}</span>,
renderCell: (item) => (
<TableCellLayout truncate title={item[pkHeader]}>
{item[pkHeader]}
</TableCellLayout>
),
}),
columnsDefinition.map((column) => ({
columnId: column.id,
compare: (a, b) => a[column.id].localeCompare(b[column.id]),
renderHeaderCell: () => <span title={column.label}>{column.label}</span>,
renderCell: (item) => (
<TableCellLayout truncate title={item[column.id]}>
{item[column.id]}
</TableCellLayout>
),
),
[columnHeaders],
})),
[columnsDefinition],
);
const [selectionStartIndex, setSelectionStartIndex] = React.useState<number>(undefined);

21
src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
View File

@ -485,16 +485,17 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
>
<Split
mode="horizontal"
onDragEnd={[Function]}
prefixCls="w-split"
visiable={true}
>
<div
style={
Object {
"minWidth": 120,
"minWidth": 60,
"overflow": "hidden",
"position": "relative",
"width": "35%",
"width": "50%",
}
}
>
@ -526,11 +527,13 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
}
>
<DocumentsTableComponent
columnHeaders={
Object {
"idHeader": "id",
"partitionKeyHeaders": Array [],
}
columnsDefinition={
Array [
Object {
"id": "id",
"label": "id",
},
]
}
isSelectionDisabled={true}
items={Array []}
@ -547,8 +550,8 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
<div
style={
Object {
"minWidth": "20%",
"width": "100%",
"minWidth": 60,
"width": "50%",
}
}
/>

76
src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
View File

@ -2,13 +2,17 @@
exports[`DocumentsTableComponent should not render selection column when isSelectionDisabled is true 1`] = `
<DocumentsTableComponent
columnHeaders={
Object {
"idHeader": "id",
"partitionKeyHeaders": Array [
"partitionKey",
],
}
columnsDefinition={
Array [
Object {
"id": "id",
"label": "ID",
},
Object {
"id": "partitionKey",
"label": "Partition Key",
},
]
}
isSelectionDisabled={true}
items={
@ -119,7 +123,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
role="presentation"
>
id
<span
title="ID"
>
ID
</span>
</div>
<span
class="fui-TableHeaderCell__aside"
@ -195,7 +203,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
onKeyUp={[Function]}
role="presentation"
>
id
<span
title="ID"
>
ID
</span>
</div>
<span
className="fui-TableHeaderCell__aside"
@ -267,9 +279,9 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
role="presentation"
>
<span
title="partitionKey"
title="Partition Key"
>
partitionKey
Partition Key
</span>
</div>
</div>,
@ -323,9 +335,9 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
role="presentation"
>
<span
title="partitionKey"
title="Partition Key"
>
partitionKey
Partition Key
</span>
</div>
</div>
@ -994,13 +1006,17 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
exports[`DocumentsTableComponent should render documents and partition keys in header 1`] = `
<DocumentsTableComponent
columnHeaders={
Object {
"idHeader": "id",
"partitionKeyHeaders": Array [
"partitionKey",
],
}
columnsDefinition={
Array [
Object {
"id": "id",
"label": "ID",
},
Object {
"id": "partitionKey",
"label": "Partition Key",
},
]
}
isSelectionDisabled={false}
items={
@ -1151,7 +1167,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
class="fui-TableHeaderCell__button ___hg3sc00_fmp4b50 fq6nmtn f1e4lqlz f1u2r49w f1ym3bx4 f1mo0ibp fjoy568 fytdu2e f1mtd64y f1y7q3j9 f1g0x7ka fhxju0i f1qch9an f1cnd47f f1ern45e f1n71otn f1h8hb77 f1deefiw fgusgyc f10pi13n fly5x3f f22iagw fqerorx f1l02sjl f122n59 f1ufnopg f14sijuj f1nxs5xn f1neuvcm fkjuxzh f1s6fcnf"
role="presentation"
>
id
<span
title="ID"
>
ID
</span>
</div>
<span
class="fui-TableHeaderCell__aside"
@ -1227,7 +1247,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
onKeyUp={[Function]}
role="presentation"
>
id
<span
title="ID"
>
ID
</span>
</div>
<span
className="fui-TableHeaderCell__aside"
@ -1299,9 +1323,9 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
role="presentation"
>
<span
title="partitionKey"
title="Partition Key"
>
partitionKey
Partition Key
</span>
</div>
</div>,
@ -1355,9 +1379,9 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
role="presentation"
>
<span
title="partitionKey"
title="Partition Key"
>
partitionKey
Partition Key
</span>
</div>
</div>

2
src/Explorer/Tabs/DocumentsTabV2/documentsTabPrefs.ts
View File

@ -8,7 +8,7 @@ export interface DocumentsTabPrefs {
}
const defaultPrefs: DocumentsTabPrefs = {
leftPaneWidthPercent: 50,
leftPaneWidthPercent: 35,
};
export const readDocumentsTabPrefs = (): DocumentsTabPrefs => {