refactor: [M3-8899] - Migrate FormControlLabel to ui package

packages/manager/.changeset/pr-11353-removed-1733229097582.md

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

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

@@ -1,7 +1,6 @@
-import { Checkbox } from '@linode/ui';
+import { Checkbox, FormControlLabel } from '@linode/ui';
 import React from 'react';
 
-import { FormControlLabel } from './FormControlLabel';
 import { FormGroup } from './FormGroup';
 
 import type { Meta, StoryObj } from '@storybook/react';

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

@@ -1,7 +1,6 @@
-import { FormControl, Radio, RadioGroup } from '@linode/ui';
+import { FormControl, FormControlLabel, Radio, RadioGroup } from '@linode/ui';
 import React from 'react';
 
-import { FormControlLabel } from './FormControlLabel';
 import { FormLabel } from './FormLabel';
 
 import type { Meta, StoryObj } from '@storybook/react';

packages/manager/src/components/ModeSelect/ModeSelect.tsx

@@ -1,8 +1,6 @@
-import { Radio, RadioGroup } from '@linode/ui';
+import { FormControlLabel, Radio, RadioGroup } from '@linode/ui';
 import * as React from 'react';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
-
 export interface Mode<modes> {
   label: string;
   mode: modes;

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

@@ -1,9 +1,14 @@
-import { Accordion, Notice, Toggle, Typography } from '@linode/ui';
+import {
+  Accordion,
+  FormControlLabel,
+  Notice,
+  Toggle,
+  Typography,
+} from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 
 import type { Theme } from '@mui/material/styles';

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

@@ -1,9 +1,7 @@
-import { Accordion, Toggle, Typography } from '@linode/ui';
+import { Accordion, FormControlLabel, Toggle, Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
-
 interface Props {
   networkHelperEnabled: boolean;
   onChange: () => void;

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

@@ -1,8 +1,13 @@
-import { Notice, Paper, Toggle, Typography } from '@linode/ui';
+import {
+  FormControlLabel,
+  Notice,
+  Paper,
+  Toggle,
+  Typography,
+} from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 
 interface AutoEnrollProps {

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

@@ -1,10 +1,15 @@
-import { Notice, Radio, RadioGroup, Typography } from '@linode/ui';
+import {
+  FormControlLabel,
+  Notice,
+  Radio,
+  RadioGroup,
+  Typography,
+} from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useState } from 'react';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import { ipFieldPlaceholder } from 'src/utilities/ipUtils';

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

@@ -1,7 +1,13 @@
-import { FormControl, Notice, Radio, RadioGroup, Typography } from '@linode/ui';
+import {
+  FormControl,
+  FormControlLabel,
+  Notice,
+  Radio,
+  RadioGroup,
+  Typography,
+} from '@linode/ui';
 import React from 'react';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { StyledChip } from 'src/features/components/PlansPanel/PlanSelection.styles';
 import { determineInitialPlanCategoryTab } from 'src/features/components/PlansPanel/utils';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';

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

@@ -1,12 +1,13 @@
-import { Typography } from '@linode/ui';
 import {
   Autocomplete,
   Button,
   FormControl,
+  FormControlLabel,
   Notice,
   Radio,
   RadioGroup,
   TooltipIcon,
+  Typography,
 } from '@linode/ui';
 import { useFormik } from 'formik';
 import { DateTime } from 'luxon';
@@ -15,7 +16,6 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { useDatabaseMutation } from 'src/queries/databases/databases';
 
 import type { Database, UpdatesSchedule } from '@linode/api-v4/lib/databases';

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

@@ -1,11 +1,16 @@
-import { Notice, Radio, RadioGroup, TextField } from '@linode/ui';
+import {
+  FormControlLabel,
+  Notice,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@linode/ui';
 import { useFormik } from 'formik';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { useCloneDomainMutation } from 'src/queries/domains';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
 

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

@@ -1,5 +1,6 @@
 import {
   Autocomplete,
+  FormControlLabel,
   FormHelperText,
   Notice,
   Paper,
@@ -18,7 +19,6 @@ import { useHistory } from 'react-router-dom';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { LandingHeader } from 'src/components/LandingHeader';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import { reportException } from 'src/exceptionReporting';

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

@@ -1,10 +1,15 @@
-import { Notice, Radio, RadioGroup, TextField } from '@linode/ui';
+import {
+  FormControlLabel,
+  Notice,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@linode/ui';
 import { useFormik } from 'formik';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import { TagsInput } from 'src/components/TagsInput/TagsInput';
 import { useUpdateDomainMutation } from 'src/queries/domains';

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

@@ -1,5 +1,6 @@
 import {
   Autocomplete,
+  FormControlLabel,
   Notice,
   Radio,
   RadioGroup,
@@ -10,7 +11,6 @@ import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import {
   addressOptions,

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

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import {
   Box,
+  FormControlLabel,
   Notice,
   Radio,
   RadioGroup,
@@ -16,7 +17,6 @@ import { useLocation } from 'react-router-dom';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
 import { ErrorMessage } from 'src/components/ErrorMessage';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { FIREWALL_LIMITS_CONSIDERATIONS_LINK } from 'src/constants';
 import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect';

packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx

@@ -2,13 +2,13 @@ import {
   Box,
   Chip,
   FormControl,
+  FormControlLabel,
   Radio,
   RadioGroup,
   Typography,
 } from '@linode/ui';
 import * as React from 'react';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { FormLabel } from 'src/components/FormLabel';
 import { Link } from 'src/components/Link';
 

packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx

@@ -1,9 +1,15 @@
-import { Box, FormControl, Notice, Toggle, Typography } from '@linode/ui';
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  Notice,
+  Toggle,
+  Typography,
+} from '@linode/ui';
 import { FormLabel } from '@mui/material';
 import * as React from 'react';
 
 import { ErrorMessage } from 'src/components/ErrorMessage';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput';
 import { validateIPs } from 'src/utilities/ipUtils';
 

packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@linode/ui';
+import { FormControlLabel, Typography } from '@linode/ui';
 import {
   Box,
   CircleProgress,
@@ -11,7 +11,6 @@ import {
 import { FormLabel } from '@mui/material';
 import * as React from 'react';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 
 export interface HAControlPlaneProps {

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

@@ -1,6 +1,7 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import {
   Box,
+  FormControlLabel,
   Notice,
   TextField,
   Toggle,
@@ -15,7 +16,6 @@ import { Controller, useForm } from 'react-hook-form';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { MultipleNonExtendedIPInput } from 'src/components/MultipleIPInput/MultipleNonExtendedIPInput';
 import {
   useKubernetesClusterMutation,

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

@@ -1,4 +1,11 @@
-import { Button, Notice, TextField, Toggle, Typography } from '@linode/ui';
+import {
+  Button,
+  FormControlLabel,
+  Notice,
+  TextField,
+  Toggle,
+  Typography,
+} from '@linode/ui';
 import { AutoscaleNodePoolSchema } from '@linode/validation/lib/kubernetes.schema';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useFormik } from 'formik';
@@ -8,7 +15,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { useUpdateNodePoolMutation } from 'src/queries/kubernetes';
 

packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx

@@ -1,10 +1,15 @@
-import { Checkbox, Notice, Stack, Typography } from '@linode/ui';
+import {
+  Checkbox,
+  FormControlLabel,
+  Notice,
+  Stack,
+  Typography,
+} from '@linode/ui';
 import React, { useMemo } from 'react';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
 
 import { Currency } from 'src/components/Currency';
 import { DISK_ENCRYPTION_BACKUPS_CAVEAT_COPY } from 'src/components/Encryption/constants';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccountSettings } from 'src/queries/account/settings';

packages/manager/src/features/Linodes/LinodeCreate/Addons/PrivateIP.tsx

@@ -1,8 +1,7 @@
-import { Checkbox, Stack, Typography } from '@linode/ui';
+import { Checkbox, FormControlLabel, Stack, Typography } from '@linode/ui';
 import React, { useMemo } from 'react';
 import { useController, useWatch } from 'react-hook-form';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 

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

@@ -1,9 +1,8 @@
-import { Checkbox } from '@linode/ui';
+import { Checkbox, FormControlLabel } from '@linode/ui';
 import React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
 import { AkamaiBanner } from 'src/components/AkamaiBanner/AkamaiBanner';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { useFlags } from 'src/hooks/useFlags';
 import { isNotNullOrUndefined } from 'src/utilities/nullOrUndefined';
 

packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx

@@ -2,6 +2,7 @@ import {
   Autocomplete,
   Divider,
   FormControl,
+  FormControlLabel,
   Radio,
   RadioGroup,
   Stack,
@@ -11,7 +12,6 @@ import {
 import React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { FormLabel } from 'src/components/FormLabel';
 import { Link } from 'src/components/Link';
 import PasswordInput from 'src/components/PasswordInput/PasswordInput';

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

@@ -3,6 +3,7 @@ import {
   Box,
   Checkbox,
   Divider,
+  FormControlLabel,
   Notice,
   Paper,
   Stack,
@@ -13,7 +14,6 @@ import {
 import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { LinkButton } from 'src/components/LinkButton';
 import { VPCSelect } from 'src/components/VPCSelect';

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

@@ -1,7 +1,6 @@
-import { Radio } from '@linode/ui';
+import { FormControlLabel, Radio } from '@linode/ui';
 import React from 'react';
 
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';

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

@@ -2,6 +2,7 @@ import {
   Autocomplete,
   Checkbox,
   FormControl,
+  FormControlLabel,
   FormHelperText,
   Notice,
 } from '@linode/ui';
@@ -11,7 +12,6 @@ import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
-import { FormControlLabel } from 'src/components/FormControlLabel';
 import { useEventsPollingActions } from 'src/queries/events/events';
 import { useLinodeBackupRestoreMutation } from 'src/queries/linodes/backups';
 import {