From 9c8eacdd7a05b00645eaea247da31dfc17a45887 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Fri, 25 Oct 2024 17:56:06 -0400 Subject: [PATCH 1/6] Move Notice to UI package and update imports --- packages/manager/src/components/Accordion.tsx | 21 +- .../DeletionDialog/DeletionDialog.tsx | 2 +- .../manager/src/components/Dialog/Dialog.tsx | 2 +- .../DismissibleBanner.styles.ts | 3 +- .../DismissibleBanner/DismissibleBanner.tsx | 2 +- .../DrawerContent/DrawerContent.tsx | 2 +- .../src/components/Encryption/Encryption.tsx | 3 +- .../GenerateFirewallDialog.tsx | 2 +- .../MaintenanceBanner/MaintenanceBanner.tsx | 5 +- .../MultipleIPInput/MultipleIPInput.tsx | 2 +- .../ProductInformationBanner.tsx | 4 +- .../ProductNotification.tsx | 3 +- .../SingleTextFieldForm.tsx | 8 +- .../components/TabbedPanel/TabbedPanel.tsx | 2 +- packages/manager/src/components/Tile/Tile.tsx | 2 +- packages/manager/src/featureFlags.ts | 2 +- .../src/features/Account/AccountLogins.tsx | 2 +- .../src/features/Account/AutoBackups.tsx | 5 +- .../features/Account/CloseAccountDialog.tsx | 8 +- .../Account/ObjectStorageSettings.tsx | 2 +- .../features/Account/SwitchAccountDrawer.tsx | 2 +- .../SwitchAccounts/ChildAccountList.tsx | 2 +- .../src/features/Backups/AutoEnroll.tsx | 2 +- .../src/features/Backups/BackupDrawer.tsx | 5 +- .../PaymentBits/CreditCardDialog.tsx | 4 +- .../PaymentDrawer/PaymentDrawer.tsx | 11 +- .../BillingSummary/PromoDialog.tsx | 5 +- .../UpdateContactInformationForm.tsx | 2 +- .../AddCreditCardForm.tsx | 10 +- .../AddPaymentMethodDrawer.tsx | 8 +- .../Billing/InvoiceDetail/InvoiceDetail.tsx | 2 +- .../DatabaseCreate/DatabaseCreate.tsx | 5 +- .../DatabaseCreateAccessControls.tsx | 33 +- .../DatabaseDetail/AccessControls.tsx | 2 +- .../DatabaseDetail/AddAccessControlDrawer.tsx | 11 +- .../DatabaseBackups/DatabaseBackups.tsx | 34 +- .../DatabaseBackups/DatabaseBackupsDialog.tsx | 9 +- .../legacy/RestoreLegacyFromBackupDialog.tsx | 2 +- .../DatabaseResize/DatabaseResize.tsx | 128 +++--- .../DatabaseSettingsDeleteClusterDialog.tsx | 5 +- .../DatabaseSettingsResetPasswordDialog.tsx | 2 +- .../DatabaseSettings/MaintenanceWindow.tsx | 18 +- .../Databases/DatabaseDetail/index.tsx | 14 +- .../features/Domains/CloneDomainDrawer.tsx | 9 +- .../Domains/CreateDomain/CreateDomain.tsx | 2 +- .../Domains/DomainDetail/DomainDetail.tsx | 2 +- .../features/Domains/DomainRecordDrawer.tsx | 251 +++++------ .../Domains/DomainZoneImportDrawer.tsx | 5 +- .../src/features/Domains/DomainsLanding.tsx | 2 +- .../src/features/Domains/EditDomainDrawer.tsx | 12 +- .../EntityTransferCreate.styles.ts | 5 +- .../ConfirmTransferCancelDialog.tsx | 13 +- .../ConfirmTransferDialog.tsx | 13 +- .../Devices/AddLinodeDrawer.tsx | 2 +- .../Devices/AddNodebalancerDrawer.tsx | 2 +- .../Devices/FirewallDeviceLanding.tsx | 4 +- .../FirewallDetail/Rules/FirewallRuleForm.tsx | 40 +- .../Rules/FirewallRulesLanding.tsx | 2 +- .../FirewallLanding/CreateFirewallDrawer.tsx | 2 +- .../DatabaseClusterInfoBanner.tsx | 2 +- .../GlobalNotifications/EmailBounce.tsx | 6 +- .../RegionStatusBanner.tsx | 2 +- .../VerificationDetailsBanner.tsx | 2 +- .../features/Help/Panels/AlgoliaSearchBar.tsx | 14 +- .../SupportSearchLanding.tsx | 2 +- .../Images/ImagesCreate/CreateImageTab.tsx | 2 +- .../Images/ImagesCreate/ImageUpload.tsx | 4 +- .../Images/ImagesLanding/EditImageDrawer.tsx | 2 +- .../ImageRegions/ManageImageRegionsForm.tsx | 2 +- .../Images/ImagesLanding/ImagesLanding.tsx | 2 +- .../ImagesLanding/RebuildImageDrawer.tsx | 2 +- .../CreateCluster/ControlPlaneACLPane.tsx | 2 +- .../CreateCluster/CreateCluster.tsx | 4 +- .../CreateCluster/HAControlPlane.tsx | 2 +- .../KubeCheckoutBar/KubeCheckoutBar.tsx | 2 +- .../DeleteKubernetesClusterDialog.tsx | 2 +- .../KubeControlPaneACLDrawer.tsx | 2 +- .../NodePoolsDisplay/AddNodePoolDrawer.tsx | 2 +- .../NodePoolsDisplay/AutoscalePoolDialog.tsx | 2 +- .../NodePoolsDisplay/ResizeNodePoolDrawer.tsx | 2 +- .../UpgradeClusterDialog.tsx | 2 +- .../KubernetesPlanContainer.tsx | 2 +- .../Linodes/CloneLanding/CloneLanding.tsx | 2 +- .../features/Linodes/CloneLanding/Details.tsx | 13 +- .../Linodes/LinodeCreate/Addons/Addons.tsx | 2 +- .../Linodes/LinodeCreate/Addons/Backups.tsx | 2 +- .../Linodes/LinodeCreate/EUAgreement.tsx | 2 +- .../features/Linodes/LinodeCreate/Error.tsx | 2 +- .../features/Linodes/LinodeCreate/Region.tsx | 2 +- .../Tabs/Backups/BackupSelect.tsx | 5 +- .../Tabs/Backups/BackupsWarning.tsx | 2 +- .../LinodeCreate/Tabs/Clone/CloneWarning.tsx | 2 +- .../Tabs/Marketplace/AppSelect.tsx | 2 +- .../StackScripts/StackScriptSelection.tsx | 2 +- .../UserDefinedFields/UserDefinedFields.tsx | 2 +- .../LinodeCreate/UserData/UserData.tsx | 2 +- .../LinodeCreate/UserData/UserDataHeading.tsx | 2 +- .../VLAN/VLANAvailabilityNotice.tsx | 5 +- .../features/Linodes/LinodeCreate/VPC/VPC.tsx | 2 +- .../LinodeCreate/shared/LinodeSelectTable.tsx | 2 +- .../features/Linodes/LinodeEntityDetail.tsx | 2 +- .../LinodesDetail/HostMaintenanceError.tsx | 3 +- .../LinodeBackup/EnableBackupsDialog.tsx | 2 +- .../LinodeBackup/RestoreToLinodeDrawer.tsx | 2 +- .../LinodeBackup/ScheduleSettings.tsx | 2 +- .../LinodeConfigs/LinodeConfigDialog.tsx | 2 +- .../LinodeNetworking/AddIPDrawer.tsx | 2 +- .../LinodeNetworking/EditIPRDNSDrawer.tsx | 2 +- .../LinodeNetworking/EditRangeRDNSDrawer.tsx | 2 +- .../LinodeNetworking/IPSharing.tsx | 26 +- .../LinodeNetworking/IPTransfer.tsx | 2 +- .../TransferContent.tsx | 54 ++- .../LinodesDetail/LinodePermissionsError.tsx | 2 +- .../LinodeRebuild/ImageEmptyState.tsx | 2 +- .../LinodeRebuild/LinodeRebuildDialog.tsx | 2 +- .../LinodeRebuild/RebuildFromImage.styles.ts | 2 +- .../UserDataAccordion/UserDataAccordion.tsx | 2 +- .../LinodeRescue/RescueDescription.tsx | 2 +- .../LinodeRescue/StandardRescueDialog.tsx | 6 +- .../LinodeResize/LinodeResize.tsx | 2 +- .../LinodeSettings/InterfaceSelect.tsx | 2 +- .../LinodeSettingsAlertsPanel.tsx | 5 +- .../LinodeSettingsDeletePanel.tsx | 2 +- .../LinodeSettingsLabelPanel.tsx | 2 +- .../LinodeSettingsPasswordPanel.tsx | 2 +- .../LinodeSettings/LinodeWatchdogPanel.tsx | 2 +- .../LinodeStorage/CreateDiskDrawer.tsx | 2 +- .../LinodeStorage/RenameDiskDrawer.tsx | 5 +- .../LinodeStorage/ResizeDiskDrawer.tsx | 2 +- .../LinodesDetailHeader/HostMaintenance.tsx | 5 +- .../MigrationNotification.tsx | 7 +- .../MutationNotification.tsx | 2 +- .../UpgradeVolumesDialog.tsx | 2 +- .../MutateDrawer/MutateDrawer.tsx | 2 +- .../LinodesDetail/VolumesUpgradeBanner.tsx | 2 +- .../LinodesLanding/DeleteLinodeDialog.tsx | 2 +- .../Linodes/MigrateLinode/CautionNotice.tsx | 2 +- .../Linodes/MigrateLinode/ConfigureForm.tsx | 2 +- .../Linodes/MigrateLinode/MigrateLinode.tsx | 2 +- .../MigrateLinode/MigrationImminentNotice.tsx | 5 +- .../Linodes/PowerActionsDialogOrDrawer.tsx | 2 +- .../DetailTabs/Apache/Apache.tsx | 9 +- .../DetailTabs/MySQL/MySQLLanding.tsx | 7 +- .../LongviewDetail/DetailTabs/NGINX/NGINX.tsx | 7 +- .../LongviewDetail/LongviewDetail.tsx | 2 +- .../LongviewLanding/LongviewPlans.styles.ts | 2 +- .../LongviewLanding/LongviewPlans.tsx | 9 +- .../Managed/Contacts/ContactsDrawer.tsx | 12 +- .../Credentials/AddCredentialDrawer.tsx | 5 +- .../Credentials/UpdateCredentialDrawer.tsx | 5 +- .../src/features/Managed/MonitorDrawer.tsx | 20 +- .../Managed/SSHAccess/EditSSHAccessDrawer.tsx | 10 +- .../NodeBalancers/NodeBalancerConfigNode.tsx | 2 +- .../NodeBalancers/NodeBalancerConfigPanel.tsx | 2 +- .../NodeBalancers/NodeBalancerCreate.tsx | 4 +- .../NodeBalancerDeleteDialog.tsx | 2 +- .../NodeBalancerDetail/NodeBalancerDetail.tsx | 2 +- .../AccessKeyLanding/AccessKeyDrawer.tsx | 2 +- .../AccessKeyLanding/OMC_AccessKeyDrawer.tsx | 2 +- .../BucketDetail/AccessSelect.tsx | 2 +- .../ObjectStorage/BucketDetail/BucketSSL.tsx | 2 +- .../BucketLanding/BucketLanding.tsx | 2 +- .../BucketLanding/CreateBucketDrawer.tsx | 2 +- .../BucketLanding/OMC_BucketLanding.tsx | 2 +- .../BucketLanding/OMC_CreateBucketDrawer.tsx | 2 +- .../EnableObjectStorageModal.tsx | 2 +- .../PlacementGroupPolicyRadioGroup.tsx | 2 +- .../PlacementGroupsAssignLinodesDrawer.tsx | 4 +- .../PlacementGroupsCreateDrawer.tsx | 2 +- .../PlacementGroupsDeleteModal.tsx | 2 +- .../PlacementGroupsDetail.tsx | 2 +- .../PlacementGroupsSummary.tsx | 4 +- .../PlacementGroupsDetailPanel.tsx | 2 +- .../PlacementGroupsEditDrawer.tsx | 4 +- .../PlacementGroupsUnassignModal.tsx | 2 +- .../APITokens/CreateAPITokenDrawer.tsx | 2 +- .../Profile/APITokens/EditAPITokenDrawer.tsx | 2 +- .../AuthenticationSettings/SMSMessaging.tsx | 4 +- .../TPAProviders.styles.ts | 6 +- .../TwoFactor/ConfirmToken.tsx | 2 +- .../TwoFactor/EnableTwoFactorForm.tsx | 5 +- .../TwoFactor/TwoFactor.tsx | 9 +- .../Profile/DisplaySettings/TimezoneForm.tsx | 2 +- .../Profile/LishSettings/LishSettings.tsx | 5 +- .../OAuthClients/CreateOAuthClientDrawer.tsx | 2 +- .../OAuthClients/EditOAuthClientDrawer.tsx | 2 +- .../Profile/Referrals/Referrals.styles.ts | 4 +- .../features/Profile/Referrals/Referrals.tsx | 2 +- .../Profile/SSHKeys/CreateSSHKeyDrawer.tsx | 2 +- .../Profile/SSHKeys/EditSSHKeyDrawer.tsx | 2 +- .../SecretTokenDialog/SecretTokenDialog.tsx | 2 +- .../Profile/Settings/PreferenceEditor.tsx | 6 +- .../src/features/Search/SearchLanding.tsx | 4 +- .../SelectStackScriptPanel.tsx | 52 +-- .../StackScriptBase/StackScriptBase.tsx | 410 +++++++++--------- .../StackScriptCreate/StackScriptCreate.tsx | 2 +- .../StackScripts/StackScriptDialog.tsx | 13 +- .../StackScriptForm/StackScriptForm.styles.ts | 4 +- .../StackScripts/StackScriptsLanding.tsx | 2 +- .../FieldTypes/UserDefinedMultiSelect.tsx | 2 +- .../FieldTypes/UserDefinedSelect.tsx | 5 +- .../UserDefinedFieldsPanel.tsx | 2 +- .../SupportTicketDetail/AttachmentError.tsx | 3 +- .../TabbedReply/ReplyContainer.tsx | 2 +- .../SupportTickets/SupportTicketDialog.tsx | 2 +- .../src/features/Users/CreateUserDrawer.tsx | 127 +++--- .../src/features/Users/UserPermissions.tsx | 2 +- .../FormComponents/CannotCreateVPCNotice.tsx | 3 +- .../FormComponents/SubnetContent.tsx | 2 +- .../src/features/VPCs/VPCCreate/VPCCreate.tsx | 8 +- .../VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx | 2 +- .../VPCs/VPCDetail/AssignIPRanges.tsx | 2 +- .../VPCDetail/SubnetAssignLinodesDrawer.tsx | 2 +- .../VPCs/VPCDetail/SubnetCreateDrawer.tsx | 2 +- .../VPCs/VPCDetail/SubnetEditDrawer.tsx | 2 +- .../VPCDetail/SubnetUnassignLinodesDrawer.tsx | 2 +- .../VPCs/VPCLanding/VPCEditDrawer.tsx | 2 +- .../features/Volumes/AttachVolumeDrawer.tsx | 2 +- .../features/Volumes/CloneVolumeDrawer.tsx | 2 +- .../features/Volumes/DeleteVolumeDialog.tsx | 2 +- .../features/Volumes/DetachVolumeDialog.tsx | 2 +- .../src/features/Volumes/EditVolumeDrawer.tsx | 2 +- .../features/Volumes/ResizeVolumeDrawer.tsx | 5 +- .../src/features/Volumes/VolumeCreate.tsx | 2 +- .../VolumeDrawer/LinodeVolumeAddDrawer.tsx | 2 +- .../VolumeDrawer/LinodeVolumeAttachForm.tsx | 2 +- .../VolumeDrawer/LinodeVolumeCreateForm.tsx | 2 +- .../PlansPanel/DistributedRegionPlanTable.tsx | 2 +- .../components/PlansPanel/MetalNotice.tsx | 2 +- .../components/PlansPanel/PlanContainer.tsx | 4 +- .../components/PlansPanel/PlanInformation.tsx | 2 +- .../PlansPanel/PlansAvailabilityNotice.tsx | 4 +- .../components/PlansPanel/PlansPanel.tsx | 4 +- packages/ui/.eslintrc.json | 2 +- .../src/assets/icons/alert.svg | 0 .../src/assets/icons/check.svg | 0 packages/ui/src/assets/icons/index.ts | 3 + .../src/assets/icons/warning.svg | 0 packages/ui/src/assets/index.ts | 1 + .../src/components/Notice/Notice.stories.tsx | 0 .../src/components/Notice/Notice.styles.ts | 0 .../src/components/Notice/Notice.test.tsx | 27 +- .../src/components/Notice/Notice.tsx | 9 +- packages/ui/src/components/Notice/index.ts | 1 + .../{ => Tooltip}/Tooltip.stories.tsx | 0 .../src/components/{ => Tooltip}/Tooltip.tsx | 0 packages/ui/src/components/Tooltip/index.ts | 1 + packages/ui/src/components/index.ts | 1 + packages/ui/src/env.d.ts | 4 + packages/ui/src/index.ts | 1 + 250 files changed, 1037 insertions(+), 977 deletions(-) rename packages/{manager => ui}/src/assets/icons/alert.svg (100%) rename packages/{manager => ui}/src/assets/icons/check.svg (100%) create mode 100644 packages/ui/src/assets/icons/index.ts rename packages/{manager => ui}/src/assets/icons/warning.svg (100%) create mode 100644 packages/ui/src/assets/index.ts rename packages/{manager => ui}/src/components/Notice/Notice.stories.tsx (100%) rename packages/{manager => ui}/src/components/Notice/Notice.styles.ts (100%) rename packages/{manager => ui}/src/components/Notice/Notice.test.tsx (74%) rename packages/{manager => ui}/src/components/Notice/Notice.tsx (95%) create mode 100644 packages/ui/src/components/Notice/index.ts rename packages/ui/src/components/{ => Tooltip}/Tooltip.stories.tsx (100%) rename packages/ui/src/components/{ => Tooltip}/Tooltip.tsx (100%) create mode 100644 packages/ui/src/components/Tooltip/index.ts create mode 100644 packages/ui/src/env.d.ts diff --git a/packages/manager/src/components/Accordion.tsx b/packages/manager/src/components/Accordion.tsx index e3c7133630e..e3115bd5f8a 100644 --- a/packages/manager/src/components/Accordion.tsx +++ b/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: { diff --git a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx index bce1c53ad8d..89938fbeb61 100644 --- a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx +++ b/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'; diff --git a/packages/manager/src/components/Dialog/Dialog.tsx b/packages/manager/src/components/Dialog/Dialog.tsx index 5c4db71a634..3c5886868fa 100644 --- a/packages/manager/src/components/Dialog/Dialog.tsx +++ b/packages/manager/src/components/Dialog/Dialog.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import _Dialog from '@mui/material/Dialog'; import DialogContent from '@mui/material/DialogContent'; import { styled, useTheme } from '@mui/material/styles'; @@ -5,7 +6,6 @@ import * as React from 'react'; import { Box } from 'src/components/Box'; import { DialogTitle } from 'src/components/DialogTitle/DialogTitle'; -import { Notice } from 'src/components/Notice/Notice'; import { omittedProps } from 'src/utilities/omittedProps'; import { convertForAria } from 'src/utilities/stringUtils'; diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts index 7ac4261bf71..acd8cea2d56 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts +++ b/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' })( diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx index 2f1781f9125..868b171d3b8 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx +++ b/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 { diff --git a/packages/manager/src/components/DrawerContent/DrawerContent.tsx b/packages/manager/src/components/DrawerContent/DrawerContent.tsx index a19fb1949a6..bbc53f3b641 100644 --- a/packages/manager/src/components/DrawerContent/DrawerContent.tsx +++ b/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; diff --git a/packages/manager/src/components/Encryption/Encryption.tsx b/packages/manager/src/components/Encryption/Encryption.tsx index 53d94600f70..42ae5e4c3a4 100644 --- a/packages/manager/src/components/Encryption/Encryption.tsx +++ b/packages/manager/src/components/Encryption/Encryption.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { List, ListItem } from '@mui/material'; import * as React from 'react'; @@ -5,8 +6,6 @@ import { Box } from 'src/components/Box'; 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; diff --git a/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx b/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx index e102a493d0c..3b91f2338b9 100644 --- a/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx +++ b/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import React from 'react'; import { useFlags } from 'src/hooks/useFlags'; @@ -8,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 { Stack } from '../Stack'; import { Typography } from '../Typography'; import { useCreateFirewallFromTemplate } from './useCreateFirewallFromTemplate'; diff --git a/packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx b/packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx index c01acbaf9ba..2c77c1d38f9 100644 --- a/packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx +++ b/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 */ diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx index 5c52662a742..59f8351b332 100644 --- a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx +++ b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Close from '@mui/icons-material/Close'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { makeStyles } from 'tss-react/mui'; import { Button } from 'src/components/Button/Button'; import { InputLabel } from 'src/components/InputLabel'; 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'; diff --git a/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx b/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx index 43ca759db6e..b681403808a 100644 --- a/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx +++ b/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; diff --git a/packages/manager/src/components/ProductNotification/ProductNotification.tsx b/packages/manager/src/components/ProductNotification/ProductNotification.tsx index 0ee8d6eb8f0..d15bbd83c43 100644 --- a/packages/manager/src/components/ProductNotification/ProductNotification.tsx +++ b/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; diff --git a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx b/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx index 76d40aa6096..534cd14f9a7 100644 --- a/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx +++ b/packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx @@ -1,12 +1,14 @@ -import { APIError } from '@linode/api-v4/lib/types'; +import { Notice } from '@linode/ui'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Box } from 'src/components/Box'; -import { Notice } from 'src/components/Notice/Notice'; -import { TextField, TextFieldProps } from 'src/components/TextField'; +import { TextField } from 'src/components/TextField'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { TextFieldProps } from 'src/components/TextField'; + interface Props extends TextFieldProps { errorMessage?: string; fieldName?: string; diff --git a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx index 2dfcbb35378..2a29e6a3bb2 100644 --- a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx +++ b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import { 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 { Paper } from 'src/components/Paper'; import { Tab } from 'src/components/Tabs/Tab'; import { TabList } from 'src/components/Tabs/TabList'; diff --git a/packages/manager/src/components/Tile/Tile.tsx b/packages/manager/src/components/Tile/Tile.tsx index b717753b230..fd7e48ee97f 100644 --- a/packages/manager/src/components/Tile/Tile.tsx +++ b/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'; diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts index 64f07f0ed54..f2170898fea 100644 --- a/packages/manager/src/featureFlags.ts +++ b/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 diff --git a/packages/manager/src/features/Account/AccountLogins.tsx b/packages/manager/src/features/Account/AccountLogins.tsx index 7f44e77be56..f9fddc29fbb 100644 --- a/packages/manager/src/features/Account/AccountLogins.tsx +++ b/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'; diff --git a/packages/manager/src/features/Account/AutoBackups.tsx b/packages/manager/src/features/Account/AutoBackups.tsx index 0dd9a134ead..5386207805a 100644 --- a/packages/manager/src/features/Account/AutoBackups.tsx +++ b/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, diff --git a/packages/manager/src/features/Account/CloseAccountDialog.tsx b/packages/manager/src/features/Account/CloseAccountDialog.tsx index 9513c701954..78226d57fd4 100644 --- a/packages/manager/src/features/Account/CloseAccountDialog.tsx +++ b/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; diff --git a/packages/manager/src/features/Account/ObjectStorageSettings.tsx b/packages/manager/src/features/Account/ObjectStorageSettings.tsx index 316847725d7..01b2ce475c5 100644 --- a/packages/manager/src/features/Account/ObjectStorageSettings.tsx +++ b/packages/manager/src/features/Account/ObjectStorageSettings.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { Box } from 'src/components/Box'; 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 { Stack } from 'src/components/Stack'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx index 50f546ae1de..0c89986ada2 100644 --- a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx +++ b/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'; diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx index 145799f445b..f3cbcb22ca0 100644 --- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx +++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; @@ -6,7 +7,6 @@ import { Box } from 'src/components/Box'; 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 { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useChildAccountsInfiniteQuery } from 'src/queries/account/account'; diff --git a/packages/manager/src/features/Backups/AutoEnroll.tsx b/packages/manager/src/features/Backups/AutoEnroll.tsx index f3b9ee4cca1..507b3ae4c09 100644 --- a/packages/manager/src/features/Backups/AutoEnroll.tsx +++ b/packages/manager/src/features/Backups/AutoEnroll.tsx @@ -1,9 +1,9 @@ +import { Notice } 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 { Paper } from 'src/components/Paper'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Backups/BackupDrawer.tsx b/packages/manager/src/features/Backups/BackupDrawer.tsx index 78d57897801..a60826ee012 100644 --- a/packages/manager/src/features/Backups/BackupDrawer.tsx +++ b/packages/manager/src/features/Backups/BackupDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -7,7 +8,6 @@ import { Box } from 'src/components/Box'; 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 { Stack } from 'src/components/Stack'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; @@ -31,11 +31,12 @@ import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants'; import { AutoEnroll } from './AutoEnroll'; import { BackupLinodeRow } from './BackupLinodeRow'; import { - EnableBackupsRejectedResult, getFailureNotificationText, useEnableBackupsOnLinodesMutation, } from './utils'; +import type { EnableBackupsRejectedResult } from './utils'; + interface Props { onClose: () => void; open: boolean; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx index e07974e3fd3..5741aff6eef 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx +++ b/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 ( ({ button: { diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx index 5ec2a7d0cc0..519cb89c2b5 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx @@ -1,5 +1,5 @@ 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'; @@ -7,12 +7,13 @@ 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', diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx index 0bab8d585f8..1d85088674b 100644 --- a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx +++ b/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, diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx index 5644c16737c..b41b64996dc 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx @@ -1,22 +1,24 @@ import { addPaymentMethod } from '@linode/api-v4/lib'; +import { Notice } from '@linode/ui'; import { CreditCardSchema } from '@linode/validation'; -import { InputBaseComponentProps } from '@mui/material/InputBase/InputBase'; -import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; import { useFormik, yupToFormErrors } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import NumberFormat, { NumberFormatProps } from 'react-number-format'; +import NumberFormat from 'react-number-format'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { accountQueries } from 'src/queries/account/queries'; import { parseExpiryYear } from 'src/utilities/creditCard'; import { handleAPIErrors } from 'src/utilities/formikErrorUtils'; +import type { InputBaseComponentProps } from '@mui/material/InputBase/InputBase'; +import type { Theme } from '@mui/material/styles'; +import type { NumberFormatProps } from 'react-number-format'; + const useStyles = makeStyles()((theme: Theme) => ({ error: { marginTop: theme.spacing(2), diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx index de74330f0df..075f1f929f8 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx @@ -1,13 +1,11 @@ -import { PaymentMethod } from '@linode/api-v4/lib/account'; +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; -import { VariantType } from 'notistack'; import * as React from 'react'; import { Box } from 'src/components/Box'; import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { LinearProgress } from 'src/components/LinearProgress'; -import { Notice, NoticeVariant } from 'src/components/Notice/Notice'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { MAXIMUM_PAYMENT_METHODS } from 'src/constants'; @@ -20,6 +18,10 @@ import { PayPalChip } from '../PayPalChip'; import { PayPalErrorBoundary } from '../PayPalErrorBoundary'; import AddCreditCardForm from './AddCreditCardForm'; +import type { PaymentMethod } from '@linode/api-v4/lib/account'; +import type { NoticeVariant } from '@linode/ui'; +import type { VariantType } from 'notistack'; + interface Props { onClose: () => void; open: boolean; diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx index 0d8d022c17b..7f54cdba961 100644 --- a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx +++ b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx @@ -1,4 +1,5 @@ import { getInvoice, getInvoiceItems } from '@linode/api-v4/lib/account'; +import { Notice } from '@linode/ui'; import { IconButton } from '@linode/ui'; import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; import { useTheme } from '@mui/material/styles'; @@ -13,7 +14,6 @@ import { Currency } from 'src/components/Currency'; import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV'; import { LandingHeader } from 'src/components/LandingHeader'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { Typography } from 'src/components/Typography'; import { printInvoice } from 'src/features/Billing/PdfGenerator/PdfGenerator'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index cb092f26b0e..54d8f90ac56 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { BetaChip } from '@linode/ui'; import { createDatabaseSchema } from '@linode/validation/lib/databases.schema'; import Grid from '@mui/material/Unstable_Grid2'; @@ -21,7 +22,6 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { FormControl } from 'src/components/FormControl'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; @@ -48,6 +48,8 @@ import { getSelectedOptionFromGroupedOptions } from 'src/utilities/getSelectedOp import { validateIPs } from 'src/utilities/ipUtils'; import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2'; +import { DatabaseCreateAccessControls } from './DatabaseCreateAccessControls'; + import type { ClusterSize, ComprehensiveReplicationType, @@ -62,7 +64,6 @@ import type { Theme } from '@mui/material/styles'; import type { Item } from 'src/components/EnhancedSelect/Select'; import type { PlanSelectionType } from 'src/features/components/PlansPanel/types'; import type { ExtendedIP } from 'src/utilities/ipUtils'; -import { DatabaseCreateAccessControls } from './DatabaseCreateAccessControls'; const useStyles = makeStyles()((theme: Theme) => ({ btnCtn: { diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx index f1de43bcd2a..141a31b3330 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx @@ -1,36 +1,41 @@ -import type { APIError } from '@linode/api-v4/lib/types'; -import { Theme } from '@mui/material/styles'; +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; +import { useState } from 'react'; import * as React from 'react'; -import { ChangeEvent, useState } 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 { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; import { Typography } from 'src/components/Typography'; -import { ExtendedIP, ipFieldPlaceholder } from 'src/utilities/ipUtils'; -import { makeStyles } from 'tss-react/mui'; +import { ipFieldPlaceholder } from 'src/utilities/ipUtils'; + import { useIsDatabasesEnabled } from '../utilities'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { Theme } from '@mui/material/styles'; +import type { ChangeEvent } from 'react'; +import type { ExtendedIP } from 'src/utilities/ipUtils'; + const useStyles = makeStyles()((theme: Theme) => ({ - header: { - marginBottom: theme.spacing(0.5), - }, - subHeader: { - marginTop: theme.spacing(2), - }, container: { marginTop: theme.spacing(3), maxWidth: 450, }, + header: { + marginBottom: theme.spacing(0.5), + }, multipleIPInput: { marginLeft: theme.spacing(4), }, + subHeader: { + marginTop: theme.spacing(2), + }, })); -export type AccessOption = 'specific' | 'none'; +export type AccessOption = 'none' | 'specific'; interface Props { errors?: APIError[]; @@ -61,7 +66,7 @@ export const DatabaseCreateAccessControls = (props: Props) => { <> Add IPv4 addresses or ranges that should be authorized to access - this cluster.  + this cluster. Learn more diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx index a1b7f157ec9..3aa2521e3ae 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -5,7 +6,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Button } from 'src/components/Button/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; -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'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx index e05dd1d9a8e..c14f0c7e768 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx @@ -1,26 +1,27 @@ -import { APIError } from '@linode/api-v4/lib/types'; -import { Theme } from '@mui/material/styles'; +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { Database, DatabaseInstance } from '@linode/api-v4'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { enforceIPMasks } from 'src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.utils'; import { useDatabaseMutation } from 'src/queries/databases/databases'; import { handleAPIErrors } from 'src/utilities/formikErrorUtils'; import { - ExtendedIP, extendedIPToString, ipFieldPlaceholder, stringToExtendedIP, validateIPs, } from 'src/utilities/ipUtils'; +import type { Database, DatabaseInstance } from '@linode/api-v4'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { Theme } from '@mui/material/styles'; +import type { ExtendedIP } from 'src/utilities/ipUtils'; + const useStyles = makeStyles()((theme: Theme) => ({ instructions: { marginBottom: '2rem', diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx index 7fe48d86f24..0842a33bc8b 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx @@ -1,4 +1,4 @@ -import type { Engine } from '@linode/api-v4/lib/databases'; +import { Notice } from '@linode/ui'; import { FormControl, FormControlLabel, @@ -11,10 +11,11 @@ import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon'; import { DateTime } from 'luxon'; import * as React from 'react'; import { useParams } from 'react-router-dom'; + +import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { Divider } from 'src/components/Divider'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { Typography } from 'src/components/Typography'; import { @@ -22,17 +23,18 @@ import { StyledTypography, useStyles, } from 'src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.style'; - -import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { isDateOutsideBackup, isTimeOutsideBackup, useIsDatabasesEnabled, } from 'src/features/Databases/utilities'; import { useDatabaseQuery } from 'src/queries/databases/databases'; + import DatabaseBackupsDialog from './DatabaseBackupsDialog'; import DatabaseBackupsLegacy from './legacy/DatabaseBackupsLegacy'; +import type { Engine } from '@linode/api-v4/lib/databases'; + interface Props { disabled?: boolean; } @@ -69,7 +71,7 @@ const TIME_OPTIONS: TimeOption[] = [ { label: '23:00', value: 23 }, ]; -export type VersionOption = 'newest' | 'dateTime'; +export type VersionOption = 'dateTime' | 'newest'; export const DatabaseBackups = (props: Props) => { const { classes } = useStyles(); @@ -187,10 +189,10 @@ export const DatabaseBackups = (props: Props) => { Date isDateOutsideBackup(date, oldestBackup?.startOf('day')) } + disabled={disabled || versionOption === 'newest'} onChange={handleDateChange} value={selectedDate} /> @@ -201,19 +203,12 @@ export const DatabaseBackups = (props: Props) => { {/* TODO: Replace Time Select to the own custom date-time picker component when it's ready */} isTimeOutsideBackup(option.value, selectedDate!, oldestBackup!) } - label="" isOptionEqualToValue={(option, value) => option.value === value.value } - onChange={(_, newTime) => setSelectedTime(newTime)} - options={TIME_OPTIONS} - placeholder="Choose a time" renderOption={(props, option) => { const { key, ...rest } = props; return ( @@ -227,6 +222,13 @@ export const DatabaseBackups = (props: Props) => { 'data-qa-time-select': true, }, }} + autoComplete={false} + className={classes.timeAutocomplete} + disabled={disabled || !selectedDate || versionOption === 'newest'} + label="" + onChange={(_, newTime) => setSelectedTime(newTime)} + options={TIME_OPTIONS} + placeholder="Choose a time" value={selectedTime} /> @@ -235,11 +237,11 @@ export const DatabaseBackups = (props: Props) => { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx index bea6fc91ef4..65a465ba718 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { @@ -19,7 +20,6 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { Divider } from 'src/components/Divider'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { usePrevious } from 'src/hooks/usePrevious'; import { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx index c0b65afd2e6..c322fae26c2 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferContent.tsx @@ -1,10 +1,10 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { BarPercent } from 'src/components/BarPercent'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { StyledLinodeUsage, @@ -90,32 +90,30 @@ export const TransferContent = (props: ContentProps) => { value={Math.ceil(linodeUsagePercent)} valueBuffer={Math.ceil(totalUsagePercent)} /> - <> - - - {linodeLabel} ({linodeUsedInGB} GB - {Math.ceil(linodeUsagePercent)} - %) - - - - - {isDynamicPricingDC - ? `${regionName} Transfer Used (${totalUsedInGB} GB - ${Math.ceil( - totalUsagePercent - )}%)` - : `Global Pool Used (${totalUsedInGB} GB - ${Math.ceil( - totalUsagePercent - )}%)`} - - - - - {isDynamicPricingDC - ? `${regionName} Transfer Remaining (${remainingInGB} GB)` - : `Global Pool Remaining (${remainingInGB} GB)`} - - - + + + {linodeLabel} ({linodeUsedInGB} GB - {Math.ceil(linodeUsagePercent)} + %) + + + + + {isDynamicPricingDC + ? `${regionName} Transfer Used (${totalUsedInGB} GB - ${Math.ceil( + totalUsagePercent + )}%)` + : `Global Pool Used (${totalUsedInGB} GB - ${Math.ceil( + totalUsagePercent + )}%)`} + + + + + {isDynamicPricingDC + ? `${regionName} Transfer Remaining (${remainingInGB} GB)` + : `Global Pool Remaining (${remainingInGB} GB)`} + + ); }; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx index 23951d4edcc..3a78d55b03e 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx @@ -1,6 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { getRestrictedResourceText } from 'src/features/Account/utils'; export const LinodePermissionsError = () => ( diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/ImageEmptyState.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/ImageEmptyState.tsx index 6b3270fdfac..e42dbccdfe5 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/ImageEmptyState.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/ImageEmptyState.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx index a097c780f3c..8a72b90b056 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Dialog } from 'src/components/Dialog/Dialog'; import EnhancedSelect from 'src/components/EnhancedSelect/Select'; import { ErrorMessage } from 'src/components/ErrorMessage'; -import { Notice } from 'src/components/Notice/Notice'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { Typography } from 'src/components/Typography'; import { useLinodeQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts index a031081ee54..bf473765e04 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Notice } from 'src/components/Notice/Notice'; export const StyledNotice = styled(Notice, { label: 'StyledNotice' })({ marginBottom: '0px !important', diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/UserDataAccordion/UserDataAccordion.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/UserDataAccordion/UserDataAccordion.tsx index 354b1b73693..31aeb086433 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/UserDataAccordion/UserDataAccordion.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/UserDataAccordion/UserDataAccordion.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Accordion } from 'src/components/Accordion'; import { Box } from 'src/components/Box'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx index c4a9c1eeb62..fd51eca05c7 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { lishLaunch } from 'src/features/Lish/lishUtils'; import { useLinodeFirewallsQuery } from 'src/queries/linodes/firewalls'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx index c7f074f58bd..890d9667608 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import { useSnackbar } from 'notistack'; import { assoc, clamp, equals, pathOr } from 'ramda'; @@ -7,7 +8,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Button } from 'src/components/Button/Button'; import { Dialog } from 'src/components/Dialog/Dialog'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { usePrevious } from 'src/hooks/usePrevious'; import { useEventsPollingActions } from 'src/queries/events/events'; @@ -229,18 +229,18 @@ export const StandardRescueDialog = (props: Props) => { slots={['sda', 'sdb', 'sdc', 'sdd', 'sde', 'sdf', 'sdg']} /> void; diff --git a/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx b/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx index fdb44a8ea4f..098fde3c6d0 100644 --- a/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx +++ b/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx @@ -1,16 +1,17 @@ -import { CredentialPayload } from '@linode/api-v4/lib/managed'; +import { Notice } from '@linode/ui'; import { Formik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { TextField } from 'src/components/TextField'; import { handleFormikBlur } from 'src/utilities/formikTrimUtil'; import { creationSchema } from './credential.schema'; +import type { CredentialPayload } from '@linode/api-v4/lib/managed'; + const PasswordInput = React.lazy( () => import('src/components/PasswordInput/PasswordInput') ); diff --git a/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx b/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx index dbc382a18f2..c3114d00e66 100644 --- a/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx +++ b/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx @@ -1,16 +1,17 @@ -import { CredentialPayload } from '@linode/api-v4/lib/managed'; +import { Notice } from '@linode/ui'; import { Formik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { TextField } from 'src/components/TextField'; import { handleFormikBlur } from 'src/utilities/formikTrimUtil'; import { updateLabelSchema, updatePasswordSchema } from './credential.schema'; +import type { CredentialPayload } from '@linode/api-v4/lib/managed'; + const PasswordInput = React.lazy( () => import('src/components/PasswordInput/PasswordInput') ); diff --git a/packages/manager/src/features/Managed/MonitorDrawer.tsx b/packages/manager/src/features/Managed/MonitorDrawer.tsx index b39593d9ffa..f5cfd7d7705 100644 --- a/packages/manager/src/features/Managed/MonitorDrawer.tsx +++ b/packages/manager/src/features/Managed/MonitorDrawer.tsx @@ -1,9 +1,4 @@ -import { - ManagedCredential, - ManagedServiceMonitor, - ManagedServicePayload, - ServiceType, -} from '@linode/api-v4/lib/managed'; +import { Notice } from '@linode/ui'; import { createServiceMonitorSchema } from '@linode/validation/lib/managed.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { Formik } from 'formik'; @@ -12,10 +7,17 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import Select, { Item } from 'src/components/EnhancedSelect/Select'; -import { Notice } from 'src/components/Notice/Notice'; -import { TextField } from 'src/components/TextField'; +import Select from 'src/components/EnhancedSelect/Select'; import { InputAdornment } from 'src/components/InputAdornment'; +import { TextField } from 'src/components/TextField'; + +import type { + ManagedCredential, + ManagedServiceMonitor, + ManagedServicePayload, + ServiceType, +} from '@linode/api-v4/lib/managed'; +import type { Item } from 'src/components/EnhancedSelect/Select'; export interface MonitorDrawerProps { credentials: ManagedCredential[]; diff --git a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx index be63b6a4e08..758f6251cb0 100644 --- a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx @@ -1,13 +1,12 @@ -import { ManagedLinodeSetting } from '@linode/api-v4/lib/managed'; +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; -import { Formik, FormikHelpers } from 'formik'; +import { Formik } 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 { IPSelect } from 'src/components/IPSelect/IPSelect'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle/Toggle'; import { useUpdateLinodeSettingsMutation } from 'src/queries/managed/managed'; @@ -17,12 +16,15 @@ import { } from 'src/utilities/formikErrorUtils'; import { isPrivateIP, removePrefixLength } from 'src/utilities/ipUtils'; +import { DEFAULTS } from './common'; import { StyledIPGrid, StyledPortGrid, StyledTypography, } from './EditSSHAccessDrawer.styles'; -import { DEFAULTS } from './common'; + +import type { ManagedLinodeSetting } from '@linode/api-v4/lib/managed'; +import type { FormikHelpers } from 'formik'; interface EditSSHAccessDrawerProps { closeDrawer: () => void; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx index c97f7bc1345..fe7b70feddb 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -7,7 +8,6 @@ import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { Chip } from 'src/components/Chip'; import { Divider } from 'src/components/Divider'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { getErrorMap } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx index 0e4995c1173..a23cc1fc85c 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -8,7 +9,6 @@ import { Button } from 'src/components/Button/Button'; import { Divider } from 'src/components/Divider'; import { FormHelperText } from 'src/components/FormHelperText'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx index 8957d664cc4..76d07f136de 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material'; import useMediaQuery from '@mui/material/useMediaQuery'; import { createLazyRoute } from '@tanstack/react-router'; @@ -24,7 +25,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { LandingHeader } from 'src/components/LandingHeader'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { SelectFirewallPanel } from 'src/components/SelectFirewallPanel/SelectFirewallPanel'; @@ -55,8 +55,8 @@ import { sendCreateNodeBalancerEvent } from 'src/utilities/analytics/customEvent import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getGDPRDetails } from 'src/utilities/formatRegion'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; -import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants'; import { PRICE_ERROR_TOOLTIP_TEXT } from 'src/utilities/pricing/constants'; +import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants'; import { getDCSpecificPriceByType, renderMonthlyPriceToCorrectDecimalPlace, diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx index 982963c6716..adafe73aa42 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; import { useNodebalancerDeleteMutation } from 'src/queries/nodebalancers'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx index 14ce668e8ca..5def42f3069 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { @@ -10,7 +11,6 @@ import { import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { TabLinkList } from 'src/components/Tabs/TabLinkList'; import { TabPanels } from 'src/components/Tabs/TabPanels'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx index ec1772b47c2..5b98653ade1 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { createObjectStorageKeysSchema } from '@linode/validation/lib/objectStorageKeys.schema'; import { Formik } from 'formik'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { useAccountSettings } from 'src/queries/account/settings'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx index d2800c937b5..4d3f0b058a9 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { createObjectStorageKeysSchema, updateObjectStorageKeysSchema, @@ -9,7 +10,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { useAccountSettings } from 'src/queries/account/settings'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx index 362a8b21f74..6e60543b31e 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; @@ -6,7 +7,6 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; 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 { useOpenClose } from 'src/hooks/useOpenClose'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx index e3ed6211e24..4b4caf6b163 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useFormik } from 'formik'; @@ -10,7 +11,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx index 0c8115d8b5c..3364a09a270 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -6,7 +7,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import OrderBy from 'src/components/OrderBy'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx index 3adc16b1863..93e60b33c19 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx @@ -1,4 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; +import { Notice } from '@linode/ui'; import { CreateBucketSchema } from '@linode/validation'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { Controller, useForm } from 'react-hook-form'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { EUAgreementCheckbox } from 'src/features/Account/Agreements/EUAgreementCheckbox'; import { diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx index df19e2f4efa..1c595b05674 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -6,7 +7,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import OrderBy from 'src/components/OrderBy'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx index c1ba644e64d..dc3080c7efa 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx @@ -1,4 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; +import { Notice } from '@linode/ui'; import { CreateBucketSchema } from '@linode/validation'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; @@ -7,7 +8,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { BucketRateLimitTable } from 'src/features/ObjectStorage/BucketLanding/BucketRateLimitTable'; diff --git a/packages/manager/src/features/ObjectStorage/EnableObjectStorageModal.tsx b/packages/manager/src/features/ObjectStorage/EnableObjectStorageModal.tsx index 10299d74625..ffe51b118b4 100644 --- a/packages/manager/src/features/ObjectStorage/EnableObjectStorageModal.tsx +++ b/packages/manager/src/features/ObjectStorage/EnableObjectStorageModal.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useObjectStorageTypesQuery } from 'src/queries/object-storage/queries'; import { diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx index f50763a2c44..fd2beeeda70 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Box } from 'src/components/Box'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; -import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx index a7662421b52..49c4edb540a 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx @@ -1,7 +1,8 @@ import { - PLACEMENT_GROUP_TYPES, PLACEMENT_GROUP_POLICIES, + PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -10,7 +11,6 @@ import { Box } from 'src/components/Box'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { Stack } from 'src/components/Stack'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx index 16469439483..2be98b97516 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { createPlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -10,7 +11,6 @@ import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; -import { Notice } from 'src/components/Notice/Notice'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx index 383bbc74093..902bd710643 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; -import { Notice } from 'src/components/Notice/Notice'; import { RemovableSelectionsList } from 'src/components/RemovableSelectionsList/RemovableSelectionsList'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx index fce4cd920c0..27280179d3d 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx @@ -1,4 +1,5 @@ import { PLACEMENT_GROUP_TYPES } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useParams } from 'react-router-dom'; @@ -8,7 +9,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; -import { Notice } from 'src/components/Notice/Notice'; import { getRestrictedResourceText } from 'src/features/Account/utils'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx index 1778518729c..ab48c3bf67b 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx @@ -1,7 +1,8 @@ import { - PLACEMENT_GROUP_TYPES, PLACEMENT_GROUP_POLICIES, + PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -9,7 +10,6 @@ import * as React from 'react'; import { Box } from 'src/components/Box'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx index 29aaa7f91f6..4f066fd612d 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { ListItem } from 'src/components/ListItem'; -import { Notice } from 'src/components/Notice/Notice'; import { PlacementGroupsSelect } from 'src/components/PlacementGroupsSelect/PlacementGroupsSelect'; import { TextTooltip } from 'src/components/TextTooltip'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx index 2689d6229a1..3004269c9b4 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx @@ -1,7 +1,8 @@ import { - PLACEMENT_GROUP_TYPES, PLACEMENT_GROUP_POLICIES, + PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import { updatePlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -14,7 +15,6 @@ import { DescriptionList } from 'src/components/DescriptionList/DescriptionList' import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { NotFound } from 'src/components/NotFound'; -import { Notice } from 'src/components/Notice/Notice'; import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; import { useFormValidateOnChange } from 'src/hooks/useFormValidateOnChange'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx index 5d41f301424..8b179291dde 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useParams } from 'react-router-dom'; @@ -6,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { NotFound } from 'src/components/NotFound'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; import { useLinodeQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx index 2156c1524fc..e6722784925 100644 --- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx +++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import { DateTime } from 'luxon'; import * as React from 'react'; @@ -7,7 +8,6 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Drawer } from 'src/components/Drawer'; import { FormControl } from 'src/components/FormControl'; import { FormHelperText } from 'src/components/FormHelperText'; -import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx index 3aba5fb979f..5c4e9b2bc74 100644 --- a/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx +++ b/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx @@ -1,9 +1,9 @@ +import { Notice } 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 { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { useUpdatePersonalAccessTokenMutation } from 'src/queries/profile/tokens'; import { getErrorMap } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SMSMessaging.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SMSMessaging.tsx index 04c6ab8247b..2a017d2c0b3 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/SMSMessaging.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/SMSMessaging.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -7,10 +8,9 @@ import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; -import { useSMSOptOutMutation } from 'src/queries/profile/profile'; import { useProfile } from 'src/queries/profile/profile'; +import { useSMSOptOutMutation } from 'src/queries/profile/profile'; import { getFormattedNumber } from './PhoneVerification/helpers'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.styles.ts index 928294c5572..bd34be1a2f6 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.styles.ts +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.styles.ts @@ -1,10 +1,10 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import { Button } from 'src/components/Button/Button'; -import { Notice } from 'src/components/Notice/Notice'; -import { Typography } from 'src/components/Typography'; import { Paper } from 'src/components/Paper'; +import { Typography } from 'src/components/Typography'; export const StyledRootContainer = styled(Paper, { label: 'StyledRootContainer', diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx index f81eed13103..3fdcd854a25 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx index 118739bf97c..fdff73742c8 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx @@ -1,16 +1,17 @@ import { confirmTwoFactor } from '@linode/api-v4/lib/profile'; -import { APIError } from '@linode/api-v4/lib/types'; +import { Notice } from '@linode/ui'; import * as React from 'react'; import { CircleProgress } from 'src/components/CircleProgress'; import { Divider } from 'src/components/Divider'; -import { Notice } from 'src/components/Notice/Notice'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView'; import { ConfirmToken } from './ConfirmToken'; import { QRCodeForm } from './QRCodeForm'; +import type { APIError } from '@linode/api-v4/lib/types'; + interface Props { loading: boolean; onCancel: () => void; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx index 9dd8382c268..fc5fde78603 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx @@ -1,11 +1,11 @@ import { getTFAToken } from '@linode/api-v4/lib/profile'; -import { APIError } from '@linode/api-v4/lib/types'; -import * as React from 'react'; +import { Notice } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; +import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; +import { profileQueries } from 'src/queries/profile/profile'; import { useSecurityQuestions } from 'src/queries/profile/securityQuestions'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; @@ -19,7 +19,8 @@ import { StyledRootContainer, } from './TwoFactor.styles'; import { TwoFactorToggle } from './TwoFactorToggle'; -import { profileQueries } from 'src/queries/profile/profile'; + +import type { APIError } from '@linode/api-v4/lib/types'; export interface TwoFactorProps { disabled?: boolean; diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx index 7fe803e8c18..1374fc63ed3 100644 --- a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx +++ b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { DateTime } from 'luxon'; import { useSnackbar } from 'notistack'; @@ -7,7 +8,6 @@ import { timezones } from 'src/assets/timezones/timezones'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { useMutateProfile, useProfile } from 'src/queries/profile/profile'; interface Props { diff --git a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx index 952eb980ce0..a24d3f71cdf 100644 --- a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx +++ b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx @@ -1,4 +1,6 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; +import { createLazyRoute } from '@tanstack/react-router'; import { equals, lensPath, remove, set } from 'ramda'; import * as React from 'react'; @@ -8,12 +10,9 @@ import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { FormControl } from 'src/components/FormControl'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; -import { createLazyRoute } from '@tanstack/react-router'; - import { useMutateProfile, useProfile } from 'src/queries/profile/profile'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx b/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx index 36a783ae129..b8c96d644ba 100644 --- a/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { Checkbox } from 'src/components/Checkbox'; import { Drawer } from 'src/components/Drawer'; import { FormControl } from 'src/components/FormControl'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { useCreateOAuthClientMutation } from 'src/queries/account/oauth'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx b/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx index 67cf9149f7d..06f23491fcf 100644 --- a/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { Checkbox } from 'src/components/Checkbox'; import { Drawer } from 'src/components/Drawer'; import { FormControl } from 'src/components/FormControl'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { useUpdateOAuthClientMutation } from 'src/queries/account/oauth'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/Profile/Referrals/Referrals.styles.ts b/packages/manager/src/features/Profile/Referrals/Referrals.styles.ts index cca81a2f77e..68fac0090c6 100644 --- a/packages/manager/src/features/Profile/Referrals/Referrals.styles.ts +++ b/packages/manager/src/features/Profile/Referrals/Referrals.styles.ts @@ -1,7 +1,7 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; export const StyledResultsWrapper = styled('div', { diff --git a/packages/manager/src/features/Profile/Referrals/Referrals.tsx b/packages/manager/src/features/Profile/Referrals/Referrals.tsx index 79dc5fa98c3..bf56c77c133 100644 --- a/packages/manager/src/features/Profile/Referrals/Referrals.tsx +++ b/packages/manager/src/features/Profile/Referrals/Referrals.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; @@ -9,7 +10,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { Typography } from 'src/components/Typography'; import { useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx index b845b8a2039..3236b371132 100644 --- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Code } from 'src/components/Code/Code'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { useCreateSSHKeyMutation } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx index 05a0393ecc5..49078d5333d 100644 --- a/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -5,7 +6,6 @@ import { useEffect } from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { useUpdateSSHKeyMutation } from 'src/queries/profile/profile'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx index b5f225153c4..58a95266a9d 100644 --- a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx +++ b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -5,7 +6,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Box } from 'src/components/Box'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField'; -import { Notice } from 'src/components/Notice/Notice'; import { CopyAllHostnames } from 'src/features/ObjectStorage/AccessKeyLanding/CopyAllHostnames'; import { HostNamesList } from 'src/features/ObjectStorage/AccessKeyLanding/HostNamesList'; import { useAccountManagement } from 'src/hooks/useAccountManagement'; diff --git a/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx b/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx index dd2fc9ac06c..bafd6d837e1 100644 --- a/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx +++ b/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx @@ -1,16 +1,18 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; -import { Dialog, DialogProps } from 'src/components/Dialog/Dialog'; +import { Dialog } from 'src/components/Dialog/Dialog'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useMutatePreferences, usePreferences, } from 'src/queries/profile/preferences'; +import type { DialogProps } from 'src/components/Dialog/Dialog'; + type Props = Pick; export const PreferenceEditor = (props: Props) => { diff --git a/packages/manager/src/features/Search/SearchLanding.tsx b/packages/manager/src/features/Search/SearchLanding.tsx index 4ed6f58a824..383c50ffec1 100644 --- a/packages/manager/src/features/Search/SearchLanding.tsx +++ b/packages/manager/src/features/Search/SearchLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import { equals } from 'ramda'; @@ -5,7 +6,6 @@ import * as React from 'react'; import { debounce } from 'throttle-debounce'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useAPISearch } from 'src/features/Search/useAPISearch'; import { useIsLargeAccount } from 'src/hooks/useIsLargeAccount'; @@ -28,6 +28,7 @@ import { isNilOrEmpty } from 'src/utilities/isNilOrEmpty'; import { isNotNullOrUndefined } from 'src/utilities/nullOrUndefined'; import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; +import { useIsDatabasesEnabled } from '../Databases/utilities'; import { getImageLabelForLinode } from '../Images/utils'; import { ResultGroup } from './ResultGroup'; import './searchLanding.css'; @@ -43,7 +44,6 @@ import withStoreSearch from './withStoreSearch'; import type { SearchProps } from './withStoreSearch'; import type { RouteComponentProps } from 'react-router-dom'; -import { useIsDatabasesEnabled } from '../Databases/utilities'; const displayMap = { buckets: 'Buckets', diff --git a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx index 007a63c7914..396a838e9b2 100644 --- a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx +++ b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx @@ -1,25 +1,14 @@ -import { Grant } from '@linode/api-v4/lib/account'; -import { Image } from '@linode/api-v4/lib/images'; -import { Linode } from '@linode/api-v4/lib/linodes'; -import { - StackScript, - UserDefinedField, - getStackScript, -} from '@linode/api-v4/lib/stackscripts'; -import { Filter, Params, ResourcePage } from '@linode/api-v4/lib/types'; +import { getStackScript } from '@linode/api-v4/lib/stackscripts'; +import { Notice } from '@linode/ui'; import * as React from 'react'; import { compose } from 'recompose'; import { Box } from 'src/components/Box'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; -import { RenderGuard, RenderGuardProps } from 'src/components/RenderGuard'; +import { RenderGuard } from 'src/components/RenderGuard'; import { Typography } from 'src/components/Typography'; -import { - WithProfileProps, - withProfile, -} from 'src/containers/profile.container'; +import { withProfile } from 'src/containers/profile.container'; import { formatDate } from 'src/utilities/formatDate'; import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; import { truncate } from 'src/utilities/truncate'; @@ -34,6 +23,17 @@ import { import SelectStackScriptPanelContent from './SelectStackScriptPanelContent'; import StackScriptSelectionRow from './StackScriptSelectionRow'; +import type { Grant } from '@linode/api-v4/lib/account'; +import type { Image } from '@linode/api-v4/lib/images'; +import type { Linode } from '@linode/api-v4/lib/linodes'; +import type { + StackScript, + UserDefinedField, +} from '@linode/api-v4/lib/stackscripts'; +import type { Filter, Params, ResourcePage } from '@linode/api-v4/lib/types'; +import type { RenderGuardProps } from 'src/components/RenderGuard'; +import type { WithProfileProps } from 'src/containers/profile.container'; + export interface ExtendedLinode extends Linode { heading: string; subHeadings: string[]; @@ -76,6 +76,17 @@ class SelectStackScriptPanel extends React.Component< SelectStackScriptPanelProps, State > { + mounted: boolean = false; + + resetStackScript = () => { + this.setState({ stackScript: undefined, stackScriptLoading: false }); + }; + + state: State = { + stackScriptError: false, + stackScriptLoading: false, + }; + componentDidMount() { const selected = +getQueryParamFromQueryString( location.search, @@ -187,17 +198,6 @@ class SelectStackScriptPanel extends React.Component< ); } - - mounted: boolean = false; - - resetStackScript = () => { - this.setState({ stackScript: undefined, stackScriptLoading: false }); - }; - - state: State = { - stackScriptError: false, - stackScriptLoading: false, - }; } export default compose( diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx index e08a0db4129..a08edd0ce3d 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx @@ -1,9 +1,7 @@ -import { Image } from '@linode/api-v4/lib/images'; -import { StackScript } from '@linode/api-v4/lib/stackscripts'; -import { APIError, Filter, ResourcePage } from '@linode/api-v4/lib/types'; +import { Notice } from '@linode/ui'; import { pathOr } from 'ramda'; import * as React from 'react'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import { Waypoint } from 'react-waypoint'; import { compose } from 'recompose'; @@ -11,12 +9,7 @@ import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Notice } from 'src/components/Notice/Notice'; -import { - WithProfileProps, - withProfile, -} from 'src/containers/profile.container'; -import { WithQueryClientProps } from 'src/containers/withQueryClient.container'; +import { withProfile } from 'src/containers/profile.container'; import { isLinodeKubeImageId } from 'src/store/image/image.helpers'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getDisplayName } from 'src/utilities/getDisplayName'; @@ -25,11 +18,9 @@ import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; import { StackScriptTableHead } from '../Partials/StackScriptTableHead'; import { - AcceptedFilters, generateCatchAllFilter, generateSpecificFilter, } from '../stackScriptUtils'; -import { StackScriptsRequest } from '../types'; import { StyledContentDiv, StyledDebouncedSearchTextfield, @@ -40,6 +31,15 @@ import { } from './StackScriptBase.styles'; import { StackScriptsEmptyLandingState } from './StackScriptsEmptyLandingPage'; +import type { AcceptedFilters } from '../stackScriptUtils'; +import type { StackScriptsRequest } from '../types'; +import type { Image } from '@linode/api-v4/lib/images'; +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; +import type { APIError, Filter, ResourcePage } from '@linode/api-v4/lib/types'; +import type { RouteComponentProps } from 'react-router-dom'; +import type { WithProfileProps } from 'src/containers/profile.container'; +import type { WithQueryClientProps } from 'src/containers/withQueryClient.container'; + type CurrentFilter = 'deploys' | 'label' | 'revision'; type SortOrder = 'asc' | 'desc'; @@ -102,199 +102,6 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => ( const { isSelecting, useQueryString } = options; class EnhancedComponent extends React.Component { - componentDidMount() { - this.mounted = true; - // If the URL contains a QS param called "query" treat it as a filter. - const query = getQueryParamFromQueryString( - this.props.location.search, - 'query' - ); - if (query) { - return this.handleSearch(query); - } - - return this.getDataAtPage(1); - } - - componentWillUnmount() { - this.mounted = false; - } - - render() { - const { - allStackScriptsLoaded, - currentFilterType, - didSearch, - error, - fieldError, - getMoreStackScriptsFailed, - gettingMoreStackScripts, - isSearching, - isSorting, - listOfStackScripts, - sortOrder, - successMessage, - } = this.state; - - const { grants, profile } = this.props; - - const userCannotCreateStackScripts = - Boolean(profile.data?.restricted) && - !grants.data?.global.add_stackscripts; - - if (error) { - return ( -
- -
- ); - } - - if (this.state.loading) { - return ( - - - - ); - } - - // Use the query string if the argument has been specified. - const query = useQueryString - ? getQueryParamFromQueryString(this.props.location.search, 'query') - : undefined; - - return ( - - {fieldError && fieldError.reason && ( - - )} - {successMessage && } - {/* - * We only want to show this empty state on the initial GET StackScripts request - * If the user is searching and 0 results come back, we just want to show - * an empty table, rather than showing a message indicating no StackScripts exist - */} - {!didSearch && - listOfStackScripts && - listOfStackScripts.length === 0 ? ( - - {userCannotCreateStackScripts ? ( - - You don’t have any StackScripts to select from. - - ) : ( - - )} - - ) : ( - - - - - - - - - - {/* - * show loading indicator if we're getting more stackscripts - * and if we're not showing the "get more stackscripts" button - */} - {gettingMoreStackScripts && !isSorting && ( -
- -
- )} - - )} - {/* - * if we're sorting, or if we already loaded all results - * or if we're in the middle of getting more results, don't render - * the lazy load trigger - */} - {!isSorting && !allStackScriptsLoaded && !gettingMoreStackScripts && ( -
- {/* - * If the lazy-load failed (marked by the catch in getNext), - * show the "Show more StackScripts button - * Otherwise, try to lazy load some more dang stackscripts - */} - {!getMoreStackScriptsFailed ? ( - - {/* - * The reason for this empty div is that there was some wonkiness when - * scrolling to the waypoint with trackpads. For some reason, the Waypoint - * would never be scrolled into view no matter how much you scrolled on the - * trackpad. Especially finicky at zoomed in browser sizes - */} -
- - ) : ( - - )} -
- )} - - ); - } - static displayName = `WithStackScriptBase(${getDisplayName(Component)})`; generateFilterInfo = (value: CurrentFilter): FilterInfo => { @@ -599,6 +406,199 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => ( usesKubeImage = (stackScriptImages: string[]) => stackScriptImages.some((imageId) => isLinodeKubeImageId(imageId)); + + componentDidMount() { + this.mounted = true; + // If the URL contains a QS param called "query" treat it as a filter. + const query = getQueryParamFromQueryString( + this.props.location.search, + 'query' + ); + if (query) { + return this.handleSearch(query); + } + + return this.getDataAtPage(1); + } + + componentWillUnmount() { + this.mounted = false; + } + + render() { + const { + allStackScriptsLoaded, + currentFilterType, + didSearch, + error, + fieldError, + getMoreStackScriptsFailed, + gettingMoreStackScripts, + isSearching, + isSorting, + listOfStackScripts, + sortOrder, + successMessage, + } = this.state; + + const { grants, profile } = this.props; + + const userCannotCreateStackScripts = + Boolean(profile.data?.restricted) && + !grants.data?.global.add_stackscripts; + + if (error) { + return ( +
+ +
+ ); + } + + if (this.state.loading) { + return ( + + + + ); + } + + // Use the query string if the argument has been specified. + const query = useQueryString + ? getQueryParamFromQueryString(this.props.location.search, 'query') + : undefined; + + return ( + + {fieldError && fieldError.reason && ( + + )} + {successMessage && } + {/* + * We only want to show this empty state on the initial GET StackScripts request + * If the user is searching and 0 results come back, we just want to show + * an empty table, rather than showing a message indicating no StackScripts exist + */} + {!didSearch && + listOfStackScripts && + listOfStackScripts.length === 0 ? ( + + {userCannotCreateStackScripts ? ( + + You don’t have any StackScripts to select from. + + ) : ( + + )} + + ) : ( + + + + + + + + + + {/* + * show loading indicator if we're getting more stackscripts + * and if we're not showing the "get more stackscripts" button + */} + {gettingMoreStackScripts && !isSorting && ( +
+ +
+ )} + + )} + {/* + * if we're sorting, or if we already loaded all results + * or if we're in the middle of getting more results, don't render + * the lazy load trigger + */} + {!isSorting && !allStackScriptsLoaded && !gettingMoreStackScripts && ( +
+ {/* + * If the lazy-load failed (marked by the catch in getNext), + * show the "Show more StackScripts button + * Otherwise, try to lazy load some more dang stackscripts + */} + {!getMoreStackScriptsFailed ? ( + + {/* + * The reason for this empty div is that there was some wonkiness when + * scrolling to the waypoint with trackpads. For some reason, the Waypoint + * would never be scrolled into view no matter how much you scrolled on the + * trackpad. Especially finicky at zoomed in browser sizes + */} +
+ + ) : ( + + )} +
+ )} + + ); + } } return compose(withRouter, withProfile)(EnhancedComponent); diff --git a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx index b28cc58edbd..052b461abee 100644 --- a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx @@ -3,6 +3,7 @@ import { getStackScript, updateStackScript, } from '@linode/api-v4/lib/stackscripts'; +import { Notice } from '@linode/ui'; import { equals } from 'ramda'; import * as React from 'react'; import { withRouter } from 'react-router-dom'; @@ -15,7 +16,6 @@ import { ConfirmationDialog } from 'src/components/ConfirmationDialog/Confirmati import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { withImages } from 'src/containers/images.container'; import { withProfile } from 'src/containers/profile.container'; diff --git a/packages/manager/src/features/StackScripts/StackScriptDialog.tsx b/packages/manager/src/features/StackScripts/StackScriptDialog.tsx index 56f1509cba5..45317df88b1 100644 --- a/packages/manager/src/features/StackScripts/StackScriptDialog.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptDialog.tsx @@ -1,15 +1,18 @@ -import { StackScript, getStackScript } from '@linode/api-v4/lib/stackscripts'; +import { getStackScript } from '@linode/api-v4/lib/stackscripts'; +import { Notice } from '@linode/ui'; import { path, pathOr } from 'ramda'; import * as React from 'react'; -import { MapDispatchToProps, connect } from 'react-redux'; +import { connect } from 'react-redux'; import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; -import { Notice } from 'src/components/Notice/Notice'; import { StackScript as _StackScript } from 'src/components/StackScript/StackScript'; -import { ApplicationState } from 'src/store'; import { closeStackScriptDialog } from 'src/store/stackScriptDialog'; -import { MapState } from 'src/store/types'; + +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; +import type { MapDispatchToProps } from 'react-redux'; +import type { ApplicationState } from 'src/store'; +import type { MapState } from 'src/store/types'; interface DispatchProps { closeDrawer: () => void; diff --git a/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.styles.ts b/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.styles.ts index 296fda0b312..a004081854d 100644 --- a/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.styles.ts +++ b/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.styles.ts @@ -1,8 +1,8 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; export const StyledActionsPanel = styled(ActionsPanel, { diff --git a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx index 1101d6b33c1..6b749ec1a29 100644 --- a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { useHistory } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { listToItemsByID } from 'src/queries/base'; import { useAllImagesQuery } from 'src/queries/images'; diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx index 64d230bbc87..03263e8bc3e 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { Notice } from 'src/components/Notice/Notice'; import { RenderGuard } from 'src/components/RenderGuard'; import type { UserDefinedField } from '@linode/api-v4/lib/stackscripts'; diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx index 779e1309cde..16d274affe8 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx @@ -1,13 +1,14 @@ -import { UserDefinedField } from '@linode/api-v4/lib/stackscripts'; +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { InputLabel } from 'src/components/InputLabel'; -import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; +import type { UserDefinedField } from '@linode/api-v4/lib/stackscripts'; + interface Props { error?: string; field: UserDefinedField; diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx index 7888367a821..f769fe7d478 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { Box } from 'src/components/Box'; import { Divider } from 'src/components/Divider'; -import { Notice } from 'src/components/Notice/Notice'; import { RenderGuard } from 'src/components/RenderGuard'; import { ShowMoreExpansion } from 'src/components/ShowMoreExpansion'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/AttachmentError.tsx b/packages/manager/src/features/Support/SupportTicketDetail/AttachmentError.tsx index b6382a79daa..c709707ee13 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/AttachmentError.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/AttachmentError.tsx @@ -1,7 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; - interface Props { fileName: string; reason: string; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx index 383ed47eeb4..1fcdedd4ef5 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx @@ -1,4 +1,5 @@ import { uploadAttachment } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { lensPath, set } from 'ramda'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { debounce } from 'throttle-debounce'; import { makeStyles } from 'tss-react/mui'; import { Accordion } from 'src/components/Accordion'; -import { Notice } from 'src/components/Notice/Notice'; import { useSupportTicketReplyMutation } from 'src/queries/support'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; import { storage } from 'src/utilities/storage'; diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx index e80beeeda03..f008a46354f 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx @@ -1,5 +1,6 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { uploadAttachment } from '@linode/api-v4/lib/support'; +import { Notice } from '@linode/ui'; import { update } from 'ramda'; import * as React from 'react'; import { Controller, FormProvider, useForm } from 'react-hook-form'; @@ -11,7 +12,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Box } from 'src/components/Box'; import { Dialog } from 'src/components/Dialog/Dialog'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { useCreateSupportTicketMutation } from 'src/queries/support'; diff --git a/packages/manager/src/features/Users/CreateUserDrawer.tsx b/packages/manager/src/features/Users/CreateUserDrawer.tsx index a41ce5521a2..b704b22da5e 100644 --- a/packages/manager/src/features/Users/CreateUserDrawer.tsx +++ b/packages/manager/src/features/Users/CreateUserDrawer.tsx @@ -1,17 +1,20 @@ -import { User, createUser } from '@linode/api-v4/lib/account'; -import { APIError } from '@linode/api-v4/lib/types'; +import { createUser } from '@linode/api-v4/lib/account'; +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle/Toggle'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; +import type { User } from '@linode/api-v4/lib/account'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { RouteComponentProps } from 'react-router-dom'; + interface Props { onClose: () => void; open: boolean; @@ -29,6 +32,64 @@ interface State { interface CreateUserDrawerProps extends Props, RouteComponentProps<{}> {} class CreateUserDrawer extends React.Component { + handleChangeEmail = (e: React.ChangeEvent) => { + this.setState({ + email: e.target.value, + }); + }; + + handleChangeRestricted = () => { + this.setState({ + restricted: !this.state.restricted, + }); + }; + + handleChangeUsername = ( + e: + | React.ChangeEvent + | React.FocusEvent + ) => { + this.setState({ + username: e.target.value, + }); + }; + + onSubmit = () => { + const { + history: { push }, + onClose, + refetch, + } = this.props; + const { email, restricted, username } = this.state; + this.setState({ errors: [], submitting: true }); + createUser({ email, restricted, username }) + .then((user: User) => { + this.setState({ submitting: false }); + onClose(); + if (user.restricted) { + push(`/account/users/${username}/permissions`, { + newUsername: user.username, + }); + } + refetch(); + }) + .catch((errResponse) => { + const errors = getAPIErrorOrDefault( + errResponse, + 'Error creating user.' + ); + this.setState({ errors, submitting: false }); + }); + }; + + state: State = { + email: '', + errors: [], + restricted: false, + submitting: false, + username: '', + }; + componentDidUpdate(prevProps: CreateUserDrawerProps) { if (this.props.open === true && prevProps.open === false) { this.setState({ @@ -113,64 +174,6 @@ class CreateUserDrawer extends React.Component { ); } - - handleChangeEmail = (e: React.ChangeEvent) => { - this.setState({ - email: e.target.value, - }); - }; - - handleChangeRestricted = () => { - this.setState({ - restricted: !this.state.restricted, - }); - }; - - handleChangeUsername = ( - e: - | React.ChangeEvent - | React.FocusEvent - ) => { - this.setState({ - username: e.target.value, - }); - }; - - onSubmit = () => { - const { - history: { push }, - onClose, - refetch, - } = this.props; - const { email, restricted, username } = this.state; - this.setState({ errors: [], submitting: true }); - createUser({ email, restricted, username }) - .then((user: User) => { - this.setState({ submitting: false }); - onClose(); - if (user.restricted) { - push(`/account/users/${username}/permissions`, { - newUsername: user.username, - }); - } - refetch(); - }) - .catch((errResponse) => { - const errors = getAPIErrorOrDefault( - errResponse, - 'Error creating user.' - ); - this.setState({ errors, submitting: false }); - }); - }; - - state: State = { - email: '', - errors: [], - restricted: false, - submitting: false, - username: '', - }; } export default withRouter(CreateUserDrawer); diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx index ec85b41df06..0cbac00e707 100644 --- a/packages/manager/src/features/Users/UserPermissions.tsx +++ b/packages/manager/src/features/Users/UserPermissions.tsx @@ -4,6 +4,7 @@ import { updateGrants, updateUser, } from '@linode/api-v4/lib/account'; +import { Notice } from '@linode/ui'; import { Paper } from '@mui/material'; import Grid from '@mui/material/Unstable_Grid2'; import { enqueueSnackbar } from 'notistack'; @@ -15,7 +16,6 @@ import { Box } from 'src/components/Box'; import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Notice } from 'src/components/Notice/Notice'; import { SelectionCard } from 'src/components/SelectionCard/SelectionCard'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { Tab } from 'src/components/Tabs/Tab'; diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx index 66f379fc05c..53220e98caa 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx @@ -1,7 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; - import { CANNOT_CREATE_VPC_MESSAGE } from '../../constants'; export const CannotCreateVPCNotice = ( diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx index 313ac63afe1..0e514bec10c 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { useLocation } from 'react-router-dom'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics'; import { getQueryParamsFromQueryString } from 'src/utilities/queryParams'; diff --git a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx index bfcba44b36c..f6707ab54ed 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx @@ -1,20 +1,20 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; +import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; -import { SubnetContent } from 'src/features/VPCs/VPCCreate/FormComponents/SubnetContent'; import { VPC_GETTING_STARTED_LINK } from 'src/features/VPCs/constants'; +import { SubnetContent } from 'src/features/VPCs/VPCCreate/FormComponents/SubnetContent'; import { useCreateVPC } from 'src/hooks/useCreateVPC'; import { CannotCreateVPCNotice } from './FormComponents/CannotCreateVPCNotice'; import { StyledHeaderTypography } from './FormComponents/VPCCreateForm.styles'; import { VPCTopSectionContent } from './FormComponents/VPCTopSectionContent'; -import { createLazyRoute } from '@tanstack/react-router'; const VPCCreate = () => { const { diff --git a/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx b/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx index ff58f41063a..916a490cd8a 100644 --- a/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -5,7 +6,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Box } from 'src/components/Box'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { CannotCreateVPCNotice } from 'src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice'; import { SubnetContent } from 'src/features/VPCs/VPCCreate/FormComponents/SubnetContent'; import { VPCTopSectionContent } from 'src/features/VPCs/VPCCreate/FormComponents/VPCTopSectionContent'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx b/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx index a917a31a595..8723643b6a1 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; @@ -5,7 +6,6 @@ import { Box } from 'src/components/Box'; import { Divider } from 'src/components/Divider'; import { Link } from 'src/components/Link'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; -import { Notice } from 'src/components/Notice/Notice'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx index 8a532231cc0..27d0b7337d8 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx @@ -1,4 +1,5 @@ import { appendConfigInterface } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -12,7 +13,6 @@ import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormHelperText } from 'src/components/FormHelperText'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { RemovableSelectionsListTable } from 'src/components/RemovableSelectionsList/RemovableSelectionsListTable'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx index 0eaf06dca68..82cc7fb7ded 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import { createSubnetSchema } from '@linode/validation'; import { useFormik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { useCreateSubnetMutation, useVPCQuery } from 'src/queries/vpcs/vpcs'; import { getErrorMap } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx index 28b079c9bb2..9dfb64e400e 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx @@ -1,9 +1,9 @@ +import { Notice } 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 { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { useUpdateSubnetMutation } from 'src/queries/vpcs/vpcs'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx index e4a91888e61..1d56720fd74 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { Stack, Typography } from '@mui/material'; import { useQueryClient } from '@tanstack/react-query'; import { useFormik } from 'formik'; @@ -8,7 +9,6 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Box } from 'src/components/Box'; import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { RemovableSelectionsListTable } from 'src/components/RemovableSelectionsList/RemovableSelectionsListTable'; import { SUBNET_UNASSIGN_LINODES_WARNING } from 'src/features/VPCs/constants'; import { useFormattedDate } from 'src/hooks/useFormattedDate'; diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx index d8264de1f43..c9034543df6 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import { updateVPCSchema } from '@linode/validation/lib/vpcs.schema'; import { useFormik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { TextField } from 'src/components/TextField'; import { useGrants, useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx index 9fa0305e7eb..374059cde8e 100644 --- a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -11,7 +12,6 @@ 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'; import { FormHelperText } from 'src/components/FormHelperText'; -import { Notice } from 'src/components/Notice/Notice'; import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect'; import { useEventsPollingActions } from 'src/queries/events/events'; import { useGrants } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Volumes/CloneVolumeDrawer.tsx b/packages/manager/src/features/Volumes/CloneVolumeDrawer.tsx index 4d4d6b7845d..3175f14b20c 100644 --- a/packages/manager/src/features/Volumes/CloneVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/CloneVolumeDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { CloneVolumeSchema } from '@linode/validation/lib/volumes.schema'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -8,7 +9,6 @@ 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'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { useEventsPollingActions } from 'src/queries/events/events'; diff --git a/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx b/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx index cc0db32476a..b36575e65b6 100644 --- a/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx +++ b/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx @@ -1,6 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { useEventsPollingActions } from 'src/queries/events/events'; import { useDeleteVolumeMutation } from 'src/queries/volumes/volumes'; diff --git a/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx b/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx index 4e1d7d6e186..06cf1444af6 100644 --- a/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx +++ b/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; import { useEventsPollingActions } from 'src/queries/events/events'; diff --git a/packages/manager/src/features/Volumes/EditVolumeDrawer.tsx b/packages/manager/src/features/Volumes/EditVolumeDrawer.tsx index 92108dd6406..36fe2307a7b 100644 --- a/packages/manager/src/features/Volumes/EditVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/EditVolumeDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { UpdateVolumeSchema } from '@linode/validation'; import { useFormik } from 'formik'; import React from 'react'; @@ -8,7 +9,6 @@ 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'; -import { Notice } from 'src/components/Notice/Notice'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; import { useGrants } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Volumes/ResizeVolumeDrawer.tsx b/packages/manager/src/features/Volumes/ResizeVolumeDrawer.tsx index 550e9afa576..d24e6992bba 100644 --- a/packages/manager/src/features/Volumes/ResizeVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/ResizeVolumeDrawer.tsx @@ -1,4 +1,4 @@ -import { Volume } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import { ResizeVolumeSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -6,7 +6,6 @@ import React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { useEventsPollingActions } from 'src/queries/events/events'; import { useGrants } from 'src/queries/profile/profile'; import { @@ -22,6 +21,8 @@ import { PRICES_RELOAD_ERROR_NOTICE_TEXT } from 'src/utilities/pricing/constants import { PricePanel } from './VolumeDrawer/PricePanel'; import { SizeField } from './VolumeDrawer/SizeField'; +import type { Volume } from '@linode/api-v4'; + interface Props { onClose: () => void; open: boolean; diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx index ae3b9bae2ce..62f05df4615 100644 --- a/packages/manager/src/features/Volumes/VolumeCreate.tsx +++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { CreateVolumeSchema } from '@linode/validation/lib/volumes.schema'; import { useTheme } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; @@ -22,7 +23,6 @@ import { Encryption } from 'src/components/Encryption/Encryption'; import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { Stack } from 'src/components/Stack'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAddDrawer.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAddDrawer.tsx index cb0c40d646f..4973aafbad1 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAddDrawer.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAddDrawer.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Drawer } from 'src/components/Drawer'; import { BLOCK_STORAGE_CLIENT_LIBRARY_UPDATE_REQUIRED_COPY } from 'src/components/Encryption/constants'; import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { LinodeVolumeAttachForm } from './LinodeVolumeAttachForm'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAttachForm.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAttachForm.tsx index 8aa76a1345a..51b4b9e4c0d 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAttachForm.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAttachForm.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; 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 { Notice } from 'src/components/Notice/Notice'; import { useEventsPollingActions } from 'src/queries/events/events'; import { useGrants } from 'src/queries/profile/profile'; import { diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx index 63a076abc8a..a7ce32fb315 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { CreateVolumeSchema } from '@linode/validation/lib/volumes.schema'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -13,7 +14,6 @@ import { } from 'src/components/Encryption/constants'; import { Encryption } from 'src/components/Encryption/Encryption'; import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; -import { Notice } from 'src/components/Notice/Notice'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/components/PlansPanel/DistributedRegionPlanTable.tsx b/packages/manager/src/features/components/PlansPanel/DistributedRegionPlanTable.tsx index 1f56b1ce1b5..c69779660eb 100644 --- a/packages/manager/src/features/components/PlansPanel/DistributedRegionPlanTable.tsx +++ b/packages/manager/src/features/components/PlansPanel/DistributedRegionPlanTable.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import React from 'react'; import { Box } from 'src/components/Box'; -import { Notice } from 'src/components/Notice/Notice'; import { Paper } from 'src/components/Paper'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx b/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx index 35ef6810ec4..55044502c6d 100644 --- a/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx +++ b/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx @@ -1,6 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { StyledTypography } from './PlansPanel.styles'; diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx index 512bcbb91fb..ded1ba83919 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx @@ -1,10 +1,9 @@ -import { LinodeTypeClass } from '@linode/api-v4/lib/linodes'; +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { useLocation } from 'react-router-dom'; import { Hidden } from 'src/components/Hidden'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useFlags } from 'src/hooks/useFlags'; import { PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE } from 'src/utilities/pricing/constants'; @@ -14,6 +13,7 @@ import { PlanSelectionTable } from './PlanSelectionTable'; import type { PlanWithAvailability } from './types'; import type { Region } from '@linode/api-v4'; +import type { LinodeTypeClass } from '@linode/api-v4/lib/linodes'; export interface PlanContainerProps { allDisabledPlans: PlanWithAvailability[]; diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx index 56c159989a0..14763c11fd3 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; 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 { StyledNoticeTypography } from 'src/features/components/PlansPanel/PlansAvailabilityNotice.styles'; import { useFlags } from 'src/hooks/useFlags'; diff --git a/packages/manager/src/features/components/PlansPanel/PlansAvailabilityNotice.tsx b/packages/manager/src/features/components/PlansPanel/PlansAvailabilityNotice.tsx index a839965ee10..c80c5be86bb 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansAvailabilityNotice.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansAvailabilityNotice.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { ListItem } from 'src/components/ListItem'; -import { Notice } from 'src/components/Notice/Notice'; -import { getCapabilityFromPlanType } from 'src/utilities/planNotices'; import { formatPlanTypes } from 'src/utilities/planNotices'; +import { getCapabilityFromPlanType } from 'src/utilities/planNotices'; import { StyledFormattedRegionList, diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 833cd24a11e..3cf6cc8a6bf 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { useLocation } from 'react-router-dom'; -import { Notice } from 'src/components/Notice/Notice'; -import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { isDistributedRegionSupported } from 'src/components/RegionSelect/RegionSelect.utils'; import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; import { useFlags } from 'src/hooks/useFlags'; diff --git a/packages/ui/.eslintrc.json b/packages/ui/.eslintrc.json index 3388926d8ea..c3e7d4466ad 100644 --- a/packages/ui/.eslintrc.json +++ b/packages/ui/.eslintrc.json @@ -56,7 +56,7 @@ "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-use-before-define": "off", "@typescript-eslint/interface-name-prefix": "off", - "sonarjs/cognitive-complexity": "warn", + "sonarjs/cognitive-complexity": "off", "sonarjs/no-duplicate-string": "warn", "sonarjs/prefer-immediate-return": "warn", "sonarjs/no-identical-functions": "warn", diff --git a/packages/manager/src/assets/icons/alert.svg b/packages/ui/src/assets/icons/alert.svg similarity index 100% rename from packages/manager/src/assets/icons/alert.svg rename to packages/ui/src/assets/icons/alert.svg diff --git a/packages/manager/src/assets/icons/check.svg b/packages/ui/src/assets/icons/check.svg similarity index 100% rename from packages/manager/src/assets/icons/check.svg rename to packages/ui/src/assets/icons/check.svg diff --git a/packages/ui/src/assets/icons/index.ts b/packages/ui/src/assets/icons/index.ts new file mode 100644 index 00000000000..eaf4df62e00 --- /dev/null +++ b/packages/ui/src/assets/icons/index.ts @@ -0,0 +1,3 @@ +export { default as Alert } from './alert.svg'; +export { default as Check } from './check.svg'; +export { default as Warning } from './warning.svg'; diff --git a/packages/manager/src/assets/icons/warning.svg b/packages/ui/src/assets/icons/warning.svg similarity index 100% rename from packages/manager/src/assets/icons/warning.svg rename to packages/ui/src/assets/icons/warning.svg diff --git a/packages/ui/src/assets/index.ts b/packages/ui/src/assets/index.ts new file mode 100644 index 00000000000..838008a0b2f --- /dev/null +++ b/packages/ui/src/assets/index.ts @@ -0,0 +1 @@ +export * from './icons'; diff --git a/packages/manager/src/components/Notice/Notice.stories.tsx b/packages/ui/src/components/Notice/Notice.stories.tsx similarity index 100% rename from packages/manager/src/components/Notice/Notice.stories.tsx rename to packages/ui/src/components/Notice/Notice.stories.tsx diff --git a/packages/manager/src/components/Notice/Notice.styles.ts b/packages/ui/src/components/Notice/Notice.styles.ts similarity index 100% rename from packages/manager/src/components/Notice/Notice.styles.ts rename to packages/ui/src/components/Notice/Notice.styles.ts diff --git a/packages/manager/src/components/Notice/Notice.test.tsx b/packages/ui/src/components/Notice/Notice.test.tsx similarity index 74% rename from packages/manager/src/components/Notice/Notice.test.tsx rename to packages/ui/src/components/Notice/Notice.test.tsx index e7d536cd907..4222e71816c 100644 --- a/packages/manager/src/components/Notice/Notice.test.tsx +++ b/packages/ui/src/components/Notice/Notice.test.tsx @@ -1,13 +1,12 @@ -import { fireEvent } from '@testing-library/react'; +import { fireEvent, render } from '@testing-library/react'; import React from 'react'; -import { renderWithTheme } from 'src/utilities/testHelpers'; - import { Notice } from './Notice'; +import { expect, vi } from 'vitest'; describe('Notice Component', () => { it('renders without errors with proper spacing', () => { - const { container } = renderWithTheme(); + const { container } = render(); const notice = container.firstChild; expect(notice).toHaveStyle('margin-bottom: 24px'); @@ -16,14 +15,14 @@ describe('Notice Component', () => { }); it('renders with text', () => { - const { getByText } = renderWithTheme(); + const { getByText } = render(); const noticeText = getByText('This is a notice'); expect(noticeText).toBeInTheDocument(); }); it('renders with children', () => { - const { getByText } = renderWithTheme(This is a notice); + const { getByText } = render(This is a notice); const noticeText = getByText('This is a notice'); expect(noticeText).toBeInTheDocument(); @@ -31,7 +30,7 @@ describe('Notice Component', () => { it('handles click events', () => { const handleClick = vi.fn(); - const { getByText } = renderWithTheme( + const { getByText } = render( ); const noticeText = getByText('Click me'); @@ -41,13 +40,13 @@ describe('Notice Component', () => { }); it('applies className prop', () => { - const { container } = renderWithTheme(); + const { container } = render(); expect(container.firstChild).toHaveClass('custom-class'); }); it('applies dataTestId props', () => { - const { getByTestId } = renderWithTheme( + const { getByTestId } = render( ); @@ -56,26 +55,26 @@ describe('Notice Component', () => { }); it('applies variant prop', () => { - const { container } = renderWithTheme(); + const { container } = render(); expect(container.firstChild).toHaveStyle('border-left: 5px solid #d63c42;'); }); it('displays icon for important notices', () => { - const { getByTestId } = renderWithTheme(); + const { getByTestId } = render(); const icon = getByTestId('notice-important'); expect(icon).toBeInTheDocument(); }); it('handles bypassValidation prop', () => { - const { container } = renderWithTheme(); + const { container } = render(); expect(container.firstChild).not.toHaveClass('error-for-scroll'); }); it('applies spacing props', () => { - const { container } = renderWithTheme( + const { container } = render( ); const notice = container.firstChild; @@ -86,7 +85,7 @@ describe('Notice Component', () => { }); it('applies typeProps to Typography component', () => { - const { container } = renderWithTheme( + const { container } = render( ; + export default src; +} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 43f9ba85b57..34442535941 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,2 +1,3 @@ export * from './components'; export * from './foundations'; +export * from './assets'; From 399eccdcbeee79d4c7a141f024521904f938befe Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Mon, 28 Oct 2024 11:27:16 -0400 Subject: [PATCH 2/6] Add test imports --- packages/ui/src/components/Notice/Notice.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Notice/Notice.test.tsx b/packages/ui/src/components/Notice/Notice.test.tsx index 4222e71816c..065bb7220ab 100644 --- a/packages/ui/src/components/Notice/Notice.test.tsx +++ b/packages/ui/src/components/Notice/Notice.test.tsx @@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/react'; import React from 'react'; import { Notice } from './Notice'; -import { expect, vi } from 'vitest'; +import { expect, describe, it, vi } from 'vitest'; describe('Notice Component', () => { it('renders without errors with proper spacing', () => { From 2a6d5cf28db52300bb3e1b016c8d46ca6d521a01 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Mon, 28 Oct 2024 16:12:21 -0400 Subject: [PATCH 3/6] Add renderWithTheme and other changes to make tests pass --- .../ui/src/components/Notice/Notice.test.tsx | 25 +++++++++-------- packages/ui/src/utilities/testHelpers.tsx | 28 +++++++++++++++++++ packages/ui/testSetup.ts | 5 +++- 3 files changed, 45 insertions(+), 13 deletions(-) create mode 100644 packages/ui/src/utilities/testHelpers.tsx diff --git a/packages/ui/src/components/Notice/Notice.test.tsx b/packages/ui/src/components/Notice/Notice.test.tsx index 065bb7220ab..3e1e343d900 100644 --- a/packages/ui/src/components/Notice/Notice.test.tsx +++ b/packages/ui/src/components/Notice/Notice.test.tsx @@ -1,12 +1,13 @@ -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent } from '@testing-library/react'; import React from 'react'; import { Notice } from './Notice'; import { expect, describe, it, vi } from 'vitest'; +import { renderWithTheme } from '../../utilities/testHelpers'; describe('Notice Component', () => { it('renders without errors with proper spacing', () => { - const { container } = render(); + const { container } = renderWithTheme(); const notice = container.firstChild; expect(notice).toHaveStyle('margin-bottom: 24px'); @@ -15,14 +16,14 @@ describe('Notice Component', () => { }); it('renders with text', () => { - const { getByText } = render(); + const { getByText } = renderWithTheme(); const noticeText = getByText('This is a notice'); expect(noticeText).toBeInTheDocument(); }); it('renders with children', () => { - const { getByText } = render(This is a notice); + const { getByText } = renderWithTheme(This is a notice); const noticeText = getByText('This is a notice'); expect(noticeText).toBeInTheDocument(); @@ -30,7 +31,7 @@ describe('Notice Component', () => { it('handles click events', () => { const handleClick = vi.fn(); - const { getByText } = render( + const { getByText } = renderWithTheme( ); const noticeText = getByText('Click me'); @@ -40,13 +41,13 @@ describe('Notice Component', () => { }); it('applies className prop', () => { - const { container } = render(); + const { container } = renderWithTheme(); expect(container.firstChild).toHaveClass('custom-class'); }); it('applies dataTestId props', () => { - const { getByTestId } = render( + const { getByTestId } = renderWithTheme( ); @@ -55,26 +56,26 @@ describe('Notice Component', () => { }); it('applies variant prop', () => { - const { container } = render(); + const { container } = renderWithTheme(); expect(container.firstChild).toHaveStyle('border-left: 5px solid #d63c42;'); }); it('displays icon for important notices', () => { - const { getByTestId } = render(); + const { getByTestId } = renderWithTheme(); const icon = getByTestId('notice-important'); expect(icon).toBeInTheDocument(); }); it('handles bypassValidation prop', () => { - const { container } = render(); + const { container } = renderWithTheme(); expect(container.firstChild).not.toHaveClass('error-for-scroll'); }); it('applies spacing props', () => { - const { container } = render( + const { container } = renderWithTheme( ); const notice = container.firstChild; @@ -85,7 +86,7 @@ describe('Notice Component', () => { }); it('applies typeProps to Typography component', () => { - const { container } = render( + const { container } = renderWithTheme( ( + + + {ui.children ?? ui} + + +); + +export const renderWithTheme = ( + ui: React.ReactNode, + options: Options = {} +): RenderResult => { + const renderResult = render(wrapWithTheme(ui, options)); + return { + ...renderResult, + rerender: (ui) => renderResult.rerender(wrapWithTheme(ui, options)), + }; +}; diff --git a/packages/ui/testSetup.ts b/packages/ui/testSetup.ts index e42051f8ee3..141cd45f9a4 100644 --- a/packages/ui/testSetup.ts +++ b/packages/ui/testSetup.ts @@ -1,5 +1,8 @@ +import * as matchers from '@testing-library/jest-dom/matchers'; import { cleanup } from '@testing-library/react'; -import { afterEach } from 'vitest'; +import { afterEach, expect } from 'vitest'; + +expect.extend(matchers); afterEach(() => { cleanup(); From 613abf04508adff0411f94a0ab3c3516f82e3c38 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Thu, 31 Oct 2024 17:57:33 -0400 Subject: [PATCH 4/6] Fix broken icon imports --- .../manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts | 2 +- .../src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts index 80ce5d2e751..f240e7969a1 100644 --- a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts +++ b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts @@ -1,6 +1,6 @@ +import { Warning } 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'; import { omittedProps } from 'src/utilities/omittedProps'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts index 066e2105715..299c4a4f7aa 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts @@ -1,6 +1,6 @@ +import { Warning } from '@linode/ui'; import { styled } from '@mui/material/styles'; -import Warning from 'src/assets/icons/warning.svg'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; From cd602665775ecbf4e40fdcf5d7fe625b88a1dbe5 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Mon, 4 Nov 2024 16:53:04 -0500 Subject: [PATCH 5/6] Added changeset: Move `Notice` and `Tooltip` components to UI package --- packages/ui/.changeset/pr-11174-added-1730757183801.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/ui/.changeset/pr-11174-added-1730757183801.md diff --git a/packages/ui/.changeset/pr-11174-added-1730757183801.md b/packages/ui/.changeset/pr-11174-added-1730757183801.md new file mode 100644 index 00000000000..13ad8e0ff69 --- /dev/null +++ b/packages/ui/.changeset/pr-11174-added-1730757183801.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +Move `Notice` and `Tooltip` components to UI package ([#11174](https://github.com/linode/manager/pull/11174)) From 33fc9b295aad7515cbb7275c5ec2bdfaf1726874 Mon Sep 17 00:00:00 2001 From: Hussain Khalil Date: Tue, 5 Nov 2024 17:25:49 -0500 Subject: [PATCH 6/6] Feedback @dwiley-akamai: consolidate imports and rename icon exports --- .../src/components/AkamaiBanner/AkamaiBanner.styles.ts | 4 ++-- .../DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx | 3 +-- .../StackScripts/UserDefinedFields/UserDefinedFields.tsx | 3 +-- .../Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.tsx | 3 +-- .../src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts | 4 ++-- packages/ui/src/assets/icons/index.ts | 6 +++--- packages/ui/src/components/Notice/Notice.tsx | 6 +++--- 7 files changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts index 64782c901c9..b885e4630fa 100644 --- a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts +++ b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts @@ -1,4 +1,4 @@ -import { Box, Warning, omittedProps } from '@linode/ui'; +import { Box, WarningIcon, omittedProps } from '@linode/ui'; import { styled } from '@mui/material/styles'; import AkamaiLogo from 'src/assets/logo/akamai-logo.svg'; @@ -16,7 +16,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, diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx index ec91b47b190..4eda5ca3026 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx @@ -1,5 +1,4 @@ -import { Paper } from '@linode/ui'; -import { Box, Notice } from '@linode/ui'; +import { Box, Notice, Paper } from '@linode/ui'; import { FormControl, FormControlLabel, diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.tsx index c7cac16f8e1..ec90fae3281 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.tsx @@ -1,5 +1,4 @@ -import { Paper } from '@linode/ui'; -import { Box, IconButton, Notice } from '@linode/ui'; +import { Box, IconButton, Notice, Paper } from '@linode/ui'; import React from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.tsx index 78243c94ff1..2a1cab06e7f 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/ScheduleSettings.tsx @@ -1,5 +1,4 @@ -import { Paper } from '@linode/ui'; -import { FormControl, FormHelperText, Notice } from '@linode/ui'; +import { FormControl, FormHelperText, Notice, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts index 299c4a4f7aa..4e75344d122 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts @@ -1,4 +1,4 @@ -import { Warning } from '@linode/ui'; +import { WarningIcon } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { TableCell } from 'src/components/TableCell'; @@ -40,7 +40,7 @@ export const StyledTableHeadCell = styled(TableCell, { borderTop: 'none !important', })); -export const StyledWarningIcon = styled(Warning, { +export const StyledWarningIcon = styled(WarningIcon, { label: 'StyledWarningIcon', })(({ theme }) => ({ fill: theme.color.yellow, diff --git a/packages/ui/src/assets/icons/index.ts b/packages/ui/src/assets/icons/index.ts index eaf4df62e00..0103e50c33e 100644 --- a/packages/ui/src/assets/icons/index.ts +++ b/packages/ui/src/assets/icons/index.ts @@ -1,3 +1,3 @@ -export { default as Alert } from './alert.svg'; -export { default as Check } from './check.svg'; -export { default as Warning } from './warning.svg'; +export { default as AlertIcon } from './alert.svg'; +export { default as CheckIcon } from './check.svg'; +export { default as WarningIcon } from './warning.svg'; diff --git a/packages/ui/src/components/Notice/Notice.tsx b/packages/ui/src/components/Notice/Notice.tsx index b3be155e44e..a75c8f428b7 100644 --- a/packages/ui/src/components/Notice/Notice.tsx +++ b/packages/ui/src/components/Notice/Notice.tsx @@ -1,7 +1,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { Warning, Alert as Error, Check } from '../../assets/icons'; +import { WarningIcon, AlertIcon as Error, CheckIcon } from '../../assets/icons'; import { Typography } from '@mui/material'; @@ -180,10 +180,10 @@ export const Notice = (props: NoticeProps) => { > {important && ((variantMap.success && ( - + )) || ((variantMap.warning || variantMap.info) && ( - + )) || (variantMap.error && (