feat(crud): persist document view COMPASS-6937

packages/compass-crud/src/stores/crud-store.spec.ts

@@ -25,6 +25,7 @@ import {
   fetchDocuments,
   activateDocumentsPlugin as _activate,
   MAX_DOCS_PER_PAGE_STORAGE_KEY,
+  DOCUMENT_VIEW_STORAGE_KEY,
 } from './crud-store';
 import { Int32 } from 'bson';
 import { mochaTestServer } from '@mongodb-js/compass-test-server';
@@ -137,7 +138,7 @@ function onceDocumentEvent(
 ): Promise<unknown[]> {
   // The once function was not meant for strongly typed events, so we need to
   // do some additional type casting.
-  return once(doc as unknown as EventEmitter, event as string);
+  return once(doc as unknown as EventEmitter, event);
 }
 
 const mockFieldStoreService = {
@@ -1724,13 +1725,32 @@ describe('store', function () {
 
   describe('#viewChanged', function () {
     let store: CrudStore;
+    let fakeLocalStorage: sinon.SinonStub;
+    let fakeGetItem: (key: string) => string | null;
+    let fakeSetItem: (key: string, value: string) => void;
 
     beforeEach(function () {
+      const localStorageValues: Record<string, string> = Object.create(null);
+      fakeGetItem = sinon.fake((key: string) => {
+        return localStorageValues[key];
+      });
+      fakeSetItem = sinon.fake((key: string, value: any) => {
+        localStorageValues[key] = value.toString();
+      });
+
+      fakeLocalStorage = sinon.stub(global, 'localStorage').value({
+        getItem: fakeGetItem,
+        setItem: fakeSetItem,
+      });
       const plugin = activatePlugin();
       store = plugin.store;
       deactivate = () => plugin.deactivate();
     });
 
+    afterEach(function () {
+      fakeLocalStorage.restore();
+    });
+
     it('sets the view', async function () {
       const listener = waitForState(store, (state) => {
         expect(state.view).to.equal('Table');
@@ -1740,6 +1760,37 @@ describe('store', function () {
 
       await listener;
     });
+
+    it('initializes the view from localStorage on store creation', function () {
+      fakeSetItem(DOCUMENT_VIEW_STORAGE_KEY, 'JSON');
+      deactivate?.();
+
+      const plugin = activatePlugin();
+      store = plugin.store;
+      deactivate = () => plugin.deactivate();
+
+      expect(store.state.view).to.equal('JSON');
+    });
+
+    it('sets the view and stores it in localStorage', async function () {
+      let listener = waitForState(store, (state) => {
+        expect(state.view).to.equal('Table');
+        expect(fakeGetItem(DOCUMENT_VIEW_STORAGE_KEY)).to.equal('Table');
+      });
+
+      store.viewChanged('Table');
+
+      await listener;
+
+      listener = waitForState(store, (state) => {
+        expect(state.view).to.equal('JSON');
+        expect(fakeGetItem(DOCUMENT_VIEW_STORAGE_KEY)).to.equal('JSON');
+      });
+
+      store.viewChanged('JSON');
+
+      await listener;
+    });
   });
 
   describe('#refreshDocuments', function () {
@@ -2158,7 +2209,7 @@ describe('store', function () {
       const [error, d] = await findAndModifyWithFLEFallback(
         dataServiceStub,
         'compass-crud.test',
-        { _id: 1234 } as any,
+        { _id: 1234 },
         { name: 'document_12345' },
         'update'
       );
@@ -2188,7 +2239,7 @@ describe('store', function () {
       const [error, d] = await findAndModifyWithFLEFallback(
         dataServiceStub,
         'compass-crud.test',
-        { _id: 1234 } as any,
+        { _id: 1234 },
         { name: 'document_12345' },
         'replace'
       );
@@ -2219,7 +2270,7 @@ describe('store', function () {
       const [error, d] = await findAndModifyWithFLEFallback(
         dataServiceStub,
         'compass-crud.test',
-        { _id: 1234 } as any,
+        { _id: 1234 },
         { name: 'document_12345' },
         'update'
       );
@@ -2250,7 +2301,7 @@ describe('store', function () {
       const [error, d] = await findAndModifyWithFLEFallback(
         dataServiceStub,
         'compass-crud.test',
-        { _id: 1234 } as any,
+        { _id: 1234 },
         { name: 'document_12345' },
         'update'
       );
@@ -2297,7 +2348,7 @@ describe('store', function () {
       const [error, d] = await findAndModifyWithFLEFallback(
         dataServiceStub,
         'compass-crud.test',
-        { _id: 1234 } as any,
+        { _id: 1234 },
         { name: 'document_12345' },
         'update'
       );
@@ -2320,7 +2371,7 @@ describe('store', function () {
       const [error, d] = await findAndModifyWithFLEFallback(
         dataServiceStub,
         'compass-crud.test',
-        { _id: 1234 } as any,
+        { _id: 1234 },
         { name: 'document_12345' },
         'update'
       );
@@ -2347,7 +2398,7 @@ describe('store', function () {
       const [error, d] = await findAndModifyWithFLEFallback(
         dataServiceStub,
         'compass-crud.test',
-        { _id: 1234 } as any,
+        { _id: 1234 },
         { name: 'document_12345' },
         'replace'
       );

packages/compass-crud/src/stores/crud-store.ts

@@ -105,7 +105,8 @@ export type CrudActions = {
   saveUpdateQuery(name: string): Promise<void>;
 };
 
-export type DocumentView = 'List' | 'JSON' | 'Table';
+const DOCUMENT_VIEWS = ['List', 'JSON', 'Table'] as const;
+export type DocumentView = (typeof DOCUMENT_VIEWS)[number];
 
 const INITIAL_BULK_UPDATE_TEXT = `{
   $set: {
@@ -221,11 +222,6 @@ const ERROR = 'error';
  */
 const MODIFYING = 'modifying';
 
-/**
- * The list view constant.
- */
-const LIST = 'List';
-
 /**
  * The delete error message.
  */
@@ -265,6 +261,13 @@ export const COUNT_MAX_TIME_MS_CAP = 5000;
  */
 export const MAX_DOCS_PER_PAGE_STORAGE_KEY = 'compass_crud-max_docs_per_page';
 
+/**
+ * The key we use to persist the user selected document view for other tabs or
+ * for the next application start.
+ * Exported only for test purpose
+ */
+export const DOCUMENT_VIEW_STORAGE_KEY = 'compass_crud-document_view';
+
 export type CrudStoreOptions = Pick<
   CollectionTabPluginMetadata,
   | 'query'
@@ -445,7 +448,7 @@ class CrudStoreImpl
       version: this.instance.build.version,
       end: 0,
       page: 0,
-      view: LIST,
+      view: this.getInitialDocumentView(),
       count: null,
       insert: this.getInitialInsertState(),
       bulkUpdate: this.getInitialBulkUpdateState(),
@@ -471,6 +474,14 @@ class CrudStoreImpl
     };
   }
 
+  getInitialDocumentView(): DocumentView {
+    const view = localStorage.getItem(DOCUMENT_VIEW_STORAGE_KEY);
+    if (DOCUMENT_VIEWS.includes(view as DocumentView)) {
+      return view as DocumentView;
+    }
+    return 'List';
+  }
+
   getInitialDocsPerPage(): number {
     const lastUsedDocsPerPageString = localStorage.getItem(
       MAX_DOCS_PER_PAGE_STORAGE_KEY
@@ -1560,10 +1571,9 @@ class CrudStoreImpl
 
   /**
    * The view has changed.
-   *
-   * @param {String} view - The new view.
    */
-  viewChanged(view: CrudState['view']) {
+  viewChanged(view: DocumentView) {
+    localStorage.setItem(DOCUMENT_VIEW_STORAGE_KEY, view);
     this.setState({ view: view });
   }
 

packages/compass-e2e-tests/helpers/commands/collection-workspaces.ts

@@ -83,6 +83,20 @@ export async function navigateToCollectionTab(
   await browser
     .$(Selectors.WorkspaceTabTooltip)
     .waitForDisplayed({ reverse: true });
+
+  // In COMPASS-6937 we are persisting the last selected document view (list, table, json)
+  // in the local storage. Always ensure that we have the list view selected once we
+  // navigate to a collection tab.
+  // If the current view is not list view, then click the list view button to switch to list view.
+  if (tabName === 'Documents') {
+    const isListViewChecked = await browser
+      .$(Selectors.SelectListView)
+      .$('..')
+      .getAttribute('data-lg-checked');
+    if (isListViewChecked !== 'true') {
+      await browser.clickVisible(Selectors.SelectListView);
+    }
+  }
 }
 
 export async function navigateWithinCurrentCollectionTabs(