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

paula-stacho · web-flow · commit 1bc37cc4ae07 · 2025-01-13T14:59:58.000+01:00
diff --git a/packages/compass-aggregations/src/components/pipeline-output-options-menu.tsx b/packages/compass-aggregations/src/components/pipeline-output-options-menu.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DropdownMenuButton } from '@mongodb-js/compass-components';
+import { css, DropdownMenuButton } from '@mongodb-js/compass-components';
 import type { MenuAction } from '@mongodb-js/compass-components';
 
 export type PipelineOutputOption = 'expand' | 'collapse';
@@ -8,19 +8,31 @@ const pipelineOptionsActions: MenuAction<PipelineOutputOption>[] = [
   { action: 'expand', label: 'Expand all fields' },
 ];
 
+const containerStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  flex: 'none',
+});
+
+const defaultTitle = 'Output Options';
+
 export const PipelineOutputOptionsMenu: React.FunctionComponent<{
   onChangeOption: (option: PipelineOutputOption) => void;
   buttonText?: string;
 }> = ({ onChangeOption, buttonText }) => {
   return (
-    <DropdownMenuButton<PipelineOutputOption>
-      data-testid="pipeline-output-options"
-      actions={pipelineOptionsActions}
-      onAction={onChangeOption}
-      buttonText={buttonText ?? 'Output Options'}
-      buttonProps={{
-        size: 'xsmall',
-      }}
-    ></DropdownMenuButton>
+    <div className={containerStyles}>
+      <DropdownMenuButton<PipelineOutputOption>
+        data-testid="pipeline-output-options"
+        actions={pipelineOptionsActions}
+        onAction={onChangeOption}
+        buttonText={buttonText ?? defaultTitle}
+        buttonProps={{
+          size: 'xsmall',
+          title: buttonText || defaultTitle,
+          ['aria-label']: buttonText || defaultTitle,
+        }}
+      ></DropdownMenuButton>
+    </div>
   );
 };
diff --git a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination.tsx b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-pagination.tsx
@@ -26,15 +26,20 @@ type PipelinePaginationProps = {
 const containerStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const paginationStyles = css({
   display: 'flex',
-  gap: spacing[1],
+  gap: spacing[100],
   alignItems: 'baseline',
 });
 
+const prevNextStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+});
+
 export const PipelinePagination: React.FunctionComponent<
   PipelinePaginationProps
 > = ({
@@ -56,7 +61,7 @@ export const PipelinePagination: React.FunctionComponent<
           <PipelinePaginationCount />
         </div>
       )}
-      <div>
+      <div className={prevNextStyles}>
         <IconButton
           data-testid="pipeline-pagination-prev-action"
           aria-label="Previous page"
diff --git a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-header.tsx b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-header.tsx
@@ -66,12 +66,13 @@ export const PipelineResultsHeader: React.FunctionComponent<
     <div className={containerStyles} data-testid="pipeline-results-header">
       <div className={pipelineOptionsStyles}>
         <Overline>All Results</Overline>
-        <PipelineOutputOptionsMenu
-          onChangeOption={handlePipelineOutputOptionsMenuChange}
-        />
       </div>
       <div className={pipelinePaginationStyles}>
         <PipelinePagination />
+        <PipelineOutputOptionsMenu
+          buttonText=""
+          onChangeOption={handlePipelineOutputOptionsMenuChange}
+        />
         <PipelineResultsViewControls
           value={resultsViewType}
           onChange={onChangeResultsView}
diff --git a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-view-controls.spec.tsx b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-view-controls.spec.tsx
@@ -17,7 +17,6 @@ describe('PipelineResultsViewControls', function () {
     );
     const container = screen.getByTestId('pipeline-results-view-controls');
     expect(container).to.exist;
-    expect(within(container).getByText('View')).to.exist;
     expect(within(container).getByLabelText('Document list')).to.exist;
     expect(within(container).getByLabelText('JSON list')).to.exist;
   });
