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

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

@@ -145,11 +145,15 @@ const DocumentViewComponent: React.FunctionComponent<
     initialScrollTop?: number;
     scrollTriggerRef?: React.Ref<HTMLDivElement>;
     scrollableContainerRef?: React.Ref<HTMLDivElement>;
+    columnWidths: Record<string, number>;
+    onColumnWidthChange: (newColumnWidths: Record<string, number>) => void;
   }
 > = ({
   initialScrollTop,
   scrollTriggerRef,
   scrollableContainerRef,
+  columnWidths,
+  onColumnWidthChange,
   ...props
 }) => {
   if (props.docs?.length === 0) {
@@ -180,6 +184,8 @@ const DocumentViewComponent: React.FunctionComponent<
           key={props.darkMode ? 'dark' : 'light'}
           {...props}
           className={tableStyles}
+          columnWidths={columnWidths}
+          onColumnWidthChange={onColumnWidthChange}
         />
       </>
     );
@@ -420,6 +426,18 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
     ]
   );
 
+  const [columnWidths, setColumnWidths] = useTabState<Record<string, number>>(
+    'columnWidths',
+    {}
+  );
+
+  const onColumnWidthChange = useCallback((newColumnWidths) => {
+    setColumnWidths({
+      ...columnWidths,
+      ...newColumnWidths,
+    });
+  }, []);
+
   const renderContent = useCallback(
     (scrollTriggerRef: React.Ref<HTMLDivElement>) => {
       let content = null;
@@ -482,6 +500,8 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
               initialScrollTop={currentViewInitialScrollTop}
               scrollableContainerRef={scrollRef}
               scrollTriggerRef={scrollTriggerRef}
+              columnWidths={columnWidths}
+              onColumnWidthChange={onColumnWidthChange}
             />
           );
         }

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

@@ -0,0 +1,66 @@
+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()}
+            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,6 +37,7 @@ import type {
   GridReadyEvent,
   RowNode,
   ValueGetterParams,
+  ColumnResizedEvent,
 } from 'ag-grid-community';
 
 const MIXED = 'Mixed' as const;
@@ -70,6 +71,8 @@ export type DocumentTableViewProps = {
   tz: string;
   className?: string;
   darkMode?: boolean;
+  columnWidths: Record<string, number>;
+  onColumnWidthChange: (newColumnWidths: Record<string, number>) => void;
 };
 
 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,23 @@ 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() || [];
+      const currentColumnWidths: Record<string, number> = {};
+      for (const column of columnState) {
+        if (column.width) currentColumnWidths[column.colId] = column.width;
+      }
+      this.props.onColumnWidthChange(currentColumnWidths);
+    }
+  }
+
   /**
    * 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 +866,8 @@ class DocumentTableView extends React.Component<DocumentTableViewProps> {
         tz: this.props.tz,
         darkMode: this.props.darkMode,
       },
+      resizable: true,
+      width: this.props.columnWidths[String(path[path.length - 1])],
     };
   };