chore(compass-components): move options dropdown from compass-aggregations to compass-components (#3106)

Author: Anemy

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

@@ -2,11 +2,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import {
   Button,
+  MoreOptionsToggle,
   css,
   spacing,
-  Link,
-  Icon,
-  uiColors,
 } from '@mongodb-js/compass-components';
 import type { RootState } from '../../../modules';
 import {
@@ -23,22 +21,6 @@ const containerStyles = css({
   alignItems: 'center',
 });
 
-const optionsButtonStyles = css({
-  backgroundColor: 'transparent',
-  border: 'none',
-  display: 'inline',
-  height: spacing[4] + spacing[1],
-  ':focus': {
-    outline: `${spacing[1]}px auto ${uiColors.focus}`,
-  },
-});
-
-const optionStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  minWidth: '100px',
-});
-
 type PipelineActionsProps = {
   showRunButton?: boolean;
   isRunButtonDisabled?: boolean;
@@ -74,13 +56,11 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
   onExportAggregationResults,
   onExplainAggregation,
 }) => {
-  const optionsIcon = isOptionsVisible ? 'CaretDown' : 'CaretRight';
   const showExportButton =
     process?.env?.COMPASS_ENABLE_AGGREGATION_EXPORT === 'true' &&
     _showExportButton;
   const showExplainButton =
     process?.env?.COMPASS_ENABLE_AGGREGATION_EXPLAIN === 'true';
-  const optionsLabel = isOptionsVisible ? 'Less Options' : 'More Options';
   return (
     <div className={containerStyles}>
       {showUpdateViewButton && (
@@ -131,22 +111,13 @@ export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
           Run
         </Button>
       )}
-      <Link
-        aria-label={optionsLabel}
-        aria-expanded={isOptionsVisible}
+      <MoreOptionsToggle
+        isExpanded={!!isOptionsVisible}
         aria-controls="pipeline-options"
         id="pipeline-toolbar-options"
-        as="button"
-        className={optionsButtonStyles}
         data-testid="pipeline-toolbar-options-button"
-        hideExternalIcon={true}
-        onClick={onToggleOptions}
-      >
-        <div className={optionStyles}>
-          {optionsLabel}
-          <Icon glyph={optionsIcon} />
-        </div>
-      </Link>
+        onToggleOptions={onToggleOptions}
+      />
     </div>
   );
 };

packages/compass-components/src/components/more-options-toggle.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+
+import { fireEvent, render, screen, cleanup } from '@testing-library/react';
+
+import { MoreOptionsToggle } from './more-options-toggle';
+
+function renderMoreOptionsToggle(
+  props?: Partial<React.ComponentProps<typeof MoreOptionsToggle>>
+) {
+  return render(
+    <MoreOptionsToggle
+      isExpanded={false}
+      aria-controls="test"
+      onToggleOptions={() => {}}
+      {...props}
+    />
+  );
+}
+
+describe('MoreOptionsToggle Component', function () {
+  afterEach(function () {
+    cleanup();
+  });
+
+  it('should call to open the options dropdown on click', function () {
+    const onToggleOptionsSpy = sinon.spy();
+    renderMoreOptionsToggle({
+      isExpanded: false,
+      onToggleOptions: onToggleOptionsSpy,
+    });
+
+    expect(onToggleOptionsSpy.calledOnce).to.be.false;
+    const button = screen.getByText('More 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({
+      isExpanded: true,
+      onToggleOptions: onToggleOptionsSpy,
+    });
+
+    expect(onToggleOptionsSpy.calledOnce).to.be.false;
+    const button = screen.getByText('Less Options');
+    fireEvent.click(button);
+    expect(onToggleOptionsSpy.calledOnce).to.be.true;
+  });
+
+  it('should the test id', function () {
+    renderMoreOptionsToggle({
+      'data-testid': 'pineapple',
+    });
+
+    expect(screen.getByTestId('pineapple')).to.be.visible;
+  });
+});

packages/compass-components/src/components/more-options-toggle.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+import { useFocusRing } from '../hooks/use-focus-ring';
+import { Link, Icon } from './leafygreen';
+import { mergeProps } from '../utils/merge-props';
+
+const optionContainerStyles = css({
+  textAlign: 'center',
+  minWidth: spacing[4] * 5,
+});
+
+const optionsButtonStyles = css({
+  // Reset button styles.
+  backgroundColor: 'transparent',
+  border: 'none',
+
+  padding: `${spacing[1]}px ${spacing[2]}px`,
+});
+
+const optionStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+type MoreOptionsToggleProps = {
+  'aria-controls': string;
+  'data-testid'?: string;
+  isExpanded: boolean;
+  onToggleOptions: () => void;
+  id?: string;
+};
+
+export const MoreOptionsToggle: React.FunctionComponent<MoreOptionsToggleProps> =
+  ({
+    'aria-controls': ariaControls,
+    isExpanded,
+    id,
+    'data-testid': dataTestId,
+    onToggleOptions,
+  }) => {
+    const optionsIcon = useMemo(
+      () => (isExpanded ? 'CaretDown' : 'CaretRight'),
+      [isExpanded]
+    );
+    const optionsLabel = useMemo(
+      () => (isExpanded ? 'Less Options' : 'More Options'),
+      [isExpanded]
+    );
+    const focusRingProps = useFocusRing();
+    const buttonProps = mergeProps(
+      {
+        className: optionsButtonStyles,
+      },
+      focusRingProps
+      // We cast here so that the `as` prop of link can be properly typed.
+    ) as Partial<React.ComponentType<React.ComponentProps<typeof Link>>>;
+
+    return (
+      <div className={optionContainerStyles}>
+        <Link
+          aria-label={optionsLabel}
+          aria-expanded={isExpanded}
+          aria-controls={ariaControls}
+          as="button"
+          hideExternalIcon={true}
+          data-testid={dataTestId}
+          id={id}
+          onClick={onToggleOptions}
+          {...buttonProps}
+        >
+          <div className={optionStyles}>
+            {optionsLabel}
+            <Icon glyph={optionsIcon} />
+          </div>
+        </Link>
+      </div>
+    );
+  };

packages/compass-components/src/index.ts

@@ -19,6 +19,7 @@ import FileInput from './components/file-input';
 import { Modal } from './components/modal';
 import { ModalTitle } from './components/modal-title';
 import { Toolbar } from './components/toolbar';
+import { MoreOptionsToggle } from './components/more-options-toggle';
 import {
   ErrorSummary,
   WarningSummary,
@@ -67,6 +68,7 @@ export {
   FileInput,
   Modal,
   ModalTitle,
+  MoreOptionsToggle,
   RadioBoxGroup,
   SpinLoader,
   ResizeHandle,