refactor: [M3-8710] - Move Notice & Tooltip components to UI package and update imports

packages/manager/src/components/Accordion.tsx

@@ -1,22 +1,19 @@
+import { Notice } from '@linode/ui';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import {
-  default as _Accordion,
-  AccordionProps as _AccordionProps,
-} from '@mui/material/Accordion';
-import AccordionDetails, {
-  AccordionDetailsProps,
-} from '@mui/material/AccordionDetails';
-import AccordionSummary, {
-  AccordionSummaryProps,
-} from '@mui/material/AccordionSummary';
+import { default as _Accordion } from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Notice } from 'src/components/Notice/Notice';
-import { Typography, TypographyProps } from 'src/components/Typography';
+import { Typography } from 'src/components/Typography';
 
 import type { Theme } from '@mui/material';
+import type { AccordionProps as _AccordionProps } from '@mui/material/Accordion';
+import type { AccordionDetailsProps } from '@mui/material/AccordionDetails';
+import type { AccordionSummaryProps } from '@mui/material/AccordionSummary';
+import type { TypographyProps } from 'src/components/Typography';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   itemCount: {

packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts

@@ -1,7 +1,6 @@
-import { Box, omittedProps, Stack } from '@linode/ui';
+import { Box, Stack, WarningIcon, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import Warning from 'src/assets/icons/warning.svg';
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 
 export const StyledAkamaiLogo = styled(AkamaiLogo, {
@@ -15,7 +14,7 @@ export const StyledAkamaiLogo = styled(AkamaiLogo, {
   },
 }));
 
-export const StyledWarningIcon = styled(Warning, {
+export const StyledWarningIcon = styled(WarningIcon, {
   label: 'StyledWarningIcon',
 })(({ theme }) => ({
   color: theme.tokens.color.Neutrals.Black,

packages/manager/src/components/DeletionDialog/DeletionDialog.tsx

@@ -1,9 +1,9 @@
+import { Notice } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { Notice } from 'src/components/Notice/Notice';
 import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
 import { Typography } from 'src/components/Typography';
 import { titlecase } from 'src/features/Linodes/presentation';

packages/manager/src/components/Dialog/Dialog.tsx

@@ -1,11 +1,10 @@
-import { Box, omittedProps } from '@linode/ui';
+import { Box, Notice, omittedProps } from '@linode/ui';
 import _Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { DialogTitle } from 'src/components/DialogTitle/DialogTitle';
-import { Notice } from 'src/components/Notice/Notice';
 import { convertForAria } from 'src/utilities/stringUtils';
 
 import type { DialogProps as _DialogProps } from '@mui/material/Dialog';

packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts

@@ -1,7 +1,6 @@
+import { Notice } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { Notice } from 'src/components/Notice/Notice';
-
 import { StyledLinkButton } from '../Button/StyledLinkButton';
 
 export const StyledNotice = styled(Notice, { label: 'StyledNotice' })(

packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx

@@ -7,7 +7,7 @@ import { useDismissibleNotifications } from 'src/hooks/useDismissibleNotificatio
 
 import { StyledButton, StyledNotice } from './DismissibleBanner.styles';
 
-import type { NoticeProps } from 'src/components/Notice/Notice';
+import type { NoticeProps } from '@linode/ui';
 import type { DismissibleNotificationOptions } from 'src/hooks/useDismissibleNotifications';
 
 interface Props extends NoticeProps {

packages/manager/src/components/DrawerContent/DrawerContent.tsx

@@ -1,7 +1,7 @@
+import { Notice } from '@linode/ui';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';
-import { Notice } from 'src/components/Notice/Notice';
 
 export interface DrawerContentProps {
   children: React.ReactNode;

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

@@ -1,12 +1,10 @@
-import { Box } from '@linode/ui';
+import { Box, 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';
 
-import { Notice } from '../Notice/Notice';
-
 export interface EncryptionProps {
   descriptionCopy: JSX.Element | string;
   disabled?: boolean;

packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@linode/ui';
+import { Notice, Stack } from '@linode/ui';
 import React from 'react';
 
 import { useFlags } from 'src/hooks/useFlags';
@@ -9,7 +9,6 @@ import { Dialog } from '../Dialog/Dialog';
 import { ErrorMessage } from '../ErrorMessage';
 import { LinearProgress } from '../LinearProgress';
 import { Link } from '../Link';
-import { Notice } from '../Notice/Notice';
 import { Typography } from '../Typography';
 import { useCreateFirewallFromTemplate } from './useCreateFirewallFromTemplate';
 

packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx

@@ -1,14 +1,15 @@
-import { AccountMaintenance } from '@linode/api-v4/lib/account';
+import { Notice } from '@linode/ui';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
-import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { useAllAccountMaintenanceQuery } from 'src/queries/account/maintenance';
 import { useProfile } from 'src/queries/profile/profile';
 import { formatDate } from 'src/utilities/formatDate';
 import { isPast } from 'src/utilities/isPast';
 
+import type { AccountMaintenance } from '@linode/api-v4/lib/account';
+
 interface Props {
   maintenanceEnd?: null | string;
   /** please keep in mind here that it's possible the start time can be in the past */

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

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

packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 
 import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
 import { reportException } from 'src/exceptionReporting';
-import { ProductInformationBannerLocation } from 'src/featureFlags';
 import { useFlags } from 'src/hooks/useFlags';
 import { isAfter } from 'src/utilities/date';
 
 import { DismissibleBanner } from '../DismissibleBanner/DismissibleBanner';
 
-import type { NoticeProps } from 'src/components/Notice/Notice';
+import type { NoticeProps } from '@linode/ui';
+import type { ProductInformationBannerLocation } from 'src/featureFlags';
 
 interface Props {
   bannerLocation: ProductInformationBannerLocation;

packages/manager/src/components/ProductNotification/ProductNotification.tsx

@@ -1,6 +1,7 @@
+import { Notice } from '@linode/ui';
 import * as React from 'react';
 
-import { Notice, NoticeVariant } from 'src/components/Notice/Notice';
+import type { NoticeVariant } from '@linode/ui';
 
 export interface ProductNotificationProps {
   onClick?: () => void;

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

@@ -1,9 +1,8 @@
-import { Box, Paper, Tooltip } from '@linode/ui';
+import { Box, Notice, Paper, Tooltip } from '@linode/ui';
 import HelpOutline from '@mui/icons-material/HelpOutline';
 import { styled } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
 
-import { Notice } from 'src/components/Notice/Notice';
 import { Tab } from 'src/components/Tabs/Tab';
 import { TabList } from 'src/components/Tabs/TabList';
 import { TabPanel } from 'src/components/Tabs/TabPanel';

packages/manager/src/components/Tile/Tile.tsx

@@ -1,8 +1,8 @@
+import { Notice } from '@linode/ui';
 import Button from '@mui/material/Button';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
-import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 
 import { useStyles } from './Tile.styles';

packages/manager/src/featureFlags.ts

@@ -1,6 +1,6 @@
 import type { OCA } from './features/OneClickApps/types';
 import type { TPAProvider } from '@linode/api-v4/lib/profile';
-import type { NoticeVariant } from 'src/components/Notice/Notice';
+import type { NoticeVariant } from '@linode/ui';
 
 // These flags should correspond with active features flags in LD
 

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

@@ -1,8 +1,8 @@
+import { Notice } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Hidden } from 'src/components/Hidden';
-import { Notice } from 'src/components/Notice/Notice';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';

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

@@ -1,15 +1,16 @@
+import { Notice } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { Accordion } from 'src/components/Accordion';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
-import { Notice } from 'src/components/Notice/Notice';
 import { Toggle } from 'src/components/Toggle/Toggle';
 import { Typography } from 'src/components/Typography';
 
+import type { Theme } from '@mui/material/styles';
+
 const useStyles = makeStyles()((theme: Theme) => ({
   enableBackupsButton: {
     ...theme.applyLinkStyles,

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

@@ -1,16 +1,18 @@
 import { cancelAccount } from '@linode/api-v4/lib/account';
-import { APIError } from '@linode/api-v4/lib/types';
-import { Theme, styled } from '@mui/material/styles';
+import { Notice } from '@linode/ui';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
-import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { Typography } from 'src/components/Typography';
 import { useProfile } from 'src/queries/profile/profile';
 
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { Theme } from '@mui/material/styles';
+
 interface Props {
   closeDialog: () => void;
   open: boolean;

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

@@ -1,12 +1,11 @@
-import { Box, Stack } from '@linode/ui';
+import { Box, Notice, Stack } from '@linode/ui';
 import { enqueueSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { Accordion } from 'src/components/Accordion';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Link } from 'src/components/Link';
-import { Notice } from 'src/components/Notice/Notice';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { Typography } from 'src/components/Typography';
 import { useAccountSettings } from 'src/queries/account/settings';

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

@@ -1,9 +1,9 @@
+import { Notice } from '@linode/ui';
 import React from 'react';
 
 import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
 import { Drawer } from 'src/components/Drawer';
-import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { PARENT_USER_SESSION_EXPIRED } from 'src/features/Account/constants';
 import { useParentChildAuthentication } from 'src/features/Account/SwitchAccounts/useParentChildAuthentication';

packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx

@@ -1,12 +1,11 @@
-import { Box, Stack } from '@linode/ui';
+import { Box, Notice, Stack } from '@linode/ui';
 import React, { useState } from 'react';
 import { Waypoint } from 'react-waypoint';
 
 import ErrorStateCloud from 'src/assets/icons/error-state-cloud.svg';
 import { Button } from 'src/components/Button/Button';
 import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 import { CircleProgress } from 'src/components/CircleProgress';
-import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { useChildAccountsInfiniteQuery } from 'src/queries/account/account';
 

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

@@ -1,10 +1,9 @@
-import { Paper } from '@linode/ui';
+import { Notice, Paper } 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';
-import { Notice } from 'src/components/Notice/Notice';
 import { Toggle } from 'src/components/Toggle/Toggle';
 import { Typography } from 'src/components/Typography';
 

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

@@ -1,4 +1,4 @@
-import { Box, Stack } from '@linode/ui';
+import { Box, Notice, Stack } from '@linode/ui';
 import { styled } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -7,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { DisplayPrice } from 'src/components/DisplayPrice';
 import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
-import { Notice } from 'src/components/Notice/Notice';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';

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

@@ -1,8 +1,8 @@
+import { Notice } from '@linode/ui';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 
 interface Actions {
@@ -18,7 +18,7 @@ interface Props extends Actions {
 }
 
 export const CreditCardDialog = (props: Props) => {
-  const { cancel, error, open, usd, isMakingPayment, executePayment } = props;
+  const { cancel, error, executePayment, isMakingPayment, open, usd } = props;
 
   return (
     <ConfirmationDialog

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

@@ -1,5 +1,5 @@
 import { makePayment } from '@linode/api-v4/lib/account';
-import { Divider, InputAdornment, Stack } from '@linode/ui';
+import { Divider, InputAdornment, Notice, Stack } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
@@ -11,7 +11,6 @@ import { Currency } from 'src/components/Currency';
 import { Drawer } from 'src/components/Drawer';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { LinearProgress } from 'src/components/LinearProgress';
-import { Notice } from 'src/components/Notice/Notice';
 import { SupportLink } from 'src/components/SupportLink';
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';

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

@@ -1,18 +1,19 @@
 import { addPromotion } from '@linode/api-v4/lib';
-import { APIError } from '@linode/api-v4/lib/types';
+import { Notice } from '@linode/ui';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import { accountQueries } from 'src/queries/account/queries';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
+import type { APIError } from '@linode/api-v4/lib/types';
+
 const useStyles = makeStyles()(() => ({
   input: {
     maxWidth: 'unset',

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

@@ -1,3 +1,4 @@
+import { Notice } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { allCountries } from 'country-region-data';
 import { useFormik } from 'formik';
@@ -6,7 +7,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import EnhancedSelect from 'src/components/EnhancedSelect/Select';
-import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import {
   getRestrictedResourceText,