refactor: [M3-7448] - Migrate ActionMenu story to v7 stories (#9927)

* remove index file and update imports

* stories.tsx file and added tests

* Added changeset: ActionMenu V7 story migration

* Update ActionMenu.stories.tsx

* fix typo

packages/manager/.changeset/pr-9927-tech-stories-1700672701188.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+ActionMenu V7 story migration ([#9927](https://github.com/linode/manager/pull/9927))

packages/manager/src/components/ActionMenu/ActionMenu.stories.tsx

@@ -0,0 +1,48 @@
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+
+import { ActionMenu } from './ActionMenu';
+
+import type { Action, ActionMenuProps } from './ActionMenu';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const standardActions = [
+  {
+    onClick: action('First Action clicked'),
+    title: 'First Action',
+  },
+  {
+    onClick: action('Second Action clicked'),
+    title: 'Second Action',
+  },
+] as Action[];
+
+const standardAndDisabledActions = [
+  ...standardActions,
+  {
+    disabled: true,
+    onClick: action('Disabled Action clicked'),
+    title: 'Disabled Action',
+    tooltip: 'An explanation as to why this item is disabled',
+  },
+];
+
+export const Default: StoryObj<ActionMenuProps> = {
+  render: (args) => <ActionMenu {...args} />,
+};
+
+const meta: Meta<ActionMenuProps> = {
+  argTypes: {
+    actionsList: {
+      options: {
+        'disabled actions': standardAndDisabledActions,
+        'standard actions': standardActions,
+      },
+    },
+  },
+  args: { actionsList: standardActions, ariaLabel: 'action menu' },
+  component: ActionMenu,
+  title: 'Components/Action Menu',
+};
+
+export default meta;

packages/manager/src/components/ActionMenu/ActionMenu.test.tsx

@@ -1,20 +1,65 @@
-import { mount } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
 import { ActionMenu } from './ActionMenu';
 
-describe('ActionMenu', () => {
-  const action = { onClick: () => undefined, title: 'whatever' };
+afterEach(() => {
+  vi.clearAllMocks();
+});
 
-  const manyActions = [action, action, action];
+describe('ActionMenu', () => {
+  const action1 = { onClick: vi.fn(), title: 'whatever' };
+  const action2 = { onClick: vi.fn(), title: 'whatever2' };
+  const action3 = {
+    disabled: true,
+    onClick: vi.fn(),
+    title: 'whatever3',
+    tooltip: 'helper text for tooltip',
+  };
 
-  it.skip('should render a menu when provided many or one action(s).', () => {
-    const result = mount(
-      <ActionMenu actionsList={manyActions} ariaLabel="label" />
+  const standardActions = [action1, action2];
+  const standardAndDisabledActions = [...standardActions, action3];
+  it('should include the correct actions', () => {
+    const { getByLabelText, getByText } = renderWithTheme(
+      <ActionMenu actionsList={standardActions} ariaLabel="action menu" />
     );
-    expect(result.find('WithStyles(ActionMenu)')).toHaveLength(1);
-
-    result.find('IconButton').simulate('click');
-    expect(result.find('WithStyles(MenuItem)')).toHaveLength(4);
+    const actionMenu = getByLabelText('action menu');
+    fireEvent.click(actionMenu);
+    const a1 = getByText('whatever');
+    expect(a1).toBeVisible();
+    const a2 = getByText('whatever2');
+    expect(a2).toBeVisible();
+  });
+  it('should call the associated onClick function when clicking on an enabled action', () => {
+    const { getByLabelText, getByText } = renderWithTheme(
+      <ActionMenu actionsList={standardActions} ariaLabel="action menu" />
+    );
+    const actionMenu = getByLabelText('action menu');
+    fireEvent.click(actionMenu);
+    const a1 = getByText('whatever');
+    fireEvent.click(a1);
+    expect(action1.onClick).toHaveBeenCalled();
+    const a2 = getByText('whatever2');
+    fireEvent.click(a2);
+    expect(action2.onClick).toHaveBeenCalled();
+  });
+  it('should have a tooltip if provided and not call the associated onClick function when clicking on a disabled action', () => {
+    const { getByLabelText, getByText } = renderWithTheme(
+      <ActionMenu
+        actionsList={standardAndDisabledActions}
+        ariaLabel="action menu"
+      />
+    );
+    const actionMenu = getByLabelText('action menu');
+    fireEvent.click(actionMenu);
+    const a3 = getByText('whatever3');
+    fireEvent.click(a3);
+    expect(action3.onClick).not.toHaveBeenCalled();
+    const tooltip = getByLabelText('helper text for tooltip');
+    expect(tooltip).toBeInTheDocument();
+    fireEvent.click(tooltip);
+    expect(tooltip).toBeVisible();
   });
 });

packages/manager/src/components/ActionMenu/ActionMenu.tsx

@@ -14,23 +14,27 @@ export interface Action {
   tooltip?: string;
 }
 
-export interface Props {
+export interface ActionMenuProps {
   /**
    * A list of actions to show in the Menu
    */
   actionsList: Action[];
   /**
-   * Gives the Menu Button an accessable name
+   * Gives the Menu Button an accessible name
    */
   ariaLabel: string;
-  /*
-   * A function that is called when the Menu is opened.
-   * Useful for analytics.
+  /**
+   * A function that is called when the Menu is opened. Useful for analytics.
    */
   onOpen?: () => void;
 }
 
-export const ActionMenu = React.memo((props: Props) => {
+/**
+ * ## Usage
+ *
+ * No more than 8 items should be displayed within an action menu.
+ */
+export const ActionMenu = React.memo((props: ActionMenuProps) => {
   const { actionsList, ariaLabel, onOpen } = props;
 
   const menuId = convertToKebabCase(ariaLabel);

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx

@@ -1,13 +1,13 @@
 import { makeDefaultPaymentMethod } from '@linode/api-v4/lib';
 import { PaymentMethod } from '@linode/api-v4/lib/account/types';
-import { Box } from 'src/components/Box';
 import { useTheme } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
 
-import { ActionMenu, Action } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+import { Box } from 'src/components/Box';
 import { Chip } from 'src/components/Chip';
 import { Paper } from 'src/components/Paper';
 import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';

packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx

@@ -1,10 +1,9 @@
-import { Theme } from '@mui/material/styles';
+import { Theme, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { ActionMenu, Action } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 
 const useStyles = makeStyles()(() => ({

packages/manager/src/features/Domains/DomainActionMenu.tsx

@@ -1,12 +1,11 @@
 import { Domain } from '@linode/api-v4/lib/domains';
-import { Theme } from '@mui/material/styles';
+import { Theme, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material';
 import { splitAt } from 'ramda';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { ActionMenu, Action } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 
 const useStyles = makeStyles()(() => ({

packages/manager/src/features/Domains/DomainRecordActionMenu.tsx

@@ -2,7 +2,7 @@ import { Domain } from '@linode/api-v4/lib/domains';
 import { has } from 'ramda';
 import * as React from 'react';
 
-import { ActionMenu, Action } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 
 interface EditPayload {
   id?: number;

packages/manager/src/features/EntityTransfers/TransfersPendingActionMenu.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Action } from 'src/components/ActionMenu';
+import { Action } from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 
 interface Props {

packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleActionMenu.tsx

@@ -1,13 +1,12 @@
-import { Theme } from '@mui/material/styles';
+import { Theme, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material';
 import * as React from 'react';
 
 import {
   Action,
   ActionMenu,
-  Props as ActionMenuProps,
-} from 'src/components/ActionMenu';
+  ActionMenuProps,
+} from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 
 export interface FirewallRuleActionMenuProps extends Partial<ActionMenuProps> {

packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx

@@ -1,10 +1,9 @@
 import { FirewallStatus } from '@linode/api-v4/lib/firewalls';
-import { Theme } from '@mui/material/styles';
+import { Theme, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material';
 import * as React from 'react';
 
-import { Action, ActionMenu } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { useGrants, useProfile } from 'src/queries/profile';
 

packages/manager/src/features/Images/ImagesActionMenu.tsx

@@ -2,7 +2,7 @@ import { Event } from '@linode/api-v4/lib/account';
 import { ImageStatus } from '@linode/api-v4/lib/images/types';
 import * as React from 'react';
 
-import { Action, ActionMenu } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 
 export interface Handlers {
   onCancelFailed?: (imageID: string) => void;

packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx

@@ -1,11 +1,10 @@
 import { getKubeConfig } from '@linode/api-v4/lib/kubernetes';
-import { Theme } from '@mui/material/styles';
+import { Theme, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { ActionMenu, Action } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { Hidden } from 'src/components/Hidden';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { reportException } from 'src/exceptionReporting';

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeActionMenu.tsx

@@ -3,7 +3,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { makeStyles, useTheme } from '@mui/styles';
 import * as React from 'react';
 
-import { ActionMenu } from 'src/components/ActionMenu';
+import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 
 interface Props {

packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackupActionMenu.tsx

@@ -1,7 +1,7 @@
 import { LinodeBackup } from '@linode/api-v4/lib/linodes';
 import * as React from 'react';
 
-import { ActionMenu, Action } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 
 interface Props {
   backup: LinodeBackup;

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx

@@ -1,12 +1,11 @@
 import { Config } from '@linode/api-v4/lib/linodes';
-import { Theme } from '@mui/material/styles';
+import { Theme, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useTheme } from '@mui/material';
 import { splitAt } from 'ramda';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ActionMenu, Action } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { Box } from 'src/components/Box';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewallsActionMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Action } from 'src/components/ActionMenu';
+import { Action } from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { noPermissionTooltipText } from 'src/features/Firewalls/FirewallLanding/FirewallActionMenu';
 import { checkIfUserCanModifyFirewall } from 'src/features/Firewalls/shared';

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx

@@ -1,11 +1,10 @@
 import { IPAddress, IPRange } from '@linode/api-v4/lib/networking';
-import { useTheme } from '@mui/material';
-import { Theme } from '@mui/material/styles';
+import { Theme, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 
-import { Action, ActionMenu } from 'src/components/ActionMenu';
+import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { Box } from 'src/components/Box';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { PUBLIC_IPS_UNASSIGNED_TOOLTIP_TEXT } from 'src/features/Linodes/PublicIpsUnassignedTooltip';