diff --git a/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-view-controls.tsx b/packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-view-controls.tsx
@@ -3,7 +3,6 @@ import {
   css,
   SegmentedControl,
   SegmentedControlOption,
-  Overline,
   Icon,
   spacing,
   useId,
@@ -29,14 +28,6 @@ const PipelineResultsViewControls: React.FunctionComponent<{
       className={containerStyles}
       data-testid="pipeline-results-view-controls"
     >
-      <Overline
-        as="label"
-        id={labelId}
-        htmlFor={controlId}
-        aria-label="Show documents as"
-      >
-        View
-      </Overline>
       <SegmentedControl
         id={controlId}
         aria-labelledby={labelId}
diff --git a/packages/compass-components/src/components/actions/dropdown-menu-button.tsx b/packages/compass-components/src/components/actions/dropdown-menu-button.tsx
@@ -27,7 +27,7 @@ export type DropdownMenuButtonProps<Action extends string> = {
   activeAction?: Action;
   'data-testid'?: string;
   buttonText: string;
-  buttonProps: ButtonProps;
+  buttonProps: ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
   hideOnNarrow?: boolean;
 };
 
@@ -89,7 +89,6 @@ export function DropdownMenuButton<Action extends string>({
       }) => {
         return (
           <Button
-            {...buttonProps}
             ref={menuTriggerRef}
             data-testid={dataTestId ? `${dataTestId}-show-actions` : undefined}
             onClick={(evt) => {
@@ -98,10 +97,13 @@ export function DropdownMenuButton<Action extends string>({
             }}
             rightGlyph={<Icon glyph={'CaretDown'} />}
             title={buttonText}
+            {...buttonProps}
           >
-            <span className={hideOnNarrow ? hiddenOnNarrowStyles : undefined}>
-              {buttonText}
-            </span>
+            {buttonText && (
+              <span className={hideOnNarrow ? hiddenOnNarrowStyles : undefined}>
+                {buttonText}
+              </span>
+            )}
             {children}
           </Button>
         );
@@ -120,7 +122,9 @@ export function DropdownMenuButton<Action extends string>({
             data-testid={actionTestId(dataTestId, action)}
             data-action={action}
             data-menuitem={true}
-            glyph={<ActionGlyph glyph={icon} size={iconSize} />}
+            glyph={
+              icon ? <ActionGlyph glyph={icon} size={iconSize} /> : undefined
+            }
             onClick={onClick}
           >
             {label}
diff --git a/packages/compass-crud/src/components/crud-toolbar.spec.tsx b/packages/compass-crud/src/components/crud-toolbar.spec.tsx
@@ -71,6 +71,8 @@ describe('CrudToolbar Component', function () {
             onResetClicked={noop}
             onUpdateButtonClicked={noop}
             onDeleteButtonClicked={noop}
+            onExpandAllClicked={noop}
+            onCollapseAllClicked={noop}
             openExportFileDialog={noop}
             outdated={false}
             page={0}
@@ -368,6 +370,51 @@ describe('CrudToolbar Component', function () {
     });
   });
 
+  describe('Output Options', function () {
+    describe('table view', function () {
+      it('should be disabled', function () {
+        renderCrudToolbar({
+          activeDocumentView: 'Table',
+        });
+
+        expect(screen.getByTitle('Output Options')).to.have.attribute(
+          'aria-disabled',
+          'true'
+        );
+      });
+    });
+
+    describe('other views', function () {
+      it('should provide "Expand all documents"', function () {
+        const onExpandAllClicked = sinon.spy();
+        renderCrudToolbar({
+          activeDocumentView: 'JSON',
+          onExpandAllClicked,
+        });
+
+        userEvent.click(screen.getByTitle('Output Options'));
+        const expandAllBtn = screen.getByText('Expand all documents');
+        expect(expandAllBtn).to.be.visible;
+        userEvent.click(expandAllBtn);
+        expect(onExpandAllClicked).to.have.been.called;
+      });
+
+      it('should provide "Collapse all documents"', function () {
+        const onCollapseAllClicked = sinon.spy();
+        renderCrudToolbar({
+          activeDocumentView: 'JSON',
+          onCollapseAllClicked,
+        });
+
+        userEvent.click(screen.getByTitle('Output Options'));
+        const collapseAllBtn = screen.getByText('Collapse all documents');
+        expect(collapseAllBtn).to.be.visible;
+        userEvent.click(collapseAllBtn);
+        expect(onCollapseAllClicked).to.have.been.called;
+      });
+    });
+  });
+
   it('should not render the outdated message', function () {
     renderCrudToolbar();
 
diff --git a/packages/compass-crud/src/components/crud-toolbar.tsx b/packages/compass-crud/src/components/crud-toolbar.tsx
@@ -32,33 +32,42 @@ const crudToolbarStyles = css({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: spacing[3],
-  padding: spacing[3],
+  gap: spacing[300],
+  padding: spacing[300],
 });
 
 const crudBarStyles = css({
   width: '100%',
   display: 'flex',
-  gap: spacing[2],
+  gap: spacing[200],
   justifyContent: 'space-between',
 });
 
 const toolbarLeftActionStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
 });
 
 const toolbarRightActionStyles = css({
   display: 'flex',
   alignItems: 'center',
-  gap: spacing[2],
+  gap: spacing[200],
+});
+
+const prevNextStyles = css({
+  display: 'flex',
+  alignItems: 'center',
 });
 
 const exportCollectionButtonStyles = css({
   whiteSpace: 'nowrap',
 });
 
+const outputOptionsButtonStyles = css({
+  whiteSpace: 'nowrap',
+});
+
 const docsPerPageOptionStyles = css({
   width: spacing[1600] + spacing[300],
 });
@@ -69,6 +78,12 @@ const exportDataActions: MenuAction<ExportDataOption>[] = [
   { action: 'export-full-collection', label: 'Export the full collection' },
 ];
 
+type ExpandControlsOption = 'expand-all' | 'collapse-all';
+const expandControlsOptions: MenuAction<ExpandControlsOption>[] = [
+  { action: 'expand-all', label: 'Expand all documents' },
+  { action: 'collapse-all', label: 'Collapse all documents' },
+];
+
 const OUTDATED_WARNING = `The content is outdated and no longer in sync
 with the current query. Press "Find" again to see the results for
 the current query.`;
@@ -107,6 +122,8 @@ export type CrudToolbarProps = {
   onResetClicked: () => void;
   onUpdateButtonClicked: () => void;
   onDeleteButtonClicked: () => void;
+  onExpandAllClicked: () => void;
+  onCollapseAllClicked: () => void;
   openExportFileDialog: (exportFullCollection?: boolean) => void;
   outdated: boolean;
   page: number;
@@ -137,6 +154,8 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
   onResetClicked,
   onUpdateButtonClicked,
   onDeleteButtonClicked,
+  onExpandAllClicked,
+  onCollapseAllClicked,
   openExportFileDialog,
   outdated,
   page,
@@ -273,7 +292,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
             </IconButton>
           )}
 
-          <div>
+          <div className={prevNextStyles}>
             <IconButton
               data-testid="docs-toolbar-prev-page-btn"
               aria-label="Previous Page"
@@ -293,6 +312,25 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
               <Icon glyph="ChevronRight" />
             </IconButton>
           </div>
+
+          <DropdownMenuButton<ExpandControlsOption>
+            data-testid="crud-export-collection"
+            actions={expandControlsOptions}
+            onAction={(action: ExpandControlsOption) =>
+              action === 'expand-all'
+                ? onExpandAllClicked()
+                : onCollapseAllClicked()
+            }
+            buttonText=""
+            buttonProps={{
+              className: outputOptionsButtonStyles,
+              size: 'xsmall',
+              title: 'Output Options',
+              ['aria-label']: 'Output Options',
+              disabled: activeDocumentView === 'Table',
+            }}
+          />
+
           <ViewSwitcher
             activeView={activeDocumentView}
             onChange={viewSwitchHandler}
diff --git a/packages/compass-crud/src/components/document-list.tsx b/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}
