refactor: [M3-9506] - Migrate ActionsPanel to ui package

packages/manager/.changeset/pr-11810-removed-1741599073654.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Migrate ActionsPanel to ui package ([#11810](https://github.com/linode/manager/pull/11810))

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

@@ -1,7 +1,7 @@
+import { ActionsPanel } from '@linode/ui';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 
 import type { Meta, StoryObj } from '@storybook/react';

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

@@ -1,9 +1,9 @@
+import { ActionsPanel } from '@linode/ui';
 import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { ActionsPanel } from '../ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from './ConfirmationDialog';
 
 import type { ConfirmationDialogProps } from './ConfirmationDialog';

packages/manager/src/components/DatePicker/DateTimePicker.tsx

@@ -1,4 +1,4 @@
-import { InputAdornment, TextField } from '@linode/ui';
+import { ActionsPanel, InputAdornment, TextField } from '@linode/ui';
 import { Divider } from '@linode/ui';
 import { Box } from '@linode/ui';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
@@ -10,7 +10,6 @@ import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import React, { useEffect, useState } from 'react';
 
 import { timezones } from 'src/assets/timezones/timezones';
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 
 import { TimeZoneSelect } from './TimeZoneSelect';
 

packages/manager/src/components/DeletionDialog/DeletionDialog.tsx

@@ -1,9 +1,8 @@
-import { Notice, Typography } from '@linode/ui';
+import { ActionsPanel, Notice, Typography } from '@linode/ui';
 import { capitalize } from '@linode/utilities';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
 import { titlecase } from 'src/features/Linodes/presentation';

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

@@ -1,9 +1,8 @@
-import { Button, TextField, Typography } from '@linode/ui';
+import { ActionsPanel, Button, TextField, Typography } from '@linode/ui';
 import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/preview-api';
 import React from 'react';
 
-import { ActionsPanel } from './ActionsPanel/ActionsPanel';
 import { Drawer } from './Drawer';
 
 import type { Meta, StoryObj } from '@storybook/react';

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

@@ -1,15 +1,16 @@
-import { PaymentMethod } from '@linode/api-v4/lib/account/types';
-import { Theme } from '@mui/material/styles';
+import { ActionsPanel } from '@linode/ui';
+import Grid from '@mui/material/Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';
 
-import { ActionsPanel } from '../ActionsPanel/ActionsPanel';
-import Grid from '@mui/material/Grid2';
 import { ThirdPartyPayment } from './ThirdPartyPayment';
 
+import type { PaymentMethod } from '@linode/api-v4/lib/account/types';
+import type { Theme } from '@mui/material/styles';
+
 export const useStyles = makeStyles()((theme: Theme) => ({
   container: {
     flexWrap: 'nowrap',

packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx

@@ -1,13 +1,13 @@
+import { ActionsPanel } from '@linode/ui';
 import { FormLabel } from '@mui/material';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
 import { usePreferences } from 'src/queries/profile/preferences';
 
 import type { APIError } from '@linode/api-v4/lib/types';
-import type { ActionButtonsProps } from 'src/components/ActionsPanel/ActionsPanel';
+import type { ActionButtonsProps } from '@linode/ui';
 import type { ConfirmationDialogProps } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import type { TypeToConfirmProps } from 'src/components/TypeToConfirm/TypeToConfirm';
 

packages/manager/src/features/Account/EnableManaged.tsx

@@ -1,11 +1,10 @@
 import { enableManaged } from '@linode/api-v4/lib/managed';
-import { Accordion, Button, Typography } from '@linode/ui';
+import { Accordion, ActionsPanel, Button, Typography } from '@linode/ui';
 import { pluralize } from '@linode/utilities';
 import Grid from '@mui/material/Grid2';
 import { useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Link } from 'src/components/Link';
 import { SupportLink } from 'src/components/SupportLink';

packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx

@@ -1,9 +1,8 @@
-import { Typography } from '@linode/ui';
+import { ActionsPanel, Typography } from '@linode/ui';
 import { pluralize, useInterval } from '@linode/utilities';
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { sessionExpirationContext as _sessionExpirationContext } from 'src/context/sessionExpirationContext';
 import { useParentChildAuthentication } from 'src/features/Account/SwitchAccounts/useParentChildAuthentication';

packages/manager/src/features/Account/SwitchAccounts/SwitchAccountSessionDialog.tsx

@@ -1,8 +1,7 @@
-import { Typography } from '@linode/ui';
+import { ActionsPanel, Typography } from '@linode/ui';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { sendSwitchAccountSessionExpiryEvent } from 'src/utilities/analytics/customEventAnalytics';
 

packages/manager/src/features/Backups/BackupDrawer.tsx

@@ -1,10 +1,9 @@
-import { Box, Notice, Stack, Typography } from '@linode/ui';
+import { ActionsPanel, Box, Notice, Stack, Typography } from '@linode/ui';
 import { isNumber, pluralize } from '@linode/utilities';
 import { styled } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { DisplayPrice } from 'src/components/DisplayPrice';
 import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';

packages/manager/src/features/Betas/BetaSignup.tsx

@@ -1,4 +1,11 @@
-import { Checkbox, CircleProgress, Paper, Stack, Typography } from '@linode/ui';
+import {
+  ActionsPanel,
+  Checkbox,
+  CircleProgress,
+  Paper,
+  Stack,
+  Typography,
+} from '@linode/ui';
 import {
   createLazyRoute,
   useNavigate,
@@ -7,7 +14,6 @@ import {
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { LandingHeader } from 'src/components/LandingHeader/LandingHeader';
 import { Markdown } from 'src/components/Markdown/Markdown';
 import { NotFound } from 'src/components/NotFound';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx

@@ -1,7 +1,6 @@
-import { Typography } from '@linode/ui';
+import { ActionsPanel, Typography } from '@linode/ui';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 
 interface Actions {

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx

@@ -1,11 +1,10 @@
 import { addPromotion } from '@linode/api-v4/lib';
-import { TextField, Typography } from '@linode/ui';
+import { ActionsPanel, TextField, Typography } from '@linode/ui';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { accountQueries } from 'src/queries/account/queries';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx

@@ -1,4 +1,5 @@
 import {
+  ActionsPanel,
   Autocomplete,
   Checkbox,
   Notice,
@@ -11,7 +12,6 @@ import { useFormik } from 'formik';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Link } from 'src/components/Link';
 import { reportException } from 'src/exceptionReporting';
 import {
@@ -450,12 +450,12 @@ const UpdateContactInformationForm = ({ focusEmail, onClose }: Props) => {
         </Grid>
         {nonUSCountry && (
           <Grid
-            size={12}
             sx={{
               alignItems: 'flex-start',
               display: 'flex',
               marginTop: (theme) => theme.tokens.spacing.S16,
             }}
+            size={12}
           >
             <Checkbox
               onChange={() =>

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx

@@ -1,5 +1,5 @@
 import { addPaymentMethod } from '@linode/api-v4/lib';
-import { Notice, TextField } from '@linode/ui';
+import { ActionsPanel, Notice, TextField } from '@linode/ui';
 import { CreditCardSchema } from '@linode/validation';
 import Grid from '@mui/material/Grid2';
 import { useQueryClient } from '@tanstack/react-query';
@@ -9,7 +9,6 @@ import * as React from 'react';
 import NumberFormat from 'react-number-format';
 import { makeStyles } from 'tss-react/mui';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { accountQueries } from 'src/queries/account/queries';
 import { parseExpiryYear } from 'src/utilities/creditCard';
 import { handleAPIErrors } from 'src/utilities/formikErrorUtils';

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx

@@ -1,12 +1,11 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { isEmpty } from '@linode/api-v4';
-import { Paper, TextField, Typography } from '@linode/ui';
+import { ActionsPanel, Paper, TextField, Typography } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { useCreateAlertDefinition } from 'src/queries/cloudpulse/alerts';

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddNotificationChannelDrawer.tsx

@@ -1,10 +1,9 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Autocomplete, Box, Typography } from '@linode/ui';
+import { ActionsPanel, Autocomplete, Box, Typography } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import React from 'react';
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
 
 import { channelTypeOptions } from '../../constants';

packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertDefinition.tsx

@@ -1,12 +1,11 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { isEmpty } from '@linode/api-v4';
-import { Paper, TextField, Typography } from '@linode/ui';
+import { ActionsPanel, Paper, TextField, Typography } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import React from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
 import { useEditAlertDefinition } from 'src/queries/cloudpulse/alerts';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';

packages/manager/src/features/CloudPulse/Alerts/EditAlert/EditAlertResourcesConfirmationDialog.tsx

@@ -1,10 +1,9 @@
-import { Typography } from '@linode/ui';
+import { ActionsPanel, Typography } from '@linode/ui';
 import React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 
-import type { ActionPanelProps } from 'src/components/ActionsPanel/ActionsPanel';
+import type { ActionPanelProps } from '@linode/ui';
 
 interface AlertResourcesConfirmDialogProps {
   /**

packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx

@@ -1,8 +1,7 @@
-import { Button, Notice, Typography } from '@linode/ui';
+import { ActionsPanel, Button, Notice, Typography } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { Table } from 'src/components/Table';

packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx

@@ -1,9 +1,8 @@
-import { Notice, Typography } from '@linode/ui';
+import { ActionsPanel, Notice, Typography } from '@linode/ui';
 import { useFormik } from 'formik';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx

@@ -1,7 +1,6 @@
-import { Divider, Notice, Typography } from '@linode/ui';
+import { ActionsPanel, Divider, Notice, Typography } from '@linode/ui';
 import React, { useState } from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
 

packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupsDialog.tsx

@@ -1,10 +1,9 @@
-import { Dialog, Notice, Typography } from '@linode/ui';
+import { ActionsPanel, Dialog, Notice, Typography } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { useRestoreFromBackupMutation } from 'src/queries/databases/databases';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx

@@ -1,7 +1,6 @@
-import { Notice, Typography } from '@linode/ui';
+import { ActionsPanel, Notice, Typography } from '@linode/ui';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { useDatabaseCredentialsMutation } from 'src/queries/databases/databases';
 

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx

@@ -1,9 +1,8 @@
-import { Typography } from '@linode/ui';
+import { ActionsPanel, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { usePatchDatabaseMutation } from 'src/queries/databases/databases';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsSuspendClusterDialog.tsx

@@ -1,9 +1,8 @@
-import { Checkbox, Notice, Typography } from '@linode/ui';
+import { ActionsPanel, Checkbox, Notice, Typography } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { useSuspendDatabaseMutation } from 'src/queries/databases/databases';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx

@@ -1,10 +1,14 @@
-import { Autocomplete } from '@linode/ui';
-import { FormControl, Notice, Typography } from '@linode/ui';
+import {
+  ActionsPanel,
+  Autocomplete,
+  FormControl,
+  Notice,
+  Typography,
+} from '@linode/ui';
 import { useTheme } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import {
   DATABASE_ENGINE_MAP,

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

@@ -1,4 +1,5 @@
 import {
+  ActionsPanel,
   FormControlLabel,
   Notice,
   Radio,
@@ -9,7 +10,6 @@ import { useNavigate } from '@tanstack/react-router';
 import { useFormik } from 'formik';
 import React from 'react';
 
-import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
 import { useCloneDomainMutation } from 'src/queries/domains';
 import { useGrants, useProfile } from 'src/queries/profile/profile';