refactor: [M3-8644] - Move Checkbox to linode/ui package (linode#…

…11279)

* refactor: [M3-8644] - Move `Checkbox` to `linode/ui` package

* Added changeset: Move `Checkbox` from `linode/manager` to `linode/ui` package

* Update Changeset description

Co-authored-by: Purvesh Makode <pmakode@akamai.com>

* Added changeset: Move `Checkbox` from `manager` to `ui` package

* Change import for TooltipIcon

---------

Co-authored-by: Purvesh Makode <pmakode@akamai.com>

packages/manager/.changeset/pr-11279-removed-1732009349912.md

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

packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx

@@ -1,9 +1,8 @@
-import { Button } from '@linode/ui';
+import { Button, Checkbox } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Checkbox } from 'src/components/Checkbox';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';

packages/manager/src/components/Encryption/Encryption.tsx

@@ -1,8 +1,7 @@
-import { Box, Notice } from '@linode/ui';
+import { Box, Checkbox, Notice } from '@linode/ui';
 import { List, ListItem } from '@mui/material';
 import * as React from 'react';
 
-import { Checkbox } from 'src/components/Checkbox';
 import { Typography } from 'src/components/Typography';
 
 export interface EncryptionProps {

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

@@ -1,7 +1,6 @@
-import { Radio } from '@linode/ui';
+import { Checkbox, Radio } from '@linode/ui';
 import React from 'react';
 
-import { Checkbox } from './Checkbox';
 import { FormControlLabel } from './FormControlLabel';
 import { Toggle } from './Toggle/Toggle';
 

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

@@ -1,10 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from '@linode/ui';
 import React from 'react';
 
-import { Checkbox } from './Checkbox';
 import { FormControlLabel } from './FormControlLabel';
 import { FormGroup } from './FormGroup';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 const meta: Meta<typeof FormGroup> = {
   component: FormGroup,
   title: 'Components/Form/FormGroup',

packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx

@@ -1,7 +1,7 @@
+import { Checkbox } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Checkbox } from 'src/components/Checkbox';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 

packages/manager/src/features/Account/Agreements/EUAgreementCheckbox.tsx

@@ -1,8 +1,7 @@
-import { Box } from '@linode/ui';
+import { Box, Checkbox } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import * as React from 'react';
 
-import { Checkbox } from 'src/components/Checkbox';
 import { Link } from 'src/components/Link';
 import { Typography } from 'src/components/Typography';
 

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

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

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

@@ -1,10 +1,9 @@
-import { Notice } from '@linode/ui';
+import { Checkbox, Notice } 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 { Checkbox } from 'src/components/Checkbox';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Typography } from 'src/components/Typography';
 import { useSuspendDatabaseMutation } from 'src/queries/databases/databases';

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.styles.ts

@@ -1,6 +1,6 @@
+import { Checkbox } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { Checkbox } from 'src/components/Checkbox';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table';

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx

@@ -1,10 +1,9 @@
 import { acceptEntityTransfer } from '@linode/api-v4/lib/entity-transfers';
-import { CircleProgress, Notice } from '@linode/ui';
+import { Checkbox, CircleProgress, Notice } from '@linode/ui';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { Checkbox } from 'src/components/Checkbox';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import {

packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx

@@ -1,13 +1,20 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Box, Button, Notice, Paper, Stack, TooltipIcon } from '@linode/ui';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Notice,
+  Paper,
+  Stack,
+  TooltipIcon,
+} from '@linode/ui';
 import { createImageSchema } from '@linode/validation';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useHistory, useLocation } from 'react-router-dom';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-import { Checkbox } from 'src/components/Checkbox';
 import { DISK_ENCRYPTION_IMAGES_CAVEAT_COPY } from 'src/components/Encryption/constants';
 import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils';
 import { Link } from 'src/components/Link';

packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx

@@ -1,5 +1,5 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Box, Button, Notice, Paper, Stack } from '@linode/ui';
+import { Box, Button, Checkbox, Notice, Paper, Stack } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import React, { useState } from 'react';
 import { flushSync } from 'react-dom';
@@ -8,7 +8,6 @@ import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Checkbox } from 'src/components/Checkbox';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Link } from 'src/components/Link';
 import { Prompt } from 'src/components/Prompt/Prompt';

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

