From 1910e8f1f84eea646cc2c4422dc215c2c3a12d8f Mon Sep 17 00:00:00 2001 From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com> Date: Mon, 27 Nov 2023 13:34:31 -0500 Subject: [PATCH] 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 --- .../pr-9927-tech-stories-1700672701188.md | 5 ++ .../ActionMenu/ActionMenu.stories.mdx | 60 ----------------- .../ActionMenu/ActionMenu.stories.tsx | 48 +++++++++++++ .../components/ActionMenu/ActionMenu.test.tsx | 67 ++++++++++++++++--- .../src/components/ActionMenu/ActionMenu.tsx | 16 +++-- .../src/components/ActionMenu/index.ts | 2 - .../PaymentMethodRow/PaymentMethodRow.tsx | 4 +- .../DatabaseLanding/DatabaseActionMenu.tsx | 5 +- .../src/features/Domains/DomainActionMenu.tsx | 5 +- .../Domains/DomainRecordActionMenu.tsx | 2 +- .../TransfersPendingActionMenu.tsx | 2 +- .../Rules/FirewallRuleActionMenu.tsx | 7 +- .../FirewallLanding/FirewallActionMenu.tsx | 5 +- .../src/features/Images/ImagesActionMenu.tsx | 2 +- .../ClusterList/ClusterActionMenu.tsx | 5 +- .../NodePoolsDisplay/NodeActionMenu.tsx | 2 +- .../LinodeBackup/LinodeBackupActionMenu.tsx | 2 +- .../LinodeConfigs/LinodeConfigActionMenu.tsx | 5 +- .../LinodeFirewallsActionMenu.tsx | 2 +- .../LinodeNetworkingActionMenu.tsx | 5 +- .../LinodeStorage/LinodeDiskActionMenu.tsx | 2 +- .../LinodesLanding/LinodeActionMenu.tsx | 5 +- .../Certificates/Certificates.tsx | 4 +- .../LoadBalancerDetail/Routes/RoutesTable.tsx | 2 +- .../LoadBalancerDetail/RuleRow.tsx | 2 +- .../ServiceTargets/ServiceTargetRow.tsx | 2 +- .../LoadBalancerActionsMenu.tsx | 2 +- .../LongviewLanding/LongviewActionMenu.tsx | 2 +- .../Managed/Contacts/ContactsActionMenu.tsx | 2 +- .../Credentials/CredentialActionMenu.tsx | 5 +- .../Managed/Monitors/MonitorActionMenu.tsx | 2 +- .../Managed/SSHAccess/SSHAccessActionMenu.tsx | 2 +- .../NodeBalancerActionMenu.tsx | 5 +- .../AccessKeyLanding/AccessKeyMenu.tsx | 2 +- .../BucketDetail/FolderActionMenu.tsx | 5 +- .../BucketDetail/ObjectActionMenu.tsx | 5 +- .../BucketLanding/BucketActionMenu.tsx | 2 +- .../Profile/APITokens/APITokenMenu.tsx | 5 +- .../OAuthClients/OAuthClientActionMenu.tsx | 5 +- .../StackScriptActionMenu.tsx | 5 +- .../src/features/Users/UsersActionMenu.tsx | 5 +- .../VPCs/VPCDetail/SubnetActionMenu.tsx | 3 +- .../src/features/VPCs/VPCLanding/VPCRow.tsx | 2 +- .../features/Volumes/VolumesActionMenu.tsx | 5 +- 44 files changed, 177 insertions(+), 155 deletions(-) create mode 100644 packages/manager/.changeset/pr-9927-tech-stories-1700672701188.md delete mode 100644 packages/manager/src/components/ActionMenu/ActionMenu.stories.mdx create mode 100644 packages/manager/src/components/ActionMenu/ActionMenu.stories.tsx delete mode 100644 packages/manager/src/components/ActionMenu/index.ts diff --git a/packages/manager/.changeset/pr-9927-tech-stories-1700672701188.md b/packages/manager/.changeset/pr-9927-tech-stories-1700672701188.md new file mode 100644 index 00000000000..e3b5ecf132d --- /dev/null +++ b/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)) diff --git a/packages/manager/src/components/ActionMenu/ActionMenu.stories.mdx b/packages/manager/src/components/ActionMenu/ActionMenu.stories.mdx deleted file mode 100644 index 3996d7a4e74..00000000000 --- a/packages/manager/src/components/ActionMenu/ActionMenu.stories.mdx +++ /dev/null @@ -1,60 +0,0 @@ -import { ActionMenu } from './ActionMenu'; -import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs'; -import { action } from '@storybook/addon-actions'; - - - -# Action Menu - -### Usage - -No more than 8 items should be displayed within an action menu. - -export const standardActions = [ - { - title: 'First Action', - onClick: action('First Action clicked'), - }, - { - title: 'Second Action', - onClick: action('Second Action clicked'), - }, -]; - -export const standardAndDisabledActions = [ - ...standardActions, - { - title: 'Disabled Action', - onClick: action('Disabled Action clicked'), - disabled: true, - tooltip: 'An explanation as to why this item is disabled', - } -]; - -export const Template = (args) => { - return -} - -### Standard actions - - - - { Template.bind({}) } - - - - diff --git a/packages/manager/src/components/ActionMenu/ActionMenu.stories.tsx b/packages/manager/src/components/ActionMenu/ActionMenu.stories.tsx new file mode 100644 index 00000000000..bd050c4aed3 --- /dev/null +++ b/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 = { + render: (args) => , +}; + +const meta: Meta = { + argTypes: { + actionsList: { + options: { + 'disabled actions': standardAndDisabledActions, + 'standard actions': standardActions, + }, + }, + }, + args: { actionsList: standardActions, ariaLabel: 'action menu' }, + component: ActionMenu, + title: 'Components/Action Menu', +}; + +export default meta; diff --git a/packages/manager/src/components/ActionMenu/ActionMenu.test.tsx b/packages/manager/src/components/ActionMenu/ActionMenu.test.tsx index 00e3de5aeb4..6b018c0f77c 100644 --- a/packages/manager/src/components/ActionMenu/ActionMenu.test.tsx +++ b/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( - + const standardActions = [action1, action2]; + const standardAndDisabledActions = [...standardActions, action3]; + it('should include the correct actions', () => { + const { getByLabelText, getByText } = renderWithTheme( + ); - 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( + + ); + 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( + + ); + 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(); }); }); diff --git a/packages/manager/src/components/ActionMenu/ActionMenu.tsx b/packages/manager/src/components/ActionMenu/ActionMenu.tsx index 82a853be3bf..da59ced8b1a 100644 --- a/packages/manager/src/components/ActionMenu/ActionMenu.tsx +++ b/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); diff --git a/packages/manager/src/components/ActionMenu/index.ts b/packages/manager/src/components/ActionMenu/index.ts deleted file mode 100644 index eb78d4a1502..00000000000 --- a/packages/manager/src/components/ActionMenu/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type { Action, Props } from './ActionMenu'; -export { ActionMenu } from './ActionMenu'; diff --git a/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx b/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx index 8de89c04144..6b3f8201470 100644 --- a/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx +++ b/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'; diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx index ef09ed73fcb..cd39dfa610d 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseActionMenu.tsx +++ b/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()(() => ({ diff --git a/packages/manager/src/features/Domains/DomainActionMenu.tsx b/packages/manager/src/features/Domains/DomainActionMenu.tsx index 9fec86feb9f..06346eb0118 100644 --- a/packages/manager/src/features/Domains/DomainActionMenu.tsx +++ b/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()(() => ({ diff --git a/packages/manager/src/features/Domains/DomainRecordActionMenu.tsx b/packages/manager/src/features/Domains/DomainRecordActionMenu.tsx index 2c428cbce7f..f49d8ccf3e0 100644 --- a/packages/manager/src/features/Domains/DomainRecordActionMenu.tsx +++ b/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; diff --git a/packages/manager/src/features/EntityTransfers/TransfersPendingActionMenu.tsx b/packages/manager/src/features/EntityTransfers/TransfersPendingActionMenu.tsx index f8b2d35b5fd..ec29384f798 100644 --- a/packages/manager/src/features/EntityTransfers/TransfersPendingActionMenu.tsx +++ b/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 { diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleActionMenu.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleActionMenu.tsx index f4155f593a6..8ea1e58f141 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleActionMenu.tsx +++ b/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 { diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx index 0f00cae0113..487a1c9a09d 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallActionMenu.tsx +++ b/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'; diff --git a/packages/manager/src/features/Images/ImagesActionMenu.tsx b/packages/manager/src/features/Images/ImagesActionMenu.tsx index cd631adffe8..357ab4a97b3 100644 --- a/packages/manager/src/features/Images/ImagesActionMenu.tsx +++ b/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; diff --git a/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx b/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx index 4c6885cd89c..db2e08f973b 100644 --- a/packages/manager/src/features/Kubernetes/ClusterList/ClusterActionMenu.tsx +++ b/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'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeActionMenu.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeActionMenu.tsx index 1c9ac29eefa..0037f7d7039 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeActionMenu.tsx +++ b/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 { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackupActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackupActionMenu.tsx index 13fc6a47e33..44d461b15f4 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackupActionMenu.tsx +++ b/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; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx index dd12c2fa8ee..e26ba42f287 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigActionMenu.tsx +++ b/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'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewallsActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewallsActionMenu.tsx index 7afaf8edad7..04e0c74e5cb 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewallsActionMenu.tsx +++ b/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'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx index ff801bc3a17..1540325b65b 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetworkingActionMenu.tsx +++ b/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'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.tsx index da8a3d0f918..7429dd0e9f1 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDiskActionMenu.tsx @@ -4,7 +4,7 @@ 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'; import { sendEvent } from 'src/utilities/analytics'; diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu.tsx index b0040e1005b..e0b06aa7065 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodeActionMenu.tsx @@ -1,12 +1,11 @@ import { LinodeBackups, LinodeType } from '@linode/api-v4/lib/linodes'; import { Region } from '@linode/api-v4/lib/regions'; -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 { useHistory } from 'react-router-dom'; -import { ActionMenu, Action } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { lishLaunch } from 'src/features/Lish/lishUtils'; import { useGrants } from 'src/queries/profile'; import { useRegionsQuery } from 'src/queries/regions'; diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx index 52c7f08907c..708865e90af 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Certificates/Certificates.tsx @@ -1,12 +1,12 @@ -import { Stack } from 'src/components/Stack'; import React, { useState } from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; -import { ActionMenu } from 'src/components/ActionMenu'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { Link } from 'src/components/Link'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; +import { Stack } from 'src/components/Stack'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx index eb14e30a70e..f7a362977ed 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/Routes/RoutesTable.tsx @@ -2,7 +2,7 @@ import { Hidden } from '@mui/material'; import React, { useState } from 'react'; import { useParams } from 'react-router-dom'; -import { ActionMenu } from 'src/components/ActionMenu'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { CircleProgress } from 'src/components/CircleProgress'; import { CollapsibleTable, diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/RuleRow.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/RuleRow.tsx index 5377e6e95d5..552bde34d07 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/RuleRow.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/RuleRow.tsx @@ -3,7 +3,7 @@ import useMediaQuery from '@mui/material/useMediaQuery'; import React from 'react'; import { Draggable } from 'react-beautiful-dnd'; -import { ActionMenu } from 'src/components/ActionMenu'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { Box } from 'src/components/Box'; import { TextTooltip } from 'src/components/TextTooltip'; diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/ServiceTargetRow.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/ServiceTargetRow.tsx index 9108539fb86..f0e04dcb279 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/ServiceTargetRow.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/ServiceTargetRow.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ActionMenu } from 'src/components/ActionMenu'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { Hidden } from 'src/components/Hidden'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerActionsMenu.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerActionsMenu.tsx index ecf0d15a297..69193e7fbd2 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerActionsMenu.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerLanding/LoadBalancerActionsMenu.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; -import { Action, ActionMenu } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import type { LoadBalancerHandlers } from './LoadBalancerRow'; import type { Loadbalancer } from '@linode/api-v4'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewActionMenu.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewActionMenu.tsx index d9890cee683..30486a783a8 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewActionMenu.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewActionMenu.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { ActionMenu, Action } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; export interface ActionHandlers { triggerDeleteLongviewClient: ( diff --git a/packages/manager/src/features/Managed/Contacts/ContactsActionMenu.tsx b/packages/manager/src/features/Managed/Contacts/ContactsActionMenu.tsx index f34ad3b74c1..afff498ef38 100644 --- a/packages/manager/src/features/Managed/Contacts/ContactsActionMenu.tsx +++ b/packages/manager/src/features/Managed/Contacts/ContactsActionMenu.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'; interface ContactsActionMenuProps { diff --git a/packages/manager/src/features/Managed/Credentials/CredentialActionMenu.tsx b/packages/manager/src/features/Managed/Credentials/CredentialActionMenu.tsx index 40a88af1771..cd3c3644d46 100644 --- a/packages/manager/src/features/Managed/Credentials/CredentialActionMenu.tsx +++ b/packages/manager/src/features/Managed/Credentials/CredentialActionMenu.tsx @@ -1,9 +1,8 @@ -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 { ActionMenu, Action } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; interface CredentialActionMenuProps { diff --git a/packages/manager/src/features/Managed/Monitors/MonitorActionMenu.tsx b/packages/manager/src/features/Managed/Monitors/MonitorActionMenu.tsx index 8f78b5f4652..cb23a01f830 100644 --- a/packages/manager/src/features/Managed/Monitors/MonitorActionMenu.tsx +++ b/packages/manager/src/features/Managed/Monitors/MonitorActionMenu.tsx @@ -6,7 +6,7 @@ import { useSnackbar } from 'notistack'; import { splitAt } from 'ramda'; import * as React from 'react'; -import { ActionMenu, Action } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { useDisableMonitorMutation, diff --git a/packages/manager/src/features/Managed/SSHAccess/SSHAccessActionMenu.tsx b/packages/manager/src/features/Managed/SSHAccess/SSHAccessActionMenu.tsx index f114a150a39..9fcbeaec3ba 100644 --- a/packages/manager/src/features/Managed/SSHAccess/SSHAccessActionMenu.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/SSHAccessActionMenu.tsx @@ -4,7 +4,7 @@ import useMediaQuery from '@mui/material/useMediaQuery'; 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 { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { useUpdateLinodeSettingsMutation } from 'src/queries/managed/managed'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.tsx index dd5e2e85c8e..9a3c81a1a82 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.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 { useHistory } from 'react-router-dom'; -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'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyMenu.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyMenu.tsx index 80f46e06d7a..0f040e03fc5 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyMenu.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyMenu.tsx @@ -2,7 +2,7 @@ import { ObjectStorageKey } from '@linode/api-v4/lib/object-storage'; import { styled } from '@mui/material/styles'; import * as React from 'react'; -import { ActionMenu } from 'src/components/ActionMenu'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { Hidden } from 'src/components/Hidden'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/FolderActionMenu.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/FolderActionMenu.tsx index 27259e0c091..b3aedacba94 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/FolderActionMenu.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/FolderActionMenu.tsx @@ -1,9 +1,8 @@ -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 { ActionMenu, Action } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; interface Props { diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectActionMenu.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectActionMenu.tsx index ee01f16219c..7d4da154dd6 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectActionMenu.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectActionMenu.tsx @@ -1,9 +1,8 @@ -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 { ActionMenu, Action } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; export interface Handlers { diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketActionMenu.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketActionMenu.tsx index 7f74a3a8864..09ad328c0ec 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketActionMenu.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketActionMenu.tsx @@ -1,7 +1,7 @@ import { styled } from '@mui/material/styles'; import * as React from 'react'; -import { ActionMenu } from 'src/components/ActionMenu'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { Hidden } from 'src/components/Hidden'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; diff --git a/packages/manager/src/features/Profile/APITokens/APITokenMenu.tsx b/packages/manager/src/features/Profile/APITokens/APITokenMenu.tsx index 0f9ae41f728..e04a0d70eac 100644 --- a/packages/manager/src/features/Profile/APITokens/APITokenMenu.tsx +++ b/packages/manager/src/features/Profile/APITokens/APITokenMenu.tsx @@ -1,10 +1,9 @@ import { Token } from '@linode/api-v4/lib/profile'; -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 { ActionMenu, Action } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; interface Props { diff --git a/packages/manager/src/features/Profile/OAuthClients/OAuthClientActionMenu.tsx b/packages/manager/src/features/Profile/OAuthClients/OAuthClientActionMenu.tsx index 65841d984a4..7688a7e1a07 100644 --- a/packages/manager/src/features/Profile/OAuthClients/OAuthClientActionMenu.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/OAuthClientActionMenu.tsx @@ -1,9 +1,8 @@ -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 { ActionMenu, Action } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; interface Props { diff --git a/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptActionMenu.tsx b/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptActionMenu.tsx index 4afd1a31f1e..9e6a96efd8c 100644 --- a/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptActionMenu.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptActionMenu.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 { useHistory } from 'react-router-dom'; -import { Action, ActionMenu } 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 { useProfile } from 'src/queries/profile'; diff --git a/packages/manager/src/features/Users/UsersActionMenu.tsx b/packages/manager/src/features/Users/UsersActionMenu.tsx index 59a0d3e2128..5ab86577d56 100644 --- a/packages/manager/src/features/Users/UsersActionMenu.tsx +++ b/packages/manager/src/features/Users/UsersActionMenu.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 { useHistory } from 'react-router-dom'; -import { Action, ActionMenu } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { useProfile } from 'src/queries/profile'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetActionMenu.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetActionMenu.tsx index 79d8fe8a1dd..a03180506ac 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetActionMenu.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetActionMenu.tsx @@ -1,8 +1,7 @@ -/* eslint-disable @typescript-eslint/no-empty-function */ import { Subnet } from '@linode/api-v4'; import * as React from 'react'; -import { Action, ActionMenu } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; interface SubnetActionHandlers { handleAssignLinodes: (subnet: Subnet) => void; diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx index bb1a5f43685..496cb353e4f 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCRow.tsx @@ -2,7 +2,7 @@ import { VPC } from '@linode/api-v4/lib/vpcs/types'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { Action } from 'src/components/ActionMenu'; +import { Action } from 'src/components/ActionMenu/ActionMenu'; import { Hidden } from 'src/components/Hidden'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/features/Volumes/VolumesActionMenu.tsx b/packages/manager/src/features/Volumes/VolumesActionMenu.tsx index fbae965da1c..62c7fc4db22 100644 --- a/packages/manager/src/features/Volumes/VolumesActionMenu.tsx +++ b/packages/manager/src/features/Volumes/VolumesActionMenu.tsx @@ -1,11 +1,10 @@ import { Volume } from '@linode/api-v4'; -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 { Action, ActionMenu } from 'src/components/ActionMenu'; +import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; export interface ActionHandlers {