chore(aggregations): Refactor aggregations stage toolbar (#6572)

* Re-export GlyphName instead of IconGlyph

* Use React composition instead of arrays of data

Author: kraenhansen

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import {
+  css,
+  Icon,
+  MenuItem,
+  palette,
+  spacing,
+  type GlyphName,
+} from '@mongodb-js/compass-components';
+
+const styles = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing[2],
+});
+
+type OptionMenuItemProps = {
+  label: string;
+  icon: GlyphName;
+  onClick: () => void;
+  setMenuOpen: (open: boolean) => void;
+};
+
+export function OptionMenuItem({
+  label,
+  onClick,
+  setMenuOpen,
+  icon,
+}: OptionMenuItemProps) {
+  return (
+    <MenuItem
+      data-text={label}
+      onClick={() => {
+        setMenuOpen(false);
+        onClick();
+      }}
+    >
+      <div className={styles}>
+        <Icon color={palette.gray.dark2} glyph={icon} size="small" />
+        {label}
+      </div>
+    </MenuItem>
+  );
+}

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

@@ -1,14 +1,6 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { connect } from 'react-redux';
-import {
-  Menu,
-  MenuItem,
-  css,
-  IconButton,
-  Icon,
-  palette,
-  spacing,
-} from '@mongodb-js/compass-components';
+import { Menu, IconButton, Icon } from '@mongodb-js/compass-components';
 import {
   addStage,
   removeStage,
@@ -17,12 +9,7 @@ import {
 } from '../../modules/pipeline-builder/stage-editor';
 import type { StoreStage } from '../../modules/pipeline-builder/stage-editor';
 import type { RootState } from '../../modules';
-
-const menuItemStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  gap: spacing[2],
-});
+import { OptionMenuItem } from './option-menu-item';
 
 export const OptionMenu = ({
   index,
@@ -39,51 +26,6 @@ export const OptionMenu = ({
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const menuItems = useMemo(() => {
-    return [
-      {
-        label: 'Add stage after',
-        onClick: () => {
-          onAddStageClick(index);
-          setMenuOpen(false);
-        },
-        icon: 'PlusWithCircle',
-      },
-      {
-        label: 'Add stage before',
-        onClick: () => {
-          onAddStageClick(index - 1);
-          setMenuOpen(false);
-        },
-        icon: 'PlusWithCircle',
-      },
-      {
-        label: 'Delete stage',
-        onClick: () => {
-          onDeleteStageClick(index);
-          setMenuOpen(false);
-        },
-        icon: 'Trash',
-      },
-      {
-        label: 'Expand documents',
-        onClick: () => {
-          onExpand(index);
-          setMenuOpen(false);
-        },
-        icon: 'ChevronDown',
-      },
-      {
-        label: 'Collapse documents',
-        onClick: () => {
-          onCollapse(index);
-          setMenuOpen(false);
-        },
-        icon: 'ChevronUp',
-      },
-    ];
-  }, [index, onAddStageClick, onDeleteStageClick, onExpand, onCollapse]);
-
   return (
     <Menu
       open={menuOpen}
@@ -105,18 +47,36 @@ export const OptionMenu = ({
         );
       }}
     >
-      {menuItems.map((item) => (
-        <MenuItem
-          key={item.label}
-          data-text={item.label}
-          onClick={item.onClick}
-        >
-          <div className={menuItemStyles}>
-            <Icon color={palette.gray.dark2} glyph={item.icon} size="small" />
-            {item.label}
-          </div>
-        </MenuItem>
-      ))}
+      <OptionMenuItem
+        label="Add stage after"
+        icon="PlusWithCircle"
+        onClick={() => onAddStageClick(index)}
+        setMenuOpen={setMenuOpen}
+      />
+      <OptionMenuItem
+        label="Add stage before"
+        icon="PlusWithCircle"
+        onClick={() => onAddStageClick(index - 1)}
+        setMenuOpen={setMenuOpen}
+      />
+      <OptionMenuItem
+        label="Delete stage"
+        icon="Trash"
+        onClick={() => onDeleteStageClick(index)}
+        setMenuOpen={setMenuOpen}
+      />
+      <OptionMenuItem
+        label="Expand documents"
+        icon="ChevronDown"
+        onClick={() => onExpand(index)}
+        setMenuOpen={setMenuOpen}
+      />
+      <OptionMenuItem
+        label="Collapse documents"
+        icon="ChevronUp"
+        onClick={() => onCollapse(index)}
+        setMenuOpen={setMenuOpen}
+      />
     </Menu>
   );
 };

packages/compass-components/src/components/workspace-tabs/tab.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
-import type { glyphs } from '@leafygreen-ui/icon';
+import type { GlyphName } from '@leafygreen-ui/icon';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS as cssDndKit } from '@dnd-kit/utilities';
 import { useDarkMode } from '../../hooks/use-theme';
@@ -180,8 +180,6 @@ const closeButtonStyles = css({
   marginRight: spacing[100],
 });
 
-type IconGlyph = Extract<keyof typeof glyphs, string>;
-
 type TabProps = {
   connectionName?: string;
   type: string;
@@ -190,7 +188,7 @@ type TabProps = {
   isDragging: boolean;
   onSelect: () => void;
   onClose: () => void;
-  iconGlyph: IconGlyph | 'Logo' | 'Server';
+  iconGlyph: GlyphName | 'Logo' | 'Server';
   tabContentId: string;
   tooltip?: [string, string][];
   tabTheme?: Partial<TabTheme>;

packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx

@@ -8,7 +8,7 @@ import React, {
 import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
-import type { glyphs } from '@leafygreen-ui/icon';
+import type { GlyphName } from '@leafygreen-ui/icon';
 import { rgba } from 'polished';
 
 import {
@@ -174,7 +174,7 @@ export type TabProps = {
   title: string;
   tooltip?: [string, string][];
   connectionId?: string;
-  iconGlyph: Extract<keyof typeof glyphs, string> | 'Logo' | 'Server';
+  iconGlyph: GlyphName | 'Logo' | 'Server';
 } & Omit<React.HTMLProps<HTMLDivElement>, 'id' | 'title'>;
 
 export function useRovingTabIndex<T extends HTMLElement = HTMLElement>({

packages/compass-components/src/index.ts

@@ -143,14 +143,13 @@ export {
   FadeInPlaceholder,
 } from './components/content-with-fallback';
 export { InlineDefinition } from './components/inline-definition';
-import type { glyphs } from '@leafygreen-ui/icon';
+export type { GlyphName } from '@leafygreen-ui/icon';
 export { createGlyphComponent, createIconComponent } from '@leafygreen-ui/icon';
 export {
   SignalPopover,
   SignalHooksProvider,
 } from './components/signal-popover';
 export type { Signal } from './components/signal-popover';
-export type IconGlyph = Extract<keyof typeof glyphs, string>;
 
 export { EmptyContent } from './components/empty-content';
 export { ErrorBoundary } from './components/error-boundary';

packages/compass-editor/src/action-button.tsx

@@ -1,11 +1,11 @@
 import { cx } from '@mongodb-js/compass-components';
 import { css } from '@mongodb-js/compass-components';
-import { Button, Icon, type IconGlyph } from '@mongodb-js/compass-components';
+import { Button, Icon, type GlyphName } from '@mongodb-js/compass-components';
 import React, { useCallback, useEffect, useState } from 'react';
 import type { EditorView } from '@codemirror/view';
 
 export type Action = {
-  icon: IconGlyph;
+  icon: GlyphName;
   label: string;
   action: (editor: EditorView) => boolean | void;
 };

packages/databases-collections-list/src/namespace-card.tsx

@@ -20,7 +20,7 @@ import {
 } from '@mongodb-js/compass-components';
 import type {
   BadgeVariant,
-  IconGlyph,
+  GlyphName,
   ItemAction,
   SignalPopover,
 } from '@mongodb-js/compass-components';
@@ -107,7 +107,7 @@ export type BadgeProp = {
   id: string;
   name: string;
   variant?: BadgeVariant;
-  icon?: IconGlyph;
+  icon?: GlyphName;
   hint?: React.ReactNode;
 };