Persist column sorting

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts

@@ -12,12 +12,15 @@ export enum SubComponentName {
   FilterHistory = "FilterHistory",
   MainTabDivider = "MainTabDivider",
   ColumnsSelection = "ColumnsSelection",
+  ColumnSort = "ColumnSort",
 }
 
 export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
+export type FilterHistory = string[];
 export type WidthDefinition = { idealWidth?: number; minWidth?: number };
 export type TabDivider = { leftPaneWidthPercent: number };
-export type ColumnsSelection = { selectedColumnIds: string[] };
+export type ColumnsSelection = string[];
+export type ColumnSort = { columnId: string; direction: "ascending" | "descending" };
 
 /**
  *

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -21,6 +21,8 @@ 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,
@@ -591,7 +593,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   // State
   const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
-    readSubComponentState(SubComponentName.MainTabDivider, _collection, {
+    readSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
       leftPaneWidthPercent: 35,
     }),
   );
@@ -605,8 +607,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   const [continuationToken, setContinuationToken] = useState<string>(undefined);
 
   // User's filter history
-  const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
+  const [lastFilterContents, setLastFilterContents] = useState<FilterHistory>(() =>
-    readSubComponentState(SubComponentName.FilterHistory, _collection, []),
+    readSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
   );
 
   const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
@@ -661,7 +663,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       defaultColumnsIds.push(...partitionKeyPropertyHeaders);
     }
 
-    return readSubComponentState(SubComponentName.ColumnsSelection, _collection, defaultColumnsIds);
+    return readSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, defaultColumnsIds);
   };
 
   const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(getInitialColumnSelection);
@@ -1815,7 +1817,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(
@@ -1856,7 +1858,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
     setSelectedColumnIds(newSelectedColumnIds);
 
-    saveSubComponentState(SubComponentName.ColumnsSelection, _collection, newSelectedColumnIds);
+    saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, newSelectedColumnIds);
   };
 
   const prevSelectedColumnIds = usePrevious({ selectedColumnIds, setSelectedColumnIds });
@@ -1974,7 +1976,7 @@ 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);
             }}
           >

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -7,6 +7,7 @@ import {
   MenuPopover,
   MenuTrigger,
   TableRowData as RowStateBase,
+  SortDirection,
   Table,
   TableBody,
   TableCell,
@@ -39,6 +40,8 @@ import { NormalizedEventKey } from "Common/Constants";
 import { TableColumnSelectionPane } from "Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane";
 import {
   ColumnSizesMap,
+  ColumnSort,
+  deleteSubComponentState,
   readSubComponentState,
   saveSubComponentState,
   SubComponentName,
@@ -112,7 +115,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   };
 
   const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
-    const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
+    const columnSizesMap: ColumnSizesMap = readSubComponentState<ColumnSizesMap>(
+      SubComponentName.ColumnSizes,
+      collection,
+      {},
+    );
     const columnSizesPx: ColumnSizesMap = {};
     selectedColumnIds.forEach((columnId) => {
       columnSizesPx[columnId] = (columnSizesMap && columnSizesMap[columnId]) || defaultSize;
@@ -123,9 +130,20 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   const [sortState, setSortState] = React.useState<{
     sortDirection: "ascending" | "descending";
     sortColumn: TableColumnId | undefined;
-  }>({
+  }>(() => {
-    sortDirection: undefined,
+    const sort = readSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
-    sortColumn: undefined,
+
+    if (!sort) {
+      return {
+        sortDirection: undefined,
+        sortColumn: undefined,
+      };
+    }
+
+    return {
+      sortDirection: sort.direction,
+      sortColumn: sort.columnId,
+    };
   });
 
   const onColumnResize = React.useCallback((_, { columnId, width }) => {
@@ -138,7 +156,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         },
       };
 
-      saveSubComponentState(SubComponentName.ColumnSizes, collection, newSizingOptions, true);
+      saveSubComponentState<ColumnSizesMap>(SubComponentName.ColumnSizes, collection, newSizingOptions, true);
 
       return newSizingOptions;
     });
@@ -146,6 +164,17 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
 
   // 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(
     () =>
@@ -184,17 +213,17 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
                     </MenuItem>
                     <MenuItem
                       icon={<TextSortAscendingRegular />}
-                      onClick={(e) => setColumnSort(e, column.id, "ascending")}
+                      onClick={(e) => onSortClick(e, column.id, "ascending")}
                     >
                       Sort ascending
                     </MenuItem>
                     <MenuItem
                       icon={<TextSortDescendingRegular />}
-                      onClick={(e) => setColumnSort(e, column.id, "descending")}
+                      onClick={(e) => onSortClick(e, column.id, "descending")}
                     >
                       Sort descending
                     </MenuItem>
-                    <MenuItem icon={<ArrowResetRegular />} onClick={(e) => setColumnSort(e, undefined, undefined)}>
+                    <MenuItem icon={<ArrowResetRegular />} onClick={(e) => onSortClick(e, undefined, undefined)}>
                       Reset sorting
                     </MenuItem>
                     <MenuItem key="editcolumns" icon={<EditRegular />} onClick={openColumnSelectionPane}>