chore(compass-components): refactor ItemActionControls (#6552)

* Refactor "expandedPresentation" into "expandedAs"

* Moved item-action-controls into a sub-directory

* Split to multiple files

* Update action-glyph inline docs

Author: kraenhansen

packages/compass-components/src/components/actions/action-glyph.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Icon } from '../leafygreen';
+import type { ItemActionButtonSize } from './constants';
+
+// As we are using this component to render icon in MenuItem,
+// and it does cloneElement on glyph, here we are accepting all the
+// props that are passed during clone process.
+type IconProps = React.ComponentProps<typeof Icon>;
+type ActionGlyphProps = Omit<IconProps, 'size' | 'glyph'> & {
+  glyph?: React.ReactChild;
+  size?: ItemActionButtonSize;
+};
+
+export const ActionGlyph = ({ glyph, size, ...props }: ActionGlyphProps) => {
+  if (typeof glyph === 'string') {
+    return <Icon size={size} glyph={glyph} {...props} />;
+  }
+
+  if (React.isValidElement(glyph)) {
+    return glyph;
+  }
+
+  return null;
+};

packages/compass-components/src/components/actions/constants.tsx

@@ -0,0 +1,8 @@
+export const ItemActionButtonSize = {
+  XSmall: 'xsmall',
+  Small: 'small',
+  Default: 'default',
+} as const;
+
+export type ItemActionButtonSize =
+  typeof ItemActionButtonSize[keyof typeof ItemActionButtonSize];

packages/compass-components/src/components/actions/dropdown-menu-button.tsx

@@ -0,0 +1,127 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { css } from '@leafygreen-ui/emotion';
+import type { ButtonProps } from '@leafygreen-ui/button';
+
+import { Button, Icon, Menu, MenuItem, MenuSeparator } from '../leafygreen';
+import { WorkspaceContainer } from '../workspace-container';
+
+import { ItemActionButtonSize } from './constants';
+import { actionTestId } from './utils';
+import { ActionGlyph } from './action-glyph';
+import { isSeparatorMenuAction, type MenuAction } from './item-action-menu';
+
+const hiddenOnNarrowStyles = css({
+  [`@container ${WorkspaceContainer.toolbarContainerQueryName} (width < 900px)`]:
+    {
+      display: 'none',
+    },
+});
+
+export type DropdownMenuButtonProps<Action extends string> = {
+  actions: MenuAction<Action>[];
+  onAction(actionName: Action): void;
+  usePortal?: boolean;
+  iconSize?: ItemActionButtonSize;
+  isVisible?: boolean;
+  activeAction?: Action;
+  'data-testid'?: string;
+  buttonText: string;
+  buttonProps: ButtonProps;
+  hideOnNarrow?: boolean;
+};
+
+export function DropdownMenuButton<Action extends string>({
+  isVisible = true,
+  actions,
+  onAction,
+  usePortal,
+  activeAction,
+  buttonText,
+  buttonProps,
+  iconSize = ItemActionButtonSize.Default,
+  'data-testid': dataTestId,
+  hideOnNarrow = true,
+}: DropdownMenuButtonProps<Action>) {
+  // this ref is used by the Menu component to calculate the height and position
+  // of the menu, and by us to give back the focus to the trigger when the menu
+  // is closed (https://jira.mongodb.org/browse/PD-1674).
+  const menuTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const onClick = useCallback(
+    (evt) => {
+      evt.stopPropagation();
+      if (evt.currentTarget.dataset.menuitem) {
+        setIsMenuOpen(false);
+        // Workaround for https://jira.mongodb.org/browse/PD-1674
+        menuTriggerRef.current?.focus();
+      }
+      onAction(evt.currentTarget.dataset.action);
+    },
+    [onAction]
+  );
+
+  const shouldRender = isMenuOpen || (isVisible && actions.length > 0);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <Menu
+      open={isMenuOpen}
+      setOpen={setIsMenuOpen}
+      justify="start"
+      refEl={menuTriggerRef}
+      usePortal={usePortal}
+      data-testid={dataTestId}
+      trigger={({
+        onClick,
+        children,
+      }: {
+        onClick: React.MouseEventHandler<HTMLButtonElement>;
+        children: React.ReactNode;
+      }) => {
+        return (
+          <Button
+            {...buttonProps}
+            ref={menuTriggerRef}
+            data-testid={dataTestId ? `${dataTestId}-show-actions` : undefined}
+            onClick={(evt) => {
+              evt.stopPropagation();
+              onClick && onClick(evt);
+            }}
+            rightGlyph={<Icon glyph={'CaretDown'} />}
+            title={buttonText}
+          >
+            <span className={hideOnNarrow ? hiddenOnNarrowStyles : undefined}>
+              {buttonText}
+            </span>
+            {children}
+          </Button>
+        );
+      }}
+    >
+      {actions.map((menuAction, idx) => {
+        if (isSeparatorMenuAction(menuAction)) {
+          return <MenuSeparator key={`separator-${idx}`} />;
+        }
+
+        const { action, label, icon } = menuAction;
+        return (
+          <MenuItem
+            active={activeAction === action}
+            key={action}
+            data-testid={actionTestId<Action>(dataTestId, action)}
+            data-action={action}
+            data-menuitem={true}
+            glyph={<ActionGlyph glyph={icon} size={iconSize} />}
+            onClick={onClick}
+          >
+            {label}
+          </MenuItem>
+        );
+      })}
+    </Menu>
+  );
+}

