feat(compass-crud): expand/collapse all COMPASS-8233

Author: paula-stacho

packages/compass-crud/src/components/crud-toolbar.tsx

@@ -22,6 +22,7 @@ import UpdateMenu from './update-data-menu';
 import DeleteMenu from './delete-data-menu';
 import { QueryBar } from '@mongodb-js/compass-query-bar';
 import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
+import ExpandControl from './expand-control';
 
 const crudQueryBarStyles = css({
   width: '100%',
@@ -107,6 +108,8 @@ export type CrudToolbarProps = {
   onResetClicked: () => void;
   onUpdateButtonClicked: () => void;
   onDeleteButtonClicked: () => void;
+  onExpandAllClicked: () => void;
+  onCollapseAllClicked: () => void;
   openExportFileDialog: (exportFullCollection?: boolean) => void;
   outdated: boolean;
   page: number;
@@ -137,6 +140,8 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
   onResetClicked,
   onUpdateButtonClicked,
   onDeleteButtonClicked,
+  onExpandAllClicked,
+  onCollapseAllClicked,
   openExportFileDialog,
   outdated,
   page,
@@ -293,6 +298,12 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
               <Icon glyph="ChevronRight" />
             </IconButton>
           </div>
+
+          <ExpandControl
+            onExpandAll={onExpandAllClicked}
+            onCollapseAll={onCollapseAllClicked}
+          />
+
           <ViewSwitcher
             activeView={activeDocumentView}
             onChange={viewSwitchHandler}

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

@@ -22,7 +22,7 @@ import type { DocumentTableViewProps } from './table-view/document-table-view';
 import DocumentTableView from './table-view/document-table-view';
 import type { CrudToolbarProps } from './crud-toolbar';
 import { CrudToolbar } from './crud-toolbar';
-import type { Document } from 'bson';
+import type { Document } from 'hadron-document';
 import type { DOCUMENTS_STATUSES } from '../constants/documents-statuses';
 import {
   DOCUMENTS_STATUS_ERROR,
@@ -512,6 +512,14 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
     [view, setCurrentViewInitialScrollTop, scrollRef, viewChanged]
   );
 
+  const onExpandAllClicked = useCallback(() => {
+    docs.forEach((doc) => !doc.expanded && doc.expand());
+  }, [docs]);
+
+  const onCollapseAllClicked = useCallback(() => {
+    docs.forEach((doc) => doc.expanded && doc.collapse());
+  }, [docs]);
+
   return (
     <div className={documentsContainerStyles} data-testid="compass-crud">
       <WorkspaceContainer
@@ -533,6 +541,8 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
             onResetClicked={onResetClicked}
             onUpdateButtonClicked={onUpdateButtonClicked}
             onDeleteButtonClicked={onDeleteButtonClicked}
+            onExpandAllClicked={onExpandAllClicked}
+            onCollapseAllClicked={onCollapseAllClicked}
             openExportFileDialog={openExportFileDialog}
             outdated={outdated}
             readonly={!isEditable}

packages/compass-crud/src/components/expand-control.tsx

@@ -0,0 +1,31 @@
+import { Button, Icon, Menu, MenuItem } from '@mongodb-js/compass-components';
+import React from 'react';
+
+interface ExpandControlProps {
+  onExpandAll: () => void;
+  onCollapseAll: () => void;
+}
+
+const ExpandControl: React.FunctionComponent<ExpandControlProps> = ({
+  onExpandAll,
+  onCollapseAll,
+}) => {
+  return (
+    <Menu
+      trigger={
+        <Button
+          size="xsmall"
+          aria-label="Expand Controls"
+          title="Expand Controls"
+        >
+          <Icon glyph="CaretDown" />
+        </Button>
+      }
+    >
+      <MenuItem onClick={onExpandAll}>Expand all documents</MenuItem>
+      <MenuItem onClick={onCollapseAll}>Collapse all documents</MenuItem>
+    </Menu>
+  );
+};
+
+export default ExpandControl;