Persist column selection

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts

@@ -11,11 +11,13 @@ export enum SubComponentName {
   ColumnSizes = "ColumnSizes",
   FilterHistory = "FilterHistory",
   MainTabDivider = "MainTabDivider",
+  ColumnsSelection = "ColumnsSelection",
 }
 
 export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
 export type WidthDefinition = { idealWidth?: number; minWidth?: number };
 export type TabDivider = { leftPaneWidthPercent: number };
+export type ColumnsSelection = { selectedColumnIds: string[] };
 
 /**
  *

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx

@@ -69,7 +69,7 @@ jest.mock("Explorer/Controls/Dialog", () => ({
   useDialog: {
     getState: jest.fn(() => ({
       showOkCancelModalDialog: (title: string, subText: string, okLabel: string, onOk: () => void) => onOk(),
-      showOkModalDialog: () => { },
+      showOkModalDialog: () => {},
     })),
   },
 }));
@@ -92,11 +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, "", ['pk'], {
+      expect(
-        paths: ['pk'],
+        buildQuery(false, "", ["pk"], {
-        kind: 'Hash',
+          paths: ["pk"],
-        version: 2,
+          kind: "Hash",
-      })).toContain("select");
+          version: 2,
+        }),
+      ).toContain("select");
     });
   });
 

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -470,6 +470,15 @@ 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,
@@ -647,11 +656,12 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   );
 
   const getInitialColumnSelection = () => {
-    const columnsIds = ["id"];
+    const defaultColumnsIds = ["id"];
     if (showPartitionKey(_collection, isPreferredApiMongoDB)) {
-      columnsIds.push(...partitionKeyPropertyHeaders);
+      defaultColumnsIds.push(...partitionKeyPropertyHeaders);
     }
-    return columnsIds;
+
+    return readSubComponentState(SubComponentName.ColumnsSelection, _collection, defaultColumnsIds);
   };
 
   const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(getInitialColumnSelection);
@@ -987,15 +997,15 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       const deletePromise = !isPreferredApiMongoDB
         ? _deleteNoSqlDocuments(_collection, toDeleteDocumentIds)
         : MongoProxyClient.deleteDocuments(
-          _collection.databaseId,
+            _collection.databaseId,
-          _collection as ViewModels.Collection,
+            _collection as ViewModels.Collection,
-          toDeleteDocumentIds,
+            toDeleteDocumentIds,
-        ).then(({ deletedCount, isAcknowledged }) => {
+          ).then(({ deletedCount, isAcknowledged }) => {
-          if (deletedCount === toDeleteDocumentIds.length && isAcknowledged) {
+            if (deletedCount === toDeleteDocumentIds.length && isAcknowledged) {
-            return toDeleteDocumentIds;
+              return toDeleteDocumentIds;
-          }
+            }
-          throw new Error(`Delete failed with deletedCount: ${deletedCount} and isAcknowledged: ${isAcknowledged}`);
+            throw new Error(`Delete failed with deletedCount: ${deletedCount} and isAcknowledged: ${isAcknowledged}`);
-        });
+          });
 
       return deletePromise
         .then(
@@ -1068,8 +1078,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         ? `the selected ${selectedRows.size} items`
         : "the selected item"
       : isPlural
-        ? `the selected ${selectedRows.size} documents`
+      ? `the selected ${selectedRows.size} documents`
-        : "the selected document";
+      : "the selected document";
     const msg = `Are you sure you want to delete ${documentName}?`;
 
     useDialog
@@ -1845,6 +1855,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     }
 
     setSelectedColumnIds(newSelectedColumnIds);
+
+    saveSubComponentState(SubComponentName.ColumnsSelection, _collection, newSelectedColumnIds);
   };
 
   const prevSelectedColumnIds = usePrevious({ selectedColumnIds, setSelectedColumnIds });