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

Replace read/save methods with more generic ones

This commit is contained in:
Laurent Nguyen 2024-07-22 17:16:05 +02:00
parent 9aa55aa4e5
commit 4fda518a3f
3 changed files with 51 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
View File

@ -1,8 +1,8 @@
// Definitions of State data
import { TableColumnSizingOptions } from "@fluentui/react-components";
import { loadState, saveState, saveStateDebounced } from "Shared/AppStatePersistenceUtility";
import { userContext } from "UserContext";
import * as ViewModels from "../../../Contracts/ViewModels";
// Component states
export interface DocumentsTabStateData {
@ -24,84 +24,45 @@ export const saveDocumentsTabState = (state: DocumentsTabStateData): void => {
saveStateDebounced({ componentName: ComponentName }, state);
};
type ColumnSizesMap = { [columnId: string]: WidthDefinition };
type WidthDefinition = { idealWidth?: number; minWidth?: number };
export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
export type WidthDefinition = { idealWidth?: number; minWidth?: number };
const defaultSize: WidthDefinition = {
idealWidth: 200,
minWidth: 50,
};
const ColumnSizesSubComponentName = "ColumnSizes";
export const readColumnSizes = (
databaseName: string,
containerName: string,
columnIds: string[],
): TableColumnSizingOptions => {
export const readSubComponentState = <T>(
subComponentName: "ColumnSizes" | "FilterHistory",
collection: ViewModels.CollectionBase,
defaultValue: T,
): T => {
const globalAccountName = userContext.databaseAccount?.name;
// TODO what if databaseAccount doesn't exist?
const state = loadState({
globalAccountName,
databaseName,
containerName,
componentName: ComponentName,
subComponentName: ColumnSizesSubComponentName,
}) as ColumnSizesMap;
subComponentName,
globalAccountName,
databaseName: collection.databaseId,
containerName: collection.id(),
}) as T;
const columnSizesPx: ColumnSizesMap = {};
columnIds.forEach((columnId) => {
columnSizesPx[columnId] = (state && state[columnId]) || defaultSize;
});
return columnSizesPx;
return state || defaultValue;
};
export const saveColumnSizes = (databaseName: string, containerName: string, columnSizesMap: ColumnSizesMap): void => {
export const saveSubComponentState = <T>(
subComponentName: "ColumnSizes" | "FilterHistory",
collection: ViewModels.CollectionBase,
state: T,
debounce?: boolean,
): void => {
const globalAccountName = userContext.databaseAccount?.name;
// TODO what if databaseAccount doesn't exist?
saveStateDebounced(
(debounce ? saveStateDebounced : saveState)(
{
componentName: ComponentName,
subComponentName: ColumnSizesSubComponentName,
subComponentName,
globalAccountName,
databaseName,
containerName,
databaseName: collection.databaseId,
containerName: collection.id(),
},
columnSizesMap,
);
};
const filterHistorySubComponentName = "FilterHistory";
export type FilterHistory = string[];
export const readFilterHistory = (databaseName: string, containerName: string): FilterHistory => {
const globalAccountName = userContext.databaseAccount?.name;
// TODO what if databaseAccount doesn't exist?
const state = loadState({
globalAccountName,
databaseName,
containerName,
componentName: ComponentName,
subComponentName: filterHistorySubComponentName,
}) as FilterHistory;
return state || [];
};
export const saveFilterHistory = (databaseName: string, containerName: string, filterHistory: FilterHistory): void => {
const globalAccountName = userContext.databaseAccount?.name;
// TODO what if databaseAccount doesn't exist?
saveState(
{
componentName: ComponentName,
subComponentName: filterHistorySubComponentName,
globalAccountName,
databaseName,
containerName,
},
filterHistory,
state,
);
};

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

@ -24,9 +24,9 @@ import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/
import {
DocumentsTabStateData,
readDocumentsTabState,
readFilterHistory,
readSubComponentState,
saveDocumentsTabState,
saveFilterHistory,
saveSubComponentState,
} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
import { useSelectedNode } from "Explorer/useSelectedNode";
@ -521,7 +521,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
// User's filter history
const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
readFilterHistory(_collection.databaseId, _collection.id()),
readSubComponentState("FilterHistory", _collection, []),
);
const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
@ -1690,7 +1690,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
// Save filter content to local storage
lastFilterContents.unshift(filterContent);
setLastFilterContents([...lastFilterContents]);
saveFilterHistory(_collection.databaseId, _collection.id(), lastFilterContents);
saveSubComponentState("FilterHistory", _collection, lastFilterContents);
};
const refreshDocumentsGrid = useCallback(

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

@ -1,4 +1,5 @@
import {
createTableColumn,
Menu,
MenuItem,
MenuList,
@ -16,14 +17,18 @@ import {
TableRow,
TableRowId,
TableSelectionCell,
createTableColumn,
useArrowNavigationGroup,
useTableColumnSizing_unstable,
useTableFeatures,
useTableSelection,
} from "@fluentui/react-components";
import { NormalizedEventKey } from "Common/Constants";
import { readColumnSizes, saveColumnSizes } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
import {
ColumnSizesMap,
readSubComponentState,
saveSubComponentState,
WidthDefinition,
} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
import React, { useCallback, useMemo } from "react";
@ -60,6 +65,11 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
data: TableRowData[];
}
const defaultSize: WidthDefinition = {
idealWidth: 200,
minWidth: 50,
};
export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
items,
onSelectedRowsChange,
@ -70,9 +80,15 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
isSelectionDisabled,
collection,
}: IDocumentsTableComponentProps) => {
const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() =>
readColumnSizes(collection.databaseId, collection.id(), ["id"].concat(columnHeaders.partitionKeyHeaders)),
);
const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders);
const columnSizesMap: ColumnSizesMap = readSubComponentState("ColumnSizes", collection, {});
const columnSizesPx: ColumnSizesMap = {};
columnIds.forEach((columnId) => {
columnSizesPx[columnId] = (columnSizesMap && columnSizesMap[columnId]) || defaultSize;
});
return columnSizesPx;
});
const onColumnResize = React.useCallback((_, { columnId, width }) => {
setColumnSizingOptions((state) => {
@ -84,7 +100,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
},
};
saveColumnSizes(collection.databaseId, collection.id(), newSizingOptions);
saveSubComponentState("ColumnSizes", collection, newSizingOptions, true);
return newSizingOptions;
});