mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-20 17:30:46 +00:00
Enable column selection and sorting in DocumentsTab (with persistence) (#1881)
* Initial implementation of saving split value to local storage
* Make table columns generic (no more id and partition keys)
* Save column width
* Add column selection from right-click
* Implement new menu for column selection with search.
* Switch icons and search compare with lowercase.
* Search uses string includes instead of startsWith
* Only allow data fields that can be rendered (string and numbers) in column selection
* Accumulate properties rather than replace for column definitions
* Do not allow deselecting all columns
* Move table values under its own property
* Update choices of column when creating new or updating document
* Rework column selection UI
* Fix table size issue with some heuristics
* Fix heuristic for size update
* Don't allow unselecting last column
* Implement column sorting
* Fix format
* Fix format, update snapshots
* Add reset button to column selection and fix naming of openUploadItemsPanePane()
* Fix unit tests
* Fix unit test
* Persist column selection
* Persist column sorting
* Save columns definition (schema) along with selected columns.
* Merge branch 'master' into users/languy/save-documentstab-prefs
* Revert "Merge branch 'master' into users/languy/save-documentstab-prefs"
This reverts commit e5a82fd356.
* Disable column selection for Mongo. Remove extra refresh button
* Update test snapshots
* Remove unused function
* Fix table width
* Add background color to "..." button for column selection
* Label to indicate which field is a partition key in Column Selection Pane
* Update unit test snapshot
* Move column selection and sorting behind feature flag enableDocumentsTableColumnSelection
* Cleanup checkbox styles
This commit is contained in:
Laurent Nguyen
GitHub
@@ -1,5 +1,6 @@
|
||||
// Definitions of State data
|
||||
|
||||
import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
|
||||
import { deleteState, loadState, saveState, saveStateDebounced } from "Shared/AppStatePersistenceUtility";
|
||||
import { userContext } from "UserContext";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
@@ -11,11 +12,16 @@ export enum SubComponentName {
|
||||
ColumnSizes = "ColumnSizes",
|
||||
FilterHistory = "FilterHistory",
|
||||
MainTabDivider = "MainTabDivider",
|
||||
ColumnsSelection = "ColumnsSelection",
|
||||
ColumnSort = "ColumnSort",
|
||||
}
|
||||
|
||||
export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
|
||||
export type FilterHistory = string[];
|
||||
export type WidthDefinition = { widthPx: number };
|
||||
export type TabDivider = { leftPaneWidthPercent: number };
|
||||
export type ColumnsSelection = { selectedColumnIds: string[]; columnDefinitions: ColumnDefinition[] };
|
||||
export type ColumnSort = { columnId: string; direction: "ascending" | "descending" };
|
||||
|
||||
/**
|
||||
*
|
||||
|
||||
@@ -92,7 +92,13 @@ async function waitForComponentToPaint<P = unknown>(wrapper: ReactWrapper<P> | S
|
||||
describe("Documents tab (noSql API)", () => {
|
||||
describe("buildQuery", () => {
|
||||
it("should generate the right select query for SQL API", () => {
|
||||
expect(buildQuery(false, "")).toContain("select");
|
||||
expect(
|
||||
buildQuery(false, "", ["pk"], {
|
||||
paths: ["pk"],
|
||||
kind: "Hash",
|
||||
version: 2,
|
||||
}),
|
||||
).toContain("select");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
|
||||
import { Button, Input, TableRowId, makeStyles, shorthands } from "@fluentui/react-components";
|
||||
import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons";
|
||||
import { Dismiss16Filled } from "@fluentui/react-icons";
|
||||
import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
|
||||
import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
|
||||
import MongoUtility from "Common/MongoUtility";
|
||||
import { StyleConstants } from "Common/StyleConstants";
|
||||
import { createDocument } from "Common/dataAccess/createDocument";
|
||||
import {
|
||||
deleteDocument as deleteNoSqlDocument,
|
||||
@@ -21,11 +20,14 @@ import Explorer from "Explorer/Explorer";
|
||||
import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
|
||||
import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
|
||||
import {
|
||||
ColumnsSelection,
|
||||
FilterHistory,
|
||||
SubComponentName,
|
||||
TabDivider,
|
||||
readSubComponentState,
|
||||
saveSubComponentState,
|
||||
} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
|
||||
import { usePrevious } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
|
||||
import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
|
||||
import { useSelectedNode } from "Explorer/useSelectedNode";
|
||||
import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
|
||||
@@ -51,11 +53,11 @@ import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { CollectionBase } from "../../../Contracts/ViewModels";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import * as QueryUtils from "../../../Utils/QueryUtils";
|
||||
import { extractPartitionKeyValues } from "../../../Utils/QueryUtils";
|
||||
import { defaultQueryFields, extractPartitionKeyValues } from "../../../Utils/QueryUtils";
|
||||
import DocumentId from "../../Tree/DocumentId";
|
||||
import ObjectId from "../../Tree/ObjectId";
|
||||
import TabsBase from "../TabsBase";
|
||||
import { DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
|
||||
import { ColumnDefinition, DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
|
||||
|
||||
const MAX_FILTER_HISTORY_COUNT = 100; // Datalist will become scrollable, so we can afford to keep more items than fit on the screen
|
||||
|
||||
@@ -101,17 +103,6 @@ export const useDocumentsTabStyles = makeStyles({
|
||||
...shorthands.outline("1px", "dotted"),
|
||||
},
|
||||
},
|
||||
floatingControlsContainer: {
|
||||
position: "relative",
|
||||
},
|
||||
floatingControls: {
|
||||
position: "absolute",
|
||||
top: "6px",
|
||||
right: 0,
|
||||
float: "right",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export class DocumentsTabV2 extends TabsBase {
|
||||
@@ -281,7 +272,7 @@ const createUploadButton = (container: Explorer): CommandButtonComponentProps =>
|
||||
iconAlt: label,
|
||||
onCommandClick: () => {
|
||||
const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
|
||||
selectedCollection && container.openUploadItemsPanePane();
|
||||
selectedCollection && container.openUploadItemsPane();
|
||||
},
|
||||
commandButtonLabel: label,
|
||||
ariaLabel: label,
|
||||
@@ -469,17 +460,33 @@ export const showPartitionKey = (collection: ViewModels.CollectionBase, isPrefer
|
||||
};
|
||||
|
||||
// Export to expose to unit tests
|
||||
/**
|
||||
* Build default query
|
||||
* @param isMongo true if mongo api
|
||||
* @param filter
|
||||
* @param partitionKeyProperties optional for mongo
|
||||
* @param partitionKey optional for mongo
|
||||
* @param additionalField
|
||||
* @returns
|
||||
*/
|
||||
export const buildQuery = (
|
||||
isMongo: boolean,
|
||||
filter: string,
|
||||
partitionKeyProperties?: string[],
|
||||
partitionKey?: DataModels.PartitionKey,
|
||||
additionalField?: string[],
|
||||
): string => {
|
||||
if (isMongo) {
|
||||
return filter || "{}";
|
||||
}
|
||||
|
||||
return QueryUtils.buildDocumentsQuery(filter, partitionKeyProperties, partitionKey);
|
||||
// Filter out fields starting with "/" (partition keys)
|
||||
return QueryUtils.buildDocumentsQuery(
|
||||
filter,
|
||||
partitionKeyProperties,
|
||||
partitionKey,
|
||||
additionalField?.filter((f) => !f.startsWith("/")) || [],
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -522,6 +529,12 @@ const getDefaultSqlFilters = (partitionKeys: string[]) =>
|
||||
);
|
||||
const defaultMongoFilters = ['{"id":"foo"}', "{ qty: { $gte: 20 } }"];
|
||||
|
||||
// Extend DocumentId to include fields displayed in the table
|
||||
type ExtendedDocumentId = DocumentId & { tableFields?: DocumentsTableComponentItem };
|
||||
|
||||
// This is based on some heuristics
|
||||
const calculateOffset = (columnNumber: number): number => columnNumber * 16 - 29;
|
||||
|
||||
// Export to expose to unit tests
|
||||
export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
|
||||
isPreferredApiMongoDB,
|
||||
@@ -540,7 +553,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
const [isFilterFocused, setIsFilterFocused] = useState<boolean>(false);
|
||||
const [appliedFilter, setAppliedFilter] = useState<string>("");
|
||||
const [filterContent, setFilterContent] = useState<string>("");
|
||||
const [documentIds, setDocumentIds] = useState<DocumentId[]>([]);
|
||||
const [documentIds, setDocumentIds] = useState<ExtendedDocumentId[]>([]);
|
||||
const [isExecuting, setIsExecuting] = useState<boolean>(false);
|
||||
const filterInput = useRef<HTMLInputElement>(null);
|
||||
const styles = useDocumentsTabStyles();
|
||||
@@ -571,7 +584,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
|
||||
// State
|
||||
const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
|
||||
readSubComponentState(SubComponentName.MainTabDivider, _collection, {
|
||||
readSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
|
||||
leftPaneWidthPercent: 35,
|
||||
}),
|
||||
);
|
||||
@@ -585,8 +598,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
const [continuationToken, setContinuationToken] = useState<string>(undefined);
|
||||
|
||||
// User's filter history
|
||||
const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
|
||||
readSubComponentState(SubComponentName.FilterHistory, _collection, []),
|
||||
const [lastFilterContents, setLastFilterContents] = useState<FilterHistory>(() =>
|
||||
readSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
|
||||
);
|
||||
|
||||
const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
|
||||
@@ -635,10 +648,37 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
[partitionKeyPropertyHeaders],
|
||||
);
|
||||
|
||||
const getInitialColumnSelection = () => {
|
||||
const defaultColumnsIds = ["id"];
|
||||
if (showPartitionKey(_collection, isPreferredApiMongoDB)) {
|
||||
defaultColumnsIds.push(...partitionKeyPropertyHeaders);
|
||||
}
|
||||
|
||||
return defaultColumnsIds;
|
||||
};
|
||||
|
||||
const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(() => {
|
||||
const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
|
||||
SubComponentName.ColumnsSelection,
|
||||
_collection,
|
||||
undefined,
|
||||
);
|
||||
|
||||
if (!persistedColumnsSelection) {
|
||||
return getInitialColumnSelection();
|
||||
}
|
||||
|
||||
return persistedColumnsSelection.selectedColumnIds;
|
||||
});
|
||||
|
||||
// new DocumentId() requires a DocumentTab which we mock with only the required properties
|
||||
const newDocumentId = useCallback(
|
||||
(rawDocument: DataModels.DocumentId, partitionKeyProperties: string[], partitionKeyValue: string[]) =>
|
||||
new DocumentId(
|
||||
(
|
||||
rawDocument: DataModels.DocumentId,
|
||||
partitionKeyProperties: string[],
|
||||
partitionKeyValue: string[],
|
||||
): ExtendedDocumentId => {
|
||||
const extendedDocumentId = new DocumentId(
|
||||
{
|
||||
partitionKey,
|
||||
partitionKeyProperties,
|
||||
@@ -648,7 +688,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
},
|
||||
rawDocument,
|
||||
partitionKeyValue,
|
||||
),
|
||||
) as ExtendedDocumentId;
|
||||
extendedDocumentId.tableFields = { ...rawDocument };
|
||||
return extendedDocumentId;
|
||||
},
|
||||
[partitionKey],
|
||||
);
|
||||
|
||||
@@ -810,6 +853,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
|
||||
setDocumentIds(ids);
|
||||
setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
|
||||
|
||||
// Update column choices
|
||||
setColumnDefinitionsFromDocument(savedDocument);
|
||||
|
||||
TelemetryProcessor.traceSuccess(
|
||||
Action.CreateDocument,
|
||||
{
|
||||
@@ -892,6 +939,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
},
|
||||
startKey,
|
||||
);
|
||||
|
||||
// Update column choices
|
||||
selectedDocumentId.tableFields = { ...documentContent };
|
||||
setColumnDefinitionsFromDocument(documentContent);
|
||||
},
|
||||
(error) => {
|
||||
onExecutionErrorChange(true);
|
||||
@@ -1093,7 +1144,13 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
const _queryAbortController = new AbortController();
|
||||
setQueryAbortController(_queryAbortController);
|
||||
const filter: string = filterContent.trim();
|
||||
const query: string = buildQuery(isPreferredApiMongoDB, filter, partitionKeyProperties, partitionKey);
|
||||
const query: string = buildQuery(
|
||||
isPreferredApiMongoDB,
|
||||
filter,
|
||||
partitionKeyProperties,
|
||||
partitionKey,
|
||||
selectedColumnIds,
|
||||
);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const options: any = {};
|
||||
// TODO: Property 'enableCrossPartitionQuery' does not exist on type 'FeedOptions'.
|
||||
@@ -1116,6 +1173,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
resourceTokenPartitionKey,
|
||||
isQueryCopilotSampleContainer,
|
||||
_collection,
|
||||
selectedColumnIds,
|
||||
]);
|
||||
|
||||
const onHideFilterClick = (): void => {
|
||||
@@ -1261,16 +1319,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
documentsIterator, // loadNextPage: disabled as it will trigger a circular dependency and infinite loop
|
||||
]);
|
||||
|
||||
const onRefreshKeyInput: KeyboardEventHandler<HTMLButtonElement> = (event) => {
|
||||
if (event.key === " " || event.key === "Enter") {
|
||||
const focusElement = event.target as HTMLElement;
|
||||
refreshDocumentsGrid(false);
|
||||
focusElement && focusElement.focus();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
const onLoadMoreKeyInput: KeyboardEventHandler<HTMLAnchorElement> = (event) => {
|
||||
if (event.key === " " || event.key === "Enter") {
|
||||
const focusElement = event.target as HTMLElement;
|
||||
@@ -1302,9 +1350,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
|
||||
// Table config here
|
||||
const tableItems: DocumentsTableComponentItem[] = documentIds.map((documentId) => {
|
||||
const item: Record<string, string> & { id: string } = {
|
||||
id: documentId.id(),
|
||||
};
|
||||
const item: DocumentsTableComponentItem = documentId.tableFields || { id: documentId.id() };
|
||||
|
||||
if (partitionKeyPropertyHeaders && documentId.stringPartitionKeyValues) {
|
||||
for (let i = 0; i < partitionKeyPropertyHeaders.length; i++) {
|
||||
@@ -1315,6 +1361,44 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
return item;
|
||||
});
|
||||
|
||||
const extractColumnDefinitionsFromDocument = (document: unknown): ColumnDefinition[] => {
|
||||
let columnDefinitions: ColumnDefinition[] = Object.keys(document)
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
.filter((key) => typeof (document as any)[key] === "string" || typeof (document as any)[key] === "number") // Only allow safe types for displayable React children
|
||||
.map((key) =>
|
||||
key === "id"
|
||||
? { id: key, label: isPreferredApiMongoDB ? "_id" : "id", isPartitionKey: false }
|
||||
: { id: key, label: key, isPartitionKey: false },
|
||||
);
|
||||
|
||||
if (showPartitionKey(_collection, isPreferredApiMongoDB)) {
|
||||
columnDefinitions.push(
|
||||
...partitionKeyPropertyHeaders.map((key) => ({ id: key, label: key, isPartitionKey: true })),
|
||||
);
|
||||
|
||||
// Remove properties that are the partition keys, since they are already included
|
||||
columnDefinitions = columnDefinitions.filter(
|
||||
(columnDefinition) => !partitionKeyProperties.includes(columnDefinition.id),
|
||||
);
|
||||
}
|
||||
|
||||
return columnDefinitions;
|
||||
};
|
||||
|
||||
/**
|
||||
* Extract column definitions from document and add to the definitions
|
||||
* @param document
|
||||
*/
|
||||
const setColumnDefinitionsFromDocument = (document: unknown): void => {
|
||||
const currentIds = new Set(columnDefinitions.map((columnDefinition) => columnDefinition.id));
|
||||
extractColumnDefinitionsFromDocument(document).forEach((columnDefinition) => {
|
||||
if (!currentIds.has(columnDefinition.id)) {
|
||||
columnDefinitions.push(columnDefinition);
|
||||
}
|
||||
});
|
||||
setColumnDefinitions([...columnDefinitions]);
|
||||
};
|
||||
|
||||
/**
|
||||
* replicate logic of selectedDocument.click();
|
||||
* Document has been clicked on in table
|
||||
@@ -1330,6 +1414,9 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
(_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(_collection, documentId)).then(
|
||||
(content) => {
|
||||
initDocumentEditor(documentId, content);
|
||||
|
||||
// Update columns
|
||||
setColumnDefinitionsFromDocument(content);
|
||||
},
|
||||
);
|
||||
|
||||
@@ -1420,10 +1507,22 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
return () => resizeObserver.disconnect(); // clean up
|
||||
}, []);
|
||||
|
||||
const columnHeaders = {
|
||||
idHeader: isPreferredApiMongoDB ? "_id" : "id",
|
||||
partitionKeyHeaders: (showPartitionKey(_collection, isPreferredApiMongoDB) && partitionKeyPropertyHeaders) || [],
|
||||
};
|
||||
// Column definition is a map<id, ColumnDefinition> to garantee uniqueness
|
||||
const [columnDefinitions, setColumnDefinitions] = useState<ColumnDefinition[]>(() => {
|
||||
const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
|
||||
SubComponentName.ColumnsSelection,
|
||||
_collection,
|
||||
undefined,
|
||||
);
|
||||
|
||||
if (!persistedColumnsSelection) {
|
||||
return extractColumnDefinitionsFromDocument({
|
||||
id: "id",
|
||||
});
|
||||
}
|
||||
|
||||
return persistedColumnsSelection.columnDefinitions;
|
||||
});
|
||||
|
||||
const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
|
||||
confirmDiscardingChange(() => {
|
||||
@@ -1655,7 +1754,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
setIsExecuting(true);
|
||||
onExecutionErrorChange(false);
|
||||
const filter: string = filterContent.trim();
|
||||
const query: string = buildQuery(isPreferredApiMongoDB, filter);
|
||||
const query: string = buildQuery(isPreferredApiMongoDB, filter, selectedColumnIds);
|
||||
|
||||
return MongoProxyClient.queryDocuments(
|
||||
_collection.databaseId,
|
||||
@@ -1721,7 +1820,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
const limitedLastFilterContents = lastFilterContents.slice(0, MAX_FILTER_HISTORY_COUNT);
|
||||
|
||||
setLastFilterContents(limitedLastFilterContents);
|
||||
saveSubComponentState(SubComponentName.FilterHistory, _collection, lastFilterContents);
|
||||
saveSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
|
||||
};
|
||||
|
||||
const refreshDocumentsGrid = useCallback(
|
||||
@@ -1754,6 +1853,41 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
[createIterator, filterContent],
|
||||
);
|
||||
|
||||
const onColumnSelectionChange = (newSelectedColumnIds: string[]): void => {
|
||||
// Do not allow to unselecting all columns
|
||||
if (newSelectedColumnIds.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedColumnIds(newSelectedColumnIds);
|
||||
|
||||
saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
|
||||
selectedColumnIds: newSelectedColumnIds,
|
||||
columnDefinitions,
|
||||
});
|
||||
};
|
||||
|
||||
const prevSelectedColumnIds = usePrevious({ selectedColumnIds, setSelectedColumnIds });
|
||||
|
||||
useEffect(() => {
|
||||
// If we are adding a field, let's refresh to include the field in the query
|
||||
let addedField = false;
|
||||
for (const field of selectedColumnIds) {
|
||||
if (
|
||||
!defaultQueryFields.includes(field) &&
|
||||
prevSelectedColumnIds &&
|
||||
!prevSelectedColumnIds.selectedColumnIds.includes(field)
|
||||
) {
|
||||
addedField = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (addedField) {
|
||||
refreshDocumentsGrid(false);
|
||||
}
|
||||
}, [prevSelectedColumnIds, refreshDocumentsGrid, selectedColumnIds]);
|
||||
|
||||
return (
|
||||
<CosmosFluentProvider className={styles.container}>
|
||||
<div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
|
||||
@@ -1848,42 +1982,40 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
|
||||
<Allotment
|
||||
onDragEnd={(sizes: number[]) => {
|
||||
tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
|
||||
saveSubComponentState(SubComponentName.MainTabDivider, _collection, tabStateData);
|
||||
saveSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
|
||||
setTabStateData(tabStateData);
|
||||
}}
|
||||
>
|
||||
<Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
|
||||
<div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
|
||||
<div className={styles.floatingControlsContainer}>
|
||||
<div className={styles.floatingControls}>
|
||||
<Button
|
||||
appearance="transparent"
|
||||
aria-label="Refresh"
|
||||
size="small"
|
||||
icon={<ArrowClockwise16Filled />}
|
||||
style={{
|
||||
color: StyleConstants.AccentMedium,
|
||||
}}
|
||||
onClick={() => refreshDocumentsGrid(false)}
|
||||
onKeyDown={onRefreshKeyInput}
|
||||
<div className={styles.tableContainer}>
|
||||
<div
|
||||
style={
|
||||
{
|
||||
height: "100%",
|
||||
width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
|
||||
} /* Fix to make table not resize beyond parent's width */
|
||||
}
|
||||
>
|
||||
<DocumentsTableComponent
|
||||
onRefreshTable={() => refreshDocumentsGrid(false)}
|
||||
items={tableItems}
|
||||
onItemClicked={(index) => onDocumentClicked(index, documentIds)}
|
||||
onSelectedRowsChange={onSelectedRowsChange}
|
||||
selectedRows={selectedRows}
|
||||
size={tableContainerSizePx}
|
||||
selectedColumnIds={selectedColumnIds}
|
||||
columnDefinitions={columnDefinitions}
|
||||
isRowSelectionDisabled={
|
||||
configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
|
||||
}
|
||||
onColumnSelectionChange={onColumnSelectionChange}
|
||||
defaultColumnSelection={getInitialColumnSelection()}
|
||||
collection={_collection}
|
||||
isColumnSelectionDisabled={isPreferredApiMongoDB}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.tableContainer}>
|
||||
<DocumentsTableComponent
|
||||
items={tableItems}
|
||||
onItemClicked={(index) => onDocumentClicked(index, documentIds)}
|
||||
onSelectedRowsChange={onSelectedRowsChange}
|
||||
selectedRows={selectedRows}
|
||||
size={tableContainerSizePx}
|
||||
columnHeaders={columnHeaders}
|
||||
isSelectionDisabled={
|
||||
(partitionKey.systemKey && !isPreferredApiMongoDB) ||
|
||||
(configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
|
||||
}
|
||||
collection={_collection}
|
||||
/>
|
||||
</div>
|
||||
{tableItems.length > 0 && (
|
||||
<a
|
||||
className={styles.loadMore}
|
||||
|
||||
@@ -21,15 +21,19 @@ describe("DocumentsTableComponent", () => {
|
||||
height: 0,
|
||||
width: 0,
|
||||
},
|
||||
columnHeaders: {
|
||||
idHeader: ID_HEADER,
|
||||
partitionKeyHeaders: [PARTITION_KEY_HEADER],
|
||||
},
|
||||
isSelectionDisabled: false,
|
||||
columnDefinitions: [
|
||||
{ id: ID_HEADER, label: "ID", isPartitionKey: false },
|
||||
{ id: PARTITION_KEY_HEADER, label: "Partition Key", isPartitionKey: true },
|
||||
],
|
||||
isRowSelectionDisabled: false,
|
||||
collection: {
|
||||
databaseId: "db",
|
||||
id: ((): string => "coll") as ko.Observable<string>,
|
||||
} as ViewModels.CollectionBase,
|
||||
onRefreshTable: (): void => {
|
||||
throw new Error("Function not implemented.");
|
||||
},
|
||||
selectedColumnIds: [],
|
||||
});
|
||||
|
||||
it("should render documents and partition keys in header", () => {
|
||||
@@ -40,7 +44,7 @@ describe("DocumentsTableComponent", () => {
|
||||
|
||||
it("should not render selection column when isSelectionDisabled is true", () => {
|
||||
const props: IDocumentsTableComponentProps = createMockProps();
|
||||
props.isSelectionDisabled = true;
|
||||
props.isRowSelectionDisabled = true;
|
||||
const wrapper = mount(<DocumentsTableComponent {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -1,30 +1,48 @@
|
||||
import {
|
||||
createTableColumn,
|
||||
Button,
|
||||
Menu,
|
||||
MenuDivider,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
MenuPopover,
|
||||
MenuTrigger,
|
||||
TableRowData as RowStateBase,
|
||||
SortDirection,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableCellLayout,
|
||||
TableColumnDefinition,
|
||||
TableColumnId,
|
||||
TableColumnSizingOptions,
|
||||
TableHeader,
|
||||
TableHeaderCell,
|
||||
TableRow,
|
||||
TableRowId,
|
||||
TableSelectionCell,
|
||||
tokens,
|
||||
useArrowNavigationGroup,
|
||||
useTableColumnSizing_unstable,
|
||||
useTableFeatures,
|
||||
useTableSelection,
|
||||
useTableSort,
|
||||
} from "@fluentui/react-components";
|
||||
import {
|
||||
ArrowClockwise16Regular,
|
||||
ArrowResetRegular,
|
||||
DeleteRegular,
|
||||
EditRegular,
|
||||
MoreHorizontalRegular,
|
||||
TableResizeColumnRegular,
|
||||
TextSortAscendingRegular,
|
||||
TextSortDescendingRegular,
|
||||
} from "@fluentui/react-icons";
|
||||
import { NormalizedEventKey } from "Common/Constants";
|
||||
import { TableColumnSelectionPane } from "Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane";
|
||||
import {
|
||||
ColumnSizesMap,
|
||||
ColumnSort,
|
||||
deleteSubComponentState,
|
||||
readSubComponentState,
|
||||
saveSubComponentState,
|
||||
SubComponentName,
|
||||
@@ -32,29 +50,37 @@ import {
|
||||
import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
|
||||
import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
|
||||
import { LayoutConstants } from "Explorer/Theme/ThemeUtil";
|
||||
import { userContext } from "UserContext";
|
||||
import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
|
||||
import { useSidePanel } from "hooks/useSidePanel";
|
||||
import React, { useCallback, useMemo } from "react";
|
||||
import { FixedSizeList as List, ListChildComponentProps } from "react-window";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
|
||||
export type DocumentsTableComponentItem = {
|
||||
id: string;
|
||||
} & Record<string, string>;
|
||||
} & Record<string, string | number>;
|
||||
|
||||
export type ColumnHeaders = {
|
||||
idHeader: string;
|
||||
partitionKeyHeaders: string[];
|
||||
export type ColumnDefinition = {
|
||||
id: string;
|
||||
label: string;
|
||||
isPartitionKey: boolean;
|
||||
};
|
||||
export interface IDocumentsTableComponentProps {
|
||||
onRefreshTable: () => void;
|
||||
items: DocumentsTableComponentItem[];
|
||||
onItemClicked: (index: number) => void;
|
||||
onSelectedRowsChange: (selectedItemsIndices: Set<TableRowId>) => void;
|
||||
selectedRows: Set<TableRowId>;
|
||||
size: { height: number; width: number };
|
||||
columnHeaders: ColumnHeaders;
|
||||
selectedColumnIds: string[];
|
||||
columnDefinitions: ColumnDefinition[];
|
||||
style?: React.CSSProperties;
|
||||
isSelectionDisabled?: boolean;
|
||||
isRowSelectionDisabled?: boolean;
|
||||
collection: ViewModels.CollectionBase;
|
||||
onColumnSelectionChange?: (newSelectedColumnIds: string[]) => void;
|
||||
defaultColumnSelection?: string[];
|
||||
isColumnSelectionDisabled?: boolean;
|
||||
}
|
||||
|
||||
interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
|
||||
@@ -67,25 +93,33 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
|
||||
data: TableRowData[];
|
||||
}
|
||||
|
||||
const COLUMNS_MENU_NAME = "columnsMenu";
|
||||
|
||||
const defaultSize = {
|
||||
idealWidth: 200,
|
||||
minWidth: 50,
|
||||
};
|
||||
export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
|
||||
onRefreshTable,
|
||||
items,
|
||||
onSelectedRowsChange,
|
||||
selectedRows,
|
||||
style,
|
||||
size,
|
||||
columnHeaders,
|
||||
isSelectionDisabled,
|
||||
selectedColumnIds,
|
||||
columnDefinitions,
|
||||
isRowSelectionDisabled: isSelectionDisabled,
|
||||
collection,
|
||||
onColumnSelectionChange,
|
||||
defaultColumnSelection,
|
||||
isColumnSelectionDisabled,
|
||||
}: IDocumentsTableComponentProps) => {
|
||||
const styles = useDocumentsTabStyles();
|
||||
|
||||
const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
|
||||
const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders);
|
||||
const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
|
||||
const columnSizesPx: TableColumnSizingOptions = {};
|
||||
columnIds.forEach((columnId) => {
|
||||
selectedColumnIds.forEach((columnId) => {
|
||||
if (
|
||||
!columnSizesMap ||
|
||||
!columnSizesMap[columnId] ||
|
||||
@@ -103,7 +137,24 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
|
||||
return columnSizesPx;
|
||||
});
|
||||
|
||||
const styles = useDocumentsTabStyles();
|
||||
const [sortState, setSortState] = React.useState<{
|
||||
sortDirection: "ascending" | "descending";
|
||||
sortColumn: TableColumnId | undefined;
|
||||
}>(() => {
|
||||
const sort = readSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
|
||||
|
||||
if (!sort) {
|
||||
return {
|
||||
sortDirection: undefined,
|
||||
sortColumn: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
sortDirection: sort.direction,
|
||||
sortColumn: sort.columnId,
|
||||
};
|
||||
});
|
||||
|
||||
const onColumnResize = React.useCallback((_, { columnId, width }: { columnId: string; width: number }) => {
|
||||
setColumnSizingOptions((state) => {
|
||||
@@ -122,42 +173,123 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
|
||||
return acc;
|
||||
}, {} as ColumnSizesMap);
|
||||
|
||||
saveSubComponentState(SubComponentName.ColumnSizes, collection, persistentSizes, true);
|
||||
saveSubComponentState<ColumnSizesMap>(SubComponentName.ColumnSizes, collection, persistentSizes, true);
|
||||
|
||||
return newSizingOptions;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// const restoreFocusTargetAttribute = useRestoreFocusTarget();
|
||||
|
||||
const onSortClick = (event: React.SyntheticEvent, columnId: string, direction: SortDirection) => {
|
||||
setColumnSort(event, columnId, direction);
|
||||
|
||||
if (columnId === undefined || direction === undefined) {
|
||||
deleteSubComponentState(SubComponentName.ColumnSort, collection);
|
||||
return;
|
||||
}
|
||||
|
||||
saveSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, { columnId, direction });
|
||||
};
|
||||
|
||||
// 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,
|
||||
columnDefinitions
|
||||
.filter((column) => selectedColumnIds.includes(column.id))
|
||||
.map((column) => ({
|
||||
columnId: column.id,
|
||||
compare: (a, b) => {
|
||||
if (typeof a[column.id] === "string") {
|
||||
return (a[column.id] as string).localeCompare(b[column.id] as string);
|
||||
} else if (typeof a[column.id] === "number") {
|
||||
return (a[column.id] as number) - (b[column.id] as number);
|
||||
} else {
|
||||
// Should not happen
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
renderHeaderCell: () => (
|
||||
<>
|
||||
<span title={column.label}>{column.label}</span>
|
||||
<Menu>
|
||||
<MenuTrigger disableButtonEnhancement>
|
||||
<Button
|
||||
// {...restoreFocusTargetAttribute}
|
||||
appearance="transparent"
|
||||
aria-label="Select column"
|
||||
size="small"
|
||||
icon={<MoreHorizontalRegular />}
|
||||
style={{ position: "absolute", right: 0, backgroundColor: tokens.colorNeutralBackground1 }}
|
||||
/>
|
||||
</MenuTrigger>
|
||||
<MenuPopover>
|
||||
<MenuList>
|
||||
<MenuItem key="refresh" icon={<ArrowClockwise16Regular />} onClick={onRefreshTable}>
|
||||
Refresh
|
||||
</MenuItem>
|
||||
{userContext.features.enableDocumentsTableColumnSelection && (
|
||||
<>
|
||||
<MenuItem
|
||||
icon={<TextSortAscendingRegular />}
|
||||
onClick={(e) => onSortClick(e, column.id, "ascending")}
|
||||
>
|
||||
Sort ascending
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
icon={<TextSortDescendingRegular />}
|
||||
onClick={(e) => onSortClick(e, column.id, "descending")}
|
||||
>
|
||||
Sort descending
|
||||
</MenuItem>
|
||||
<MenuItem icon={<ArrowResetRegular />} onClick={(e) => onSortClick(e, undefined, undefined)}>
|
||||
Reset sorting
|
||||
</MenuItem>
|
||||
{!isColumnSelectionDisabled && (
|
||||
<MenuItem key="editcolumns" icon={<EditRegular />} onClick={openColumnSelectionPane}>
|
||||
Edit columns
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
key="keyboardresize"
|
||||
icon={<TableResizeColumnRegular />}
|
||||
onClick={columnSizing.enableKeyboardMode(column.id)}
|
||||
>
|
||||
Resize with left/right arrow keys
|
||||
</MenuItem>
|
||||
{!isColumnSelectionDisabled && (
|
||||
<MenuItem
|
||||
key="remove"
|
||||
icon={<DeleteRegular />}
|
||||
onClick={() => {
|
||||
// Remove column id from selectedColumnIds
|
||||
const index = selectedColumnIds.indexOf(column.id);
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
const newSelectedColumnIds = [...selectedColumnIds];
|
||||
newSelectedColumnIds.splice(index, 1);
|
||||
onColumnSelectionChange(newSelectedColumnIds);
|
||||
}}
|
||||
>
|
||||
Remove column
|
||||
</MenuItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</MenuList>
|
||||
</MenuPopover>
|
||||
</Menu>
|
||||
</>
|
||||
),
|
||||
renderCell: (item) => (
|
||||
<TableCellLayout truncate title={item.id}>
|
||||
{item.id}
|
||||
<TableCellLayout truncate title={`${item[column.id]}`}>
|
||||
{item[column.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>
|
||||
),
|
||||
}),
|
||||
),
|
||||
),
|
||||
[columnHeaders],
|
||||
})),
|
||||
[columnDefinitions, onColumnSelectionChange, selectedColumnIds],
|
||||
);
|
||||
|
||||
const [selectionStartIndex, setSelectionStartIndex] = React.useState<number>(INITIAL_SELECTED_ROW_INDEX);
|
||||
@@ -247,6 +379,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
|
||||
columnSizing_unstable: columnSizing,
|
||||
tableRef,
|
||||
selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
|
||||
sort: { getSortDirection, setColumnSort, sort },
|
||||
} = useTableFeatures(
|
||||
{
|
||||
columns,
|
||||
@@ -260,25 +393,36 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
|
||||
// eslint-disable-next-line react/prop-types
|
||||
onSelectionChange: (e, data) => onSelectedRowsChange(data.selectedItems),
|
||||
}),
|
||||
useTableSort({
|
||||
sortState,
|
||||
onSortChange: (e, nextSortState) => setSortState(nextSortState),
|
||||
}),
|
||||
],
|
||||
);
|
||||
|
||||
const rows: TableRowData[] = getRows((row) => {
|
||||
const selected = isRowSelected(row.rowId);
|
||||
return {
|
||||
...row,
|
||||
onClick: (e: React.MouseEvent) => toggleRow(e, row.rowId),
|
||||
onKeyDown: (e: React.KeyboardEvent) => {
|
||||
if (e.key === " ") {
|
||||
e.preventDefault();
|
||||
toggleRow(e, row.rowId);
|
||||
}
|
||||
},
|
||||
selected,
|
||||
appearance: selected ? ("brand" as const) : ("none" as const),
|
||||
};
|
||||
const headerSortProps = (columnId: TableColumnId) => ({
|
||||
// onClick: (e: React.MouseEvent) => toggleColumnSort(e, columnId),
|
||||
sortDirection: getSortDirection(columnId),
|
||||
});
|
||||
|
||||
const rows: TableRowData[] = sort(
|
||||
getRows((row) => {
|
||||
const selected = isRowSelected(row.rowId);
|
||||
return {
|
||||
...row,
|
||||
onClick: (e: React.MouseEvent) => toggleRow(e, row.rowId),
|
||||
onKeyDown: (e: React.KeyboardEvent) => {
|
||||
if (e.key === " ") {
|
||||
e.preventDefault();
|
||||
toggleRow(e, row.rowId);
|
||||
}
|
||||
},
|
||||
selected,
|
||||
appearance: selected ? ("brand" as const) : ("none" as const),
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
const toggleAllKeydown = React.useCallback(
|
||||
(e: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === " ") {
|
||||
@@ -304,37 +448,50 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
|
||||
...style,
|
||||
};
|
||||
|
||||
const checkedValues: { [COLUMNS_MENU_NAME]: string[] } = {
|
||||
[COLUMNS_MENU_NAME]: [],
|
||||
};
|
||||
columnDefinitions.forEach(
|
||||
(columnDefinition) =>
|
||||
selectedColumnIds.includes(columnDefinition.id) && checkedValues[COLUMNS_MENU_NAME].push(columnDefinition.id),
|
||||
);
|
||||
|
||||
const openColumnSelectionPane = (): void => {
|
||||
useSidePanel
|
||||
.getState()
|
||||
.openSidePanel(
|
||||
"Select columns",
|
||||
<TableColumnSelectionPane
|
||||
selectedColumnIds={selectedColumnIds}
|
||||
columnDefinitions={columnDefinitions}
|
||||
onSelectionChange={onColumnSelectionChange}
|
||||
defaultSelection={defaultColumnSelection}
|
||||
/>,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Table noNativeElements {...tableProps}>
|
||||
<Table noNativeElements sortable {...tableProps}>
|
||||
<TableHeader>
|
||||
<TableRow className={styles.tableRow} style={{ width: size ? size.width - 15 : "100%" }}>
|
||||
{!isSelectionDisabled && (
|
||||
<TableSelectionCell
|
||||
key="selectcell"
|
||||
checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
|
||||
onClick={toggleAllRows}
|
||||
onKeyDown={toggleAllKeydown}
|
||||
checkboxIndicator={{ "aria-label": "Select all rows " }}
|
||||
/>
|
||||
)}
|
||||
{columns.map((column /* index */) => (
|
||||
<Menu openOnContext key={column.columnId}>
|
||||
<MenuTrigger>
|
||||
<TableHeaderCell
|
||||
className={styles.tableCell}
|
||||
key={column.columnId}
|
||||
{...columnSizing.getTableHeaderCellProps(column.columnId)}
|
||||
>
|
||||
{column.renderHeaderCell()}
|
||||
</TableHeaderCell>
|
||||
</MenuTrigger>
|
||||
<MenuPopover>
|
||||
<MenuList>
|
||||
<MenuItem onClick={columnSizing.enableKeyboardMode(column.columnId)}>
|
||||
Keyboard Column Resizing
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</MenuPopover>
|
||||
</Menu>
|
||||
{columns.map((column) => (
|
||||
<TableHeaderCell
|
||||
className={styles.tableCell}
|
||||
key={column.columnId}
|
||||
{...columnSizing.getTableHeaderCellProps(column.columnId)}
|
||||
{...headerSortProps(column.columnId)}
|
||||
>
|
||||
{column.renderHeaderCell()}
|
||||
</TableHeaderCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
/**
|
||||
* Utility class to help with selection.
|
||||
* This emulates File Explorer selection behavior.
|
||||
@@ -90,3 +92,12 @@ export const selectionHelper = (
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// To get previous values of a state in useEffect
|
||||
export const usePrevious = <T>(value: T): T | undefined => {
|
||||
const ref = useRef<T>();
|
||||
useEffect(() => {
|
||||
ref.current = value;
|
||||
});
|
||||
return ref.current;
|
||||
};
|
||||
|
||||
@@ -55,53 +55,57 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="___77lcry0_0000000 f10pi13n"
|
||||
className="___9o87uj0_0000000 ffefeo0"
|
||||
>
|
||||
<div
|
||||
className="___1rwkz4r_0000000 f1euv43f f1l8gmrm f1e31b4d f150nix6 fy6ml6n f19g0ac"
|
||||
style={
|
||||
{
|
||||
"height": "100%",
|
||||
"width": "calc(100% + -13px)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Button
|
||||
appearance="transparent"
|
||||
aria-label="Refresh"
|
||||
icon={<ArrowClockwise16Filled />}
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
size="small"
|
||||
style={
|
||||
<DocumentsTableComponent
|
||||
collection={
|
||||
{
|
||||
"color": undefined,
|
||||
"databaseId": "databaseId",
|
||||
"id": [Function],
|
||||
}
|
||||
}
|
||||
columnDefinitions={
|
||||
[
|
||||
{
|
||||
"id": "id",
|
||||
"isPartitionKey": false,
|
||||
"label": "id",
|
||||
},
|
||||
]
|
||||
}
|
||||
defaultColumnSelection={
|
||||
[
|
||||
"id",
|
||||
]
|
||||
}
|
||||
isColumnSelectionDisabled={false}
|
||||
isRowSelectionDisabled={true}
|
||||
items={[]}
|
||||
onColumnSelectionChange={[Function]}
|
||||
onItemClicked={[Function]}
|
||||
onRefreshTable={[Function]}
|
||||
onSelectedRowsChange={[Function]}
|
||||
selectedColumnIds={
|
||||
[
|
||||
"id",
|
||||
]
|
||||
}
|
||||
selectedRows={
|
||||
Set {
|
||||
0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="___9o87uj0_0000000 ffefeo0"
|
||||
>
|
||||
<DocumentsTableComponent
|
||||
collection={
|
||||
{
|
||||
"databaseId": "databaseId",
|
||||
"id": [Function],
|
||||
}
|
||||
}
|
||||
columnHeaders={
|
||||
{
|
||||
"idHeader": "id",
|
||||
"partitionKeyHeaders": [],
|
||||
}
|
||||
}
|
||||
isSelectionDisabled={true}
|
||||
items={[]}
|
||||
onItemClicked={[Function]}
|
||||
onSelectedRowsChange={[Function]}
|
||||
selectedRows={
|
||||
Set {
|
||||
0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Allotment.Pane>
|
||||
<Allotment.Pane
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user