feat(compass-crud): enable resizable column widths in document table view COMPASS-2218

packages/compass-crud/src/components/document-list.tsx

@@ -32,7 +32,10 @@ import {
 import type { CrudStore, BSONObject, DocumentView } from '../stores/crud-store';
 import { getToolbarSignal } from '../utils/toolbar-signal';
 import BulkDeleteModal from './bulk-delete-modal';
-import { useTabState } from '@mongodb-js/compass-workspaces/provider';
+import {
+  useTabState,
+  useWorkspaceTabTableData,
+} from '@mongodb-js/compass-workspaces/provider';
 import {
   useIsLastAppliedQueryOutdated,
   useLastAppliedQuery,
@@ -155,6 +158,8 @@ const DocumentViewComponent: React.FunctionComponent<
     return null;
   }
 
+  const tableData = useWorkspaceTabTableData();
+
   if (props.view === 'List') {
     return (
       <VirtualizedDocumentListView
@@ -179,6 +184,7 @@ const DocumentViewComponent: React.FunctionComponent<
           key={props.darkMode ? 'dark' : 'light'}
           {...props}
           className={tableStyles}
+          tableData={tableData}
         />
       </>
     );

packages/compass-crud/src/components/table-view/document-table-view.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import type { ReactWrapper } from 'enzyme';
+import HadronDocument from 'hadron-document';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+import DocumentTableView, {
+  DocumentTableView as RawDocumentTableView,
+} from './document-table-view';
+
+describe('<DocumentTableView />', function () {
+  describe('#render', function () {
+    context('when the documents have objects for ids', function () {
+      const docs = [{ _id: '6909a21e9e548506e786c1e5', name: 'test-1' }];
+      const hadronDocs = docs.map((doc) => new HadronDocument(doc));
+
+      let component: ReactWrapper;
+      beforeEach(function () {
+        component = mount(
+          <DocumentTableView
+            docs={hadronDocs}
+            ns={'database.collection'}
+            namespace={'database.collection'}
+            pathChanged={sinon.spy()}
+            table={{
+              doc: null,
+              editParams: null,
+              path: [],
+              types: [],
+            }}
+            store={{
+              gridStore: {
+                listen: sinon.spy(),
+              },
+            }}
+            resetColumns={sinon.spy()}
+            tableData={{
+              columnWidths: {
+                name: 1337,
+              },
+            }}
+            start={1}
+          />
+        );
+      });
+
+      afterEach(function () {
+        component?.unmount();
+      });
+
+      it('columnWidths data is applied to the relevant grid column', async function () {
+        // Ensure we wait for GridReadyEvent so columnApi is set
+        await new Promise(setImmediate);
+
+        const instance = component.find(RawDocumentTableView).instance();
+        expect(instance).to.not.be.undefined;
+
+        const columnState = instance.columnApi.getColumnState();
+        const nameCol = columnState.find((column) => column.colId === 'name');
+        const idCol = columnState.find((column) => column.colId === '_id');
+
+        expect(nameCol.width).to.equal(1337);
+        expect(idCol.width).to.equal(200); // Default width is 200
+      });
+    });
+  });
+});

packages/compass-crud/src/components/table-view/document-table-view.tsx

@@ -37,7 +37,9 @@ import type {
   GridReadyEvent,
   RowNode,
   ValueGetterParams,
+  ColumnResizedEvent,
 } from 'ag-grid-community';
+import type { TableDataObject } from '@mongodb-js/compass-workspaces/provider';
 
 const MIXED = 'Mixed' as const;
 
@@ -70,6 +72,7 @@ export type DocumentTableViewProps = {
   tz: string;
   className?: string;
   darkMode?: boolean;
+  tableData: TableDataObject;
 };
 
 export type GridContext = {
@@ -88,7 +91,7 @@ export type GridContext = {
 /**
  * Represents the table view of the documents tab.
  */
-class DocumentTableView extends React.Component<DocumentTableViewProps> {
+export class DocumentTableView extends React.Component<DocumentTableViewProps> {
   AGGrid: React.ReactElement;
   collection: string;
   topLevel: boolean;
@@ -148,6 +151,7 @@ class DocumentTableView extends React.Component<DocumentTableViewProps> {
         const fid = data.isFooter ? '1' : '0';
         return String(data.hadronDocument.getStringId()) + fid;
       },
+      onColumnResized: this.onColumnResized.bind(this),
     };
 
     this.collection = mongodbns(props.ns).collection;
@@ -211,6 +215,21 @@ class DocumentTableView extends React.Component<DocumentTableViewProps> {
     this.addFooter(event.node, event.data, 'editing');
   }
 
+  /**
+   * Callback for when a column's width is changed
+   *
+   * @param {Object} event
+   *     finished {Boolean} - indicates the end of a stream of column resize events
+   */
+  onColumnResized(event: ColumnResizedEvent) {
+    if (event.finished) {
+      const columnState = this.columnApi.getColumnState();
+      for (const column of columnState) {
+        this.props.tableData.columnWidths[column.colId] = column.width;
+      }
+    }
+  }
+
   /**
    * Add a row to the table that represents the update/cancel footer for the
    * row directly above. The row will be a full-width row that has the same
@@ -845,6 +864,8 @@ class DocumentTableView extends React.Component<DocumentTableViewProps> {
         tz: this.props.tz,
         darkMode: this.props.darkMode,
       },
+      resizable: true,
+      width: this.props.tableData.columnWidths[String(path[path.length - 1])],
     };
   };
 

packages/compass-workspaces/src/components/workspace-tab-context-provider.tsx

@@ -149,7 +149,7 @@ const WorkspaceTabContextProvider: React.FunctionComponent<
   }
 
   return (
-    <WorkspaceTabStateProvider id={tab.id}>
+    <WorkspaceTabStateProvider id={tab.id} tableData={tab.tableData}>
       <AppRegistryProvider
         key={tab.id}
         scopeName="Workspace Tab"

packages/compass-workspaces/src/components/workspace-tab-state-provider.tsx

@@ -12,6 +12,10 @@ import { createStore } from 'redux';
 
 type TabState = Record<string, Record<string, unknown>>;
 
+export type TableDataObject = {
+  columnWidths: Record<string, number>;
+};
+
 const SET_STATE = 'compass-workspaces/workspace-tab-state-provider/SET_STATE';
 
 const CLEANUP_TAB_STATE =
@@ -67,6 +71,9 @@ export const TabStateStoreContext = React.createContext<
 );
 
 const WorkspaceTabIdContext = React.createContext<string | null>(null);
+const WorkspaceTabTableDataContext = React.createContext<TableDataObject>({
+  columnWidths: {},
+});
 
 /**
  * Exported for testing purposes only
@@ -82,14 +89,18 @@ export const TabStoreProvider: React.FunctionComponent = ({ children }) => {
 
 export const WorkspaceTabStateProvider = ({
   id,
+  tableData,
   children,
 }: {
   id: string;
+  tableData: TableDataObject;
   children: React.ReactChild;
 }) => {
   return (
     <WorkspaceTabIdContext.Provider value={id}>
-      <TabStoreProvider>{children}</TabStoreProvider>
+      <WorkspaceTabTableDataContext.Provider value={tableData}>
+        <TabStoreProvider>{children}</TabStoreProvider>
+      </WorkspaceTabTableDataContext.Provider>
     </WorkspaceTabIdContext.Provider>
   );
 };
@@ -107,6 +118,10 @@ export function useWorkspaceTabId() {
   return tabId;
 }
 
+export function useWorkspaceTabTableData() {
+  return useContext(WorkspaceTabTableDataContext);
+}
+
 const useStore: () => TabStateStore = createStoreHook(TabStateStoreContext);
 
 const useSelector: TypedUseSelectorHook<TabState> =

packages/compass-workspaces/src/provider.tsx

@@ -379,10 +379,12 @@ export const workspacesServiceLocator = createServiceLocator(
   'workspacesServiceLocator'
 );
 
+export type { TableDataObject } from './components/workspace-tab-state-provider';
 export { useWorkspacePlugins } from './components/workspaces-provider';
 export {
   useWorkspaceTabId,
   useTabState,
+  useWorkspaceTabTableData,
 } from './components/workspace-tab-state-provider';
 export {
   useOnTabClose,

packages/compass-workspaces/src/stores/workspaces.ts

@@ -210,10 +210,15 @@ export const getInitialTabState = (
     const subTab =
       initialSubtab ?? (isAggregationsSubtab ? 'Aggregations' : 'Documents');
 
+    const tableData = {
+      columnWidths: {},
+    };
+
     return {
       id: tabId,
       subTab,
       ...rest,
+      tableData,
     };
   }
   return { id: tabId, ...workspace };