chore(compass-aggregations): remove more and fewer from options button label (#5224)

Author: Anemy

packages/compass-aggregations/src/components/pipeline-toolbar/index.spec.tsx

@@ -54,7 +54,7 @@ describe('PipelineToolbar', function () {
       ).to.exist;
       expect(
         within(header).getByTestId('pipeline-toolbar-options-button'),
-        'shows more options button'
+        'shows options button'
       ).to.exist;
     });
 

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx

@@ -76,9 +76,7 @@ describe('PipelineActions', function () {
     it('calls onToggleOptions on click', function () {
       const button = screen.getByTestId('pipeline-toolbar-options-button');
       expect(button).to.exist;
-      expect(button?.textContent?.toLowerCase().trim()).to.equal(
-        'fewer options'
-      );
+      expect(button?.textContent?.toLowerCase().trim()).to.equal('options');
       expect(within(button).getByLabelText('Caret Down Icon')).to.exist;
 
       userEvent.click(button);
@@ -114,9 +112,7 @@ describe('PipelineActions', function () {
     it('toggle options action button', function () {
       const button = screen.getByTestId('pipeline-toolbar-options-button');
       expect(button).to.exist;
-      expect(button?.textContent?.toLowerCase().trim()).to.equal(
-        'more options'
-      );
+      expect(button?.textContent?.toLowerCase().trim()).to.equal('options');
       expect(within(button).getByLabelText('Caret Right Icon')).to.exist;
 
       userEvent.click(button);

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import {
   Button,
-  MoreOptionsToggle,
+  OptionsToggle,
   PerformanceSignals,
   SignalPopover,
   css,
@@ -153,7 +153,7 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
         </Button>
       )}
       {enableAggregationBuilderExtraOptions && (
-        <MoreOptionsToggle
+        <OptionsToggle
           isExpanded={!!isOptionsVisible}
           aria-controls="pipeline-options"
           id="pipeline-toolbar-options"

packages/compass-aggregations/src/components/stage-toolbar/option-menu.spec.tsx

@@ -15,7 +15,7 @@ describe('OptionMenu', function () {
         onCollapse={() => {}}
       />
     );
-    expect(screen.getByLabelText('More options')).to.exist;
+    expect(screen.getByLabelText('Options')).to.exist;
   });
   it('opens the menu when clicked', function () {
     render(
@@ -27,7 +27,7 @@ describe('OptionMenu', function () {
         onCollapse={() => {}}
       />
     );
-    screen.getByLabelText('More options').click();
+    screen.getByLabelText('Options').click();
     expect(screen.getByText('Add stage after')).to.exist;
     expect(screen.getByText('Add stage before')).to.exist;
     expect(screen.getByText('Delete stage')).to.exist;
@@ -43,7 +43,7 @@ describe('OptionMenu', function () {
         onCollapse={() => {}}
       />
     );
-    screen.getByLabelText('More options').click();
+    screen.getByLabelText('Options').click();
     expect(onAddStageClick).to.not.have.been.called;
     screen.getByText('Add stage after').click();
     expect(onAddStageClick).to.have.been.calledOnceWith(1);
@@ -59,7 +59,7 @@ describe('OptionMenu', function () {
         onCollapse={() => {}}
       />
     );
-    screen.getByLabelText('More options').click();
+    screen.getByLabelText('Options').click();
     expect(onAddStageClick).to.not.have.been.called;
     screen.getByText('Add stage before').click();
     expect(onAddStageClick).to.have.been.calledOnceWith(0);
@@ -75,7 +75,7 @@ describe('OptionMenu', function () {
         onCollapse={() => {}}
       />
     );
-    screen.getByLabelText('More options').click();
+    screen.getByLabelText('Options').click();
     expect(onDeleteStageClick).to.not.have.been.called;
     screen.getByText('Delete stage').click();
     expect(onDeleteStageClick).to.have.been.calledOnceWith(0);
@@ -91,7 +91,7 @@ describe('OptionMenu', function () {
         onCollapse={() => {}}
       />
     );
-    screen.getByLabelText('More options').click();
+    screen.getByLabelText('Options').click();
     expect(expandPreviewDocsForStageSpy).to.not.have.been.called;
     screen.getByText('Expand documents').click();
     expect(expandPreviewDocsForStageSpy).to.have.been.calledOnceWith(0);
@@ -107,7 +107,7 @@ describe('OptionMenu', function () {
         onCollapse={collapsePreviewDocsForStageSpy}
       />
     );
-    screen.getByLabelText('More options').click();
+    screen.getByLabelText('Options').click();
     expect(collapsePreviewDocsForStageSpy).to.not.have.been.called;
     screen.getByText('Collapse documents').click();
     expect(collapsePreviewDocsForStageSpy).to.have.been.calledOnceWith(0);

packages/compass-aggregations/src/components/stage-toolbar/option-menu.tsx

@@ -50,8 +50,8 @@ export const OptionMenu = ({
             <IconButton
               data-testid="stage-option-menu-button"
               onClick={onClick}
-              aria-label="More options"
-              title="More options"
+              aria-label="Options"
+              title="Options"
             >
               <Icon glyph="Ellipsis" size="small"></Icon>
             </IconButton>

…/components/more-options-toggle.spec.tsx …s/src/components/options-toggle.spec.tsxpackages/compass-components/src/components/more-options-toggle.spec.tsx renamed to packages/compass-components/src/components/options-toggle.spec.tsx packages/compass-components/src/components/more-options-toggle.spec.tsx renamed to packages/compass-components/src/components/options-toggle.spec.tsx

@@ -4,13 +4,13 @@ import sinon from 'sinon';
 
 import { fireEvent, render, screen, cleanup } from '@testing-library/react';
 
-import { MoreOptionsToggle } from './more-options-toggle';
+import { OptionsToggle } from './options-toggle';
 
-function renderMoreOptionsToggle(
-  props?: Partial<React.ComponentProps<typeof MoreOptionsToggle>>
+function renderOptionsToggle(
+  props?: Partial<React.ComponentProps<typeof OptionsToggle>>
 ) {
   return render(
-    <MoreOptionsToggle
+    <OptionsToggle
       isExpanded={false}
       aria-controls="test"
       onToggleOptions={() => {}}
@@ -19,39 +19,39 @@ function renderMoreOptionsToggle(
   );
 }
 
-describe('MoreOptionsToggle Component', function () {
+describe('OptionsToggle Component', function () {
   afterEach(function () {
     cleanup();
   });
 
   it('should call to open the options dropdown on click', function () {
     const onToggleOptionsSpy = sinon.spy();
-    renderMoreOptionsToggle({
+    renderOptionsToggle({
       isExpanded: false,
       onToggleOptions: onToggleOptionsSpy,
     });
 
     expect(onToggleOptionsSpy.calledOnce).to.be.false;
-    const button = screen.getByText('More Options');
+    const button = screen.getByText('Options');
     fireEvent.click(button);
     expect(onToggleOptionsSpy.calledOnce).to.be.true;
   });
 
   it('should call to close the options dropdown on click', function () {
     const onToggleOptionsSpy = sinon.spy();
-    renderMoreOptionsToggle({
+    renderOptionsToggle({
       isExpanded: true,
       onToggleOptions: onToggleOptionsSpy,
     });
 
     expect(onToggleOptionsSpy.calledOnce).to.be.false;
-    const button = screen.getByText('Fewer Options');
+    const button = screen.getByText('Options');
     fireEvent.click(button);
     expect(onToggleOptionsSpy.calledOnce).to.be.true;
   });
 
   it('should the test id', function () {
-    renderMoreOptionsToggle({
+    renderOptionsToggle({
       'data-testid': 'pineapple',
     });
 

…s/src/components/more-options-toggle.tsx …onents/src/components/options-toggle.tsxpackages/compass-components/src/components/more-options-toggle.tsx renamed to packages/compass-components/src/components/options-toggle.tsx packages/compass-components/src/components/more-options-toggle.tsx renamed to packages/compass-components/src/components/options-toggle.tsx

@@ -25,7 +25,7 @@ const optionStyles = css({
   alignItems: 'center',
 });
 
-type MoreOptionsToggleProps = {
+type OptionsToggleProps = {
   label?: (expanded: boolean) => string;
   'aria-label'?: (expanded: boolean) => string;
   'aria-controls': string;
@@ -35,18 +35,16 @@ type MoreOptionsToggleProps = {
   id?: string;
 };
 
-export const MoreOptionsToggle: React.FunctionComponent<
-  MoreOptionsToggleProps
-> = ({
+export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
   'aria-controls': ariaControls,
   isExpanded,
   id,
   'data-testid': dataTestId,
   onToggleOptions,
-  label = (expanded) => {
+  label = () => 'Options',
+  'aria-label': ariaLabel = (expanded) => {
     return expanded ? 'Fewer Options' : 'More Options';
   },
-  'aria-label': ariaLabel,
 }) => {
   const optionsIcon = useMemo(
     () => (isExpanded ? 'CaretDown' : 'CaretRight'),
@@ -60,7 +58,7 @@ export const MoreOptionsToggle: React.FunctionComponent<
       width: `calc(${maxLabelLength}ch + ${spacing[3]}px + ${spacing[2]}px)`,
     };
   }, [label]);
-  const optionsAriaLabel = ariaLabel?.(isExpanded) ?? optionsLabel;
+  const optionsAriaLabel = ariaLabel(isExpanded);
   const focusRingProps = useFocusRing();
   const buttonProps = mergeProps(
     { className: optionsButtonStyles },

packages/compass-components/src/index.ts

@@ -23,7 +23,7 @@ import FileInput, {
   createElectronFileInputBackend,
   FileInputBackendProvider,
 } from './components/file-input';
-import { MoreOptionsToggle } from './components/more-options-toggle';
+import { OptionsToggle } from './components/options-toggle';
 import {
   ErrorSummary,
   WarningSummary,
@@ -103,7 +103,7 @@ export {
   FileInput,
   FileInputBackendProvider,
   IndexIcon,
-  MoreOptionsToggle,
+  OptionsToggle,
   RadioBoxGroup,
   ResizeHandle,
   ResizeDirection,

packages/compass-query-bar/src/components/query-bar.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import {
   Button,
   Icon,
-  MoreOptionsToggle,
+  OptionsToggle,
   css,
   cx,
   spacing,
@@ -114,20 +114,14 @@ const queryAIContainerStyles = css({
 const queryBarDocumentationLink =
   'https://docs.mongodb.com/compass/current/query/filter/';
 
-const QueryMoreOptionsToggle = connect(
+const QueryOptionsToggle = connect(
   (state: RootState) => {
     return {
       isExpanded: state.queryBar.expanded,
-      label() {
-        return 'Options';
-      },
-      'aria-label'(expanded: boolean) {
-        return expanded ? 'Fewer Options' : 'More Options';
-      },
     };
   },
   { onToggleOptions: toggleQueryOptions }
-)(MoreOptionsToggle);
+)(OptionsToggle);
 
 type QueryBarProps = {
   buttonLabel?: string;
@@ -314,7 +308,7 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
 
         {queryOptionsLayout && queryOptionsLayout.length > 0 && (
           <div className={moreOptionsContainerStyles}>
-            <QueryMoreOptionsToggle
+            <QueryOptionsToggle
               aria-controls="additional-query-options-container"
               data-testid="query-bar-options-toggle"
             />