packages/compass-components/src/components/actions/item-action-button.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+import { ItemActionButtonSize } from './constants';
+import type { ItemComponentProps } from './types';
+import { SmallIconButton } from './small-icon-button';
+
+// TODO: Move to a parent component - or a flex gap
+const buttonStyle = css({
+  '&:not(:first-child)': {
+    marginLeft: spacing[100],
+  },
+});
+
+export function ItemActionButton<Action extends string>({
+  action,
+  icon = <></>,
+  label,
+  tooltip,
+  iconSize = ItemActionButtonSize.Default,
+  onClick,
+  iconClassName,
+  className,
+  iconStyle,
+  isDisabled,
+  'data-testid': dataTestId,
+}: ItemComponentProps<Action>) {
+  return (
+    <SmallIconButton
+      key={action}
+      glyph={icon}
+      label={label}
+      title={!tooltip ? label : undefined}
+      size={iconSize}
+      data-action={action}
+      data-testid={dataTestId}
+      onClick={onClick}
+      className={cx(buttonStyle, iconClassName, className)}
+      style={iconStyle}
+      disabled={isDisabled}
+    />
+  );
+}

packages/compass-components/src/components/item-action-controls.spec.tsx renamed to packages/compass-components/src/components/actions/item-action-controls.spec.tsx

@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react';
+import { spacing } from '@leafygreen-ui/tokens';
+import { css, cx } from '@leafygreen-ui/emotion';
+
+import { ItemActionMenu } from './item-action-menu';
+import { ItemActionButtonSize } from './constants';
+import type { ItemAction, ItemSeparator } from './types';
+import { ItemActionGroup } from './item-action-group';
+
+const actionControlsStyle = css({
+  flex: 'none',
+  marginLeft: 'auto',
+  alignItems: 'center',
+  display: 'flex',
+});
+
+// Action buttons are rendered 4px apart from each other. With this we keep the
+// same spacing also when action buttons are rendered alongside action menu
+// (happens when collapseAfter prop is specified)
+const actionMenuWithActionControlsStyles = css({
+  marginLeft: spacing[100],
+});
+
+export type ItemActionControlsProps<Action extends string> = {
+  isVisible?: boolean;
+  actions: (ItemAction<Action> | ItemSeparator)[];
+  onAction(actionName: Action): void;
+  className?: string;
+  menuClassName?: string;
+  iconSize?: ItemActionButtonSize;
+  iconClassName?: string;
+  iconStyle?: React.CSSProperties;
+  // The number of actions to show before collapsing other actions into a menu
+  collapseAfter?: number;
+  // When using `collapseAfter`, this option is not used.
+  collapseToMenuThreshold?: number;
+  usePortal?: boolean;
+  'data-testid'?: string;
+};
+
+export function ItemActionControls<Action extends string>({
+  isVisible = true,
+  actions,
+  onAction,
+  className,
+  menuClassName,
+  iconClassName,
+  iconStyle,
+  iconSize = ItemActionButtonSize.Default,
+  usePortal,
+  collapseAfter = 0,
+  collapseToMenuThreshold = 2,
+  'data-testid': dataTestId,
+}: ItemActionControlsProps<Action>) {
+  const sharedProps = useMemo(
+    () => ({
+      isVisible,
+      onAction,
+      className: cx('item-action-controls', className),
+      iconClassName,
+      iconStyle,
+      iconSize,
+      'data-testid': dataTestId,
+    }),
+    [
+      isVisible,
+      onAction,
+      className,
+      iconClassName,
+      iconStyle,
+      iconSize,
+      dataTestId,
+    ]
+  );
+  const sharedMenuProps = useMemo(
+    () => ({
+      menuClassName,
+      usePortal,
+    }),
+    [menuClassName, usePortal]
+  );
+  if (actions.length === 0) {
+    return null;
+  }
+
+  // When user wants to show a few actions and collapse the rest into a menu
+  if (collapseAfter > 0) {
+    const visibleActions = actions.slice(0, collapseAfter);
+    const collapsedActions = actions.slice(collapseAfter);
+    return (
+      <div className={actionControlsStyle}>
+        <ItemActionGroup
+          actions={visibleActions}
+          {...sharedProps}
+        ></ItemActionGroup>
+        <ItemActionMenu
+          actions={collapsedActions}
+          {...sharedProps}
+          {...sharedMenuProps}
+          className={cx(
+            actionMenuWithActionControlsStyles,
+            sharedProps.className
+          )}
+        ></ItemActionMenu>
+      </div>
+    );
+  }
+
+  const shouldShowMenu = actions.length >= collapseToMenuThreshold;
+
+  if (shouldShowMenu) {
+    return (
+      <ItemActionMenu
+        actions={actions}
+        {...sharedProps}
+        {...sharedMenuProps}
+      ></ItemActionMenu>
+    );
+  }
+
+  return <ItemActionGroup actions={actions} {...sharedProps}></ItemActionGroup>;
+}