refactor: [M3-9397] - Migrate utilities to (at)linode/utilities package - Part 1

packages/manager/.changeset/pr-11711-removed-1740406956736.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Migrate utilities from `manager` to `utilities` package ([#11711](https://github.com/linode/manager/pull/11711))

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

@@ -1,14 +1,14 @@
+import { downloadFile } from '@linode/utilities';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { downloadFile } from 'src/utilities/downloadFile';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { CopyableTextField } from './CopyableTextField';
 
 import type { CopyableTextFieldProps } from './CopyableTextField';
 
-vi.mock('src/utilities/downloadFile', () => ({
+vi.mock('@linode/utilities', () => ({
   downloadFile: vi.fn(),
 }));
 

packages/manager/src/components/DownloadTooltip.tsx

@@ -1,9 +1,9 @@
 import { Tooltip, Typography } from '@linode/ui';
+import { downloadFile } from '@linode/utilities';
 import * as React from 'react';
 
 import FileDownload from 'src/assets/icons/download.svg';
 import { StyledIconButton } from 'src/components/CopyTooltip/CopyTooltip';
-import { downloadFile } from 'src/utilities/downloadFile';
 
 interface Props {
   /**

packages/manager/src/components/SplashScreen.tsx

@@ -1,8 +1,7 @@
 import { Box, CircleProgress } from '@linode/ui';
+import { srSpeak } from '@linode/utilities';
 import * as React from 'react';
 
-import { srSpeak } from 'src/utilities/accessibility';
-
 export const SplashScreen = () => {
   React.useEffect(() => {
     srSpeak('Loading Linode Cloud Manager', 'polite');

packages/manager/src/constants.ts

@@ -1,7 +1,8 @@
-import { getBooleanEnv } from './utilities/env';
-
 // whether or not this is a Vite production build
 // This does not necessarily mean Cloud is running in a production environment.
+
+import { getBooleanEnv } from '@linode/utilities';
+
 // For example, cloud.dev.linode.com is technically a production build.
 export const isProductionBuild = import.meta.env.PROD;
 

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx

@@ -1,11 +1,13 @@
 import { BetaChip, CircleProgress, Divider, Notice, Paper } from '@linode/ui';
+import { formatStorageUnits } from '@linode/utilities';
 import { createDatabaseSchema } from '@linode/validation/lib/databases.schema';
 import Grid from '@mui/material/Grid2';
 import { createLazyRoute } from '@tanstack/react-router';
 import { useFormik } from 'formik';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { ErrorMessage } from 'src/components/ErrorMessage';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LandingHeader } from 'src/components/LandingHeader';
@@ -30,11 +32,14 @@ import {
   useDatabaseTypesQuery,
 } from 'src/queries/databases/databases';
 import { useRegionsQuery } from 'src/queries/regions/regions';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { handleAPIErrors } from 'src/utilities/formikErrorUtils';
 import { validateIPs } from 'src/utilities/ipUtils';
 import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
 
+import {
+  ACCESS_CONTROLS_IP_VALIDATION_ERROR_TEXT,
+  ACCESS_CONTROLS_IP_VALIDATION_ERROR_TEXT_LEGACY,
+} from '../constants';
 import { DatabaseCreateAccessControls } from './DatabaseCreateAccessControls';
 import {
   determineReplicationCommitType,
@@ -51,11 +56,6 @@ import type { APIError } from '@linode/api-v4/lib/types';
 import type { PlanSelectionWithDatabaseType } from 'src/features/components/PlansPanel/types';
 import type { DatabaseCreateValues } from 'src/features/Databases/DatabaseCreate/DatabaseClusterData';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
-import {
-  ACCESS_CONTROLS_IP_VALIDATION_ERROR_TEXT,
-  ACCESS_CONTROLS_IP_VALIDATION_ERROR_TEXT_LEGACY,
-} from '../constants';
-import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 
 const DatabaseCreate = () => {
   const history = useHistory();

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

@@ -6,6 +6,7 @@ import {
   Paper,
   Typography,
 } from '@linode/ui';
+import { formatStorageUnits } from '@linode/utilities';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
@@ -18,9 +19,8 @@ import { DatabaseSummarySection } from 'src/features/Databases/DatabaseCreate/Da
 import { DatabaseResizeCurrentConfiguration } from 'src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration';
 import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
 import { typeLabelDetails } from 'src/features/Linodes/presentation';
-import { useDatabaseMutation } from 'src/queries/databases/databases';
 import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
+import { useDatabaseMutation } from 'src/queries/databases/databases';
 
 import {
   StyledGrid,

packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx

@@ -1,4 +1,5 @@
 import { Box, CircleProgress, TooltipIcon } from '@linode/ui';
+import { formatStorageUnits } from '@linode/utilities';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -7,7 +8,6 @@ import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVers
 import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
 import { useInProgressEvents } from 'src/queries/events/events';
 import { useRegionsQuery } from 'src/queries/regions/regions';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { convertMegabytesTo } from 'src/utilities/unitConversions';
 
 import { DatabaseStatusDisplay } from '../DatabaseStatusDisplay';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx

@@ -1,4 +1,5 @@
 import { TooltipIcon, Typography } from '@linode/ui';
+import { formatStorageUnits } from '@linode/utilities';
 import Grid from '@mui/material/Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -13,7 +14,6 @@ import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVers
 import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
 import { useInProgressEvents } from 'src/queries/events/events';
 import { useRegionsQuery } from 'src/queries/regions/regions';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { convertMegabytesTo } from 'src/utilities/unitConversions';
 
 import type { Region } from '@linode/api-v4';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx

@@ -1,5 +1,6 @@
 import { getSSLFields } from '@linode/api-v4/lib/databases/databases';
 import { Button, CircleProgress, TooltipIcon, Typography } from '@linode/ui';
+import { downloadFile } from '@linode/utilities';
 import Grid from '@mui/material/Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -8,7 +9,6 @@ import DownloadIcon from 'src/assets/icons/lke-download.svg';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { DB_ROOT_USERNAME } from 'src/constants';
 import { useDatabaseCredentialsQuery } from 'src/queries/databases/databases';
-import { downloadFile } from 'src/utilities/downloadFile';
 import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
 
 import {

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryClusterConfigurationLegacy.tsx

@@ -1,4 +1,5 @@
 import { Box, TooltipIcon, Typography } from '@linode/ui';
+import { formatStorageUnits } from '@linode/utilities';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -7,7 +8,6 @@ import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVers
 import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
 import { useInProgressEvents } from 'src/queries/events/events';
 import { useRegionsQuery } from 'src/queries/regions/regions';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { convertMegabytesTo } from 'src/utilities/unitConversions';
 
 import type { Region } from '@linode/api-v4';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx

@@ -6,6 +6,7 @@ import {
   TooltipIcon,
   Typography,
 } from '@linode/ui';
+import { downloadFile } from '@linode/utilities';
 import { useTheme } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -15,7 +16,6 @@ import DownloadIcon from 'src/assets/icons/lke-download.svg';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { DB_ROOT_USERNAME } from 'src/constants';
 import { useDatabaseCredentialsQuery } from 'src/queries/databases/databases';
-import { downloadFile } from 'src/utilities/downloadFile';
 import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
 
 import type { Database, SSLFields } from '@linode/api-v4/lib/databases/types';

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

@@ -1,4 +1,5 @@
 import { Chip } from '@linode/ui';
+import { formatStorageUnits } from '@linode/utilities';
 import * as React from 'react';
 
 import { Hidden } from 'src/components/Hidden';
@@ -14,7 +15,6 @@ import { useProfile } from 'src/queries/profile/profile';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { isWithinDays, parseAPIDate } from 'src/utilities/date';
 import { formatDate } from 'src/utilities/formatDate';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 
 import type { Event } from '@linode/api-v4';
 import type {

packages/manager/src/features/Domains/DownloadDNSZoneFileButton.test.tsx

@@ -1,7 +1,7 @@
+import { downloadFile } from '@linode/utilities';
 import { fireEvent, waitFor } from '@testing-library/react';
 import * as React from 'react';
 
-import { downloadFile } from 'src/utilities/downloadFile';
 import { renderWithThemeAndRouter } from 'src/utilities/testHelpers';
 
 import { DownloadDNSZoneFileButton } from './DownloadDNSZoneFileButton';
@@ -18,8 +18,8 @@ vi.mock('@linode/api-v4/lib/domains', async () => {
   };
 });
 
-vi.mock('src/utilities/downloadFile', async () => {
-  const actual = await vi.importActual<any>('src/utilities/downloadFile');
+vi.mock('@linode/utilities', async () => {
+  const actual = await vi.importActual<any>('@linode/utilities');
   return {
     ...actual,
     downloadFile: vi.fn(),

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

@@ -1,9 +1,8 @@
 import { getDNSZoneFile } from '@linode/api-v4/lib/domains';
 import { Button } from '@linode/ui';
+import { downloadFile } from '@linode/utilities';
 import * as React from 'react';
 
-import { downloadFile } from 'src/utilities/downloadFile';
-
 type DownloadDNSZoneFileButtonProps = {
   domainId: number;
   domainLabel: string;

packages/manager/src/features/Events/factories/linode.tsx

@@ -1,9 +1,9 @@
+import { formatStorageUnits } from '@linode/utilities';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
 import { useTypeQuery } from 'src/queries/types';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 
 import { EventLink } from '../EventLink';
 

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

@@ -1,16 +1,19 @@
 import { getKubeConfig } from '@linode/api-v4/lib/kubernetes';
-import { Theme, useTheme } from '@mui/material/styles';
+import { downloadFile } from '@linode/utilities';
+import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { Hidden } from 'src/components/Hidden';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { reportException } from 'src/exceptionReporting';
-import { downloadFile } from 'src/utilities/downloadFile';
 import { getErrorStringOrDefault } from 'src/utilities/errorUtils';
 
+import type { Theme } from '@mui/material/styles';
+import type { Action } from 'src/components/ActionMenu/ActionMenu';
+
 interface Props {
   clusterId: number;
   clusterLabel: string;

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx

@@ -2,9 +2,10 @@ import {
   Box,
   CircleProgress,
   Stack,
-  Typography,
   StyledLinkButton,
+  Typography,
 } from '@linode/ui';
+import { downloadFile } from '@linode/utilities';
 import copy from 'copy-to-clipboard';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -19,7 +20,6 @@ import {
   useAllKubernetesClusterAPIEndpointsQuery,
   useKubernetesKubeConfigQuery,
 } from 'src/queries/kubernetes';
-import { downloadFile } from 'src/utilities/downloadFile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import type { APIError } from '@linode/api-v4';

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDrawer.tsx

@@ -1,11 +1,11 @@
 import { Box, IconButton, Typography } from '@linode/ui';
+import { downloadFile } from '@linode/utilities';
 import React from 'react';
 
 import Download from 'src/assets/icons/download.svg';
 import { CodeBlock } from 'src/components/CodeBlock/CodeBlock';
 import { Drawer } from 'src/components/Drawer';
 import { useKubernetesKubeConfigQuery } from 'src/queries/kubernetes';
-import { downloadFile } from 'src/utilities/downloadFile';
 
 interface Props {
   closeDrawer: () => void;

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigPanel.tsx

@@ -1,12 +1,12 @@
 import { Button, Paper, Typography } from '@linode/ui';
+import { downloadFile } from '@linode/utilities';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import Download from 'src/assets/icons/download.svg';
 import View from 'src/assets/icons/view.svg';
 import { useKubernetesKubeConfigQuery } from 'src/queries/kubernetes';
-import { downloadFile } from 'src/utilities/downloadFile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { KubeConfigDrawer } from './KubeConfigDrawer';

packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx

@@ -1,4 +1,5 @@
 import { Divider, Paper, Stack, Typography } from '@linode/ui';
+import { formatStorageUnits } from '@linode/utilities';
 import { useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import React from 'react';
@@ -7,7 +8,6 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { useImageQuery } from 'src/queries/images';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { useTypeQuery } from 'src/queries/types';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
 import { renderMonthlyPriceToCorrectDecimalPlace } from 'src/utilities/pricing/dynamicPricing';
 

packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTableRow.tsx

@@ -1,5 +1,5 @@
 import { FormControlLabel, Radio } from '@linode/ui';
-import { capitalize } from '@linode/utilities';
+import { capitalize, formatStorageUnits } from '@linode/utilities';
 import React from 'react';
 
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
@@ -10,7 +10,6 @@ import { getLinodeIconStatus } from 'src/features/Linodes/LinodesLanding/utils';
 import { useImageQuery } from 'src/queries/images';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { useTypeQuery } from 'src/queries/types';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 
 import type { Linode } from '@linode/api-v4';
 

packages/manager/src/features/Linodes/LinodeCreate/shared/SelectLinodeCard.tsx

@@ -1,5 +1,5 @@
 import { Button, Stack } from '@linode/ui';
-import { capitalizeAllWords } from '@linode/utilities';
+import { capitalizeAllWords, formatStorageUnits } from '@linode/utilities';
 import Grid from '@mui/material/Grid2';
 import React from 'react';
 
@@ -9,7 +9,6 @@ import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { useImageQuery } from 'src/queries/images';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { useTypeQuery } from 'src/queries/types';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 import { isNotNullOrUndefined } from 'src/utilities/nullOrUndefined';
 
 import { getLinodeIconStatus } from '../../LinodesLanding/utils';

packages/manager/src/features/Linodes/LinodeEntityDetail.tsx

@@ -1,4 +1,5 @@
 import { Notice } from '@linode/ui';
+import { formatStorageUnits } from '@linode/utilities';
 import * as React from 'react';
 
 import { EntityDetail } from 'src/components/EntityDetail/EntityDetail';
@@ -12,7 +13,6 @@ import { useAllImagesQuery } from 'src/queries/images';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { useTypeQuery } from 'src/queries/types';
 import { useLinodeVolumesQuery } from 'src/queries/volumes/volumes';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 
 import { LinodeEntityDetailBody } from './LinodeEntityDetailBody';
 import { LinodeEntityDetailFooter } from './LinodeEntityDetailFooter';