refactor: [M3-8708] – Migrate TooltipIcon to ui package (linode#1…

…1269)

packages/manager/.changeset/pr-11269-removed-1731693533239.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+TooltipIcon component (migrated to `ui` package) ([#11269](https://github.com/linode/manager/pull/11269))

packages/manager/src/components/ActionMenu/ActionMenu.tsx

@@ -1,10 +1,10 @@
+import { TooltipIcon } from '@linode/ui';
 import { IconButton, ListItemText } from '@mui/material';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import * as React from 'react';
 
 import KebabIcon from 'src/assets/icons/kebab.svg';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
 
 export interface Action {

packages/manager/src/components/BackupStatus/BackupStatus.tsx

@@ -1,12 +1,11 @@
-import { Tooltip } from '@linode/ui';
+import { Tooltip, TooltipIcon } from '@linode/ui';
 import Backup from '@mui/icons-material/Backup';
 import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Link } from 'src/components/Link';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 
 import type { Theme } from '@mui/material/styles';

packages/manager/src/components/Checkbox.tsx

@@ -1,11 +1,11 @@
+import { TooltipIcon } from '@linode/ui';
 import _Checkbox from '@mui/material/Checkbox';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import CheckboxIcon from 'src/assets/icons/checkbox.svg';
 import CheckboxCheckedIcon from 'src/assets/icons/checkboxChecked.svg';
 import { FormControlLabel } from 'src/components/FormControlLabel';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 
 import type { CheckboxProps } from '@mui/material/Checkbox';
 import type { SxProps, Theme } from '@mui/material/styles';

packages/manager/src/components/DescriptionList/DescriptionList.tsx

@@ -1,8 +1,7 @@
-import { Box } from '@linode/ui';
+import { Box, TooltipIcon } from '@linode/ui';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 
 import {
@@ -11,8 +10,8 @@ import {
   StyledDT,
 } from './DescriptionList.styles';
 
+import type { TooltipIconProps } from '@linode/ui';
 import type { Breakpoint, SxProps, Theme } from '@mui/material/styles';
-import type { TooltipIconProps } from 'src/components/TooltipIcon';
 
 type DescriptionListBaseProps = {
   /**

packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx

@@ -1,4 +1,4 @@
-import { Button, InputLabel, Notice } from '@linode/ui';
+import { Button, InputLabel, Notice, TooltipIcon } from '@linode/ui';
 import Close from '@mui/icons-material/Close';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
@@ -7,7 +7,6 @@ import { makeStyles } from 'tss-react/mui';
 import { LinkButton } from 'src/components/LinkButton';
 import { StyledLinkButtonBox } from 'src/components/SelectFirewallPanel/SelectFirewallPanel';
 import { TextField } from 'src/components/TextField';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 
 import type { InputBaseProps } from '@mui/material/InputBase';

packages/manager/src/components/StackScript/StackScript.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Chip, Divider } from '@linode/ui';
+import { Box, Button, Chip, Divider, TooltipIcon } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { Link, useHistory } from 'react-router-dom';
@@ -13,8 +13,6 @@ import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { listToItemsByID } from 'src/queries/base';
 import { useAllImagesQuery } from 'src/queries/images';
 
-import { TooltipIcon } from '../TooltipIcon';
-
 import type { StackScript as StackScriptType } from '@linode/api-v4/lib/stackscripts';
 import type { Theme } from '@mui/material/styles';
 

packages/manager/src/components/TableCell/TableCell.tsx

@@ -1,9 +1,8 @@
+import { TooltipIcon } from '@linode/ui';
 import { default as _TableCell } from '@mui/material/TableCell';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { TooltipIcon } from 'src/components/TooltipIcon';
-
 import type { Theme } from '@mui/material/styles';
 import type { TableCellProps as _TableCellProps } from '@mui/material/TableCell';
 

packages/manager/src/components/TextField.tsx

@@ -4,14 +4,14 @@ import {
   FormHelperText,
   InputAdornment,
   InputLabel,
+  TooltipIcon,
 } from '@linode/ui';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import { useTheme } from '@mui/material/styles';
 import { default as _TextField } from '@mui/material/TextField';
 import { clamp } from 'ramda';
 import * as React from 'react';
 
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
 
 import type { BoxProps, TooltipProps } from '@linode/ui';

packages/manager/src/components/Toggle/Toggle.tsx

@@ -1,9 +1,11 @@
-import Switch, { SwitchProps } from '@mui/material/Switch';
+import { TooltipIcon } from '@linode/ui';
+import Switch from '@mui/material/Switch';
 import * as React from 'react';
 
 import ToggleOff from 'src/assets/icons/toggleOff.svg';
 import ToggleOn from 'src/assets/icons/toggleOn.svg';
-import { TooltipIcon } from 'src/components/TooltipIcon';
+
+import type { SwitchProps } from '@mui/material/Switch';
 
 export interface ToggleProps extends SwitchProps {
   /**

packages/manager/src/components/TransferDisplay/TransferDisplayDialogHeader.tsx

@@ -1,7 +1,7 @@
+import { TooltipIcon } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 
 interface Props {

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

@@ -1,11 +1,10 @@
-import { Box, Button, Divider } from '@linode/ui';
+import { Box, Button, Divider, TooltipIcon } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 
 import { Currency } from 'src/components/Currency';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { useAccountManagement } from 'src/hooks/useAccountManagement';
 import { useNotificationsQuery } from 'src/queries/account/notifications';

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

@@ -1,5 +1,12 @@
 import { makePayment } from '@linode/api-v4/lib/account';
-import { Button, Divider, InputAdornment, Notice, Stack } from '@linode/ui';
+import {
+  Button,
+  Divider,
+  InputAdornment,
+  Notice,
+  Stack,
+  TooltipIcon,
+} from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
@@ -12,7 +19,6 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LinearProgress } from 'src/components/LinearProgress';
 import { SupportLink } from 'src/components/SupportLink';
 import { TextField } from 'src/components/TextField';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';

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

@@ -1,10 +1,9 @@
-import { Box } from '@linode/ui';
+import { Box, TooltipIcon } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Currency } from 'src/components/Currency';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 
 import type {

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

@@ -1,12 +1,11 @@
-import { Box } from '@linode/ui';
+import { Box, TooltipIcon } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { allCountries } from 'country-region-data';
 import * as React from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { MaskableText } from 'src/components/MaskableText/MaskableText';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { EDIT_BILLING_CONTACT } from 'src/features/Billing/constants';

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

@@ -1,10 +1,9 @@
-import { Box, Divider, Notice } from '@linode/ui';
+import { Box, Divider, Notice, TooltipIcon } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { Drawer } from 'src/components/Drawer';
 import { LinearProgress } from 'src/components/LinearProgress';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { MAXIMUM_PAYMENT_METHODS } from 'src/constants';
 import { getRestrictedResourceText } from 'src/features/Account/utils';

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

@@ -1,9 +1,8 @@
-import { Box, CircleProgress } from '@linode/ui';
+import { Box, CircleProgress, TooltipIcon } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVersion';
 import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
 import { useInProgressEvents } from 'src/queries/events/events';

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

@@ -1,4 +1,11 @@
-import { Button, FormControl, Notice, Radio, RadioGroup } from '@linode/ui';
+import {
+  Button,
+  FormControl,
+  Notice,
+  Radio,
+  RadioGroup,
+  TooltipIcon,
+} from '@linode/ui';
 import { useFormik } from 'formik';
 import { DateTime } from 'luxon';
 import { useSnackbar } from 'notistack';
@@ -8,7 +15,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { FormControlLabel } from 'src/components/FormControlLabel';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { useDatabaseMutation } from 'src/queries/databases/databases';
 

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

@@ -1,8 +1,8 @@
+import { TooltipIcon } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2/Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { DatabaseStatusDisplay } from 'src/features/Databases/DatabaseDetail/DatabaseStatusDisplay';
 import {

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

@@ -1,12 +1,11 @@
 import { getSSLFields } from '@linode/api-v4/lib/databases/databases';
-import { Button, CircleProgress } from '@linode/ui';
+import { Button, CircleProgress, TooltipIcon } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2/Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import DownloadIcon from 'src/assets/icons/lke-download.svg';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { DB_ROOT_USERNAME } from 'src/constants';
 import { useDatabaseCredentialsQuery } from 'src/queries/databases/databases';

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

@@ -1,8 +1,7 @@
-import { Box } from '@linode/ui';
+import { Box, TooltipIcon } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { DatabaseStatusDisplay } from 'src/features/Databases/DatabaseDetail/DatabaseStatusDisplay';
 import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVersion';

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

@@ -1,13 +1,12 @@
 import { getSSLFields } from '@linode/api-v4/lib/databases/databases';
-import { Box, Button, CircleProgress } from '@linode/ui';
+import { Box, Button, CircleProgress, TooltipIcon } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import DownloadIcon from 'src/assets/icons/lke-download.svg';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { DB_ROOT_USERNAME } from 'src/constants';
 import { useDatabaseCredentialsQuery } from 'src/queries/databases/databases';

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

@@ -1,5 +1,5 @@
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Box, Button, Notice, Paper, Stack } from '@linode/ui';
+import { Box, Button, Notice, Paper, Stack, TooltipIcon } from '@linode/ui';
 import { createImageSchema } from '@linode/validation';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -13,7 +13,6 @@ import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/uti
 import { Link } from 'src/components/Link';
 import { TagsInput } from 'src/components/TagsInput/TagsInput';
 import { TextField } from 'src/components/TextField';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect';

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

@@ -5,13 +5,13 @@ import {
   Notice,
   Radio,
   RadioGroup,
+  TooltipIcon,
 } from '@linode/ui';
 import { FormLabel } from '@mui/material';
 import * as React from 'react';
 
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 
 export interface HAControlPlaneProps {

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

@@ -1,10 +1,9 @@
-import { CircleProgress } from '@linode/ui';
+import { CircleProgress, TooltipIcon } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import {
   useAllKubernetesNodePoolQuery,

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

@@ -1,4 +1,4 @@
-import { Box } from '@linode/ui';
+import { Box, TooltipIcon } from '@linode/ui';
 import * as React from 'react';
 
 import Lock from 'src/assets/icons/lock.svg';
@@ -16,7 +16,6 @@ import { TableFooter } from 'src/components/TableFooter';
 import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
 

packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx

@@ -6,6 +6,7 @@ import {
   IconButton,
   InputAdornment,
   Stack,
+  TooltipIcon,
 } from '@linode/ui';
 import CloseIcon from '@mui/icons-material/Close';
 import { useQueryClient } from '@tanstack/react-query';
@@ -25,7 +26,6 @@ import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { TableSortCell } from 'src/components/TableSortCell';
 import { TextField } from 'src/components/TextField';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { useOrder } from 'src/hooks/useOrder';
 import {

packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx

@@ -1,8 +1,7 @@
-import { Notice, Stack } from '@linode/ui';
+import { Notice, Stack, TooltipIcon } from '@linode/ui';
 import React from 'react';
 
 import { Link } from 'src/components/Link';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 
 import { useLinodeCreateQueryParams } from '../utilities';

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

@@ -1,11 +1,10 @@
-import { Stack } from '@linode/ui';
+import { Stack, TooltipIcon } from '@linode/ui';
 import React from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
 import { Accordion } from 'src/components/Accordion';
 import { Link } from 'src/components/Link';
 import { TextField } from 'src/components/TextField';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { VLANSelect } from 'src/components/VLANSelect';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';