refactor: [M3-8707] - Move Tooltip component to UI package

packages/manager/.storybook/main.ts

@@ -8,6 +8,7 @@ const config: StorybookConfig = {
   stories: [
     '../src/components/**/*.@(mdx|stories.@(js|ts|jsx|tsx))',
     '../src/features/**/*.@(mdx|stories.@(js|ts|jsx|tsx))',
+    '../../ui/src/components/**/*.@(mdx|stories.@(js|ts|jsx|tsx))',
   ],
   addons: [
     '@storybook/addon-docs',

packages/manager/.storybook/utils.ts

@@ -1,6 +1,6 @@
 import globby from 'globby';
 
-const PATTERN = 'src/**/*.stories.tsx';
+const PATTERN = '../**/src/**/*.stories.tsx';
 
 /**
  * Find all storybook files, then return the glob containing the parent component/feature.
@@ -11,18 +11,18 @@ const PATTERN = 'src/**/*.stories.tsx';
  */
 export const getReactDocgenTSFileGlobs = () => {
   const filesWithStories = globby.sync(PATTERN);
-  const files: string[] = [];
+  const files = new Set<string>();
 
   filesWithStories.forEach((file) => {
-    const execArr = /(src\/(components|features)\/[a-zA-Z]*(.|\/))/.exec(file);
+    const execArr = /^(.*src\/(components|features)\/[a-zA-Z]*(.|\/))/.exec(
+      file
+    );
     if (execArr) {
       const isDirectory = execArr[3] === '/';
       const fileBlob = `${execArr[0]}${isDirectory ? '**/*.' : ''}{ts,tsx}`;
-      if (!files.includes(fileBlob)) {
-        files.push(fileBlob);
-      }
+      files.add(fileBlob);
     }
   });
 
-  return files;
+  return Array.from(files);
 };

packages/manager/cypress/e2e/core/cloudpulse/linode-widget-verification.spec.ts

@@ -46,8 +46,14 @@ import { Interception } from 'cypress/types/net-stubbing';
 const expectedGranularityArray = ['Auto', '1 day', '1 hr', '5 min'];
 const timeDurationToSelect = 'Last 24 Hours';
 
-const { metrics, id, serviceType, dashboardName, region, resource } =
-  widgetDetails.linode;
+const {
+  metrics,
+  id,
+  serviceType,
+  dashboardName,
+  region,
+  resource,
+} = widgetDetails.linode;
 
 const dashboard = dashboardFactory.build({
   label: dashboardName,

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

@@ -1,15 +1,16 @@
+import { Tooltip } from '@linode/ui';
 import Backup from '@mui/icons-material/Backup';
-import { Theme } from '@mui/material/styles';
 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 { Tooltip } from 'src/components/Tooltip';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 
+import type { Theme } from '@mui/material/styles';
+
 const useStyles = makeStyles<void, 'icon'>()(
   (theme: Theme, _params, classes) => ({
     backupLink: {

packages/manager/src/components/Button/Button.tsx

@@ -1,10 +1,10 @@
+import { Tooltip } from '@linode/ui';
 import HelpOutline from '@mui/icons-material/HelpOutline';
 import _Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import Reload from 'src/assets/icons/reload.svg';
-import { Tooltip } from 'src/components/Tooltip';
 
 import { rotate360 } from '../../styles/keyframes';
 import { omittedProps } from '../../utilities/omittedProps';

packages/manager/src/components/CopyTooltip/CopyTooltip.tsx

@@ -1,12 +1,12 @@
+import { Tooltip } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import copy from 'copy-to-clipboard';
 import * as React from 'react';
 
 import FileCopy from 'src/assets/icons/copy.svg';
-import { Tooltip } from 'src/components/Tooltip';
 import { omittedProps } from 'src/utilities/omittedProps';
 
-import type { TooltipProps } from 'src/components/Tooltip';
+import type { TooltipProps } from '@linode/ui';
 
 export interface CopyTooltipProps {
   /**

packages/manager/src/components/DownloadTooltip.tsx

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

packages/manager/src/components/GroupByTagToggle.tsx

@@ -1,7 +1,7 @@
+import { Tooltip } from '@linode/ui';
 import * as React from 'react';
 
 import GroupByTag from 'src/assets/icons/group-by-tag.svg';
-import { Tooltip } from 'src/components/Tooltip';
 import { StyledToggleButton } from 'src/features/Linodes/LinodesLanding/DisplayLinodes.styles';
 
 interface GroupByTagToggleProps {

packages/manager/src/components/ImageSelect/ImageOption.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@linode/ui';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -8,7 +9,6 @@ import { Option } from 'src/components/EnhancedSelect/components/Option';
 import { useFlags } from 'src/hooks/useFlags';
 
 import { Stack } from '../Stack';
-import { Tooltip } from '../Tooltip';
 
 import type { ImageItem } from './ImageSelect';
 import type { Theme } from '@mui/material/styles';

packages/manager/src/components/ImageSelectv2/ImageOptionv2.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@linode/ui';
 import React from 'react';
 
 import CloudInitIcon from 'src/assets/icons/cloud-init.svg';
@@ -7,7 +8,6 @@ import { useFlags } from 'src/hooks/useFlags';
 import { SelectedIcon } from '../Autocomplete/Autocomplete.styles';
 import { OSIcon } from '../OSIcon';
 import { Stack } from '../Stack';
-import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 import { isImageDeprecated } from './utilities';
 

packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx

@@ -1,17 +1,18 @@
-import { PLACEMENT_GROUP_TYPES, PlacementGroup } from '@linode/api-v4';
+import { PLACEMENT_GROUP_TYPES } from '@linode/api-v4';
+import { Tooltip } from '@linode/ui';
 import { visuallyHidden } from '@mui/utils';
 import React from 'react';
 
 import { Box } from 'src/components/Box';
 import { Stack } from 'src/components/Stack';
-import { Tooltip } from 'src/components/Tooltip';
 import { PLACEMENT_GROUP_HAS_NO_CAPACITY } from 'src/features/PlacementGroups/constants';
 
 import {
   SelectedIcon,
   StyledListItem,
 } from '../RegionSelect/RegionSelect.styles';
 
+import type { PlacementGroup } from '@linode/api-v4';
 import type { ListItemComponentsPropsOverrides } from '@mui/material/ListItem';
 
 interface PlacementGroupSelectOptionProps {

packages/manager/src/components/PrimaryNav/NavItem.tsx

@@ -1,11 +1,11 @@
+import { Tooltip } from '@linode/ui';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { useStyles } from 'tss-react/mui';
 
 import { Divider } from 'src/components/Divider';
 import { ListItem } from 'src/components/ListItem';
 import { ListItemText } from 'src/components/ListItemText';
-import { Tooltip } from 'src/components/Tooltip';
 
 interface Props extends PrimaryLink {
   closeMenu: () => void;

packages/manager/src/components/RegionSelect/RegionOption.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@linode/ui';
 import { visuallyHidden } from '@mui/utils';
 import React from 'react';
 
@@ -6,7 +7,6 @@ import { Box } from 'src/components/Box';
 import { Flag } from 'src/components/Flag';
 import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils';
 import { Stack } from 'src/components/Stack';
-import { Tooltip } from 'src/components/Tooltip';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 
 import {

packages/manager/src/components/SelectionCard/SelectionCard.tsx

@@ -1,9 +1,8 @@
+import { Tooltip } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import { Tooltip } from 'src/components/Tooltip';
-
 import { CardBase } from './CardBase';
 
 import type { SxProps, Theme } from '@mui/material/styles';
@@ -148,9 +147,9 @@ export const SelectionCard = React.memo((props: SelectionCardProps) => {
   const cardGrid = (
     <StyledGrid
       className={className}
-      data-testid="selection-card"
       data-qa-selection-card
       data-qa-selection-card-checked={checked}
+      data-testid="selection-card"
       disabled={disabled}
       id={id}
       lg={4}

packages/manager/src/components/TabbedPanel/TabbedPanel.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@linode/ui';
 import HelpOutline from '@mui/icons-material/HelpOutline';
 import { styled } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
@@ -9,7 +10,6 @@ import { TabList } from 'src/components/Tabs/TabList';
 import { TabPanel } from 'src/components/Tabs/TabPanel';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
-import { Tooltip } from 'src/components/Tooltip';
 import { Typography } from 'src/components/Typography';
 
 import { Box } from '../Box';
@@ -119,8 +119,8 @@ const TabbedPanel = React.memo((props: TabbedPanelProps) => {
           <TabPanels>
             {tabs.map((tab, idx) => (
               <TabPanel
-                key={`tabs-panel-${tab.title}-${idx}`}
                 data-qa-tp-tab={tab.title}
+                key={`tabs-panel-${tab.title}-${idx}`}
               >
                 {tab.render(rest.children)}
               </TabPanel>

packages/manager/src/components/TextField.tsx

@@ -13,10 +13,10 @@ import { InputLabel } from 'src/components/InputLabel';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
 
+import type { TooltipProps } from '@linode/ui';
 import type { Theme } from '@mui/material/styles';
 import type { StandardTextFieldProps } from '@mui/material/TextField';
 import type { BoxProps } from 'src/components/Box';
-import type { TooltipProps } from 'src/components/Tooltip';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   absolute: {

packages/manager/src/components/TextTooltip/TextTooltip.tsx

@@ -1,7 +1,7 @@
+import { Tooltip } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Tooltip } from 'src/components/Tooltip';
 import { Typography } from 'src/components/Typography';
 
 import type { SxProps, Theme } from '@mui/material';

packages/manager/src/components/TooltipIcon.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { Tooltip, tooltipClasses } from '@linode/ui';
 import SuccessOutline from '@mui/icons-material/CheckCircleOutlined';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import HelpOutline from '@mui/icons-material/HelpOutline';
@@ -8,11 +9,10 @@ import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { IconButton } from 'src/components/IconButton';
-import { Tooltip, tooltipClasses } from 'src/components/Tooltip';
 import { omittedProps } from 'src/utilities/omittedProps';
 
+import type { TooltipProps } from '@linode/ui';
 import type { SxProps, Theme } from '@mui/material/styles';
-import type { TooltipProps } from 'src/components/Tooltip';
 
 type TooltipIconStatus =
   | 'error'

packages/manager/src/components/Uploaders/FileUpload.tsx

@@ -1,10 +1,10 @@
+import { Tooltip } from '@linode/ui';
 import * as React from 'react';
 
 import CautionIcon from 'src/assets/icons/caution.svg';
 import FileUploadComplete from 'src/assets/icons/fileUploadComplete.svg';
 import { Button } from 'src/components/Button/Button';
 import { LinearProgress } from 'src/components/LinearProgress';
-import { Tooltip } from 'src/components/Tooltip';
 import { Typography } from 'src/components/Typography';
 import { readableBytes } from 'src/utilities/unitConversions';
 
@@ -18,7 +18,8 @@ import {
   StyledUploadPending,
   useStyles,
 } from './FileUpload.styles';
-import { ObjectUploaderAction } from './reducer';
+
+import type { ObjectUploaderAction } from './reducer';
 
 export interface FileUploadProps {
   dispatch: React.Dispatch<ObjectUploaderAction>;

packages/manager/src/dev-tools/ServiceWorkerTool.tsx

@@ -1,6 +1,6 @@
+import { Tooltip } from '@linode/ui';
 import * as React from 'react';
 
-import { Tooltip } from 'src/components/Tooltip';
 import { mswDB } from 'src/mocks/indexedDB';
 import { extraMockPresets } from 'src/mocks/presets';
 import { dbSeeders } from 'src/mocks/presets/crud/seeds';

packages/manager/src/features/Account/Maintenance/MaintenanceTableRow.tsx

@@ -1,19 +1,21 @@
-import { AccountMaintenance } from '@linode/api-v4/lib/account/types';
+import { Tooltip } from '@linode/ui';
 import * as React from 'react';
 
 import { Hidden } from 'src/components/Hidden';
 import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
 import { Link } from 'src/components/Link';
-import { Status, StatusIcon } from 'src/components/StatusIcon/StatusIcon';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
-import { Tooltip } from 'src/components/Tooltip';
 import { useProfile } from 'src/queries/profile/profile';
 import { capitalize } from 'src/utilities/capitalize';
 import { parseAPIDate } from 'src/utilities/date';
 import { formatDate } from 'src/utilities/formatDate';
 import { truncate } from 'src/utilities/truncate';
 
+import type { AccountMaintenance } from '@linode/api-v4/lib/account/types';
+import type { Status } from 'src/components/StatusIcon/StatusIcon';
+
 const statusTextMap: Record<AccountMaintenance['status'], string> = {
   completed: 'Completed',
   pending: 'Scheduled',

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

@@ -1,24 +1,25 @@
-import { APIWarning } from '@linode/api-v4/lib/types';
+import { Tooltip } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
+import { useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
-import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { makeStyles } from 'tss-react/mui';
 
 import GooglePayIcon from 'src/assets/icons/payment/gPayButton.svg';
 import { CircleProgress } from 'src/components/CircleProgress';
-import { Tooltip } from 'src/components/Tooltip';
-import { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer';
+import { getPaymentLimits } from 'src/features/Billing/billingUtils';
 import {
   gPay,
   initGooglePaymentInstance,
 } from 'src/features/Billing/GooglePayProvider';
-import { getPaymentLimits } from 'src/features/Billing/billingUtils';
 import { useScript } from 'src/hooks/useScript';
 import { useAccount } from 'src/queries/account/account';
 import { useClientToken } from 'src/queries/account/payment';
 
-import { SetSuccess } from './types';
+import type { SetSuccess } from './types';
+import type { APIWarning } from '@linode/api-v4/lib/types';
+import type { Theme } from '@mui/material/styles';
+import type { QueryClient } from '@tanstack/react-query';
+import type { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   button: {