random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-25 23:16:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Persist documents tab current filter

Browse Source
This commit is contained in:
Laurent Nguyen 2024-11-05 10:13:20 +01:00
parent 4ae78d1707
commit 13ee582ec1
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ export enum SubComponentName {
MainTabDivider = "MainTabDivider",
ColumnsSelection = "ColumnsSelection",
ColumnSort = "ColumnSort",
CurrentFilter = "CurrentFilter",
}
export type ColumnSizesMap = { [columnId: string]: WidthDefinition };

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

@ -35,6 +35,7 @@ import {
FilterHistory,
SubComponentName,
TabDivider,
deleteDocumentsTabSubComponentState,
readDocumentsTabSubComponentState,
saveDocumentsTabSubComponentState,
} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
@ -585,7 +586,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
onIsExecutingChange,
isTabActive,
}): JSX.Element => {
const [filterContent, setFilterContent] = useState<string>("");
const [filterContent, setFilterContent] = useState<string>(() =>
readDocumentsTabSubComponentState<string>(SubComponentName.CurrentFilter, _collection, ""),
);
const [documentIds, setDocumentIds] = useState<ExtendedDocumentId[]>([]);
const [isExecuting, setIsExecuting] = useState<boolean>(false);
const styles = useDocumentsTabStyles();
@ -818,7 +822,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
useEffect(() => {
setKeyboardActions({
[KeyboardAction.CLEAR_SEARCH]: () => {
setFilterContent("");
updateFilterContent("");
refreshDocumentsGrid(true);
return true;
},
@ -2073,6 +2077,15 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
return options;
};
const updateFilterContent = (filter: string): void => {
if (filter === "" || filter === undefined) {
deleteDocumentsTabSubComponentState(SubComponentName.CurrentFilter, _collection);
} else {
saveDocumentsTabSubComponentState<string>(SubComponentName.CurrentFilter, _collection, filter, true);
}
setFilterContent(filter);
};
return (
<CosmosFluentProvider className={styles.container}>
<div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
@ -2087,7 +2100,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
}
title="Type a query predicate or choose one from the list."
value={filterContent}
onChange={(value) => setFilterContent(value)}
onChange={updateFilterContent}
onKeyDown={onFilterKeyDown}
bottomLink={{ text: "Learn more", url: DATA_EXPLORER_DOC_URL }}
/>