adjust aggregations and unite

Author: paula-stacho

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,29 @@ const pipelineOptionsActions: MenuAction<PipelineOutputOption>[] = [
   { action: 'expand', label: 'Expand all fields' },
 ];
 
+const containerStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  flex: 'none',
+});
+
 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 ?? 'Output Options'}
+        buttonProps={{
+          size: 'xsmall',
+          title: buttonText ?? 'Output Options',
+          ['aria-label']: buttonText ?? 'Output Options',
+        }}
+      ></DropdownMenuButton>
+    </div>
   );
 };

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"

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}

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}

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>
         );

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

@@ -370,14 +370,14 @@ describe('CrudToolbar Component', function () {
     });
   });
 
-  describe.only('expand controls', function () {
+  describe('Output Options', function () {
     describe('table view', function () {
       it('should be disabled', function () {
         renderCrudToolbar({
           activeDocumentView: 'Table',
         });
 
-        expect(screen.getByTitle('Expand Controls')).to.have.attribute(
+        expect(screen.getByTitle('Output Options')).to.have.attribute(
           'aria-disabled',
           'true'
         );
@@ -392,7 +392,7 @@ describe('CrudToolbar Component', function () {
           onExpandAllClicked,
         });
 
-        userEvent.click(screen.getByTitle('Expand Controls'));
+        userEvent.click(screen.getByTitle('Output Options'));
         const expandAllBtn = screen.getByText('Expand all documents');
         expect(expandAllBtn).to.be.visible;
         userEvent.click(expandAllBtn);
@@ -406,7 +406,7 @@ describe('CrudToolbar Component', function () {
           onCollapseAllClicked,
         });
 
-        userEvent.click(screen.getByTitle('Expand Controls'));
+        userEvent.click(screen.getByTitle('Output Options'));
         const collapseAllBtn = screen.getByText('Collapse all documents');
         expect(collapseAllBtn).to.be.visible;
         userEvent.click(collapseAllBtn);

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

@@ -22,7 +22,6 @@ 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%',
@@ -33,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],
 });
@@ -70,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.`;
@@ -278,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"
@@ -299,10 +313,22 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
             </IconButton>
           </div>
 
-          <ExpandControl
-            onExpandAll={onExpandAllClicked}
-            onCollapseAll={onCollapseAllClicked}
-            activeView={activeDocumentView}
+          <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