@@ -1,10 +1,9 @@
-import { CircleProgress, Notice } from '@linode/ui';
+import { Checkbox, CircleProgress, Notice } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Checkbox } from 'src/components/Checkbox';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Typography } from 'src/components/Typography';
 import {

packages/manager/src/features/Linodes/CloneLanding/Configs.tsx

@@ -1,7 +1,6 @@
-import { Config } from '@linode/api-v4/lib/linodes';
+import { Checkbox } from '@linode/ui';
 import * as React from 'react';
 
-import { Checkbox } from 'src/components/Checkbox';
 import Paginate from 'src/components/Paginate';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table';
@@ -10,7 +9,8 @@ import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 
-import { ConfigSelection } from './utilities';
+import type { ConfigSelection } from './utilities';
+import type { Config } from '@linode/api-v4/lib/linodes';
 
 export interface ConfigsProps {
   configSelection: ConfigSelection;

packages/manager/src/features/Linodes/CloneLanding/Disks.tsx

@@ -1,9 +1,8 @@
-import { Disk } from '@linode/api-v4/lib/linodes';
+import { Checkbox } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { intersection, pathOr } from 'ramda';
 import * as React from 'react';
 
-import { Checkbox } from 'src/components/Checkbox';
 import Paginate from 'src/components/Paginate';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table';
@@ -13,7 +12,8 @@ import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 
-import { DiskSelection } from './utilities';
+import type { DiskSelection } from './utilities';
+import type { Disk } from '@linode/api-v4/lib/linodes';
 
 export interface DisksProps {
   diskSelection: DiskSelection;

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

@@ -1,8 +1,7 @@
-import { Notice, Stack } from '@linode/ui';
+import { Checkbox, Notice, Stack } from '@linode/ui';
 import React, { useMemo } from 'react';
 import { useController, useFormContext, useWatch } from 'react-hook-form';
 
-import { Checkbox } from 'src/components/Checkbox';
 import { Currency } from 'src/components/Currency';
 import { DISK_ENCRYPTION_BACKUPS_CAVEAT_COPY } from 'src/components/Encryption/constants';
 import { FormControlLabel } from 'src/components/FormControlLabel';

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

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

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

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

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

@@ -1,9 +1,16 @@
-import { Box, Divider, Notice, Paper, Stack, TooltipIcon } from '@linode/ui';
+import {
+  Box,
+  Checkbox,
+  Divider,
+  Notice,
+  Paper,
+  Stack,
+  TooltipIcon,
+} from '@linode/ui';
 import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-import { Checkbox } from 'src/components/Checkbox';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { LinkButton } from 'src/components/LinkButton';

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

@@ -1,11 +1,10 @@
-import { FormControl, FormHelperText, Notice } from '@linode/ui';
+import { Checkbox, FormControl, FormHelperText, Notice } from '@linode/ui';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-import { Checkbox } from 'src/components/Checkbox';
 import { Drawer } from 'src/components/Drawer';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { useEventsPollingActions } from 'src/queries/events/events';

packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx

@@ -1,5 +1,5 @@
 import { rebuildLinode } from '@linode/api-v4';
-import { Box, Divider } from '@linode/ui';
+import { Box, Checkbox, Divider } from '@linode/ui';
 import { RebuildLinodeSchema } from '@linode/validation/lib/linodes.schema';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Formik } from 'formik';
@@ -9,7 +9,6 @@ import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { AccessPanel } from 'src/components/AccessPanel/AccessPanel';
-import { Checkbox } from 'src/components/Checkbox';
 import { ImageSelect } from 'src/components/ImageSelect/ImageSelect';
 import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   Button,
+  Checkbox,
   CircleProgress,
   Divider,
   Notice,
@@ -11,7 +12,6 @@ import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { Checkbox } from 'src/components/Checkbox';
 import { Dialog } from 'src/components/Dialog/Dialog';
 import { ErrorMessage } from 'src/components/ErrorMessage';
 import { Link } from 'src/components/Link';

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx

@@ -1,10 +1,9 @@
-import { Box, Paper, Stack, TooltipIcon } from '@linode/ui';
+import { Box, Checkbox, Paper, Stack, TooltipIcon } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-import { Checkbox } from 'src/components/Checkbox';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Linodes/MigrateLinode/CautionNotice.tsx

@@ -1,9 +1,8 @@
-import { Notice } from '@linode/ui';
+import { Checkbox, Notice } from '@linode/ui';
 import { styled, useTheme } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 
-import { Checkbox } from 'src/components/Checkbox';
 import { Link } from 'src/components/Link';
 import { Typography } from 'src/components/Typography';
 import { API_MAX_PAGE_SIZE } from 'src/constants';

packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx

@@ -1,9 +1,8 @@
-import { FormControl, Notice } from '@linode/ui';
+import { Checkbox, FormControl, Notice } from '@linode/ui';
 import { useFormik } from 'formik';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Checkbox } from 'src/components/Checkbox';
 import { Drawer } from 'src/components/Drawer';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { TextField } from 'src/components/TextField';

packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx

@@ -1,9 +1,8 @@
-import { FormControl, Notice } from '@linode/ui';
+import { Checkbox, FormControl, Notice } from '@linode/ui';
 import { useFormik } from 'formik';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Checkbox } from 'src/components/Checkbox';
 import { Drawer } from 'src/components/Drawer';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { TextField } from 'src/components/TextField';

packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx

@@ -1,11 +1,17 @@
 import { appendConfigInterface } from '@linode/api-v4';
-import { Box, Button, FormHelperText, Notice, TooltipIcon } from '@linode/ui';
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormHelperText,
+  Notice,
+  TooltipIcon,
+} from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import * as React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-import { Checkbox } from 'src/components/Checkbox';
 import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV';
 import { Drawer } from 'src/components/Drawer';
 import { FormControlLabel } from 'src/components/FormControlLabel';

packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx

@@ -1,12 +1,11 @@
-import { Box, FormHelperText, Notice } from '@linode/ui';
+import { Box, Checkbox, FormHelperText, Notice } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { number, object } from 'yup';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Checkbox } from 'src/components/Checkbox';
 import { Drawer } from 'src/components/Drawer';
 import { BLOCK_STORAGE_ENCRYPTION_SETTING_IMMUTABLE_COPY } from 'src/components/Encryption/constants';
 import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils';

packages/manager/src/features/Volumes/CloneVolumeDrawer.tsx

@@ -1,10 +1,9 @@
-import { Box, Notice } from '@linode/ui';
+import { Box, Checkbox, Notice } from '@linode/ui';
 import { CloneVolumeSchema } from '@linode/validation/lib/volumes.schema';
 import { useFormik } from 'formik';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Checkbox } from 'src/components/Checkbox';
 import { Drawer } from 'src/components/Drawer';
 import { BLOCK_STORAGE_CLONING_INHERITANCE_CAVEAT } from 'src/components/Encryption/constants';
 import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils';