From cee32ae2b0b9d4fea6962d839960f6645817a8f3 Mon Sep 17 00:00:00 2001 From: Harsh Shankar Rao Date: Thu, 7 Nov 2024 12:54:45 +0530 Subject: [PATCH 001/131] feat : [M3-8528] - Include Object Storage buckets in Support tickets' dropdown (#11178) * feat: [M3-8528] - Include Object Storage in Support Tickets * query change * Added changeset: Include Object Storage buckets in Support tickets dropdown * added link support for object storage * removed redundant query * query updation and restructuring request payload * Added changeset --- .../pr-11178-added-1730961405650.md | 5 ++++ packages/api-v4/src/support/types.ts | 2 ++ .../pr-11178-added-1730961635027.md | 5 ++++ .../SupportTickets/SupportTicketDialog.tsx | 23 ++++++++++++++++--- .../SupportTicketProductSelectionFields.tsx | 23 ++++++++++++++++++- .../Support/SupportTickets/constants.tsx | 2 ++ .../src/utilities/getEventsActionLink.ts | 12 ++++++++-- 7 files changed, 66 insertions(+), 6 deletions(-) create mode 100644 packages/api-v4/.changeset/pr-11178-added-1730961405650.md create mode 100644 packages/manager/.changeset/pr-11178-added-1730961635027.md diff --git a/packages/api-v4/.changeset/pr-11178-added-1730961405650.md b/packages/api-v4/.changeset/pr-11178-added-1730961405650.md new file mode 100644 index 0000000000..00ede31e24 --- /dev/null +++ b/packages/api-v4/.changeset/pr-11178-added-1730961405650.md @@ -0,0 +1,5 @@ +--- +"@linode/api-v4": Added +--- + +Extend support for Object Storage in Support tickets ([#11178](https://github.com/linode/manager/pull/11178)) diff --git a/packages/api-v4/src/support/types.ts b/packages/api-v4/src/support/types.ts index f2ab261a93..a62c1d9604 100644 --- a/packages/api-v4/src/support/types.ts +++ b/packages/api-v4/src/support/types.ts @@ -35,10 +35,12 @@ export interface ReplyRequest { export interface TicketRequest { summary: string; description: string; + bucket?: string; domain_id?: number; linode_id?: number; longviewclient_id?: number; nodebalancer_id?: number; + region?: string; volume_id?: number; severity?: TicketSeverity; } diff --git a/packages/manager/.changeset/pr-11178-added-1730961635027.md b/packages/manager/.changeset/pr-11178-added-1730961635027.md new file mode 100644 index 0000000000..a9984fd394 --- /dev/null +++ b/packages/manager/.changeset/pr-11178-added-1730961635027.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +Include Object Storage buckets in Support tickets dropdown ([#11178](https://github.com/linode/manager/pull/11178)) diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx index 066ac25045..d09a5484d2 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx @@ -57,6 +57,7 @@ interface AttachmentWithTarget { } export type EntityType = + | 'bucket' | 'database_id' | 'domain_id' | 'firewall_id' @@ -344,12 +345,28 @@ export const SupportTicketDialog = (props: SupportTicketDialogProps) => { } setSubmitting(true); - createSupportTicket({ - [_entityType]: Number(_entityId), + const baseRequestPayload = { description: _description, severity: selectedSeverity, summary, - }) + }; + + let requestPayload; + if (entityType === 'bucket') { + const bucket_label = values.entityInputValue; + requestPayload = { + bucket: bucket_label, + region: _entityId, + ...baseRequestPayload, + }; + } else { + requestPayload = { + [_entityType]: Number(_entityId), + ...baseRequestPayload, + }; + } + + createSupportTicket(requestPayload) .then((response) => { return response; }) diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx index 65f55f4418..d834f55fb2 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx @@ -10,6 +10,7 @@ import { useAllFirewallsQuery } from 'src/queries/firewalls'; import { useAllKubernetesClustersQuery } from 'src/queries/kubernetes'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; import { useAllNodeBalancersQuery } from 'src/queries/nodebalancers'; +import { useObjectStorageBuckets } from 'src/queries/object-storage/queries'; import { useAllVolumesQuery } from 'src/queries/volumes/volumes'; import { useAllVPCsQuery } from 'src/queries/vpcs/vpcs'; @@ -81,6 +82,12 @@ export const SupportTicketProductSelectionFields = (props: Props) => { isLoading: linodesLoading, } = useAllLinodesQuery({}, {}, entityType === 'linode_id'); + const { + data: buckets, + error: bucketsError, + isLoading: bucketsLoading, + } = useObjectStorageBuckets(entityType === 'bucket'); + const { data: volumes, error: volumesError, @@ -93,8 +100,9 @@ export const SupportTicketProductSelectionFields = (props: Props) => { isLoading: vpcsLoading, } = useAllVPCsQuery(entityType === 'vpc_id'); - const getEntityOptions = (): { label: string; value: number }[] => { + const getEntityOptions = (): { label: string; value: number | string }[] => { const reactQueryEntityDataMap = { + bucket: buckets, database_id: databases, domain_id: domains, firewall_id: firewalls, @@ -123,6 +131,17 @@ export const SupportTicketProductSelectionFields = (props: Props) => { ); } + if (entityType === 'bucket') { + return ( + reactQueryEntityDataMap['bucket']?.buckets?.map( + ({ label, region }) => ({ + label, + value: region ?? '', + }) + ) || [] + ); + } + return ( reactQueryEntityDataMap[entityType]?.map( ({ id, label }: { id: number; label: string }) => ({ @@ -134,6 +153,7 @@ export const SupportTicketProductSelectionFields = (props: Props) => { }; const loadingMap: Record = { + bucket: bucketsLoading, database_id: databasesLoading, domain_id: domainsLoading, firewall_id: firewallsLoading, @@ -147,6 +167,7 @@ export const SupportTicketProductSelectionFields = (props: Props) => { }; const errorMap: Record = { + bucket: bucketsError, database_id: databasesError, domain_id: domainsError, firewall_id: firewallsError, diff --git a/packages/manager/src/features/Support/SupportTickets/constants.tsx b/packages/manager/src/features/Support/SupportTickets/constants.tsx index 9e1134a0f0..9637bf42c7 100644 --- a/packages/manager/src/features/Support/SupportTickets/constants.tsx +++ b/packages/manager/src/features/Support/SupportTickets/constants.tsx @@ -69,11 +69,13 @@ export const ENTITY_MAP: Record = { Kubernetes: 'lkecluster_id', Linodes: 'linode_id', NodeBalancers: 'nodebalancer_id', + 'Object Storage': 'bucket', VPCs: 'vpc_id', Volumes: 'volume_id', }; export const ENTITY_ID_TO_NAME_MAP: Record = { + bucket: 'Bucket', database_id: 'Database Cluster', domain_id: 'Domain', firewall_id: 'Firewall', diff --git a/packages/manager/src/utilities/getEventsActionLink.ts b/packages/manager/src/utilities/getEventsActionLink.ts index efd25755d0..0584e4b195 100644 --- a/packages/manager/src/utilities/getEventsActionLink.ts +++ b/packages/manager/src/utilities/getEventsActionLink.ts @@ -6,6 +6,10 @@ export const getEngineFromDatabaseEntityURL = (url: string) => { return url.match(/databases\/(\w*)\/instances/i)?.[1]; }; +export const getRegionFromObjectStorageEntityURL = (url: string) => { + return url.match(/\/buckets\/([^/]+)/)?.[1]; +}; + export const getLinkForEvent = (action: EventAction, entity: Entity | null) => { const type = entity?.type; const id = entity?.id; @@ -143,10 +147,14 @@ export const getLinkTargets = (entity: Entity | null) => { return '/images'; case 'longview': return '/longview'; - case 'volume': - return '/volumes'; + case 'object_storage_bucket': + return `/object-storage/buckets/${getRegionFromObjectStorageEntityURL( + entity.url + )}/${entity.label}`; case 'placement_group': return `/placement-groups/${entity.id}`; + case 'volume': + return '/volumes'; case 'vpc': return `/vpcs/${entity.id}`; default: From 0da37095129c175e18351377f80f1086f596d70c Mon Sep 17 00:00:00 2001 From: Harsh Shankar Rao Date: Thu, 7 Nov 2024 19:52:25 +0530 Subject: [PATCH 002/131] =?UTF-8?q?refactor:=20[M3-8646]=20=E2=80=93=20Mig?= =?UTF-8?q?rate=20`Divider`=20to=20`ui`=20package=20=20(#11205)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: [M3-8646] – Migrate `Divider` to `ui` package * Added changeset: Migrate Divider to ui package * migrating all imports * removing redundant hook imports * updated the import for omittedProps --- .../components/AccessPanel/AccessPanel.tsx | 2 +- .../CheckoutBar/DisplaySectionList.tsx | 2 +- .../LongviewLineGraph/LongviewLineGraph.tsx | 11 ++++---- .../src/components/PrimaryNav/NavItem.tsx | 3 +-- .../PrimaryNav/PrimaryNav.styles.ts | 3 +-- .../manager/src/components/Stack.stories.tsx | 3 +-- .../components/StackScript/StackScript.tsx | 3 +-- .../TransferDisplay/TransferDisplayDialog.tsx | 3 +-- .../src/features/Betas/BetaDetailsList.tsx | 3 +-- .../BillingSummary/BillingSummary.tsx | 3 +-- .../PaymentDrawer/PaymentDrawer.tsx | 3 +-- .../AddPaymentMethodDrawer.tsx | 3 +-- .../CloudPulse/Overview/GlobalFilters.tsx | 2 +- .../DatabaseCreate/DatabaseClusterData.tsx | 2 +- .../DatabaseCreate/DatabaseCreate.tsx | 3 +-- .../DatabaseBackups/DatabaseBackups.tsx | 3 +-- .../DatabaseResize/DatabaseResize.tsx | 3 +-- .../DatabaseSettings/DatabaseSettings.tsx | 3 +-- .../DatabaseSummary/DatabaseSummary.tsx | 2 +- .../ImagesLanding/RebuildImageDrawer.tsx | 2 +- .../KubeCheckoutBar/KubeCheckoutBar.tsx | 3 +-- .../KubeCheckoutBar/NodePoolSummary.tsx | 3 +-- .../features/Linodes/CloneLanding/Details.tsx | 13 ++++------ .../Linodes/LinodeCreate/Addons/Addons.tsx | 2 +- .../Linodes/LinodeCreate/Security.tsx | 2 +- .../Linodes/LinodeCreate/Summary/Summary.tsx | 5 ++-- .../Tabs/Marketplace/AppSection.tsx | 2 +- .../UserDefinedFieldInput.tsx | 3 +-- .../features/Linodes/LinodeCreate/VPC/VPC.tsx | 3 +-- .../LinodeConfigDialog.styles.ts | 3 +-- .../LinodeConfigs/LinodeConfigDialog.tsx | 3 +-- .../LinodeNetworking/AddIPDrawer.tsx | 3 +-- .../LinodeNetworking/IPSharing.tsx | 26 ++++++++++--------- .../LinodeNetworking/IPTransfer.tsx | 2 +- .../LinodeRebuild/RebuildFromImage.tsx | 3 +-- .../LinodeResize/LinodeResize.tsx | 3 +-- .../LinodeResizeUnifiedMigrationPanel.tsx | 3 +-- .../LinodeSettings/AlertSection.tsx | 3 +-- .../LinodeSettings/InterfaceSelect.tsx | 2 +- .../NodeBalancers/NodeBalancerConfigNode.tsx | 3 +-- .../NodeBalancers/NodeBalancerConfigPanel.tsx | 3 +-- .../NotificationCenterNotificationMessage.tsx | 3 +-- .../BucketDetail/ObjectDetailsDrawer.tsx | 2 +- .../BucketLanding/BucketDetailsDrawer.tsx | 2 +- .../PlacementGroupsAssignLinodesDrawer.tsx | 3 +-- .../PlacementGroupsCreateDrawer.tsx | 2 +- .../PlacementGroupsEditDrawer.tsx | 4 +-- .../AuthenticationSettings.tsx | 3 +-- .../AuthenticationSettings/TPAProviders.tsx | 3 +-- .../TwoFactor/EnableTwoFactorForm.tsx | 5 ++-- .../DisplaySettings/DisplaySettings.tsx | 3 +-- .../UserDefinedFieldsPanel.tsx | 3 +-- .../manager/src/features/Support/Hively.tsx | 3 +-- .../features/Support/TicketAttachmentRow.tsx | 3 +-- .../NotificationMenu/NotificationMenu.tsx | 3 +-- .../features/TopMenu/UserMenu/UserMenu.tsx | 3 +-- .../VPCs/VPCCreate/MultipleSubnetInput.tsx | 2 +- .../VPCs/VPCDetail/AssignIPRanges.tsx | 3 +-- .../DisabledPlanSelectionTooltip.tsx | 3 +-- .../pr-11205-added-1730725947069.md | 5 ++++ .../src/components/Divider.stories.tsx | 8 +++++- .../src/components/Divider.tsx | 5 ++-- packages/ui/src/components/index.ts | 1 + packages/ui/src/utilities/omittedProps.ts | 8 +++--- 64 files changed, 104 insertions(+), 131 deletions(-) create mode 100644 packages/ui/.changeset/pr-11205-added-1730725947069.md rename packages/{manager => ui}/src/components/Divider.stories.tsx (73%) rename packages/{manager => ui}/src/components/Divider.tsx (88%) diff --git a/packages/manager/src/components/AccessPanel/AccessPanel.tsx b/packages/manager/src/components/AccessPanel/AccessPanel.tsx index 7c26208c4e..2652233c81 100644 --- a/packages/manager/src/components/AccessPanel/AccessPanel.tsx +++ b/packages/manager/src/components/AccessPanel/AccessPanel.tsx @@ -21,7 +21,7 @@ import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature'; -import { Divider } from '../Divider'; +import { Divider } from '@linode/ui'; import UserSSHKeyPanel from './UserSSHKeyPanel'; import type { Theme } from '@mui/material/styles'; diff --git a/packages/manager/src/components/CheckoutBar/DisplaySectionList.tsx b/packages/manager/src/components/CheckoutBar/DisplaySectionList.tsx index 0a383207b1..ad365e380a 100644 --- a/packages/manager/src/components/CheckoutBar/DisplaySectionList.tsx +++ b/packages/manager/src/components/CheckoutBar/DisplaySectionList.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Divider } from '../Divider'; +import { Divider } from '@linode/ui'; import { DisplaySection } from './DisplaySection'; interface DisplaySectionListProps { diff --git a/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx b/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx index 7bf5cf630d..67551fdbdf 100644 --- a/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx +++ b/packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx @@ -1,15 +1,16 @@ -import { Theme } from '@mui/material/styles'; +import { Divider } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { Divider } from 'src/components/Divider'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { +import { LineGraph } from 'src/components/LineGraph/LineGraph'; +import { Typography } from 'src/components/Typography'; + +import type { Theme } from '@mui/material/styles'; +import type { DataSet, - LineGraph, LineGraphProps, } from 'src/components/LineGraph/LineGraph'; -import { Typography } from 'src/components/Typography'; const useStyles = makeStyles()((theme: Theme) => ({ message: { diff --git a/packages/manager/src/components/PrimaryNav/NavItem.tsx b/packages/manager/src/components/PrimaryNav/NavItem.tsx index 4e210b5f4c..b42ac1ebe7 100644 --- a/packages/manager/src/components/PrimaryNav/NavItem.tsx +++ b/packages/manager/src/components/PrimaryNav/NavItem.tsx @@ -1,9 +1,8 @@ -import { Tooltip } from '@linode/ui'; +import { Divider, Tooltip } from '@linode/ui'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { useStyles } from 'tss-react/mui'; -import { Divider } from 'src/components/Divider'; import { ListItem } from 'src/components/ListItem'; import { ListItemText } from 'src/components/ListItemText'; diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts index 69b998cfd4..54c0316b38 100644 --- a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts +++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts @@ -1,11 +1,10 @@ -import { Box, omittedProps } from '@linode/ui'; +import { Box, Divider, omittedProps } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { Link } from 'react-router-dom'; import AkamaiLogo from 'src/assets/logo/akamai-logo.svg'; import { Accordion } from 'src/components/Accordion'; -import { Divider } from 'src/components/Divider'; import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/SideMenu'; export const StyledGrid = styled(Grid, { diff --git a/packages/manager/src/components/Stack.stories.tsx b/packages/manager/src/components/Stack.stories.tsx index 07d01cd91b..a58ef52c36 100644 --- a/packages/manager/src/components/Stack.stories.tsx +++ b/packages/manager/src/components/Stack.stories.tsx @@ -1,7 +1,6 @@ -import { Paper } from '@linode/ui'; +import { Divider, Paper } from '@linode/ui'; import React from 'react'; -import { Divider } from './Divider'; import { Stack } from './Stack'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/manager/src/components/StackScript/StackScript.tsx b/packages/manager/src/components/StackScript/StackScript.tsx index 2951c34ee3..7ae7824d2f 100644 --- a/packages/manager/src/components/StackScript/StackScript.tsx +++ b/packages/manager/src/components/StackScript/StackScript.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Link, useHistory } from 'react-router-dom'; @@ -8,7 +8,6 @@ import { Button } from 'src/components/Button/Button'; import { Chip } from 'src/components/Chip'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; -import { Divider } from 'src/components/Divider'; import { H1Header } from 'src/components/H1Header/H1Header'; import { ScriptCode } from 'src/components/ScriptCode/ScriptCode'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx index e5ad1ec022..3b50311095 100644 --- a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx +++ b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx @@ -1,10 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { Dialog } from 'src/components/Dialog/Dialog'; -import { Divider } from 'src/components/Divider'; import { Link } from 'src/components/Link'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Betas/BetaDetailsList.tsx b/packages/manager/src/features/Betas/BetaDetailsList.tsx index 54926a1b8a..67adeef3f9 100644 --- a/packages/manager/src/features/Betas/BetaDetailsList.tsx +++ b/packages/manager/src/features/Betas/BetaDetailsList.tsx @@ -1,8 +1,7 @@ -import { Paper } from '@linode/ui'; +import { Divider, Paper } from '@linode/ui'; import * as React from 'react'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Divider } from 'src/components/Divider'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx index 6a99347fd2..5470fb0899 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; import { Currency } from 'src/components/Currency'; -import { Divider } from 'src/components/Divider'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { useAccountManagement } from 'src/hooks/useAccountManagement'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx index 45fa7b3809..8dd31bba9f 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx @@ -1,5 +1,5 @@ import { makePayment } from '@linode/api-v4/lib/account'; -import { InputAdornment } from '@linode/ui'; +import { Divider, InputAdornment } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; @@ -8,7 +8,6 @@ import { makeStyles } from 'tss-react/mui'; import { Button } from 'src/components/Button/Button'; import { Currency } from 'src/components/Currency'; -import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LinearProgress } from 'src/components/LinearProgress'; 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 90289afadc..58a7d152fb 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx @@ -1,8 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { LinearProgress } from 'src/components/LinearProgress'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx index 5da2291983..b3ab3e678d 100644 --- a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx @@ -1,10 +1,10 @@ +import { Divider } from '@linode/ui'; import { IconButton, useTheme } from '@mui/material'; import { Grid } from '@mui/material'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import Reload from 'src/assets/icons/refresh.svg'; -import { Divider } from 'src/components/Divider'; import { CloudPulseDashboardFilterBuilder } from '../shared/CloudPulseDashboardFilterBuilder'; import { CloudPulseDashboardSelect } from '../shared/CloudPulseDashboardSelect'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx index 0bfd67a0b8..174486d23e 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx @@ -1,7 +1,7 @@ +import { Divider } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; -import { Divider } from 'src/components/Divider'; import Select from 'src/components/EnhancedSelect'; import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleValue'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index f1db5c4759..cf6dfcaae0 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -1,4 +1,4 @@ -import { BetaChip, Paper } from '@linode/ui'; +import { BetaChip, Divider, Paper } from '@linode/ui'; import { createDatabaseSchema } from '@linode/validation/lib/databases.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -7,7 +7,6 @@ import * as React from 'react'; import { useHistory } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Divider } from 'src/components/Divider'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx index 8d2387c989..8fb1914e91 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 { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { FormControl, FormControlLabel, @@ -14,7 +14,6 @@ import { useParams } from 'react-router-dom'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; -import { Divider } from 'src/components/Divider'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx index 89e06beb12..43c8a4367e 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx @@ -1,10 +1,9 @@ -import { Box, Paper } from '@linode/ui'; +import { Box, Divider, Paper } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Divider } from 'src/components/Divider'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx index 57606e222d..5e048b4054 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx @@ -1,7 +1,6 @@ -import { Paper } from '@linode/ui'; +import { Divider, Paper } from '@linode/ui'; import * as React from 'react'; -import { Divider } from 'src/components/Divider'; import { Typography } from 'src/components/Typography'; import { DatabaseSettingsReviewUpdatesDialog } from 'src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog'; import { DatabaseSettingsUpgradeVersionDialog } from 'src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx index 2e2768e6c0..c0f4fedcbc 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx @@ -1,7 +1,7 @@ +import { Divider } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { Divider } from 'src/components/Divider'; import { Link } from 'src/components/Link'; import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx b/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx index dc2bf134a9..504e84bb8c 100644 --- a/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx @@ -1,10 +1,10 @@ +import { Divider } from '@linode/ui'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; import { useHistory } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; 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'; diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx index fcf4339ed3..a8ea018ca2 100644 --- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx +++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx @@ -1,10 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { Typography, styled } from '@mui/material'; import * as React from 'react'; import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Divider } from 'src/components/Divider'; import { Notice } from 'src/components/Notice/Notice'; import { RenderGuard } from 'src/components/RenderGuard'; import { EUAgreementCheckbox } from 'src/features/Account/Agreements/EUAgreementCheckbox'; diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx index 7215aa6bf8..99163fa45c 100644 --- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx +++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx @@ -1,10 +1,9 @@ -import { Box, IconButton } from '@linode/ui'; +import { Box, Divider, IconButton } from '@linode/ui'; import Close from '@mui/icons-material/Close'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { DisplayPrice } from 'src/components/DisplayPrice'; -import { Divider } from 'src/components/Divider'; import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput'; import { Typography } from 'src/components/Typography'; import { pluralize } from 'src/utilities/pluralize'; diff --git a/packages/manager/src/features/Linodes/CloneLanding/Details.tsx b/packages/manager/src/features/Linodes/CloneLanding/Details.tsx index 6c44321ce4..05de98947e 100644 --- a/packages/manager/src/features/Linodes/CloneLanding/Details.tsx +++ b/packages/manager/src/features/Linodes/CloneLanding/Details.tsx @@ -1,11 +1,10 @@ -import { Disk, Linode } from '@linode/api-v4/lib/linodes'; +import { Divider } from '@linode/ui'; import Close from '@mui/icons-material/Close'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Button } from 'src/components/Button/Button'; -import { Divider } from 'src/components/Divider'; import { Link } from 'src/components/Link'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; @@ -21,12 +20,10 @@ import { StyledHeader, StyledTypography, } from './Details.styles'; -import { - EstimatedCloneTimeMode, - ExtendedConfig, - getAllDisks, - getEstimatedCloneTime, -} from './utilities'; +import { getAllDisks, getEstimatedCloneTime } from './utilities'; + +import type { EstimatedCloneTimeMode, ExtendedConfig } from './utilities'; +import type { Disk, Linode } from '@linode/api-v4/lib/linodes'; interface Props { clearAll: () => void; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx index 6fc8200980..41a0d9bb56 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx @@ -1,7 +1,7 @@ +import { Divider } from '@linode/ui'; import React, { useMemo } from 'react'; import { useWatch } from 'react-hook-form'; -import { Divider } from 'src/components/Divider'; import { Notice } from 'src/components/Notice/Notice'; import { Paper } from '@linode/ui'; import { Stack } from 'src/components/Stack'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Security.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Security.tsx index bd4a2e76c8..10706d4a05 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Security.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Security.tsx @@ -1,8 +1,8 @@ +import { Divider } from '@linode/ui'; import React from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; import UserSSHKeyPanel from 'src/components/AccessPanel/UserSSHKeyPanel'; -import { Divider } from 'src/components/Divider'; import { DISK_ENCRYPTION_DEFAULT_DISTRIBUTED_INSTANCES, DISK_ENCRYPTION_DISTRIBUTED_DESCRIPTION, diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx index 08c1e59efa..0a62914917 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx @@ -1,10 +1,9 @@ +import { Divider, Paper } from '@linode/ui'; import { useTheme } from '@mui/material'; import useMediaQuery from '@mui/material/useMediaQuery'; import React from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; -import { Divider } from 'src/components/Divider'; -import { Paper } from '@linode/ui'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useImageQuery } from 'src/queries/images'; @@ -65,7 +64,7 @@ export const Summary = () => { getMonthlyBackupsPrice({ region: regionId, type }) ); - const price = getLinodePrice({ type, regionId, clusterSize }); + const price = getLinodePrice({ clusterSize, regionId, type }); const summaryItems = [ { diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx index 26d1a8c098..66c6e11ad0 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx @@ -1,7 +1,7 @@ +import { Divider } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; -import { Divider } from 'src/components/Divider'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx index 070e792bea..47eedde316 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx @@ -1,9 +1,8 @@ -import { FormControl } from '@linode/ui'; +import { Divider, FormControl } from '@linode/ui'; import React from 'react'; import { useController, useFormContext } from 'react-hook-form'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { Divider } from 'src/components/Divider'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx index b3bcaa6278..e352648397 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx @@ -1,10 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import React, { useState } from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Checkbox } from 'src/components/Checkbox'; -import { Divider } from 'src/components/Divider'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { LinkButton } from 'src/components/LinkButton'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.styles.ts b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.styles.ts index 87cc023382..d5de5b9506 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.styles.ts +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.styles.ts @@ -1,7 +1,6 @@ -import { FormControl } from '@linode/ui'; +import { Divider, FormControl } from '@linode/ui'; import { styled } from '@mui/material/styles'; -import { Divider } from 'src/components/Divider'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormGroup } from 'src/components/FormGroup'; import { RadioGroup } from 'src/components/RadioGroup'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx index f0ad691671..857d7a4833 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx @@ -1,4 +1,4 @@ -import { Box, FormControl, FormHelperText } from '@linode/ui'; +import { Box, Divider, FormControl, FormHelperText } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; @@ -12,7 +12,6 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; -import { Divider } from 'src/components/Divider'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx index 4f98b28637..575809aa0d 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx @@ -1,9 +1,8 @@ -import { Box, Tooltip } from '@linode/ui'; +import { Box, Divider, Tooltip } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx index 4d56a83b07..637c310821 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx @@ -1,8 +1,6 @@ -import { Linode } from '@linode/api-v4/lib/linodes'; -import { IPRangeInformation } from '@linode/api-v4/lib/networking'; -import { APIError } from '@linode/api-v4/lib/types'; -import Grid from '@mui/material/Unstable_Grid2'; +import { Divider } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import { remove, uniq, update } from 'ramda'; import * as React from 'react'; @@ -10,8 +8,7 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; -import { Divider } from 'src/components/Divider'; -import Select, { Item } from 'src/components/EnhancedSelect/Select'; +import Select from 'src/components/EnhancedSelect/Select'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; @@ -30,6 +27,11 @@ import { useAllDetailedIPv6RangesQuery } from 'src/queries/networking/networking import { areArraysEqual } from 'src/utilities/areArraysEqual'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; +import type { Linode } from '@linode/api-v4/lib/linodes'; +import type { IPRangeInformation } from '@linode/api-v4/lib/networking'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { Item } from 'src/components/EnhancedSelect/Select'; + interface Props { linodeId: number; onClose: () => void; @@ -451,10 +453,10 @@ export const IPRow: React.FC = React.memo((props) => { @@ -521,23 +523,23 @@ export const IPSharingRow: React.FC = React.memo((props) => { {handleDelete ? ( diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx index bea6fc91ef..9e6d78fb9e 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 { Divider } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { @@ -18,7 +19,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; 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'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx index a6e5d9374d..87bd9d7c40 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx @@ -1,5 +1,5 @@ import { rebuildLinode } from '@linode/api-v4'; -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { RebuildLinodeSchema } from '@linode/validation/lib/linodes.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { Formik } from 'formik'; @@ -10,7 +10,6 @@ import { useLocation } from 'react-router-dom'; import { AccessPanel } from 'src/components/AccessPanel/AccessPanel'; import { Checkbox } from 'src/components/Checkbox'; -import { Divider } from 'src/components/Divider'; import { ImageSelect } from 'src/components/ImageSelect/ImageSelect'; import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx index 65989e5796..fa651aba76 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -8,7 +8,6 @@ import { Button } from 'src/components/Button/Button'; import { Checkbox } from 'src/components/Checkbox'; import { CircleProgress } from 'src/components/CircleProgress/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; -import { Divider } from 'src/components/Divider'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx index c096b2b343..7e4dad7cf5 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx @@ -1,8 +1,7 @@ -import { Box, FormControl } from '@linode/ui'; +import { Box, Divider, FormControl } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { Divider } from 'src/components/Divider'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Radio } from 'src/components/Radio/Radio'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/AlertSection.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/AlertSection.tsx index b84ec5a7fc..6d9361f867 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/AlertSection.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/AlertSection.tsx @@ -1,9 +1,8 @@ -import { Box, InputAdornment } from '@linode/ui'; +import { Box, Divider, InputAdornment } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { Divider } from 'src/components/Divider'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle/Toggle'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx index 2ef7b01e54..1daea0a501 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx @@ -1,10 +1,10 @@ +import { Divider } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import useMediaQuery from '@mui/material/useMediaQuery'; import * as React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { Divider } from 'src/components/Divider'; import { Notice } from 'src/components/Notice/Notice'; import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx index 00a6c05c09..c08d2727ed 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; 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'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx index 0260fd5f04..f715498b02 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx @@ -1,4 +1,4 @@ -import { FormHelperText } from '@linode/ui'; +import { Divider, FormHelperText } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; -import { Divider } from 'src/components/Divider'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotificationMessage.tsx b/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotificationMessage.tsx index dedfb32743..144877d0da 100644 --- a/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotificationMessage.tsx +++ b/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotificationMessage.tsx @@ -1,10 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import ErrorIcon from '@mui/icons-material/Error'; import WarningIcon from '@mui/icons-material/Warning'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { Divider } from 'src/components/Divider'; import { Typography } from 'src/components/Typography'; import { sanitizeHTML } from 'src/utilities/sanitizeHTML'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx index dbb4e111a0..fb2a9e2fd2 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx @@ -1,8 +1,8 @@ +import { Divider } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; -import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx index 9a8c8f2dc5..fd5f87bfb7 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx @@ -1,8 +1,8 @@ +import { Divider } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; -import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx index 8aaa0e6eae..2ae24dd9a2 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx @@ -2,13 +2,12 @@ import { PLACEMENT_GROUP_POLICIES, PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; 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'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx index 03388e23ac..a26ef03d98 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx @@ -1,3 +1,4 @@ +import { Divider } from '@linode/ui'; import { createPlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -6,7 +7,6 @@ import { useLocation } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; -import { Divider } from 'src/components/Divider'; import { Drawer } from 'src/components/Drawer'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx index 2689d6229a..374a87e023 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 { Divider } from '@linode/ui'; import { updatePlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -11,7 +12,6 @@ import { useParams } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { CircleProgress } from 'src/components/CircleProgress'; 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'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx index efba74259d..37bf55467c 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx @@ -1,11 +1,10 @@ -import { Paper } from '@linode/ui'; +import { Divider, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useLocation } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Divider } from 'src/components/Divider'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.tsx index caed45a3d8..2309057377 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -7,7 +7,6 @@ import EnabledIcon from 'src/assets/icons/checkmark-enabled.svg'; import AkamaiWaveOnlyIcon from 'src/assets/icons/providers/akamai-logo-rgb-waveOnly.svg'; import GitHubIcon from 'src/assets/icons/providers/github-logo.svg'; import GoogleIcon from 'src/assets/icons/providers/google-logo.svg'; -import { Divider } from 'src/components/Divider'; import { Link } from 'src/components/Link'; import { Typography } from 'src/components/Typography'; import { useFlags } from 'src/hooks/useFlags'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx index 118739bf97..3e9afd06c8 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx @@ -1,9 +1,8 @@ import { confirmTwoFactor } from '@linode/api-v4/lib/profile'; -import { APIError } from '@linode/api-v4/lib/types'; +import { Divider } 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'; @@ -11,6 +10,8 @@ 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/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx index e1812a53fc..5d9351dc07 100644 --- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx +++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx @@ -1,8 +1,7 @@ -import { Paper } from '@linode/ui'; +import { Divider, Paper } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import React from 'react'; -import { Divider } from 'src/components/Divider'; import { Stack } from 'src/components/Stack'; import { useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx index a87a4e5a2e..41b7cb642a 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx @@ -1,9 +1,8 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Link } from 'react-router-dom'; -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'; diff --git a/packages/manager/src/features/Support/Hively.tsx b/packages/manager/src/features/Support/Hively.tsx index 9c146e8649..fd4460be02 100644 --- a/packages/manager/src/features/Support/Hively.tsx +++ b/packages/manager/src/features/Support/Hively.tsx @@ -1,8 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { DateTime } from 'luxon'; import * as React from 'react'; -import { Divider } from 'src/components/Divider'; import { Link } from 'src/components/Link'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Support/TicketAttachmentRow.tsx b/packages/manager/src/features/Support/TicketAttachmentRow.tsx index eb978e1548..d68be69c33 100644 --- a/packages/manager/src/features/Support/TicketAttachmentRow.tsx +++ b/packages/manager/src/features/Support/TicketAttachmentRow.tsx @@ -1,7 +1,6 @@ -import { Box, Paper } from '@linode/ui'; +import { Box, Divider, Paper } from '@linode/ui'; import * as React from 'react'; -import { Divider } from 'src/components/Divider'; import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx index 195bc0d7b6..063ca7d533 100644 --- a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx +++ b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import AutorenewIcon from '@mui/icons-material/Autorenew'; import { IconButton } from '@mui/material'; import Popover from '@mui/material/Popover'; @@ -8,7 +8,6 @@ import { useHistory } from 'react-router-dom'; import Bell from 'src/assets/icons/notification.svg'; import { Chip } from 'src/components/Chip'; -import { Divider } from 'src/components/Divider'; import { LinkButton } from 'src/components/LinkButton'; import { Typography } from 'src/components/Typography'; import { NotificationCenterEvent } from 'src/features/NotificationCenter/Events/NotificationCenterEvent'; diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx index 6ea3b004c2..344a08bfcc 100644 --- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx +++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx @@ -1,4 +1,4 @@ -import { Box, Tooltip } from '@linode/ui'; +import { Box, Divider, Tooltip } from '@linode/ui'; import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp'; import { styled, useMediaQuery } from '@mui/material'; @@ -10,7 +10,6 @@ import * as React from 'react'; import { Avatar } from 'src/components/Avatar/Avatar'; import { AvatarForProxy } from 'src/components/AvatarForProxy'; import { Button } from 'src/components/Button/Button'; -import { Divider } from 'src/components/Divider'; import { Hidden } from 'src/components/Hidden'; import { Link } from 'src/components/Link'; import { Stack } from 'src/components/Stack'; diff --git a/packages/manager/src/features/VPCs/VPCCreate/MultipleSubnetInput.tsx b/packages/manager/src/features/VPCs/VPCCreate/MultipleSubnetInput.tsx index 7c5dc9d88e..1a4bcf8fcc 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/MultipleSubnetInput.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/MultipleSubnetInput.tsx @@ -1,8 +1,8 @@ +import { Divider } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { Divider } from 'src/components/Divider'; import { DEFAULT_SUBNET_IPV4_VALUE, getRecommendedSubnetIPv4, diff --git a/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx b/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx index 8856b1c656..0fbc7a4898 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx @@ -1,8 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, Divider } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; -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'; diff --git a/packages/manager/src/features/components/PlansPanel/DisabledPlanSelectionTooltip.tsx b/packages/manager/src/features/components/PlansPanel/DisabledPlanSelectionTooltip.tsx index 9a9bd187c8..5a7d52752e 100644 --- a/packages/manager/src/features/components/PlansPanel/DisabledPlanSelectionTooltip.tsx +++ b/packages/manager/src/features/components/PlansPanel/DisabledPlanSelectionTooltip.tsx @@ -1,5 +1,4 @@ -import { IconButton } from '@linode/ui'; -import { Tooltip } from '@linode/ui'; +import { IconButton, Tooltip } from '@linode/ui'; import HelpOutline from '@mui/icons-material/HelpOutline'; import * as React from 'react'; diff --git a/packages/ui/.changeset/pr-11205-added-1730725947069.md b/packages/ui/.changeset/pr-11205-added-1730725947069.md new file mode 100644 index 0000000000..ea4ab9ebe4 --- /dev/null +++ b/packages/ui/.changeset/pr-11205-added-1730725947069.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +Migrate Divider to ui package ([#11205](https://github.com/linode/manager/pull/11205)) diff --git a/packages/manager/src/components/Divider.stories.tsx b/packages/ui/src/components/Divider.stories.tsx similarity index 73% rename from packages/manager/src/components/Divider.stories.tsx rename to packages/ui/src/components/Divider.stories.tsx index 52619e8223..364e02f130 100644 --- a/packages/manager/src/components/Divider.stories.tsx +++ b/packages/ui/src/components/Divider.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -import { Divider } from 'src/components/Divider'; +import { Divider } from './Divider'; const meta: Meta = { component: Divider, @@ -11,6 +11,12 @@ const meta: Meta = { type Story = StoryObj; export const Default: Story = { + args: { + absolute: false, + light: true, + variant: 'inset', + }, + render: (args) => , }; diff --git a/packages/manager/src/components/Divider.tsx b/packages/ui/src/components/Divider.tsx similarity index 88% rename from packages/manager/src/components/Divider.tsx rename to packages/ui/src/components/Divider.tsx index 6186797e1e..0939d4026b 100644 --- a/packages/manager/src/components/Divider.tsx +++ b/packages/ui/src/components/Divider.tsx @@ -1,9 +1,8 @@ -import { omittedProps } from '@linode/ui'; import _Divider from '@mui/material/Divider'; import { styled } from '@mui/material/styles'; import * as React from 'react'; - import type { DividerProps as _DividerProps } from '@mui/material/Divider'; +import { omittedProps } from '../utilities'; export interface DividerProps extends _DividerProps { dark?: boolean; @@ -24,7 +23,7 @@ const StyledDivider = styled(_Divider, { 'light', 'dark', ]), -})(({ theme, ...props }) => ({ +})(({ ...props }) => ({ marginBottom: props.spacingBottom, marginTop: props.spacingTop, })); diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index d1887cebe1..0d3f2829be 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -1,6 +1,7 @@ export * from './BetaChip'; export * from './Box'; export * from './Chip'; +export * from './Divider'; export * from './FormControl'; export * from './FormHelperText'; export * from './IconButton'; diff --git a/packages/ui/src/utilities/omittedProps.ts b/packages/ui/src/utilities/omittedProps.ts index 330b95f7f0..49af7e93bb 100644 --- a/packages/ui/src/utilities/omittedProps.ts +++ b/packages/ui/src/utilities/omittedProps.ts @@ -15,10 +15,10 @@ export const omittedProps = (props: Array) => ( ): boolean => !props.includes(prop); /** - * Helper to filter out props we spread into a component. - * This helpers differs from `omittedProps` in that it omits the props - * from the object instead of returning a boolean. - * This util is a direct replacement for `omit` from lodash. + * Helper to filter out props we spread into a component. + * This helpers differs from `omittedProps` in that it omits the props + * from the object instead of returning a boolean. + * This util is a direct replacement for `omit` from lodash. * @param props Array of props to filter out * @param toRemove Array of props to remove From 4d3157a621774addc45c6b7dd74447d98d8d3dc1 Mon Sep 17 00:00:00 2001 From: rodonnel-akamai Date: Thu, 7 Nov 2024 11:04:51 -0500 Subject: [PATCH 003/131] UIE-8247: Conditionally give the new docs as the link on database landing page (#11227) --- .../features/Databases/DatabaseLanding/DatabaseLanding.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx index 47e5542387..f8430e0871 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx @@ -138,6 +138,9 @@ const DatabaseLanding = () => { const showTabs = isV2Enabled && !!legacyDatabases?.data.length; const isNewDatabase = isV2Enabled && !!newDatabases?.data.length; const showSuspend = isDatabasesV2GA && !!newDatabases?.data.length; + const docsLink = isV2Enabled + ? 'https://techdocs.akamai.com/cloud-computing/docs/aiven-database-clusters' + : 'https://techdocs.akamai.com/cloud-computing/docs/managed-databases'; const legacyTable = () => { return ( @@ -179,7 +182,7 @@ const DatabaseLanding = () => { }} createButtonText="Create Database Cluster" disabledCreateButton={isRestricted} - docsLink="https://techdocs.akamai.com/cloud-computing/docs/managed-databases" + docsLink={docsLink} onButtonClick={() => history.push('/databases/create')} title="Database Clusters" /> From 129a9da6bcd8f3d94861ce0ce0e580f049d50178 Mon Sep 17 00:00:00 2001 From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Date: Thu, 7 Nov 2024 13:13:34 -0500 Subject: [PATCH 004/131] fix: [M3-8764] - Kubernetes UI issues (#11217) * initial clean up * save progress * add changeset * fix type error * feedback @mjac0bs * a few more small fixes * a few more small fixes --------- Co-authored-by: Banks Nussman --- .../pr-11217-fixed-1730913381751.md | 5 + .../KubeClusterSpecs.tsx | 13 +- .../KubeConfigDisplay.tsx | 14 +- .../KubeSummaryPanel.tsx | 132 ++++----- .../KubernetesClusterDetail.tsx | 48 ++-- .../NodePoolsDisplay/NodePool.tsx | 145 +++++----- .../NodePoolsDisplay/NodePoolsDisplay.tsx | 250 +++++++----------- .../NodePoolsDisplay/NodeRow.tsx | 22 +- .../NodePoolsDisplay/NodeTable.styles.ts | 24 -- .../NodePoolsDisplay/NodeTable.tsx | 11 +- 10 files changed, 282 insertions(+), 382 deletions(-) create mode 100644 packages/manager/.changeset/pr-11217-fixed-1730913381751.md diff --git a/packages/manager/.changeset/pr-11217-fixed-1730913381751.md b/packages/manager/.changeset/pr-11217-fixed-1730913381751.md new file mode 100644 index 0000000000..8763a003d4 --- /dev/null +++ b/packages/manager/.changeset/pr-11217-fixed-1730913381751.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Kubernetes details page UI issues ([#11217](https://github.com/linode/manager/pull/11217)) diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx index d7f2407acb..ac02162e06 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx @@ -32,7 +32,6 @@ interface Props { const useStyles = makeStyles()((theme: Theme) => ({ iconTextOuter: { - flexBasis: '72%', minWidth: 115, }, item: { @@ -45,16 +44,6 @@ const useStyles = makeStyles()((theme: Theme) => ({ paddingBottom: theme.spacing(1), paddingTop: theme.spacing(1), }, - mainGridContainer: { - position: 'relative', - [theme.breakpoints.up('lg')]: { - justifyContent: 'space-between', - }, - }, - root: { - marginBottom: theme.spacing(3), - padding: `${theme.spacing(2.5)} ${theme.spacing(2.5)} ${theme.spacing(3)}`, - }, tooltip: { '& .MuiTooltip-tooltip': { minWidth: 320, @@ -147,7 +136,7 @@ export const KubeClusterSpecs = React.memo((props: Props) => { }; return ( - + {kubeSpecsLeft.map(kubeSpecItem)} {kubeSpecsRight.map(kubeSpecItem)} diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx index 810a4c9244..cb48ac4507 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx @@ -1,5 +1,4 @@ import { Box } from '@linode/ui'; -import Grid from '@mui/material/Unstable_Grid2'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -8,6 +7,7 @@ import DetailsIcon from 'src/assets/icons/code-file.svg'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; import ResetIcon from 'src/assets/icons/reset.svg'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; +import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useAllKubernetesClusterAPIEndpointsQuery, @@ -135,8 +135,8 @@ export const KubeConfigDisplay = (props: Props) => { }; return ( - <> - + + Kubernetes API Endpoint: @@ -147,8 +147,8 @@ export const KubeConfigDisplay = (props: Props) => { endpointsLoading, endpointsError?.[0].reason )} - - + + Kubeconfig: @@ -189,7 +189,7 @@ export const KubeConfigDisplay = (props: Props) => { - - + + ); }; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx index 6b4cf458e5..6e6c9d4004 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx @@ -1,7 +1,6 @@ import { Box } from '@linode/ui'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { useTheme } from '@mui/material/styles'; -import Grid from '@mui/material/Unstable_Grid2'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -29,9 +28,10 @@ import { KubeConfigDisplay } from './KubeConfigDisplay'; import { KubeConfigDrawer } from './KubeConfigDrawer'; import { KubeControlPlaneACLDrawer } from './KubeControlPaneACLDrawer'; import { KubeEntityDetailFooter } from './KubeEntityDetailFooter'; -import { StyledActionRowGrid } from './KubeSummaryPanel.styles'; import type { KubernetesCluster } from '@linode/api-v4/lib/kubernetes'; +import { Hidden } from 'src/components/Hidden'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; interface Props { cluster: KubernetesCluster; @@ -95,55 +95,32 @@ export const KubeSummaryPanel = React.memo((props: Props) => { setDrawerOpen(true); }; - const sxSpacing = { - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(1), - }; - - const sxMainGridContainer = { - paddingBottom: theme.spacing(2.5), - paddingTop: theme.spacing(2), - position: 'relative', - }; - return ( - + + - - + {cluster.control_plane.high_availability && ( + ({ + borderColor: theme.color.green, + position: 'absolute', + right: theme.spacing(3), + })} + label="HA CLUSTER" + size="small" + variant="outlined" /> - - - - {cluster.control_plane.high_availability && ( - ({ borderColor: theme.color.green })} - variant="outlined" - /> - )} - - - + )} + } footer={ { Summary - - { - window.open(dashboard?.url, '_blank'); - }} - sx={{ - '& svg': { - height: '14px', - marginLeft: '4px', - }, - alignItems: 'center', - display: 'flex', - }} - disabled={Boolean(dashboardError) || !dashboard} - > - Kubernetes Dashboard - - - setIsDeleteDialogOpen(true)} - > - Delete Cluster - + + + window.open(dashboard?.url, '_blank'), + title: 'Kubernetes Dashboard', + }, + { + onClick: () => setIsDeleteDialogOpen(true), + title: 'Delete Cluster', + }, + ]} + ariaLabel={`Action menu for Kubernetes Cluster ${cluster.label}`} + /> + + + } + onClick={() => window.open(dashboard?.url, '_blank')} + > + Kubernetes Dashboard + + setIsDeleteDialogOpen(true)}> + Delete Cluster + + } - noBodyBottomBorder /> { will no longer be able to access this cluster via your previous Kubeconfig file. This action cannot be undone. - + ); }); diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx index e495d7db70..db046030fb 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx @@ -1,4 +1,4 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Box } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useLocation, useParams } from 'react-router-dom'; @@ -7,6 +7,7 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; +import { Stack } from 'src/components/Stack'; import { getKubeHighAvailability } from 'src/features/Kubernetes/kubeUtils'; import { useAPLAvailability } from 'src/features/Kubernetes/kubeUtils'; import { useAccount } from 'src/queries/account/account'; @@ -78,16 +79,13 @@ export const KubernetesClusterDetail = () => { }; return ( - <> + - - - - + { docsLink="https://techdocs.akamai.com/cloud-computing/docs/getting-started-with-lke-linode-kubernetes-engine" title="Kubernetes Cluster Details" /> - + - - {showAPL && cluster.apl_enabled && ( - <> - - + {showAPL && cluster.apl_enabled && ( + + - - - )} - + + )} - + setIsUpgradeToHAOpen(false)} open={isUpgradeToHAOpen} regionID={cluster.region} /> - + ); }; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx index 6f91f150b1..dcd5bc3beb 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx @@ -1,9 +1,8 @@ import { Box, Paper, Tooltip } from '@linode/ui'; -import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { makeStyles } from 'tss-react/mui'; import { StyledActionButton } from 'src/components/Button/StyledActionButton'; +import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { NodeTable } from './NodeTable'; @@ -13,7 +12,8 @@ import type { PoolNodeResponse, } from '@linode/api-v4/lib/kubernetes'; import type { EncryptionStatus } from '@linode/api-v4/lib/linodes/types'; -import type { Theme } from '@mui/material/styles'; +import { Hidden } from 'src/components/Hidden'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; interface Props { autoscaler: AutoscaleSettings; @@ -29,19 +29,6 @@ interface Props { typeLabel: string; } -const useStyles = makeStyles()((theme: Theme) => ({ - autoscaleText: { - alignSelf: 'center', - paddingRight: theme.spacing(2), - }, - button: { - paddingRight: 8, - }, - deletePoolBtn: { - paddingRight: 8, - }, -})); - export const NodePool = (props: Props) => { const { autoscaler, @@ -57,10 +44,8 @@ export const NodePool = (props: Props) => { typeLabel, } = props; - const { classes } = useStyles(); - return ( - + { py: 0, }} > - - {typeLabel} - - - openAutoscalePoolDialog(poolId)} - > - Autoscale Pool - - {autoscaler.enabled ? ( - - {`(Min ${autoscaler.min} / Max ${autoscaler.max})`} - - ) : null} - handleClickResize(poolId)} - > - Resize Pool - - openRecycleAllNodesDialog(poolId)} - > - Recycle Pool Nodes - - -
- openDeletePoolDialog(poolId)} - > - Delete Pool - -
- - + {typeLabel} + + openAutoscalePoolDialog(poolId), + title: 'Autoscale Pool', + }, + { + onClick: () => handleClickResize(poolId), + title: 'Resize Pool', + }, + { + onClick: () => openRecycleAllNodesDialog(poolId), + title: 'Recycle Pool Nodes', + }, + { + disabled: isOnlyNodePool, + onClick: () => openDeletePoolDialog(poolId), + title: 'Delete Pool', + tooltip: isOnlyNodePool + ? 'Clusters must contain at least one node pool.' + : undefined, + }, + ]} + ariaLabel={`Action menu for Node Pool ${poolId}`} + /> + + + + openAutoscalePoolDialog(poolId)} + > + Autoscale Pool + + {autoscaler.enabled && ( + + (Min {autoscaler.min} / Max {autoscaler.max}) + + )} + handleClickResize(poolId)} + > + Resize Pool + + openRecycleAllNodesDialog(poolId)} + > + Recycle Pool Nodes + + +
+ openDeletePoolDialog(poolId)} + > + Delete Pool + +
+ + + { poolId={poolId} typeLabel={typeLabel} /> - + ); }; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx index 99a5957085..3976191515 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx @@ -1,7 +1,5 @@ -import Grid from '@mui/material/Unstable_Grid2'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; -import { makeStyles } from 'tss-react/mui'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; @@ -22,37 +20,6 @@ import { RecycleNodeDialog } from './RecycleNodeDialog'; import { ResizeNodePoolDrawer } from './ResizeNodePoolDrawer'; import type { Region } from '@linode/api-v4'; -import type { Theme } from '@mui/material/styles'; - -const useStyles = makeStyles()((theme: Theme) => ({ - button: { - marginBottom: theme.spacing(), - marginLeft: theme.spacing(), - }, - displayTable: { - '& > div': { - marginBottom: theme.spacing(3), - }, - '& > div:last-child': { - marginBottom: 0, - }, - padding: '8px 8px 0px', - width: '100%', - }, - nodePoolHeader: { - marginBottom: theme.spacing(), - [theme.breakpoints.only('sm')]: { - marginLeft: theme.spacing(), - }, - [theme.breakpoints.only('xs')]: { - marginLeft: theme.spacing(), - }, - }, - nodePoolHeaderOuter: { - alignItems: 'center', - display: 'flex', - }, -})); export interface Props { clusterID: number; @@ -63,7 +30,6 @@ export interface Props { export const NodePoolsDisplay = (props: Props) => { const { clusterID, clusterLabel, clusterRegionId, regionsData } = props; - const { classes, cx } = useStyles(); const { data: pools, @@ -117,138 +83,118 @@ export const NodePoolsDisplay = (props: Props) => { return ( <> - - - - Node Pools - - - + Node Pools + - - - - - {poolsError ? ( - - ) : ( - - - {_pools?.map((thisPool) => { - const { disk_encryption, id, nodes } = thisPool; - - const thisPoolType = types?.find( - (thisType) => thisType.id === thisPool.type - ); - - const typeLabel = - thisPoolType?.formattedLabel ?? 'Unknown type'; - - return ( - ({ paddingBottom: theme.spacing(2) })} - > - { - setSelectedPoolId(poolId); - setIsAutoscaleDialogOpen(true); - }} - openDeletePoolDialog={(id) => { - setSelectedPoolId(id); - setIsDeleteNodePoolOpen(true); - }} - openRecycleAllNodesDialog={(id) => { - setSelectedPoolId(id); - setIsRecycleAllPoolNodesOpen(true); - }} - openRecycleNodeDialog={(nodeId, linodeLabel) => { - setSelectedNodeId(nodeId); - setIsRecycleNodeOpen(true); - }} - autoscaler={thisPool.autoscaler} - encryptionStatus={disk_encryption} - handleClickResize={handleOpenResizeDrawer} - isOnlyNodePool={pools?.length === 1} - nodes={nodes ?? []} - poolId={thisPool.id} - typeLabel={typeLabel} - /> - - ); - })} - {pools?.length > numPoolsToDisplay && ( - -
- - )} - - - setAddDrawerOpen(false)} - open={addDrawerOpen} - regionsData={regionsData} - /> - setIsResizeDrawerOpen(false)} - open={isResizeDrawerOpen} - /> - setIsDeleteNodePoolOpen(false)} - open={isDeleteNodePoolOpen} - /> - setIsAutoscaleDialogOpen(false)} - open={isAutoscaleDialogOpen} - /> - setIsRecycleNodeOpen(false)} - open={isRecycleNodeOpen} - /> - setIsRecycleAllPoolNodesOpen(false)} - open={isRecycleAllPoolNodesOpen} - /> - setIsRecycleClusterOpen(false)} - open={isRecycleClusterOpen} + + + {poolsError && } + + {_pools?.map((thisPool) => { + const { disk_encryption, id, nodes } = thisPool; + + const thisPoolType = types?.find( + (thisType) => thisType.id === thisPool.type + ); + + const typeLabel = thisPoolType?.formattedLabel ?? 'Unknown type'; + + return ( + { + setSelectedPoolId(poolId); + setIsAutoscaleDialogOpen(true); + }} + openDeletePoolDialog={(id) => { + setSelectedPoolId(id); + setIsDeleteNodePoolOpen(true); + }} + openRecycleAllNodesDialog={(id) => { + setSelectedPoolId(id); + setIsRecycleAllPoolNodesOpen(true); + }} + openRecycleNodeDialog={(nodeId, linodeLabel) => { + setSelectedNodeId(nodeId); + setIsRecycleNodeOpen(true); + }} + autoscaler={thisPool.autoscaler} + encryptionStatus={disk_encryption} + handleClickResize={handleOpenResizeDrawer} + isOnlyNodePool={pools?.length === 1} + key={id} + nodes={nodes ?? []} + poolId={thisPool.id} + typeLabel={typeLabel} /> - - )} + ); + })} + {pools?.length > numPoolsToDisplay && ( + +
+ + )} + setAddDrawerOpen(false)} + open={addDrawerOpen} + regionsData={regionsData} + /> + setIsResizeDrawerOpen(false)} + open={isResizeDrawerOpen} + /> + setIsDeleteNodePoolOpen(false)} + open={isDeleteNodePoolOpen} + /> + setIsAutoscaleDialogOpen(false)} + open={isAutoscaleDialogOpen} + /> + setIsRecycleNodeOpen(false)} + open={isRecycleNodeOpen} + /> + setIsRecycleAllPoolNodesOpen(false)} + open={isRecycleAllPoolNodesOpen} + /> + setIsRecycleClusterOpen(false)} + open={isRecycleClusterOpen} + /> ); }; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeRow.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeRow.tsx index 2aba5674d8..738c9249a6 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeRow.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeRow.tsx @@ -1,3 +1,4 @@ +import { Box } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Link } from 'react-router-dom'; @@ -5,13 +6,13 @@ import { Link } from 'react-router-dom'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; +import { TableRow } from 'src/components/TableRow'; import { Typography } from 'src/components/Typography'; import { transitionText } from 'src/features/Linodes/transitions'; import { useInProgressEvents } from 'src/queries/events/events'; import { usePreferences } from 'src/queries/profile/preferences'; import NodeActionMenu from './NodeActionMenu'; -import { StyledCopyTooltip, StyledTableRow } from './NodeTable.styles'; import type { APIError } from '@linode/api-v4/lib/types'; @@ -73,7 +74,7 @@ export const NodeRow = React.memo((props: NodeRowProps) => { const displayIP = ip ?? ''; return ( - + @@ -113,15 +114,22 @@ export const NodeRow = React.memo((props: NodeRowProps) => { Error retrieving IP ) : displayIP.length > 0 ? ( - <> + - - + + ) : null} @@ -131,6 +139,6 @@ export const NodeRow = React.memo((props: NodeRowProps) => { openRecycleNodeDialog={openRecycleNodeDialog} /> - + ); }); diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts index 97675764ff..b00eacbf63 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts @@ -2,32 +2,8 @@ import { styled } from '@mui/material/styles'; import VerticalDivider from 'src/assets/icons/divider-vertical.svg'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; -import { Table } from 'src/components/Table'; -import { TableRow } from 'src/components/TableRow'; import { Typography } from 'src/components/Typography'; -export const StyledTableRow = styled(TableRow, { - label: 'TableRow', -})(({ theme }) => ({ - '& svg': { - height: `12px`, - width: `12px`, - }, - '&:hover': { - backgroundColor: theme.bg.lightBlue1, - }, - [`&:hover .copy-tooltip > svg, & .copy-tooltip:focus > svg`]: { - opacity: 1, - }, - marginLeft: 4, -})); - -export const StyledTable = styled(Table, { - label: 'Table', -})(({ theme }) => ({ - borderLeft: `1px solid ${theme.borderColors.borderTable}`, - borderRight: `1px solid ${theme.borderColors.borderTable}`, -})); export const StyledCopyTooltip = styled(CopyTooltip, { label: 'CopyTooltip', diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx index c65f67dde3..ec38258918 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.tsx @@ -8,6 +8,7 @@ import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/uti import OrderBy from 'src/components/OrderBy'; import Paginate from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; +import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableContentWrapper } from 'src/components/TableContentWrapper/TableContentWrapper'; @@ -20,11 +21,7 @@ import { Typography } from 'src/components/Typography'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; import { NodeRow as _NodeRow } from './NodeRow'; -import { - StyledTable, - StyledTypography, - StyledVerticalDivider, -} from './NodeTable.styles'; +import { StyledTypography, StyledVerticalDivider } from './NodeTable.styles'; import type { NodeRow } from './NodeRow'; import type { PoolNodeResponse } from '@linode/api-v4/lib/kubernetes'; @@ -70,7 +67,7 @@ export const NodeTable = React.memo((props: Props) => { pageSize, }) => ( <> - + { - +
Date: Thu, 7 Nov 2024 15:21:08 -0500 Subject: [PATCH 005/131] refactor: [M3-8650] - Migrate Stack to `@linode/ui` package (#11228) * migrate stack, update organization for divider/icon button * Added changeset: `Stack` component to `ui` package --- .../src/components/AkamaiBanner/AkamaiBanner.styles.ts | 4 +--- .../manager/src/components/AkamaiBanner/AkamaiBanner.tsx | 3 +-- .../src/components/Autocomplete/Autocomplete.stories.tsx | 3 +-- .../GenerateFirewallDialog/GenerateFirewallDialog.tsx | 2 +- .../manager/src/components/ImageSelect/ImageOption.tsx | 3 +-- packages/manager/src/components/MaintenanceScreen.tsx | 2 +- .../manager/src/components/MaskableText/MaskableText.tsx | 4 +--- .../src/components/PasswordInput/PasswordInput.tsx | 2 +- .../PlacementGroupsSelect/PlacementGroupSelectOption.tsx | 3 +-- .../src/components/RegionSelect/RegionMultiSelect.tsx | 2 +- .../manager/src/components/RegionSelect/RegionOption.tsx | 3 +-- .../SelectFirewallPanel/SelectFirewallPanel.tsx | 3 +-- .../components/Snackbar/ToastNotifications.stories.tsx | 3 +-- .../components/Uploaders/ImageUploader/ImageUploader.tsx | 3 +-- .../features/Account/Maintenance/MaintenanceLanding.tsx | 2 +- .../src/features/Account/ObjectStorageSettings.tsx | 3 +-- .../features/Account/SwitchAccounts/ChildAccountList.tsx | 3 +-- packages/manager/src/features/Backups/BackupDrawer.tsx | 3 +-- packages/manager/src/features/Betas/BetaDetails.tsx | 2 +- packages/manager/src/features/Betas/BetaDetailsList.tsx | 3 +-- packages/manager/src/features/Betas/BetaSignup.tsx | 3 +-- packages/manager/src/features/Betas/BetasLanding.tsx | 2 +- .../BillingSummary/PaymentDrawer/PaymentDrawer.tsx | 3 +-- packages/manager/src/features/Domains/DomainBanner.tsx | 2 +- packages/manager/src/features/Footer.tsx | 2 +- .../features/GlobalNotifications/APIMaintenanceBanner.tsx | 8 +++++--- .../src/features/Images/ImagesCreate/CreateImageTab.tsx | 3 +-- .../src/features/Images/ImagesCreate/ImageUpload.tsx | 3 +-- .../Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx | 3 +-- .../ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx | 3 +-- .../src/features/Images/ImagesLanding/ImageRow.tsx | 3 +-- .../features/Images/ImagesLanding/RebuildImageDrawer.tsx | 3 +-- .../Kubernetes/CreateCluster/CreateCluster.styles.ts | 4 +--- .../features/Kubernetes/CreateCluster/CreateCluster.tsx | 3 +-- .../KubernetesClusterDetail/KubeConfigDisplay.tsx | 3 +-- .../KubernetesClusterDetail/KubeSummaryPanel.tsx | 3 +-- .../KubernetesClusterDetail/KubernetesClusterDetail.tsx | 3 +-- .../KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx | 7 +++---- .../NodePoolsDisplay/NodePoolsDisplay.tsx | 2 +- .../NodePoolsDisplay/NodeTable.styles.ts | 1 - .../src/features/Linodes/LinodeCreate/Addons/Addons.tsx | 4 +--- .../src/features/Linodes/LinodeCreate/Addons/Backups.tsx | 2 +- .../features/Linodes/LinodeCreate/Addons/PrivateIP.tsx | 2 +- .../src/features/Linodes/LinodeCreate/EUAgreement.tsx | 3 +-- .../src/features/Linodes/LinodeCreate/Firewall.tsx | 4 +--- .../src/features/Linodes/LinodeCreate/Summary/Summary.tsx | 3 +-- .../Linodes/LinodeCreate/Tabs/Backups/BackupSelect.tsx | 4 +--- .../Linodes/LinodeCreate/Tabs/Backups/Backups.tsx | 3 +-- .../Linodes/LinodeCreate/Tabs/Backups/LinodeSelect.tsx | 5 ++--- .../features/Linodes/LinodeCreate/Tabs/Clone/Clone.tsx | 3 +-- .../src/features/Linodes/LinodeCreate/Tabs/Images.tsx | 4 +--- .../Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx | 3 +-- .../Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx | 4 +--- .../Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx | 3 +-- .../Linodes/LinodeCreate/Tabs/Marketplace/Marketplace.tsx | 3 +-- .../Linodes/LinodeCreate/Tabs/OperatingSystems.tsx | 3 +-- .../Tabs/StackScripts/StackScriptSelectionList.tsx | 3 +-- .../Tabs/StackScripts/StackScriptSelectionRow.tsx | 2 +- .../LinodeCreate/Tabs/StackScripts/StackScripts.tsx | 3 +-- .../UserDefinedFields/UserDefinedFieldInput.tsx | 3 +-- .../StackScripts/UserDefinedFields/UserDefinedFields.tsx | 4 +--- .../Linodes/LinodeCreate/UserData/UserDataHeading.tsx | 2 +- .../src/features/Linodes/LinodeCreate/VLAN/VLAN.tsx | 4 ++-- .../manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx | 4 +--- .../src/features/Linodes/LinodeCreate/VPC/VPCRanges.tsx | 3 +-- .../manager/src/features/Linodes/LinodeCreate/index.tsx | 2 +- .../Linodes/LinodeCreate/shared/LinodeSelectTable.tsx | 3 +-- .../Linodes/LinodeCreate/shared/SelectLinodeCard.tsx | 5 +++-- .../src/features/Linodes/LinodeEntityDetailHeader.tsx | 3 +-- .../LinodesDetail/LinodeNetworking/AddIPDrawer.tsx | 3 +-- .../LinodeNetworking/LinodeFirewalls/LinodeFirewalls.tsx | 3 +-- .../LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx | 4 +--- .../LinodesDetail/LinodeNetworking/LinodeNetwork.tsx | 3 +-- .../LinodesDetail/LinodeSettings/InterfaceSelect.tsx | 2 +- .../Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx | 3 +-- .../Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx | 4 +--- .../Linodes/LinodesDetail/LinodeStorage/LinodeStorage.tsx | 3 +-- .../LinodesDetailHeader/UpgradeVolumesDialog.tsx | 2 +- .../Linodes/LinodesDetail/VolumesUpgradeBanner.tsx | 3 +-- .../ServiceTargets/LinodeOrIPSelect.tsx | 3 +-- .../src/features/NodeBalancers/ConfigNodeIPSelect.tsx | 3 +-- .../src/features/NodeBalancers/NodeBalancerCreate.tsx | 4 ++-- .../NodeBalancerDetail/NodeBalancerFirewalls.tsx | 3 +-- .../AccessKeyTable/AccessKeyActionMenu.tsx | 2 +- .../AccessKeyLanding/AccessKeyTable/AccessKeyTableRow.tsx | 2 +- .../ObjectStorage/BucketLanding/BucketTableRow.tsx | 2 +- .../PlacementGroupsAssignLinodesDrawer.tsx | 3 +-- .../PlacementGroups/PlacementGroupsCreateDrawer.tsx | 3 +-- .../PlacementGroupsLinodes/PlacementGroupsLinodes.tsx | 2 +- .../PlacementGroups/PlacementGroupsEditDrawer.tsx | 3 +-- .../manager/src/features/Profile/APITokens/APITokens.tsx | 2 +- .../Profile/DisplaySettings/AvatarColorPickerDialog.tsx | 2 +- .../features/Profile/DisplaySettings/DisplaySettings.tsx | 3 +-- .../manager/src/features/Profile/Settings/Settings.tsx | 3 +-- .../manager/src/features/Search/SearchLanding.styles.ts | 2 +- packages/manager/src/features/Support/Hively.tsx | 3 +-- .../Support/SupportTicketDetail/SupportTicketDetail.tsx | 2 +- .../SupportTicketDetail/TabbedReply/MarkdownReference.tsx | 3 +-- .../features/Support/SupportTicketDetail/TicketStatus.tsx | 3 +-- .../manager/src/features/Support/TicketAttachmentRow.tsx | 3 +-- .../manager/src/features/TopMenu/UserMenu/UserMenu.tsx | 3 +-- .../src/features/Users/UserProfile/DeleteUserPanel.tsx | 3 +-- .../src/features/Users/UserProfile/UserDetailsPanel.tsx | 3 +-- .../src/features/Users/UserProfile/UserProfile.tsx | 2 +- packages/manager/src/features/Users/UserRow.tsx | 3 +-- .../manager/src/features/VPCs/VPCCreate/SubnetNode.tsx | 3 +-- .../src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx | 2 +- packages/manager/src/features/Volumes/VolumeCreate.tsx | 2 +- .../manager/src/features/Volumes/VolumeDetailsDrawer.tsx | 5 +++-- packages/ui/.changeset/pr-11228-added-1730992441169.md | 5 +++++ .../ui/src/components/{ => Divider}/Divider.stories.tsx | 0 packages/ui/src/components/{ => Divider}/Divider.tsx | 2 +- packages/ui/src/components/Divider/index.ts | 1 + .../ui/src/components/{ => IconButton}/IconButton.tsx | 0 packages/ui/src/components/IconButton/index.ts | 1 + .../src/components/Stack}/Stack.stories.tsx | 3 ++- .../src/components => ui/src/components/Stack}/Stack.tsx | 4 +++- packages/ui/src/components/Stack/index.ts | 1 + packages/ui/src/components/index.ts | 1 + 119 files changed, 136 insertions(+), 208 deletions(-) create mode 100644 packages/ui/.changeset/pr-11228-added-1730992441169.md rename packages/ui/src/components/{ => Divider}/Divider.stories.tsx (100%) rename packages/ui/src/components/{ => Divider}/Divider.tsx (93%) create mode 100644 packages/ui/src/components/Divider/index.ts rename packages/ui/src/components/{ => IconButton}/IconButton.tsx (100%) create mode 100644 packages/ui/src/components/IconButton/index.ts rename packages/{manager/src/components => ui/src/components/Stack}/Stack.stories.tsx (93%) rename packages/{manager/src/components => ui/src/components/Stack}/Stack.tsx (78%) create mode 100644 packages/ui/src/components/Stack/index.ts diff --git a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts index 04c3ad2a2a..7006acc13c 100644 --- a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts +++ b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts @@ -1,11 +1,9 @@ -import { Box, omittedProps } from '@linode/ui'; +import { Box, omittedProps, Stack } 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 { Stack } from '../Stack'; - export const StyledAkamaiLogo = styled(AkamaiLogo, { label: 'StyledAkamaiLogo', })(({ theme }) => ({ diff --git a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx index 1e7421ac18..7ef3e3fcb8 100644 --- a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx +++ b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import { useMediaQuery, useTheme } from '@mui/material'; import * as React from 'react'; @@ -7,7 +7,6 @@ import { Typography } from 'src/components/Typography'; import { useFlags } from 'src/hooks/useFlags'; import { replaceNewlinesWithLineBreaks } from 'src/utilities/replaceNewlinesWithLineBreaks'; -import { Stack } from '../Stack'; import { StyledAkamaiLogo, StyledBanner, diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx index 2516418fc6..5f55d3ea49 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx +++ b/packages/manager/src/components/Autocomplete/Autocomplete.stories.tsx @@ -1,6 +1,5 @@ -import { IconButton } from '@linode/ui'; +import { IconButton, Stack } from '@linode/ui'; import Close from '@mui/icons-material/Close'; -import { Stack } from '@mui/material'; import { styled } from '@mui/material/styles'; import { action } from '@storybook/addon-actions'; import React, { useState } from 'react'; diff --git a/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx b/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx index e102a493d0..3171d89e61 100644 --- a/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx +++ b/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import React from 'react'; import { useFlags } from 'src/hooks/useFlags'; @@ -9,7 +10,6 @@ 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/ImageSelect/ImageOption.tsx b/packages/manager/src/components/ImageSelect/ImageOption.tsx index 35d73a1e4f..55c105bd6a 100644 --- a/packages/manager/src/components/ImageSelect/ImageOption.tsx +++ b/packages/manager/src/components/ImageSelect/ImageOption.tsx @@ -1,4 +1,4 @@ -import { Tooltip } from '@linode/ui'; +import { Stack, Tooltip } from '@linode/ui'; import React from 'react'; import CloudInitIcon from 'src/assets/icons/cloud-init.svg'; @@ -6,7 +6,6 @@ import { ListItemOption } from 'src/components/ListItemOption'; import { useFlags } from 'src/hooks/useFlags'; import { OSIcon } from '../OSIcon'; -import { Stack } from '../Stack'; import { Typography } from '../Typography'; import { isImageDeprecated } from './utilities'; diff --git a/packages/manager/src/components/MaintenanceScreen.tsx b/packages/manager/src/components/MaintenanceScreen.tsx index 03d1c85efa..d6fd0abfc9 100644 --- a/packages/manager/src/components/MaintenanceScreen.tsx +++ b/packages/manager/src/components/MaintenanceScreen.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import { Box } from '@linode/ui'; import BuildIcon from '@mui/icons-material/Build'; import { useTheme } from '@mui/material/styles'; @@ -6,7 +7,6 @@ import * as React from 'react'; import Logo from 'src/assets/logo/akamai-logo.svg'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import type { Theme } from '@mui/material/styles'; diff --git a/packages/manager/src/components/MaskableText/MaskableText.tsx b/packages/manager/src/components/MaskableText/MaskableText.tsx index ac0b8ccd68..7f9b395fc8 100644 --- a/packages/manager/src/components/MaskableText/MaskableText.tsx +++ b/packages/manager/src/components/MaskableText/MaskableText.tsx @@ -1,12 +1,10 @@ -import { VisibilityTooltip } from '@linode/ui'; +import { Stack, VisibilityTooltip } from '@linode/ui'; import { Typography } from '@mui/material'; import * as React from 'react'; import { usePreferences } from 'src/queries/profile/preferences'; import { createMaskedText } from 'src/utilities/createMaskedText'; -import { Stack } from '../Stack'; - export type MaskableTextLength = 'ipv4' | 'ipv6' | 'plaintext'; export interface MaskableTextProps { diff --git a/packages/manager/src/components/PasswordInput/PasswordInput.tsx b/packages/manager/src/components/PasswordInput/PasswordInput.tsx index 1168895d2f..9c7f05f567 100644 --- a/packages/manager/src/components/PasswordInput/PasswordInput.tsx +++ b/packages/manager/src/components/PasswordInput/PasswordInput.tsx @@ -1,8 +1,8 @@ +import { Stack } from '@linode/ui'; import * as React from 'react'; import zxcvbn from 'zxcvbn'; import { StrengthIndicator } from '../PasswordInput/StrengthIndicator'; -import { Stack } from '../Stack'; import { HideShowText } from './HideShowText'; import type { TextFieldProps } from 'src/components/TextField'; diff --git a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx index 3ba84a95eb..5e5904431b 100644 --- a/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx +++ b/packages/manager/src/components/PlacementGroupsSelect/PlacementGroupSelectOption.tsx @@ -1,9 +1,8 @@ import { PLACEMENT_GROUP_TYPES } from '@linode/api-v4'; -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import React from 'react'; import { ListItemOption } from 'src/components/ListItemOption'; -import { Stack } from 'src/components/Stack'; import type { PlacementGroup } from '@linode/api-v4'; import type { ListItemProps } from 'src/components/ListItemOption'; diff --git a/packages/manager/src/components/RegionSelect/RegionMultiSelect.tsx b/packages/manager/src/components/RegionSelect/RegionMultiSelect.tsx index 0bcfd9a3ce..fffdca2ea6 100644 --- a/packages/manager/src/components/RegionSelect/RegionMultiSelect.tsx +++ b/packages/manager/src/components/RegionSelect/RegionMultiSelect.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import React from 'react'; @@ -8,7 +9,6 @@ import { useAllAccountAvailabilitiesQuery } from 'src/queries/account/availabili import { getRegionCountryGroup } from 'src/utilities/formatRegion'; import { StyledListItem } from '../Autocomplete/Autocomplete.styles'; -import { Stack } from '../Stack'; import { RegionOption } from './RegionOption'; import { StyledAutocompleteContainer } from './RegionSelect.styles'; import { diff --git a/packages/manager/src/components/RegionSelect/RegionOption.tsx b/packages/manager/src/components/RegionSelect/RegionOption.tsx index ae3fe3b182..d3be0d72e2 100644 --- a/packages/manager/src/components/RegionSelect/RegionOption.tsx +++ b/packages/manager/src/components/RegionSelect/RegionOption.tsx @@ -1,10 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import React from 'react'; import { Flag } from 'src/components/Flag'; import { ListItemOption } from 'src/components/ListItemOption'; import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; -import { Stack } from 'src/components/Stack'; import type { Region } from '@linode/api-v4'; import type { ListItemProps } from 'src/components/ListItemOption'; diff --git a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx index 0c8e7a6ac1..ce3198c04c 100644 --- a/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx +++ b/packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx @@ -1,8 +1,7 @@ -import { Box, Paper } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { CreateFirewallDrawer } from 'src/features/Firewalls/FirewallLanding/CreateFirewallDrawer'; import { useFlags } from 'src/hooks/useFlags'; diff --git a/packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx b/packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx index 0d66a284d7..c7d2f1f2ae 100644 --- a/packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx +++ b/packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import { useSnackbar } from 'notistack'; import React from 'react'; @@ -5,8 +6,6 @@ import { Button } from 'src/components/Button/Button'; import { Snackbar } from 'src/components/Snackbar/Snackbar'; import { getEventMessage } from 'src/features/Events/utils'; -import { Stack } from '../Stack'; - import type { Meta, StoryObj } from '@storybook/react'; import type { VariantType } from 'notistack'; diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx index e5dc1d7121..30c4127650 100644 --- a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx +++ b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import { styled } from '@mui/material'; import { Duration } from 'luxon'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { useDropzone } from 'react-dropzone'; import { BarPercent } from 'src/components/BarPercent'; import { Button } from 'src/components/Button/Button'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { MAX_FILE_SIZE_IN_BYTES } from 'src/components/Uploaders/reducer'; import { readableBytes } from 'src/utilities/unitConversions'; diff --git a/packages/manager/src/features/Account/Maintenance/MaintenanceLanding.tsx b/packages/manager/src/features/Account/Maintenance/MaintenanceLanding.tsx index 634cd91be8..7feb8689c4 100644 --- a/packages/manager/src/features/Account/Maintenance/MaintenanceLanding.tsx +++ b/packages/manager/src/features/Account/Maintenance/MaintenanceLanding.tsx @@ -1,7 +1,7 @@ +import { Stack } from '@linode/ui'; import * as React from 'react'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { Stack } from 'src/components/Stack'; import { MaintenanceTable } from './MaintenanceTable'; diff --git a/packages/manager/src/features/Account/ObjectStorageSettings.tsx b/packages/manager/src/features/Account/ObjectStorageSettings.tsx index bbe8717ca9..d1cd22c3a0 100644 --- a/packages/manager/src/features/Account/ObjectStorageSettings.tsx +++ b/packages/manager/src/features/Account/ObjectStorageSettings.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; @@ -7,7 +7,6 @@ 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'; import { useAccountSettings } from 'src/queries/account/settings'; diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx index d218488019..c4f0f11c9e 100644 --- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx +++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; @@ -7,7 +7,6 @@ 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/BackupDrawer.tsx b/packages/manager/src/features/Backups/BackupDrawer.tsx index 3eb601769d..76fe9e4043 100644 --- a/packages/manager/src/features/Backups/BackupDrawer.tsx +++ b/packages/manager/src/features/Backups/BackupDrawer.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import { styled } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -8,7 +8,6 @@ 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'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/features/Betas/BetaDetails.tsx b/packages/manager/src/features/Betas/BetaDetails.tsx index 811a24cee3..ac81057d5b 100644 --- a/packages/manager/src/features/Betas/BetaDetails.tsx +++ b/packages/manager/src/features/Betas/BetaDetails.tsx @@ -1,10 +1,10 @@ +import { Stack } from '@linode/ui'; import { useNavigate } from '@tanstack/react-router'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { Link } from 'src/components/Link'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import type { AccountBeta, Beta } from '@linode/api-v4'; diff --git a/packages/manager/src/features/Betas/BetaDetailsList.tsx b/packages/manager/src/features/Betas/BetaDetailsList.tsx index 67adeef3f9..b310162e1a 100644 --- a/packages/manager/src/features/Betas/BetaDetailsList.tsx +++ b/packages/manager/src/features/Betas/BetaDetailsList.tsx @@ -1,9 +1,8 @@ -import { Divider, Paper } from '@linode/ui'; +import { Divider, Paper, Stack } from '@linode/ui'; import * as React from 'react'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import BetaDetails from './BetaDetails'; diff --git a/packages/manager/src/features/Betas/BetaSignup.tsx b/packages/manager/src/features/Betas/BetaSignup.tsx index 6ea06dbc27..f35ade587c 100644 --- a/packages/manager/src/features/Betas/BetaSignup.tsx +++ b/packages/manager/src/features/Betas/BetaSignup.tsx @@ -1,4 +1,4 @@ -import { Paper } from '@linode/ui'; +import { Paper, Stack } from '@linode/ui'; import { createLazyRoute, useNavigate, @@ -13,7 +13,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown'; import { LandingHeader } from 'src/components/LandingHeader/LandingHeader'; import { NotFound } from 'src/components/NotFound'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useCreateAccountBetaMutation } from 'src/queries/account/betas'; import { useBetaQuery } from 'src/queries/betas'; diff --git a/packages/manager/src/features/Betas/BetasLanding.tsx b/packages/manager/src/features/Betas/BetasLanding.tsx index 9ac9a88e31..cb025ffcf0 100644 --- a/packages/manager/src/features/Betas/BetasLanding.tsx +++ b/packages/manager/src/features/Betas/BetasLanding.tsx @@ -1,9 +1,9 @@ +import { Stack } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { LandingHeader } from 'src/components/LandingHeader/LandingHeader'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; -import { Stack } from 'src/components/Stack'; import { BetaDetailsList } from 'src/features/Betas/BetaDetailsList'; import { useAccountBetasQuery } from 'src/queries/account/betas'; import { useBetasQuery } from 'src/queries/betas'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx index 8dd31bba9f..08d7bf76dc 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx @@ -1,5 +1,5 @@ import { makePayment } from '@linode/api-v4/lib/account'; -import { Divider, InputAdornment } from '@linode/ui'; +import { Divider, InputAdornment, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; @@ -12,7 +12,6 @@ import { Drawer } from 'src/components/Drawer'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LinearProgress } from 'src/components/LinearProgress'; import { Notice } from 'src/components/Notice/Notice'; -import { Stack } from 'src/components/Stack'; import { SupportLink } from 'src/components/SupportLink'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; diff --git a/packages/manager/src/features/Domains/DomainBanner.tsx b/packages/manager/src/features/Domains/DomainBanner.tsx index 44160e35d1..e170c35ead 100644 --- a/packages/manager/src/features/Domains/DomainBanner.tsx +++ b/packages/manager/src/features/Domains/DomainBanner.tsx @@ -1,10 +1,10 @@ +import { Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { DateTime } from 'luxon'; import * as React from 'react'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { Link } from 'src/components/Link'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; interface DomainBannerProps { diff --git a/packages/manager/src/features/Footer.tsx b/packages/manager/src/features/Footer.tsx index b4cf958c96..001ca7adae 100644 --- a/packages/manager/src/features/Footer.tsx +++ b/packages/manager/src/features/Footer.tsx @@ -1,4 +1,4 @@ -import Stack from '@mui/material/Stack'; +import { Stack } from '@linode/ui'; import * as React from 'react'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx b/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx index 4e8316e03d..b784a113d8 100644 --- a/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx +++ b/packages/manager/src/features/GlobalNotifications/APIMaintenanceBanner.tsx @@ -1,14 +1,16 @@ +import { Stack } from '@linode/ui'; import * as React from 'react'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { Link } from 'src/components/Link'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; -import { SuppliedMaintenanceData } from 'src/featureFlags'; import { queryPresets } from 'src/queries/base'; -import { Maintenance, useMaintenanceQuery } from 'src/queries/statusPage'; +import { useMaintenanceQuery } from 'src/queries/statusPage'; import { sanitizeHTML } from 'src/utilities/sanitizeHTML'; +import type { SuppliedMaintenanceData } from 'src/featureFlags'; +import type { Maintenance } from 'src/queries/statusPage'; + interface Props { suppliedMaintenances: SuppliedMaintenanceData[] | undefined; } diff --git a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx index 968a7b8417..14a5bed997 100644 --- a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx @@ -1,4 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; +import { Paper, Stack } from '@linode/ui'; import { Box } from '@linode/ui'; import { createImageSchema } from '@linode/validation'; import { useSnackbar } from 'notistack'; @@ -13,8 +14,6 @@ import { DISK_ENCRYPTION_IMAGES_CAVEAT_COPY } from 'src/components/Encryption/co import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; diff --git a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx index 1aaebc172b..dcee670dc6 100644 --- a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx @@ -1,4 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; +import { Paper, Stack } from '@linode/ui'; import { Box } from '@linode/ui'; import { useSnackbar } from 'notistack'; import React, { useState } from 'react'; @@ -13,10 +14,8 @@ import { Checkbox } from 'src/components/Checkbox'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { Prompt } from 'src/components/Prompt/Prompt'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; -import { Stack } from 'src/components/Stack'; 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/Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx index e60aefc45a..0e8b07b032 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ImageRegionRow.tsx @@ -1,9 +1,8 @@ -import { Box, IconButton, Tooltip } from '@linode/ui'; +import { Box, IconButton, Stack, Tooltip } from '@linode/ui'; import Close from '@mui/icons-material/Close'; import React from 'react'; import { Flag } from 'src/components/Flag'; -import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx index 50d6c63473..32895538c5 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx @@ -1,4 +1,4 @@ -import { Paper } from '@linode/ui'; +import { Paper, Stack } from '@linode/ui'; import { useSnackbar } from 'notistack'; import React from 'react'; import { useForm } from 'react-hook-form'; @@ -7,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { RegionMultiSelect } from 'src/components/RegionSelect/RegionMultiSelect'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useUpdateImageRegionsMutation } from 'src/queries/images'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx b/packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx index 4915ce42a5..b3640a1b32 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImageRow.tsx @@ -1,10 +1,9 @@ -import { Tooltip } from '@linode/ui'; +import { Stack, Tooltip } from '@linode/ui'; import React from 'react'; import CloudInitIcon from 'src/assets/icons/cloud-init.svg'; import { Hidden } from 'src/components/Hidden'; import { LinkButton } from 'src/components/LinkButton'; -import { Stack } from 'src/components/Stack'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx b/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx index 504e84bb8c..3621505ee8 100644 --- a/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx @@ -1,4 +1,4 @@ -import { Divider } from '@linode/ui'; +import { Divider, Stack } from '@linode/ui'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; import { useHistory } from 'react-router-dom'; @@ -7,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Drawer } from 'src/components/Drawer'; import { Notice } from 'src/components/Notice/Notice'; -import { Stack } from 'src/components/Stack'; import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect'; import { REBUILD_LINODE_IMAGE_PARAM_NAME } from '../../Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.styles.ts b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.styles.ts index d9864096ce..1dfcbc34a6 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.styles.ts +++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.styles.ts @@ -1,9 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { makeStyles } from 'tss-react/mui'; -import { Stack } from 'src/components/Stack'; - import type { Theme } from '@mui/material/styles'; export const useStyles = makeStyles()((theme: Theme) => ({ diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx index f77e7250ca..66076605c1 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx @@ -1,4 +1,4 @@ -import { Box, Paper } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import { Divider } from '@mui/material'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -15,7 +15,6 @@ import { LandingHeader } from 'src/components/LandingHeader'; import { Notice } from 'src/components/Notice/Notice'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; -import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; import { getKubeControlPlaneACL, diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx index cb48ac4507..278ed3bfb2 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -7,7 +7,6 @@ import DetailsIcon from 'src/assets/icons/code-file.svg'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; import ResetIcon from 'src/assets/icons/reset.svg'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useAllKubernetesClusterAPIEndpointsQuery, diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx index 6e6c9d4004..a015b59c04 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { useTheme } from '@mui/material/styles'; import { useSnackbar } from 'notistack'; @@ -10,7 +10,6 @@ import { Chip } from 'src/components/Chip'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { EntityDetail } from 'src/components/EntityDetail/EntityDetail'; import { EntityHeader } from 'src/components/EntityHeader/EntityHeader'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { KubeClusterSpecs } from 'src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs'; import { getKubeControlPlaneACL } from 'src/features/Kubernetes/kubeUtils'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx index db046030fb..cc7c3e3e3e 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useLocation, useParams } from 'react-router-dom'; @@ -7,7 +7,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Stack } from 'src/components/Stack'; import { getKubeHighAvailability } from 'src/features/Kubernetes/kubeUtils'; import { useAPLAvailability } from 'src/features/Kubernetes/kubeUtils'; import { useAccount } from 'src/queries/account/account'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx index dcd5bc3beb..f788c76b0e 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx @@ -1,8 +1,9 @@ -import { Box, Paper, Tooltip } from '@linode/ui'; +import { Box, Paper, Stack, Tooltip } from '@linode/ui'; import * as React from 'react'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { StyledActionButton } from 'src/components/Button/StyledActionButton'; -import { Stack } from 'src/components/Stack'; +import { Hidden } from 'src/components/Hidden'; import { Typography } from 'src/components/Typography'; import { NodeTable } from './NodeTable'; @@ -12,8 +13,6 @@ import type { PoolNodeResponse, } from '@linode/api-v4/lib/kubernetes'; import type { EncryptionStatus } from '@linode/api-v4/lib/linodes/types'; -import { Hidden } from 'src/components/Hidden'; -import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; interface Props { autoscaler: AutoscaleSettings; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx index 3976191515..c99d836488 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx @@ -1,10 +1,10 @@ +import { Stack } from '@linode/ui'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useAllKubernetesNodePoolQuery } from 'src/queries/kubernetes'; import { useSpecificTypes } from 'src/queries/types'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts index b00eacbf63..df20b2298e 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts @@ -4,7 +4,6 @@ import VerticalDivider from 'src/assets/icons/divider-vertical.svg'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { Typography } from 'src/components/Typography'; - export const StyledCopyTooltip = styled(CopyTooltip, { label: 'CopyTooltip', })(() => ({ diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx index 41a0d9bb56..cc77ba35f8 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx @@ -1,10 +1,8 @@ -import { Divider } from '@linode/ui'; +import { Divider, Paper, Stack } from '@linode/ui'; import React, { useMemo } from 'react'; import { useWatch } from 'react-hook-form'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx index ee213c2806..147ab41532 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import React, { useMemo } from 'react'; import { useController, useFormContext, useWatch } from 'react-hook-form'; @@ -7,7 +8,6 @@ import { DISK_ENCRYPTION_BACKUPS_CAVEAT_COPY } from 'src/components/Encryption/c import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { useAccountSettings } from 'src/queries/account/settings'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Addons/PrivateIP.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Addons/PrivateIP.tsx index d13be07239..742784a531 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Addons/PrivateIP.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Addons/PrivateIP.tsx @@ -1,9 +1,9 @@ +import { Stack } from '@linode/ui'; import React, { useMemo } from 'react'; import { useController, useWatch } from 'react-hook-form'; import { Checkbox } from 'src/components/Checkbox'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/EUAgreement.tsx b/packages/manager/src/features/Linodes/LinodeCreate/EUAgreement.tsx index 7db562deec..33f7e3bdfa 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/EUAgreement.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/EUAgreement.tsx @@ -1,9 +1,8 @@ +import { Paper, Stack } from '@linode/ui'; import React from 'react'; import { useController, useWatch } from 'react-hook-form'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { EUAgreementCheckbox } from 'src/features/Account/Agreements/EUAgreementCheckbox'; import { useAccountAgreements } from 'src/queries/account/agreements'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Firewall.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Firewall.tsx index 013ef0e613..77699ddf20 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Firewall.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Firewall.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { useController, useFormContext } from 'react-hook-form'; @@ -7,8 +7,6 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog'; import { Link } from 'src/components/Link'; import { LinkButton } from 'src/components/LinkButton'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { FIREWALL_GET_STARTED_LINK } from 'src/constants'; import { CreateFirewallDrawer } from 'src/features/Firewalls/FirewallLanding/CreateFirewallDrawer'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx index 0a62914917..819570f301 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Summary/Summary.tsx @@ -1,10 +1,9 @@ -import { Divider, Paper } from '@linode/ui'; +import { Divider, Paper, Stack } from '@linode/ui'; import { useTheme } from '@mui/material'; import useMediaQuery from '@mui/material/useMediaQuery'; import React from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useImageQuery } from 'src/queries/images'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupSelect.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupSelect.tsx index 20a2aa33e1..4a57fb2c09 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupSelect.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; import { useController, useWatch } from 'react-hook-form'; @@ -6,9 +6,7 @@ import { useController, useWatch } from 'react-hook-form'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { LinearProgress } from 'src/components/LinearProgress'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { SelectionCard } from 'src/components/SelectionCard/SelectionCard'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useLinodeBackupsQuery } from 'src/queries/linodes/backups'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/Backups.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/Backups.tsx index 4a4719157d..487352d53c 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/Backups.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/Backups.tsx @@ -1,7 +1,6 @@ +import { Stack } from '@linode/ui'; import React from 'react'; -import { Stack } from 'src/components/Stack'; - import { BackupSelect } from './BackupSelect'; import { LinodeSelect } from './LinodeSelect'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/LinodeSelect.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/LinodeSelect.tsx index 0636a84ddd..3485ba948e 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/LinodeSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/LinodeSelect.tsx @@ -1,11 +1,10 @@ +import { Paper, Stack } from '@linode/ui'; import React from 'react'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; -import { BackupsWarning } from './BackupsWarning'; import { LinodeSelectTable } from '../../shared/LinodeSelectTable'; +import { BackupsWarning } from './BackupsWarning'; export const LinodeSelect = () => { return ( diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/Clone.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/Clone.tsx index 4c7cfbfd26..d86ac000d3 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/Clone.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/Clone.tsx @@ -1,7 +1,6 @@ +import { Paper, Stack } from '@linode/ui'; import React from 'react'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { Region } from '../../Region'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Images.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Images.tsx index 76b15841eb..ceea612f1a 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Images.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Images.tsx @@ -1,5 +1,4 @@ -import { Paper } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; import { useController, useFormContext, useWatch } from 'react-hook-form'; @@ -9,7 +8,6 @@ import { ImageSelect } from 'src/components/ImageSelect/ImageSelect'; import { getAPIFilterForImageSelect } from 'src/components/ImageSelect/utilities'; import { Link } from 'src/components/Link'; import { Placeholder } from 'src/components/Placeholder/Placeholder'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { useAllImagesQuery } from 'src/queries/images'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx index 66c6e11ad0..75afc4d25a 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx @@ -1,8 +1,7 @@ -import { Divider } from '@linode/ui'; +import { Divider, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { AppSelectionCard } from './AppSelectionCard'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx index cf463f1ce1..3380f5f581 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx @@ -1,12 +1,10 @@ -import { Box } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { useFormContext } from 'react-hook-form'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useMarketplaceAppsQuery } from 'src/queries/stackscripts'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx index 6874de8d95..72c79975c0 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; @@ -6,7 +6,6 @@ import { useController, useFormContext } from 'react-hook-form'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Stack } from 'src/components/Stack'; import { getGeneratedLinodeLabel } from '../../utilities'; import { getDefaultUDFData } from '../StackScripts/UserDefinedFields/utilities'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/Marketplace.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/Marketplace.tsx index 2cb93d90e0..d249134ddd 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/Marketplace.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/Marketplace.tsx @@ -1,7 +1,6 @@ +import { Stack } from '@linode/ui'; import React, { useState } from 'react'; -import { Stack } from 'src/components/Stack'; - import { Region } from '../../Region'; import { StackScriptImages } from '../StackScripts/StackScriptImages'; import { UserDefinedFields } from '../StackScripts/UserDefinedFields/UserDefinedFields'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/OperatingSystems.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/OperatingSystems.tsx index 797401d1fb..8368abb931 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/OperatingSystems.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/OperatingSystems.tsx @@ -1,10 +1,9 @@ -import { Paper } from '@linode/ui'; +import { Paper, Stack } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; import { useController, useFormContext, useWatch } from 'react-hook-form'; import { ImageSelect } from 'src/components/ImageSelect/ImageSelect'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { useRegionQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx index 5717962591..e29b9b8931 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx @@ -1,5 +1,5 @@ import { getAPIFilterFromQuery } from '@linode/search'; -import { Box, IconButton, InputAdornment } from '@linode/ui'; +import { Box, IconButton, InputAdornment, Stack } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import { useQueryClient } from '@tanstack/react-query'; import React, { useState } from 'react'; @@ -10,7 +10,6 @@ import { debounce } from 'throttle-debounce'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { Code } from 'src/components/Code/Code'; -import { Stack } from 'src/components/Stack'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell/TableCell'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionRow.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionRow.tsx index b81d62f824..72002b6935 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionRow.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionRow.tsx @@ -1,9 +1,9 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ +import { Stack } from '@linode/ui'; import React from 'react'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { Radio } from 'src/components/Radio/Radio'; -import { Stack } from 'src/components/Stack'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScripts.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScripts.tsx index 641ed2e5d0..03110b3472 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScripts.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScripts.tsx @@ -1,7 +1,6 @@ +import { Stack } from '@linode/ui'; import React from 'react'; -import { Stack } from 'src/components/Stack'; - import { Region } from '../../Region'; import { StackScriptImages } from './StackScriptImages'; import { StackScriptSelection } from './StackScriptSelection'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx index 47eedde316..267c7081b4 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx @@ -1,4 +1,4 @@ -import { Divider, FormControl } from '@linode/ui'; +import { Divider, FormControl, Stack } from '@linode/ui'; import React from 'react'; import { useController, useFormContext } from 'react-hook-form'; @@ -9,7 +9,6 @@ import { Link } from 'src/components/Link'; import PasswordInput from 'src/components/PasswordInput/PasswordInput'; import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; -import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; 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 ccdfb4c3a7..342d538c9f 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,12 +1,10 @@ -import { Box, IconButton } from '@linode/ui'; +import { Box, IconButton, Paper, Stack } from '@linode/ui'; import React from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; import Info from 'src/assets/icons/info.svg'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { ShowMoreExpansion } from 'src/components/ShowMoreExpansion'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { oneClickApps } from 'src/features/OneClickApps/oneClickApps'; import { useStackScriptQuery } from 'src/queries/stackscripts'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx index 840f208a33..498cbeac13 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx @@ -1,8 +1,8 @@ +import { Stack } from '@linode/ui'; import React from 'react'; import { Link } from 'src/components/Link'; 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/Linodes/LinodeCreate/VLAN/VLAN.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.tsx index b2fb1437a3..1047de69ec 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.tsx @@ -1,9 +1,9 @@ +import { Stack } from '@linode/ui'; import React from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { Accordion } from 'src/components/Accordion'; import { Link } from 'src/components/Link'; -import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; @@ -12,8 +12,8 @@ import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGran import { useRegionsQuery } from 'src/queries/regions/regions'; import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature'; -import { VLANAvailabilityNotice } from './VLANAvailabilityNotice'; import { useLinodeCreateQueryParams } from '../utilities'; +import { VLANAvailabilityNotice } from './VLANAvailabilityNotice'; import type { CreateLinodeRequest } from '@linode/api-v4'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx index e352648397..61f1782550 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx @@ -1,4 +1,4 @@ -import { Box, Divider } from '@linode/ui'; +import { Box, Divider, Paper, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; @@ -8,8 +8,6 @@ import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { LinkButton } from 'src/components/LinkButton'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPCRanges.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPCRanges.tsx index a7c5e53d85..cec5f7458f 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPCRanges.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPCRanges.tsx @@ -1,10 +1,9 @@ -import { Box, IconButton } from '@linode/ui'; +import { Box, IconButton, Stack } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import React from 'react'; import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; import { LinkButton } from 'src/components/LinkButton'; -import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; import type { CreateLinodeRequest } from '@linode/api-v4'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx index ae4125d2ee..c1d2b14594 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/index.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/index.tsx @@ -1,4 +1,5 @@ import { isEmpty } from '@linode/api-v4'; +import { Stack } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import { createLazyRoute } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; @@ -8,7 +9,6 @@ import { useHistory } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Stack } from 'src/components/Stack'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { Tab } from 'src/components/Tabs/Tab'; import { TabList } from 'src/components/Tabs/TabList'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx index 69c5bcbdfe..a1b6db881e 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useQueryClient } from '@tanstack/react-query'; @@ -8,7 +8,6 @@ import { useController, useFormContext } from 'react-hook-form'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { Notice } from 'src/components/Notice/Notice'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; -import { Stack } from 'src/components/Stack'; 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/Linodes/LinodeCreate/shared/SelectLinodeCard.tsx b/packages/manager/src/features/Linodes/LinodeCreate/shared/SelectLinodeCard.tsx index 434c1c4b4d..8249b1d704 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/shared/SelectLinodeCard.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/shared/SelectLinodeCard.tsx @@ -1,10 +1,9 @@ -import { Linode } from '@linode/api-v4'; +import { Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; import { Button } from 'src/components/Button/Button'; import { SelectionCard } from 'src/components/SelectionCard/SelectionCard'; -import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; import { useImageQuery } from 'src/queries/images'; @@ -16,6 +15,8 @@ import { isNotNullOrUndefined } from 'src/utilities/nullOrUndefined'; import { getLinodeIconStatus } from '../../LinodesLanding/utils'; +import type { Linode } from '@linode/api-v4'; + interface Props { disabled?: boolean; handlePowerOff: () => void; diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailHeader.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailHeader.tsx index d5c8b4e7fc..a0c53f02f2 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetailHeader.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetailHeader.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import { Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { Button } from 'src/components/Button/Button'; import { EntityHeader } from 'src/components/EntityHeader/EntityHeader'; import { Hidden } from 'src/components/Hidden'; -import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { LinodeActionMenu } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu/LinodeActionMenu'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx index 575809aa0d..6ac14f57ce 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Tooltip } from '@linode/ui'; +import { Box, Divider, Stack, Tooltip } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -9,7 +9,6 @@ import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useAllocateIPMutation, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.tsx index b01dae1d22..b7f3aab63a 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeFirewalls/LinodeFirewalls.tsx @@ -1,7 +1,6 @@ -import { Stack } from '@mui/material'; +import { Paper, Stack } from '@linode/ui'; import * as React from 'react'; -import { Paper } from '@linode/ui'; 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/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx index 15421aec60..7ee6cfd342 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import { useMediaQuery, useTheme } from '@mui/material'; import * as React from 'react'; @@ -7,9 +7,7 @@ import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import OrderBy from 'src/components/OrderBy'; -import { Paper } from '@linode/ui'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; -import { Stack } from 'src/components/Stack'; 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/Linodes/LinodesDetail/LinodeNetworking/LinodeNetwork.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetwork.tsx index 1032778b8f..486ca340ba 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetwork.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeNetwork.tsx @@ -1,8 +1,7 @@ +import { Stack } from '@linode/ui'; import * as React from 'react'; import { useParams } from 'react-router-dom'; -import { Stack } from 'src/components/Stack'; - import { LinodeFirewalls } from './LinodeFirewalls/LinodeFirewalls'; import { LinodeIPAddresses } from './LinodeIPAddresses'; import { LinodeNetworkingSummaryPanel } from './NetworkingSummaryPanel/NetworkingSummaryPanel'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx index 1daea0a501..625cfa2f5d 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import { Divider } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -6,7 +7,6 @@ import * as React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Notice } from 'src/components/Notice/Notice'; -import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { VPCPanel } from 'src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx index 68c87f6f46..601320ac9f 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/VPCPanel.tsx @@ -1,4 +1,4 @@ -import { Box, Paper } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import * as React from 'react'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Checkbox } from 'src/components/Checkbox'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx index 73895ce899..66943ae872 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeDisks.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { useParams } from 'react-router-dom'; @@ -8,8 +8,6 @@ import { Hidden } from 'src/components/Hidden'; import OrderBy from 'src/components/OrderBy'; import Paginate from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; 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/Linodes/LinodesDetail/LinodeStorage/LinodeStorage.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeStorage.tsx index 0d8d8dba33..a95c6644ed 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeStorage.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/LinodeStorage.tsx @@ -1,7 +1,6 @@ +import { Stack } from '@linode/ui'; import * as React from 'react'; -import { Stack } from 'src/components/Stack'; - import { LinodeDisks } from './LinodeDisks'; import { LinodeVolumes } from './LinodeVolumes'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/UpgradeVolumesDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/UpgradeVolumesDialog.tsx index ec74531a2a..02344ecc77 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/UpgradeVolumesDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/UpgradeVolumesDialog.tsx @@ -1,10 +1,10 @@ +import { Stack } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Notice } from 'src/components/Notice/Notice'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { VolumeUpgradeCopy } from 'src/features/Volumes/UpgradeVolumeDialog'; import { getUpgradeableVolumeIds } from 'src/features/Volumes/utils'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx b/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx index 0728eb2ada..09c6520ca1 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/VolumesUpgradeBanner.tsx @@ -1,11 +1,10 @@ +import { Paper, Stack } from '@linode/ui'; import React from 'react'; import { useHistory } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { getUpgradeableVolumeIds } from 'src/features/Volumes/utils'; import { useNotificationsQuery } from 'src/queries/account/notifications'; diff --git a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx index 98a20f5062..bb107719cf 100644 --- a/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx +++ b/packages/manager/src/features/LoadBalancers/LoadBalancerDetail/ServiceTargets/LinodeOrIPSelect.tsx @@ -1,9 +1,8 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { SelectedIcon } from 'src/components/Autocomplete/Autocomplete.styles'; -import { Stack } from 'src/components/Stack'; import { linodeFactory } from 'src/factories'; import { useInfiniteLinodesQuery } from 'src/queries/linodes/linodes'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx b/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx index 706cacadcc..1412d22c9e 100644 --- a/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx +++ b/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx @@ -1,9 +1,8 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { SelectedIcon } from 'src/components/Autocomplete/Autocomplete.styles'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx index 552f0d5692..2d851e25e6 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import { Box, Paper } from '@linode/ui'; import { useTheme } from '@mui/material'; import useMediaQuery from '@mui/material/useMediaQuery'; @@ -28,7 +29,6 @@ import { Notice } from 'src/components/Notice/Notice'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { SelectFirewallPanel } from 'src/components/SelectFirewallPanel/SelectFirewallPanel'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; -import { Stack } from 'src/components/Stack'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; @@ -54,8 +54,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 { PRICE_ERROR_TOOLTIP_TEXT } from 'src/utilities/pricing/constants'; import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants'; +import { PRICE_ERROR_TOOLTIP_TEXT } from 'src/utilities/pricing/constants'; import { getDCSpecificPriceByType, renderMonthlyPriceToCorrectDecimalPlace, diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx index 0ab0801891..b4a2a09770 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx @@ -1,6 +1,5 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ -import { Box } from '@linode/ui'; -import { Stack } from '@mui/material'; +import { Box, Stack } from '@linode/ui'; import * as React from 'react'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyActionMenu.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyActionMenu.tsx index b0c13b737c..a0a89cfcb4 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyActionMenu.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyActionMenu.tsx @@ -1,9 +1,9 @@ +import { Stack } from '@linode/ui'; import { useMediaQuery } from '@mui/material'; import * as React from 'react'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; -import { Stack } from 'src/components/Stack'; import { useAccountManagement } from 'src/hooks/useAccountManagement'; import { useFlags } from 'src/hooks/useFlags'; import { isFeatureEnabledV2 } from 'src/utilities/accountCapabilities'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTableRow.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTableRow.tsx index f9755977e6..9803c41c0f 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTableRow.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyTable/AccessKeyTableRow.tsx @@ -1,10 +1,10 @@ +import { Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import React from 'react'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { Hidden } from 'src/components/Hidden'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; -import { Stack } from 'src/components/Stack'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx index a84a923bab..1febd590d2 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketTableRow.tsx @@ -1,10 +1,10 @@ +import { Stack } from '@linode/ui'; import * as React from 'react'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { Hidden } from 'src/components/Hidden'; import { Link } from 'src/components/Link'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; -import { Stack } from 'src/components/Stack'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; 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 2ae24dd9a2..d5e1f680b5 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx @@ -2,7 +2,7 @@ import { PLACEMENT_GROUP_POLICIES, PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; -import { Box, Divider } from '@linode/ui'; +import { Box, Divider, Stack } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -10,7 +10,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; 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'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx index a26ef03d98..5ca092f996 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx @@ -1,4 +1,4 @@ -import { Divider } from '@linode/ui'; +import { Divider, Stack } from '@linode/ui'; import { createPlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -12,7 +12,6 @@ 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'; import { Typography } from 'src/components/Typography'; import { getRestrictedResourceText } from 'src/features/Account/utils'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx index 7347ff8ca9..dbdc218d30 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2/Grid2'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; @@ -5,7 +6,6 @@ import { useHistory } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Stack } from 'src/components/Stack'; import { hasPlacementGroupReachedCapacity } from 'src/features/PlacementGroups/utils'; import { diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx index 374a87e023..735d99dc63 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx @@ -2,7 +2,7 @@ import { PLACEMENT_GROUP_POLICIES, PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; -import { Divider } from '@linode/ui'; +import { Divider, Stack } from '@linode/ui'; import { updatePlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -15,7 +15,6 @@ import { DescriptionList } from 'src/components/DescriptionList/DescriptionList' 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'; import { diff --git a/packages/manager/src/features/Profile/APITokens/APITokens.tsx b/packages/manager/src/features/Profile/APITokens/APITokens.tsx index 5acd536441..5e46672444 100644 --- a/packages/manager/src/features/Profile/APITokens/APITokens.tsx +++ b/packages/manager/src/features/Profile/APITokens/APITokens.tsx @@ -1,4 +1,4 @@ -import { Stack } from '@mui/material'; +import { Stack } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx index 52c0c3a437..97401d291e 100644 --- a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx +++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import { Typography } from '@mui/material'; import React from 'react'; import { useState } from 'react'; @@ -6,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Avatar } from 'src/components/Avatar/Avatar'; import { ColorPicker } from 'src/components/ColorPicker/ColorPicker'; import { Dialog } from 'src/components/Dialog/Dialog'; -import { Stack } from 'src/components/Stack'; import { useMutatePreferences, usePreferences, diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx index 5d9351dc07..f641329cf9 100644 --- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx +++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx @@ -1,8 +1,7 @@ -import { Divider, Paper } from '@linode/ui'; +import { Divider, Paper, Stack } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import React from 'react'; -import { Stack } from 'src/components/Stack'; import { useProfile } from 'src/queries/profile/profile'; import { AvatarForm } from './AvatarForm'; diff --git a/packages/manager/src/features/Profile/Settings/Settings.tsx b/packages/manager/src/features/Profile/Settings/Settings.tsx index d8d9097879..c355262f83 100644 --- a/packages/manager/src/features/Profile/Settings/Settings.tsx +++ b/packages/manager/src/features/Profile/Settings/Settings.tsx @@ -1,4 +1,4 @@ -import { Paper } from '@linode/ui'; +import { Paper, Stack } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; @@ -8,7 +8,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; -import { Stack } from 'src/components/Stack'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Search/SearchLanding.styles.ts b/packages/manager/src/features/Search/SearchLanding.styles.ts index b8e7fc0893..6603686dd9 100644 --- a/packages/manager/src/features/Search/SearchLanding.styles.ts +++ b/packages/manager/src/features/Search/SearchLanding.styles.ts @@ -1,5 +1,5 @@ import { keyframes } from '@emotion/react'; -import { Stack } from '@mui/material'; +import { Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; diff --git a/packages/manager/src/features/Support/Hively.tsx b/packages/manager/src/features/Support/Hively.tsx index fd4460be02..440e5d2dd0 100644 --- a/packages/manager/src/features/Support/Hively.tsx +++ b/packages/manager/src/features/Support/Hively.tsx @@ -1,9 +1,8 @@ -import { Box, Divider } from '@linode/ui'; +import { Box, Divider, Stack } from '@linode/ui'; import { DateTime } from 'luxon'; import * as React from 'react'; import { Link } from 'src/components/Link'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { parseAPIDate } from 'src/utilities/date'; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx index be966b504c..b1902189e0 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -10,7 +11,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Stack } from 'src/components/Stack'; import { useProfile } from 'src/queries/profile/profile'; import { useInfiniteSupportTicketRepliesQuery, diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx index 51c289edd7..778e155250 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/MarkdownReference.tsx @@ -1,9 +1,8 @@ -import { Paper } from '@linode/ui'; +import { Paper, Stack } from '@linode/ui'; import * as React from 'react'; import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown'; import { Link } from 'src/components/Link'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; interface Props { diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TicketStatus.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TicketStatus.tsx index e056efd29d..f5a15031b2 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TicketStatus.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TicketStatus.tsx @@ -1,11 +1,10 @@ -import { Paper } from '@linode/ui'; +import { Paper, Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; import { Hidden } from 'src/components/Hidden'; import { Link } from 'src/components/Link'; -import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { Typography } from 'src/components/Typography'; import { useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Support/TicketAttachmentRow.tsx b/packages/manager/src/features/Support/TicketAttachmentRow.tsx index d68be69c33..f418f016a2 100644 --- a/packages/manager/src/features/Support/TicketAttachmentRow.tsx +++ b/packages/manager/src/features/Support/TicketAttachmentRow.tsx @@ -1,7 +1,6 @@ -import { Box, Divider, Paper } from '@linode/ui'; +import { Box, Divider, Paper, Stack } from '@linode/ui'; import * as React from 'react'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; interface Props { diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx index 344a08bfcc..7ad661fdc8 100644 --- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx +++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Tooltip } from '@linode/ui'; +import { Box, Divider, Stack, Tooltip } from '@linode/ui'; import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp'; import { styled, useMediaQuery } from '@mui/material'; @@ -12,7 +12,6 @@ import { AvatarForProxy } from 'src/components/AvatarForProxy'; import { Button } from 'src/components/Button/Button'; import { Hidden } from 'src/components/Hidden'; import { Link } from 'src/components/Link'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext'; import { SwitchAccountButton } from 'src/features/Account/SwitchAccountButton'; diff --git a/packages/manager/src/features/Users/UserProfile/DeleteUserPanel.tsx b/packages/manager/src/features/Users/UserProfile/DeleteUserPanel.tsx index 4d94145320..ce7c366f6f 100644 --- a/packages/manager/src/features/Users/UserProfile/DeleteUserPanel.tsx +++ b/packages/manager/src/features/Users/UserProfile/DeleteUserPanel.tsx @@ -1,9 +1,8 @@ -import { Box, Paper } from '@linode/ui'; +import { Box, Paper, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; import { PARENT_USER } from 'src/features/Account/constants'; import { useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Users/UserProfile/UserDetailsPanel.tsx b/packages/manager/src/features/Users/UserProfile/UserDetailsPanel.tsx index 9236aaa831..a559e7f07c 100644 --- a/packages/manager/src/features/Users/UserProfile/UserDetailsPanel.tsx +++ b/packages/manager/src/features/Users/UserProfile/UserDetailsPanel.tsx @@ -1,10 +1,9 @@ -import { Paper } from '@linode/ui'; +import { Paper, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; -import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TextTooltip } from 'src/components/TextTooltip'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Users/UserProfile/UserProfile.tsx b/packages/manager/src/features/Users/UserProfile/UserProfile.tsx index d535ed50dc..a422515620 100644 --- a/packages/manager/src/features/Users/UserProfile/UserProfile.tsx +++ b/packages/manager/src/features/Users/UserProfile/UserProfile.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import React from 'react'; import { useParams } from 'react-router-dom'; @@ -5,7 +6,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { NotFound } from 'src/components/NotFound'; -import { Stack } from 'src/components/Stack'; import { useAccountUser } from 'src/queries/account/users'; import { DeleteUserPanel } from './DeleteUserPanel'; diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx index e49877489e..e34eebd8ad 100644 --- a/packages/manager/src/features/Users/UserRow.tsx +++ b/packages/manager/src/features/Users/UserRow.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import React from 'react'; @@ -7,7 +7,6 @@ import { Chip } from 'src/components/Chip'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { Hidden } from 'src/components/Hidden'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; -import { Stack } from 'src/components/Stack'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; diff --git a/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx b/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx index b47d5fa1b1..3bf621de65 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/SubnetNode.tsx @@ -1,6 +1,5 @@ -import { FormHelperText } from '@linode/ui'; +import { FormHelperText, Stack } from '@linode/ui'; import Close from '@mui/icons-material/Close'; -import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx index d3d1326a69..bf6245629a 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx @@ -1,4 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; +import { Stack } from '@linode/ui'; import { FormHelperText } from '@linode/ui'; import { createSubnetSchema } from '@linode/validation'; import * as React from 'react'; @@ -7,7 +8,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 { Stack } from 'src/components/Stack'; import { TextField } from 'src/components/TextField'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { useCreateSubnetMutation, useVPCQuery } from 'src/queries/vpcs/vpcs'; diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx index cc2ac13e4e..dfc65ee2a8 100644 --- a/packages/manager/src/features/Volumes/VolumeCreate.tsx +++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx @@ -1,3 +1,4 @@ +import { Stack } from '@linode/ui'; import { Box, Paper } from '@linode/ui'; import { CreateVolumeSchema } from '@linode/validation/lib/volumes.schema'; import { useTheme } from '@mui/material/styles'; @@ -24,7 +25,6 @@ import { ErrorMessage } from 'src/components/ErrorMessage'; import { LandingHeader } from 'src/components/LandingHeader'; 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'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Volumes/VolumeDetailsDrawer.tsx b/packages/manager/src/features/Volumes/VolumeDetailsDrawer.tsx index 5be75d6d87..ac7ef2ce15 100644 --- a/packages/manager/src/features/Volumes/VolumeDetailsDrawer.tsx +++ b/packages/manager/src/features/Volumes/VolumeDetailsDrawer.tsx @@ -1,11 +1,12 @@ -import { Volume } from '@linode/api-v4'; +import { Stack } from '@linode/ui'; import React from 'react'; import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField'; import { Drawer } from 'src/components/Drawer'; -import { Stack } from 'src/components/Stack'; import { Typography } from 'src/components/Typography'; +import type { Volume } from '@linode/api-v4'; + interface Props { onClose: () => void; open: boolean; diff --git a/packages/ui/.changeset/pr-11228-added-1730992441169.md b/packages/ui/.changeset/pr-11228-added-1730992441169.md new file mode 100644 index 0000000000..7ff25354ed --- /dev/null +++ b/packages/ui/.changeset/pr-11228-added-1730992441169.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +`Stack` component to `ui` package ([#11228](https://github.com/linode/manager/pull/11228)) diff --git a/packages/ui/src/components/Divider.stories.tsx b/packages/ui/src/components/Divider/Divider.stories.tsx similarity index 100% rename from packages/ui/src/components/Divider.stories.tsx rename to packages/ui/src/components/Divider/Divider.stories.tsx diff --git a/packages/ui/src/components/Divider.tsx b/packages/ui/src/components/Divider/Divider.tsx similarity index 93% rename from packages/ui/src/components/Divider.tsx rename to packages/ui/src/components/Divider/Divider.tsx index 0939d4026b..202d428a71 100644 --- a/packages/ui/src/components/Divider.tsx +++ b/packages/ui/src/components/Divider/Divider.tsx @@ -2,7 +2,7 @@ import _Divider from '@mui/material/Divider'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import type { DividerProps as _DividerProps } from '@mui/material/Divider'; -import { omittedProps } from '../utilities'; +import { omittedProps } from '../../utilities'; export interface DividerProps extends _DividerProps { dark?: boolean; diff --git a/packages/ui/src/components/Divider/index.ts b/packages/ui/src/components/Divider/index.ts new file mode 100644 index 0000000000..1f84888dc7 --- /dev/null +++ b/packages/ui/src/components/Divider/index.ts @@ -0,0 +1 @@ +export * from './Divider'; diff --git a/packages/ui/src/components/IconButton.tsx b/packages/ui/src/components/IconButton/IconButton.tsx similarity index 100% rename from packages/ui/src/components/IconButton.tsx rename to packages/ui/src/components/IconButton/IconButton.tsx diff --git a/packages/ui/src/components/IconButton/index.ts b/packages/ui/src/components/IconButton/index.ts new file mode 100644 index 0000000000..1a85f0f725 --- /dev/null +++ b/packages/ui/src/components/IconButton/index.ts @@ -0,0 +1 @@ +export * from './IconButton'; diff --git a/packages/manager/src/components/Stack.stories.tsx b/packages/ui/src/components/Stack/Stack.stories.tsx similarity index 93% rename from packages/manager/src/components/Stack.stories.tsx rename to packages/ui/src/components/Stack/Stack.stories.tsx index a58ef52c36..d28537ad37 100644 --- a/packages/manager/src/components/Stack.stories.tsx +++ b/packages/ui/src/components/Stack/Stack.stories.tsx @@ -1,7 +1,8 @@ -import { Divider, Paper } from '@linode/ui'; import React from 'react'; import { Stack } from './Stack'; +import { Divider } from '../Divider'; +import { Paper } from '../Paper'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/manager/src/components/Stack.tsx b/packages/ui/src/components/Stack/Stack.tsx similarity index 78% rename from packages/manager/src/components/Stack.tsx rename to packages/ui/src/components/Stack/Stack.tsx index abaec23cbf..40e4bb915c 100644 --- a/packages/manager/src/components/Stack.tsx +++ b/packages/ui/src/components/Stack/Stack.tsx @@ -1,6 +1,8 @@ -import { default as _Stack, StackProps } from '@mui/material/Stack'; +import { default as _Stack } from '@mui/material/Stack'; import React from 'react'; +import type { StackProps } from '@mui/material/Stack'; + /** * A Stack is a layout component that uses flexbox to * vertically or horizontally align elements with optional spacing. diff --git a/packages/ui/src/components/Stack/index.ts b/packages/ui/src/components/Stack/index.ts new file mode 100644 index 0000000000..453d31cff2 --- /dev/null +++ b/packages/ui/src/components/Stack/index.ts @@ -0,0 +1 @@ +export * from './Stack'; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 0d3f2829be..d3c290289f 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -9,5 +9,6 @@ export * from './Input'; export * from './InputAdornment'; export * from './InputLabel'; export * from './Paper'; +export * from './Stack'; export * from './Tooltip'; export * from './VisibilityTooltip'; From 5b05b762542a8037cd9ec0e9ad97344601f8ae9e Mon Sep 17 00:00:00 2001 From: Hussain Khalil <122488130+hkhalil-akamai@users.noreply.github.com> Date: Thu, 7 Nov 2024 16:16:47 -0500 Subject: [PATCH 006/131] refactor: [M3-8710] - Move `Notice` & `Tooltip` components to UI package and update imports (#11174) * Move Notice to UI package and update imports * Add test imports * Add renderWithTheme and other changes to make tests pass * Fix broken icon imports * Added changeset: Move `Notice` and `Tooltip` components to UI package * Feedback @dwiley-akamai: consolidate imports and rename icon exports --- packages/manager/src/components/Accordion.tsx | 21 +- .../AkamaiBanner/AkamaiBanner.styles.ts | 5 +- .../DeletionDialog/DeletionDialog.tsx | 2 +- .../manager/src/components/Dialog/Dialog.tsx | 3 +- .../DismissibleBanner.styles.ts | 3 +- .../DismissibleBanner/DismissibleBanner.tsx | 2 +- .../DrawerContent/DrawerContent.tsx | 2 +- .../src/components/Encryption/Encryption.tsx | 4 +- .../GenerateFirewallDialog.tsx | 3 +- .../MaintenanceBanner/MaintenanceBanner.tsx | 5 +- .../MultipleIPInput/MultipleIPInput.tsx | 3 +- .../ProductInformationBanner.tsx | 4 +- .../ProductNotification.tsx | 3 +- .../components/TabbedPanel/TabbedPanel.tsx | 3 +- 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 | 3 +- .../features/Account/SwitchAccountDrawer.tsx | 2 +- .../SwitchAccounts/ChildAccountList.tsx | 3 +- .../src/features/Backups/AutoEnroll.tsx | 3 +- .../src/features/Backups/BackupDrawer.tsx | 3 +- .../PaymentBits/CreditCardDialog.tsx | 4 +- .../PaymentDrawer/PaymentDrawer.tsx | 3 +- .../BillingSummary/PromoDialog.tsx | 5 +- .../UpdateContactInformationForm.tsx | 2 +- .../AddCreditCardForm.tsx | 10 +- .../AddPaymentMethodDrawer.tsx | 5 +- .../Billing/InvoiceDetail/InvoiceDetail.tsx | 3 +- .../DatabaseCreate/DatabaseCreate.tsx | 3 +- .../DatabaseCreateAccessControls.tsx | 6 +- .../DatabaseCreate/DatabaseNodeSelector.tsx | 3 +- .../DatabaseDetail/AccessControls.tsx | 2 +- .../DatabaseDetail/AddAccessControlDrawer.tsx | 11 +- .../DatabaseBackups/DatabaseBackups.tsx | 5 +- .../DatabaseBackups/DatabaseBackupsDialog.tsx | 9 +- .../legacy/RestoreLegacyFromBackupDialog.tsx | 2 +- .../DatabaseResize/DatabaseResize.tsx | 3 +- .../DatabaseSettingsDeleteClusterDialog.tsx | 5 +- .../DatabaseSettingsResetPasswordDialog.tsx | 2 +- .../DatabaseSettingsReviewUpdatesDialog.tsx | 2 +- .../DatabaseSettingsSuspendClusterDialog.tsx | 10 +- .../DatabaseSettingsUpgradeVersionDialog.tsx | 3 +- .../DatabaseSettings/MaintenanceWindow.tsx | 3 +- .../Databases/DatabaseDetail/index.tsx | 2 +- .../features/Domains/CloneDomainDrawer.tsx | 9 +- .../Domains/CreateDomain/CreateDomain.tsx | 3 +- .../Domains/DomainDetail/DomainDetail.tsx | 3 +- .../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 | 3 +- .../DatabaseClusterInfoBanner.tsx | 2 +- .../GlobalNotifications/EmailBounce.tsx | 6 +- .../RegionStatusBanner.tsx | 2 +- .../VerificationDetailsBanner.tsx | 3 +- .../features/Help/Panels/AlgoliaSearchBar.tsx | 14 +- .../SupportSearchLanding.tsx | 3 +- .../Images/ImagesCreate/CreateImageTab.tsx | 3 +- .../Images/ImagesCreate/ImageUpload.tsx | 3 +- .../Images/ImagesLanding/EditImageDrawer.tsx | 2 +- .../ImageRegions/ManageImageRegionsForm.tsx | 3 +- .../Images/ImagesLanding/ImagesLanding.tsx | 3 +- .../ImagesLanding/RebuildImageDrawer.tsx | 3 +- .../CreateCluster/ControlPlaneACLPane.tsx | 3 +- .../CreateCluster/CreateCluster.tsx | 3 +- .../CreateCluster/HAControlPlane.tsx | 3 +- .../KubeCheckoutBar/KubeCheckoutBar.tsx | 3 +- .../DeleteKubernetesClusterDialog.tsx | 2 +- .../KubeControlPaneACLDrawer.tsx | 3 +- .../NodePoolsDisplay/AddNodePoolDrawer.tsx | 3 +- .../NodePoolsDisplay/AutoscalePoolDialog.tsx | 2 +- .../NodePoolsDisplay/ResizeNodePoolDrawer.tsx | 2 +- .../UpgradeClusterDialog.tsx | 2 +- .../KubernetesPlanContainer.tsx | 2 +- .../Linodes/CloneLanding/CloneLanding.tsx | 4 +- .../features/Linodes/CloneLanding/Details.tsx | 4 +- .../Linodes/LinodeCreate/Addons/Addons.tsx | 3 +- .../Linodes/LinodeCreate/Addons/Backups.tsx | 3 +- .../Linodes/LinodeCreate/EUAgreement.tsx | 3 +- .../features/Linodes/LinodeCreate/Error.tsx | 3 +- .../features/Linodes/LinodeCreate/Region.tsx | 4 +- .../Tabs/Backups/BackupSelect.tsx | 3 +- .../Tabs/Backups/BackupsWarning.tsx | 2 +- .../LinodeCreate/Tabs/Clone/CloneWarning.tsx | 2 +- .../Tabs/Marketplace/AppSelect.tsx | 3 +- .../StackScripts/StackScriptSelection.tsx | 3 +- .../UserDefinedFields/UserDefinedFields.tsx | 3 +- .../LinodeCreate/UserData/UserData.tsx | 2 +- .../LinodeCreate/UserData/UserDataHeading.tsx | 3 +- .../VLAN/VLANAvailabilityNotice.tsx | 5 +- .../features/Linodes/LinodeCreate/VPC/VPC.tsx | 3 +- .../LinodeCreate/shared/LinodeSelectTable.tsx | 3 +- .../features/Linodes/LinodeEntityDetail.tsx | 2 +- .../LinodesDetail/HostMaintenanceError.tsx | 3 +- .../LinodeBackup/EnableBackupsDialog.tsx | 2 +- .../LinodeBackup/RestoreToLinodeDrawer.tsx | 4 +- .../LinodeBackup/ScheduleSettings.tsx | 5 +- .../LinodeConfigs/LinodeConfigDialog.tsx | 3 +- .../LinodeNetworking/AddIPDrawer.tsx | 3 +- .../LinodeNetworking/EditIPRDNSDrawer.tsx | 2 +- .../LinodeNetworking/EditRangeRDNSDrawer.tsx | 2 +- .../LinodeNetworking/IPSharing.tsx | 3 +- .../LinodeNetworking/IPTransfer.tsx | 3 +- .../TransferContent.tsx | 54 ++- .../LinodesDetail/LinodePermissionsError.tsx | 2 +- .../LinodeRebuild/ImageEmptyState.tsx | 3 +- .../LinodeRebuild/LinodeRebuildDialog.tsx | 2 +- .../LinodeRebuild/RebuildFromImage.styles.ts | 2 +- .../UserDataAccordion/UserDataAccordion.tsx | 3 +- .../LinodeRescue/RescueDescription.tsx | 2 +- .../LinodeRescue/StandardRescueDialog.tsx | 7 +- .../LinodeResize/LinodeResize.tsx | 3 +- .../LinodeSettings/InterfaceSelect.tsx | 4 +- .../LinodeSettingsAlertsPanel.tsx | 5 +- .../LinodeSettingsDeletePanel.tsx | 2 +- .../LinodeSettingsLabelPanel.tsx | 2 +- .../LinodeSettingsPasswordPanel.tsx | 2 +- .../LinodeSettings/LinodeWatchdogPanel.tsx | 2 +- .../LinodeStorage/CreateDiskDrawer.tsx | 4 +- .../LinodeStorage/RenameDiskDrawer.tsx | 5 +- .../LinodeStorage/ResizeDiskDrawer.tsx | 4 +- .../LinodesDetailHeader/HostMaintenance.tsx | 5 +- .../MigrationNotification.tsx | 7 +- .../MutationNotification.tsx | 2 +- .../UpgradeVolumesDialog.tsx | 3 +- .../MutateDrawer/MutateDrawer.tsx | 2 +- .../LinodesDetail/VolumesUpgradeBanner.tsx | 3 +- .../LinodesLanding/DeleteLinodeDialog.tsx | 2 +- .../Linodes/MigrateLinode/CautionNotice.tsx | 2 +- .../Linodes/MigrateLinode/ConfigureForm.tsx | 2 +- .../Linodes/MigrateLinode/MigrateLinode.tsx | 3 +- .../MigrateLinode/MigrationImminentNotice.tsx | 5 +- .../Linodes/PowerActionsDialogOrDrawer.tsx | 3 +- .../DetailTabs/Apache/Apache.tsx | 3 +- .../DetailTabs/MySQL/MySQLLanding.tsx | 3 +- .../LongviewDetail/DetailTabs/NGINX/NGINX.tsx | 3 +- .../LongviewDetail/LongviewDetail.tsx | 3 +- .../LongviewLanding/LongviewPlans.styles.ts | 3 +- .../LongviewLanding/LongviewPlans.tsx | 10 +- .../Managed/Contacts/ContactsDrawer.tsx | 12 +- .../Credentials/AddCredentialDrawer.tsx | 5 +- .../Credentials/UpdateCredentialDrawer.tsx | 5 +- .../src/features/Managed/MonitorDrawer.tsx | 3 +- .../Managed/SSHAccess/EditSSHAccessDrawer.tsx | 10 +- .../NodeBalancers/NodeBalancerConfigNode.tsx | 3 +- .../NodeBalancers/NodeBalancerConfigPanel.tsx | 3 +- .../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 | 3 +- .../BucketLanding/BucketLanding.tsx | 2 +- .../BucketLanding/CreateBucketDrawer.tsx | 2 +- .../BucketLanding/OMC_BucketLanding.tsx | 2 +- .../BucketLanding/OMC_CreateBucketDrawer.tsx | 2 +- .../EnableObjectStorageModal.tsx | 2 +- .../PlacementGroupPolicyRadioGroup.tsx | 3 +- .../PlacementGroupsAssignLinodesDrawer.tsx | 3 +- .../PlacementGroupsCreateDrawer.tsx | 3 +- .../PlacementGroupsDeleteModal.tsx | 2 +- .../PlacementGroupsDetail.tsx | 2 +- .../PlacementGroupsSummary.tsx | 3 +- .../PlacementGroupsDetailPanel.tsx | 3 +- .../PlacementGroupsEditDrawer.tsx | 3 +- .../PlacementGroupsUnassignModal.tsx | 2 +- .../APITokens/CreateAPITokenDrawer.tsx | 3 +- .../Profile/APITokens/EditAPITokenDrawer.tsx | 2 +- .../AuthenticationSettings/SMSMessaging.tsx | 5 +- .../TPAProviders.styles.ts | 3 +- .../TwoFactor/ConfirmToken.tsx | 3 +- .../TwoFactor/EnableTwoFactorForm.tsx | 3 +- .../TwoFactor/TwoFactor.tsx | 9 +- .../Profile/DisplaySettings/TimezoneForm.tsx | 2 +- .../Profile/LishSettings/LishSettings.tsx | 3 +- .../OAuthClients/CreateOAuthClientDrawer.tsx | 3 +- .../OAuthClients/EditOAuthClientDrawer.tsx | 3 +- .../Profile/Referrals/Referrals.styles.ts | 4 +- .../features/Profile/Referrals/Referrals.tsx | 3 +- .../Profile/SSHKeys/CreateSSHKeyDrawer.tsx | 2 +- .../Profile/SSHKeys/EditSSHKeyDrawer.tsx | 2 +- .../SecretTokenDialog/SecretTokenDialog.tsx | 3 +- .../Profile/Settings/PreferenceEditor.tsx | 3 +- .../src/features/Search/SearchLanding.tsx | 4 +- .../SelectStackScriptPanel.tsx | 3 +- .../StackScriptBase/StackScriptBase.tsx | 410 +++++++++--------- .../StackScriptCreate/StackScriptCreate.tsx | 2 +- .../StackScriptForm/StackScriptForm.styles.ts | 4 +- .../StackScripts/StackScriptsLanding.tsx | 2 +- .../FieldTypes/UserDefinedMultiSelect.tsx | 2 +- .../FieldTypes/UserDefinedSelect.tsx | 3 +- .../UserDefinedFieldsPanel.tsx | 3 +- .../SupportTicketDetail/AttachmentError.tsx | 3 +- .../TabbedReply/ReplyContainer.tsx | 2 +- .../SupportTickets/SupportTicketDialog.tsx | 3 +- .../src/features/Users/CreateUserDrawer.tsx | 127 +++--- .../src/features/Users/UserPermissions.tsx | 3 +- .../FormComponents/CannotCreateVPCNotice.tsx | 3 +- .../FormComponents/SubnetContent.tsx | 2 +- .../src/features/VPCs/VPCCreate/VPCCreate.tsx | 3 +- .../VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx | 3 +- .../VPCs/VPCDetail/AssignIPRanges.tsx | 3 +- .../VPCDetail/SubnetAssignLinodesDrawer.tsx | 3 +- .../VPCs/VPCDetail/SubnetCreateDrawer.tsx | 3 +- .../VPCs/VPCDetail/SubnetEditDrawer.tsx | 2 +- .../VPCs/VPCDetail/SubnetLinodeRow.styles.ts | 4 +- .../VPCDetail/SubnetUnassignLinodesDrawer.tsx | 3 +- .../VPCs/VPCLanding/VPCEditDrawer.tsx | 2 +- .../features/Volumes/AttachVolumeDrawer.tsx | 3 +- .../features/Volumes/CloneVolumeDrawer.tsx | 3 +- .../features/Volumes/DeleteVolumeDialog.tsx | 2 +- .../features/Volumes/DetachVolumeDialog.tsx | 2 +- .../src/features/Volumes/EditVolumeDrawer.tsx | 3 +- .../features/Volumes/ResizeVolumeDrawer.tsx | 5 +- .../src/features/Volumes/VolumeCreate.tsx | 4 +- .../VolumeDrawer/LinodeVolumeAddDrawer.tsx | 2 +- .../VolumeDrawer/LinodeVolumeAttachForm.tsx | 2 +- .../VolumeDrawer/LinodeVolumeCreateForm.tsx | 3 +- .../PlansPanel/DistributedRegionPlanTable.tsx | 3 +- .../components/PlansPanel/MetalNotice.tsx | 2 +- .../components/PlansPanel/PlanContainer.tsx | 2 +- .../components/PlansPanel/PlanInformation.tsx | 2 +- .../PlansPanel/PlansAvailabilityNotice.tsx | 4 +- .../components/PlansPanel/PlansPanel.tsx | 4 +- .../pr-11174-added-1730757183801.md | 5 + 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 | 4 +- .../src/components/Notice/Notice.tsx | 13 +- packages/ui/src/components/Notice/index.ts | 1 + packages/ui/src/components/index.ts | 1 + packages/ui/src/env.d.ts | 4 + packages/ui/src/index.ts | 1 + packages/ui/src/utilities/testHelpers.tsx | 28 ++ packages/ui/testSetup.ts | 5 +- 254 files changed, 860 insertions(+), 907 deletions(-) create mode 100644 packages/ui/.changeset/pr-11174-added-1730757183801.md 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 (96%) rename packages/{manager => ui}/src/components/Notice/Notice.tsx (92%) create mode 100644 packages/ui/src/components/Notice/index.ts create mode 100644 packages/ui/src/env.d.ts create mode 100644 packages/ui/src/utilities/testHelpers.tsx diff --git a/packages/manager/src/components/Accordion.tsx b/packages/manager/src/components/Accordion.tsx index 6302d388d1..5cce436527 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/AkamaiBanner/AkamaiBanner.styles.ts b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts index 7006acc13c..3642372e4f 100644 --- a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts +++ b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts @@ -1,7 +1,6 @@ -import { Box, omittedProps, Stack } from '@linode/ui'; +import { Box, Stack, WarningIcon, omittedProps } from '@linode/ui'; import { styled } from '@mui/material/styles'; -import Warning from 'src/assets/icons/warning.svg'; import AkamaiLogo from 'src/assets/logo/akamai-logo.svg'; export const StyledAkamaiLogo = styled(AkamaiLogo, { @@ -15,7 +14,7 @@ export const StyledAkamaiLogo = styled(AkamaiLogo, { }, })); -export const StyledWarningIcon = styled(Warning, { +export const StyledWarningIcon = styled(WarningIcon, { label: 'StyledWarningIcon', })(({ theme }) => ({ color: theme.tokens.color.Neutrals.Black, diff --git a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx index bce1c53ad8..89938fbeb6 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 6002e942df..fbbb76cfaa 100644 --- a/packages/manager/src/components/Dialog/Dialog.tsx +++ b/packages/manager/src/components/Dialog/Dialog.tsx @@ -1,11 +1,10 @@ -import { Box, omittedProps } from '@linode/ui'; +import { Box, Notice, omittedProps } from '@linode/ui'; import _Dialog from '@mui/material/Dialog'; import DialogContent from '@mui/material/DialogContent'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; import { DialogTitle } from 'src/components/DialogTitle/DialogTitle'; -import { Notice } from 'src/components/Notice/Notice'; import { convertForAria } from 'src/utilities/stringUtils'; import type { DialogProps as _DialogProps } from '@mui/material/Dialog'; diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts index 7ac4261bf7..acd8cea2d5 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 0322ed2ffb..4ee35065ea 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 a19fb1949a..bbc53f3b64 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 6b170531c2..fb55ce2c2f 100644 --- a/packages/manager/src/components/Encryption/Encryption.tsx +++ b/packages/manager/src/components/Encryption/Encryption.tsx @@ -1,12 +1,10 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { List, ListItem } from '@mui/material'; import * as React from 'react'; import { Checkbox } from 'src/components/Checkbox'; import { Typography } from 'src/components/Typography'; -import { Notice } from '../Notice/Notice'; - export interface EncryptionProps { descriptionCopy: JSX.Element | string; disabled?: boolean; diff --git a/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx b/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx index 3171d89e61..7a06bf1465 100644 --- a/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx +++ b/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx @@ -1,4 +1,4 @@ -import { Stack } from '@linode/ui'; +import { Notice, Stack } from '@linode/ui'; import React from 'react'; import { useFlags } from 'src/hooks/useFlags'; @@ -9,7 +9,6 @@ import { Dialog } from '../Dialog/Dialog'; import { ErrorMessage } from '../ErrorMessage'; import { LinearProgress } from '../LinearProgress'; import { Link } from '../Link'; -import { Notice } from '../Notice/Notice'; import { Typography } from '../Typography'; import { useCreateFirewallFromTemplate } from './useCreateFirewallFromTemplate'; diff --git a/packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx b/packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx index c01acbaf9b..2c77c1d38f 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 e96367d4b1..39e9e4939d 100644 --- a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx +++ b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx @@ -1,4 +1,4 @@ -import { InputLabel } from '@linode/ui'; +import { InputLabel, Notice } from '@linode/ui'; import Close from '@mui/icons-material/Close'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui'; import { Button } from 'src/components/Button/Button'; import { LinkButton } from 'src/components/LinkButton'; -import { Notice } from 'src/components/Notice/Notice'; import { StyledLinkButtonBox } from 'src/components/SelectFirewallPanel/SelectFirewallPanel'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; diff --git a/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx b/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx index 43ca759db6..b681403808 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 0ee8d6eb8f..d15bbd83c4 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/TabbedPanel/TabbedPanel.tsx b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx index 8393e3cbde..5a678a2b89 100644 --- a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx +++ b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx @@ -1,9 +1,8 @@ -import { Box, Paper, Tooltip } from '@linode/ui'; +import { Box, Notice, Paper, Tooltip } from '@linode/ui'; import HelpOutline from '@mui/icons-material/HelpOutline'; import { styled } from '@mui/material/styles'; import React, { useEffect, useState } from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { Tab } from 'src/components/Tabs/Tab'; import { TabList } from 'src/components/Tabs/TabList'; import { TabPanel } from 'src/components/Tabs/TabPanel'; diff --git a/packages/manager/src/components/Tile/Tile.tsx b/packages/manager/src/components/Tile/Tile.tsx index b717753b23..fd7e48ee97 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 edbf829236..33b44d19c4 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 7f44e77be5..f9fddc29fb 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 0dd9a134ea..5386207805 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 9513c70195..78226d57fd 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 d1cd22c3a0..42b42cced9 100644 --- a/packages/manager/src/features/Account/ObjectStorageSettings.tsx +++ b/packages/manager/src/features/Account/ObjectStorageSettings.tsx @@ -1,4 +1,4 @@ -import { Box, Stack } from '@linode/ui'; +import { Box, Notice, Stack } from '@linode/ui'; import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { Accordion } from 'src/components/Accordion'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; import { useAccountSettings } from 'src/queries/account/settings'; diff --git a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx index 50f546ae1d..0c89986ada 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 c4f0f11c9e..473b84ed6d 100644 --- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx +++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx @@ -1,4 +1,4 @@ -import { Box, Stack } from '@linode/ui'; +import { Box, Notice, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; @@ -6,7 +6,6 @@ import ErrorStateCloud from 'src/assets/icons/error-state-cloud.svg'; import { Button } from 'src/components/Button/Button'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useChildAccountsInfiniteQuery } from 'src/queries/account/account'; diff --git a/packages/manager/src/features/Backups/AutoEnroll.tsx b/packages/manager/src/features/Backups/AutoEnroll.tsx index 9a1a6e4764..1a7b8a2f13 100644 --- a/packages/manager/src/features/Backups/AutoEnroll.tsx +++ b/packages/manager/src/features/Backups/AutoEnroll.tsx @@ -1,10 +1,9 @@ -import { Paper } from '@linode/ui'; +import { Notice, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Backups/BackupDrawer.tsx b/packages/manager/src/features/Backups/BackupDrawer.tsx index 76fe9e4043..b1cb2884b5 100644 --- a/packages/manager/src/features/Backups/BackupDrawer.tsx +++ b/packages/manager/src/features/Backups/BackupDrawer.tsx @@ -1,4 +1,4 @@ -import { Box, Stack } from '@linode/ui'; +import { Box, Notice, Stack } from '@linode/ui'; import { styled } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -7,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { DisplayPrice } from 'src/components/DisplayPrice'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; 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 e07974e3fd..5741aff6ee 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 ( ({ 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 0bab8d585f..1d85088674 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 5644c16737..b41b64996d 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 58a7d152fb..82357868ff 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx @@ -1,10 +1,9 @@ -import { Box, Divider } from '@linode/ui'; +import { Box, Divider, Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Drawer } from 'src/components/Drawer'; import { LinearProgress } from 'src/components/LinearProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { MAXIMUM_PAYMENT_METHODS } from 'src/constants'; @@ -18,8 +17,8 @@ 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'; -import type { NoticeVariant } from 'src/components/Notice/Notice'; interface Props { onClose: () => void; diff --git a/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx b/packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx index e88a7a0df4..4f7fb0e301 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, Paper } from '@linode/ui'; import { Box, IconButton } from '@linode/ui'; import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; import { useTheme } from '@mui/material/styles'; @@ -12,8 +13,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 '@linode/ui'; import { Typography } from 'src/components/Typography'; import { printInvoice } from 'src/features/Billing/PdfGenerator/PdfGenerator'; import { useFlags } from 'src/hooks/useFlags'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index cf6dfcaae0..1b58b3f7a3 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -1,4 +1,4 @@ -import { BetaChip, Divider, Paper } from '@linode/ui'; +import { BetaChip, Divider, Notice, Paper } from '@linode/ui'; import { createDatabaseSchema } from '@linode/validation/lib/databases.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -10,7 +10,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { getRestrictedResourceText } from 'src/features/Account/utils'; import { DatabaseClusterData } from 'src/features/Databases/DatabaseCreate/DatabaseClusterData'; import { diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx index 360dfa533f..6d62c66c17 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx @@ -7,7 +7,6 @@ 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'; @@ -16,6 +15,7 @@ import { ExtendedIP, ipFieldPlaceholder } from 'src/utilities/ipUtils'; import { useIsDatabasesEnabled } from '../utilities'; import type { APIError } from '@linode/api-v4/lib/types'; +import { Notice } from '@linode/ui'; const useStyles = makeStyles()((theme: Theme) => ({ container: { @@ -33,7 +33,7 @@ const useStyles = makeStyles()((theme: Theme) => ({ }, })); -export type AccessOption = 'specific' | 'none'; +export type AccessOption = 'none' | 'specific'; interface Props { disabled?: boolean; @@ -65,7 +65,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/DatabaseCreate/DatabaseNodeSelector.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx index 50ae7d7998..29f03cf8ff 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx @@ -1,8 +1,7 @@ -import { FormControl } from '@linode/ui'; +import { FormControl, Notice } from '@linode/ui'; import React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; -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/Databases/DatabaseDetail/AccessControls.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx index ebbd3edbfe..996387fd88 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 e05dd1d9a8..c14f0c7e76 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 8fb1914e91..d8098c7b92 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx @@ -1,4 +1,5 @@ -import { Box, Divider } from '@linode/ui'; +import { Paper } from '@linode/ui'; +import { Box, Divider, Notice } from '@linode/ui'; import { FormControl, FormControlLabel, @@ -14,8 +15,6 @@ import { useParams } from 'react-router-dom'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; -import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; import { StyledDateCalendar, diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupsDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupsDialog.tsx index b8c3a97fc9..e2d616f71f 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupsDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackupsDialog.tsx @@ -1,19 +1,20 @@ +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; +import { useState } from 'react'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Dialog } from 'src/components/Dialog/Dialog'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useRestoreFromBackupMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import { toDatabaseFork, toFormatedDate } from '../../utilities'; + import type { Database } from '@linode/api-v4/lib/databases'; -import { DateTime } from 'luxon'; -import { useState } from 'react'; +import type { DateTime } from 'luxon'; import type { DialogProps } from 'src/components/Dialog/Dialog'; -import { toDatabaseFork, toFormatedDate } from '../../utilities'; interface Props extends Omit { database: Database; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/RestoreLegacyFromBackupDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/RestoreLegacyFromBackupDialog.tsx index 63f9315ae9..cc51b81975 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/RestoreLegacyFromBackupDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/legacy/RestoreLegacyFromBackupDialog.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; 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 { useLegacyRestoreFromBackupMutation } from 'src/queries/databases/databases'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx index 43c8a4367e..8e87fa684c 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx @@ -1,11 +1,10 @@ -import { Box, Divider, Paper } from '@linode/ui'; +import { Box, Divider, Notice, Paper } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; import { determineInitialPlanCategoryTab } from 'src/features/components/PlansPanel/utils'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx index 57f9a81b1a..af88055894 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx @@ -1,14 +1,15 @@ -import { Engine } from '@linode/api-v4/lib/databases'; +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; 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 { useDeleteDatabaseMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import type { Engine } from '@linode/api-v4/lib/databases'; + interface Props { databaseEngine: Engine; databaseID: number; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx index 6866fcc99f..242ac52fea 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.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'; import { useDatabaseCredentialsMutation } from 'src/queries/databases/databases'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx index e531dc963c..47b084ac17 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material'; import { useSnackbar } from 'notistack'; 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'; import { usePatchDatabaseMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsSuspendClusterDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsSuspendClusterDialog.tsx index 9b2e125404..a9c8aa0b7d 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsSuspendClusterDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsSuspendClusterDialog.tsx @@ -1,15 +1,17 @@ -import { Engine } from '@linode/api-v4/lib/databases'; +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; + import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Checkbox } from 'src/components/Checkbox'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useSuspendDatabaseMutation } from 'src/queries/databases/databases'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import type { Engine } from '@linode/api-v4/lib/databases'; + export interface SuspendDialogProps { databaseEngine: Engine; databaseId: number; @@ -24,9 +26,9 @@ export const DatabaseSettingsSuspendClusterDialog = ( const { databaseEngine, databaseId, databaseLabel, onClose, open } = props; const { enqueueSnackbar } = useSnackbar(); const { - mutateAsync: suspendDatabase, - isPending, error, + isPending, + mutateAsync: suspendDatabase, reset, } = useSuspendDatabaseMutation(databaseEngine, databaseId); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx index f42d1777e4..14d75204ef 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx @@ -1,4 +1,4 @@ -import { FormControl } from '@linode/ui'; +import { FormControl, Notice } from '@linode/ui'; import { useTheme } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { DATABASE_ENGINE_MAP, diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx index ad3a4734d1..5b1cf26408 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx @@ -1,4 +1,4 @@ -import { FormControl } from '@linode/ui'; +import { FormControl, Notice } from '@linode/ui'; import { useFormik } from 'formik'; import { DateTime } from 'luxon'; import { useSnackbar } from 'notistack'; @@ -9,7 +9,6 @@ import { makeStyles } from 'tss-react/mui'; import { Button } from 'src/components/Button/Button'; import Select from 'src/components/EnhancedSelect/Select'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; import { TooltipIcon } from 'src/components/TooltipIcon'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx index b8d125b0da..117578b998 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { matchPath, useHistory, useParams } from 'react-router-dom'; @@ -7,7 +8,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; 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 { 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/Domains/CloneDomainDrawer.tsx b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx index ff6345ffe2..0192c19a34 100644 --- a/packages/manager/src/features/Domains/CloneDomainDrawer.tsx +++ b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx @@ -1,18 +1,19 @@ -import { Domain } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import React from 'react'; import { useHistory } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; -import { Radio } from 'src/components/Radio/Radio'; -import { TextField } from 'src/components/TextField'; import { FormControlLabel } from 'src/components/FormControlLabel'; +import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; +import { TextField } from 'src/components/TextField'; import { useCloneDomainMutation } from 'src/queries/domains'; import { useGrants, useProfile } from 'src/queries/profile/profile'; +import type { Domain } from '@linode/api-v4'; + interface CloneDomainDrawerProps { domain: Domain | undefined; onClose: () => void; diff --git a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx index 7a4bd2d936..1e346477f6 100644 --- a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx +++ b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx @@ -1,4 +1,4 @@ -import { FormHelperText, Paper } from '@linode/ui'; +import { FormHelperText, Notice, Paper } from '@linode/ui'; import { createDomainSchema } from '@linode/validation/lib/domains.schema'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -14,7 +14,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { LandingHeader } from 'src/components/LandingHeader'; 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 { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx b/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx index 4cc6b0f8a6..6958ddd56c 100644 --- a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx +++ b/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx @@ -1,3 +1,4 @@ +import { Notice, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -6,8 +7,6 @@ import { useHistory, useLocation, useParams } from 'react-router-dom'; 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 { Paper } from '@linode/ui'; import { TagCell } from 'src/components/TagCell/TagCell'; import { Typography } from 'src/components/Typography'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; diff --git a/packages/manager/src/features/Domains/DomainRecordDrawer.tsx b/packages/manager/src/features/Domains/DomainRecordDrawer.tsx index ccc0ac55d0..42b03a8359 100644 --- a/packages/manager/src/features/Domains/DomainRecordDrawer.tsx +++ b/packages/manager/src/features/Domains/DomainRecordDrawer.tsx @@ -1,13 +1,8 @@ import { - Domain, - DomainRecord, - DomainType, - RecordType, - UpdateDomainPayload, createDomainRecord, updateDomainRecord, } from '@linode/api-v4/lib/domains'; -import { APIError } from '@linode/api-v4/lib/types'; +import { Notice } from '@linode/ui'; import produce from 'immer'; import { cond, @@ -25,15 +20,10 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Drawer } from 'src/components/Drawer'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; -import { - ExtendedIP, - extendedIPToString, - stringToExtendedIP, -} from 'src/utilities/ipUtils'; +import { extendedIPToString, stringToExtendedIP } from 'src/utilities/ipUtils'; import { maybeCastToNumber } from 'src/utilities/maybeCastToNumber'; import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView'; @@ -44,6 +34,16 @@ import { isValidDomainRecord, } from './domainUtils'; +import type { + Domain, + DomainRecord, + DomainType, + RecordType, + UpdateDomainPayload, +} from '@linode/api-v4/lib/domains'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { ExtendedIP } from 'src/utilities/ipUtils'; + interface UpdateDomainDataProps extends UpdateDomainPayload { id: number; } @@ -117,74 +117,48 @@ export class DomainRecordDrawer extends React.Component< DomainRecordDrawerProps, State > { - componentDidUpdate(prevProps: DomainRecordDrawerProps) { - if (this.props.open && !prevProps.open) { - // Drawer is opening, set the fields according to props - this.setState({ - fields: DomainRecordDrawer.defaultFieldsState(this.props), - }); - } - } - - render() { - const { submitting } = this.state; - const { mode, open, records, type } = this.props; - const { fields } = this.types[type]; - const isCreating = mode === 'create'; - const isDomain = type === 'master' || type === 'slave'; - - const hasARecords = records.find((thisRecord) => - ['A', 'AAAA'].includes(thisRecord.type) - ); // If there are no A/AAAA records and a user tries to add an NS record, they'll see a warning message asking them to add an A/AAAA record. - - const noARecordsNoticeText = - 'Please create an A/AAAA record for this domain to avoid a Zone File invalidation.'; - - const otherErrors = [ - getAPIErrorFor({}, this.state.errors)('_unknown'), - getAPIErrorFor({}, this.state.errors)('none'), - ].filter(Boolean); - - return ( - - {otherErrors.length > 0 && - otherErrors.map((err, index) => { - return ; - })} - {!hasARecords && type === 'NS' && ( - - )} - {fields.map((field: any, idx: number) => field(idx))} + /** + * the defaultFieldState is used to pre-populate the drawer with either + * editable data or defaults. + */ + static defaultFieldsState = (props: Partial) => ({ + axfr_ips: getInitialIPs(props.axfr_ips), + description: '', + domain: props.domain, + expire_sec: props.expire_sec ?? 0, + id: props.id, + name: props.name ?? '', + port: props.port ?? '80', + priority: props.priority ?? '10', + protocol: props.protocol ?? 'tcp', + refresh_sec: props.refresh_sec ?? 0, + retry_sec: props.retry_sec ?? 0, + service: props.service ?? '', + soa_email: props.soa_email ?? '', + tag: props.tag ?? 'issue', + target: props.target ?? '', + ttl_sec: props.ttl_sec ?? 0, + weight: props.weight ?? '5', + }); - - - ); - } + static errorFields = { + axfr_ips: 'domain transfers', + domain: 'domain', + expire_sec: 'expire rate', + name: 'name', + port: 'port', + priority: 'priority', + protocol: 'protocol', + refresh_sec: 'refresh rate', + retry_sec: 'retry rate', + service: 'service', + soa_email: 'SOA email address', + tag: 'tag', + target: 'target', + ttl_sec: 'ttl_sec', + type: 'type', + weight: 'weight', + }; DefaultTTLField = () => ( @@ -474,49 +448,6 @@ export class DomainRecordDrawer extends React.Component< WeightField = () => ; - /** - * the defaultFieldState is used to pre-populate the drawer with either - * editable data or defaults. - */ - static defaultFieldsState = (props: Partial) => ({ - axfr_ips: getInitialIPs(props.axfr_ips), - description: '', - domain: props.domain, - expire_sec: props.expire_sec ?? 0, - id: props.id, - name: props.name ?? '', - port: props.port ?? '80', - priority: props.priority ?? '10', - protocol: props.protocol ?? 'tcp', - refresh_sec: props.refresh_sec ?? 0, - retry_sec: props.retry_sec ?? 0, - service: props.service ?? '', - soa_email: props.soa_email ?? '', - tag: props.tag ?? 'issue', - target: props.target ?? '', - ttl_sec: props.ttl_sec ?? 0, - weight: props.weight ?? '5', - }); - - static errorFields = { - axfr_ips: 'domain transfers', - domain: 'domain', - expire_sec: 'expire rate', - name: 'name', - port: 'port', - priority: 'priority', - protocol: 'protocol', - refresh_sec: 'refresh rate', - retry_sec: 'retry rate', - service: 'service', - soa_email: 'SOA email address', - tag: 'tag', - target: 'target', - ttl_sec: 'ttl_sec', - type: 'type', - weight: 'weight', - }; - filterDataByType = ( fields: EditableDomainFields | EditableRecordFields, t: DomainType | RecordType @@ -709,6 +640,16 @@ export class DomainRecordDrawer extends React.Component< key: keyof EditableDomainFields | keyof EditableRecordFields ) => (value: any) => this.setState(set(lensPath(['fields', key]), value)); + componentDidUpdate(prevProps: DomainRecordDrawerProps) { + if (this.props.open && !prevProps.open) { + // Drawer is opening, set the fields according to props + this.setState({ + fields: DomainRecordDrawer.defaultFieldsState(this.props), + }); + } + } + + // eslint-disable-next-line perfectionist/sort-classes setExpireSec = this.updateField('expire_sec'); setProtocol = this.updateField('protocol'); @@ -730,9 +671,6 @@ export class DomainRecordDrawer extends React.Component< A: { fields: [], }, - PTR: { - fields: [], - }, AAAA: { fields: [ (idx: number) => ( @@ -802,6 +740,9 @@ export class DomainRecordDrawer extends React.Component< (idx: number) => , ], }, + PTR: { + fields: [], + }, SRV: { fields: [ (idx: number) => , @@ -857,6 +798,66 @@ export class DomainRecordDrawer extends React.Component< fields: [], }, }; + + render() { + const { submitting } = this.state; + const { mode, open, records, type } = this.props; + const { fields } = this.types[type]; + const isCreating = mode === 'create'; + const isDomain = type === 'master' || type === 'slave'; + + const hasARecords = records.find((thisRecord) => + ['A', 'AAAA'].includes(thisRecord.type) + ); // If there are no A/AAAA records and a user tries to add an NS record, they'll see a warning message asking them to add an A/AAAA record. + + const noARecordsNoticeText = + 'Please create an A/AAAA record for this domain to avoid a Zone File invalidation.'; + + const otherErrors = [ + getAPIErrorFor({}, this.state.errors)('_unknown'), + getAPIErrorFor({}, this.state.errors)('none'), + ].filter(Boolean); + + return ( + + {otherErrors.length > 0 && + otherErrors.map((err, index) => { + return ; + })} + {!hasARecords && type === 'NS' && ( + + )} + {fields.map((field: any, idx: number) => field(idx))} + + + + ); + } } const modeMap = { diff --git a/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx b/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx index 0a59f0428a..51803d22c3 100644 --- a/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx +++ b/packages/manager/src/features/Domains/DomainZoneImportDrawer.tsx @@ -1,16 +1,17 @@ -import { ImportZonePayload } from '@linode/api-v4/lib/domains'; +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; 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 { useImportZoneMutation } from 'src/queries/domains'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { getErrorMap } from 'src/utilities/errorUtils'; +import type { ImportZonePayload } from '@linode/api-v4/lib/domains'; + interface DomainZoneImportDrawerProps { onClose: () => void; open: boolean; diff --git a/packages/manager/src/features/Domains/DomainsLanding.tsx b/packages/manager/src/features/Domains/DomainsLanding.tsx index beb82cdaf2..a3ff5e3ec6 100644 --- a/packages/manager/src/features/Domains/DomainsLanding.tsx +++ b/packages/manager/src/features/Domains/DomainsLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; @@ -11,7 +12,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; import { LandingHeader } from 'src/components/LandingHeader'; -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/Domains/EditDomainDrawer.tsx b/packages/manager/src/features/Domains/EditDomainDrawer.tsx index 14c2c3c0c3..c664e3fb74 100644 --- a/packages/manager/src/features/Domains/EditDomainDrawer.tsx +++ b/packages/manager/src/features/Domains/EditDomainDrawer.tsx @@ -1,4 +1,4 @@ -import { Domain, UpdateDomainPayload } from '@linode/api-v4/lib/domains'; +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; 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 { TagsInput } from 'src/components/TagsInput/TagsInput'; @@ -15,14 +14,13 @@ import { useUpdateDomainMutation } from 'src/queries/domains'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { getErrorMap } from 'src/utilities/errorUtils'; import { handleFormikBlur } from 'src/utilities/formikTrimUtil'; -import { - ExtendedIP, - extendedIPToString, - stringToExtendedIP, -} from 'src/utilities/ipUtils'; +import { extendedIPToString, stringToExtendedIP } from 'src/utilities/ipUtils'; import { transferHelperText as helperText } from './domainUtils'; +import type { Domain, UpdateDomainPayload } from '@linode/api-v4/lib/domains'; +import type { ExtendedIP } from 'src/utilities/ipUtils'; + interface EditDomainDrawerProps { domain: Domain | undefined; onClose: () => void; diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransferCreate.styles.ts b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransferCreate.styles.ts index c9ba37b779..aea3049662 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransferCreate.styles.ts +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransferCreate.styles.ts @@ -1,7 +1,6 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; - -import { Notice } from 'src/components/Notice/Notice'; +import Grid from '@mui/material/Unstable_Grid2'; export const StyledNotice = styled(Notice, { label: 'StyledNotice', diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferCancelDialog.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferCancelDialog.tsx index e282dc76cd..2c1d12c893 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferCancelDialog.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferCancelDialog.tsx @@ -1,20 +1,19 @@ -import { - TransferEntities, - cancelTransfer, -} from '@linode/api-v4/lib/entity-transfers'; -import { APIError } from '@linode/api-v4/lib/types'; +import { cancelTransfer } from '@linode/api-v4/lib/entity-transfers'; +import { Notice } from '@linode/ui'; +import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { useQueryClient } from '@tanstack/react-query'; 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'; import { queryKey } from 'src/queries/entityTransfers'; import { sendEntityTransferCancelEvent } from 'src/utilities/analytics/customEventAnalytics'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import type { TransferEntities } from '@linode/api-v4/lib/entity-transfers'; +import type { APIError } from '@linode/api-v4/lib/types'; + export interface Props { entities?: TransferEntities; onClose: () => void; diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx index d1f99dab25..c79cecf7e0 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx @@ -1,17 +1,13 @@ -import { - TransferEntities, - acceptEntityTransfer, -} from '@linode/api-v4/lib/entity-transfers'; -import { APIError } from '@linode/api-v4/lib/types'; +import { acceptEntityTransfer } from '@linode/api-v4/lib/entity-transfers'; +import { Notice } from '@linode/ui'; +import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { useQueryClient } from '@tanstack/react-query'; import { Checkbox } from 'src/components/Checkbox'; import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Notice } from 'src/components/Notice/Notice'; import { TRANSFER_FILTERS, queryKey, @@ -35,6 +31,9 @@ import { StyledUl, } from './ConfirmTransferDialog.styles'; +import type { TransferEntities } from '@linode/api-v4/lib/entity-transfers'; +import type { APIError } from '@linode/api-v4/lib/types'; + export interface ConfirmTransferDialogProps { onClose: () => void; open: boolean; diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.tsx index cd4eab3e95..faf5bf4a53 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddLinodeDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { useParams } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { SupportLink } from 'src/components/SupportLink'; import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect'; import { diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.tsx index 86f799f810..28ea6434f4 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { useParams } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { SupportLink } from 'src/components/SupportLink'; import { FIREWALL_LIMITS_CONSIDERATIONS_LINK } from 'src/constants'; import { NodeBalancerSelect } from 'src/features/NodeBalancers/NodeBalancerSelect'; diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx index 7943230962..41e3135af1 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx @@ -1,12 +1,12 @@ -import { useTheme } from '@mui/material/styles'; +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useAllFirewallDevicesQuery } from 'src/queries/firewalls'; diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx index a0beae974d..3a9ac80fcf 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -5,14 +6,11 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { FormControlLabel } from 'src/components/FormControlLabel'; 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 { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { - FirewallOptionItem, - FirewallPreset, addressOptions, firewallOptionItemsShort, portPresets, @@ -25,6 +23,10 @@ import { enforceIPMasks } from './FirewallRuleDrawer.utils'; import { PORT_PRESETS, PORT_PRESETS_ITEMS } from './shared'; import type { FirewallRuleFormProps } from './FirewallRuleDrawer.types'; +import type { + FirewallOptionItem, + FirewallPreset, +} from 'src/features/Firewalls/shared'; import type { ExtendedIP } from 'src/utilities/ipUtils'; const ipNetmaskTooltipText = @@ -84,7 +86,7 @@ export const FirewallRuleForm = React.memo((props: FirewallRuleFormProps) => { // These handlers are all memoized because the form was laggy when I tried them inline. const handleTypeChange = React.useCallback( - (item: FirewallOptionItem | null) => { + (item: FirewallOptionItem<'custom' | FirewallPreset> | null) => { const selectedType = item?.value; // If the user re-selects the same preset or selectedType is undefined, don't do anything @@ -207,13 +209,13 @@ export const FirewallRuleForm = React.memo((props: FirewallRuleFormProps) => { /> )} { 'data-qa-protocol-select': true, }, }} - autoHighlight aria-label="Select rule protocol." - errorText={errors.protocol} + autoHighlight disableClearable + errorText={errors.protocol} label="Protocol" onBlur={handleBlur} onChange={(_, selected) => handleProtocolChange(selected.value)} @@ -264,26 +266,26 @@ export const FirewallRuleForm = React.memo((props: FirewallRuleFormProps) => { /> 0 ? ' ' : 'Select a port...'} + multiple onChange={(_, selected) => handlePortPresetChange(selected)} options={portOptions} + // If options are selected, hide the placeholder + placeholder={presetPorts.length > 0 ? ' ' : 'Select a port...'} value={presetPorts} /> {hasCustomInput ? ( @@ -299,6 +301,9 @@ export const FirewallRuleForm = React.memo((props: FirewallRuleFormProps) => { /> ) : null} { + handleAddressesChange(selected.value); + }} textFieldProps={{ InputProps: { required: true, @@ -307,15 +312,12 @@ export const FirewallRuleForm = React.memo((props: FirewallRuleFormProps) => { 'data-qa-address-source-select': true, }, }} - autoHighlight aria-label={`Select rule ${addressesLabel}s.`} - errorText={errors.addresses} + autoHighlight disableClearable + errorText={errors.addresses} label={`${capitalize(addressesLabel)}s`} onBlur={handleBlur} - onChange={(_, selected) => { - handleAddressesChange(selected.value); - }} options={addressOptions} placeholder={`Select ${addressesLabel}s...`} value={addressesValue} diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding.tsx index d998e9809b..6d010ca971 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; @@ -5,7 +6,6 @@ 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 { Prompt } from 'src/components/Prompt/Prompt'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx index 3a728007b2..093f9592f8 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { CreateFirewallSchema } from '@linode/validation/lib/firewalls.schema'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -11,7 +11,6 @@ import { Drawer } from 'src/components/Drawer'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; import { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx b/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx index dd09facc8b..d844382a34 100644 --- a/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx +++ b/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import { Box } from '@mui/material'; import { styled } from '@mui/material/styles'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useIsDatabasesEnabled } from '../Databases/utilities'; diff --git a/packages/manager/src/features/GlobalNotifications/EmailBounce.tsx b/packages/manager/src/features/GlobalNotifications/EmailBounce.tsx index 65d4a95280..63b02b09e9 100644 --- a/packages/manager/src/features/GlobalNotifications/EmailBounce.tsx +++ b/packages/manager/src/features/GlobalNotifications/EmailBounce.tsx @@ -1,12 +1,12 @@ +import { Notice } from '@linode/ui'; +import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; -import { Theme, useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useAccount, useMutateAccount } from 'src/queries/account/account'; import { useNotificationsQuery } from 'src/queries/account/notifications'; @@ -14,6 +14,8 @@ import { useMutateProfile, useProfile } from 'src/queries/profile/profile'; import { StyledGrid } from './EmailBounce.styles'; +import type { Theme } from '@mui/material/styles'; + // ============================================================================= // // ============================================================================= diff --git a/packages/manager/src/features/GlobalNotifications/RegionStatusBanner.tsx b/packages/manager/src/features/GlobalNotifications/RegionStatusBanner.tsx index f369b2e614..d3adb497e0 100644 --- a/packages/manager/src/features/GlobalNotifications/RegionStatusBanner.tsx +++ b/packages/manager/src/features/GlobalNotifications/RegionStatusBanner.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 { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/GlobalNotifications/VerificationDetailsBanner.tsx b/packages/manager/src/features/GlobalNotifications/VerificationDetailsBanner.tsx index 715dbdcd6e..38c705b271 100644 --- a/packages/manager/src/features/GlobalNotifications/VerificationDetailsBanner.tsx +++ b/packages/manager/src/features/GlobalNotifications/VerificationDetailsBanner.tsx @@ -1,9 +1,8 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import React from 'react'; import { useHistory } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; interface Props { diff --git a/packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx b/packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx index c6c2372b08..9ea11aa21f 100644 --- a/packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx +++ b/packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx @@ -1,18 +1,22 @@ +import { Notice } from '@linode/ui'; import Search from '@mui/icons-material/Search'; -import { Theme } from '@mui/material/styles'; import { pathOr } from 'ramda'; import * as React from 'react'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import { debounce } from 'throttle-debounce'; import { makeStyles } from 'tss-react/mui'; -import EnhancedSelect, { Item } from 'src/components/EnhancedSelect'; -import { Notice } from 'src/components/Notice/Notice'; +import EnhancedSelect from 'src/components/EnhancedSelect'; import { selectStyles } from 'src/features/TopMenu/SearchBar/SearchBar'; -import withSearch, { AlgoliaState as AlgoliaProps } from '../SearchHOC'; +import withSearch from '../SearchHOC'; import { SearchItem } from './SearchItem'; +import type { AlgoliaState as AlgoliaProps } from '../SearchHOC'; +import type { Theme } from '@mui/material/styles'; +import type { RouteComponentProps } from 'react-router-dom'; +import type { Item } from 'src/components/EnhancedSelect'; + const useStyles = makeStyles()((theme: Theme) => ({ enhancedSelectWrapper: { '& .input': { diff --git a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx index 24ccb36326..bec36434a1 100644 --- a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx +++ b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx @@ -1,4 +1,4 @@ -import { Box, InputAdornment } from '@linode/ui'; +import { Box, InputAdornment, Notice } from '@linode/ui'; import Search from '@mui/icons-material/Search'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -7,7 +7,6 @@ import { useHistory } from 'react-router-dom'; import { makeStyles } from 'tss-react/mui'; import { H1Header } from 'src/components/H1Header/H1Header'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { COMMUNITY_SEARCH_URL, DOCS_SEARCH_URL } from 'src/constants'; import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; diff --git a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx index 14a5bed997..26da650b1c 100644 --- a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx @@ -1,5 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Paper, Stack } from '@linode/ui'; +import { Notice, Paper, Stack } from '@linode/ui'; import { Box } from '@linode/ui'; import { createImageSchema } from '@linode/validation'; import { useSnackbar } from 'notistack'; @@ -13,7 +13,6 @@ import { Checkbox } from 'src/components/Checkbox'; import { DISK_ENCRYPTION_IMAGES_CAVEAT_COPY } from 'src/components/Encryption/constants'; import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; diff --git a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx index dcee670dc6..7b1c0a8dbe 100644 --- a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx @@ -1,5 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Paper, Stack } from '@linode/ui'; +import { Notice, Paper, Stack } from '@linode/ui'; import { Box } from '@linode/ui'; import { useSnackbar } from 'notistack'; import React, { useState } from 'react'; @@ -13,7 +13,6 @@ import { Button } from 'src/components/Button/Button'; import { Checkbox } from 'src/components/Checkbox'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Prompt } from 'src/components/Prompt/Prompt'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; diff --git a/packages/manager/src/features/Images/ImagesLanding/EditImageDrawer.tsx b/packages/manager/src/features/Images/ImagesLanding/EditImageDrawer.tsx index 09c2d02e8b..bd3c629d05 100644 --- a/packages/manager/src/features/Images/ImagesLanding/EditImageDrawer.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/EditImageDrawer.tsx @@ -1,11 +1,11 @@ import { yupResolver } from '@hookform/resolvers/yup'; +import { Notice } from '@linode/ui'; import { updateImageSchema } from '@linode/validation'; import * as React from 'react'; 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 { TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; import { useUpdateImageMutation } from 'src/queries/images'; diff --git a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx index 32895538c5..02f3a15421 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx @@ -1,11 +1,10 @@ -import { Paper, Stack } from '@linode/ui'; +import { Notice, Paper, Stack } from '@linode/ui'; import { useSnackbar } from 'notistack'; import React from 'react'; import { useForm } from 'react-hook-form'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { RegionMultiSelect } from 'src/components/RegionSelect/RegionMultiSelect'; import { Typography } from 'src/components/Typography'; import { useUpdateImageRegionsMutation } from 'src/queries/images'; diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx index d002d4c97e..9882d8e869 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx @@ -1,4 +1,4 @@ -import { IconButton, InputAdornment, Paper } from '@linode/ui'; +import { IconButton, InputAdornment, Notice, Paper } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import { useQueryClient } from '@tanstack/react-query'; import { createLazyRoute } from '@tanstack/react-router'; @@ -16,7 +16,6 @@ import { Drawer } from 'src/components/Drawer'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; import { LandingHeader } from 'src/components/LandingHeader'; -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/Images/ImagesLanding/RebuildImageDrawer.tsx b/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx index 3621505ee8..fc881f2999 100644 --- a/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/RebuildImageDrawer.tsx @@ -1,4 +1,4 @@ -import { Divider, Stack } from '@linode/ui'; +import { Divider, Notice, Stack } from '@linode/ui'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; import { useHistory } from 'react-router-dom'; @@ -6,7 +6,6 @@ import { useHistory } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect'; import { REBUILD_LINODE_IMAGE_PARAM_NAME } from '../../Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx index de7cfb34c4..5d672fda40 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/ControlPlaneACLPane.tsx @@ -1,11 +1,10 @@ -import { Box, FormControl } from '@linode/ui'; +import { Box, FormControl, Notice } from '@linode/ui'; import { FormLabel } from '@mui/material'; import * as React from 'react'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; -import { Notice } from 'src/components/Notice/Notice'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; import { validateIPs } from 'src/utilities/ipUtils'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx index 66076605c1..9f29c70968 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx @@ -1,4 +1,4 @@ -import { Box, Paper, Stack } from '@linode/ui'; +import { Box, Notice, Paper, Stack } from '@linode/ui'; import { Divider } from '@mui/material'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -12,7 +12,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; import { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx index 3049603113..789ecf75a7 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx @@ -1,11 +1,10 @@ -import { Box, FormControl } from '@linode/ui'; +import { Box, FormControl, Notice } from '@linode/ui'; import { FormLabel } from '@mui/material'; import * as React from 'react'; import { CircleProgress } from 'src/components/CircleProgress'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; import { RadioGroup } from 'src/components/RadioGroup'; import { TooltipIcon } from 'src/components/TooltipIcon'; diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx index a8ea018ca2..a44ad7ce3d 100644 --- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx +++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx @@ -1,10 +1,9 @@ -import { Box, Divider } from '@linode/ui'; +import { Box, Divider, Notice } from '@linode/ui'; import { Typography, styled } from '@mui/material'; import * as React from 'react'; import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { RenderGuard } from 'src/components/RenderGuard'; import { EUAgreementCheckbox } from 'src/features/Account/Agreements/EUAgreementCheckbox'; import { useAccountAgreements } from 'src/queries/account/agreements'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx index b1e13f1a5a..a991632db1 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; import { useDeleteKubernetesClusterMutation } from 'src/queries/kubernetes'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx index 5daafad764..65b282bf33 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeControlPaneACLDrawer.tsx @@ -1,5 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Box, omittedProps } from '@linode/ui'; +import { Box, Notice, omittedProps } from '@linode/ui'; import { kubernetesControlPlaneACLPayloadSchema } from '@linode/validation'; import { Divider, Stack } from '@mui/material'; import { styled } from '@mui/material/styles'; @@ -11,7 +11,6 @@ import { Drawer } from 'src/components/Drawer'; import { DrawerContent } from 'src/components/DrawerContent'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { MultipleNonExtendedIPInput } from 'src/components/MultipleIPInput/MultipleNonExtendedIPInput'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx index 9fedd22aac..c858e21e93 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx @@ -1,11 +1,10 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { ErrorMessage } from 'src/components/ErrorMessage'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useCreateNodePoolMutation } from 'src/queries/kubernetes'; import { useAllTypes } from 'src/queries/types'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx index d062739547..12de978e7d 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { AutoscaleNodePoolSchema } from '@linode/validation/lib/kubernetes.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { useFormik } from 'formik'; @@ -10,7 +11,6 @@ import { Button } from 'src/components/Button/Button'; 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 { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx index dc4b0aee90..30bbf9c23a 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -6,7 +7,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput'; import { ErrorMessage } from 'src/components/ErrorMessage'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useUpdateNodePoolMutation } from 'src/queries/kubernetes'; import { useSpecificTypes } from 'src/queries/types'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx index b61c0226f5..fa000d5acc 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -6,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Checkbox } from 'src/components/Checkbox'; import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { localStorageWarning, diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.tsx index 7f0ca291da..e88d951a9a 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanContainer.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Hidden } from 'src/components/Hidden'; -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/Linodes/CloneLanding/CloneLanding.tsx b/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx index 1ef66ba621..088aa038d0 100644 --- a/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx +++ b/packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx @@ -1,5 +1,5 @@ import { cloneLinode, cloneLinodeDisk } from '@linode/api-v4/lib/linodes'; -import { Box } from '@linode/ui'; +import { Box, Notice, Paper } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { castDraft } from 'immer'; @@ -14,8 +14,6 @@ import { } from 'react-router-dom'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; 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/Linodes/CloneLanding/Details.tsx b/packages/manager/src/features/Linodes/CloneLanding/Details.tsx index 05de98947e..5ea4fcab36 100644 --- a/packages/manager/src/features/Linodes/CloneLanding/Details.tsx +++ b/packages/manager/src/features/Linodes/CloneLanding/Details.tsx @@ -1,4 +1,4 @@ -import { Divider } from '@linode/ui'; +import { Divider, Notice, Paper } from '@linode/ui'; import Close from '@mui/icons-material/Close'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; @@ -8,8 +8,6 @@ import { Button } from 'src/components/Button/Button'; import { Link } from 'src/components/Link'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; -import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx index cc77ba35f8..c8ce160933 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Addons.tsx @@ -1,8 +1,7 @@ -import { Divider, Paper, Stack } from '@linode/ui'; +import { Divider, Notice, Paper, Stack } from '@linode/ui'; import React, { useMemo } from 'react'; import { useWatch } from 'react-hook-form'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx index 147ab41532..7cd4de48dc 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx @@ -1,4 +1,4 @@ -import { Stack } from '@linode/ui'; +import { Notice, Stack } from '@linode/ui'; import React, { useMemo } from 'react'; import { useController, useFormContext, useWatch } from 'react-hook-form'; @@ -7,7 +7,6 @@ import { Currency } from 'src/components/Currency'; import { DISK_ENCRYPTION_BACKUPS_CAVEAT_COPY } from 'src/components/Encryption/constants'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { useAccountSettings } from 'src/queries/account/settings'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/EUAgreement.tsx b/packages/manager/src/features/Linodes/LinodeCreate/EUAgreement.tsx index 33f7e3bdfa..1cf226c61b 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/EUAgreement.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/EUAgreement.tsx @@ -1,8 +1,7 @@ -import { Paper, Stack } from '@linode/ui'; +import { Notice, Paper, Stack } from '@linode/ui'; import React from 'react'; import { useController, useWatch } from 'react-hook-form'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { EUAgreementCheckbox } from 'src/features/Account/Agreements/EUAgreementCheckbox'; import { useAccountAgreements } from 'src/queries/account/agreements'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Error.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Error.tsx index 8b75dc5a0b..a179493359 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Error.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Error.tsx @@ -1,9 +1,8 @@ +import { Notice, Paper } from '@linode/ui'; import React from 'react'; import { useFormContext } from 'react-hook-form'; import { ErrorMessage } from 'src/components/ErrorMessage'; -import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import type { CreateLinodeRequest } from '@linode/api-v4'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Region.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Region.tsx index dcb9d03cdc..1150f2975a 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Region.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Region.tsx @@ -1,5 +1,4 @@ -import { Paper } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, Notice, Paper } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; import { useController, useFormContext, useWatch } from 'react-hook-form'; @@ -7,7 +6,6 @@ import { useController, useFormContext, useWatch } from 'react-hook-form'; import { DocsLink } from 'src/components/DocsLink/DocsLink'; import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { isDistributedRegionSupported, diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupSelect.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupSelect.tsx index 4a57fb2c09..c70bfca80e 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupSelect.tsx @@ -1,11 +1,10 @@ -import { Box, Paper, Stack } from '@linode/ui'; +import { Box, Notice, Paper, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; import { useController, useWatch } from 'react-hook-form'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { LinearProgress } from 'src/components/LinearProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { SelectionCard } from 'src/components/SelectionCard/SelectionCard'; import { Typography } from 'src/components/Typography'; import { useLinodeBackupsQuery } from 'src/queries/linodes/backups'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupsWarning.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupsWarning.tsx index f06f2a2a46..d665bb04bc 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupsWarning.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Backups/BackupsWarning.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import { ListItem } from '@mui/material'; import React from 'react'; import { List } from 'src/components/List'; -import { Notice } from 'src/components/Notice/Notice'; export const BackupsWarning = () => { return ( diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/CloneWarning.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/CloneWarning.tsx index d9ba143641..c3b8adcb74 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/CloneWarning.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Clone/CloneWarning.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import { ListItem } from '@mui/material'; import React from 'react'; import { List } from 'src/components/List'; -import { Notice } from 'src/components/Notice/Notice'; export const CloneWarning = () => { return ( diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx index 3380f5f581..227fc43dfe 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSelect.tsx @@ -1,10 +1,9 @@ -import { Box, Paper, Stack } from '@linode/ui'; +import { Box, Notice, Paper, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { useFormContext } from 'react-hook-form'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useMarketplaceAppsQuery } from 'src/queries/stackscripts'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.tsx index f1fe6d0aba..9dbcc63ab6 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelection.tsx @@ -1,8 +1,7 @@ +import { Notice, Paper } from '@linode/ui'; import React from 'react'; import { useFormContext } from 'react-hook-form'; -import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { Tab } from 'src/components/Tabs/Tab'; import { TabList } from 'src/components/Tabs/TabList'; 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 342d538c9f..5cfc84c947 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,9 +1,8 @@ -import { Box, IconButton, Paper, Stack } from '@linode/ui'; +import { Box, IconButton, Notice, Paper, Stack } from '@linode/ui'; import React from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; import Info from 'src/assets/icons/info.svg'; -import { Notice } from 'src/components/Notice/Notice'; import { ShowMoreExpansion } from 'src/components/ShowMoreExpansion'; import { Typography } from 'src/components/Typography'; import { oneClickApps } from 'src/features/OneClickApps/oneClickApps'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx index 94357dc98d..bd22cb4d40 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import React, { useMemo } from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { Accordion } from 'src/components/Accordion'; 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 { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx index 498cbeac13..e41d57f1e1 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/UserData/UserDataHeading.tsx @@ -1,8 +1,7 @@ -import { Stack } from '@linode/ui'; +import { Notice, Stack } from '@linode/ui'; import React from 'react'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLANAvailabilityNotice.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLANAvailabilityNotice.tsx index 1305bf811a..0556b7d9f3 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLANAvailabilityNotice.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLANAvailabilityNotice.tsx @@ -1,15 +1,16 @@ -import { Theme, styled } from '@mui/material/styles'; +import { Notice } from '@linode/ui'; +import { styled } from '@mui/material/styles'; import * as React from 'react'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; -import { Notice } from 'src/components/Notice/Notice'; import { TextTooltip } from 'src/components/TextTooltip'; import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { regionsWithFeature } from 'src/utilities/doesRegionSupportFeature'; import type { Region } from '@linode/api-v4'; +import type { Theme } from '@mui/material/styles'; export const VLANAvailabilityNotice = () => { const regions = useRegionsQuery().data ?? []; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx index 61f1782550..29adb4eff2 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Paper, Stack } from '@linode/ui'; +import { Box, Divider, Notice, Paper, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; @@ -7,7 +7,6 @@ import { Checkbox } from 'src/components/Checkbox'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { LinkButton } from 'src/components/LinkButton'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx index a1b6db881e..787ef0d467 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTable.tsx @@ -1,4 +1,4 @@ -import { Box, Stack } from '@linode/ui'; +import { Box, Notice, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useQueryClient } from '@tanstack/react-query'; @@ -6,7 +6,6 @@ import React, { useState } from 'react'; import { useController, useFormContext } from 'react-hook-form'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; -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/Linodes/LinodeEntityDetail.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx index 3addcabeac..953104d016 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { EntityDetail } from 'src/components/EntityDetail/EntityDetail'; -import { Notice } from 'src/components/Notice/Notice'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { getRestrictedResourceText } from 'src/features/Account/utils'; import { notificationCenterContext as _notificationContext } from 'src/features/NotificationCenter/NotificationCenterContext'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/HostMaintenanceError.tsx b/packages/manager/src/features/Linodes/LinodesDetail/HostMaintenanceError.tsx index 9197bf2a67..d81433d6a0 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/HostMaintenanceError.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/HostMaintenanceError.tsx @@ -1,7 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; - export const HostMaintenanceError = () => ( { 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 23951d4edc..3a78d55b03 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 960aed6ed8..7bca294a5a 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/ImageEmptyState.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/ImageEmptyState.tsx @@ -1,8 +1,7 @@ +import { Notice, Paper } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; import type { SxProps, Theme } from '@mui/material/styles'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx index c93992386a..db00147839 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 { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Dialog } from 'src/components/Dialog/Dialog'; 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 a031081ee5..bf473765e0 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 d20ae58c5c..ef0683830c 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,8 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import * as React from 'react'; import { Accordion } from 'src/components/Accordion'; 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 c4a9c1eeb6..fd51eca05c 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 0c3f4c1969..cb9c5c6ef1 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, Paper } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import { useSnackbar } from 'notistack'; import { assoc, clamp, equals, pathOr } from 'ramda'; @@ -7,8 +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 '@linode/ui'; import { usePrevious } from 'src/hooks/usePrevious'; import { useEventsPollingActions } from 'src/queries/events/events'; import { useAllLinodeDisksQuery } from 'src/queries/linodes/disks'; @@ -229,18 +228,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 fdb44a8ea4..098fde3c6d 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 dbc382a18f..c3114d00e6 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 e872cb239d..9a314541d5 100644 --- a/packages/manager/src/features/Managed/MonitorDrawer.tsx +++ b/packages/manager/src/features/Managed/MonitorDrawer.tsx @@ -1,4 +1,4 @@ -import { InputAdornment } from '@linode/ui'; +import { InputAdornment, Notice } from '@linode/ui'; import { createServiceMonitorSchema } from '@linode/validation/lib/managed.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { Formik } from 'formik'; @@ -8,7 +8,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import Select from 'src/components/EnhancedSelect/Select'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import type { diff --git a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx index be63b6a4e0..758f6251cb 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 c08d2727ed..e32e13724b 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx @@ -1,4 +1,4 @@ -import { Box, Divider } from '@linode/ui'; +import { Box, Divider, Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; import { Chip } from 'src/components/Chip'; -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 f715498b02..c6e82c6956 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx @@ -1,4 +1,4 @@ -import { Divider, FormHelperText } from '@linode/ui'; +import { Divider, FormHelperText, Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -7,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; 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 2d851e25e6..e7a82ef831 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx @@ -1,5 +1,4 @@ -import { Stack } from '@linode/ui'; -import { Box, Paper } from '@linode/ui'; +import { Box, Notice, Paper, Stack } from '@linode/ui'; import { useTheme } from '@mui/material'; import useMediaQuery from '@mui/material/useMediaQuery'; import { createLazyRoute } from '@tanstack/react-router'; @@ -25,7 +24,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 { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { SelectFirewallPanel } from 'src/components/SelectFirewallPanel/SelectFirewallPanel'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx index 982963c671..adafe73aa4 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 14ce668e8c..5def42f306 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 ec1772b47c..5b98653ade 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 d2800c937b..4d3f0b058a 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 362a8b21f7..6e60543b31 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 c410769f1d..dd52c4ad66 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx @@ -1,4 +1,4 @@ -import { Paper } from '@linode/ui'; +import { Notice, Paper } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useFormik } from 'formik'; @@ -11,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 { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx index 0c8115d8b5..3364a09a27 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 3adc16b186..93e60b33c1 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 df19e2f4ef..1c595b0567 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 c1ba644e64..dc3080c7ef 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 10299d7462..ffe51b118b 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 27d4b7f299..965414a2fe 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx @@ -1,9 +1,8 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import * as React from 'react'; 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 d5e1f680b5..89621be077 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsAssignLinodesDrawer.tsx @@ -2,14 +2,13 @@ import { PLACEMENT_GROUP_POLICIES, PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; -import { Box, Divider, Stack } from '@linode/ui'; +import { Box, Divider, Notice, Stack } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx index 5ca092f996..9da8bd6be0 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx @@ -1,4 +1,4 @@ -import { Divider, Stack } from '@linode/ui'; +import { Divider, Notice, Stack } from '@linode/ui'; import { createPlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -10,7 +10,6 @@ import { DescriptionList } from 'src/components/DescriptionList/DescriptionList' 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 { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx index 383bbc7409..902bd71064 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 fce4cd920c..27280179d3 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 d5b3489c74..a539181243 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx @@ -2,6 +2,7 @@ import { PLACEMENT_GROUP_POLICIES, PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; +import { Notice, Paper } from '@linode/ui'; import { Box } from '@linode/ui'; import { useTheme } from '@mui/material'; import { styled } from '@mui/material/styles'; @@ -9,8 +10,6 @@ import * as React from 'react'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx index 5b6d526718..6ddd64f475 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.tsx @@ -1,10 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; 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 735d99dc63..ed33610ca1 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx @@ -2,7 +2,7 @@ import { PLACEMENT_GROUP_POLICIES, PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; -import { Divider, Stack } from '@linode/ui'; +import { Divider, Notice, Stack } from '@linode/ui'; import { updatePlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -14,7 +14,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Drawer } from 'src/components/Drawer'; import { NotFound } from 'src/components/NotFound'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { useFormValidateOnChange } from 'src/hooks/useFormValidateOnChange'; import { diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx index 5d41f30142..8b179291dd 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 58a0b8cc93..5ba5c47dcf 100644 --- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx +++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormHelperText } from '@linode/ui'; +import { FormControl, FormHelperText, Notice } from '@linode/ui'; import { useFormik } from 'formik'; import { DateTime } from 'luxon'; import * as React from 'react'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Drawer } from 'src/components/Drawer'; -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 3aba5fb979..5c4e9b2bc7 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 d9cde16e88..7b09373c3b 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/SMSMessaging.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/SMSMessaging.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -7,10 +7,9 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; 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 f0cc13c638..1a8ccc383f 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.styles.ts +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.styles.ts @@ -1,9 +1,8 @@ -import { Paper } from '@linode/ui'; +import { Notice, Paper } 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'; export const StyledRootContainer = styled(Paper, { diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx index 2584b7bd3d..af8c2d769d 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/ConfirmToken.tsx @@ -1,9 +1,8 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; 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 3e9afd06c8..5881375ed7 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx @@ -1,9 +1,8 @@ import { confirmTwoFactor } from '@linode/api-v4/lib/profile'; -import { Divider } from '@linode/ui'; +import { Divider, Notice } from '@linode/ui'; import * as React from 'react'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx index 9dd8382c26..fc5fde7860 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 43c8e8053e..ebb9d98b90 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 { Controller, useForm } from 'react-hook-form'; import { timezones } from 'src/assets/timezones/timezones'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; -import { Notice } from 'src/components/Notice/Notice'; import { useAuthentication } from 'src/hooks/useAuthentication'; import { useMutateProfile, useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx index dc6f213bb8..fb26da9094 100644 --- a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx +++ b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx @@ -1,4 +1,4 @@ -import { Box, FormControl, Paper } from '@linode/ui'; +import { Box, FormControl, Notice, Paper } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; import { equals, lensPath, remove, set } from 'ramda'; @@ -8,7 +8,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { useMutateProfile, useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx b/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx index 5b49daef10..47c8067599 100644 --- a/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/CreateOAuthClientDrawer.tsx @@ -1,4 +1,4 @@ -import { FormControl } from '@linode/ui'; +import { FormControl, Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Checkbox } from 'src/components/Checkbox'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { 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 4f2d4673e5..aa0d637bdf 100644 --- a/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/EditOAuthClientDrawer.tsx @@ -1,4 +1,4 @@ -import { FormControl } from '@linode/ui'; +import { FormControl, Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Checkbox } from 'src/components/Checkbox'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { 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 cca81a2f77..68fac0090c 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 6ea3495672..3694d5705e 100644 --- a/packages/manager/src/features/Profile/Referrals/Referrals.tsx +++ b/packages/manager/src/features/Profile/Referrals/Referrals.tsx @@ -1,4 +1,4 @@ -import { Paper } from '@linode/ui'; +import { Notice, Paper } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; @@ -10,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 { Typography } from 'src/components/Typography'; import { useProfile } from 'src/queries/profile/profile'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx index b845b8a203..3236b37113 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 05a0393ecc..49078d5333 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 6bb1e386a0..8ca79c82a4 100644 --- a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx +++ b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx @@ -1,11 +1,10 @@ -import { Box } from '@linode/ui'; +import { Box, 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 { 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 c5905bb42f..db175a0d27 100644 --- a/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx +++ b/packages/manager/src/features/Profile/Settings/PreferenceEditor.tsx @@ -1,10 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; 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, diff --git a/packages/manager/src/features/Search/SearchLanding.tsx b/packages/manager/src/features/Search/SearchLanding.tsx index 4ed6f58a82..383c50ffec 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 246c633d45..9d549f97ba 100644 --- a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx +++ b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx @@ -1,11 +1,10 @@ import { getStackScript } from '@linode/api-v4/lib/stackscripts'; -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import * as React from 'react'; import { compose } from 'recompose'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { RenderGuard } from 'src/components/RenderGuard'; import { Typography } from 'src/components/Typography'; import { withProfile } from 'src/containers/profile.container'; diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx index e08a0db412..a08edd0ce3 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 0d232b42e5..039c4ce1a6 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 { withProfile } from 'src/containers/profile.container'; import { withQueryClient } from 'src/containers/withQueryClient.container'; diff --git a/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.styles.ts b/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.styles.ts index 296fda0b31..a004081854 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 1101d6b33c..6b749ec1a2 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 64d230bbc8..03263e8bc3 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 2d911c2ae1..b96c0aa0eb 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx @@ -1,10 +1,9 @@ -import { InputLabel } from '@linode/ui'; +import { InputLabel, 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 { Notice } from 'src/components/Notice/Notice'; import { Radio } from 'src/components/Radio/Radio'; import type { UserDefinedField } from '@linode/api-v4/lib/stackscripts'; diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx index 41b7cb642a..b14d90c009 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx @@ -1,9 +1,8 @@ -import { Box, Divider } from '@linode/ui'; +import { Box, Divider, Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Link } from 'react-router-dom'; -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 b6382a79da..c709707ee1 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 383ed47eeb..1fcdedd4ef 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 d09a5484d2..d009c0e262 100644 --- a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx +++ b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx @@ -1,6 +1,6 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { uploadAttachment } from '@linode/api-v4/lib/support'; -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { update } from 'ramda'; import * as React from 'react'; import { Controller, FormProvider, useForm } from 'react-hook-form'; @@ -11,7 +11,6 @@ import { Accordion } from 'src/components/Accordion'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; 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 a41ce5521a..b704b22da5 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 8bad43671f..4bc2481f26 100644 --- a/packages/manager/src/features/Users/UserPermissions.tsx +++ b/packages/manager/src/features/Users/UserPermissions.tsx @@ -4,7 +4,7 @@ import { updateGrants, updateUser, } from '@linode/api-v4/lib/account'; -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { Paper } from '@mui/material'; import Grid from '@mui/material/Unstable_Grid2'; import { enqueueSnackbar } from 'notistack'; @@ -15,7 +15,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; 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 66f379fc05..53220e98ca 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 313ac63afe..0e514bec10 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 8995ec5360..161425ee5c 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx @@ -1,4 +1,4 @@ -import { Paper } from '@linode/ui'; +import { Notice, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -7,7 +7,6 @@ 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 { VPC_GETTING_STARTED_LINK } from 'src/features/VPCs/constants'; import { SubnetContent } from 'src/features/VPCs/VPCCreate/FormComponents/SubnetContent'; import { useCreateVPC } from 'src/hooks/useCreateVPC'; diff --git a/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx b/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx index f22abc2de9..d477be0dad 100644 --- a/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx @@ -1,11 +1,10 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; 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 { 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 0fbc7a4898..d743659cbe 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx @@ -1,10 +1,9 @@ -import { Box, Divider } from '@linode/ui'; +import { Box, Divider, Notice } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; 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 7a53ece025..5cac4973cf 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx @@ -1,5 +1,5 @@ import { appendConfigInterface } from '@linode/api-v4'; -import { Box, FormHelperText } from '@linode/ui'; +import { Box, FormHelperText, Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -11,7 +11,6 @@ import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; 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 bf6245629a..23bf08ab45 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx @@ -1,5 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Stack } from '@linode/ui'; +import { Notice, Stack } from '@linode/ui'; import { FormHelperText } from '@linode/ui'; import { createSubnetSchema } from '@linode/validation'; import * as React from 'react'; @@ -7,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 { useGrants, useProfile } from 'src/queries/profile/profile'; import { useCreateSubnetMutation, useVPCQuery } from 'src/queries/vpcs/vpcs'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx index 28b079c9bb..9dfb64e400 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/SubnetLinodeRow.styles.ts b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts index 066e210571..4e75344d12 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 { WarningIcon } 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'; @@ -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/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx index 8b726a1269..eeda7874cd 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetUnassignLinodesDrawer.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { Stack, Typography } from '@mui/material'; import { useQueryClient } from '@tanstack/react-query'; import { useFormik } from 'formik'; @@ -8,7 +8,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; 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 d8264de1f4..c9034543df 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 b71987020a..6a2d0ffa4b 100644 --- a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx @@ -1,4 +1,4 @@ -import { Box, FormHelperText } from '@linode/ui'; +import { Box, FormHelperText, Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -10,7 +10,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 { 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 1bd690b304..5a8a21b59d 100644 --- a/packages/manager/src/features/Volumes/CloneVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/CloneVolumeDrawer.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { CloneVolumeSchema } from '@linode/validation/lib/volumes.schema'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -8,7 +8,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 cc0db32476..b36575e65b 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 4e1d7d6e18..06cf1444af 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 94865d8de5..84ba1c888d 100644 --- a/packages/manager/src/features/Volumes/EditVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/EditVolumeDrawer.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { UpdateVolumeSchema } from '@linode/validation'; import { useFormik } from 'formik'; import React from 'react'; @@ -8,7 +8,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 550e9afa57..d24e6992bb 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 dfc65ee2a8..4ebd1772e1 100644 --- a/packages/manager/src/features/Volumes/VolumeCreate.tsx +++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx @@ -1,5 +1,4 @@ -import { Stack } from '@linode/ui'; -import { Box, Paper } from '@linode/ui'; +import { Box, Notice, Paper, Stack } from '@linode/ui'; import { CreateVolumeSchema } from '@linode/validation/lib/volumes.schema'; import { useTheme } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; @@ -23,7 +22,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 { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { TextField } from 'src/components/TextField'; import { TooltipIcon } from 'src/components/TooltipIcon'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAddDrawer.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAddDrawer.tsx index cb0c40d646..4973aafbad 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 8aa76a1345..51b4b9e4c0 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 bc07204f6b..ad3a3ae8d9 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Notice } from '@linode/ui'; import { CreateVolumeSchema } from '@linode/validation/lib/volumes.schema'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -13,7 +13,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 ea927d0979..431570f54d 100644 --- a/packages/manager/src/features/components/PlansPanel/DistributedRegionPlanTable.tsx +++ b/packages/manager/src/features/components/PlansPanel/DistributedRegionPlanTable.tsx @@ -1,8 +1,7 @@ -import { Box, Paper } from '@linode/ui'; +import { Box, Notice, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import type { SxProps, Theme } from '@mui/material/styles'; diff --git a/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx b/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx index 35ef6810ec..55044502c6 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 b1201e0a3d..38f54c07f9 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx @@ -1,9 +1,9 @@ +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'; diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx index 422fa0f9a1..5109e2b6c2 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 a839965ee1..c80c5be86b 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 833cd24a11..3cf6cc8a6b 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/.changeset/pr-11174-added-1730757183801.md b/packages/ui/.changeset/pr-11174-added-1730757183801.md new file mode 100644 index 0000000000..13ad8e0ff6 --- /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)) diff --git a/packages/ui/.eslintrc.json b/packages/ui/.eslintrc.json index 3388926d8e..c3e7d4466a 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 0000000000..0103e50c33 --- /dev/null +++ b/packages/ui/src/assets/icons/index.ts @@ -0,0 +1,3 @@ +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/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 0000000000..838008a0b2 --- /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 96% rename from packages/manager/src/components/Notice/Notice.test.tsx rename to packages/ui/src/components/Notice/Notice.test.tsx index e7d536cd90..3e1e343d90 100644 --- a/packages/manager/src/components/Notice/Notice.test.tsx +++ b/packages/ui/src/components/Notice/Notice.test.tsx @@ -1,9 +1,9 @@ import { fireEvent } from '@testing-library/react'; import React from 'react'; -import { renderWithTheme } from 'src/utilities/testHelpers'; - 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', () => { diff --git a/packages/manager/src/components/Notice/Notice.tsx b/packages/ui/src/components/Notice/Notice.tsx similarity index 92% rename from packages/manager/src/components/Notice/Notice.tsx rename to packages/ui/src/components/Notice/Notice.tsx index 55d7950def..a75c8f428b 100644 --- a/packages/manager/src/components/Notice/Notice.tsx +++ b/packages/ui/src/components/Notice/Notice.tsx @@ -1,15 +1,14 @@ import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import Error from 'src/assets/icons/alert.svg'; -import Check from 'src/assets/icons/check.svg'; -import Warning from 'src/assets/icons/warning.svg'; -import { Typography } from 'src/components/Typography'; +import { WarningIcon, AlertIcon as Error, CheckIcon } from '../../assets/icons'; + +import { Typography } from '@mui/material'; import { useStyles } from './Notice.styles'; import type { Grid2Props } from '@mui/material/Unstable_Grid2'; -import type { TypographyProps } from 'src/components/Typography'; +import type { TypographyProps } from '@mui/material'; export type NoticeVariant = | 'error' @@ -181,10 +180,10 @@ export const Notice = (props: NoticeProps) => { > {important && ((variantMap.success && ( - + )) || ((variantMap.warning || variantMap.info) && ( - + )) || (variantMap.error && ( diff --git a/packages/ui/src/components/Notice/index.ts b/packages/ui/src/components/Notice/index.ts new file mode 100644 index 0000000000..c2b2fea9b2 --- /dev/null +++ b/packages/ui/src/components/Notice/index.ts @@ -0,0 +1 @@ +export * from './Notice'; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index d3c290289f..377df45a01 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -8,6 +8,7 @@ export * from './IconButton'; export * from './Input'; export * from './InputAdornment'; export * from './InputLabel'; +export * from './Notice'; export * from './Paper'; export * from './Stack'; export * from './Tooltip'; diff --git a/packages/ui/src/env.d.ts b/packages/ui/src/env.d.ts new file mode 100644 index 0000000000..f36c722bae --- /dev/null +++ b/packages/ui/src/env.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const src: ComponentClass; + export default src; +} diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 952d61ff3b..f43dcafbcf 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,3 +1,4 @@ +export * from './assets'; export * from './components'; export * from './foundations'; export * from './utilities'; diff --git a/packages/ui/src/utilities/testHelpers.tsx b/packages/ui/src/utilities/testHelpers.tsx new file mode 100644 index 0000000000..1fb5537069 --- /dev/null +++ b/packages/ui/src/utilities/testHelpers.tsx @@ -0,0 +1,28 @@ +import { StyledEngineProvider, ThemeProvider } from '@mui/material'; +import { render, RenderResult } from '@testing-library/react'; +import * as React from 'react'; + +import * as themes from '../foundations/themes'; + +interface Options { + theme?: 'dark' | 'light'; +} + +export const wrapWithTheme = (ui: any, options: Options = {}) => ( + + + {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 e42051f8ee..141cd45f9a 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 0a2aa32f9eefca5aba78bce5a19ad8a7be2a846b Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Fri, 8 Nov 2024 17:53:01 +0530 Subject: [PATCH 007/131] change: [M3-7337] - change Linode Details Summary VPC IPv4 Text to Copy Object. (#11172) * change: [M3-7337] - change Linode Details Summary VPC IPv4 Text to Copy Object. * Added changeset: change Linode Details Summary VPC IPv4 Text to Copy Object. * Update changeset description Co-authored-by: Purvesh Makode * remove optional chaining * change Text from "Subnets" to "Subnet" * remove extra borderTop * refactor: [M3-7337] - change Linode Details Summary VPC IPv4 Text to Copy Object * Add descriptive variable name --------- Co-authored-by: Purvesh Makode --- .../pr-11172-changed-1730121782530.md | 5 +++ .../components/EntityDetail/EntityDetail.tsx | 3 +- .../Linodes/LinodeEntityDetail.styles.ts | 41 +++++++++++++++++++ .../Linodes/LinodeEntityDetailBody.tsx | 36 +++++++++++----- 4 files changed, 73 insertions(+), 12 deletions(-) create mode 100644 packages/manager/.changeset/pr-11172-changed-1730121782530.md diff --git a/packages/manager/.changeset/pr-11172-changed-1730121782530.md b/packages/manager/.changeset/pr-11172-changed-1730121782530.md new file mode 100644 index 0000000000..6993a57ddf --- /dev/null +++ b/packages/manager/.changeset/pr-11172-changed-1730121782530.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +Linode details summary VPC IPv4 text to copy object ([#11172](https://github.com/linode/manager/pull/11172)) diff --git a/packages/manager/src/components/EntityDetail/EntityDetail.tsx b/packages/manager/src/components/EntityDetail/EntityDetail.tsx index d019a34c5f..a72f98c7a7 100644 --- a/packages/manager/src/components/EntityDetail/EntityDetail.tsx +++ b/packages/manager/src/components/EntityDetail/EntityDetail.tsx @@ -51,8 +51,7 @@ const GridBody = styled(Grid, { ? undefined : `1px solid ${theme.borderColors.borderTable}`, // @TODO LKE-E: This conditional can be removed when/if the footer is introduced in M3-8348 borderTop: `1px solid ${theme.borderColors.borderTable}`, - paddingBottom: theme.spacing(), - paddingRight: theme.spacing(), + padding: theme.spacing(), })); const GridFooter = styled(Grid, { diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts index 3205fd5973..41dce23f75 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.styles.ts @@ -88,6 +88,47 @@ export const sxLastListItem = { paddingRight: 0, }; +// --------------------------------------------------------------------- +// VPC Label Styles +// --------------------------------------------------------------------- + +export const StyledIPv4Box = styled(Box, { label: 'StyledIPv4Box' })( + ({ theme }) => ({ + '&:hover .copy-tooltip > svg, & .copy-tooltip:focus > svg': { + opacity: 1, + }, + display: 'flex', + [theme.breakpoints.down('md')]: { + margin: theme.spacing(0), + }, + marginLeft: theme.spacing(2), + border: 0, + }) +); + +export const StyledIPv4Label = styled(Box, { label: 'StyledIPv4Label' })( + ({ theme }) => ({ + color: theme.textColors.textAccessTable, + fontFamily: theme.font.bold, + backgroundColor: theme.name === 'light' ? theme.color.grey10 : theme.bg.app, + padding: '10px 24px 10px 10px', + alignContent: 'center', + }) +); + +export const StyledIPv4Item = styled(Box, { label: 'StyledIPv4Item' })( + ({ theme }) => ({ + '& div': { + fontSize: 15, + }, + alignItems: 'center', + backgroundColor: theme.tokens.interaction.Background.Secondary, + display: 'flex', + fontFamily: '"UbuntuMono", monospace, sans-serif', + padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`, + }) +); + export const StyledListItem = styled(Typography, { label: 'StyledTypography' })( ({ theme }) => ({ borderRight: `1px solid ${theme.borderColors.borderTypography}`, diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx index ac5a548093..f6f300ca60 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetailBody.tsx @@ -24,9 +24,14 @@ import { StyledColumnLabelGrid, StyledLabelBox, StyledListItem, + StyledIPv4Label, + StyledIPv4Item, StyledSummaryGrid, StyledVPCBox, + StyledCopyTooltip, + StyledGradientDiv, sxLastListItem, + StyledIPv4Box, } from './LinodeEntityDetail.styles'; import { ipv4TableID } from './LinodesDetail/LinodeNetworking/LinodeIPAddresses'; import { lishLink, sshLink } from './LinodesDetail/utilities'; @@ -40,6 +45,7 @@ import type { } from '@linode/api-v4/lib/linodes/types'; import type { Subnet } from '@linode/api-v4/lib/vpcs'; import type { TypographyProps } from 'src/components/Typography'; +import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; interface LinodeEntityDetailProps { id: number; @@ -253,8 +259,10 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { display: 'flex', flexDirection: 'column', paddingLeft: '8px', + alignItems: 'start', }, }} + alignItems="center" container direction="row" spacing={2} @@ -271,21 +279,29 @@ export const LinodeEntityDetailBody = React.memo((props: BodyProps) => { - + - Subnets: + Subnet: {' '} {getSubnetsString(linodeAssociatedSubnets ?? [])} - - - - VPC IPv4: - {' '} - {configInterfaceWithVPC?.ipv4?.vpc} - - + {configInterfaceWithVPC?.ipv4?.vpc && ( + + + VPC IPv4 + + + + + + + + + )} )} From 27a651cae7574e27c51263aea88cf4c2a29bc848 Mon Sep 17 00:00:00 2001 From: mpolotsk-akamai <157619599+mpolotsk-akamai@users.noreply.github.com> Date: Fri, 8 Nov 2024 18:57:50 +0100 Subject: [PATCH 008/131] feat: [UIE-8193] - Tooltip for Create/Resize Database table (#11223) * feat: [UIE-8193] - Tooltip for Create/Resize Database table * Added changeset: Tooltip for 'Usable Storage' in Create/Resize Database Table * feat: [UIE-8193] - Tooltip context for small screens --- .../pr-11223-added-1730985113933.md | 5 ++ .../src/components/SelectionCard/CardBase.tsx | 18 +++++- .../manager/src/components/TooltipIcon.tsx | 2 +- .../components/PlansPanel/PlanContainer.tsx | 19 +++++- .../PlansPanel/PlanSelectionTable.tsx | 58 ++++++++++++++----- 5 files changed, 86 insertions(+), 16 deletions(-) create mode 100644 packages/manager/.changeset/pr-11223-added-1730985113933.md diff --git a/packages/manager/.changeset/pr-11223-added-1730985113933.md b/packages/manager/.changeset/pr-11223-added-1730985113933.md new file mode 100644 index 0000000000..6e80abad54 --- /dev/null +++ b/packages/manager/.changeset/pr-11223-added-1730985113933.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +Tooltip for 'Usable Storage' in Create/Resize Database Table ([#11223](https://github.com/linode/manager/pull/11223)) diff --git a/packages/manager/src/components/SelectionCard/CardBase.tsx b/packages/manager/src/components/SelectionCard/CardBase.tsx index 09bb450ec6..d30d394369 100644 --- a/packages/manager/src/components/SelectionCard/CardBase.tsx +++ b/packages/manager/src/components/SelectionCard/CardBase.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import { useFlags } from 'src/hooks/useFlags'; + import { CardBaseGrid, CardBaseHeading, @@ -36,6 +38,18 @@ export const CardBase = (props: CardBaseProps) => { sxSubheading, } = props; + const flags = useFlags(); + + const isDatabaseCreateFlow = location.pathname.includes('/databases/create'); + const isDatabaseResizeFlow = + location.pathname.match(/\/databases\/.*\/(\d+\/resize)/)?.[0] === + location.pathname; + + const isDatabaseGA = + !flags.dbaasV2?.beta && + flags.dbaasV2?.enabled && + (isDatabaseCreateFlow || isDatabaseResizeFlow); + const renderSubheadings = subheadings.map((subheading, idx) => { const subHeadingIsString = typeof subheading === 'string'; @@ -46,7 +60,9 @@ export const CardBase = (props: CardBaseProps) => { key={idx} sx={sxSubheading} > - {subheading} + {subHeadingIsString && isDatabaseGA + ? subheading?.replace('Storage', 'Usable Storage') + : subheading} ); }); diff --git a/packages/manager/src/components/TooltipIcon.tsx b/packages/manager/src/components/TooltipIcon.tsx index b5ad277642..24f504d5bb 100644 --- a/packages/manager/src/components/TooltipIcon.tsx +++ b/packages/manager/src/components/TooltipIcon.tsx @@ -11,7 +11,7 @@ import * as React from 'react'; import type { TooltipProps } from '@linode/ui'; import type { SxProps, Theme } from '@mui/material/styles'; -type TooltipIconStatus = +export type TooltipIconStatus = | 'error' | 'help' | 'info' diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx index 38f54c07f9..d0cf1a7231 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx @@ -14,7 +14,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'; - +import type { Theme } from '@mui/material/styles'; export interface PlanContainerProps { allDisabledPlans: PlanWithAvailability[]; currentPlanHeading?: string; @@ -65,6 +65,10 @@ export const PlanContainer = (props: PlanContainerProps) => { const shouldDisplayNoRegionSelectedMessage = !selectedRegionId && !isDatabaseCreateFlow && !isDatabaseResizeFlow; + const isDatabaseGA = + !flags.dbaasV2?.beta && + flags.dbaasV2?.enabled && + (isDatabaseCreateFlow || isDatabaseResizeFlow); interface PlanSelectionDividerTable { header?: string; planFilter?: (plan: PlanWithAvailability) => boolean; @@ -142,6 +146,18 @@ export const PlanContainer = (props: PlanContainerProps) => { return ( + {isCreate && isDatabaseGA && ( + ({ + marginBottom: theme.spacing(2), + marginLeft: theme.spacing(1), + marginTop: theme.spacing(1), + })} + > + Usable storage is smaller than the actual plan storage due to the + overhead from the database platform. + + )} {shouldDisplayNoRegionSelectedMessage ? ( { renderPlanSelection={renderPlanSelection} showNetwork={showNetwork} showTransfer={showTransfer} + showUsableStorage={isDatabaseCreateFlow || isDatabaseResizeFlow} /> ) )} diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx index 4cd06f4a67..e76d0cb9e6 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx @@ -11,6 +11,7 @@ import { PLAN_SELECTION_NO_REGION_SELECTED_MESSAGE } from 'src/utilities/pricing import { StyledTable, StyledTableCell } from './PlanContainer.styles'; import type { PlanWithAvailability } from './types'; +import type { TooltipIconStatus } from 'src/components/TooltipIcon'; interface PlanSelectionFilterOptionsTable { header?: string; @@ -27,6 +28,7 @@ interface PlanSelectionTableProps { shouldDisplayNoRegionSelectedMessage: boolean; showNetwork?: boolean; showTransfer?: boolean; + showUsableStorage?: boolean; } const tableCells = [ @@ -54,6 +56,7 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => { shouldDisplayNoRegionSelectedMessage, showNetwork: shouldShowNetwork, showTransfer: shouldShowTransfer, + showUsableStorage, } = props; const flags = useFlags(); @@ -70,6 +73,29 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => { [plans, filterOptions, flags.gpuv2] ); + const showUsableStorageTooltip = (cellName: string) => + cellName === 'Usable Storage'; + + const showTooltip = ( + status: TooltipIconStatus, + text: JSX.Element | string, + width?: number + ) => { + return ( + + ); + }; return ( { ) { return null; } + if ( + showUsableStorage && + !flags.dbaasV2?.beta && + flags.dbaasV2?.enabled && + cellName === 'Storage' + ) { + cellName = 'Usable Storage'; + } return ( { {isPlanCell && filterOptions?.header ? filterOptions?.header : cellName} - {showTransferTooltip(cellName) && ( - - )} + {showTransferTooltip(cellName) && + showTooltip( + 'help', + 'Some plans do not include bundled network transfer. If the transfer allotment is 0, all outbound network transfer is subject to standard charges.' + )} + {showUsableStorageTooltip(cellName) && + showTooltip( + 'help', + 'Usable storage is smaller than the actual plan storage due to the overhead from the database platform.', + 240 + )} ); })} From f065afd7866132e917c51e57080cf25adcff8f58 Mon Sep 17 00:00:00 2001 From: John Callahan <114753608+jcallahan-akamai@users.noreply.github.com> Date: Fri, 8 Nov 2024 17:03:04 -0500 Subject: [PATCH 009/131] Update PULL_REQUEST_TEMPLATE.md (#11219) --- docs/PULL_REQUEST_TEMPLATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/PULL_REQUEST_TEMPLATE.md b/docs/PULL_REQUEST_TEMPLATE.md index 01333bdab7..d3af3af879 100644 --- a/docs/PULL_REQUEST_TEMPLATE.md +++ b/docs/PULL_REQUEST_TEMPLATE.md @@ -7,7 +7,7 @@ List any change relevant to the reviewer. - ... ## Target release date 🗓️ -Please specify a release date to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed. +Please specify a release date (and environment, if applicable) to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed. ## Preview 📷 **Include a screenshot or screen recording of the change.** From 5fc68391ab37b9cc9b50f33493f683a28b28083b Mon Sep 17 00:00:00 2001 From: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> Date: Fri, 8 Nov 2024 14:17:50 -0800 Subject: [PATCH 010/131] change: [M3-8860] - Update unit testing docs to prefer `userEvent` over `fireEvent` (#11221) * Update 08-testing.md for userEvent * Fix typo * Address feedback; also further clean up linting issues the doc * Fix a bad test that was not following good practices * Added changeset: Update developer docs on unit testing user events --- docs/development-guide/08-testing.md | 45 +++++++++++-------- .../pr-11221-changed-1731086980327.md | 5 +++ .../CopyTooltip/CopyTooltip.test.tsx | 24 +++++----- 3 files changed, 41 insertions(+), 33 deletions(-) create mode 100644 packages/manager/.changeset/pr-11221-changed-1731086980327.md diff --git a/docs/development-guide/08-testing.md b/docs/development-guide/08-testing.md index 4a025ce90f..a97bf29a06 100644 --- a/docs/development-guide/08-testing.md +++ b/docs/development-guide/08-testing.md @@ -6,38 +6,38 @@ The unit tests for Cloud Manager are written in Typescript using the [Vitest](ht To run tests, first build the **api-v4** package: -``` +```shell yarn install:all && yarn workspace @linode/api-v4 build ``` Then you can start the tests: -``` +```shell yarn test ``` Or you can run the tests in watch mode with: -``` +```shell yarn test:watch ``` To run a specific file or files in a directory: -``` +```shell yarn test myFile.test.tsx yarn test src/some-folder ``` Vitest has built-in pattern matching, so you can also do things like run all tests whose filename contains "Linode" with: -``` +```shell yarn test linode ``` To run a test in debug mode, add a `debugger` breakpoint inside one of the test cases, then run: -``` +```shell yarn workspace linode-manager run test:debug ``` @@ -64,31 +64,25 @@ describe("My component", () => { Handling events such as clicks is a little more involved: ```js -import { fireEvent } from "@testing-library/react"; +import { userEvent } from '@testing-library/user-event'; import { renderWithTheme } from "src/utilities/testHelpers"; import Component from "./wherever"; const props = { onClick: vi.fn() }; describe("My component", () => { - it("should have some text", () => { + it("should have some text", async () => { const { getByText } = renderWithTheme(); const button = getByText("Submit"); - fireEvent.click(button); + await userEvent.click(button); expect(props.onClick).toHaveBeenCalled(); }); }); ``` -If, while using the Testing Library, your tests trigger a warning in the console from React ("Warning: An update to Component inside a test was not wrapped in act(...)"), first check out the library author's [blog post](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning) about this. Depending on your situation, you probably will have to `wait` for something in your test: - -```js -import { fireEvent, wait } from '@testing-library/react'; +We recommend using `userEvent` rather than `fireEvent` where possible. This is a [React Testing Library best practice](https://testing-library.com/docs/user-event/intro#differences-from-fireevent), because `userEvent` more accurately simulates user interactions in a browser and makes the test more reliable in catching unintended event handler behavior. -... -await wait(() => fireEvent.click(getByText('Delete'))); -... -``` +If, while using the Testing Library, your tests trigger a warning in the console from React ("Warning: An update to Component inside a test was not wrapped in act(...)"), first check out the library author's [blog post](https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning) about this. Depending on your situation, you probably will have to use [`findBy`](https://testing-library.com/docs/dom-testing-library/api-async/#findby-queries) or [`waitFor`](https://testing-library.com/docs/dom-testing-library/api-async/) for something in your test to ensure asynchronous side-effects have completed. ### Mocking @@ -108,7 +102,9 @@ vi.mock('@linode/api-v4/lib/kubernetes', async () => { Some components, such as our ActionMenu, don't lend themselves well to unit testing (they often have complex DOM structures from MUI and it's hard to target). We have mocks for most of these components in a `__mocks__` directory adjacent to their respective components. To make use of these, just tell Vitest to use the mock: +```js vi.mock('src/components/ActionMenu/ActionMenu'); +``` Any ``s rendered by the test will be simplified versions that are easier to work with. @@ -157,6 +153,7 @@ We use [Cypress](https://cypress.io) for end-to-end testing. Test files are foun * Select a reasonable expiry time (avoid "Never") and make sure that every permission is set to "Read/Write". 3. Set the `MANAGER_OAUTH` environment variable in your `.env` file using your new personal access token. * Example of `.env` addition: + ```shell # Manager OAuth token for Cypress tests: # (The real token will be a 64-digit string of hexadecimals). @@ -174,6 +171,7 @@ We use [Cypress](https://cypress.io) for end-to-end testing. Test files are foun Cloud Manager UI tests can be configured using environment variables, which can be defined in `packages/manager/.env` or specified when running Cypress. ##### Cypress Environment Variables + These environment variables are used by Cypress out-of-the-box to override the default configuration. Cypress exposes many other options that can be configured with environment variables, but the items listed below are particularly relevant for Cloud Manager testing. More information can be found at [docs.cypress.io](https://docs.cypress.io/guides/guides/environment-variables). | Environment Variable | Description | Example | Default | @@ -181,9 +179,11 @@ These environment variables are used by Cypress out-of-the-box to override the d | `CYPRESS_BASE_URL` | URL to Cloud Manager environment for tests | `https://cloud.linode.com` | `http://localhost:3000` | ##### Cloud Manager-specific Environment Variables + These environment variables are specific to Cloud Manager UI tests. They can be distinguished from out-of-the-box Cypress environment variables by their `CY_TEST_` prefix. ###### General + Environment variables related to the general operation of the Cloud Manager Cypress tests. | Environment Variable | Description | Example | Default | @@ -192,6 +192,7 @@ Environment variables related to the general operation of the Cloud Manager Cypr | `CY_TEST_TAGS` | Query identifying tests that should run by specifying allowed and disallowed tags. | `method:e2e` | Unset; all tests run by default | ###### Overriding Behavior + These environment variables can be used to override some behaviors of Cloud Manager's UI tests. This can be useful when testing Cloud Manager for nonstandard or work-in-progress functionality. | Environment Variable | Description | Example | Default | @@ -200,6 +201,7 @@ These environment variables can be used to override some behaviors of Cloud Mana | `CY_TEST_FEATURE_FLAGS` | JSON string containing feature flag data | `{}` | Unset; feature flag data is not overridden | ###### Run Splitting + These environment variables facilitate splitting the Cypress run between multiple runners without the use of any third party services. This can be useful for improving Cypress test performance in some circumstances. For additional performance gains, an optional test weights file can be specified using `CY_TEST_SPLIT_RUN_WEIGHTS` (see `CY_TEST_GENWEIGHTS` to generate test weights). | Environment Variable | Description | Example | Default | @@ -210,6 +212,7 @@ These environment variables facilitate splitting the Cypress run between multipl | `CY_TEST_SPLIT_RUN_WEIGHTS` | Path to test weights file | `./weights.json` | Unset; disabled by default | ###### Development, Logging, and Reporting + Environment variables related to Cypress logging and reporting, as well as report generation. | Environment Variable | Description | Example | Default | @@ -222,6 +225,7 @@ Environment variables related to Cypress logging and reporting, as well as repor | `CY_TEST_GENWEIGHTS` | Generate and output test weights to the given path | `./weights.json` | Unset; disabled by default | ###### Performance + Environment variables that can be used to improve test performance in some scenarios. | Environment Variable | Description | Example | Default | @@ -233,6 +237,7 @@ Environment variables that can be used to improve test performance in some scena 1. Look here for [Cypress Best Practices](https://docs.cypress.io/guides/references/best-practices) 2. Test Example: + ```tsx /* this test will not pass on cloud manager. it is only intended to show correct test structure, syntax, @@ -293,13 +298,15 @@ Environment variables that can be used to improve test performance in some scena }); }); ``` + 3. How to use intercepts: + ```tsx // stub response syntax: cy.intercept('POST', ‘/path’, {response}) or cy.intercept(‘/path’, (req) => { req.reply({response})}).as('something'); - // edit and end response syntax: + // edit and end response syntax: cy.intercept('GET', ‘/path’, (req) => { req.send({edit: something})}).as('something'); - // edit request syntax: + // edit request syntax: cy.intercept('POST', ‘/path’, (req) => { req.body.storyName = 'some name'; req.continue().as('something'); // use alias syntax: diff --git a/packages/manager/.changeset/pr-11221-changed-1731086980327.md b/packages/manager/.changeset/pr-11221-changed-1731086980327.md new file mode 100644 index 0000000000..5e42e2805a --- /dev/null +++ b/packages/manager/.changeset/pr-11221-changed-1731086980327.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +Update developer docs on unit testing user events ([#11221](https://github.com/linode/manager/pull/11221)) diff --git a/packages/manager/src/components/CopyTooltip/CopyTooltip.test.tsx b/packages/manager/src/components/CopyTooltip/CopyTooltip.test.tsx index e18c0dc546..d90b014d13 100644 --- a/packages/manager/src/components/CopyTooltip/CopyTooltip.test.tsx +++ b/packages/manager/src/components/CopyTooltip/CopyTooltip.test.tsx @@ -1,4 +1,3 @@ -import { act, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import * as React from 'react'; @@ -11,32 +10,29 @@ import type { CopyTooltipProps } from './CopyTooltip'; const mockText = 'Hello world'; const defaultProps: CopyTooltipProps = { + onClickCallback: vi.fn(), text: mockText, }; describe('CopyTooltip', () => { it('should render the copy icon button and tooltip', async () => { - const { getByLabelText, getByRole } = renderWithTheme( + const { findByRole, getByLabelText } = renderWithTheme( ); const copyIconButton = getByLabelText(`Copy ${mockText} to clipboard`); - await act(() => userEvent.hover(copyIconButton)); + await userEvent.hover(copyIconButton); - await waitFor(() => { - const copyTooltip = getByRole('tooltip'); - expect(copyTooltip).toBeInTheDocument(); - expect(copyTooltip).toHaveTextContent('Copy'); - }); + const copyTooltip = await findByRole('tooltip'); + expect(copyTooltip).toBeInTheDocument(); + expect(copyTooltip).toHaveTextContent('Copy'); await userEvent.click(copyIconButton); - await waitFor(() => { - const copiedTooltip = getByRole('tooltip', {}); - expect(copiedTooltip).toBeInTheDocument(); - expect(copiedTooltip).toHaveTextContent('Copied!'); - }); + const copiedTooltip = await findByRole('tooltip'); + expect(copiedTooltip).toBeInTheDocument(); + expect(copiedTooltip).toHaveTextContent('Copied!'); }); it('should render text with the copyableText property', async () => { @@ -80,7 +76,7 @@ describe('CopyTooltip', () => { expect(getByText('•••••••••••')).toBeVisible(); expect(queryByText(mockText)).toBeNull(); - await act(() => userEvent.click(visibilityToggle)); + await userEvent.click(visibilityToggle); // Text should be unmasked expect(getByText('Hello world')).toBeVisible(); From abbedaf110ceb15edf6460e7ba304d096cca590e Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Mon, 11 Nov 2024 16:12:23 +0530 Subject: [PATCH 011/131] feat: [M3-8665] - add option to copy token in LKE details page. (#11179) * feat: [M3-8665] - add option to copy token in LKE details page. * Added changeset: option to copy token in LKE details page * Change the "Copy Token" button to use asynchronous functionality * remove extra styling * refactor: [M3-8665] - add option to copy token in LKE details page. * Change cypress test for LKE update spec --- .../pr-11179-added-1730201665174.md | 5 ++ .../e2e/core/kubernetes/lke-update.spec.ts | 2 +- .../KubeConfigDisplay.tsx | 48 ++++++++++++++++++- 3 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 packages/manager/.changeset/pr-11179-added-1730201665174.md diff --git a/packages/manager/.changeset/pr-11179-added-1730201665174.md b/packages/manager/.changeset/pr-11179-added-1730201665174.md new file mode 100644 index 0000000000..6823f5d4ba --- /dev/null +++ b/packages/manager/.changeset/pr-11179-added-1730201665174.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +option to copy token in LKE details page ([#11179](https://github.com/linode/manager/pull/11179)) diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts index 7c20f14834..09e600eb98 100644 --- a/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts +++ b/packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts @@ -730,7 +730,7 @@ describe('LKE cluster updates', () => { cy.wait(['@getCluster', '@getNodePools', '@getVersions']); // Click "Reset" button, proceed through confirmation dialog. - cy.findByText('Reset').should('be.visible').click(); + cy.findByText('Reset').should('be.visible').click({ force: true }); ui.dialog .findByTitle('Reset Cluster Kubeconfig?') .should('be.visible') diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx index 278ed3bfb2..2a762da39b 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx @@ -6,6 +6,7 @@ import { makeStyles } from 'tss-react/mui'; import DetailsIcon from 'src/assets/icons/code-file.svg'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; import ResetIcon from 'src/assets/icons/reset.svg'; +import CopyIcon from 'src/assets/icons/copy.svg'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; import { Typography } from 'src/components/Typography'; import { @@ -14,8 +15,11 @@ import { } from 'src/queries/kubernetes'; import { downloadFile } from 'src/utilities/downloadFile'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import copy from 'copy-to-clipboard'; +import { CircleProgress } from 'src/components/CircleProgress'; import type { Theme } from '@mui/material/styles'; +import { APIError } from '@linode/api-v4'; interface Props { clusterId: number; @@ -101,7 +105,30 @@ export const KubeConfigDisplay = (props: Props) => { const { enqueueSnackbar } = useSnackbar(); const { classes, cx } = useStyles(); - const { refetch } = useKubenetesKubeConfigQuery(clusterId); + const { isFetching, refetch: getKubeConfig } = useKubenetesKubeConfigQuery( + clusterId, + false + ); + + const onCopyToken = async () => { + try { + const { data } = await getKubeConfig(); + const token = data && data.match(/token:\s*(\S+)/); + if (token && token[1]) { + copy(token[1]); + } else { + enqueueSnackbar({ + message: 'Unable to find token within the Kubeconfig', + variant: 'error', + }); + } + } catch (error) { + enqueueSnackbar({ + message: (error as APIError[])[0].reason, + variant: 'error', + }); + } + }; const { data: endpoints, @@ -111,7 +138,7 @@ export const KubeConfigDisplay = (props: Props) => { const downloadKubeConfig = async () => { try { - const { data } = await refetch(); + const { data } = await getKubeConfig(); if (data) { downloadFile(`${clusterLabel}-kubeconfig.yaml`, data); @@ -168,6 +195,23 @@ export const KubeConfigDisplay = (props: Props) => { View + + {isFetching ? ( + + ) : ( + + )} + + Copy Token + + setResetKubeConfigDialogOpen(true)} From 3450d7c2de653195e71c652e7d9ac98910f3e6f2 Mon Sep 17 00:00:00 2001 From: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> Date: Tue, 12 Nov 2024 13:55:44 -0800 Subject: [PATCH 012/131] change: [M3-8857] - Update PULL_REQUEST_TEMPLATE (Part 2) (#11236) * Make updates discussed to PR template during retro * Add changeset --- docs/PULL_REQUEST_TEMPLATE.md | 59 +++++++++++++------ .../pr-11236-tech-stories-1731104032752.md | 5 ++ 2 files changed, 45 insertions(+), 19 deletions(-) create mode 100644 packages/manager/.changeset/pr-11236-tech-stories-1731104032752.md diff --git a/docs/PULL_REQUEST_TEMPLATE.md b/docs/PULL_REQUEST_TEMPLATE.md index d3af3af879..e6603ee17f 100644 --- a/docs/PULL_REQUEST_TEMPLATE.md +++ b/docs/PULL_REQUEST_TEMPLATE.md @@ -1,15 +1,20 @@ ## Description 📝 + Highlight the Pull Request's context and intentions. ## Changes 🔄 -List any change relevant to the reviewer. + +List any change(s) relevant to the reviewer. + - ... - ... ## Target release date 🗓️ + Please specify a release date (and environment, if applicable) to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed. ## Preview 📷 + **Include a screenshot or screen recording of the change.** :lock: Use the [Mask Sensitive Data](https://cloud.linode.com/profile/settings) setting for security. @@ -23,38 +28,53 @@ Please specify a release date (and environment, if applicable) to guarantee time ## How to test 🧪 ### Prerequisites + (How to setup test environment) + - ... - ... ### Reproduction steps + (How to reproduce the issue, if applicable) -- ... -- ... + +- [ ] ... +- [ ] ... ### Verification steps + (How to verify changes) -- ... -- ... -## As an Author I have considered 🤔 +- [ ] ... +- [ ] ... + +## As an Author, I have considered 🤔 -*Check all that apply* +- 👀 Doing a self review +- ❔ Our [contribution guidelines](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md) +- 🤏 Splitting feature into small PRs +- ➕ Adding a [changeset](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md#writing-a-changeset) +- 🧪 Providing/improving test coverage +- 🔐 Removing all sensitive information from the code and PR description +- 🚩 Using a feature flag to protect the release +- 👣 Providing comprehensive reproduction steps +- 📑 Providing or updating our documentation +- 🕛 Scheduling a pair reviewing session +- 📱 Providing mobile support +- ♿ Providing accessibility support -- [ ] 👀 Doing a self review -- [ ] ❔ Our [contribution guidelines](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md) -- [ ] 🤏 Splitting feature into small PRs -- [ ] ➕ Adding a [changeset](https://github.com/linode/manager/blob/develop/docs/CONTRIBUTING.md#writing-a-changeset) -- [ ] 🧪 Providing/Improving test coverage -- [ ] 🔐 Removing all sensitive information from the code and PR description -- [ ] 🚩 Using a feature flag to protect the release -- [ ] 👣 Providing comprehensive reproduction steps -- [ ] 📑 Providing or updating our documentation -- [ ] 🕛 Scheduling a pair reviewing session -- [ ] 📱 Providing mobile support -- [ ] ♿ Providing accessibility support +
+ +- [ ] I have read and considered all applicable items listed above. + +## As an Author, before moving this PR from Draft to Open, I confirmed ✅ + +- [ ] All unit tests are passing +- [ ] TypeScript compilation succeeded without errors +- [ ] Code passes all linting rules --- + ## Commit message and pull request title format standards > **Note**: Remove this section before opening the pull request @@ -63,6 +83,7 @@ Please specify a release date (and environment, if applicable) to guarantee time `: [JIRA-ticket-number] - ` **Commit Types:** + - `feat`: New feature for the user (not a part of the code, or ci, ...). - `fix`: Bugfix for the user (not a fix to build something, ...). - `change`: Modifying an existing visual UI instance. Such as a component or a feature. diff --git a/packages/manager/.changeset/pr-11236-tech-stories-1731104032752.md b/packages/manager/.changeset/pr-11236-tech-stories-1731104032752.md new file mode 100644 index 0000000000..48da6c5bae --- /dev/null +++ b/packages/manager/.changeset/pr-11236-tech-stories-1731104032752.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +Update PULL_REQUEST_TEMPLATE ([#11219](https://github.com/linode/manager/pull/11219), [#11236](https://github.com/linode/manager/pull/11236)) From 292ae6cab1b28172e3a18715771dbaff4e3094b7 Mon Sep 17 00:00:00 2001 From: Purvesh Makode Date: Wed, 13 Nov 2024 19:55:39 +0530 Subject: [PATCH 013/131] refactor: [M3-8900] - Move `RadioGroup` to `@linode/ui` package (#11254) * Move RadioGroup to ui package * Added changeset: Move `RadioGroup` from `manager` to `ui` package --- packages/manager/src/components/FormLabel.stories.tsx | 3 +-- packages/manager/src/components/ModeSelect/ModeSelect.tsx | 4 ++-- packages/manager/src/components/Radio/Radio.stories.tsx | 3 +-- .../DatabaseCreate/DatabaseCreateAccessControls.tsx | 3 +-- .../Databases/DatabaseCreate/DatabaseNodeSelector.tsx | 3 +-- .../DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx | 3 +-- packages/manager/src/features/Domains/CloneDomainDrawer.tsx | 3 +-- .../src/features/Domains/CreateDomain/CreateDomain.tsx | 3 +-- packages/manager/src/features/Domains/EditDomainDrawer.tsx | 3 +-- .../Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx | 3 +-- .../Firewalls/FirewallLanding/CreateFirewallDrawer.tsx | 3 +-- .../Kubernetes/CreateCluster/ApplicationPlatform.tsx | 3 +-- .../src/features/Kubernetes/CreateCluster/HAControlPlane.tsx | 3 +-- .../StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx | 3 +-- .../LinodesDetail/LinodeConfigs/LinodeConfigDialog.styles.ts | 3 +-- .../Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx | 3 +-- .../LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx | 3 +-- .../PlacementGroups/PlacementGroupPolicyRadioGroup.tsx | 3 +-- packages/manager/src/features/Profile/Settings/Settings.tsx | 3 +-- .../src/features/Volumes/VolumeDrawer/ModeSelection.tsx | 2 +- packages/ui/.changeset/pr-11254-added-1731501211100.md | 5 +++++ .../src/components/RadioGroup}/RadioGroup.tsx | 0 packages/ui/src/components/RadioGroup/index.ts | 1 + packages/ui/src/components/index.ts | 1 + 24 files changed, 28 insertions(+), 39 deletions(-) create mode 100644 packages/ui/.changeset/pr-11254-added-1731501211100.md rename packages/{manager/src/components => ui/src/components/RadioGroup}/RadioGroup.tsx (100%) create mode 100644 packages/ui/src/components/RadioGroup/index.ts diff --git a/packages/manager/src/components/FormLabel.stories.tsx b/packages/manager/src/components/FormLabel.stories.tsx index b5167d53b5..b7af555aaa 100644 --- a/packages/manager/src/components/FormLabel.stories.tsx +++ b/packages/manager/src/components/FormLabel.stories.tsx @@ -1,10 +1,9 @@ -import { FormControl } from '@linode/ui'; +import { FormControl, RadioGroup } from '@linode/ui'; import React from 'react'; import { FormControlLabel } from './FormControlLabel'; import { FormLabel } from './FormLabel'; import { Radio } from './Radio/Radio'; -import { RadioGroup } from './RadioGroup'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/manager/src/components/ModeSelect/ModeSelect.tsx b/packages/manager/src/components/ModeSelect/ModeSelect.tsx index 4b8d8167b4..0d6f6a2e4b 100644 --- a/packages/manager/src/components/ModeSelect/ModeSelect.tsx +++ b/packages/manager/src/components/ModeSelect/ModeSelect.tsx @@ -1,8 +1,8 @@ +import { RadioGroup } from '@linode/ui'; import * as React from 'react'; -import { Radio } from 'src/components/Radio/Radio'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { RadioGroup } from 'src/components/RadioGroup'; +import { Radio } from 'src/components/Radio/Radio'; export interface Mode { label: string; diff --git a/packages/manager/src/components/Radio/Radio.stories.tsx b/packages/manager/src/components/Radio/Radio.stories.tsx index d5b355a3d1..2237d31bd6 100644 --- a/packages/manager/src/components/Radio/Radio.stories.tsx +++ b/packages/manager/src/components/Radio/Radio.stories.tsx @@ -1,8 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, RadioGroup } from '@linode/ui'; import React from 'react'; import { FormControlLabel } from '../FormControlLabel'; -import { RadioGroup } from '../RadioGroup'; import { Radio } from './Radio'; import type { RadioProps } from './Radio'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx index 6d62c66c17..4d0873efd6 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx @@ -1,3 +1,4 @@ +import { Notice, RadioGroup } from '@linode/ui'; import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; @@ -8,14 +9,12 @@ import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; 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 { useIsDatabasesEnabled } from '../utilities'; import type { APIError } from '@linode/api-v4/lib/types'; -import { Notice } from '@linode/ui'; const useStyles = makeStyles()((theme: Theme) => ({ container: { diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx index 29f03cf8ff..9bd717bcd8 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx @@ -1,9 +1,8 @@ -import { FormControl, Notice } from '@linode/ui'; +import { FormControl, Notice, RadioGroup } from '@linode/ui'; import React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { Typography } from 'src/components/Typography'; import { StyledChip } from 'src/features/components/PlansPanel/PlanSelection.styles'; import { determineInitialPlanCategoryTab } from 'src/features/components/PlansPanel/utils'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx index 5b1cf26408..a6076d5a62 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx @@ -1,4 +1,4 @@ -import { FormControl, Notice } from '@linode/ui'; +import { FormControl, Notice, RadioGroup } from '@linode/ui'; import { useFormik } from 'formik'; import { DateTime } from 'luxon'; import { useSnackbar } from 'notistack'; @@ -10,7 +10,6 @@ import { Button } from 'src/components/Button/Button'; import Select from 'src/components/EnhancedSelect/Select'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { useDatabaseMutation } from 'src/queries/databases/databases'; diff --git a/packages/manager/src/features/Domains/CloneDomainDrawer.tsx b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx index 0192c19a34..6fe4f7fc88 100644 --- a/packages/manager/src/features/Domains/CloneDomainDrawer.tsx +++ b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx @@ -1,4 +1,4 @@ -import { Notice } from '@linode/ui'; +import { Notice, RadioGroup } from '@linode/ui'; import { useFormik } from 'formik'; import React from 'react'; import { useHistory } from 'react-router-dom'; @@ -7,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TextField } from 'src/components/TextField'; import { useCloneDomainMutation } from 'src/queries/domains'; import { useGrants, useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx index 1e346477f6..aacb78a4c2 100644 --- a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx +++ b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx @@ -1,4 +1,4 @@ -import { FormHelperText, Notice, Paper } from '@linode/ui'; +import { FormHelperText, Notice, Paper, RadioGroup } from '@linode/ui'; import { createDomainSchema } from '@linode/validation/lib/domains.schema'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -15,7 +15,6 @@ import { FormControlLabel } from 'src/components/FormControlLabel'; import { LandingHeader } from 'src/components/LandingHeader'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TextField } from 'src/components/TextField'; import { reportException } from 'src/exceptionReporting'; import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect'; diff --git a/packages/manager/src/features/Domains/EditDomainDrawer.tsx b/packages/manager/src/features/Domains/EditDomainDrawer.tsx index c664e3fb74..5dac28fbfb 100644 --- a/packages/manager/src/features/Domains/EditDomainDrawer.tsx +++ b/packages/manager/src/features/Domains/EditDomainDrawer.tsx @@ -1,4 +1,4 @@ -import { Notice } from '@linode/ui'; +import { Notice, RadioGroup } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -7,7 +7,6 @@ import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; import { useUpdateDomainMutation } from 'src/queries/domains'; diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx index 3a9ac80fcf..e007423e63 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx @@ -1,4 +1,4 @@ -import { Notice } from '@linode/ui'; +import { Notice, RadioGroup } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -7,7 +7,6 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx index 093f9592f8..bfa4e51be2 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ -import { Box, Notice } from '@linode/ui'; +import { Box, Notice, RadioGroup } from '@linode/ui'; import { CreateFirewallSchema } from '@linode/validation/lib/firewalls.schema'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -12,7 +12,6 @@ import { ErrorMessage } from 'src/components/ErrorMessage'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { FIREWALL_LIMITS_CONSIDERATIONS_LINK } from 'src/constants'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx index a80fb99498..23db736912 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx @@ -1,4 +1,4 @@ -import { Box, FormControl } from '@linode/ui'; +import { Box, FormControl, RadioGroup } from '@linode/ui'; import * as React from 'react'; import { Chip } from 'src/components/Chip'; @@ -6,7 +6,6 @@ import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; import { Link } from 'src/components/Link'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { Typography } from 'src/components/Typography'; export interface APLProps { diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx index 789ecf75a7..a231585fca 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx @@ -1,4 +1,4 @@ -import { Box, FormControl, Notice } from '@linode/ui'; +import { Box, FormControl, Notice, RadioGroup } from '@linode/ui'; import { FormLabel } from '@mui/material'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx index 267c7081b4..4de7f8401a 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx @@ -1,4 +1,4 @@ -import { Divider, FormControl, Stack } from '@linode/ui'; +import { Divider, FormControl, RadioGroup, Stack } from '@linode/ui'; import React from 'react'; import { useController, useFormContext } from 'react-hook-form'; @@ -8,7 +8,6 @@ import { FormLabel } from 'src/components/FormLabel'; import { Link } from 'src/components/Link'; import PasswordInput from 'src/components/PasswordInput/PasswordInput'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.styles.ts b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.styles.ts index d5de5b9506..6280805fb1 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.styles.ts +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.styles.ts @@ -1,9 +1,8 @@ -import { Divider, FormControl } from '@linode/ui'; +import { Divider, FormControl, RadioGroup } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormGroup } from 'src/components/FormGroup'; -import { RadioGroup } from 'src/components/RadioGroup'; const formGroupStyling = { '&.MuiFormGroup-root[role="radiogroup"]': { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx index 11f56c3cf7..00c6d28e67 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Notice, Stack, Tooltip } from '@linode/ui'; +import { Box, Divider, Notice, RadioGroup, Stack, Tooltip } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -7,7 +7,6 @@ import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { Typography } from 'src/components/Typography'; import { useAllocateIPMutation, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx index 7e4dad7cf5..508d1ecdb1 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx @@ -1,11 +1,10 @@ -import { Box, Divider, FormControl } from '@linode/ui'; +import { Box, Divider, FormControl, RadioGroup } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { capitalize } from 'src/utilities/capitalize'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx index 965414a2fe..8301a5bcc7 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx @@ -1,10 +1,9 @@ -import { Box, Notice } from '@linode/ui'; +import { Box, Notice, RadioGroup } from '@linode/ui'; import * as React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Profile/Settings/Settings.tsx b/packages/manager/src/features/Profile/Settings/Settings.tsx index c355262f83..36722ffdf1 100644 --- a/packages/manager/src/features/Profile/Settings/Settings.tsx +++ b/packages/manager/src/features/Profile/Settings/Settings.tsx @@ -1,4 +1,4 @@ -import { Paper, Stack } from '@linode/ui'; +import { Paper, RadioGroup, Stack } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; @@ -7,7 +7,6 @@ import { Code } from 'src/components/Code/Code'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/ModeSelection.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/ModeSelection.tsx index 9b36c48239..972817dbec 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/ModeSelection.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/ModeSelection.tsx @@ -1,8 +1,8 @@ +import { RadioGroup } from '@linode/ui'; import * as React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Radio } from 'src/components/Radio/Radio'; -import { RadioGroup } from 'src/components/RadioGroup'; type Mode = 'attach' | 'create'; diff --git a/packages/ui/.changeset/pr-11254-added-1731501211100.md b/packages/ui/.changeset/pr-11254-added-1731501211100.md new file mode 100644 index 0000000000..6db7363f8e --- /dev/null +++ b/packages/ui/.changeset/pr-11254-added-1731501211100.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +Move `RadioGroup` from `manager` to `ui` package ([#11254](https://github.com/linode/manager/pull/11254)) diff --git a/packages/manager/src/components/RadioGroup.tsx b/packages/ui/src/components/RadioGroup/RadioGroup.tsx similarity index 100% rename from packages/manager/src/components/RadioGroup.tsx rename to packages/ui/src/components/RadioGroup/RadioGroup.tsx diff --git a/packages/ui/src/components/RadioGroup/index.ts b/packages/ui/src/components/RadioGroup/index.ts new file mode 100644 index 0000000000..ad083eb488 --- /dev/null +++ b/packages/ui/src/components/RadioGroup/index.ts @@ -0,0 +1 @@ +export * from './RadioGroup'; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 377df45a01..99c1cd89b7 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -10,6 +10,7 @@ export * from './InputAdornment'; export * from './InputLabel'; export * from './Notice'; export * from './Paper'; +export * from './RadioGroup'; export * from './Stack'; export * from './Tooltip'; export * from './VisibilityTooltip'; From 0f5ae7e4856b26c7a56f316679cbc1c6d537b9dc Mon Sep 17 00:00:00 2001 From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com> Date: Wed, 13 Nov 2024 11:06:49 -0500 Subject: [PATCH 014/131] test: [M3-8890] - Fix flaky DBaaS resize test related to recent factory changes (#11238) * Set DBaaS resize test mock database instance platform to `'rdbms-legacy'` * Added changeset: Fix DBaaS resize tests that fail on first attempt and succeed on second --- packages/manager/.changeset/pr-11238-tests-1731115121832.md | 5 +++++ .../cypress/e2e/core/databases/resize-database.spec.ts | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 packages/manager/.changeset/pr-11238-tests-1731115121832.md diff --git a/packages/manager/.changeset/pr-11238-tests-1731115121832.md b/packages/manager/.changeset/pr-11238-tests-1731115121832.md new file mode 100644 index 0000000000..e7c775bff4 --- /dev/null +++ b/packages/manager/.changeset/pr-11238-tests-1731115121832.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tests +--- + +Fix DBaaS resize tests that fail on first attempt and succeed on second ([#11238](https://github.com/linode/manager/pull/11238)) diff --git a/packages/manager/cypress/e2e/core/databases/resize-database.spec.ts b/packages/manager/cypress/e2e/core/databases/resize-database.spec.ts index efeb39df9a..303aac90f9 100644 --- a/packages/manager/cypress/e2e/core/databases/resize-database.spec.ts +++ b/packages/manager/cypress/e2e/core/databases/resize-database.spec.ts @@ -50,7 +50,7 @@ const resizeDatabase = (initialLabel: string) => { describe('Resizing existing clusters', () => { databaseConfigurationsResize.forEach( (configuration: databaseClusterConfiguration) => { - describe(`Resizes a ${configuration.linodeType} ${configuration.engine} v${configuration.version}.x ${configuration.clusterSize}-node cluster`, () => { + describe(`Resizes a ${configuration.linodeType} ${configuration.engine} v${configuration.version}.x ${configuration.clusterSize}-node cluster (legacy DBaaS)`, () => { /* * - Tests active database resize UI flows using mocked data. * - Confirms that users can resize an existing database. @@ -70,6 +70,7 @@ describe('Resizing existing clusters', () => { cluster_size: 3, status: 'active', allow_list: [allowedIp], + platform: 'rdbms-legacy', }); // Mock account to ensure 'Managed Databases' capability. From 9209bc24366de0c18919e4667ce4c577431095a9 Mon Sep 17 00:00:00 2001 From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com> Date: Wed, 13 Nov 2024 12:11:22 -0500 Subject: [PATCH 015/131] test: [M3-8430] - Mock disable OBJ Gen 2 flags for existing OBJ Cypress tests (#11191) * update existing obj cypress tests to mock obj gen 2 flags as disabled * update access-key spec * Added changeset: Mock disable OBJ Gen 2 flags for existing OBJ Cypress tests --- .../.changeset/pr-11191-tests-1730403446066.md | 5 +++++ .../e2e/core/objectStorage/access-key.e2e.spec.ts | 8 ++++++-- .../e2e/core/objectStorage/access-keys.smoke.spec.ts | 9 ++++++--- .../core/objectStorage/enable-object-storage.spec.ts | 3 ++- .../core/objectStorage/object-storage.e2e.spec.ts | 3 ++- .../core/objectStorage/object-storage.smoke.spec.ts | 12 ++++++++---- 6 files changed, 29 insertions(+), 11 deletions(-) create mode 100644 packages/manager/.changeset/pr-11191-tests-1730403446066.md diff --git a/packages/manager/.changeset/pr-11191-tests-1730403446066.md b/packages/manager/.changeset/pr-11191-tests-1730403446066.md new file mode 100644 index 0000000000..61d61de165 --- /dev/null +++ b/packages/manager/.changeset/pr-11191-tests-1730403446066.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tests +--- + +Mock disable OBJ Gen 2 flags for existing OBJ Cypress tests ([#11191](https://github.com/linode/manager/pull/11191)) diff --git a/packages/manager/cypress/e2e/core/objectStorage/access-key.e2e.spec.ts b/packages/manager/cypress/e2e/core/objectStorage/access-key.e2e.spec.ts index 17fda30faa..07ca420e56 100644 --- a/packages/manager/cypress/e2e/core/objectStorage/access-key.e2e.spec.ts +++ b/packages/manager/cypress/e2e/core/objectStorage/access-key.e2e.spec.ts @@ -38,9 +38,10 @@ describe('object storage access key end-to-end tests', () => { interceptGetAccessKeys().as('getKeys'); interceptCreateAccessKey().as('createKey'); - mockGetAccount(accountFactory.build({ capabilities: [] })); + mockGetAccount(accountFactory.build({ capabilities: ['Object Storage'] })); mockAppendFeatureFlags({ objMultiCluster: false, + objectStorageGen2: { enabled: false }, }); cy.visitWithLogin('/object-storage/access-keys'); @@ -132,9 +133,12 @@ describe('object storage access key end-to-end tests', () => { ).then(() => { const keyLabel = randomLabel(); - mockGetAccount(accountFactory.build({ capabilities: [] })); + mockGetAccount( + accountFactory.build({ capabilities: ['Object Storage'] }) + ); mockAppendFeatureFlags({ objMultiCluster: false, + objectStorageGen2: { enabled: false }, }); interceptGetAccessKeys().as('getKeys'); diff --git a/packages/manager/cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts b/packages/manager/cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts index 3182a4c5be..8109717608 100644 --- a/packages/manager/cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts +++ b/packages/manager/cypress/e2e/core/objectStorage/access-keys.smoke.spec.ts @@ -42,9 +42,10 @@ describe('object storage access keys smoke tests', () => { secret_key: randomString(39), }); - mockGetAccount(accountFactory.build({ capabilities: [] })); + mockGetAccount(accountFactory.build({ capabilities: ['Object Storage'] })); mockAppendFeatureFlags({ objMultiCluster: false, + objectStorageGen2: { enabled: false }, }); mockGetAccessKeys([]).as('getKeys'); @@ -113,9 +114,10 @@ describe('object storage access keys smoke tests', () => { secret_key: randomString(39), }); - mockGetAccount(accountFactory.build({ capabilities: [] })); + mockGetAccount(accountFactory.build({ capabilities: ['Object Storage'] })); mockAppendFeatureFlags({ objMultiCluster: false, + objectStorageGen2: { enabled: false }, }); // Mock initial GET request to include an access key. @@ -162,11 +164,12 @@ describe('object storage access keys smoke tests', () => { beforeEach(() => { mockGetAccount( accountFactory.build({ - capabilities: ['Object Storage Access Key Regions'], + capabilities: ['Object Storage', 'Object Storage Access Key Regions'], }) ); mockAppendFeatureFlags({ objMultiCluster: true, + objectStorageGen2: { enabled: false }, }); }); diff --git a/packages/manager/cypress/e2e/core/objectStorage/enable-object-storage.spec.ts b/packages/manager/cypress/e2e/core/objectStorage/enable-object-storage.spec.ts index 5073da5642..7772498eab 100644 --- a/packages/manager/cypress/e2e/core/objectStorage/enable-object-storage.spec.ts +++ b/packages/manager/cypress/e2e/core/objectStorage/enable-object-storage.spec.ts @@ -56,9 +56,10 @@ describe('Object Storage enrollment', () => { * - Confirms that consistent pricing information is shown for all regions in the enable modal. */ it('can enroll in Object Storage', () => { - mockGetAccount(accountFactory.build({ capabilities: [] })); + mockGetAccount(accountFactory.build({ capabilities: ['Object Storage'] })); mockAppendFeatureFlags({ objMultiCluster: false, + objectStorageGen2: { enabled: false }, }); const mockAccountSettings = accountSettingsFactory.build({ diff --git a/packages/manager/cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts b/packages/manager/cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts index 8599f4a162..f9c431f5a3 100644 --- a/packages/manager/cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts +++ b/packages/manager/cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts @@ -183,9 +183,10 @@ describe('object storage end-to-end tests', () => { interceptDeleteBucket(bucketLabel, bucketCluster).as('deleteBucket'); interceptGetNetworkUtilization().as('getNetworkUtilization'); - mockGetAccount(accountFactory.build({ capabilities: [] })); + mockGetAccount(accountFactory.build({ capabilities: ['Object Storage'] })); mockAppendFeatureFlags({ objMultiCluster: false, + objectStorageGen2: { enabled: false }, }).as('getFeatureFlags'); cy.visitWithLogin('/object-storage'); diff --git a/packages/manager/cypress/e2e/core/objectStorage/object-storage.smoke.spec.ts b/packages/manager/cypress/e2e/core/objectStorage/object-storage.smoke.spec.ts index e189ad3a87..ec96b743c0 100644 --- a/packages/manager/cypress/e2e/core/objectStorage/object-storage.smoke.spec.ts +++ b/packages/manager/cypress/e2e/core/objectStorage/object-storage.smoke.spec.ts @@ -60,11 +60,12 @@ describe('object storage smoke tests', () => { mockGetAccount( accountFactory.build({ - capabilities: ['Object Storage Access Key Regions'], + capabilities: ['Object Storage', 'Object Storage Access Key Regions'], }) ); mockAppendFeatureFlags({ objMultiCluster: true, + objectStorageGen2: { enabled: false }, }).as('getFeatureFlags'); mockGetRegions(mockRegions).as('getRegions'); @@ -160,9 +161,10 @@ describe('object storage smoke tests', () => { hostname: bucketHostname, }); - mockGetAccount(accountFactory.build({ capabilities: [] })); + mockGetAccount(accountFactory.build({ capabilities: ['Object Storage'] })); mockAppendFeatureFlags({ objMultiCluster: false, + objectStorageGen2: { enabled: false }, gecko2: false, }).as('getFeatureFlags'); @@ -297,9 +299,10 @@ describe('object storage smoke tests', () => { objects: 0, }); - mockGetAccount(accountFactory.build({ capabilities: [] })); + mockGetAccount(accountFactory.build({ capabilities: ['Object Storage'] })); mockAppendFeatureFlags({ objMultiCluster: false, + objectStorageGen2: { enabled: false }, }); mockGetBuckets([bucketMock]).as('getBuckets'); @@ -348,11 +351,12 @@ describe('object storage smoke tests', () => { mockGetAccount( accountFactory.build({ - capabilities: ['Object Storage Access Key Regions'], + capabilities: ['Object Storage', 'Object Storage Access Key Regions'], }) ); mockAppendFeatureFlags({ objMultiCluster: true, + objectStorageGen2: { enabled: false }, }); mockGetBuckets([bucketMock]).as('getBuckets'); From d52d108de694f81b9622b69e09b197beb51d3e96 Mon Sep 17 00:00:00 2001 From: aaleksee-akamai Date: Thu, 14 Nov 2024 15:50:07 +0100 Subject: [PATCH 016/131] feat: [UIE-8129] - add new user permissions api with prefix (#11146) --- .../pr-11146-added-1729681812578.md | 5 +++ packages/api-v4/src/iam/iam.ts | 44 +++++++++++++++++++ packages/api-v4/src/iam/index.ts | 3 ++ packages/api-v4/src/iam/types.ts | 30 +++++++++++++ packages/api-v4/src/index.ts | 2 + .../pr-11146-added-1729681889703.md | 5 +++ .../manager/src/factories/userPermissions.ts | 24 ++++++++++ packages/manager/src/queries/iam/iam.ts | 9 ++++ packages/manager/src/queries/iam/queries.ts | 14 ++++++ 9 files changed, 136 insertions(+) create mode 100644 packages/api-v4/.changeset/pr-11146-added-1729681812578.md create mode 100644 packages/api-v4/src/iam/iam.ts create mode 100644 packages/api-v4/src/iam/index.ts create mode 100644 packages/api-v4/src/iam/types.ts create mode 100644 packages/manager/.changeset/pr-11146-added-1729681889703.md create mode 100644 packages/manager/src/factories/userPermissions.ts create mode 100644 packages/manager/src/queries/iam/iam.ts create mode 100644 packages/manager/src/queries/iam/queries.ts diff --git a/packages/api-v4/.changeset/pr-11146-added-1729681812578.md b/packages/api-v4/.changeset/pr-11146-added-1729681812578.md new file mode 100644 index 0000000000..b08c07068c --- /dev/null +++ b/packages/api-v4/.changeset/pr-11146-added-1729681812578.md @@ -0,0 +1,5 @@ +--- +"@linode/api-v4": Added +--- + +New IAM endpoints and types ([#11146](https://github.com/linode/manager/pull/11146)) diff --git a/packages/api-v4/src/iam/iam.ts b/packages/api-v4/src/iam/iam.ts new file mode 100644 index 0000000000..ea910200a3 --- /dev/null +++ b/packages/api-v4/src/iam/iam.ts @@ -0,0 +1,44 @@ +import { BETA_API_ROOT } from '../constants'; +import Request, { setData, setMethod, setURL } from '../request'; +import { IamUserPermissions } from './types'; + +/** + * getUserPermissions + * + * Returns the full permissions structure for this User. This includes all entities on + * the Account alongside what level of access this User has to each of them. + * + * @param username { number } the username to look up. + * + */ +export const getUserPermissions = (username: string) => + Request( + setURL( + `${BETA_API_ROOT}/iam/role-permissions/users/${encodeURIComponent( + username + )}` + ), + setMethod('GET') + ); +/** + * updateUserPermissions + * + * Update the permissions a User has. + * + * @param username { number } ID of the client to be viewed. + * @param data { object } the Permissions object to update. + * + */ +export const updateUserPermissions = ( + username: string, + data: Partial +) => + Request( + setURL( + `${BETA_API_ROOT}/iam/role-permissions/users/${encodeURIComponent( + username + )}` + ), + setMethod('PUT'), + setData(data) + ); diff --git a/packages/api-v4/src/iam/index.ts b/packages/api-v4/src/iam/index.ts new file mode 100644 index 0000000000..0b2cffa953 --- /dev/null +++ b/packages/api-v4/src/iam/index.ts @@ -0,0 +1,3 @@ +export * from './types'; + +export * from './iam'; diff --git a/packages/api-v4/src/iam/types.ts b/packages/api-v4/src/iam/types.ts new file mode 100644 index 0000000000..9b88c73aea --- /dev/null +++ b/packages/api-v4/src/iam/types.ts @@ -0,0 +1,30 @@ +export interface IamUserPermissions { + account_access: AccountAccessType[]; + resource_access: ResourceAccess[]; +} + +type ResourceType = + | 'linode' + | 'firewall' + | 'nodebalancer' + | 'longview' + | 'domain' + | 'stackscript' + | 'image' + | 'volume' + | 'database' + | 'account' + | 'vpc'; + +type AccountAccessType = + | 'account_linode_admin' + | 'linode_creator' + | 'firewall_creator'; + +type RoleType = 'linode_contributor' | 'firewall_admin'; + +export interface ResourceAccess { + resource_id: number; + resource_type: ResourceType; + roles: RoleType[]; +} diff --git a/packages/api-v4/src/index.ts b/packages/api-v4/src/index.ts index 838db834c2..29838058bf 100644 --- a/packages/api-v4/src/index.ts +++ b/packages/api-v4/src/index.ts @@ -50,6 +50,8 @@ export * from './vpcs'; export * from './betas'; +export * from './iam'; + export { baseRequest, setToken, diff --git a/packages/manager/.changeset/pr-11146-added-1729681889703.md b/packages/manager/.changeset/pr-11146-added-1729681889703.md new file mode 100644 index 0000000000..82546d3f94 --- /dev/null +++ b/packages/manager/.changeset/pr-11146-added-1729681889703.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +mock data and query for new permission api ([#11146](https://github.com/linode/manager/pull/11146)) diff --git a/packages/manager/src/factories/userPermissions.ts b/packages/manager/src/factories/userPermissions.ts new file mode 100644 index 0000000000..eadd1c31b7 --- /dev/null +++ b/packages/manager/src/factories/userPermissions.ts @@ -0,0 +1,24 @@ +import { IamUserPermissions } from '@linode/api-v4'; +import Factory from 'src/factories/factoryProxy'; + +export const userPermissionsFactory = Factory.Sync.makeFactory( + { + account_access: [ + 'account_linode_admin', + 'linode_creator', + 'firewall_creator', + ], + resource_access: [ + { + resource_id: 12345678, + resource_type: 'linode', + roles: ['linode_contributor'], + }, + { + resource_id: 45678901, + resource_type: 'firewall', + roles: ['firewall_admin'], + }, + ], + } +); diff --git a/packages/manager/src/queries/iam/iam.ts b/packages/manager/src/queries/iam/iam.ts new file mode 100644 index 0000000000..4cfc06f687 --- /dev/null +++ b/packages/manager/src/queries/iam/iam.ts @@ -0,0 +1,9 @@ +import { APIError, IamUserPermissions } from '@linode/api-v4'; +import { iamQueries } from './queries'; +import { useQuery } from '@tanstack/react-query'; + +export const useAccountUserPermissions = (username: string) => { + return useQuery( + iamQueries.user(username)._ctx.permissions + ); +}; diff --git a/packages/manager/src/queries/iam/queries.ts b/packages/manager/src/queries/iam/queries.ts new file mode 100644 index 0000000000..5ce8a9f2d4 --- /dev/null +++ b/packages/manager/src/queries/iam/queries.ts @@ -0,0 +1,14 @@ +import { getUserPermissions } from '@linode/api-v4'; +import { createQueryKeys } from '@lukemorales/query-key-factory'; + +export const iamQueries = createQueryKeys('iam', { + user: (username: string) => ({ + contextQueries: { + permissions: { + queryFn: () => getUserPermissions(username), + queryKey: null, + }, + }, + queryKey: [username], + }), +}); From 8ee528160aaab94a0d849f1ea23682275ab46b18 Mon Sep 17 00:00:00 2001 From: carrillo-erik <119514965+carrillo-erik@users.noreply.github.com> Date: Thu, 14 Nov 2024 07:01:25 -0800 Subject: [PATCH 017/131] feat: [M3-6941]- Uniform Spacing b/w Resource Link Columns In Empty State Landing Pages (#11213) * Fix spacing for empty state landing pages * Fix styling for mobile and empty youtube resource sections * Add changeset --- .../.changeset/pr-11213-tech-stories-1731002638950.md | 5 +++++ .../EmptyLandingPageResources/ResourcesLinksSection.tsx | 7 +++++-- .../EmptyLandingPageResources/ResourcesLinksSubSection.tsx | 2 +- .../manager/src/components/Placeholder/Placeholder.tsx | 4 +++- .../Kubernetes/KubernetesLanding/KubernetesLanding.tsx | 2 -- packages/manager/src/features/Kubernetes/index.tsx | 6 ++++-- .../PlacementGroupsLandingEmptyState.tsx | 1 + .../manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx | 1 + 8 files changed, 20 insertions(+), 8 deletions(-) create mode 100644 packages/manager/.changeset/pr-11213-tech-stories-1731002638950.md diff --git a/packages/manager/.changeset/pr-11213-tech-stories-1731002638950.md b/packages/manager/.changeset/pr-11213-tech-stories-1731002638950.md new file mode 100644 index 0000000000..df8ccca56b --- /dev/null +++ b/packages/manager/.changeset/pr-11213-tech-stories-1731002638950.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +Uniform Spacing b/w Resource Link Columns in Empty State Landing Pages ([#11213](https://github.com/linode/manager/pull/11213)) diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSection.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSection.tsx index d25b874d81..e4317a5f9e 100644 --- a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSection.tsx +++ b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSection.tsx @@ -18,13 +18,16 @@ const StyledResourcesLinksSection = styled('div', { display: 'grid', gridAutoColumns: '1fr', gridAutoFlow: 'column', - justifyItems: 'center', - maxWidth: props.wide === false ? 762 : '100%', + [theme.breakpoints.between('md', 'lg')]: { + width: 'auto', + }, [theme.breakpoints.down(props.wide ? 'lg' : 'md')]: { gridAutoFlow: 'row', justifyItems: 'start', + maxWidth: props.wide === false ? 361 : '100%', rowGap: theme.spacing(8), }, + width: props.wide === false ? 762 : '100%', })); export const ResourcesLinksSection = ({ diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx index 1756903172..4144166f1b 100644 --- a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx +++ b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx @@ -17,6 +17,7 @@ const StyledResourcesLinksSubSection = styled('div', { '& > a': { display: 'inline-block', fontFamily: theme.font.bold, + width: '100%', }, '& > h2': { color: theme.palette.text.primary, @@ -34,7 +35,6 @@ const StyledResourcesLinksSubSection = styled('div', { fontSize: '0.875rem', gridTemplateRows: `22px minmax(${theme.spacing(3)}, 100%) 1.125rem`, rowGap: theme.spacing(2), - width: '100%', })); export const ResourcesLinksSubSection = ( diff --git a/packages/manager/src/components/Placeholder/Placeholder.tsx b/packages/manager/src/components/Placeholder/Placeholder.tsx index 891cc6dddf..55f9ea1871 100644 --- a/packages/manager/src/components/Placeholder/Placeholder.tsx +++ b/packages/manager/src/components/Placeholder/Placeholder.tsx @@ -2,13 +2,15 @@ import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; import LinodeIcon from 'src/assets/addnewmenu/linode.svg'; -import { Button, ButtonProps } from 'src/components/Button/Button'; +import { Button } from 'src/components/Button/Button'; import { H1Header } from 'src/components/H1Header/H1Header'; import { Typography } from 'src/components/Typography'; import { fadeIn } from 'src/styles/keyframes'; import { TransferDisplay } from '../TransferDisplay/TransferDisplay'; +import type { ButtonProps } from 'src/components/Button/Button'; + export interface ExtendedButtonProps extends ButtonProps { target?: string; } diff --git a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx index b12722dd77..6de1559f69 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx @@ -286,5 +286,3 @@ export const kubernetesLandingLazyRoute = createLazyRoute( )({ component: KubernetesLanding, }); - -export default KubernetesLanding; diff --git a/packages/manager/src/features/Kubernetes/index.tsx b/packages/manager/src/features/Kubernetes/index.tsx index 82aebd910f..efd967ebde 100644 --- a/packages/manager/src/features/Kubernetes/index.tsx +++ b/packages/manager/src/features/Kubernetes/index.tsx @@ -4,8 +4,10 @@ import { Redirect, Route, Switch } from 'react-router-dom'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; -const KubernetesLanding = React.lazy( - () => import('./KubernetesLanding/KubernetesLanding') +const KubernetesLanding = React.lazy(() => + import('./KubernetesLanding/KubernetesLanding').then((module) => ({ + default: module.KubernetesLanding, + })) ); const ClusterCreate = React.lazy(() => diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLandingEmptyState.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLandingEmptyState.tsx index cf0331b909..76831a9e31 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLandingEmptyState.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLandingEmptyState.tsx @@ -39,6 +39,7 @@ export const PlacementGroupsLandingEmptyState = ({ headers={headers} icon={LinodeIcon} linkAnalyticsEvent={linkAnalyticsEvent} + wide /> ); }; diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx index c42c769508..c88222fc1c 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx @@ -42,6 +42,7 @@ export const VPCEmptyState = () => { headers={headers} icon={NodeBalancerIcon} linkAnalyticsEvent={linkAnalyticsEvent} + wide /> ); }; From 1d0051e7964531722843243cf9b7afbba3c89900 Mon Sep 17 00:00:00 2001 From: aaleksee-akamai Date: Thu, 14 Nov 2024 19:49:47 +0100 Subject: [PATCH 018/131] feat: [UIE-8128] - add new account api with (#11181) --- .../pr-11181-added-1730207508835.md | 5 ++ packages/api-v4/src/iam/iam.ts | 15 ++++- packages/api-v4/src/iam/types.ts | 23 +++++++ packages/api-v4/src/index.ts | 2 + packages/api-v4/src/resources/index.ts | 3 + packages/api-v4/src/resources/resources.ts | 16 +++++ packages/api-v4/src/resources/types.ts | 21 ++++++ .../pr-11181-added-1730207569813.md | 5 ++ .../src/factories/accountPermissions.ts | 66 +++++++++++++++++++ .../manager/src/factories/accountResources.ts | 29 ++++++++ packages/manager/src/queries/iam/iam.ts | 19 +++++- packages/manager/src/queries/iam/queries.ts | 6 +- .../manager/src/queries/resources/queries.ts | 9 +++ .../src/queries/resources/resources.ts | 16 +++++ 14 files changed, 232 insertions(+), 3 deletions(-) create mode 100644 packages/api-v4/.changeset/pr-11181-added-1730207508835.md create mode 100644 packages/api-v4/src/resources/index.ts create mode 100644 packages/api-v4/src/resources/resources.ts create mode 100644 packages/api-v4/src/resources/types.ts create mode 100644 packages/manager/.changeset/pr-11181-added-1730207569813.md create mode 100644 packages/manager/src/factories/accountPermissions.ts create mode 100644 packages/manager/src/factories/accountResources.ts create mode 100644 packages/manager/src/queries/resources/queries.ts create mode 100644 packages/manager/src/queries/resources/resources.ts diff --git a/packages/api-v4/.changeset/pr-11181-added-1730207508835.md b/packages/api-v4/.changeset/pr-11181-added-1730207508835.md new file mode 100644 index 0000000000..7fb5a24138 --- /dev/null +++ b/packages/api-v4/.changeset/pr-11181-added-1730207508835.md @@ -0,0 +1,5 @@ +--- +"@linode/api-v4": Added +--- + +New IAM endpoints and types ([#11181](https://github.com/linode/manager/pull/11181)) diff --git a/packages/api-v4/src/iam/iam.ts b/packages/api-v4/src/iam/iam.ts index ea910200a3..2a0e70071a 100644 --- a/packages/api-v4/src/iam/iam.ts +++ b/packages/api-v4/src/iam/iam.ts @@ -1,6 +1,6 @@ import { BETA_API_ROOT } from '../constants'; import Request, { setData, setMethod, setURL } from '../request'; -import { IamUserPermissions } from './types'; +import { IamUserPermissions, IamAccountPermissions } from './types'; /** * getUserPermissions @@ -42,3 +42,16 @@ export const updateUserPermissions = ( setMethod('PUT'), setData(data) ); + +/** + * getAccountPermissions + * + * Return all permissions for account. + * + */ +export const getAccountPermissions = () => { + return Request( + setURL(`${BETA_API_ROOT}/iam/role-permissions`), + setMethod('GET') + ); +}; diff --git a/packages/api-v4/src/iam/types.ts b/packages/api-v4/src/iam/types.ts index 9b88c73aea..57029d3d9e 100644 --- a/packages/api-v4/src/iam/types.ts +++ b/packages/api-v4/src/iam/types.ts @@ -28,3 +28,26 @@ export interface ResourceAccess { resource_type: ResourceType; roles: RoleType[]; } + +export interface IamAccountPermissions { + account_access: Access[]; + resource_access: Access[]; +} + +type PermissionType = + | 'create_linode' + | 'update_linode' + | 'update_firewall' + | 'delete_linode' + | 'view_linode'; + +interface Access { + resource_type: ResourceType; + roles: Roles[]; +} + +export interface Roles { + name: string; + description: string; + permissions?: PermissionType[]; +} \ No newline at end of file diff --git a/packages/api-v4/src/index.ts b/packages/api-v4/src/index.ts index 29838058bf..dd996b686d 100644 --- a/packages/api-v4/src/index.ts +++ b/packages/api-v4/src/index.ts @@ -52,6 +52,8 @@ export * from './betas'; export * from './iam'; +export * from './resources'; + export { baseRequest, setToken, diff --git a/packages/api-v4/src/resources/index.ts b/packages/api-v4/src/resources/index.ts new file mode 100644 index 0000000000..b8a322debd --- /dev/null +++ b/packages/api-v4/src/resources/index.ts @@ -0,0 +1,3 @@ +export * from './resources'; + +export * from './types'; diff --git a/packages/api-v4/src/resources/resources.ts b/packages/api-v4/src/resources/resources.ts new file mode 100644 index 0000000000..55a576694b --- /dev/null +++ b/packages/api-v4/src/resources/resources.ts @@ -0,0 +1,16 @@ +import { BETA_API_ROOT } from '../constants'; +import Request, { setMethod, setURL } from '../request'; +import { IamAccountResource } from './types'; + +/** + * getAccountResources + * + * Return all resources for account. + * + */ +export const getAccountResources = () => { + return Request( + setURL(`${BETA_API_ROOT}/resources`), + setMethod('GET') + ); +}; diff --git a/packages/api-v4/src/resources/types.ts b/packages/api-v4/src/resources/types.ts new file mode 100644 index 0000000000..bf6d89ad03 --- /dev/null +++ b/packages/api-v4/src/resources/types.ts @@ -0,0 +1,21 @@ +type ResourceType = + | 'linode' + | 'firewall' + | 'nodebalancer' + | 'longview' + | 'domain' + | 'stackscript' + | 'image' + | 'volume' + | 'database' + | 'vpc'; + +export type IamAccountResource = { + resource_type: ResourceType; + resources: Resource[]; +}[]; + +export interface Resource { + name: string; + id: number; +} diff --git a/packages/manager/.changeset/pr-11181-added-1730207569813.md b/packages/manager/.changeset/pr-11181-added-1730207569813.md new file mode 100644 index 0000000000..4083e9e93a --- /dev/null +++ b/packages/manager/.changeset/pr-11181-added-1730207569813.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +mock data and query for new account api ([#11181](https://github.com/linode/manager/pull/11181)) diff --git a/packages/manager/src/factories/accountPermissions.ts b/packages/manager/src/factories/accountPermissions.ts new file mode 100644 index 0000000000..70d1d56bf8 --- /dev/null +++ b/packages/manager/src/factories/accountPermissions.ts @@ -0,0 +1,66 @@ +import { IamAccountPermissions } from '@linode/api-v4'; +import Factory from 'src/factories/factoryProxy'; + +export const accountPermissionsFactory = Factory.Sync.makeFactory( + { + account_access: [ + { + resource_type: 'account', + roles: [ + { + name: 'account_admin', + description: + 'Access to perform any supported action on all resources in the account', + permissions: ['create_linode', 'update_linode', 'update_firewall'], + }, + ], + }, + { + resource_type: 'linode', + roles: [ + { + name: 'account_linode_admin', + description: + 'Access to perform any supported action on all linode instances in the account', + permissions: ['create_linode', 'update_linode', 'delete_linode'], + }, + ], + }, + { + resource_type: 'firewall', + roles: [ + { + name: 'firewall_creator', + description: 'Access to create a firewall instance', + }, + ], + }, + ], + resource_access: [ + { + resource_type: 'linode', + roles: [ + { + name: 'linode_contributor', + description: 'Access to update a linode instance', + permissions: ['update_linode', 'view_linode'], + }, + ], + }, + { + resource_type: 'firewall', + roles: [ + { + name: 'firewall_viewer', + description: 'Access to view a firewall instance', + }, + { + name: 'firewall_admin', + description: + 'Access to perform any supported action on a firewall instance', + }, + ], + }, + ], + } +); diff --git a/packages/manager/src/factories/accountResources.ts b/packages/manager/src/factories/accountResources.ts new file mode 100644 index 0000000000..df33e999ac --- /dev/null +++ b/packages/manager/src/factories/accountResources.ts @@ -0,0 +1,29 @@ +import { IamAccountResource } from '@linode/api-v4'; +import Factory from 'src/factories/factoryProxy'; + +export const accountResourcesFactory = Factory.Sync.makeFactory( + [ + { + resource_type: 'linode', + resources: [ + { + name: 'debian-us-123', + id: 12345678, + }, + { + name: 'linode-uk-123', + id: 23456789, + }, + ], + }, + { + resource_type: 'firewall', + resources: [ + { + name: 'firewall-us-123', + id: 45678901, + }, + ], + }, + ] +); diff --git a/packages/manager/src/queries/iam/iam.ts b/packages/manager/src/queries/iam/iam.ts index 4cfc06f687..f3a16356f9 100644 --- a/packages/manager/src/queries/iam/iam.ts +++ b/packages/manager/src/queries/iam/iam.ts @@ -1,9 +1,26 @@ -import { APIError, IamUserPermissions } from '@linode/api-v4'; +import { + APIError, + IamUserPermissions, + IamAccountPermissions, +} from '@linode/api-v4'; import { iamQueries } from './queries'; import { useQuery } from '@tanstack/react-query'; +import { useProfile } from 'src/queries/profile/profile'; +import { queryPresets } from '../base'; export const useAccountUserPermissions = (username: string) => { return useQuery( iamQueries.user(username)._ctx.permissions ); }; + +export const useAccountPermissions = () => { + const { data: profile } = useProfile(); + + return useQuery({ + ...iamQueries.permissions, + ...queryPresets.oneTimeFetch, + ...queryPresets.noRetry, + enabled: !profile?.restricted, + }); +}; diff --git a/packages/manager/src/queries/iam/queries.ts b/packages/manager/src/queries/iam/queries.ts index 5ce8a9f2d4..2870f89b0b 100644 --- a/packages/manager/src/queries/iam/queries.ts +++ b/packages/manager/src/queries/iam/queries.ts @@ -1,4 +1,4 @@ -import { getUserPermissions } from '@linode/api-v4'; +import { getUserPermissions, getAccountPermissions } from '@linode/api-v4'; import { createQueryKeys } from '@lukemorales/query-key-factory'; export const iamQueries = createQueryKeys('iam', { @@ -11,4 +11,8 @@ export const iamQueries = createQueryKeys('iam', { }, queryKey: [username], }), + permissions: { + queryFn: getAccountPermissions, + queryKey: null, + }, }); diff --git a/packages/manager/src/queries/resources/queries.ts b/packages/manager/src/queries/resources/queries.ts new file mode 100644 index 0000000000..074ea03fe3 --- /dev/null +++ b/packages/manager/src/queries/resources/queries.ts @@ -0,0 +1,9 @@ +import { getAccountResources } from '@linode/api-v4'; +import { createQueryKeys } from '@lukemorales/query-key-factory'; + +export const resourcesQueries = createQueryKeys('resources', { + resources: { + queryFn: getAccountResources, + queryKey: null, + }, +}); diff --git a/packages/manager/src/queries/resources/resources.ts b/packages/manager/src/queries/resources/resources.ts new file mode 100644 index 0000000000..acb53e60b5 --- /dev/null +++ b/packages/manager/src/queries/resources/resources.ts @@ -0,0 +1,16 @@ +import { IamAccountResource, APIError } from '@linode/api-v4'; +import { useQuery } from '@tanstack/react-query'; +import { useProfile } from 'src/queries/profile/profile'; +import { queryPresets } from '../base'; +import { resourcesQueries } from './queries'; + +export const useAccountResources = () => { + const { data: profile } = useProfile(); + + return useQuery({ + ...resourcesQueries.resources, + ...queryPresets.oneTimeFetch, + ...queryPresets.noRetry, + enabled: !profile?.restricted, + }); +}; From afbd8d947da854b1e045029843559f0bb77b633c Mon Sep 17 00:00:00 2001 From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Date: Thu, 14 Nov 2024 14:58:52 -0500 Subject: [PATCH 019/131] refactor: [M3-8827] - Migrate `CircleProgress` to `ui` package (#11214) --- .../pr-11214-removed-1730844124766.md | 5 +++ .../components/Autocomplete/Autocomplete.tsx | 2 +- .../src/components/CircleProgress/index.ts | 1 - .../DebouncedSearchTextField.tsx | 2 +- .../DrawerContent/DrawerContent.tsx | 4 +-- .../components/LoadingIndicator.tsx | 3 +- .../manager/src/components/LinkButton.tsx | 4 +-- .../PromiseLoader/PromiseLoader.tsx | 35 +++++++++---------- .../manager/src/components/SplashScreen.tsx | 3 +- .../manager/src/components/SuspenseLoader.tsx | 3 +- .../TableSortCell/TableSortCell.tsx | 11 +++--- .../src/components/TagCell/TagCell.tsx | 3 +- packages/manager/src/components/TextField.tsx | 9 +++-- .../TransferDisplay/TransferDisplay.tsx | 3 +- .../src/features/Account/GlobalSettings.tsx | 2 +- .../Account/ObjectStorageSettings.tsx | 3 +- .../SwitchAccounts/ChildAccountList.tsx | 3 +- .../src/features/Betas/BetaDetailsList.tsx | 3 +- .../manager/src/features/Betas/BetaSignup.tsx | 3 +- .../src/features/Billing/BillingDetail.tsx | 2 +- .../PaymentDrawer/GooglePayButton.tsx | 3 +- .../PaymentDrawer/PayPalButton.tsx | 3 +- .../PaymentInfoPanel/GooglePayChip.tsx | 7 ++-- .../PaymentInfoPanel/PayPalChip.tsx | 18 ++++++---- .../PaymentInfoPanel/PaymentMethods.tsx | 7 ++-- .../Dashboard/CloudPulseDashboard.tsx | 2 +- .../CloudPulseDashboardWithFilters.tsx | 3 +- .../Widget/components/CloudPulseLineGraph.tsx | 2 +- .../DatabaseCreate/DatabaseCreate.tsx | 3 +- .../DatabaseResize/DatabaseResize.tsx | 3 +- .../DatabaseResizeCurrentConfiguration.tsx | 3 +- .../DatabaseSummaryConnectionDetails.tsx | 2 +- ...DatabaseSummaryConnectionDetailsLegacy.tsx | 3 +- .../Databases/DatabaseDetail/index.tsx | 3 +- .../DatabaseLanding/DatabaseLanding.tsx | 4 +-- .../Domains/DomainDetail/DomainDetail.tsx | 3 +- .../features/Domains/DomainDetail/index.tsx | 2 +- .../src/features/Domains/DomainsLanding.tsx | 3 +- .../ConfirmTransferDialog.tsx | 3 +- .../EntityTransfersLanding.tsx | 5 +-- .../Firewalls/FirewallDetail/index.tsx | 4 +-- .../FirewallLanding/FirewallLanding.tsx | 22 ++++++------ .../Images/ImagesLanding/ImagesLanding.tsx | 9 +++-- .../CreateCluster/HAControlPlane.tsx | 9 +++-- .../CreateCluster/NodePoolPanel.tsx | 2 +- .../KubeCheckoutBar/KubeCheckoutBar.tsx | 3 +- .../KubeClusterSpecs.tsx | 2 +- .../KubeConfigDisplay.tsx | 11 +++--- .../KubeEntityDetailFooter.tsx | 3 +- .../KubernetesClusterDetail.tsx | 3 +- .../NodePoolsDisplay/NodePoolsDisplay.tsx | 3 +- .../NodePoolsDisplay/ResizeNodePoolDrawer.tsx | 3 +- .../UpgradeClusterDialog.tsx | 3 +- .../KubernetesLanding/KubernetesLanding.tsx | 2 +- .../Tabs/Marketplace/AppsList.tsx | 3 +- .../StackScripts/StackScriptDetailsDialog.tsx | 2 +- .../StackScripts/StackScriptSelectionList.tsx | 9 +++-- .../LinodeBackup/LinodeBackups.tsx | 4 +-- .../LinodeConfigs/LinodeConfigDialog.tsx | 10 ++++-- .../LinodeNetworking/IPSharing.tsx | 3 +- .../LinodeNetworking/IPTransfer.tsx | 3 +- .../LinodeNetworking/LinodeIPAddressRow.tsx | 2 +- .../LinodeNetworking/LinodeIPAddresses.tsx | 3 +- .../TransferContent.tsx | 3 +- .../TransferHistory.tsx | 3 +- .../LinodeResize/LinodeResize.tsx | 3 +- .../LinodeSettings/LinodeWatchdogPanel.tsx | 3 +- .../LinodeSummary/StatsPanel.tsx | 2 +- .../Linodes/LinodesDetail/LinodesDetail.tsx | 2 +- .../LinodeDetailHeader.tsx | 2 +- .../LinodesDetail/LinodesDetailNavigation.tsx | 2 +- .../Linodes/LinodesLanding/LinodesLanding.tsx | 2 +- packages/manager/src/features/Lish/Glish.tsx | 3 +- packages/manager/src/features/Lish/Lish.tsx | 2 +- .../manager/src/features/Lish/Weblish.tsx | 2 +- .../LongviewDetail/DetailTabs/Disks/Disks.tsx | 7 ++-- .../DetailTabs/Network/NetworkGraphs.tsx | 9 ++--- .../LongviewDetail/LongviewDetail.tsx | 3 +- .../Longview/LongviewLanding/LongviewList.tsx | 4 +-- .../LongviewLanding/LongviewPlans.tsx | 3 +- .../ManagedChartPanel.tsx | 3 +- .../ManagedDashboardCard.tsx | 2 +- .../Managed/Monitors/HistoryDrawer.tsx | 7 ++-- .../Managed/SSHAccess/LinodePubKey.styles.tsx | 5 ++- .../NodeBalancerDetail/NodeBalancerDetail.tsx | 3 +- .../NodeBalancerSummary/TablesPanel.tsx | 6 ++-- .../features/NodeBalancers/NodeBalancers.tsx | 2 +- .../NodeBalancersLanding.tsx | 2 +- .../NotificationCenterNotifications.tsx | 4 +-- .../AccessKeyLanding/AccessKeyDrawer.tsx | 3 +- .../AccessKeyLanding/OMC_AccessKeyDrawer.tsx | 3 +- .../ObjectStorage/BucketDetail/BucketSSL.tsx | 3 +- .../BucketLanding/BucketLanding.tsx | 3 +- .../BucketLanding/OMC_BucketLanding.tsx | 3 +- .../BucketLanding/OveragePricing.tsx | 3 +- .../PlacementGroupsDeleteModal.tsx | 3 +- .../PlacementGroupsDetail.tsx | 3 +- .../PlacementGroupsEditDrawer.tsx | 3 +- .../PlacementGroupsLanding.tsx | 2 +- .../PlacementGroupsUnassignModal.tsx | 3 +- .../AuthenticationSettings.tsx | 3 +- .../SecurityQuestions/SecurityQuestions.tsx | 3 +- .../TwoFactor/EnableTwoFactorForm.tsx | 3 +- .../features/Profile/Referrals/Referrals.tsx | 3 +- .../src/features/Search/SearchLanding.tsx | 3 +- .../SelectStackScriptPanel.tsx | 3 +- .../SelectStackScriptsSection.tsx | 7 ++-- .../StackScriptBase/StackScriptBase.tsx | 3 +- .../StackScriptCreate/StackScriptCreate.tsx | 3 +- .../StackScriptPanel/StackScriptsSection.tsx | 13 ++++--- .../StackScripts/StackScriptsDetail.tsx | 7 ++-- .../StackScripts/StackScriptsLanding.tsx | 3 +- .../SupportTicketDetail.tsx | 3 +- .../manager/src/features/Users/UserDetail.tsx | 2 +- .../features/Users/UserPermissions.styles.ts | 3 +- .../src/features/Users/UserPermissions.tsx | 4 +-- .../Users/UserProfile/UserProfile.tsx | 3 +- .../VPCs/VPCDetail/SubnetLinodeRow.tsx | 3 +- .../src/features/VPCs/VPCDetail/VPCDetail.tsx | 3 +- .../VPCs/VPCDetail/VPCSubnetsTable.tsx | 3 +- .../features/VPCs/VPCLanding/VPCLanding.tsx | 2 +- .../Volumes/VolumeDrawer/PricePanel.tsx | 3 +- .../Volumes/VolumeDrawer/SizeField.tsx | 8 +++-- .../src/features/Volumes/VolumesLanding.tsx | 3 +- .../pr-11214-added-1730844268443.md | 5 +++ .../CircleProgress/CircleProgress.stories.tsx | 8 ++--- .../CircleProgress/CircleProgress.test.tsx | 12 ++++--- .../CircleProgress/CircleProgress.tsx | 6 ++-- .../ui/src/components/CircleProgress/index.ts | 1 + packages/ui/src/components/index.ts | 1 + 130 files changed, 263 insertions(+), 289 deletions(-) create mode 100644 packages/manager/.changeset/pr-11214-removed-1730844124766.md delete mode 100644 packages/manager/src/components/CircleProgress/index.ts create mode 100644 packages/ui/.changeset/pr-11214-added-1730844268443.md rename packages/{manager => ui}/src/components/CircleProgress/CircleProgress.stories.tsx (62%) rename packages/{manager => ui}/src/components/CircleProgress/CircleProgress.test.tsx (75%) rename packages/{manager => ui}/src/components/CircleProgress/CircleProgress.tsx (94%) create mode 100644 packages/ui/src/components/CircleProgress/index.ts diff --git a/packages/manager/.changeset/pr-11214-removed-1730844124766.md b/packages/manager/.changeset/pr-11214-removed-1730844124766.md new file mode 100644 index 0000000000..94bf4e366a --- /dev/null +++ b/packages/manager/.changeset/pr-11214-removed-1730844124766.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Removed +--- + +Migrate CircleProgress to ui package ([#11214](https://github.com/linode/manager/pull/11214)) diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx index a02b78db4a..be2b95935b 100644 --- a/packages/manager/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/manager/src/components/Autocomplete/Autocomplete.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { Box, InputAdornment } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; @@ -6,7 +7,6 @@ import React from 'react'; import { TextField } from 'src/components/TextField'; -import { CircleProgress } from '../CircleProgress'; import { CustomPopper, SelectedIcon, diff --git a/packages/manager/src/components/CircleProgress/index.ts b/packages/manager/src/components/CircleProgress/index.ts deleted file mode 100644 index af27106fa3..0000000000 --- a/packages/manager/src/components/CircleProgress/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { CircleProgress } from './CircleProgress'; diff --git a/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx b/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx index fc62afddd4..887bc8762e 100644 --- a/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx +++ b/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { IconButton, InputAdornment } from '@linode/ui'; import Clear from '@mui/icons-material/Clear'; import Search from '@mui/icons-material/Search'; @@ -5,7 +6,6 @@ import { styled } from '@mui/material/styles'; import * as React from 'react'; import { debounce } from 'throttle-debounce'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TextField } from 'src/components/TextField'; import type { TextFieldProps } from 'src/components/TextField'; diff --git a/packages/manager/src/components/DrawerContent/DrawerContent.tsx b/packages/manager/src/components/DrawerContent/DrawerContent.tsx index bbc53f3b64..7f08ca2572 100644 --- a/packages/manager/src/components/DrawerContent/DrawerContent.tsx +++ b/packages/manager/src/components/DrawerContent/DrawerContent.tsx @@ -1,8 +1,6 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; - export interface DrawerContentProps { children: React.ReactNode; error: boolean; diff --git a/packages/manager/src/components/EnhancedSelect/components/LoadingIndicator.tsx b/packages/manager/src/components/EnhancedSelect/components/LoadingIndicator.tsx index 88cbadaeeb..0220686cf2 100644 --- a/packages/manager/src/components/EnhancedSelect/components/LoadingIndicator.tsx +++ b/packages/manager/src/components/EnhancedSelect/components/LoadingIndicator.tsx @@ -1,8 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; - export const LoadingIndicator = () => { return ; }; diff --git a/packages/manager/src/components/LinkButton.tsx b/packages/manager/src/components/LinkButton.tsx index d3d7caa7f0..267eeb5316 100644 --- a/packages/manager/src/components/LinkButton.tsx +++ b/packages/manager/src/components/LinkButton.tsx @@ -1,9 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; - import { StyledLinkButton } from './Button/StyledLinkButton'; import type { Theme } from '@mui/material/styles'; diff --git a/packages/manager/src/components/PromiseLoader/PromiseLoader.tsx b/packages/manager/src/components/PromiseLoader/PromiseLoader.tsx index 955dd85fc4..c0f085b80a 100644 --- a/packages/manager/src/components/PromiseLoader/PromiseLoader.tsx +++ b/packages/manager/src/components/PromiseLoader/PromiseLoader.tsx @@ -1,7 +1,6 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; - interface State { [name: string]: any; loading: boolean; @@ -22,6 +21,21 @@ export interface PromiseLoaderResponse { export default function preload

(requests: RequestMap

) { return function (Component: React.ComponentType

) { return class LoadedComponent extends React.Component { + static displayName = `PromiseLoader(${ + Component.displayName || Component.name + })`; + handleDone = () => { + if (!this.mounted) { + return; + } + + this.setState((prevState) => ({ ...prevState, loading: false })); + }; + + mounted: boolean = false; + + state = { loading: true }; + componentDidMount() { this.mounted = true; const promises = Object.entries(requests).map(([name, request]) => @@ -50,6 +64,7 @@ export default function preload

(requests: RequestMap

) { Promise.all(promises).then(this.handleDone).catch(this.handleDone); } + componentWillUnmount() { this.mounted = false; } @@ -62,22 +77,6 @@ export default function preload

(requests: RequestMap

) { return ; } - - static displayName = `PromiseLoader(${ - Component.displayName || Component.name - })`; - - handleDone = () => { - if (!this.mounted) { - return; - } - - this.setState((prevState) => ({ ...prevState, loading: false })); - }; - - mounted: boolean = false; - - state = { loading: true }; }; }; } diff --git a/packages/manager/src/components/SplashScreen.tsx b/packages/manager/src/components/SplashScreen.tsx index 4890a2af50..1a2e65b66f 100644 --- a/packages/manager/src/components/SplashScreen.tsx +++ b/packages/manager/src/components/SplashScreen.tsx @@ -1,7 +1,6 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { srSpeak } from 'src/utilities/accessibility'; export const SplashScreen = () => { diff --git a/packages/manager/src/components/SuspenseLoader.tsx b/packages/manager/src/components/SuspenseLoader.tsx index fe6fc62fce..55a245e06f 100644 --- a/packages/manager/src/components/SuspenseLoader.tsx +++ b/packages/manager/src/components/SuspenseLoader.tsx @@ -1,7 +1,6 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; - interface Props { /** * Ammount of time before the CircleProgress shows diff --git a/packages/manager/src/components/TableSortCell/TableSortCell.tsx b/packages/manager/src/components/TableSortCell/TableSortCell.tsx index 0928cc1787..67fd804726 100644 --- a/packages/manager/src/components/TableSortCell/TableSortCell.tsx +++ b/packages/manager/src/components/TableSortCell/TableSortCell.tsx @@ -1,15 +1,14 @@ -import { - TableCellProps as _TableCellProps, - default as TableCell, -} from '@mui/material/TableCell'; +import { CircleProgress } from '@linode/ui'; +import { default as TableCell } from '@mui/material/TableCell'; import TableSortLabel from '@mui/material/TableSortLabel'; -import { Theme } from '@mui/material/styles'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import SortUp from 'src/assets/icons/sort-up.svg'; import Sort from 'src/assets/icons/unsorted.svg'; -import { CircleProgress } from 'src/components/CircleProgress'; + +import type { Theme } from '@mui/material/styles'; +import type { TableCellProps as _TableCellProps } from '@mui/material/TableCell'; const useStyles = makeStyles()((theme: Theme) => ({ initialIcon: { diff --git a/packages/manager/src/components/TagCell/TagCell.tsx b/packages/manager/src/components/TagCell/TagCell.tsx index 92d667b0f3..2cdcbd04ca 100644 --- a/packages/manager/src/components/TagCell/TagCell.tsx +++ b/packages/manager/src/components/TagCell/TagCell.tsx @@ -1,4 +1,4 @@ -import { IconButton, omittedProps } from '@linode/ui'; +import { CircleProgress, IconButton, omittedProps } from '@linode/ui'; import MoreHoriz from '@mui/icons-material/MoreHoriz'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -8,7 +8,6 @@ import { Tag } from 'src/components/Tag/Tag'; import { useWindowDimensions } from 'src/hooks/useWindowDimensions'; import { StyledPlusIcon, StyledTagButton } from '../Button/StyledTagButton'; -import { CircleProgress } from '../CircleProgress'; import { AddTag } from './AddTag'; import { TagDrawer } from './TagDrawer'; diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx index 4111900722..a5a5940d24 100644 --- a/packages/manager/src/components/TextField.tsx +++ b/packages/manager/src/components/TextField.tsx @@ -1,11 +1,16 @@ -import { Box, FormHelperText, InputAdornment, InputLabel } from '@linode/ui'; +import { + Box, + CircleProgress, + FormHelperText, + InputAdornment, + InputLabel, +} from '@linode/ui'; import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; import { useTheme } from '@mui/material/styles'; import { default as _TextField } from '@mui/material/TextField'; import { clamp } from 'ramda'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { convertToKebabCase } from 'src/utilities/convertToKebobCase'; diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx index ff3e9b810f..dfee8dabdd 100644 --- a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx +++ b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx @@ -1,7 +1,6 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Typography } from 'src/components/Typography'; import { useAccountNetworkTransfer } from 'src/queries/account/transfer'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Account/GlobalSettings.tsx b/packages/manager/src/features/Account/GlobalSettings.tsx index 6cd6e48c49..eafd7c681a 100644 --- a/packages/manager/src/features/Account/GlobalSettings.tsx +++ b/packages/manager/src/features/Account/GlobalSettings.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useAccountSettings, diff --git a/packages/manager/src/features/Account/ObjectStorageSettings.tsx b/packages/manager/src/features/Account/ObjectStorageSettings.tsx index 42b42cced9..77d1fe9a6e 100644 --- a/packages/manager/src/features/Account/ObjectStorageSettings.tsx +++ b/packages/manager/src/features/Account/ObjectStorageSettings.tsx @@ -1,10 +1,9 @@ -import { Box, Notice, Stack } from '@linode/ui'; +import { Box, CircleProgress, Notice, Stack } from '@linode/ui'; import { enqueueSnackbar } from 'notistack'; import * as React from 'react'; import { Accordion } from 'src/components/Accordion'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Link } from 'src/components/Link'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx index 473b84ed6d..f87c43ed7d 100644 --- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx +++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx @@ -1,11 +1,10 @@ -import { Box, Notice, Stack } from '@linode/ui'; +import { Box, CircleProgress, Notice, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; import ErrorStateCloud from 'src/assets/icons/error-state-cloud.svg'; import { Button } from 'src/components/Button/Button'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Typography } from 'src/components/Typography'; import { useChildAccountsInfiniteQuery } from 'src/queries/account/account'; diff --git a/packages/manager/src/features/Betas/BetaDetailsList.tsx b/packages/manager/src/features/Betas/BetaDetailsList.tsx index b310162e1a..cd5a73da05 100644 --- a/packages/manager/src/features/Betas/BetaDetailsList.tsx +++ b/packages/manager/src/features/Betas/BetaDetailsList.tsx @@ -1,7 +1,6 @@ -import { Divider, Paper, Stack } from '@linode/ui'; +import { CircleProgress, Divider, Paper, Stack } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Betas/BetaSignup.tsx b/packages/manager/src/features/Betas/BetaSignup.tsx index f35ade587c..1c38b97a86 100644 --- a/packages/manager/src/features/Betas/BetaSignup.tsx +++ b/packages/manager/src/features/Betas/BetaSignup.tsx @@ -1,4 +1,4 @@ -import { Paper, Stack } from '@linode/ui'; +import { CircleProgress, Paper, Stack } from '@linode/ui'; import { createLazyRoute, useNavigate, @@ -9,7 +9,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Checkbox } from 'src/components/Checkbox'; -import { CircleProgress } from 'src/components/CircleProgress'; import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown'; import { LandingHeader } from 'src/components/LandingHeader/LandingHeader'; import { NotFound } from 'src/components/NotFound'; diff --git a/packages/manager/src/features/Billing/BillingDetail.tsx b/packages/manager/src/features/Billing/BillingDetail.tsx index 18dcac982f..f4ed8ac9fb 100644 --- a/packages/manager/src/features/Billing/BillingDetail.tsx +++ b/packages/manager/src/features/Billing/BillingDetail.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import Paper from '@mui/material/Paper'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -5,7 +6,6 @@ import { PayPalScriptProvider } from '@paypal/react-paypal-js'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { PAYPAL_CLIENT_ID } from 'src/constants'; diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx index 714f1213da..4b18b0570f 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx @@ -1,11 +1,10 @@ -import { Tooltip } from '@linode/ui'; +import { CircleProgress, Tooltip } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import GooglePayIcon from 'src/assets/icons/payment/gPayButton.svg'; -import { CircleProgress } from 'src/components/CircleProgress'; import { getPaymentLimits } from 'src/features/Billing/billingUtils'; import { gPay, diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx index af9ecd6aae..9af3f08873 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx @@ -1,5 +1,5 @@ import { makePayment } from '@linode/api-v4/lib/account/payments'; -import { Tooltip } from '@linode/ui'; +import { CircleProgress, Tooltip } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { BraintreePayPalButtons, @@ -10,7 +10,6 @@ import { useQueryClient } from '@tanstack/react-query'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { reportException } from 'src/exceptionReporting'; import { getPaymentLimits } from 'src/features/Billing/billingUtils'; import { useAccount } from 'src/queries/account/account'; diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/GooglePayChip.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/GooglePayChip.tsx index b79ac9dadf..2b6e038b8e 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/GooglePayChip.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/GooglePayChip.tsx @@ -1,11 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; -import * as React from 'react'; import { useQueryClient } from '@tanstack/react-query'; +import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import GooglePayIcon from 'src/assets/icons/payment/googlePay.svg'; -import { CircleProgress } from 'src/components/CircleProgress'; -import { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer'; import { gPay, initGooglePaymentInstance, @@ -13,6 +12,8 @@ import { import { useScript } from 'src/hooks/useScript'; import { useClientToken } from 'src/queries/account/payment'; +import type { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer'; + const useStyles = makeStyles()(() => ({ button: { '&:hover': { diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalChip.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalChip.tsx index 69fac104d8..1ab3302de0 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalChip.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalChip.tsx @@ -1,26 +1,30 @@ import { addPaymentMethod } from '@linode/api-v4/lib/account/payments'; -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { BraintreePayPalButtons, - CreateBillingAgreementActions, FUNDING, - OnApproveBraintreeActions, - OnApproveBraintreeData, usePayPalScriptReducer, } from '@paypal/react-paypal-js'; -import { QueryClient, useQueryClient } from '@tanstack/react-query'; +import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; import React, { useEffect } from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { reportException } from 'src/exceptionReporting'; -import { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer'; import { useClientToken } from 'src/queries/account/payment'; import { accountQueries } from 'src/queries/account/queries'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { + CreateBillingAgreementActions, + OnApproveBraintreeActions, + OnApproveBraintreeData, +} from '@paypal/react-paypal-js'; +import type { QueryClient } from '@tanstack/react-query'; +import type { PaymentMessage } from 'src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer'; + const useStyles = makeStyles()(() => ({ disabled: { // Allows us to disable the pointer on the PayPal button because the SDK does not diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentMethods.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentMethods.tsx index 056fc1c7e6..8d9213eab8 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentMethods.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentMethods.tsx @@ -1,13 +1,14 @@ -import { PaymentMethod } from '@linode/api-v4/lib/account/types'; -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { PaymentMethodRow } from 'src/components/PaymentMethodRow/PaymentMethodRow'; import { Typography } from 'src/components/Typography'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; +import type { PaymentMethod } from '@linode/api-v4/lib/account/types'; +import type { APIError } from '@linode/api-v4/lib/types'; + interface Props { error: APIError[] | null | undefined; isChildUser?: boolean | undefined; diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx index 0c7fcb6e4b..484c18f014 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { Grid } from '@mui/material'; import React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useCloudPulseDashboardByIdQuery } from 'src/queries/cloudpulse/dashboards'; import { useResourcesQuery } from 'src/queries/cloudpulse/resources'; diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx index cb2ed55152..00f7383438 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx @@ -1,8 +1,7 @@ -import { Paper } from '@linode/ui'; +import { CircleProgress, Paper } from '@linode/ui'; import { Grid } from '@mui/material'; import React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useCloudPulseDashboardByIdQuery } from 'src/queries/cloudpulse/dashboards'; diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 5c3ce2fd3f..c0c24841b5 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { Box, Typography, useTheme } from '@mui/material'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LineGraph } from 'src/components/LineGraph/LineGraph'; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx index 1b58b3f7a3..9108c864b0 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx @@ -1,4 +1,4 @@ -import { BetaChip, Divider, Notice, Paper } from '@linode/ui'; +import { BetaChip, CircleProgress, Divider, Notice, Paper } from '@linode/ui'; import { createDatabaseSchema } from '@linode/validation/lib/databases.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -6,7 +6,6 @@ import { useFormik } from 'formik'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx index 8e87fa684c..492becef63 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx @@ -1,9 +1,8 @@ -import { Box, Divider, Notice, Paper } from '@linode/ui'; +import { Box, CircleProgress, Divider, Notice, Paper } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx index a45c181492..cdbd454b99 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx @@ -1,8 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { DatabaseEngineVersion } from 'src/features/Databases/DatabaseEngineVersion'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx index 9ccfea8854..2e1d643516 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx @@ -1,11 +1,11 @@ import { getSSLFields } from '@linode/api-v4/lib/databases/databases'; +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2/Grid2'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx index 2f9288bddd..0972480a95 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx @@ -1,5 +1,5 @@ import { getSSLFields } from '@linode/api-v4/lib/databases/databases'; -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -7,7 +7,6 @@ import { makeStyles } from 'tss-react/mui'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx index 117578b998..367dbb113b 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx @@ -1,10 +1,9 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { matchPath, useHistory, useParams } from 'react-router-dom'; import { BetaChip } from 'src/components/BetaChip/BetaChip'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx index f8430e0871..b026eb7765 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { Box } from '@mui/material'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; @@ -37,8 +37,8 @@ const DatabaseLanding = () => { const { isDatabasesV2Enabled, - isUserExistingBeta, isDatabasesV2GA, + isUserExistingBeta, isUserNewBeta, } = useIsDatabasesEnabled(); diff --git a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx b/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx index 6958ddd56c..f3df84a85d 100644 --- a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx +++ b/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx @@ -1,10 +1,9 @@ -import { Notice, Paper } from '@linode/ui'; +import { CircleProgress, Notice, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { TagCell } from 'src/components/TagCell/TagCell'; diff --git a/packages/manager/src/features/Domains/DomainDetail/index.tsx b/packages/manager/src/features/Domains/DomainDetail/index.tsx index 9d357c8b26..fdb8bb62e4 100644 --- a/packages/manager/src/features/Domains/DomainDetail/index.tsx +++ b/packages/manager/src/features/Domains/DomainDetail/index.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { NotFound } from 'src/components/NotFound'; import { useDomainQuery } from 'src/queries/domains'; diff --git a/packages/manager/src/features/Domains/DomainsLanding.tsx b/packages/manager/src/features/Domains/DomainsLanding.tsx index a3ff5e3ec6..ced0818f52 100644 --- a/packages/manager/src/features/Domains/DomainsLanding.tsx +++ b/packages/manager/src/features/Domains/DomainsLanding.tsx @@ -1,4 +1,4 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx index c79cecf7e0..fd69f869c2 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx @@ -1,11 +1,10 @@ import { acceptEntityTransfer } from '@linode/api-v4/lib/entity-transfers'; -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { Checkbox } from 'src/components/Checkbox'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx index 5809b559e2..bb2c3ce7e6 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/EntityTransfersLanding.tsx @@ -1,8 +1,7 @@ -import { EntityTransfer } from '@linode/api-v4/lib/entity-transfers'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { usePagination } from 'src/hooks/usePagination'; import { @@ -14,6 +13,8 @@ import { TransfersTable } from '../TransfersTable'; import { CreateTransferSuccessDialog } from './CreateTransferSuccessDialog'; import { TransferControls } from './TransferControls'; +import type { EntityTransfer } from '@linode/api-v4/lib/entity-transfers'; + export const EntityTransfersLanding = () => { const [successDialogOpen, setSuccessDialogOpen] = React.useState(true); const [transfer, setTransfer] = React.useState( diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx index b62f4f12ee..85a97b47c5 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/index.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useParams } from 'react-router-dom'; import { AkamaiBanner } from 'src/components/AkamaiBanner/AkamaiBanner'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog'; @@ -16,8 +16,8 @@ import { TabPanels } from 'src/components/Tabs/TabPanels'; import { Tabs } from 'src/components/Tabs/Tabs'; import { useFlags } from 'src/hooks/useFlags'; import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled'; -import { useFirewallQuery, useMutateFirewall } from 'src/queries/firewalls'; import { useAllFirewallDevicesQuery } from 'src/queries/firewalls'; +import { useFirewallQuery, useMutateFirewall } from 'src/queries/firewalls'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { getErrorStringOrDefault } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx index 96b3bef8db..664b60b082 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog'; import { Hidden } from 'src/components/Hidden'; @@ -15,14 +15,14 @@ import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableSortCell } from 'src/components/TableSortCell/TableSortCell'; +import { getRestrictedResourceText } from 'src/features/Account/utils'; import { useFlags } from 'src/hooks/useFlags'; import { useOrder } from 'src/hooks/useOrder'; import { usePagination } from 'src/hooks/usePagination'; -import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; +import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled'; import { useFirewallsQuery } from 'src/queries/firewalls'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; -import { getRestrictedResourceText } from 'src/features/Account/utils'; import { CreateFirewallDrawer } from './CreateFirewallDrawer'; import { FirewallDialog } from './FirewallDialog'; @@ -141,6 +141,13 @@ const FirewallLanding = () => { return ( { ) : undefined } breadcrumbProps={{ pathname: '/firewalls' }} + disabledCreateButton={isFirewallsCreationRestricted} docsLink="https://techdocs.akamai.com/cloud-computing/docs/getting-started-with-cloud-firewalls" entity="Firewall" - disabledCreateButton={isFirewallsCreationRestricted} onButtonClick={onOpenCreateDrawer} title="Firewalls" - buttonDataAttrs={{ - tooltipText: getRestrictedResourceText({ - action: 'create', - isSingular: false, - resourceType: 'Firewalls', - }), - }} /> diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx index 9882d8e869..4f5668d7d8 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx @@ -1,4 +1,10 @@ -import { IconButton, InputAdornment, Notice, Paper } from '@linode/ui'; +import { + CircleProgress, + IconButton, + InputAdornment, + Notice, + Paper, +} from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import { useQueryClient } from '@tanstack/react-query'; import { createLazyRoute } from '@tanstack/react-router'; @@ -9,7 +15,6 @@ import { debounce } from 'throttle-debounce'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Drawer } from 'src/components/Drawer'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx index a231585fca..28f35b9d2d 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx @@ -1,8 +1,13 @@ -import { Box, FormControl, Notice, RadioGroup } from '@linode/ui'; +import { + Box, + CircleProgress, + FormControl, + Notice, + RadioGroup, +} from '@linode/ui'; import { FormLabel } from '@mui/material'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; import { Radio } from 'src/components/Radio/Radio'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx index ca09a087b4..055c990ebb 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/NodePoolPanel.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useRegionsQuery } from 'src/queries/regions/regions'; diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx index a44ad7ce3d..13240877d9 100644 --- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx +++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx @@ -1,9 +1,8 @@ -import { Box, Divider, Notice } from '@linode/ui'; +import { Box, CircleProgress, Divider, Notice } from '@linode/ui'; import { Typography, styled } from '@mui/material'; import * as React from 'react'; import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar'; -import { CircleProgress } from 'src/components/CircleProgress'; import { RenderGuard } from 'src/components/RenderGuard'; import { EUAgreementCheckbox } from 'src/features/Account/Agreements/EUAgreementCheckbox'; import { useAccountAgreements } from 'src/queries/account/agreements'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx index ac02162e06..746070c2e0 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx index 2a762da39b..5b0388097b 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigDisplay.tsx @@ -1,12 +1,13 @@ -import { Box, Stack } from '@linode/ui'; +import { Box, CircleProgress, Stack } from '@linode/ui'; +import copy from 'copy-to-clipboard'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import DetailsIcon from 'src/assets/icons/code-file.svg'; +import CopyIcon from 'src/assets/icons/copy.svg'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; import ResetIcon from 'src/assets/icons/reset.svg'; -import CopyIcon from 'src/assets/icons/copy.svg'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; import { Typography } from 'src/components/Typography'; import { @@ -15,11 +16,9 @@ import { } from 'src/queries/kubernetes'; import { downloadFile } from 'src/utilities/downloadFile'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; -import copy from 'copy-to-clipboard'; -import { CircleProgress } from 'src/components/CircleProgress'; +import type { APIError } from '@linode/api-v4'; import type { Theme } from '@mui/material/styles'; -import { APIError } from '@linode/api-v4'; interface Props { clusterId: number; @@ -78,7 +77,7 @@ const renderEndpoint = ( endpointError?: string ) => { if (endpoint) { - return ; + return ; } if (endpointLoading) { return Loading...; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx index adcf11e964..c3ab1f7eda 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx @@ -1,11 +1,10 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TagCell } from 'src/components/TagCell/TagCell'; import { StyledBox, diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx index cc7c3e3e3e..a02072b5b5 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubernetesClusterDetail.tsx @@ -1,9 +1,8 @@ -import { Box, Stack } from '@linode/ui'; +import { Box, CircleProgress, Stack } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useLocation, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx index c99d836488..5003c76bfd 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx @@ -1,9 +1,8 @@ -import { Stack } from '@linode/ui'; +import { CircleProgress, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Typography } from 'src/components/Typography'; import { useAllKubernetesNodePoolQuery } from 'src/queries/kubernetes'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx index 30bbf9c23a..b39544ada4 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx @@ -1,9 +1,8 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput'; import { ErrorMessage } from 'src/components/ErrorMessage'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx index fa000d5acc..87f00290ca 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeClusterDialog.tsx @@ -1,11 +1,10 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Checkbox } from 'src/components/Checkbox'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx index 6de1559f69..8d1303c946 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesLanding/KubernetesLanding.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx index 72c79975c0..81b24b4f5f 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppsList.tsx @@ -1,10 +1,9 @@ -import { Box, Stack } from '@linode/ui'; +import { Box, CircleProgress, Stack } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; import { useController, useFormContext } from 'react-hook-form'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { getGeneratedLinodeLabel } from '../../utilities'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx index 7e96c88720..32c16c2294 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptDetailsDialog.tsx @@ -1,6 +1,6 @@ +import { CircleProgress } from '@linode/ui'; import React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { StackScript } from 'src/components/StackScript/StackScript'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx index e29b9b8931..174083b192 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionList.tsx @@ -1,5 +1,11 @@ import { getAPIFilterFromQuery } from '@linode/search'; -import { Box, IconButton, InputAdornment, Stack } from '@linode/ui'; +import { + Box, + CircleProgress, + IconButton, + InputAdornment, + Stack, +} from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import { useQueryClient } from '@tanstack/react-query'; import React, { useState } from 'react'; @@ -8,7 +14,6 @@ import { Waypoint } from 'react-waypoint'; import { debounce } from 'throttle-debounce'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Code } from 'src/components/Code/Code'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx index 2f54bf7911..dba0f22cc6 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/LinodeBackups.tsx @@ -1,12 +1,10 @@ -import { Box, Stack } from '@mui/material'; +import { Box, CircleProgress, Paper, Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useHistory, useParams } from 'react-router-dom'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Paper } from '@linode/ui'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx index ce89d14221..caa100ea31 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx @@ -1,4 +1,11 @@ -import { Box, Divider, FormControl, FormHelperText, Notice } from '@linode/ui'; +import { + Box, + CircleProgress, + Divider, + FormControl, + FormHelperText, + Notice, +} from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; @@ -10,7 +17,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { FormControlLabel } from 'src/components/FormControlLabel'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx index 689fe22187..4c03c53697 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx @@ -1,4 +1,4 @@ -import { Divider, Notice } from '@linode/ui'; +import { CircleProgress, Divider, Notice } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { remove, uniq, update } from 'ramda'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import Select from 'src/components/EnhancedSelect/Select'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx index 757979a0d8..9451285ac8 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx @@ -1,4 +1,4 @@ -import { Divider, Notice } from '@linode/ui'; +import { CircleProgress, Divider, Notice } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { @@ -17,7 +17,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { Typography } from 'src/components/Typography'; import { usePrevious } from 'src/hooks/usePrevious'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx index c9aae1fb1a..2aec79e2b6 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { parse as parseIP } from 'ipaddr.js'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { LinkButton } from 'src/components/LinkButton'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx index 7ee6cfd342..59fbbd0685 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddresses.tsx @@ -1,10 +1,9 @@ -import { Box, Paper, Stack } from '@linode/ui'; +import { Box, CircleProgress, Paper, Stack } from '@linode/ui'; import { useMediaQuery, useTheme } from '@mui/material'; import * as React from 'react'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import OrderBy from 'src/components/OrderBy'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; 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 c322fae26c..b8ca057e12 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,9 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, 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 { StyledLinodeUsage, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx index 5fcdab4f03..5510384fe4 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/NetworkingSummaryPanel/TransferHistory.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; import { IconButton } from '@mui/material'; @@ -8,7 +8,6 @@ import * as React from 'react'; import PendingIcon from 'src/assets/icons/pending.svg'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx index 389c863d32..faeb26b416 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Notice } from '@linode/ui'; +import { Box, CircleProgress, Divider, Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { Button } from 'src/components/Button/Button'; import { Checkbox } from 'src/components/Checkbox'; -import { CircleProgress } from 'src/components/CircleProgress/CircleProgress'; import { Dialog } from 'src/components/Dialog/Dialog'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx index e4144c3dbb..7d098c3472 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx @@ -1,10 +1,9 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { Box, Stack } from '@mui/material'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { Accordion } from 'src/components/Accordion'; -import { CircleProgress } from 'src/components/CircleProgress'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx index d6a3576cb9..d4625c5dd4 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/StatsPanel.tsx @@ -1,6 +1,6 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Typography } from 'src/components/Typography'; interface Props { diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx index e6e285c8bb..645a7018fc 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetail.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { @@ -9,7 +10,6 @@ import { useRouteMatch, } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { useLinodeQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx index 16d3706d31..d1c6eb1da1 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailHeader/LinodeDetailHeader.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx index dccfa5c7e0..3949fa2183 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodesDetailNavigation.tsx @@ -1,3 +1,4 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { @@ -7,7 +8,6 @@ import { useRouteMatch, } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx index 72d21d9f21..8c2b2aa11d 100644 --- a/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx +++ b/packages/manager/src/features/Linodes/LinodesLanding/LinodesLanding.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { Link, withRouter } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Lish/Glish.tsx b/packages/manager/src/features/Lish/Glish.tsx index bccf58d5fd..b18a34d5a4 100644 --- a/packages/manager/src/features/Lish/Glish.tsx +++ b/packages/manager/src/features/Lish/Glish.tsx @@ -1,9 +1,8 @@ /* eslint-disable no-unused-expressions */ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; import { VncScreen } from 'react-vnc'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import type { LinodeLishData } from '@linode/api-v4/lib/linodes'; diff --git a/packages/manager/src/features/Lish/Lish.tsx b/packages/manager/src/features/Lish/Lish.tsx index 1cbb251f1d..f935de8126 100644 --- a/packages/manager/src/features/Lish/Lish.tsx +++ b/packages/manager/src/features/Lish/Lish.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useHistory, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { TabLinkList } from 'src/components/Tabs/TabLinkList'; diff --git a/packages/manager/src/features/Lish/Weblish.tsx b/packages/manager/src/features/Lish/Weblish.tsx index 3b7754871b..b1c40220f4 100644 --- a/packages/manager/src/features/Lish/Weblish.tsx +++ b/packages/manager/src/features/Lish/Weblish.tsx @@ -1,8 +1,8 @@ /* eslint-disable scanjs-rules/call_addEventListener */ +import { CircleProgress } from '@linode/ui'; import { Terminal } from '@xterm/xterm'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { ParsePotentialLishErrorString, diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx index 64222f5404..4fda02f2e4 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx @@ -1,16 +1,17 @@ -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Placeholder } from 'src/components/Placeholder/Placeholder'; -import { WithStartAndEnd } from '../../../request.types'; import { useGraphs } from '../OverviewGraphs/useGraphs'; import { DiskGraph } from './DiskGraph'; import { StyledBox, StyledTimeRangeSelect } from './Disks.styles'; +import type { WithStartAndEnd } from '../../../request.types'; +import type { APIError } from '@linode/api-v4/lib/types'; + interface Props { clientAPIKey: string; clientID: number; diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx index a3c858b2d1..818140d838 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LongviewLineGraph } from 'src/components/LongviewLineGraph/LongviewLineGraph'; import { Placeholder } from 'src/components/Placeholder/Placeholder'; @@ -12,12 +12,13 @@ import { statMax, } from 'src/features/Longview/shared/utilities'; -import { +import { convertData } from '../../../shared/formatters'; +import GraphCard from '../../GraphCard'; + +import type { InboundOutboundNetwork, LongviewNetworkInterface, } from '../../../request.types'; -import { convertData } from '../../../shared/formatters'; -import GraphCard from '../../GraphCard'; interface Props { end: number; diff --git a/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx b/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx index 6953ba9e37..e95e513062 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/LongviewDetail.tsx @@ -1,11 +1,10 @@ -import { Notice, Paper } from '@linode/ui'; +import { CircleProgress, Notice, Paper } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import { pathOr } from 'ramda'; import * as React from 'react'; import { matchPath } from 'react-router-dom'; import { compose } from 'recompose'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx index 4e1359668d..a66c346aa7 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewList.tsx @@ -1,12 +1,10 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress, Paper } from '@linode/ui'; import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import Paginate from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; import { LongviewListRows } from './LongviewListRows'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx index f692007c36..45a99427cf 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx @@ -2,12 +2,11 @@ import { getActiveLongviewPlan, updateActiveLongviewPlan, } from '@linode/api-v4/lib/longview'; -import { Notice, Paper } from '@linode/ui'; +import { CircleProgress, Notice, Paper } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Radio } from 'src/components/Radio/Radio'; import { SupportLink } from 'src/components/SupportLink'; diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx index d8290803e1..a06c13055b 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedChartPanel.tsx @@ -1,9 +1,8 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx index e824eace56..9bad1f8d7f 100644 --- a/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx +++ b/packages/manager/src/features/Managed/ManagedDashboardCard/ManagedDashboardCard.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { useAllManagedIssuesQuery, diff --git a/packages/manager/src/features/Managed/Monitors/HistoryDrawer.tsx b/packages/manager/src/features/Managed/Monitors/HistoryDrawer.tsx index 4229160b09..85dbe89200 100644 --- a/packages/manager/src/features/Managed/Monitors/HistoryDrawer.tsx +++ b/packages/manager/src/features/Managed/Monitors/HistoryDrawer.tsx @@ -1,15 +1,16 @@ -import { ManagedIssue } from '@linode/api-v4/lib/managed'; -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { IssueCalendar } from './IssueCalendar'; +import type { ManagedIssue } from '@linode/api-v4/lib/managed'; +import type { APIError } from '@linode/api-v4/lib/types'; + interface HistoryDrawerProps { error?: APIError[] | null; issues: ManagedIssue[] | undefined; diff --git a/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx b/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx index 5c4730043d..4cd3d6d944 100644 --- a/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/LinodePubKey.styles.tsx @@ -1,9 +1,8 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { CircleProgress, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import SSHKeyIcon from 'src/assets/icons/ssh-key.svg'; -import { CircleProgress } from 'src/components/CircleProgress'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; export const StyledCopyToClipboardGrid = styled(Grid, { diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx index 5def42f306..840a68aab4 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx @@ -1,4 +1,4 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { @@ -8,7 +8,6 @@ import { useParams, } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx index b610a54444..3ebb2b486c 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.tsx @@ -1,14 +1,12 @@ -import { Box } from '@linode/ui'; -import { useTheme } from '@mui/material/styles'; +import { Box, CircleProgress, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { useParams } from 'react-router-dom'; import PendingIcon from 'src/assets/icons/pending.svg'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Paper } from '@linode/ui'; import { Typography } from 'src/components/Typography'; import { formatBitsPerSecond } from 'src/features/Longview/shared/utilities'; import { diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx index 5af50f420d..66084266b3 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancers.tsx @@ -1,7 +1,7 @@ +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { Route, Switch } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner'; const NodeBalancerDetail = React.lazy(() => diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx index 21f130e327..7b17b3496d 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLanding.tsx @@ -1,8 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; diff --git a/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotifications.tsx b/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotifications.tsx index 8a32e960cf..818dc19a08 100644 --- a/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotifications.tsx +++ b/packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotifications.tsx @@ -1,9 +1,8 @@ +import { CircleProgress } from '@linode/ui'; import React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress'; -import { useStyles } from '../NotificationCenter.styles'; import { StyledCaret, StyledEmptyMessage, @@ -11,6 +10,7 @@ import { StyledLoadingContainer, StyledNotificationCenterItem, } from '../NotificationCenter.styles'; +import { useStyles } from '../NotificationCenter.styles'; import type { NotificationCenterNotificationsItem } from '../types'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx index 5b98653ade..d020fe88a4 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx @@ -1,10 +1,9 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { createObjectStorageKeysSchema } from '@linode/validation/lib/objectStorageKeys.schema'; import { Formik } from 'formik'; import * as React from 'react'; 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 { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx index 4d3f0b058a..7c8f4deb8e 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx @@ -1,4 +1,4 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { createObjectStorageKeysSchema, updateObjectStorageKeysSchema, @@ -7,7 +7,6 @@ import { useFormik } from 'formik'; import React, { useEffect, useState } from 'react'; 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 { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx index dd52c4ad66..ebfea82f9e 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx @@ -1,4 +1,4 @@ -import { Notice, Paper } from '@linode/ui'; +import { CircleProgress, Notice, Paper } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useFormik } from 'formik'; @@ -7,7 +7,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Button } from 'src/components/Button/Button'; -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'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx index 3364a09a27..5bfdeed214 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx @@ -1,9 +1,8 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -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'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx index 1c595b0567..0cb0316849 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx @@ -1,9 +1,8 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -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'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx index 7b7b1b2513..7cfefa5631 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OveragePricing.tsx @@ -1,8 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TextTooltip } from 'src/components/TextTooltip'; import { Typography } from 'src/components/Typography'; import { useNetworkTransferPricesQuery } from 'src/queries/networkTransfer'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx index 902bd71064..918302d6cc 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx @@ -1,9 +1,8 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -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'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx index 27280179d3..67d1cb570d 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx @@ -1,10 +1,9 @@ import { PLACEMENT_GROUP_TYPES } from '@linode/api-v4'; -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx index ed33610ca1..ed9c0f34b2 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsEditDrawer.tsx @@ -2,7 +2,7 @@ import { PLACEMENT_GROUP_POLICIES, PLACEMENT_GROUP_TYPES, } from '@linode/api-v4'; -import { Divider, Notice, Stack } from '@linode/ui'; +import { CircleProgress, Divider, Notice, Stack } from '@linode/ui'; import { updatePlacementGroupSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -10,7 +10,6 @@ import * as React from 'react'; import { useParams } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DescriptionList } from 'src/components/DescriptionList/DescriptionList'; import { Drawer } from 'src/components/Drawer'; import { NotFound } from 'src/components/NotFound'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx index cdf640b57b..f6c3a75f98 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx @@ -1,10 +1,10 @@ +import { CircleProgress } from '@linode/ui'; import { useMediaQuery, useTheme } from '@mui/material'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useParams } from 'react-router-dom'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx index 8b179291dd..98a372e0ad 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx @@ -1,10 +1,9 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useParams } from 'react-router-dom'; 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 { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx index 37bf55467c..2045fc45d9 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx @@ -1,10 +1,9 @@ -import { Divider, Paper } from '@linode/ui'; +import { CircleProgress, Divider, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useLocation } from 'react-router-dom'; -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'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx index e0cba8feed..31ef475f8b 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/SecurityQuestions.tsx @@ -1,11 +1,10 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Link } from 'src/components/Link'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx index 5881375ed7..4b792f224b 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/EnableTwoFactorForm.tsx @@ -1,8 +1,7 @@ import { confirmTwoFactor } from '@linode/api-v4/lib/profile'; -import { Divider, Notice } from '@linode/ui'; +import { CircleProgress, Divider, Notice } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView'; diff --git a/packages/manager/src/features/Profile/Referrals/Referrals.tsx b/packages/manager/src/features/Profile/Referrals/Referrals.tsx index 3694d5705e..44e76e91be 100644 --- a/packages/manager/src/features/Profile/Referrals/Referrals.tsx +++ b/packages/manager/src/features/Profile/Referrals/Referrals.tsx @@ -1,4 +1,4 @@ -import { Notice, Paper } from '@linode/ui'; +import { CircleProgress, Notice, Paper } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; @@ -6,7 +6,6 @@ import * as React from 'react'; import Step1 from 'src/assets/referrals/step-1.svg'; import Step2 from 'src/assets/referrals/step-2.svg'; import Step3 from 'src/assets/referrals/step-3.svg'; -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'; diff --git a/packages/manager/src/features/Search/SearchLanding.tsx b/packages/manager/src/features/Search/SearchLanding.tsx index 383c50ffec..afc3dec385 100644 --- a/packages/manager/src/features/Search/SearchLanding.tsx +++ b/packages/manager/src/features/Search/SearchLanding.tsx @@ -1,11 +1,10 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import { equals } from 'ramda'; import * as React from 'react'; import { debounce } from 'throttle-debounce'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Typography } from 'src/components/Typography'; import { useAPISearch } from 'src/features/Search/useAPISearch'; import { useIsLargeAccount } from 'src/hooks/useIsLargeAccount'; diff --git a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx index 9d549f97ba..32354850dd 100644 --- a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx +++ b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx @@ -1,10 +1,9 @@ import { getStackScript } from '@linode/api-v4/lib/stackscripts'; -import { Box, Notice } from '@linode/ui'; +import { Box, CircleProgress, Notice } from '@linode/ui'; import * as React from 'react'; import { compose } from 'recompose'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress'; import { RenderGuard } from 'src/components/RenderGuard'; import { Typography } from 'src/components/Typography'; import { withProfile } from 'src/containers/profile.container'; diff --git a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx index 6d3501573a..cab45abec8 100644 --- a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx +++ b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptsSection.tsx @@ -1,8 +1,6 @@ -import { Image } from '@linode/api-v4/lib/images'; -import { StackScript } from '@linode/api-v4/lib/stackscripts'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TableBody } from 'src/components/TableBody'; import { TableRow } from 'src/components/TableRow'; import { useProfile } from 'src/queries/profile/profile'; @@ -12,6 +10,9 @@ import { truncate } from 'src/utilities/truncate'; import { StyledStackScriptSectionTableCell } from '../CommonStackScript.styles'; import StackScriptSelectionRow from './StackScriptSelectionRow'; +import type { Image } from '@linode/api-v4/lib/images'; +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; + interface Props { currentUser: string; data: StackScript[]; diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx index a08edd0ce3..4e2aea38ed 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx @@ -1,4 +1,4 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { pathOr } from 'ramda'; import * as React from 'react'; import { withRouter } from 'react-router-dom'; @@ -7,7 +7,6 @@ import { compose } from 'recompose'; 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 { withProfile } from 'src/containers/profile.container'; import { isLinodeKubeImageId } from 'src/store/image/image.helpers'; diff --git a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx index 039c4ce1a6..87acdf77fd 100644 --- a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx @@ -3,7 +3,7 @@ import { getStackScript, updateStackScript, } from '@linode/api-v4/lib/stackscripts'; -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import { equals } from 'ramda'; import * as React from 'react'; import { withRouter } from 'react-router-dom'; @@ -11,7 +11,6 @@ import { compose } from 'recompose'; import { debounce } from 'throttle-debounce'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptsSection.tsx b/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptsSection.tsx index cb6c1bce80..dc2e431955 100644 --- a/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptsSection.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptPanel/StackScriptsSection.tsx @@ -1,14 +1,9 @@ -import { Image } from '@linode/api-v4/lib/images'; -import { StackScript } from '@linode/api-v4/lib/stackscripts'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TableBody } from 'src/components/TableBody'; import { TableRow } from 'src/components/TableRow'; -import { - StackScriptCategory, - canUserModifyAccountStackScript, -} from 'src/features/StackScripts/stackScriptUtils'; +import { canUserModifyAccountStackScript } from 'src/features/StackScripts/stackScriptUtils'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { formatDate } from 'src/utilities/formatDate'; import { stripImageName } from 'src/utilities/stripImageName'; @@ -16,6 +11,10 @@ import { stripImageName } from 'src/utilities/stripImageName'; import { StyledStackScriptSectionTableCell } from '../CommonStackScript.styles'; import { StackScriptRow } from './StackScriptRow'; +import type { Image } from '@linode/api-v4/lib/images'; +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; +import type { StackScriptCategory } from 'src/features/StackScripts/stackScriptUtils'; + export interface Props { // change until we're actually using it. category: StackScriptCategory | string; diff --git a/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx b/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx index d1f8e8a51b..22de1ca959 100644 --- a/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptsDetail.tsx @@ -1,13 +1,11 @@ import { - StackScript, getStackScript, updateStackScript, } from '@linode/api-v4/lib/stackscripts'; -import { APIError } from '@linode/api-v4/lib/types'; +import { CircleProgress } from '@linode/ui'; import * as React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; import { StackScript as _StackScript } from 'src/components/StackScript/StackScript'; @@ -20,6 +18,9 @@ import { getStackScriptUrl, } from './stackScriptUtils'; +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; +import type { APIError } from '@linode/api-v4/lib/types'; + export const StackScriptsDetail = () => { const { _hasGrant, _isRestrictedUser, profile } = useAccountManagement(); const { data: grants } = useGrants(); diff --git a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx index 6b749ec1a2..50072049ae 100644 --- a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx @@ -1,10 +1,9 @@ -import { Notice } from '@linode/ui'; +import { CircleProgress, Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; 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 { listToItemsByID } from 'src/queries/base'; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx index b1902189e0..0eaea7acc9 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx @@ -1,4 +1,4 @@ -import { Stack } from '@linode/ui'; +import { CircleProgress, Stack } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; @@ -7,7 +7,6 @@ import * as React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; import { Waypoint } from 'react-waypoint'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Users/UserDetail.tsx b/packages/manager/src/features/Users/UserDetail.tsx index 6bba93cb2d..795cd77f41 100644 --- a/packages/manager/src/features/Users/UserDetail.tsx +++ b/packages/manager/src/features/Users/UserDetail.tsx @@ -1,9 +1,9 @@ +import { CircleProgress } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation, useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; diff --git a/packages/manager/src/features/Users/UserPermissions.styles.ts b/packages/manager/src/features/Users/UserPermissions.styles.ts index a4dd0c9e51..636d0e3da4 100644 --- a/packages/manager/src/features/Users/UserPermissions.styles.ts +++ b/packages/manager/src/features/Users/UserPermissions.styles.ts @@ -1,8 +1,7 @@ -import { Paper } from '@linode/ui'; +import { CircleProgress, Paper } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; -import { CircleProgress } from 'src/components/CircleProgress'; import Select from 'src/components/EnhancedSelect/Select'; export const StyledSelect = styled(Select, { diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx index 4bc2481f26..e980741e33 100644 --- a/packages/manager/src/features/Users/UserPermissions.tsx +++ b/packages/manager/src/features/Users/UserPermissions.tsx @@ -4,15 +4,13 @@ import { updateGrants, updateUser, } from '@linode/api-v4/lib/account'; -import { Box, Notice } from '@linode/ui'; -import { Paper } from '@mui/material'; +import { Box, CircleProgress, Notice, Paper } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { enqueueSnackbar } from 'notistack'; import { compose, flatten, lensPath, omit, set } from 'ramda'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { SelectionCard } from 'src/components/SelectionCard/SelectionCard'; diff --git a/packages/manager/src/features/Users/UserProfile/UserProfile.tsx b/packages/manager/src/features/Users/UserProfile/UserProfile.tsx index a422515620..c7a820cd90 100644 --- a/packages/manager/src/features/Users/UserProfile/UserProfile.tsx +++ b/packages/manager/src/features/Users/UserProfile/UserProfile.tsx @@ -1,8 +1,7 @@ -import { Stack } from '@linode/ui'; +import { CircleProgress, Stack } from '@linode/ui'; import React from 'react'; import { useParams } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { NotFound } from 'src/components/NotFound'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx index 725f74c4bb..a2287b14be 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx @@ -1,8 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import ErrorOutline from '@mui/icons-material/ErrorOutline'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { Hidden } from 'src/components/Hidden'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx index 48c43928ab..166966c212 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCDetail.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { useParams } from 'react-router-dom'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { CircleProgress } from 'src/components/CircleProgress/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { EntityHeader } from 'src/components/EntityHeader/EntityHeader'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx index f8ccdc60d4..3de0bd80f7 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/VPCSubnetsTable.tsx @@ -1,9 +1,8 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; -import { CircleProgress } from 'src/components/CircleProgress/CircleProgress'; import { CollapsibleTable } from 'src/components/CollapsibleTable/CollapsibleTable'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx index 5a212586d7..d9761248f1 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCLanding.tsx @@ -2,7 +2,7 @@ import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { CircleProgress } from 'src/components/CircleProgress'; +import { CircleProgress } from '@linode/ui'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Hidden } from 'src/components/Hidden'; import { LandingHeader } from 'src/components/LandingHeader'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx index aebc1294fd..f7d7bfbd1b 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx @@ -1,7 +1,6 @@ -import { Box } from '@linode/ui'; +import { Box, CircleProgress } from '@linode/ui'; import * as React from 'react'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DisplayPrice } from 'src/components/DisplayPrice'; import { MAX_VOLUME_SIZE } from 'src/constants'; import { useVolumeTypesQuery } from 'src/queries/volumes/volumes'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx index 6577ff113c..97abcfe492 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/SizeField.tsx @@ -1,8 +1,12 @@ -import { Box, FormHelperText, InputAdornment } from '@linode/ui'; +import { + Box, + CircleProgress, + FormHelperText, + InputAdornment, +} from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { CircleProgress } from 'src/components/CircleProgress'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { MAX_VOLUME_SIZE } from 'src/constants'; diff --git a/packages/manager/src/features/Volumes/VolumesLanding.tsx b/packages/manager/src/features/Volumes/VolumesLanding.tsx index 972d7d6709..2ea24e180a 100644 --- a/packages/manager/src/features/Volumes/VolumesLanding.tsx +++ b/packages/manager/src/features/Volumes/VolumesLanding.tsx @@ -1,11 +1,10 @@ -import { IconButton, InputAdornment } from '@linode/ui'; +import { CircleProgress, IconButton, InputAdornment } from '@linode/ui'; import CloseIcon from '@mui/icons-material/Close'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { debounce } from 'throttle-debounce'; -import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/ui/.changeset/pr-11214-added-1730844268443.md b/packages/ui/.changeset/pr-11214-added-1730844268443.md new file mode 100644 index 0000000000..93a5d6e600 --- /dev/null +++ b/packages/ui/.changeset/pr-11214-added-1730844268443.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +Migrate CircleProgress to ui package ([#11214](https://github.com/linode/manager/pull/11214)) diff --git a/packages/manager/src/components/CircleProgress/CircleProgress.stories.tsx b/packages/ui/src/components/CircleProgress/CircleProgress.stories.tsx similarity index 62% rename from packages/manager/src/components/CircleProgress/CircleProgress.stories.tsx rename to packages/ui/src/components/CircleProgress/CircleProgress.stories.tsx index 28b1e392d3..93938f88cb 100644 --- a/packages/manager/src/components/CircleProgress/CircleProgress.stories.tsx +++ b/packages/ui/src/components/CircleProgress/CircleProgress.stories.tsx @@ -2,15 +2,15 @@ import React from 'react'; import { CircleProgress } from './CircleProgress'; +import type { CircleProgressProps } from './CircleProgress'; import type { Meta, StoryObj } from '@storybook/react'; -type Story = StoryObj; - -export const Default: Story = { +export const Default: StoryObj = { render: (args) => , }; -const meta: Meta = { +const meta: Meta = { + args: { size: 'md' }, component: CircleProgress, title: 'Components/Loading States/Circle Progress', }; diff --git a/packages/manager/src/components/CircleProgress/CircleProgress.test.tsx b/packages/ui/src/components/CircleProgress/CircleProgress.test.tsx similarity index 75% rename from packages/manager/src/components/CircleProgress/CircleProgress.test.tsx rename to packages/ui/src/components/CircleProgress/CircleProgress.test.tsx index 989113ef28..9784efa81e 100644 --- a/packages/manager/src/components/CircleProgress/CircleProgress.test.tsx +++ b/packages/ui/src/components/CircleProgress/CircleProgress.test.tsx @@ -1,14 +1,16 @@ +import { render } from '@testing-library/react'; import React from 'react'; -import { renderWithTheme } from 'src/utilities/testHelpers'; - import { CircleProgress } from './CircleProgress'; +import { expect, describe, it } from 'vitest'; +import '@testing-library/jest-dom/vitest'; + const CONTENT_LOADING = 'Content is loading'; describe('CircleProgress', () => { it('renders a CircleProgress properly', () => { - const screen = renderWithTheme(); + const screen = render(); const circleProgress = screen.getByLabelText(CONTENT_LOADING); expect(circleProgress).toBeVisible(); @@ -18,7 +20,7 @@ describe('CircleProgress', () => { }); it('renders a small CircleProgress', () => { - const screen = renderWithTheme(); + const screen = render(); const circleProgress = screen.getByLabelText(CONTENT_LOADING); expect(circleProgress).toBeVisible(); @@ -26,7 +28,7 @@ describe('CircleProgress', () => { }); it('sets a small CircleProgress with no padding', () => { - const screen = renderWithTheme(); + const screen = render(); const circleProgress = screen.getByLabelText(CONTENT_LOADING); expect(circleProgress).toBeVisible(); diff --git a/packages/manager/src/components/CircleProgress/CircleProgress.tsx b/packages/ui/src/components/CircleProgress/CircleProgress.tsx similarity index 94% rename from packages/manager/src/components/CircleProgress/CircleProgress.tsx rename to packages/ui/src/components/CircleProgress/CircleProgress.tsx index 04270ba551..49a96ec8ee 100644 --- a/packages/manager/src/components/CircleProgress/CircleProgress.tsx +++ b/packages/ui/src/components/CircleProgress/CircleProgress.tsx @@ -1,4 +1,5 @@ -import { Box, omittedProps } from '@linode/ui'; +import { Box } from '../Box'; +import { omittedProps } from '../../utilities'; import _CircularProgress from '@mui/material/CircularProgress'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -6,7 +7,8 @@ import * as React from 'react'; import type { CircularProgressProps } from '@mui/material/CircularProgress'; import type { SxProps, Theme } from '@mui/material/styles'; -interface CircleProgressProps extends Omit { +export interface CircleProgressProps + extends Omit { /** * Additional child elements to pass in */ diff --git a/packages/ui/src/components/CircleProgress/index.ts b/packages/ui/src/components/CircleProgress/index.ts new file mode 100644 index 0000000000..49d8f6fd92 --- /dev/null +++ b/packages/ui/src/components/CircleProgress/index.ts @@ -0,0 +1 @@ +export * from './CircleProgress'; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 99c1cd89b7..663af3c405 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -1,6 +1,7 @@ export * from './BetaChip'; export * from './Box'; export * from './Chip'; +export * from './CircleProgress'; export * from './Divider'; export * from './FormControl'; export * from './FormHelperText'; From b40d5bd5302c41f91523ffad18302b909c17b5a7 Mon Sep 17 00:00:00 2001 From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Date: Thu, 14 Nov 2024 16:44:35 -0500 Subject: [PATCH 020/131] feat: [M3-8883] - Use our search parser on Images Landing (#11233) * initial work * make overriding contains filter shape more generic * make things more generic * allow underscore in seaches * allow `:` in searches * only disable retries if the user is searching * add changeset * add changeset * use `errorText` prop @hana-akamai * add comment to summarize what is filterable --------- Co-authored-by: Banks Nussman --- .../pr-11233-added-1731517130535.md | 5 ++ packages/api-v4/src/iam/types.ts | 2 +- packages/api-v4/src/types.ts | 3 +- .../pr-11233-added-1731517041735.md | 5 ++ .../Images/ImagesLanding/ImagesLanding.tsx | 76 +++++++++++++++---- packages/search/src/search.peggy | 26 +++++-- packages/search/src/search.test.ts | 16 ++++ packages/search/src/search.ts | 12 ++- 8 files changed, 119 insertions(+), 26 deletions(-) create mode 100644 packages/api-v4/.changeset/pr-11233-added-1731517130535.md create mode 100644 packages/manager/.changeset/pr-11233-added-1731517041735.md diff --git a/packages/api-v4/.changeset/pr-11233-added-1731517130535.md b/packages/api-v4/.changeset/pr-11233-added-1731517130535.md new file mode 100644 index 0000000000..6258d7497b --- /dev/null +++ b/packages/api-v4/.changeset/pr-11233-added-1731517130535.md @@ -0,0 +1,5 @@ +--- +"@linode/api-v4": Added +--- + +Missing `+eq` type to `FilterConditionTypes` interface ([#11233](https://github.com/linode/manager/pull/11233)) diff --git a/packages/api-v4/src/iam/types.ts b/packages/api-v4/src/iam/types.ts index 57029d3d9e..8aa9fd0ce1 100644 --- a/packages/api-v4/src/iam/types.ts +++ b/packages/api-v4/src/iam/types.ts @@ -50,4 +50,4 @@ export interface Roles { name: string; description: string; permissions?: PermissionType[]; -} \ No newline at end of file +} diff --git a/packages/api-v4/src/types.ts b/packages/api-v4/src/types.ts index 13d8df47e7..0231d49a09 100644 --- a/packages/api-v4/src/types.ts +++ b/packages/api-v4/src/types.ts @@ -39,11 +39,12 @@ export interface RequestOptions { headers?: RequestHeaders; } -interface FilterConditionTypes { +export interface FilterConditionTypes { '+and'?: Filter[]; '+or'?: Filter[] | string[]; '+order_by'?: string; '+order'?: 'asc' | 'desc'; + '+eq'?: string | number; '+gt'?: number; '+gte'?: number; '+lt'?: number; diff --git a/packages/manager/.changeset/pr-11233-added-1731517041735.md b/packages/manager/.changeset/pr-11233-added-1731517041735.md new file mode 100644 index 0000000000..e0bb94b1a7 --- /dev/null +++ b/packages/manager/.changeset/pr-11233-added-1731517041735.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +Ability to perform complex search queries on the Images landing page ([#11233](https://github.com/linode/manager/pull/11233)) diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx index 4f5668d7d8..56ff19e48d 100644 --- a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx +++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.tsx @@ -1,3 +1,4 @@ +import { getAPIFilterFromQuery } from '@linode/search'; import { CircleProgress, IconButton, @@ -28,6 +29,7 @@ import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty'; +import { TableRowError } from 'src/components/TableRowError/TableRowError'; import { TableSortCell } from 'src/components/TableSortCell'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; @@ -59,7 +61,7 @@ import type { Handlers as ImageHandlers } from './ImagesActionMenu'; import type { Filter, ImageStatus } from '@linode/api-v4'; import type { Theme } from '@mui/material/styles'; -const searchQueryKey = 'query'; +const searchParamKey = 'query'; const useStyles = makeStyles()((theme: Theme) => ({ imageTable: { @@ -102,10 +104,34 @@ export const ImagesLanding = () => { globalGrantType: 'add_images', }); const queryParams = new URLSearchParams(location.search); - const imageLabelFromParam = queryParams.get(searchQueryKey) ?? ''; + const query = queryParams.get(searchParamKey) ?? ''; const queryClient = useQueryClient(); + /** + * At the time of writing: `label`, `tags`, `size`, `status`, `region` are filterable. + * + * Some fields like `status` and `region` can't be used in complex filters using '+or' / '+and' + * + * Using `tags` in a '+or' is currently broken. See ARB-5792 + */ + const { error: searchParseError, filter } = getAPIFilterFromQuery(query, { + // Because Images have an array of region objects, we need to transform + // search queries like "region: us-east" to { regions: { region: "us-east" } } + // rather than the default behavior which is { region: { '+contains': "us-east" } } + filterShapeOverrides: { + '+contains': { + field: 'region', + filter: (value) => ({ regions: { region: value } }), + }, + '+eq': { + field: 'region', + filter: (value) => ({ regions: { region: value } }), + }, + }, + searchableFieldsWithoutOperator: ['label', 'tags'], + }); + const paginationForManualImages = usePagination(1, 'images-manual', 'manual'); const { @@ -124,7 +150,7 @@ export const ImagesLanding = () => { const manualImagesFilter: Filter = { ['+order']: manualImagesOrder, ['+order_by']: manualImagesOrderBy, - ...(imageLabelFromParam && { label: { '+contains': imageLabelFromParam } }), + ...filter, }; const { @@ -148,6 +174,10 @@ export const ImagesLanding = () => { // to update Image region statuses. We should make the API // team and Images team implement events for this. refetchInterval: 30_000, + // If we have a search query, disable retries to keep the UI + // snappy if the user inputs an invalid X-Filter. Otherwise, + // pass undefined to use the default retry behavior. + retry: query ? false : undefined, } ); @@ -173,7 +203,7 @@ export const ImagesLanding = () => { const automaticImagesFilter: Filter = { ['+order']: automaticImagesOrder, ['+order_by']: automaticImagesOrderBy, - ...(imageLabelFromParam && { label: { '+contains': imageLabelFromParam } }), + ...filter, }; const { @@ -190,6 +220,12 @@ export const ImagesLanding = () => { ...automaticImagesFilter, is_public: false, type: 'automatic', + }, + { + // If we have a search query, disable retries to keep the UI + // snappy if the user inputs an invalid X-Filter. Otherwise, + // pass undefined to use the default retry behavior. + retry: query ? false : undefined, } ); @@ -331,13 +367,13 @@ export const ImagesLanding = () => { }; const resetSearch = () => { - queryParams.delete(searchQueryKey); + queryParams.delete(searchParamKey); history.push({ search: queryParams.toString() }); }; const onSearch = (e: React.ChangeEvent) => { queryParams.delete('page'); - queryParams.set(searchQueryKey, e.target.value); + queryParams.set(searchParamKey, e.target.value); history.push({ search: queryParams.toString() }); }; @@ -366,7 +402,7 @@ export const ImagesLanding = () => { return ; } - if (manualImagesError || automaticImagesError) { + if (!query && (manualImagesError || automaticImagesError)) { return ( @@ -375,11 +411,7 @@ export const ImagesLanding = () => { ); } - if ( - manualImages?.results === 0 && - automaticImages?.results === 0 && - !imageLabelFromParam - ) { + if (manualImages?.results === 0 && automaticImages?.results === 0 && !query) { return ; } @@ -404,10 +436,9 @@ export const ImagesLanding = () => { /> {isFetching && } - { onChange={debounce(400, (e) => { onSearch(e); })} + containerProps={{ mb: 2 }} + errorText={searchParseError?.message} hideLabel label="Search" placeholder="Search Images" - sx={{ mb: 2 }} - value={imageLabelFromParam} + value={query} />
@@ -499,6 +531,12 @@ export const ImagesLanding = () => { message={`No Custom Images to display.`} /> )} + {manualImagesError && query && ( + + )} {manualImages?.data.map((manualImage) => ( { message={`No Recovery Images to display.`} /> )} + {automaticImagesError && query && ( + + )} {automaticImages?.data.map((automaticImage) => ( { error: null, }); }); + + it("allows custom filter transformations on a per-field basis", () => { + const query = "region: us-east"; + + expect( + getAPIFilterFromQuery(query, { + searchableFieldsWithoutOperator: [], + filterShapeOverrides: { + '+contains': { field: 'region', filter: (value) => ({ regions: { region: value } }) } + } + }) + ).toEqual({ + filter: { regions: { region: 'us-east' } }, + error: null, + }); + }); }); diff --git a/packages/search/src/search.ts b/packages/search/src/search.ts index 3cfb368c29..580ccba847 100644 --- a/packages/search/src/search.ts +++ b/packages/search/src/search.ts @@ -1,5 +1,5 @@ import { generate } from 'peggy'; -import type { Filter } from '@linode/api-v4'; +import type { Filter, FilterConditionTypes } from '@linode/api-v4'; import grammar from './search.peggy?raw'; const parser = generate(grammar); @@ -8,10 +8,16 @@ interface Options { /** * Defines the API fields filtered against (currently using +contains) * when the search query contains no operators. - * + * * @example ['label', 'tags'] */ searchableFieldsWithoutOperator: string[]; + /** + * Somtimes, we may need to change the way the parser transforms operations + * into API filters. This option allows you to specify a custom transformation + * for a specific searchable field. + */ + filterShapeOverrides?: Partial Filter }>>; } /** @@ -32,4 +38,4 @@ export function getAPIFilterFromQuery(query: string | null | undefined, options: } return { filter, error }; -} \ No newline at end of file +} From 26258af0f92ba8e1319b272eeaf4162606498196 Mon Sep 17 00:00:00 2001 From: Purvesh Makode Date: Fri, 15 Nov 2024 12:39:06 +0530 Subject: [PATCH 021/131] refactor: [M3-8649] - Move `Radio` to ` at linode/ui` package (#11244) * Migrate radio to ui package * Add vitest imports in Radio tests * Fix radio icons imports * Add `vite-plugin-svgr` plugin to UI package * Added changeset: Move `Radio` from `manager` to `ui` package * Reordering imports * Temporarily import `FormControlLabel` from MUI * Remove typecast from plugin configuration in all places * Fix: avoid imports from @linode/ui in @linode/ui * Remove todo comments --- packages/manager/cypress/vite.config.ts | 5 +---- .../src/components/FormControlLabel.stories.tsx | 5 +++-- packages/manager/src/components/FormLabel.stories.tsx | 3 +-- .../manager/src/components/ModeSelect/ModeSelect.tsx | 3 +-- .../DatabaseCreate/DatabaseCreateAccessControls.tsx | 11 ++++++----- .../Databases/DatabaseCreate/DatabaseNodeSelector.tsx | 3 +-- .../DatabaseSettings/MaintenanceWindow.tsx | 3 +-- .../src/features/Domains/CloneDomainDrawer.tsx | 3 +-- .../features/Domains/CreateDomain/CreateDomain.tsx | 3 +-- .../manager/src/features/Domains/EditDomainDrawer.tsx | 3 +-- .../FirewallDetail/Rules/FirewallRuleForm.tsx | 3 +-- .../FirewallLanding/CreateFirewallDrawer.tsx | 3 +-- .../Kubernetes/CreateCluster/ApplicationPlatform.tsx | 3 +-- .../Kubernetes/CreateCluster/HAControlPlane.tsx | 2 +- .../Tabs/StackScripts/StackScriptSelectionRow.tsx | 3 +-- .../UserDefinedFields/UserDefinedFieldInput.tsx | 3 +-- .../LinodeCreate/shared/LinodeSelectTableRow.tsx | 2 +- .../LinodeConfigs/LinodeConfigDialog.tsx | 2 +- .../LinodesDetail/LinodeNetworking/AddIPDrawer.tsx | 3 +-- .../LinodeResizeUnifiedMigrationPanel.tsx | 3 +-- .../Longview/LongviewLanding/LongviewPlans.tsx | 3 +-- .../ObjectStorage/AccessKeyLanding/AccessCell.tsx | 3 +-- .../ObjectStorage/AccessKeyLanding/AccessTable.tsx | 2 +- .../AccessKeyLanding/BucketPermissionsTable.tsx | 10 +++++----- .../BucketLanding/BucketRateLimitTable.tsx | 3 +-- .../PlacementGroupPolicyRadioGroup.tsx | 3 +-- .../Profile/APITokens/CreateAPITokenDrawer.tsx | 3 +-- .../src/features/Profile/Settings/Settings.tsx | 3 +-- .../StackScriptSelectionRow.tsx | 2 +- .../FieldTypes/UserDefinedSelect.tsx | 3 +-- .../features/Users/UserPermissionsEntitySection.tsx | 3 +-- .../features/Volumes/VolumeDrawer/ModeSelection.tsx | 3 +-- .../features/components/PlansPanel/PlanSelection.tsx | 2 +- packages/manager/vite.config.ts | 4 +--- .../ui/.changeset/pr-11244-added-1731425025310.md | 5 +++++ packages/ui/package.json | 3 ++- packages/ui/src/assets/icons/index.ts | 2 ++ packages/{manager => ui}/src/assets/icons/radio.svg | 0 .../{manager => ui}/src/assets/icons/radioRadioed.svg | 0 .../src/components/Radio/Radio.stories.tsx | 7 +++++-- .../src/components/Radio/Radio.test.tsx | 4 ++-- .../{manager => ui}/src/components/Radio/Radio.tsx | 3 +-- packages/ui/src/components/Radio/index.ts | 1 + packages/ui/src/components/index.ts | 1 + packages/ui/vitest.config.ts | 2 ++ 45 files changed, 66 insertions(+), 78 deletions(-) create mode 100644 packages/ui/.changeset/pr-11244-added-1731425025310.md rename packages/{manager => ui}/src/assets/icons/radio.svg (100%) rename packages/{manager => ui}/src/assets/icons/radioRadioed.svg (100%) rename packages/{manager => ui}/src/components/Radio/Radio.stories.tsx (84%) rename packages/{manager => ui}/src/components/Radio/Radio.test.tsx (88%) rename packages/{manager => ui}/src/components/Radio/Radio.tsx (90%) create mode 100644 packages/ui/src/components/Radio/index.ts diff --git a/packages/manager/cypress/vite.config.ts b/packages/manager/cypress/vite.config.ts index 2f9ff72c27..b600661f33 100644 --- a/packages/manager/cypress/vite.config.ts +++ b/packages/manager/cypress/vite.config.ts @@ -3,14 +3,11 @@ import { URL } from 'url'; import { defineConfig } from 'vite'; import svgr from 'vite-plugin-svgr'; -import type { UserConfig } from 'vite'; - // ESM-friendly alternative to `__dirname`. const DIRNAME = new URL('.', import.meta.url).pathname; export default defineConfig({ - // @todo Remove this `as` when we upgrade our package manager. Yarn v1's hoisting behavior is causing a type error - plugins: [react(), svgr({ exportAsDefault: true })] as UserConfig['plugins'], + plugins: [react(), svgr({ exportAsDefault: true })], build: { rollupOptions: { // Suppress "SOURCEMAP_ERROR" warnings. diff --git a/packages/manager/src/components/FormControlLabel.stories.tsx b/packages/manager/src/components/FormControlLabel.stories.tsx index 3d520329ce..101de8d7b5 100644 --- a/packages/manager/src/components/FormControlLabel.stories.tsx +++ b/packages/manager/src/components/FormControlLabel.stories.tsx @@ -1,11 +1,12 @@ -import { Meta, StoryObj } from '@storybook/react'; +import { Radio } from '@linode/ui'; import React from 'react'; import { Checkbox } from './Checkbox'; import { FormControlLabel } from './FormControlLabel'; -import { Radio } from './Radio/Radio'; import { Toggle } from './Toggle/Toggle'; +import type { Meta, StoryObj } from '@storybook/react'; + const meta: Meta = { component: FormControlLabel, title: 'Components/Form/FormControlLabel', diff --git a/packages/manager/src/components/FormLabel.stories.tsx b/packages/manager/src/components/FormLabel.stories.tsx index b7af555aaa..2c8138603c 100644 --- a/packages/manager/src/components/FormLabel.stories.tsx +++ b/packages/manager/src/components/FormLabel.stories.tsx @@ -1,9 +1,8 @@ -import { FormControl, RadioGroup } from '@linode/ui'; +import { FormControl, Radio, RadioGroup } from '@linode/ui'; import React from 'react'; import { FormControlLabel } from './FormControlLabel'; import { FormLabel } from './FormLabel'; -import { Radio } from './Radio/Radio'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/manager/src/components/ModeSelect/ModeSelect.tsx b/packages/manager/src/components/ModeSelect/ModeSelect.tsx index 0d6f6a2e4b..dbdf843da7 100644 --- a/packages/manager/src/components/ModeSelect/ModeSelect.tsx +++ b/packages/manager/src/components/ModeSelect/ModeSelect.tsx @@ -1,8 +1,7 @@ -import { RadioGroup } from '@linode/ui'; +import { Radio, RadioGroup } from '@linode/ui'; import * as React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Radio } from 'src/components/Radio/Radio'; export interface Mode { label: string; diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx index 4d0873efd6..db9960b2a4 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreateAccessControls.tsx @@ -1,20 +1,21 @@ -import { Notice, RadioGroup } from '@linode/ui'; -import { Theme } from '@mui/material/styles'; +import { Notice, Radio, RadioGroup } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { ChangeEvent, useState } from 'react'; +import { 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 { Radio } from 'src/components/Radio/Radio'; import { Typography } from 'src/components/Typography'; -import { ExtendedIP, ipFieldPlaceholder } from 'src/utilities/ipUtils'; +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) => ({ container: { diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx index 9bd717bcd8..82a3099427 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseNodeSelector.tsx @@ -1,8 +1,7 @@ -import { FormControl, Notice, RadioGroup } from '@linode/ui'; +import { FormControl, Notice, Radio, RadioGroup } from '@linode/ui'; import React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Radio } from 'src/components/Radio/Radio'; import { Typography } from 'src/components/Typography'; import { StyledChip } from 'src/features/components/PlansPanel/PlanSelection.styles'; import { determineInitialPlanCategoryTab } from 'src/features/components/PlansPanel/utils'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx index a6076d5a62..8c56424ab6 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx @@ -1,4 +1,4 @@ -import { FormControl, Notice, RadioGroup } from '@linode/ui'; +import { FormControl, Notice, Radio, RadioGroup } from '@linode/ui'; import { useFormik } from 'formik'; import { DateTime } from 'luxon'; import { useSnackbar } from 'notistack'; @@ -9,7 +9,6 @@ import { makeStyles } from 'tss-react/mui'; import { Button } from 'src/components/Button/Button'; import Select from 'src/components/EnhancedSelect/Select'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Radio } from 'src/components/Radio/Radio'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { useDatabaseMutation } from 'src/queries/databases/databases'; diff --git a/packages/manager/src/features/Domains/CloneDomainDrawer.tsx b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx index 6fe4f7fc88..8843d6eadf 100644 --- a/packages/manager/src/features/Domains/CloneDomainDrawer.tsx +++ b/packages/manager/src/features/Domains/CloneDomainDrawer.tsx @@ -1,4 +1,4 @@ -import { Notice, RadioGroup } from '@linode/ui'; +import { Notice, Radio, RadioGroup } from '@linode/ui'; import { useFormik } from 'formik'; import React from 'react'; import { useHistory } from 'react-router-dom'; @@ -6,7 +6,6 @@ import { useHistory } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Radio } from 'src/components/Radio/Radio'; import { TextField } from 'src/components/TextField'; import { useCloneDomainMutation } from 'src/queries/domains'; import { useGrants, useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx index aacb78a4c2..644ec9554c 100644 --- a/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx +++ b/packages/manager/src/features/Domains/CreateDomain/CreateDomain.tsx @@ -1,4 +1,4 @@ -import { FormHelperText, Notice, Paper, RadioGroup } from '@linode/ui'; +import { FormHelperText, Notice, Paper, Radio, RadioGroup } from '@linode/ui'; import { createDomainSchema } from '@linode/validation/lib/domains.schema'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -14,7 +14,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { LandingHeader } from 'src/components/LandingHeader'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; -import { Radio } from 'src/components/Radio/Radio'; import { TextField } from 'src/components/TextField'; import { reportException } from 'src/exceptionReporting'; import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect'; diff --git a/packages/manager/src/features/Domains/EditDomainDrawer.tsx b/packages/manager/src/features/Domains/EditDomainDrawer.tsx index 5dac28fbfb..1a67a4b8d2 100644 --- a/packages/manager/src/features/Domains/EditDomainDrawer.tsx +++ b/packages/manager/src/features/Domains/EditDomainDrawer.tsx @@ -1,4 +1,4 @@ -import { Notice, RadioGroup } from '@linode/ui'; +import { Notice, Radio, RadioGroup } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; -import { Radio } from 'src/components/Radio/Radio'; import { TagsInput } from 'src/components/TagsInput/TagsInput'; import { TextField } from 'src/components/TextField'; import { useUpdateDomainMutation } from 'src/queries/domains'; diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx index e007423e63..337521695c 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleForm.tsx @@ -1,4 +1,4 @@ -import { Notice, RadioGroup } from '@linode/ui'; +import { Notice, Radio, RadioGroup } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; -import { Radio } from 'src/components/Radio/Radio'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx index bfa4e51be2..a573130220 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/CreateFirewallDrawer.tsx @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/anchor-is-valid */ -import { Box, Notice, RadioGroup } from '@linode/ui'; +import { Box, Notice, Radio, RadioGroup } from '@linode/ui'; import { CreateFirewallSchema } from '@linode/validation/lib/firewalls.schema'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -11,7 +11,6 @@ import { Drawer } from 'src/components/Drawer'; import { ErrorMessage } from 'src/components/ErrorMessage'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Radio } from 'src/components/Radio/Radio'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { FIREWALL_LIMITS_CONSIDERATIONS_LINK } from 'src/constants'; diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx index 23db736912..082c916b1c 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/ApplicationPlatform.tsx @@ -1,11 +1,10 @@ -import { Box, FormControl, RadioGroup } from '@linode/ui'; +import { Box, FormControl, Radio, RadioGroup } from '@linode/ui'; import * as React from 'react'; import { Chip } from 'src/components/Chip'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; import { Link } from 'src/components/Link'; -import { Radio } from 'src/components/Radio/Radio'; import { Typography } from 'src/components/Typography'; export interface APLProps { diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx index 28f35b9d2d..90fc5e6f6b 100644 --- a/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx +++ b/packages/manager/src/features/Kubernetes/CreateCluster/HAControlPlane.tsx @@ -3,6 +3,7 @@ import { CircleProgress, FormControl, Notice, + Radio, RadioGroup, } from '@linode/ui'; import { FormLabel } from '@mui/material'; @@ -10,7 +11,6 @@ import * as React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Radio } from 'src/components/Radio/Radio'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionRow.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionRow.tsx index 72002b6935..e1381fcb26 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionRow.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/StackScriptSelectionRow.tsx @@ -1,9 +1,8 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ -import { Stack } from '@linode/ui'; +import { Radio, Stack } from '@linode/ui'; import React from 'react'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; -import { Radio } from 'src/components/Radio/Radio'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx index 4de7f8401a..32cbc5b1bc 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx @@ -1,4 +1,4 @@ -import { Divider, FormControl, RadioGroup, Stack } from '@linode/ui'; +import { Divider, FormControl, Radio, RadioGroup, Stack } from '@linode/ui'; import React from 'react'; import { useController, useFormContext } from 'react-hook-form'; @@ -7,7 +7,6 @@ import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; import { Link } from 'src/components/Link'; import PasswordInput from 'src/components/PasswordInput/PasswordInput'; -import { Radio } from 'src/components/Radio/Radio'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTableRow.tsx b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTableRow.tsx index 9f68f2fa8a..3bdccb73b8 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTableRow.tsx +++ b/packages/manager/src/features/Linodes/LinodeCreate/shared/LinodeSelectTableRow.tsx @@ -1,8 +1,8 @@ +import { Radio } from '@linode/ui'; import React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; -import { Radio } from 'src/components/Radio/Radio'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx index caa100ea31..5b09ea2b5a 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx @@ -5,6 +5,7 @@ import { FormControl, FormHelperText, Notice, + Radio, } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -22,7 +23,6 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; import { Link } from 'src/components/Link'; -import { Radio } from 'src/components/Radio/Radio'; import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle/Toggle'; import { TooltipIcon } from 'src/components/TooltipIcon'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx index 00c6d28e67..c491e37cf2 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Notice, RadioGroup, Stack, Tooltip } from '@linode/ui'; +import { Box, Divider, Notice, Radio, RadioGroup, Stack, Tooltip } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -6,7 +6,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Radio } from 'src/components/Radio/Radio'; import { Typography } from 'src/components/Typography'; import { useAllocateIPMutation, diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx index 508d1ecdb1..18032fc6ff 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx @@ -1,10 +1,9 @@ -import { Box, Divider, FormControl, RadioGroup } from '@linode/ui'; +import { Box, Divider, FormControl, Radio, RadioGroup } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Radio } from 'src/components/Radio/Radio'; import { TooltipIcon } from 'src/components/TooltipIcon'; import { Typography } from 'src/components/Typography'; import { capitalize } from 'src/utilities/capitalize'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx index 45a99427cf..c99c4d5951 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx @@ -2,13 +2,12 @@ import { getActiveLongviewPlan, updateActiveLongviewPlan, } from '@linode/api-v4/lib/longview'; -import { CircleProgress, Notice, Paper } from '@linode/ui'; +import { CircleProgress, Notice, Paper, Radio } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Button } from 'src/components/Button/Button'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; -import { Radio } from 'src/components/Radio/Radio'; import { SupportLink } from 'src/components/SupportLink'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessCell.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessCell.tsx index 00a7b857da..fd625947b3 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessCell.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessCell.tsx @@ -1,10 +1,9 @@ /* eslint-disable jsx-a11y/no-noninteractive-tabindex */ -import { Tooltip } from '@linode/ui'; +import { Radio, Tooltip } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import Check from 'src/assets/icons/monitor-ok.svg'; -import { Radio } from 'src/components/Radio/Radio'; interface RadioButton extends HTMLInputElement { name: string; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessTable.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessTable.tsx index fc5edf25df..90d3de1bbd 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessTable.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessTable.tsx @@ -1,7 +1,7 @@ +import { Radio } from '@linode/ui'; import { update } from 'ramda'; import * as React from 'react'; -import { Radio } from 'src/components/Radio/Radio'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/BucketPermissionsTable.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/BucketPermissionsTable.tsx index d8d9240d2b..06ee656abc 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/BucketPermissionsTable.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/BucketPermissionsTable.tsx @@ -1,11 +1,7 @@ -import { - ObjectStorageKeyBucketAccessPermissions, - ObjectStorageKeyBucketAccess, -} from '@linode/api-v4/lib/object-storage/types'; +import { Radio } from '@linode/ui'; import { update } from 'ramda'; import * as React from 'react'; -import { Radio } from 'src/components/Radio/Radio'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; @@ -25,6 +21,10 @@ import { } from './AccessTable.styles'; import type { MODE } from './types'; +import type { + ObjectStorageKeyBucketAccess, + ObjectStorageKeyBucketAccessPermissions, +} from '@linode/api-v4/lib/object-storage/types'; export const getUpdatedScopes = ( oldScopes: ObjectStorageKeyBucketAccess[], diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.tsx index b7ab4530a8..f9a0548ac8 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.tsx @@ -1,10 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Radio } from '@linode/ui'; import React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; import { Link } from 'src/components/Link'; -import { Radio } from 'src/components/Radio/Radio'; import { SupportLink } from 'src/components/SupportLink'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx index 8301a5bcc7..08877deac4 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx @@ -1,9 +1,8 @@ -import { Box, Notice, RadioGroup } from '@linode/ui'; +import { Box, Notice, Radio, RadioGroup } from '@linode/ui'; import * as React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { FormLabel } from 'src/components/FormLabel'; -import { Radio } from 'src/components/Radio/Radio'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx index 5ba5c47dcf..49fa0549c0 100644 --- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx +++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormHelperText, Notice } from '@linode/ui'; +import { FormControl, FormHelperText, Notice, Radio } from '@linode/ui'; import { useFormik } from 'formik'; import { DateTime } from 'luxon'; import * as React from 'react'; @@ -6,7 +6,6 @@ import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Drawer } from 'src/components/Drawer'; -import { Radio } from 'src/components/Radio/Radio'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; diff --git a/packages/manager/src/features/Profile/Settings/Settings.tsx b/packages/manager/src/features/Profile/Settings/Settings.tsx index 36722ffdf1..4b39ee4cdc 100644 --- a/packages/manager/src/features/Profile/Settings/Settings.tsx +++ b/packages/manager/src/features/Profile/Settings/Settings.tsx @@ -1,4 +1,4 @@ -import { Paper, RadioGroup, Stack } from '@linode/ui'; +import { Paper, Radio, RadioGroup, Stack } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; @@ -6,7 +6,6 @@ import { useHistory, useLocation } from 'react-router-dom'; import { Code } from 'src/components/Code/Code'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Radio } from 'src/components/Radio/Radio'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; import { diff --git a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/StackScriptSelectionRow.tsx b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/StackScriptSelectionRow.tsx index e62856f101..0f4b8e1f36 100644 --- a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/StackScriptSelectionRow.tsx +++ b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/StackScriptSelectionRow.tsx @@ -1,6 +1,6 @@ +import { Radio } from '@linode/ui'; import * as React from 'react'; -import { Radio } from 'src/components/Radio/Radio'; import { RenderGuard } from 'src/components/RenderGuard'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx index b96c0aa0eb..398d017b2c 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx @@ -1,10 +1,9 @@ -import { InputLabel, Notice } from '@linode/ui'; +import { InputLabel, Notice, Radio } 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 { Radio } from 'src/components/Radio/Radio'; import type { UserDefinedField } from '@linode/api-v4/lib/stackscripts'; diff --git a/packages/manager/src/features/Users/UserPermissionsEntitySection.tsx b/packages/manager/src/features/Users/UserPermissionsEntitySection.tsx index 9ff26232bf..09697b2d6c 100644 --- a/packages/manager/src/features/Users/UserPermissionsEntitySection.tsx +++ b/packages/manager/src/features/Users/UserPermissionsEntitySection.tsx @@ -6,14 +6,13 @@ * I'll create a tech debt ticket in jira to keep track of this issue. */ -import { Box } from '@linode/ui'; +import { Box, Radio } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { createDisplayPage } from 'src/components/Paginate'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; -import { Radio } from 'src/components/Radio/Radio'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/ModeSelection.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/ModeSelection.tsx index 972817dbec..7195cdee81 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/ModeSelection.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/ModeSelection.tsx @@ -1,8 +1,7 @@ -import { RadioGroup } from '@linode/ui'; +import { Radio, RadioGroup } from '@linode/ui'; import * as React from 'react'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Radio } from 'src/components/Radio/Radio'; type Mode = 'attach' | 'create'; diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx index dc7dfc0bd3..dd893ceacc 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx @@ -1,10 +1,10 @@ +import { Radio } from '@linode/ui'; import * as React from 'react'; import { Chip } from 'src/components/Chip'; import { Currency } from 'src/components/Currency'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Hidden } from 'src/components/Hidden'; -import { Radio } from 'src/components/Radio/Radio'; import { SelectionCard } from 'src/components/SelectionCard/SelectionCard'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; diff --git a/packages/manager/vite.config.ts b/packages/manager/vite.config.ts index afab3254c5..4b1d85d1f1 100644 --- a/packages/manager/vite.config.ts +++ b/packages/manager/vite.config.ts @@ -1,7 +1,6 @@ import react from '@vitejs/plugin-react-swc'; import svgr from 'vite-plugin-svgr'; import { defineConfig } from 'vitest/config'; -import type { UserConfig } from 'vitest/config'; import { URL } from 'url'; // ESM-friendly alternative to `__dirname`. @@ -12,8 +11,7 @@ export default defineConfig({ outDir: 'build', }, envPrefix: 'REACT_APP_', - // @todo Remove this `as` when we upgrade our package manager. Yarn v1's hoisting behavior is causing a type error - plugins: [react(), svgr({ exportAsDefault: true })] as UserConfig['plugins'], + plugins: [react(), svgr({ exportAsDefault: true })], resolve: { alias: { src: `${DIRNAME}/src`, diff --git a/packages/ui/.changeset/pr-11244-added-1731425025310.md b/packages/ui/.changeset/pr-11244-added-1731425025310.md new file mode 100644 index 0000000000..9cf7472318 --- /dev/null +++ b/packages/ui/.changeset/pr-11244-added-1731425025310.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +Move `Radio` from `manager` to `ui` package ([#11244](https://github.com/linode/manager/pull/11244)) diff --git a/packages/ui/package.json b/packages/ui/package.json index f4bac6c85e..342fef3d1b 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -54,6 +54,7 @@ "eslint-plugin-prettier": "~3.3.1", "eslint-plugin-sonarjs": "^0.5.0", "lint-staged": "^15.2.9", - "prettier": "~2.2.1" + "prettier": "~2.2.1", + "vite-plugin-svgr": "^3.2.0" } } diff --git a/packages/ui/src/assets/icons/index.ts b/packages/ui/src/assets/icons/index.ts index 0103e50c33..d4d29f8262 100644 --- a/packages/ui/src/assets/icons/index.ts +++ b/packages/ui/src/assets/icons/index.ts @@ -1,3 +1,5 @@ export { default as AlertIcon } from './alert.svg'; export { default as CheckIcon } from './check.svg'; +export { default as RadioIcon } from './radio.svg'; +export { default as RadioIconRadioed } from './radioRadioed.svg'; export { default as WarningIcon } from './warning.svg'; diff --git a/packages/manager/src/assets/icons/radio.svg b/packages/ui/src/assets/icons/radio.svg similarity index 100% rename from packages/manager/src/assets/icons/radio.svg rename to packages/ui/src/assets/icons/radio.svg diff --git a/packages/manager/src/assets/icons/radioRadioed.svg b/packages/ui/src/assets/icons/radioRadioed.svg similarity index 100% rename from packages/manager/src/assets/icons/radioRadioed.svg rename to packages/ui/src/assets/icons/radioRadioed.svg diff --git a/packages/manager/src/components/Radio/Radio.stories.tsx b/packages/ui/src/components/Radio/Radio.stories.tsx similarity index 84% rename from packages/manager/src/components/Radio/Radio.stories.tsx rename to packages/ui/src/components/Radio/Radio.stories.tsx index 2237d31bd6..29c850aa6b 100644 --- a/packages/manager/src/components/Radio/Radio.stories.tsx +++ b/packages/ui/src/components/Radio/Radio.stories.tsx @@ -1,8 +1,11 @@ -import { Box, RadioGroup } from '@linode/ui'; import React from 'react'; -import { FormControlLabel } from '../FormControlLabel'; +// @TODO: Import from 'ui' package once FormControlLabel is migrated. +import { FormControlLabel } from '@mui/material'; + +import { Box } from '../Box'; import { Radio } from './Radio'; +import { RadioGroup } from '../RadioGroup'; import type { RadioProps } from './Radio'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/manager/src/components/Radio/Radio.test.tsx b/packages/ui/src/components/Radio/Radio.test.tsx similarity index 88% rename from packages/manager/src/components/Radio/Radio.test.tsx rename to packages/ui/src/components/Radio/Radio.test.tsx index c46243be77..35c14687ce 100644 --- a/packages/manager/src/components/Radio/Radio.test.tsx +++ b/packages/ui/src/components/Radio/Radio.test.tsx @@ -1,9 +1,9 @@ import { fireEvent } from '@testing-library/react'; import * as React from 'react'; -import { renderWithTheme } from 'src/utilities/testHelpers'; - import { Radio } from './Radio'; +import { expect, describe, it } from 'vitest'; +import { renderWithTheme } from '../../utilities/testHelpers'; // This test is for a single radio button, not a radio group describe('Radio', () => { diff --git a/packages/manager/src/components/Radio/Radio.tsx b/packages/ui/src/components/Radio/Radio.tsx similarity index 90% rename from packages/manager/src/components/Radio/Radio.tsx rename to packages/ui/src/components/Radio/Radio.tsx index 04debbb64b..4977151e8c 100644 --- a/packages/manager/src/components/Radio/Radio.tsx +++ b/packages/ui/src/components/Radio/Radio.tsx @@ -1,8 +1,7 @@ import { default as _Radio, RadioProps } from '@mui/material/Radio'; import * as React from 'react'; -import RadioIcon from '../../assets/icons/radio.svg'; -import RadioIconRadioed from '../../assets/icons/radioRadioed.svg'; +import { RadioIcon, RadioIconRadioed } from '../../assets/icons'; /** ### Use radio buttons to diff --git a/packages/ui/src/components/Radio/index.ts b/packages/ui/src/components/Radio/index.ts new file mode 100644 index 0000000000..bfbe6d09bf --- /dev/null +++ b/packages/ui/src/components/Radio/index.ts @@ -0,0 +1 @@ +export * from './Radio'; diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 663af3c405..4f982b69ac 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -11,6 +11,7 @@ export * from './InputAdornment'; export * from './InputLabel'; export * from './Notice'; export * from './Paper'; +export * from './Radio'; export * from './RadioGroup'; export * from './Stack'; export * from './Tooltip'; diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts index 95754d431b..801346a35e 100644 --- a/packages/ui/vitest.config.ts +++ b/packages/ui/vitest.config.ts @@ -1,6 +1,8 @@ import { defineConfig } from 'vitest/config'; +import svgr from 'vite-plugin-svgr'; export default defineConfig({ + plugins: [svgr({ exportAsDefault: true })], test: { environment: 'jsdom', setupFiles: './testSetup.ts', From bd6ddb9bf5c24fa0977b6136a058a71c86ce1066 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Fri, 15 Nov 2024 20:49:39 +0530 Subject: [PATCH 022/131] test: [M3-8550] - Add unit tests for EntityHeader component (#11222) * test: [M3-8550] - Add unit tests for EntityHeader component * Added changeset: unit test cases for EntityHeader component --- .../pr-11222-added-1730959236426.md | 5 +++ .../EntityHeader/EntityHeader.test.tsx | 40 +++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 packages/manager/.changeset/pr-11222-added-1730959236426.md create mode 100644 packages/manager/src/components/EntityHeader/EntityHeader.test.tsx diff --git a/packages/manager/.changeset/pr-11222-added-1730959236426.md b/packages/manager/.changeset/pr-11222-added-1730959236426.md new file mode 100644 index 0000000000..0019a20f8f --- /dev/null +++ b/packages/manager/.changeset/pr-11222-added-1730959236426.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +unit test cases for EntityHeader component ([#11222](https://github.com/linode/manager/pull/11222)) diff --git a/packages/manager/src/components/EntityHeader/EntityHeader.test.tsx b/packages/manager/src/components/EntityHeader/EntityHeader.test.tsx new file mode 100644 index 0000000000..fb71431f56 --- /dev/null +++ b/packages/manager/src/components/EntityHeader/EntityHeader.test.tsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { EntityHeader } from './EntityHeader'; + +import { HeaderProps } from './EntityHeader'; + +const mockText = 'Hello world'; + +const defaultProps: HeaderProps = { + title: mockText, +}; + +describe('EntityHeader', () => { + it('should render title with variant when isSummaryView is True', () => { + const { getByRole } = renderWithTheme( + + ); + const heading = getByRole('heading', { level: 2 }); + expect(heading).toBeInTheDocument(); + expect(heading).toHaveTextContent(mockText); + }); + + it('should not render title when isSummaryView is False', () => { + const { queryByText } = renderWithTheme( + + ); + expect(queryByText(mockText)).not.toBeInTheDocument(); + }); + + it('should render children if provided', () => { + const { getByText } = renderWithTheme( + +
Child items can go here!
+ + ); + expect(getByText('Child items can go here!')).toBeInTheDocument(); + }); +}); From 727dc753f105059d30e156c90a5d93591262c6c5 Mon Sep 17 00:00:00 2001 From: ankitaakamai Date: Fri, 15 Nov 2024 22:00:09 +0530 Subject: [PATCH 023/131] upcoming: [DI-20934] - Configurable Max limit on resource selection component (#11252) * upcoming: [DI-20934] - Configurable Max limit on resource selection component * upcoming: [DI-20934] - PR comments * upcoming: [DI-20934] - Small fix * upcoming: [DI-20934] - Added sorting of resources * upcoming: [DI-20934] - PR comments * upcoming: [DI-20934] - PR comments * upcoming: [DI-20934] - small fix * upcoming: [DI-20934] - Added changeset * upcoming: [DI-21867] - Resources selection tag limit * upcoming: [DI-20934] - PR comments on UT and Changeset --- ...r-11252-upcoming-features-1731490251541.md | 5 ++ packages/manager/src/featureFlags.ts | 1 + .../shared/CloudPulseResourcesSelect.test.tsx | 50 ++++++++++++++++++- .../shared/CloudPulseResourcesSelect.tsx | 47 ++++++++++++++++- 4 files changed, 100 insertions(+), 3 deletions(-) create mode 100644 packages/manager/.changeset/pr-11252-upcoming-features-1731490251541.md diff --git a/packages/manager/.changeset/pr-11252-upcoming-features-1731490251541.md b/packages/manager/.changeset/pr-11252-upcoming-features-1731490251541.md new file mode 100644 index 0000000000..a3f818a16b --- /dev/null +++ b/packages/manager/.changeset/pr-11252-upcoming-features-1731490251541.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Configurable max limit on CloudPulse resource selection component ([#11252](https://github.com/linode/manager/pull/11252)) diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts index 33b44d19c4..e2e160c535 100644 --- a/packages/manager/src/featureFlags.ts +++ b/packages/manager/src/featureFlags.ts @@ -66,6 +66,7 @@ interface AclpFlag { export interface CloudPulseResourceTypeMapFlag { dimensionKey: string; + maxResourceSelections?: number; serviceType: string; } diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx index 7249de52a1..989a706dc4 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx @@ -1,4 +1,5 @@ import { fireEvent, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import * as React from 'react'; import { linodeFactory } from 'src/factories'; @@ -21,6 +22,7 @@ vi.mock('src/queries/cloudpulse/resources', async () => { const mockResourceHandler = vi.fn(); const SELECT_ALL = 'Select All'; const ARIA_SELECTED = 'aria-selected'; +const ARIA_DISABLED = 'aria-disabled'; describe('CloudPulseResourcesSelect component tests', () => { it('should render disabled component if the the props are undefined or regions and service type does not have any resources', () => { @@ -70,8 +72,7 @@ describe('CloudPulseResourcesSelect component tests', () => { }) ).toBeInTheDocument(); }); - - it('should be able to select all resources', () => { + it('should be able to select all resources if resource selection limit is higher than number of resources', () => { queryMocks.useResourcesQuery.mockReturnValue({ data: linodeFactory.buildList(2), isError: false, @@ -252,4 +253,49 @@ describe('CloudPulseResourcesSelect component tests', () => { ); expect(screen.getByText('Failed to fetch Resources.')).toBeInTheDocument(); }); + + it('should be able to select limited resources', async () => { + const user = userEvent.setup(); + + queryMocks.useResourcesQuery.mockReturnValue({ + data: linodeFactory.buildList(12), + isError: false, + isLoading: false, + status: 'success', + }); + + const { queryByRole } = renderWithTheme( + + ); + + await user.click(screen.getByRole('button', { name: 'Open' })); + + expect(screen.getByLabelText('Resources')).toBeInTheDocument(); + expect(screen.getByText('Select up to 10 Resources')).toBeInTheDocument(); + + for (let i = 14; i <= 23; i++) { + // eslint-disable-next-line no-await-in-loop + const option = await screen.findByRole('option', { name: `linode-${i}` }); + // eslint-disable-next-line no-await-in-loop + await user.click(option); + } + + const selectedOptions = screen + .getAllByRole('option') + .filter((option) => option.getAttribute(ARIA_SELECTED) === 'true'); + + expect(selectedOptions.length).toBe(10); + + const isResourceWithExceededLimit = await screen.findByRole('option', { + name: 'linode-24', + }); + expect(isResourceWithExceededLimit).toHaveAttribute(ARIA_DISABLED, 'true'); + + expect(queryByRole('option', { name: SELECT_ALL })).not.toBeInTheDocument(); + }); }); diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx index 437ee3bd8e..6052bebd78 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx @@ -1,6 +1,9 @@ +import { Box, ListItem } from '@mui/material'; import React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; +import { SelectedIcon } from 'src/components/Autocomplete/Autocomplete.styles'; +import { useFlags } from 'src/hooks/useFlags'; import { useResourcesQuery } from 'src/queries/cloudpulse/resources'; import { themes } from 'src/utilities/theme'; @@ -43,6 +46,8 @@ export const CloudPulseResourcesSelect = React.memo( xFilter, } = props; + const flags = useFlags(); + const resourceFilterMap: Record = { dbaas: { '+order': 'asc', @@ -81,6 +86,18 @@ export const CloudPulseResourcesSelect = React.memo( return resources && resources.length > 0 ? resources : []; }, [resources]); + // Maximum resource selection limit is fetched from launchdarkly + const maxResourceSelectionLimit = React.useMemo(() => { + const obj = flags.aclpResourceTypeMap?.find( + (item) => item.serviceType === resourceType + ); + return obj?.maxResourceSelections || 10; + }, [resourceType, flags.aclpResourceTypeMap]); + + const resourcesLimitReached = React.useMemo(() => { + return getResourcesList.length > maxResourceSelectionLimit; + }, [getResourcesList.length, maxResourceSelectionLimit]); + // Once the data is loaded, set the state variable with value stored in preferences React.useEffect(() => { if (resources && savePreferences && !selectedResources) { @@ -123,6 +140,30 @@ export const CloudPulseResourcesSelect = React.memo( placeholder={ selectedResources?.length ? '' : placeholder || 'Select Resources' } + renderOption={(props, option) => { + // After selecting resources up to the max resource selection limit, rest of the unselected options will be disabled if there are any + const { key, ...rest } = props; + const isResourceSelected = selectedResources?.some( + (item) => item.label === option.label + ); + const isMaxSelectionsReached = + selectedResources && + selectedResources.length >= maxResourceSelectionLimit && + !isResourceSelected; + return ( + + <> + {option.label} + + + + ); + }} textFieldProps={{ InputProps: { sx: { @@ -137,11 +178,15 @@ export const CloudPulseResourcesSelect = React.memo( autoHighlight clearOnBlur data-testid="resource-select" + disableSelectAll={resourcesLimitReached} // Select_All option will not be available if number of resources are higher than resource selection limit disabled={disabled} errorText={isError ? `Failed to fetch ${label || 'Resources'}.` : ''} + helperText={ + !isError ? `Select up to ${maxResourceSelectionLimit} ${label}` : '' + } isOptionEqualToValue={(option, value) => option.id === value.id} label={label || 'Resources'} - limitTags={2} + limitTags={1} loading={isLoading} multiple noMarginTop From 68980134bcd107caf2128200ecce21383da3f3a9 Mon Sep 17 00:00:00 2001 From: mpolotsk-akamai <157619599+mpolotsk-akamai@users.noreply.github.com> Date: Fri, 15 Nov 2024 18:15:36 +0100 Subject: [PATCH 024/131] refactor: [UIE-8245] - DBaaS: Replace Select component with Autocomplete (#11245) * change: [UIE-8245] - DBaaS: replace Select with Autocomplete * change: [UIE-8245] - DBaaS: replace Select with Autocomplete (Settings Tab) * Added changeset: Replace Select component with Autocomplete * change: [UIE-8245] - review fix, show default engine --- .../pr-11245-changed-1731425235091.md | 5 ++ .../DatabaseCreate/DatabaseClusterData.tsx | 34 ++----- .../DatabaseCreate/DatabaseCreate.tsx | 2 +- .../DatabaseCreate/DatabaseEngineSelect.tsx | 90 +++++++++++++++++++ .../Databases/DatabaseCreate/EngineOption.tsx | 54 ----------- .../Databases/DatabaseCreate/utilities.tsx | 56 +++--------- .../DatabaseSettings/MaintenanceWindow.tsx | 58 ++++++------ 7 files changed, 145 insertions(+), 154 deletions(-) create mode 100644 packages/manager/.changeset/pr-11245-changed-1731425235091.md create mode 100644 packages/manager/src/features/Databases/DatabaseCreate/DatabaseEngineSelect.tsx delete mode 100644 packages/manager/src/features/Databases/DatabaseCreate/EngineOption.tsx diff --git a/packages/manager/.changeset/pr-11245-changed-1731425235091.md b/packages/manager/.changeset/pr-11245-changed-1731425235091.md new file mode 100644 index 0000000000..c85fd35283 --- /dev/null +++ b/packages/manager/.changeset/pr-11245-changed-1731425235091.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Changed +--- + +Replace Select component with Autocomplete in DBaaS ([#11245](https://github.com/linode/manager/pull/11245)) diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx index 174486d23e..47cdce9018 100644 --- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx +++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseClusterData.tsx @@ -2,8 +2,6 @@ import { Divider } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import React from 'react'; -import Select from 'src/components/EnhancedSelect'; -import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleValue'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText'; import { Typography } from 'src/components/Typography'; @@ -11,11 +9,8 @@ import { StyledLabelTooltip, StyledTextField, } from 'src/features/Databases/DatabaseCreate/DatabaseCreate.style'; -import { EngineOption } from 'src/features/Databases/DatabaseCreate/EngineOption'; +import { DatabaseEngineSelect } from 'src/features/Databases/DatabaseCreate/DatabaseEngineSelect'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; -import { getSelectedOptionFromGroupedOptions } from 'src/utilities/getSelectedOptionFromGroupedOptions'; - -import { getEngineOptions } from './utilities'; import type { ClusterSize, @@ -27,7 +22,6 @@ import type { ReplicationCommitTypes, } from '@linode/api-v4'; import type { FormikErrors } from 'formik'; -import type { Item } from 'src/components/EnhancedSelect'; export interface DatabaseCreateValues { allow_list: { address: string; @@ -59,13 +53,6 @@ export const DatabaseClusterData = (props: Props) => { globalGrantType: 'add_databases', }); - const engineOptions = React.useMemo(() => { - if (!engines) { - return []; - } - return getEngineOptions(engines); - }, [engines]); - const labelToolTip = ( Label must: @@ -94,22 +81,11 @@ export const DatabaseClusterData = (props: Props) => { Select Engine and Region - {/* TODO: use Autocomplete instead of Select */} - option.value === 1 - )} - onChange={(e) => { + + option.value === value.value + } + onChange={(_, day) => { setFormTouched(true); - setFieldValue('day_of_week', e.value); - weekSelectionModifier(e.label, weekSelectionMap); - + setFieldValue('day_of_week', day.value); + weekSelectionModifier(day.label, weekSelectionMap); // If week_of_month is not null (i.e., the user has selected a value for "Repeats on" already), // refresh the field value so that the selected option displays the chosen day. if (values.week_of_month) { setFieldValue('week_of_month', values.week_of_month); } }} + renderOption={(props, option) => ( +
  • {option.label}
    • + )} textFieldProps={{ dataAttrs: { 'data-qa-weekday-select': true, @@ -223,12 +226,11 @@ export const MaintenanceWindow = (props: Props) => { value={daySelectionMap.find( (thisOption) => thisOption.value === values.day_of_week )} + autoHighlight + disableClearable disabled={disabled} errorText={touched.day_of_week ? errors.day_of_week : undefined} - isClearable={false} label="Day of Week" - menuPlacement="top" - name="Day of Week" noMarginTop options={daySelectionMap} placeholder="Choose a day" @@ -236,17 +238,20 @@ export const MaintenanceWindow = (props: Props) => {
    - { + onChange={(_, week) => { setFormTouched(true); - setFieldValue('week_of_month', e.value); + setFieldValue('week_of_month', week?.value); }} + renderOption={(props, option) => ( +
  • {option.label}
    • + )} textFieldProps={{ dataAttrs: { 'data-qa-week-in-month-select': true, @@ -344,11 +351,10 @@ export const MaintenanceWindow = (props: Props) => { value={modifiedWeekSelectionMap.find( (thisOption) => thisOption.value === values.week_of_month )} + autoHighlight defaultValue={modifiedWeekSelectionMap[0]} - isClearable={false} + disableClearable label="Repeats on" - menuPlacement="top" - name="Repeats on" noMarginTop options={modifiedWeekSelectionMap} placeholder="Repeats on" @@ -396,8 +402,8 @@ const daySelectionMap = [ const hourSelectionMap = [ { label: '00:00', value: 0 }, - { label: '01:00', value: 2 }, - { label: '02:00', value: 1 }, + { label: '01:00', value: 1 }, + { label: '02:00', value: 2 }, { label: '03:00', value: 3 }, { label: '04:00', value: 4 }, { label: '05:00', value: 5 }, From 74b934e99e374db271317a06f0fc6a2d9a50e212 Mon Sep 17 00:00:00 2001 From: agorthi-akamai Date: Sat, 16 Nov 2024 00:58:37 +0530 Subject: [PATCH 025/131] test: [DI-21337] - Add Cypress tests to verify ACLP UI's handling of API errors (#11239) * Add Cypress tests to verify ACLP UI's handling of API errors * Update packages/manager/.changeset/pr-11239-tests-1731305530868.md --- .../pr-11239-tests-1731305530868.md | 5 + .../cloudpulse-dashboard-errors.spec.ts | 399 ++++++++++++++++++ .../cypress/support/intercepts/cloudpulse.ts | 120 ++++++ .../cypress/support/intercepts/databases.ts | 22 + .../cypress/support/intercepts/regions.ts | 23 + 5 files changed, 569 insertions(+) create mode 100644 packages/manager/.changeset/pr-11239-tests-1731305530868.md create mode 100644 packages/manager/cypress/e2e/core/cloudpulse/cloudpulse-dashboard-errors.spec.ts diff --git a/packages/manager/.changeset/pr-11239-tests-1731305530868.md b/packages/manager/.changeset/pr-11239-tests-1731305530868.md new file mode 100644 index 0000000000..9d8620abad --- /dev/null +++ b/packages/manager/.changeset/pr-11239-tests-1731305530868.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tests +--- + +Add Cypress tests to verify ACLP UI's handling of API errors ([#11239](https://github.com/linode/manager/pull/11239)) diff --git a/packages/manager/cypress/e2e/core/cloudpulse/cloudpulse-dashboard-errors.spec.ts b/packages/manager/cypress/e2e/core/cloudpulse/cloudpulse-dashboard-errors.spec.ts new file mode 100644 index 0000000000..f2fbcdc66a --- /dev/null +++ b/packages/manager/cypress/e2e/core/cloudpulse/cloudpulse-dashboard-errors.spec.ts @@ -0,0 +1,399 @@ +/** + * @file Error Handling Tests for CloudPulse Dashboard. + */ +import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags'; +import { + mockCreateCloudPulseJWEToken, + mockGetCloudPulseDashboard, + mockGetCloudPulseDashboards, + mockGetCloudPulseMetricDefinitions, + mockGetCloudPulseServices, + mockGetCloudPulseDashboardByIdError, + mockGetCloudPulseDashboardsError, + mockGetCloudPulseMetricDefinitionsError, + mockGetCloudPulseServicesError, + mockGetCloudPulseTokenError, +} from 'support/intercepts/cloudpulse'; +import { ui } from 'support/ui'; +import { widgetDetails } from 'support/constants/widgets'; +import { + accountFactory, + dashboardFactory, + dashboardMetricFactory, + databaseFactory, + regionFactory, + widgetFactory, +} from 'src/factories'; +import { mockGetUserPreferences } from 'support/intercepts/profile'; +import { + mockGetRegions, + mockGetRegionsError, +} from 'support/intercepts/regions'; +import { + mockGetDatabases, + mockGetDatabasesError, +} from 'support/intercepts/databases'; +import { Database } from '@linode/api-v4'; +import { mockGetAccount } from 'support/intercepts/account'; + +/** + * Verifies the presence and values of specific properties within the aclpPreference object + * of the request payload. This function checks that the expected properties exist + * and have the expected values, allowing for validation of user preferences in the application. + * + * @param requestPayload - The payload received from the request, containing the aclpPreference object. + * @param expectedValues - An object containing the expected values for properties to validate against the requestPayload. + */ +const { + metrics, + id, + serviceType, + dashboardName, + engine, + clusterName, + nodeType, +} = widgetDetails.dbaas; + +const dashboard = dashboardFactory.build({ + label: dashboardName, + service_type: serviceType, + widgets: metrics.map(({ title, yLabel, name, unit }) => { + return widgetFactory.build({ + label: title, + y_label: yLabel, + metric: name, + unit, + }); + }), +}); + +const metricDefinitions = { + data: metrics.map(({ title, name, unit }) => + dashboardMetricFactory.build({ + label: title, + metric: name, + unit, + }) + ), +}; + +const mockRegion = regionFactory.build({ + capabilities: ['Linodes'], + id: 'us-ord', + label: 'Chicago, IL', + country: 'us', +}); + +const databaseMock: Database = databaseFactory.build({ + label: clusterName, + type: engine, + region: mockRegion.id, + version: '1', + status: 'provisioning', + cluster_size: 1, + engine: 'mysql', +}); +const mockAccount = accountFactory.build(); + +describe('Tests for API error handling', () => { + beforeEach(() => { + mockAppendFeatureFlags({ + aclp: { beta: true, enabled: true }, + }); + mockGetAccount(mockAccount); + mockGetCloudPulseMetricDefinitions(serviceType, metricDefinitions); + mockGetCloudPulseDashboards(serviceType, [dashboard]).as('fetchDashboard'); + mockGetCloudPulseServices(serviceType).as('fetchServices'); + mockCreateCloudPulseJWEToken(serviceType); + mockGetCloudPulseDashboard(id, dashboard); + mockGetRegions([mockRegion]); + mockGetUserPreferences({}); + mockGetDatabases([databaseMock]).as('getDatabases'); + }); + + it('displays error message when metric definitions API fails', () => { + // Mocking an error response for the 'getMetricDefinitions' API request related to a specific service type. + mockGetCloudPulseMetricDefinitionsError( + serviceType, + 'Internal Server Error' + ).as('getMetricDefinitions'); + + cy.visitWithLogin('monitor/cloudpulse'); + + // Wait for the API calls . + cy.wait(['@fetchServices', '@fetchDashboard']); + + // Selecting a dashboard from the autocomplete input. + ui.autocomplete + .findByLabel('Dashboard') + .should('be.visible') + .type(dashboardName); + + ui.autocompletePopper + .findByTitle(dashboardName) + .should('be.visible') + .click(); + + //Select a Database Engine from the autocomplete input. + ui.autocomplete + .findByLabel('Database Engine') + .should('be.visible') + .type(engine); + + ui.autocompletePopper.findByTitle(engine).should('be.visible').click(); + + // Select a region from the dropdown. + ui.regionSelect.find().click(); + ui.regionSelect + .findItemByRegionId(mockRegion.id, [mockRegion]) + .should('be.visible') + .click(); + + // Select a resource (Database Clusters) from the autocomplete input. + ui.autocomplete + .findByLabel('Database Clusters') + .should('be.visible') + .type(clusterName); + + ui.autocompletePopper.findByTitle(clusterName).should('be.visible').click(); + + // Select a Node from the autocomplete input. + ui.autocomplete + .findByLabel('Node Type') + .should('be.visible') + .type(`${nodeType}{enter}`); + + // Wait for the API calls . + cy.wait('@getMetricDefinitions'); + + cy.get('[data-qa-error-msg="true"]') + .should('be.visible') + .should('have.text', 'Error loading the definitions of metrics.'); + }); + + it('displays error message when services API fails', () => { + // Mocking an error response for the 'fetchServices' API request. + mockGetCloudPulseServicesError('Internal Server Error').as('fetchServices'); + + cy.visitWithLogin('monitor/cloudpulse'); + + // Wait for the API calls . + cy.wait('@fetchServices'); + + cy.get('[data-qa-textfield-error-text="Dashboard"]') + .should('be.visible') + .should('have.text', 'Failed to fetch the services.'); + }); + + it('displays error message when token API fails', () => { + mockGetCloudPulseTokenError(serviceType, 'Internal Server Error').as( + 'getCloudPulseTokenError' + ); + + cy.visitWithLogin('monitor/cloudpulse'); + + // Wait for the API calls . + cy.wait(['@fetchServices', '@fetchDashboard']); + + ui.autocomplete + .findByLabel('Dashboard') + .should('be.visible') + .type(dashboardName); + + ui.autocompletePopper + .findByTitle(dashboardName) + .should('be.visible') + .click(); + + // Select a Database Engine from the autocomplete input. + ui.autocomplete + .findByLabel('Database Engine') + .should('be.visible') + .type(engine); + + ui.autocompletePopper.findByTitle(engine).should('be.visible').click(); + + // Select a region from the dropdown. + ui.regionSelect.find().click(); + + ui.regionSelect + .findItemByRegionId(mockRegion.id, [mockRegion]) + .should('be.visible') + .click(); + + // Select a resource (Database Clusters) from the autocomplete input. + ui.autocomplete + .findByLabel('Database Clusters') + .should('be.visible') + .type(clusterName); + + ui.autocompletePopper.findByTitle(clusterName).should('be.visible').click(); + + // Select a Node from the autocomplete input. + ui.autocomplete + .findByLabel('Node Type') + .should('be.visible') + .type(`${nodeType}{enter}`); + + // Wait for the intercepted error response + cy.wait('@getCloudPulseTokenError'); + + cy.get('[data-qa-error-msg="true"]') + .should('be.visible') + .should('have.text', 'Failed to get the authentication token.'); + }); + + it('displays error message when Dashboards API fails', () => { + mockGetCloudPulseServices(serviceType).as('fetchServices'); + + // Mocking an error response for the 'fetchDashboard' API request for a specific service type. + mockGetCloudPulseDashboardsError(serviceType, 'Internal Server Error').as( + 'fetchDashboard' + ); + + cy.visitWithLogin('monitor/cloudpulse'); + + // Wait for the API calls . + cy.wait(['@fetchServices', '@fetchDashboard']); + + // Assert that the error message for fetching the dashboards is displayed correctly. + cy.get('[data-qa-textfield-error-text="Dashboard"]') + .should('be.visible') + .should('have.text', 'Failed to fetch the dashboards.'); + }); + + it('displays error message when dashboard details API fails', () => { + // Mocking an error response for the 'getCloudPulseDashboardById' API request for a specific dashboard ID. + mockGetCloudPulseDashboardByIdError(id, 'Internal Server Error').as( + 'getCloudPulseDashboardError' + ); + + cy.visitWithLogin('monitor/cloudpulse'); + + // Wait for the API calls . + cy.wait(['@fetchServices', '@fetchDashboard']); + + // Select a dashboard from the autocomplete input. Verify that the input is visible before typing. + ui.autocomplete + .findByLabel('Dashboard') + .should('be.visible') + .type(dashboardName); + + ui.autocompletePopper + .findByTitle(dashboardName) + .should('be.visible') + .click(); + + // Select a Database Engine from the autocomplete input. + ui.autocomplete + .findByLabel('Database Engine') + .should('be.visible') + .type(engine); + + ui.autocompletePopper.findByTitle(engine).should('be.visible').click(); + + // Select a region from the dropdown. + ui.regionSelect.find().click(); + ui.regionSelect + .findItemByRegionId(mockRegion.id, [mockRegion]) + .should('be.visible') + .click(); + + // Select a resource (Database Clusters) from the autocomplete input. + ui.autocomplete + .findByLabel('Database Clusters') + .should('be.visible') + .type(clusterName); + + ui.autocompletePopper.findByTitle(clusterName).should('be.visible').click(); + + // Select a node type from the autocomplete input. + ui.autocomplete + .findByLabel('Node Type') + .should('be.visible') + .type(`${nodeType}{enter}`); + + // Wait for the intercepted error response + cy.wait('@getCloudPulseDashboardError'); + + cy.get('[data-qa-error-msg="true"]') + .should('be.visible') + .should('have.text', 'Failed to fetch the dashboard details.'); + }); + + it('displays error message when regions API fails', () => { + // Mocking an error response for the 'CloudPulseRegions' API request. + mockGetRegionsError('Internal Server Error').as( + 'getCloudPulseRegionsError' + ); + + cy.visitWithLogin('monitor/cloudpulse'); + + // Wait for the API calls . + cy.wait(['@fetchServices', '@fetchDashboard']); + + // Select a dashboard from the autocomplete input + ui.autocomplete + .findByLabel('Dashboard') + .should('be.visible') + .type(dashboardName); + + ui.autocompletePopper + .findByTitle(dashboardName) + .should('be.visible') + .click(); + + // Wait for the mocked request to complete + cy.wait('@getCloudPulseRegionsError'); + + cy.get('[data-qa-textfield-error-text="Region"]') + .should('be.visible') + .should('have.text', 'Failed to fetch Region.'); + }); + + it('displays error message when instance API fails', () => { + // Mocking an error response for the 'CloudPulseDatabaseInstances' API request. + mockGetDatabasesError('Internal Server Error').as( + 'getDatabaseInstancesError' + ); + + cy.visitWithLogin('monitor/cloudpulse'); + + // Wait for the API calls . + cy.wait(['@fetchServices', '@fetchDashboard']); + + // Select a dashboard from the autocomplete input + ui.autocomplete + .findByLabel('Dashboard') + .should('be.visible') + .type(dashboardName); + + ui.autocompletePopper + .findByTitle(dashboardName) + .should('be.visible') + .click(); + + // Select a region from the dropdown. + ui.regionSelect.find().click(); + + ui.regionSelect + .findItemByRegionId(mockRegion.id, [mockRegion]) + .should('be.visible') + .click(); + + //Select a Database Engine from the autocomplete input. + ui.autocomplete + .findByLabel('Database Engine') + .should('be.visible') + .type(engine); + + ui.autocompletePopper.findByTitle(engine).should('be.visible').click(); + + // Wait for the intercepted request to complete + cy.wait('@getDatabaseInstancesError'); + + cy.get('[data-qa-textfield-error-text="Database Clusters"]') + .should('be.visible') + .should('have.text', 'Failed to fetch Database Clusters.'); + }); +}); diff --git a/packages/manager/cypress/support/intercepts/cloudpulse.ts b/packages/manager/cypress/support/intercepts/cloudpulse.ts index 2c63c892e7..e3d472a67c 100644 --- a/packages/manager/cypress/support/intercepts/cloudpulse.ts +++ b/packages/manager/cypress/support/intercepts/cloudpulse.ts @@ -4,6 +4,7 @@ * @returns Cypress chainable. */ +import { makeErrorResponse } from 'support/util/errors'; import { apiMatcher } from 'support/util/intercepts'; import { paginateResponse } from 'support/util/paginate'; import { randomString } from 'support/util/random'; @@ -139,3 +140,122 @@ export const mockCreateCloudPulseJWEToken = ( makeResponse({ token: mockToken }) ); }; + +/** + * Mocks an error response for the GET request to retrieve metric definitions + * for a specific service type in CloudPulse. + * + * This function intercepts the `GET` request made to the CloudPulse API and + * simulates an error response with a customizable error message and HTTP status code. + * + * @param {string} serviceType - The service type for which the metric definitions are being mocked. + * @param {string} errorMessage - The error message to include in the mock response body. + * @param {number} [status=500] - The HTTP status code for the mock response (defaults to 500 if not provided). + * + * @returns {Cypress.Chainable} - A Cypress chainable object, indicating that the interception is part of a Cypress test chain. + */ +export const mockGetCloudPulseMetricDefinitionsError = ( + serviceType: string, + errorMessage: string, + status: number = 500 +): Cypress.Chainable => { + return cy.intercept( + 'GET', + apiMatcher(`/monitor/services/${serviceType}/metric-definitions`), + makeErrorResponse(errorMessage, status) + ); +}; + +/** + * Mocks an error response for the GET request to retrieve services in CloudPulse. + * + * This function intercepts the GET' request made to the CloudPulse API endpoint + * for fetching services and simulates an error response with a customizable error message + * and HTTP status code. + * + * @param {string} errorMessage - The error message to include in the mock response body. + * @param {number} [status=500] - The HTTP status code for the mock response (defaults to 500 if not provided). + * + * @returns {Cypress.Chainable} - A Cypress chainable object, indicating that the interception is part of a Cypress test chain. + */ +export const mockGetCloudPulseServicesError = ( + errorMessage: string, + status: number = 500 +): Cypress.Chainable => { + return cy.intercept( + 'GET', + apiMatcher('/monitor/services'), + makeErrorResponse(errorMessage, status) + ); +}; + +/** + * Mocks an error response for the POST request to retrieve a token for a specific service type in CloudPulse. + * + * This function intercepts the 'POST' request made to the CloudPulse API endpoint for retrieving a token + * for a specific service type and simulates an error response with a customizable error message and HTTP status code. + * + * @param {string} serviceType - The service type for which the token retrieval request is being mocked. + * @param {string} errorMessage - The error message to include in the mock response body. + * @param {number} [status=500] - The HTTP status code for the mock response (defaults to 500 if not provided). + * + * @returns {Cypress.Chainable} - A Cypress chainable object, indicating that the interception is part of a Cypress test chain. + */ +export const mockGetCloudPulseTokenError = ( + serviceType: string, + errorMessage: string, + status: number = 500 +): Cypress.Chainable => { + return cy.intercept( + 'POST', + apiMatcher(`/monitor/services/${serviceType}/token`), + makeErrorResponse(errorMessage, status) + ); +}; + +/** + * Mocks an error response for the GET request to retrieve dashboards for a specific service type in CloudPulse. + * + * This function intercepts the 'GET' request made to the CloudPulse API endpoint for retrieving dashboards + * for a specific service type and simulates an error response with a customizable error message and HTTP status code. + * + * @param {string} serviceType - The service type for which the dashboards retrieval request is being mocked. + * @param {string} errorMessage - The error message to include in the mock response body. + * @param {number} [status=500] - The HTTP status code for the mock response (defaults to 500 if not provided). + * + * @returns {Cypress.Chainable} - A Cypress chainable object, indicating that the interception is part of a Cypress test chain. + */ +export const mockGetCloudPulseDashboardsError = ( + serviceType: string, + errorMessage: string, + status: number = 500 +): Cypress.Chainable => { + return cy.intercept( + 'GET', + apiMatcher(`/monitor/services/${serviceType}/dashboards`), + makeErrorResponse(errorMessage, status) + ); +}; + +/** + * Mocks an error response for the GET request to retrieve a specific dashboard by its ID in CloudPulse. + * + * This function intercepts the 'GET' request made to the CloudPulse API endpoint for retrieving a dashboard + * by its ID and simulates an error response with a customizable error message and HTTP status code. + * + * @param {string} id - The ID of the dashboard to be retrieved. + * @param {string} errorMessage - The error message to include in the mock response body. + * @param {number} [status=500] - The HTTP status code for the mock response (defaults to 500 if not provided). + * @returns {Cypress.Chainable} - A Cypress chainable object, indicating that the interception is part of a Cypress test chain. + */ +export const mockGetCloudPulseDashboardByIdError = ( + id: number, + errorMessage: string, + status: number = 500 +): Cypress.Chainable => { + return cy.intercept( + 'GET', + apiMatcher(`/monitor/dashboards/${id}`), + makeErrorResponse(errorMessage, status) + ); +}; diff --git a/packages/manager/cypress/support/intercepts/databases.ts b/packages/manager/cypress/support/intercepts/databases.ts index 72cff995b5..3f2c28fccb 100644 --- a/packages/manager/cypress/support/intercepts/databases.ts +++ b/packages/manager/cypress/support/intercepts/databases.ts @@ -305,3 +305,25 @@ export const mockGetDatabaseEngines = ( paginateResponse(engines) ); }; + +/** + * Mocks an error response for the GET request to retrieve database instances in CloudPulse. + * + * This function intercepts the 'GET' request made to the CloudPulse API endpoint for retrieving database instances + * and simulates an error response with a customizable error message and HTTP status code. + * + * @param {string} errorMessage - The error message to include in the mock response body. + * @param {number} [status=500] - The HTTP status code for the mock response (defaults to 500 if not provided). + * + * @returns {Cypress.Chainable} - A Cypress chainable object, indicating that the interception is part of a Cypress test chain. + */ +export const mockGetDatabasesError = ( + errorMessage: string, + status: number = 500 +): Cypress.Chainable => { + return cy.intercept( + 'GET', + apiMatcher('databases/instances*'), + makeErrorResponse(errorMessage, status) + ); +}; diff --git a/packages/manager/cypress/support/intercepts/regions.ts b/packages/manager/cypress/support/intercepts/regions.ts index 8ba02d3699..c623b8640b 100644 --- a/packages/manager/cypress/support/intercepts/regions.ts +++ b/packages/manager/cypress/support/intercepts/regions.ts @@ -3,6 +3,7 @@ */ import { Region, RegionAvailability } from '@linode/api-v4'; +import { makeErrorResponse } from 'support/util/errors'; import { apiMatcher } from 'support/util/intercepts'; import { paginateResponse } from 'support/util/paginate'; import { @@ -57,3 +58,25 @@ export const mockGetRegionAvailability = ( regionAvailability ); }; + +/** + * Mocks an error response for the GET request to retrieve regions in CloudPulse. + * + * This function intercepts the 'GET' request made to the CloudPulse API endpoint for retrieving regions + * and simulates an error response with a customizable error message and HTTP status code. + * + * @param {string} errorMessage - The error message to include in the mock response body. + * @param {number} [status=500] - The HTTP status code for the mock response (defaults to 500 if not provided). + * + * @returns {Cypress.Chainable} - A Cypress chainable object, indicating that the interception is part of a Cypress test chain. + */ +export const mockGetRegionsError = ( + errorMessage: string, + status: number = 500 +): Cypress.Chainable => { + return cy.intercept( + 'GET', + apiMatcher('regions*'), + makeErrorResponse(errorMessage, status) + ); +}; From 8492246e4ca1c3540c0e29182d8964547720db84 Mon Sep 17 00:00:00 2001 From: Hussain Khalil <122488130+hkhalil-akamai@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:55:41 -0500 Subject: [PATCH 026/131] fix: [M3-8904] - Fix Storybook docgen (#11264) * Remove ts-docgen optimization * Added changeset: Storybook docgen --- .../pr-11264-fixed-1731617734121.md | 5 ++++ packages/manager/.storybook/main.ts | 7 ----- packages/manager/.storybook/utils.test.ts | 27 ------------------ packages/manager/.storybook/utils.ts | 28 ------------------- 4 files changed, 5 insertions(+), 62 deletions(-) create mode 100644 packages/manager/.changeset/pr-11264-fixed-1731617734121.md delete mode 100644 packages/manager/.storybook/utils.test.ts delete mode 100644 packages/manager/.storybook/utils.ts diff --git a/packages/manager/.changeset/pr-11264-fixed-1731617734121.md b/packages/manager/.changeset/pr-11264-fixed-1731617734121.md new file mode 100644 index 0000000000..59e1694751 --- /dev/null +++ b/packages/manager/.changeset/pr-11264-fixed-1731617734121.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Storybook docgen ([#11264](https://github.com/linode/manager/pull/11264)) diff --git a/packages/manager/.storybook/main.ts b/packages/manager/.storybook/main.ts index 831c9af022..273472e13f 100644 --- a/packages/manager/.storybook/main.ts +++ b/packages/manager/.storybook/main.ts @@ -1,8 +1,5 @@ import type { StorybookConfig } from '@storybook/react-vite'; import { mergeConfig } from 'vite'; -import { getReactDocgenTSFileGlobs } from './utils'; - -const typeScriptFileGlobs = getReactDocgenTSFileGlobs(); const config: StorybookConfig = { stories: [ @@ -41,10 +38,6 @@ const config: StorybookConfig = { prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true, - // Only compile files that have stories for faster local development performance - include: /(development|test)/i.test(process.env.NODE_ENV ?? '') - ? typeScriptFileGlobs - : undefined, }, reactDocgen: 'react-docgen-typescript', }, diff --git a/packages/manager/.storybook/utils.test.ts b/packages/manager/.storybook/utils.test.ts deleted file mode 100644 index 405fb57b34..0000000000 --- a/packages/manager/.storybook/utils.test.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { getReactDocgenTSFileGlobs } from './utils'; - -describe('getReactDocgenTSFileGlobs', () => { - const typeScriptFileGlobs = getReactDocgenTSFileGlobs(); - it('should return component and feature globs for storybook files', () => { - expect( - typeScriptFileGlobs.some((file) => - file.includes('../manager/src/components/Button/**/*.{ts,tsx}') - ) - ).toBe(true); - expect( - typeScriptFileGlobs.some((file) => - file.includes('../ui/src/components/Paper/**/*.{ts,tsx}') - ) - ).toBe(true); - expect( - typeScriptFileGlobs.some((file) => - file.includes('../manager/src/features/TopMenu/**/*.{ts,tsx}') - ) - ).toBe(true); - expect( - typeScriptFileGlobs.some((file) => - file.includes('../manager/src/features/Longview/**/*.{ts,tsx}') - ) - ).toBe(false); - }); -}); diff --git a/packages/manager/.storybook/utils.ts b/packages/manager/.storybook/utils.ts deleted file mode 100644 index 5e2686d566..0000000000 --- a/packages/manager/.storybook/utils.ts +++ /dev/null @@ -1,28 +0,0 @@ -import globby from 'globby'; - -const PATTERN = __dirname + '/../../**/src/**/*.stories.tsx'; - -/** - * Find all storybook files, then return the glob containing the parent component/feature. - * To be used in main.ts to tell react-docgen-typescript which files to compile. - * https://github.com/linode/manager/pull/10762 - * - * Example: src/components/Button/Button.stories.tsx -> src/components/Button/**\/*.{ts,tsx} - */ -export const getReactDocgenTSFileGlobs = () => { - const filesWithStories = globby.sync(PATTERN); - const files = new Set(); - - filesWithStories.forEach((file) => { - const execArr = /^(.*src\/(components|features)\/[a-zA-Z]*(.|\/))/.exec( - file - ); - if (execArr) { - const isDirectory = execArr[3] === '/'; - const fileBlob = `${execArr[0]}${isDirectory ? '**/*.' : ''}{ts,tsx}`; - files.add(fileBlob); - } - }); - - return Array.from(files); -}; From c452a0ece8cfe014e9ebe0d104a1bb8e273d6013 Mon Sep 17 00:00:00 2001 From: Hussain Khalil <122488130+hkhalil-akamai@users.noreply.github.com> Date: Fri, 15 Nov 2024 17:35:35 -0500 Subject: [PATCH 027/131] refactor: [M3-8642] - Migrate `Button` to UI package (#11250) * Move Button to UI package * Added changeset: Migrate `Button` component and styled variants * Tweaks: fix cannibalistic imports, tests and more * PR feedback @coliu-akamai: consolidate imports, fix comment --- .../components/AccessPanel/AccessPanel.tsx | 3 +- .../AccessPanel/UserSSHKeyPanel.tsx | 2 +- .../AccountActivationLanding.tsx | 3 +- .../components/ActionsPanel/ActionsPanel.tsx | 7 +- .../AkamaiBanner/AkamaiBanner.test.tsx | 2 +- .../src/components/CheckoutBar/styles.ts | 3 +- .../DismissibleBanner.stories.tsx | 2 +- .../DismissibleBanner.styles.ts | 4 +- .../DismissibleBanner.test.tsx | 2 +- .../components/DownloadCSV/DownloadCSV.tsx | 5 +- .../manager/src/components/Drawer.stories.tsx | 5 +- .../EditableInput.styles.tsx | 4 +- .../components/EditableText/EditableText.tsx | 8 +- .../EnhancedNumberInput.tsx | 3 +- .../EntityHeader/EntityHeader.stories.tsx | 3 +- .../src/components/ErrorState/ErrorState.tsx | 2 +- .../GenerateFirewallDialog.tsx | 3 +- .../components/IconTextLink/IconTextLink.tsx | 6 +- .../InlineMenuAction/InlineMenuAction.tsx | 3 +- .../LandingHeader/LandingHeader.stories.tsx | 2 +- .../LandingHeader/LandingHeader.tsx | 12 +- .../components/LineGraph/LineGraph.styles.ts | 3 +- .../LineGraph/MetricDisplay.styles.ts | 3 +- .../manager/src/components/LinkButton.tsx | 4 +- .../src/components/MaintenanceScreen.tsx | 3 +- .../MultipleIPInput/MultipleIPInput.tsx | 3 +- .../components/Placeholder/Placeholder.tsx | 5 +- .../RemovableSelectionsList.stories.tsx | 2 +- .../RemovableSelectionsList.test.tsx | 2 +- .../RemovableSelectionsList.tsx | 2 +- .../ShowMoreExpansion/ShowMoreExpansion.tsx | 4 +- .../Snackbar/ToastNotifications.stories.tsx | 3 +- .../components/StackScript/StackScript.tsx | 3 +- .../manager/src/components/Tag/Tag.styles.ts | 4 +- .../src/components/TagCell/TagCell.tsx | 9 +- .../TransferDisplay/TransferDisplay.tsx | 3 +- .../components/Uploaders/FileUpload.styles.ts | 2 +- .../src/components/Uploaders/FileUpload.tsx | 3 +- .../ImageUploader/ImageUploader.styles.ts | 3 +- .../Uploaders/ImageUploader/ImageUploader.tsx | 3 +- .../ObjectUploader/ObjectUploader.tsx | 2 +- .../VerticalLinearStepper.tsx | 16 +- .../features/Account/CloseAccountSetting.tsx | 2 +- .../src/features/Account/EnableManaged.tsx | 7 +- .../Account/Maintenance/MaintenanceTable.tsx | 3 +- .../Account/ObjectStorageSettings.tsx | 3 +- .../features/Account/SwitchAccountButton.tsx | 4 +- .../features/Account/SwitchAccountDrawer.tsx | 3 +- .../SwitchAccounts/ChildAccountList.tsx | 11 +- .../src/features/Backups/BackupsCTA.tsx | 3 +- .../src/features/Betas/BetaDetails.tsx | 3 +- .../src/features/Billing/BillingDetail.tsx | 3 +- .../BillingSummary/BillingSummary.tsx | 3 +- .../PaymentDrawer/PaymentDrawer.tsx | 3 +- .../Billing/InvoiceDetail/InvoiceDetail.tsx | 4 +- .../features/CancelLanding/CancelLanding.tsx | 5 +- .../CloudPulseDashboardFilterBuilder.tsx | 2 +- .../DatabaseCreate/DatabaseCreate.style.ts | 3 +- .../DatabaseDetail/AccessControls.tsx | 3 +- .../DatabaseBackups/DatabaseBackups.tsx | 4 +- .../DatabaseResize/DatabaseResize.style.ts | 4 +- .../DatabaseSettingsMaintenance.tsx | 2 +- .../DatabaseSettingsMenuItem.tsx | 5 +- .../DatabaseSettings/MaintenanceWindow.tsx | 3 +- .../DatabaseSummary/DatabaseSummary.tsx | 3 +- .../DatabaseSummaryConnectionDetails.tsx | 5 +- ...DatabaseSummaryConnectionDetailsLegacy.tsx | 3 +- .../src/features/Domains/DeleteDomain.tsx | 2 +- .../src/features/Domains/DomainRecords.tsx | 399 +++++++++--------- .../src/features/Domains/DomainTableRow.tsx | 8 +- .../src/features/Domains/DomainsLanding.tsx | 3 +- .../Domains/DownloadDNSZoneFileButton.tsx | 2 +- .../TransferCheckoutBar.styles.ts | 2 +- .../CreateTransferSuccessDialog.tsx | 3 +- .../TransferControls.styles.ts | 4 +- .../EntityTransfers/RenderTransferRow.tsx | 2 +- .../Devices/FirewallDeviceLanding.tsx | 3 +- .../Rules/FirewallRuleTable.styles.ts | 4 +- .../FirewallLanding/FirewallLanding.tsx | 3 +- .../GlobalNotifications/ComplianceBanner.tsx | 3 +- .../GlobalNotifications/EmailBounce.tsx | 3 +- .../TaxCollectionBanner.tsx | 2 +- .../VerificationDetailsBanner.tsx | 3 +- .../Images/ImagesCreate/CreateImageTab.tsx | 4 +- .../Images/ImagesCreate/ImageUpload.tsx | 4 +- .../KubeConfigPanel.tsx | 3 +- .../KubeEntityDetailFooter.tsx | 3 +- .../KubeSummaryPanel.tsx | 7 +- .../NodePoolsDisplay/AutoscalePoolDialog.tsx | 3 +- .../NodePoolsDisplay/NodePool.tsx | 3 +- .../NodePoolsDisplay/NodePoolsDisplay.tsx | 3 +- .../UpgradeKubernetesVersionBanner.tsx | 6 +- .../KubernetesPlanSelection.tsx | 3 +- .../features/Linodes/CloneLanding/Details.tsx | 3 +- .../features/Linodes/LinodeCreate/Actions.tsx | 3 +- .../Linodes/LinodeCreate/Security.tsx | 3 +- .../Tabs/Marketplace/AppDetailDrawer.tsx | 3 +- .../StackScripts/StackScriptSelectionList.tsx | 2 +- .../Linodes/LinodeCreate/TwoStepRegion.tsx | 3 +- .../LinodeCreate/shared/SelectLinodeCard.tsx | 3 +- .../Linodes/LinodeEntityDetailHeader.tsx | 3 +- .../LinodeBackup/CaptureSnapshot.tsx | 4 +- .../LinodeBackup/LinodeBackups.tsx | 4 +- .../LinodeConfigs/LinodeConfigDialog.tsx | 2 +- .../LinodeConfigs/LinodeConfigs.tsx | 3 +- .../LinodeNetworking/AddIPDrawer.tsx | 10 +- .../LinodeNetworking/IPSharing.tsx | 3 +- .../LinodeNetworking/LinodeIPAddresses.tsx | 3 +- .../LinodeRescue/RescueDescription.tsx | 3 +- .../LinodeRescue/StandardRescueDialog.tsx | 3 +- .../LinodeResize/LinodeResize.tsx | 3 +- .../LinodeSettings/AlertSection.tsx | 3 +- .../LinodeSettingsDeletePanel.tsx | 3 +- .../LinodeStorage/LinodeDisks.tsx | 3 +- .../LinodeStorage/LinodeVolumes.tsx | 4 +- .../LinodeSummary/LinodeSummary.tsx | 3 +- .../MigrationNotification.tsx | 3 +- .../UpgradeVolumesDialog.tsx | 3 +- .../LinodesDetail/VolumesUpgradeBanner.tsx | 3 +- .../LinodesLanding/DisplayGroupedLinodes.tsx | 3 +- .../Linodes/LinodesLanding/DisplayLinodes.tsx | 6 +- .../Linodes/MigrateLinode/MigrateLinode.tsx | 3 +- .../LongviewClientHeader.styles.ts | 13 +- .../Longview/LongviewLanding/LongviewList.tsx | 3 +- .../LongviewLanding/LongviewPlans.tsx | 3 +- .../features/Managed/Contacts/Contacts.tsx | 2 +- .../Managed/Credentials/CredentialList.tsx | 2 +- .../MonitorTickets.styles.tsx | 5 +- .../Managed/Monitors/MonitorTable.tsx | 2 +- .../Managed/SSHAccess/LinodePubKey.tsx | 3 +- .../src/features/Managed/SupportWidget.tsx | 4 +- .../NodeBalancers/NodeBalancerConfigNode.tsx | 3 +- .../NodeBalancers/NodeBalancerConfigPanel.tsx | 3 +- .../NodeBalancers/NodeBalancerCreate.tsx | 3 +- .../NodeBalancerConfigurations.tsx | 3 +- .../NodeBalancerSettings.tsx | 3 +- .../NodeBalancerSummary/TablesPanel.tsx | 2 +- .../NotificationCenterNotifications.tsx | 6 +- .../useFormattedNotifications.tsx | 2 +- .../AccessKeyTable/HostNameTableCell.tsx | 2 +- .../AccessKeyLanding/CopyAllHostnames.tsx | 4 +- .../BucketDetail/BucketDetail.styles.ts | 3 +- .../ObjectStorage/BucketDetail/BucketSSL.tsx | 3 +- .../BucketDetail/ObjectTableRow.tsx | 3 +- .../ObjectStorage/ObjectStorageLanding.tsx | 2 +- .../PlacementGroupsDeleteModal.tsx | 5 +- .../PlacementGroupsLinodes.tsx | 3 +- .../PlacementGroupsSummary.tsx | 3 +- .../PlacementGroupsDetailPanel.tsx | 3 +- .../Profile/APITokens/APITokenTable.tsx | 3 +- .../PhoneVerification/PhoneVerification.tsx | 3 +- .../AuthenticationSettings/SMSMessaging.tsx | 3 +- .../SecurityQuestions/SecurityQuestions.tsx | 3 +- .../TPAProviders.styles.ts | 3 +- .../TwoFactor/ConfirmToken.tsx | 3 +- .../TwoFactor/TwoFactor.tsx | 3 +- .../Profile/DisplaySettings/AvatarForm.tsx | 3 +- .../Profile/DisplaySettings/EmailForm.tsx | 2 +- .../Profile/DisplaySettings/TimezoneForm.tsx | 3 +- .../Profile/DisplaySettings/UsernameForm.tsx | 2 +- .../Profile/LishSettings/LishSettings.tsx | 3 +- .../Profile/OAuthClients/OAuthClients.tsx | 3 +- .../src/features/Profile/SSHKeys/SSHKeys.tsx | 2 +- .../Profile/Settings/PreferenceEditor.tsx | 3 +- .../src/features/Search/ResultGroup.styles.ts | 2 +- .../StackScripts/CommonStackScript.styles.ts | 6 +- .../SelectStackScriptPanel.tsx | 3 +- .../StackScriptBase/StackScriptBase.tsx | 3 +- .../src/features/Support/AttachFileForm.tsx | 6 +- .../TopMenu/AddNewMenu/AddNewMenu.tsx | 2 +- .../NotificationMenu/NotificationMenu.tsx | 3 +- .../features/TopMenu/UserMenu/UserMenu.tsx | 3 +- .../Users/UserProfile/DeleteUserPanel.tsx | 3 +- .../Users/UserProfile/UserEmailPanel.tsx | 3 +- .../Users/UserProfile/UsernamePanel.tsx | 3 +- .../src/features/Users/UsersLanding.tsx | 3 +- .../VPCs/VPCCreate/MultipleSubnetInput.tsx | 3 +- .../features/VPCs/VPCCreate/SubnetNode.tsx | 3 +- .../VPCDetail/SubnetAssignLinodesDrawer.tsx | 3 +- .../VPCs/VPCDetail/SubnetCreateDrawer.tsx | 3 +- .../VPCs/VPCDetail/VPCDetail.styles.ts | 4 +- .../src/features/VPCs/VPCDetail/VPCDetail.tsx | 3 +- .../VPCs/VPCDetail/VPCSubnetsTable.tsx | 3 +- .../src/features/Volumes/VolumeCreate.tsx | 3 +- packages/manager/src/styles/index.ts | 1 - .../src/utilities/testHelpers.test.tsx | 3 +- .../pr-11250-added-1731507224623.md | 5 + packages/ui/src/assets/icons/index.ts | 1 + .../src/assets/icons/reload.svg | 0 .../src/components/Button/Button.stories.tsx | 2 +- .../src/components/Button/Button.test.tsx | 4 +- .../src/components/Button/Button.tsx | 11 +- .../components/Button/StyledActionButton.ts | 2 +- .../src/components/Button/StyledLinkButton.ts | 0 .../Button/StyledTagButton.stories.tsx | 0 .../src/components/Button/StyledTagButton.ts | 2 +- packages/ui/src/components/Button/index.ts | 4 + .../FormControl/FormControl.stories.tsx | 2 +- packages/ui/src/components/index.ts | 1 + packages/ui/src/foundations/index.ts | 1 + .../src/foundations}/keyframes.ts | 0 201 files changed, 491 insertions(+), 591 deletions(-) delete mode 100644 packages/manager/src/styles/index.ts create mode 100644 packages/ui/.changeset/pr-11250-added-1731507224623.md rename packages/{manager => ui}/src/assets/icons/reload.svg (100%) rename packages/{manager => ui}/src/components/Button/Button.stories.tsx (97%) rename packages/{manager => ui}/src/components/Button/Button.test.tsx (94%) rename packages/{manager => ui}/src/components/Button/Button.tsx (94%) rename packages/{manager => ui}/src/components/Button/StyledActionButton.ts (95%) rename packages/{manager => ui}/src/components/Button/StyledLinkButton.ts (100%) rename packages/{manager => ui}/src/components/Button/StyledTagButton.stories.tsx (100%) rename packages/{manager => ui}/src/components/Button/StyledTagButton.ts (96%) create mode 100644 packages/ui/src/components/Button/index.ts rename packages/{manager/src/styles => ui/src/foundations}/keyframes.ts (100%) diff --git a/packages/manager/src/components/AccessPanel/AccessPanel.tsx b/packages/manager/src/components/AccessPanel/AccessPanel.tsx index 2652233c81..c2a256514c 100644 --- a/packages/manager/src/components/AccessPanel/AccessPanel.tsx +++ b/packages/manager/src/components/AccessPanel/AccessPanel.tsx @@ -1,4 +1,4 @@ -import { Paper } from '@linode/ui'; +import { Divider, Paper } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -21,7 +21,6 @@ import { Typography } from 'src/components/Typography'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature'; -import { Divider } from '@linode/ui'; import UserSSHKeyPanel from './UserSSHKeyPanel'; import type { Theme } from '@mui/material/styles'; diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx index e9d6e75da3..d059e88bee 100644 --- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx +++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx @@ -1,8 +1,8 @@ +import { Button } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { Button } from 'src/components/Button/Button'; import { Checkbox } from 'src/components/Checkbox'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; diff --git a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx index 48005a66ee..54b22fc20d 100644 --- a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx +++ b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx @@ -1,3 +1,4 @@ +import { StyledLinkButton } from '@linode/ui'; import Warning from '@mui/icons-material/CheckCircle'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; @@ -7,8 +8,6 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Typography } from 'src/components/Typography'; import { SupportTicketDialog } from 'src/features/Support/SupportTickets/SupportTicketDialog'; -import { StyledLinkButton } from '../Button/StyledLinkButton'; - import type { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail'; const AccountActivationLanding = () => { diff --git a/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx b/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx index e743777f5a..457dc086e6 100644 --- a/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx +++ b/packages/manager/src/components/ActionsPanel/ActionsPanel.tsx @@ -1,12 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Button } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useStyles } from 'tss-react/mui'; -import { Button } from 'src/components/Button/Button'; - -import type { BoxProps } from '@linode/ui'; -import type { ButtonProps } from 'src/components/Button/Button'; +import type { BoxProps, ButtonProps } from '@linode/ui'; interface ActionButtonsProps extends ButtonProps { 'data-node-idx'?: number; diff --git a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.test.tsx b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.test.tsx index 4748ad1323..c8f16f2989 100644 --- a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.test.tsx +++ b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.test.tsx @@ -1,9 +1,9 @@ +import { Button } from '@linode/ui'; import userEvent from '@testing-library/user-event'; import React from 'react'; import { renderWithTheme } from 'src/utilities/testHelpers'; -import { Button } from '../Button/Button'; import { AkamaiBanner } from './AkamaiBanner'; import type { Flags } from 'src/featureFlags'; diff --git a/packages/manager/src/components/CheckoutBar/styles.ts b/packages/manager/src/components/CheckoutBar/styles.ts index fab15c5367..11a972df66 100644 --- a/packages/manager/src/components/CheckoutBar/styles.ts +++ b/packages/manager/src/components/CheckoutBar/styles.ts @@ -1,7 +1,6 @@ +import { Button } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; -import { Button } from 'src/components/Button/Button'; - const StyledButton = styled(Button)(({ theme }) => ({ marginTop: 18, [theme.breakpoints.up('lg')]: { diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.tsx index 25f38245c0..168b027366 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.tsx +++ b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.tsx @@ -1,6 +1,6 @@ +import { Button } from '@linode/ui'; import * as React from 'react'; -import { Button } from 'src/components/Button/Button'; import { Link } from 'src/components/Link'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts index acd8cea2d5..6ec0bfda53 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts +++ b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts @@ -1,8 +1,6 @@ -import { Notice } from '@linode/ui'; +import { Notice, StyledLinkButton } from '@linode/ui'; import { styled } from '@mui/material/styles'; -import { StyledLinkButton } from '../Button/StyledLinkButton'; - export const StyledNotice = styled(Notice, { label: 'StyledNotice' })( ({ theme }) => ({ '&&': { diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.test.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.test.tsx index cba9ba38d0..18ab5397c2 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.test.tsx +++ b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.test.tsx @@ -1,7 +1,7 @@ +import { Button } from '@linode/ui'; import { fireEvent } from '@testing-library/react'; import * as React from 'react'; -import { Button } from 'src/components/Button/Button'; import { Typography } from 'src/components/Typography'; import { renderWithTheme } from 'src/utilities/testHelpers'; diff --git a/packages/manager/src/components/DownloadCSV/DownloadCSV.tsx b/packages/manager/src/components/DownloadCSV/DownloadCSV.tsx index ace75c60c7..b0b0030be2 100644 --- a/packages/manager/src/components/DownloadCSV/DownloadCSV.tsx +++ b/packages/manager/src/components/DownloadCSV/DownloadCSV.tsx @@ -1,12 +1,11 @@ +import { Button, StyledLinkButton } from '@linode/ui'; import * as React from 'react'; import { CSVLink } from 'react-csv'; import DownloadIcon from 'src/assets/icons/lke-download.svg'; -import { Button } from 'src/components/Button/Button'; -import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; +import type { ButtonType } from '@linode/ui'; import type { SxProps, Theme } from '@mui/material/styles'; -import type { ButtonType } from 'src/components/Button/Button'; interface DownloadCSVProps { buttonType?: 'styledLink' | ButtonType; diff --git a/packages/manager/src/components/Drawer.stories.tsx b/packages/manager/src/components/Drawer.stories.tsx index 090b4a5eb0..43a9610208 100644 --- a/packages/manager/src/components/Drawer.stories.tsx +++ b/packages/manager/src/components/Drawer.stories.tsx @@ -1,13 +1,14 @@ +import { Button } from '@linode/ui'; import { action } from '@storybook/addon-actions'; -import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { ActionsPanel } from './ActionsPanel/ActionsPanel'; -import { Button } from './Button/Button'; import { Drawer } from './Drawer'; import { TextField } from './TextField'; import { Typography } from './Typography'; +import type { Meta, StoryObj } from '@storybook/react'; + const meta: Meta = { component: Drawer, title: 'Components/Drawer', diff --git a/packages/manager/src/components/EditableEntityLabel/EditableInput.styles.tsx b/packages/manager/src/components/EditableEntityLabel/EditableInput.styles.tsx index 303542ee69..a52c164703 100644 --- a/packages/manager/src/components/EditableEntityLabel/EditableInput.styles.tsx +++ b/packages/manager/src/components/EditableEntityLabel/EditableInput.styles.tsx @@ -1,11 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Button, fadeIn } from '@linode/ui'; import Edit from '@mui/icons-material/Edit'; import { styled } from '@mui/material/styles'; -import { Button } from 'src/components/Button/Button'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; -import { fadeIn } from 'src/styles/keyframes'; import type { EditableTextVariant } from './EditableInput'; import type { TextFieldProps } from 'src/components/TextField'; diff --git a/packages/manager/src/components/EditableText/EditableText.tsx b/packages/manager/src/components/EditableText/EditableText.tsx index 5b054906f4..441f40cb17 100644 --- a/packages/manager/src/components/EditableText/EditableText.tsx +++ b/packages/manager/src/components/EditableText/EditableText.tsx @@ -1,16 +1,18 @@ +import { Button } from '@linode/ui'; import Check from '@mui/icons-material/Check'; import Close from '@mui/icons-material/Close'; import Edit from '@mui/icons-material/Edit'; -import { Theme } from '@mui/material/styles'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { makeStyles } from 'tss-react/mui'; -import { Button } from 'src/components/Button/Button'; import { ClickAwayListener } from 'src/components/ClickAwayListener'; import { H1Header } from 'src/components/H1Header/H1Header'; -import { TextField, TextFieldProps } from '../TextField'; +import { TextField } from '../TextField'; + +import type { TextFieldProps } from '../TextField'; +import type { Theme } from '@mui/material/styles'; const useStyles = makeStyles()( (theme: Theme, _params, classes) => ({ diff --git a/packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx b/packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx index f68c63b08a..8bf1d22d70 100644 --- a/packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx +++ b/packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx @@ -1,10 +1,9 @@ -import { Box } from '@linode/ui'; +import { Box, Button } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import Minus from 'src/assets/icons/LKEminusSign.svg'; import Plus from 'src/assets/icons/LKEplusSign.svg'; -import { Button } from 'src/components/Button/Button'; import { TextField } from 'src/components/TextField'; const sxTextFieldBase = { diff --git a/packages/manager/src/components/EntityHeader/EntityHeader.stories.tsx b/packages/manager/src/components/EntityHeader/EntityHeader.stories.tsx index abc97c5a10..ba81212649 100644 --- a/packages/manager/src/components/EntityHeader/EntityHeader.stories.tsx +++ b/packages/manager/src/components/EntityHeader/EntityHeader.stories.tsx @@ -1,4 +1,4 @@ -import { Box } from '@linode/ui'; +import { Box, Button } from '@linode/ui'; import { action } from '@storybook/addon-actions'; import React from 'react'; @@ -6,7 +6,6 @@ import { EntityHeader } from 'src/components/EntityHeader/EntityHeader'; import { Hidden } from 'src/components/Hidden'; import { LinodeActionMenu } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu/LinodeActionMenu'; -import { Button } from '../Button/Button'; import { Link } from '../Link'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/manager/src/components/ErrorState/ErrorState.tsx b/packages/manager/src/components/ErrorState/ErrorState.tsx index 702a551a13..1ad3717afa 100644 --- a/packages/manager/src/components/ErrorState/ErrorState.tsx +++ b/packages/manager/src/components/ErrorState/ErrorState.tsx @@ -1,9 +1,9 @@ +import { Button } from '@linode/ui'; import ErrorOutline from '@mui/icons-material/ErrorOutline'; import { styled, useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { Button } from 'src/components/Button/Button'; import { Typography } from 'src/components/Typography'; import type { SvgIconProps } from '../SvgIcon'; diff --git a/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx b/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx index 7a06bf1465..d8123228e4 100644 --- a/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx +++ b/packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx @@ -1,10 +1,9 @@ -import { Notice, Stack } from '@linode/ui'; +import { Button, Notice, Stack } from '@linode/ui'; import React from 'react'; import { useFlags } from 'src/hooks/useFlags'; import { replaceNewlinesWithLineBreaks } from 'src/utilities/replaceNewlinesWithLineBreaks'; -import { Button } from '../Button/Button'; import { Dialog } from '../Dialog/Dialog'; import { ErrorMessage } from '../ErrorMessage'; import { LinearProgress } from '../LinearProgress'; diff --git a/packages/manager/src/components/IconTextLink/IconTextLink.tsx b/packages/manager/src/components/IconTextLink/IconTextLink.tsx index 8aac572d99..8a2f79ebf7 100644 --- a/packages/manager/src/components/IconTextLink/IconTextLink.tsx +++ b/packages/manager/src/components/IconTextLink/IconTextLink.tsx @@ -1,10 +1,10 @@ -import { Theme } from '@mui/material/styles'; +import { Button } from '@linode/ui'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { makeStyles } from 'tss-react/mui'; -import { Button } from 'src/components/Button/Button'; -import { SvgIcon } from 'src/components/SvgIcon'; +import type { Theme } from '@mui/material/styles'; +import type { SvgIcon } from 'src/components/SvgIcon'; const useStyles = makeStyles()((theme: Theme) => ({ active: { diff --git a/packages/manager/src/components/InlineMenuAction/InlineMenuAction.tsx b/packages/manager/src/components/InlineMenuAction/InlineMenuAction.tsx index 1f91db3d33..bf85e77865 100644 --- a/packages/manager/src/components/InlineMenuAction/InlineMenuAction.tsx +++ b/packages/manager/src/components/InlineMenuAction/InlineMenuAction.tsx @@ -1,10 +1,9 @@ /* eslint-disable react/jsx-no-useless-fragment */ +import { StyledActionButton } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { StyledActionButton } from 'src/components/Button/StyledActionButton'; - interface InlineMenuActionProps { /** Required action text */ actionText: string; diff --git a/packages/manager/src/components/LandingHeader/LandingHeader.stories.tsx b/packages/manager/src/components/LandingHeader/LandingHeader.stories.tsx index 035f316edc..a0cadfdd91 100644 --- a/packages/manager/src/components/LandingHeader/LandingHeader.stories.tsx +++ b/packages/manager/src/components/LandingHeader/LandingHeader.stories.tsx @@ -1,7 +1,7 @@ +import { Button } from '@linode/ui'; import { action } from '@storybook/addon-actions'; import React from 'react'; -import { Button } from '../Button/Button'; import { LandingHeader } from './LandingHeader'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/manager/src/components/LandingHeader/LandingHeader.tsx b/packages/manager/src/components/LandingHeader/LandingHeader.tsx index 18f4ae4a10..701022c458 100644 --- a/packages/manager/src/components/LandingHeader/LandingHeader.tsx +++ b/packages/manager/src/components/LandingHeader/LandingHeader.tsx @@ -1,16 +1,16 @@ -import { Theme, styled, useTheme } from '@mui/material/styles'; +import { Button } from '@linode/ui'; +import { styled, useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import useMediaQuery from '@mui/material/useMediaQuery'; import * as React from 'react'; import BetaFeedbackIcon from 'src/assets/icons/icon-feedback.svg'; -import { - Breadcrumb, - BreadcrumbProps, -} from 'src/components/Breadcrumb/Breadcrumb'; -import { Button } from 'src/components/Button/Button'; +import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb'; import { DocsLink } from 'src/components/DocsLink/DocsLink'; +import type { Theme } from '@mui/material/styles'; +import type { BreadcrumbProps } from 'src/components/Breadcrumb/Breadcrumb'; + export interface LandingHeaderProps { analyticsLabel?: string; betaFeedbackLink?: string; diff --git a/packages/manager/src/components/LineGraph/LineGraph.styles.ts b/packages/manager/src/components/LineGraph/LineGraph.styles.ts index 75af5f913a..c1192567ab 100644 --- a/packages/manager/src/components/LineGraph/LineGraph.styles.ts +++ b/packages/manager/src/components/LineGraph/LineGraph.styles.ts @@ -1,7 +1,6 @@ -import { omittedProps } from '@linode/ui'; +import { Button, omittedProps } from '@linode/ui'; import { styled } from '@mui/material/styles'; -import { Button } from 'src/components/Button/Button'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/components/LineGraph/MetricDisplay.styles.ts b/packages/manager/src/components/LineGraph/MetricDisplay.styles.ts index b0f5ff173e..a867521b18 100644 --- a/packages/manager/src/components/LineGraph/MetricDisplay.styles.ts +++ b/packages/manager/src/components/LineGraph/MetricDisplay.styles.ts @@ -1,7 +1,6 @@ -import { omittedProps } from '@linode/ui'; +import { Button, omittedProps } from '@linode/ui'; import { styled } from '@mui/material/styles'; -import { Button } from 'src/components/Button/Button'; import { Table } from 'src/components/Table'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/components/LinkButton.tsx b/packages/manager/src/components/LinkButton.tsx index 267eeb5316..e15c1acb3f 100644 --- a/packages/manager/src/components/LinkButton.tsx +++ b/packages/manager/src/components/LinkButton.tsx @@ -1,9 +1,7 @@ -import { Box, CircleProgress } from '@linode/ui'; +import { Box, CircleProgress, StyledLinkButton } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { StyledLinkButton } from './Button/StyledLinkButton'; - import type { Theme } from '@mui/material/styles'; const useStyles = makeStyles()((theme: Theme) => ({ diff --git a/packages/manager/src/components/MaintenanceScreen.tsx b/packages/manager/src/components/MaintenanceScreen.tsx index d6fd0abfc9..41312a43ba 100644 --- a/packages/manager/src/components/MaintenanceScreen.tsx +++ b/packages/manager/src/components/MaintenanceScreen.tsx @@ -1,5 +1,4 @@ -import { Stack } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, Stack } from '@linode/ui'; import BuildIcon from '@mui/icons-material/Build'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx index 39e9e4939d..27945ca02e 100644 --- a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx +++ b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx @@ -1,10 +1,9 @@ -import { InputLabel, Notice } from '@linode/ui'; +import { Button, InputLabel, Notice } from '@linode/ui'; import Close from '@mui/icons-material/Close'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { Button } from 'src/components/Button/Button'; import { LinkButton } from 'src/components/LinkButton'; import { StyledLinkButtonBox } from 'src/components/SelectFirewallPanel/SelectFirewallPanel'; import { TextField } from 'src/components/TextField'; diff --git a/packages/manager/src/components/Placeholder/Placeholder.tsx b/packages/manager/src/components/Placeholder/Placeholder.tsx index 55f9ea1871..1b3510b5db 100644 --- a/packages/manager/src/components/Placeholder/Placeholder.tsx +++ b/packages/manager/src/components/Placeholder/Placeholder.tsx @@ -1,15 +1,14 @@ +import { Button, fadeIn } from '@linode/ui'; import { styled, useTheme } from '@mui/material/styles'; import * as React from 'react'; import LinodeIcon from 'src/assets/addnewmenu/linode.svg'; -import { Button } from 'src/components/Button/Button'; import { H1Header } from 'src/components/H1Header/H1Header'; import { Typography } from 'src/components/Typography'; -import { fadeIn } from 'src/styles/keyframes'; import { TransferDisplay } from '../TransferDisplay/TransferDisplay'; -import type { ButtonProps } from 'src/components/Button/Button'; +import type { ButtonProps } from '@linode/ui'; export interface ExtendedButtonProps extends ButtonProps { target?: string; diff --git a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.stories.tsx b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.stories.tsx index 300f3e4486..49dc6d58ad 100644 --- a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.stories.tsx +++ b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.stories.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-empty-function */ +import { Button } from '@linode/ui'; import * as React from 'react'; -import { Button } from '../Button/Button'; import { RemovableSelectionsList } from './RemovableSelectionsList'; import type { RemovableItem } from './RemovableSelectionsList'; diff --git a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.test.tsx b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.test.tsx index 89bbf72f9d..6dc50bb8be 100644 --- a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.test.tsx +++ b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.test.tsx @@ -1,9 +1,9 @@ +import { Button } from '@linode/ui'; import { fireEvent } from '@testing-library/react'; import * as React from 'react'; import { renderWithTheme } from 'src/utilities/testHelpers'; -import { Button } from '../Button/Button'; import { RemovableSelectionsList } from './RemovableSelectionsList'; const defaultList = Array.from({ length: 5 }, (_, index) => { diff --git a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx index 713689dd2c..817daf34ab 100644 --- a/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx +++ b/packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx @@ -12,8 +12,8 @@ import { StyledScrollBox, } from './RemovableSelectionsList.style'; +import type { ButtonProps } from '@linode/ui'; import type { SxProps, Theme } from '@mui/material'; -import type { ButtonProps } from 'src/components/Button/Button'; export type RemovableItem = { // The remaining key-value pairs must have their values typed diff --git a/packages/manager/src/components/ShowMoreExpansion/ShowMoreExpansion.tsx b/packages/manager/src/components/ShowMoreExpansion/ShowMoreExpansion.tsx index 3b0b6304d3..cc25cd9e66 100644 --- a/packages/manager/src/components/ShowMoreExpansion/ShowMoreExpansion.tsx +++ b/packages/manager/src/components/ShowMoreExpansion/ShowMoreExpansion.tsx @@ -1,10 +1,10 @@ +import { Button } from '@linode/ui'; import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; import Collapse from '@mui/material/Collapse'; -import { Theme } from '@mui/material/styles'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { Button } from 'src/components/Button/Button'; +import type { Theme } from '@mui/material/styles'; const useStyles = makeStyles()( (theme: Theme, _params, classes) => ({ diff --git a/packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx b/packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx index c7d2f1f2ae..79399717b4 100644 --- a/packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx +++ b/packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx @@ -1,8 +1,7 @@ -import { Stack } from '@linode/ui'; +import { Button, Stack } from '@linode/ui'; import { useSnackbar } from 'notistack'; import React from 'react'; -import { Button } from 'src/components/Button/Button'; import { Snackbar } from 'src/components/Snackbar/Snackbar'; import { getEventMessage } from 'src/features/Events/utils'; diff --git a/packages/manager/src/components/StackScript/StackScript.tsx b/packages/manager/src/components/StackScript/StackScript.tsx index 7ae7824d2f..788fe95d0e 100644 --- a/packages/manager/src/components/StackScript/StackScript.tsx +++ b/packages/manager/src/components/StackScript/StackScript.tsx @@ -1,10 +1,9 @@ -import { Box, Divider } from '@linode/ui'; +import { Box, Button, Divider } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { Link, useHistory } from 'react-router-dom'; import { makeStyles } from 'tss-react/mui'; -import { Button } from 'src/components/Button/Button'; import { Chip } from 'src/components/Chip'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; diff --git a/packages/manager/src/components/Tag/Tag.styles.ts b/packages/manager/src/components/Tag/Tag.styles.ts index 77a491cc8c..773e9c48c2 100644 --- a/packages/manager/src/components/Tag/Tag.styles.ts +++ b/packages/manager/src/components/Tag/Tag.styles.ts @@ -1,10 +1,8 @@ -import { omittedProps } from '@linode/ui'; +import { StyledLinkButton, omittedProps } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { Chip } from 'src/components/Chip'; -import { StyledLinkButton } from '../Button/StyledLinkButton'; - import type { TagProps } from './Tag'; export const StyledChip = styled(Chip, { diff --git a/packages/manager/src/components/TagCell/TagCell.tsx b/packages/manager/src/components/TagCell/TagCell.tsx index 2cdcbd04ca..ec217726a2 100644 --- a/packages/manager/src/components/TagCell/TagCell.tsx +++ b/packages/manager/src/components/TagCell/TagCell.tsx @@ -1,4 +1,10 @@ -import { CircleProgress, IconButton, omittedProps } from '@linode/ui'; +import { + CircleProgress, + IconButton, + StyledPlusIcon, + StyledTagButton, + omittedProps, +} from '@linode/ui'; import MoreHoriz from '@mui/icons-material/MoreHoriz'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; @@ -7,7 +13,6 @@ import * as React from 'react'; import { Tag } from 'src/components/Tag/Tag'; import { useWindowDimensions } from 'src/hooks/useWindowDimensions'; -import { StyledPlusIcon, StyledTagButton } from '../Button/StyledTagButton'; import { AddTag } from './AddTag'; import { TagDrawer } from './TagDrawer'; diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx index dfee8dabdd..90ae6e5651 100644 --- a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx +++ b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx @@ -1,11 +1,10 @@ -import { Box, CircleProgress } from '@linode/ui'; +import { Box, CircleProgress, StyledLinkButton } from '@linode/ui'; import * as React from 'react'; import { Typography } from 'src/components/Typography'; import { useAccountNetworkTransfer } from 'src/queries/account/transfer'; import { useRegionsQuery } from 'src/queries/regions/regions'; -import { StyledLinkButton } from '../Button/StyledLinkButton'; import { StyledTransferDisplayContainer } from './TransferDisplay.styles'; import { TransferDisplayDialog } from './TransferDisplayDialog'; import { diff --git a/packages/manager/src/components/Uploaders/FileUpload.styles.ts b/packages/manager/src/components/Uploaders/FileUpload.styles.ts index c5b1ef3bdf..66ab50509d 100644 --- a/packages/manager/src/components/Uploaders/FileUpload.styles.ts +++ b/packages/manager/src/components/Uploaders/FileUpload.styles.ts @@ -1,9 +1,9 @@ +import { rotate360 } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { makeStyles } from 'tss-react/mui'; import UploadPending from 'src/assets/icons/uploadPending.svg'; import { Typography } from 'src/components/Typography'; -import { rotate360 } from 'src/styles/keyframes'; import type { FileUploadProps } from './FileUpload'; import type { Theme } from '@mui/material/styles'; diff --git a/packages/manager/src/components/Uploaders/FileUpload.tsx b/packages/manager/src/components/Uploaders/FileUpload.tsx index 6152322f7a..51b5e81b1d 100644 --- a/packages/manager/src/components/Uploaders/FileUpload.tsx +++ b/packages/manager/src/components/Uploaders/FileUpload.tsx @@ -1,9 +1,8 @@ -import { Tooltip } from '@linode/ui'; +import { Button, Tooltip } from '@linode/ui'; import * as React from 'react'; import CautionIcon from 'src/assets/icons/caution.svg'; import FileUploadComplete from 'src/assets/icons/fileUploadComplete.svg'; -import { Button } from 'src/components/Button/Button'; import { LinearProgress } from 'src/components/LinearProgress'; import { Typography } from 'src/components/Typography'; import { readableBytes } from 'src/utilities/unitConversions'; diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.styles.ts b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.styles.ts index da70cc34ee..8f31c64d77 100644 --- a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.styles.ts +++ b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.styles.ts @@ -1,7 +1,6 @@ -import { omittedProps } from '@linode/ui'; +import { Button, omittedProps } from '@linode/ui'; import { styled } from '@mui/material/styles'; -import { Button } from 'src/components/Button/Button'; import { Typography } from 'src/components/Typography'; interface DropZoneClassProps { diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx index 30c4127650..a4c09edacc 100644 --- a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx +++ b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx @@ -1,11 +1,10 @@ -import { Box, Stack } from '@linode/ui'; +import { Box, Button, Stack } from '@linode/ui'; import { styled } from '@mui/material'; import { Duration } from 'luxon'; import * as React from 'react'; import { useDropzone } from 'react-dropzone'; import { BarPercent } from 'src/components/BarPercent'; -import { Button } from 'src/components/Button/Button'; import { Typography } from 'src/components/Typography'; import { MAX_FILE_SIZE_IN_BYTES } from 'src/components/Uploaders/reducer'; import { readableBytes } from 'src/utilities/unitConversions'; diff --git a/packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx b/packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx index 84256163ea..40292f3ec9 100644 --- a/packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx +++ b/packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx @@ -1,11 +1,11 @@ import { getObjectURL } from '@linode/api-v4/lib/object-storage'; +import { Button } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useDropzone } from 'react-dropzone'; import { debounce } from 'throttle-debounce'; -import { Button } from 'src/components/Button/Button'; import { fetchBucketAndUpdateCache } from 'src/queries/object-storage/utilities'; import { sendObjectsQueuedForUploadEvent } from 'src/utilities/analytics/customEventAnalytics'; import { readableBytes } from 'src/utilities/unitConversions'; diff --git a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx index 99f9424c9e..84133c5c4a 100644 --- a/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx +++ b/packages/manager/src/components/VerticalLinearStepper/VerticalLinearStepper.tsx @@ -1,3 +1,4 @@ +import { Button } from '@linode/ui'; import { Step, StepConnector, @@ -7,7 +8,6 @@ import { useTheme, } from '@mui/material'; import Box from '@mui/material/Box'; -import { Theme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import React, { useState } from 'react'; @@ -18,7 +18,8 @@ import { StyledCircleIcon, StyledColorlibConnector, } from './VerticalLinearStepper.styles'; -import { Button } from '../Button/Button'; + +import type { Theme } from '@mui/material/styles'; type VerticalLinearStep = { content: JSX.Element; @@ -73,10 +74,10 @@ export const VerticalLinearStepper = ({ /> } sx={{ - cursor: 'pointer !important', '& .MuiStepIcon-text': { display: 'none', }, + cursor: 'pointer !important', p: 0, }} > @@ -137,10 +138,10 @@ export const VerticalLinearStepper = ({ )} {index !== 2 && (
    - - - {type.columns.length > 0 && - type.columns.map((col, columnIndex) => { - return ( - - {col.title} - - ); - })} - - - - {type.data.length === 0 ? ( - - ) : ( - paginatedData.map((data, idx) => { - return ( - - {type.columns.length > 0 && - type.columns.map( - ( - { render, title }, - columnIndex - ) => { - return ( - - {render(data)} - - ); - } - )} - - ); - }) - )} - -
    - - - ); - }} - - ); - }} - -

    - ); - })} - - Are you sure you want to delete this record? - - - - ); - } + static defaultDrawerState: DrawerState = { + mode: 'create', + open: false, + type: 'NS', + }; confirmDeletion = (recordId: number) => this.updateConfirmDialog((confirmDialog) => ({ @@ -282,12 +112,6 @@ class DomainRecords extends React.Component { recordId, })); - static defaultDrawerState: DrawerState = { - mode: 'create', - open: false, - type: 'NS', - }; - deleteDomainRecord = () => { const { domain: { id: domainId }, @@ -693,17 +517,18 @@ class DomainRecords extends React.Component { ? this.openForEditPrimaryDomain(d) : this.openForEditSecondaryDomain(d); }; + openForCreateARecord = () => this.openForCreation('AAAA'); openForCreateCAARecord = () => this.openForCreation('CAA'); - openForCreateCNAMERecord = () => this.openForCreation('CNAME'); + openForCreateCNAMERecord = () => this.openForCreation('CNAME'); openForCreateMXRecord = () => this.openForCreation('MX'); - openForCreateNSRecord = () => this.openForCreation('NS'); + openForCreateNSRecord = () => this.openForCreation('NS'); openForCreateSRVRecord = () => this.openForCreation('SRV'); - openForCreateTXTRecord = () => this.openForCreation('TXT'); + openForCreateTXTRecord = () => this.openForCreation('TXT'); openForCreation = (type: RecordType) => this.updateDrawer(() => ({ mode: 'create', @@ -711,24 +536,24 @@ class DomainRecords extends React.Component { submitting: false, type, })); + openForEditARecord = ( f: Pick ) => this.openForEditing('AAAA', f); - openForEditCAARecord = ( f: Pick ) => this.openForEditing('CAA', f); + openForEditCNAMERecord = ( f: Pick ) => this.openForEditing('CNAME', f); - openForEditMXRecord = ( f: Pick ) => this.openForEditing('MX', f); + openForEditNSRecord = ( f: Pick ) => this.openForEditing('NS', f); - openForEditPrimaryDomain = (f: Partial) => this.openForEditing('master', f); @@ -738,7 +563,6 @@ class DomainRecords extends React.Component { 'id' | 'name' | 'port' | 'priority' | 'protocol' | 'target' | 'weight' > ) => this.openForEditing('SRV', f); - openForEditSecondaryDomain = (f: Partial) => this.openForEditing('slave', f); @@ -783,6 +607,183 @@ class DomainRecords extends React.Component { updateDrawer = (fn: (d: DrawerState) => DrawerState) => this.setState(over(lensPath(['drawer']), fn)); + + constructor(props: Props) { + super(props); + this.state = { + confirmDialog: { + open: false, + submitting: false, + }, + drawer: DomainRecords.defaultDrawerState, + types: this.generateTypes(), + }; + } + + componentDidUpdate(prevProps: Props) { + if ( + !equals(prevProps.domainRecords, this.props.domainRecords) || + !equals(prevProps.domain, this.props.domain) + ) { + this.setState({ types: this.generateTypes() }); + } + } + + render() { + const { domain, domainRecords } = this.props; + const { confirmDialog, drawer } = this.state; + + return ( + <> + + {this.state.types.map((type, eachTypeIdx) => { + const ref: React.Ref = React.createRef(); + + return ( +
    + + + + {type.title} + + + {type.link && ( + + {' '} + {type.link()}{' '} + + )} + + + {({ data: orderedData }) => { + return ( + + {({ + count, + data: paginatedData, + handlePageChange, + handlePageSizeChange, + page, + pageSize, + }) => { + return ( + <> + + + + {type.columns.length > 0 && + type.columns.map((col, columnIndex) => { + return ( + + {col.title} + + ); + })} + + + + {type.data.length === 0 ? ( + + ) : ( + paginatedData.map((data, idx) => { + return ( + + {type.columns.length > 0 && + type.columns.map( + ( + { render, title }, + columnIndex + ) => { + return ( + + {render(data)} + + ); + } + )} + + ); + }) + )} + +
    + + + ); + }} +     + ); + }} +     +
    + ); + })} + + Are you sure you want to delete this record? + + + + ); + } } const msToReadable = (v: number): null | string => diff --git a/packages/manager/src/features/Domains/DomainTableRow.tsx b/packages/manager/src/features/Domains/DomainTableRow.tsx index 4d87c9c838..fac8a32731 100644 --- a/packages/manager/src/features/Domains/DomainTableRow.tsx +++ b/packages/manager/src/features/Domains/DomainTableRow.tsx @@ -1,18 +1,20 @@ -import { Domain, DomainStatus } from '@linode/api-v4/lib/domains'; +import { StyledLinkButton } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { Hidden } from 'src/components/Hidden'; import { StatusIcon } from 'src/components/StatusIcon/StatusIcon'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; -import { DomainActionMenu, Handlers } from './DomainActionMenu'; +import { DomainActionMenu } from './DomainActionMenu'; import { getDomainDisplayType } from './domainUtils'; +import type { Handlers } from './DomainActionMenu'; +import type { Domain, DomainStatus } from '@linode/api-v4/lib/domains'; + interface DomainTableRowProps extends Handlers { domain: Domain; } diff --git a/packages/manager/src/features/Domains/DomainsLanding.tsx b/packages/manager/src/features/Domains/DomainsLanding.tsx index ced0818f52..a5b026bdc1 100644 --- a/packages/manager/src/features/Domains/DomainsLanding.tsx +++ b/packages/manager/src/features/Domains/DomainsLanding.tsx @@ -1,11 +1,10 @@ -import { CircleProgress, Notice } from '@linode/ui'; +import { Button, CircleProgress, Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { createLazyRoute } from '@tanstack/react-router'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { Button } from 'src/components/Button/Button'; import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; diff --git a/packages/manager/src/features/Domains/DownloadDNSZoneFileButton.tsx b/packages/manager/src/features/Domains/DownloadDNSZoneFileButton.tsx index b165c463e4..25ec08bea0 100644 --- a/packages/manager/src/features/Domains/DownloadDNSZoneFileButton.tsx +++ b/packages/manager/src/features/Domains/DownloadDNSZoneFileButton.tsx @@ -1,7 +1,7 @@ import { getDNSZoneFile } from '@linode/api-v4/lib/domains'; +import { Button } from '@linode/ui'; import * as React from 'react'; -import { Button } from 'src/components/Button/Button'; import { downloadFile } from 'src/utilities/downloadFile'; type DownloadDNSZoneFileButtonProps = { diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts index ff49d135ab..3c5b5605c3 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferCheckoutBar.styles.ts @@ -1,7 +1,7 @@ +import { Button } from '@linode/ui'; import Close from '@mui/icons-material/Close'; import { styled } from '@mui/material/styles'; -import { Button } from 'src/components/Button/Button'; import { Typography } from 'src/components/Typography'; export const StyledButton = styled(Button, { diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/CreateTransferSuccessDialog.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/CreateTransferSuccessDialog.tsx index 1deca5e434..be31f51fff 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/CreateTransferSuccessDialog.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/CreateTransferSuccessDialog.tsx @@ -1,11 +1,10 @@ -import { Tooltip } from '@linode/ui'; +import { Button, Tooltip } from '@linode/ui'; import copy from 'copy-to-clipboard'; import { DateTime } from 'luxon'; import { update } from 'ramda'; import * as React from 'react'; import { debounce } from 'throttle-debounce'; -import { Button } from 'src/components/Button/Button'; import { Typography } from 'src/components/Typography'; import { sendEntityTransferCopyDraftEmailEvent, diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.styles.ts b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.styles.ts index f0feb2f489..f75105158e 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.styles.ts +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersLanding/TransferControls.styles.ts @@ -1,7 +1,7 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Button } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; -import { Button } from 'src/components/Button/Button'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/EntityTransfers/RenderTransferRow.tsx b/packages/manager/src/features/EntityTransfers/RenderTransferRow.tsx index 902259d38d..b34d45e7ae 100644 --- a/packages/manager/src/features/EntityTransfers/RenderTransferRow.tsx +++ b/packages/manager/src/features/EntityTransfers/RenderTransferRow.tsx @@ -1,6 +1,6 @@ +import { StyledLinkButton } from '@linode/ui'; import * as React from 'react'; -import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; import { Hidden } from 'src/components/Hidden'; import { MaskableText } from 'src/components/MaskableText/MaskableText'; diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx index 41e3135af1..4981a2a0c3 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/FirewallDeviceLanding.tsx @@ -1,11 +1,10 @@ -import { Notice } from '@linode/ui'; +import { Button, Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'; -import { Button } from 'src/components/Button/Button'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { Typography } from 'src/components/Typography'; import { useAllFirewallDevicesQuery } from 'src/queries/firewalls'; diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleTable.styles.ts b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleTable.styles.ts index 320f254c7d..7047efed1b 100644 --- a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleTable.styles.ts +++ b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRuleTable.styles.ts @@ -1,9 +1,7 @@ -import { Box, omittedProps } from '@linode/ui'; +import { Box, Button, StyledLinkButton, omittedProps } from '@linode/ui'; import { styled } from '@mui/material/styles'; import DragIndicator from 'src/assets/icons/drag-indicator.svg'; -import { Button } from 'src/components/Button/Button'; -import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import type { FirewallRuleTableRowProps } from './FirewallRuleTable'; diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx index 664b60b082..239c7e9879 100644 --- a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx +++ b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallLanding.tsx @@ -1,9 +1,8 @@ -import { CircleProgress } from '@linode/ui'; +import { Button, CircleProgress } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { Button } from 'src/components/Button/Button'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { GenerateFirewallDialog } from 'src/components/GenerateFirewallDialog/GenerateFirewallDialog'; import { Hidden } from 'src/components/Hidden'; diff --git a/packages/manager/src/features/GlobalNotifications/ComplianceBanner.tsx b/packages/manager/src/features/GlobalNotifications/ComplianceBanner.tsx index a630ab5438..61d5163520 100644 --- a/packages/manager/src/features/GlobalNotifications/ComplianceBanner.tsx +++ b/packages/manager/src/features/GlobalNotifications/ComplianceBanner.tsx @@ -1,8 +1,7 @@ -import { Box } from '@linode/ui'; +import { Box, Button } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; -import { Button } from 'src/components/Button/Button'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { Typography } from 'src/components/Typography'; import { complianceUpdateContext } from 'src/context/complianceUpdateContext'; diff --git a/packages/manager/src/features/GlobalNotifications/EmailBounce.tsx b/packages/manager/src/features/GlobalNotifications/EmailBounce.tsx index 63b02b09e9..ebf7393a05 100644 --- a/packages/manager/src/features/GlobalNotifications/EmailBounce.tsx +++ b/packages/manager/src/features/GlobalNotifications/EmailBounce.tsx @@ -1,4 +1,4 @@ -import { Notice } from '@linode/ui'; +import { Button, Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import useMediaQuery from '@mui/material/useMediaQuery'; @@ -6,7 +6,6 @@ import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { Button } from 'src/components/Button/Button'; import { Typography } from 'src/components/Typography'; import { useAccount, useMutateAccount } from 'src/queries/account/account'; import { useNotificationsQuery } from 'src/queries/account/notifications'; diff --git a/packages/manager/src/features/GlobalNotifications/TaxCollectionBanner.tsx b/packages/manager/src/features/GlobalNotifications/TaxCollectionBanner.tsx index 51f52a13ef..38066b1f84 100644 --- a/packages/manager/src/features/GlobalNotifications/TaxCollectionBanner.tsx +++ b/packages/manager/src/features/GlobalNotifications/TaxCollectionBanner.tsx @@ -1,8 +1,8 @@ +import { Button } from '@linode/ui'; import { DateTime } from 'luxon'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { Button } from 'src/components/Button/Button'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { Link } from 'src/components/Link'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/GlobalNotifications/VerificationDetailsBanner.tsx b/packages/manager/src/features/GlobalNotifications/VerificationDetailsBanner.tsx index 38c705b271..3a64dddd99 100644 --- a/packages/manager/src/features/GlobalNotifications/VerificationDetailsBanner.tsx +++ b/packages/manager/src/features/GlobalNotifications/VerificationDetailsBanner.tsx @@ -1,8 +1,7 @@ -import { Box, Notice } from '@linode/ui'; +import { Box, Button, Notice } from '@linode/ui'; import React from 'react'; import { useHistory } from 'react-router-dom'; -import { Button } from 'src/components/Button/Button'; import { Typography } from 'src/components/Typography'; interface Props { diff --git a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx index 26da650b1c..d7998b98c9 100644 --- a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx @@ -1,6 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Notice, Paper, Stack } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, Button, Notice, Paper, Stack } from '@linode/ui'; import { createImageSchema } from '@linode/validation'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -8,7 +7,6 @@ import { Controller, useForm } from 'react-hook-form'; import { useHistory, useLocation } from 'react-router-dom'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { Button } from 'src/components/Button/Button'; import { Checkbox } from 'src/components/Checkbox'; import { DISK_ENCRYPTION_IMAGES_CAVEAT_COPY } from 'src/components/Encryption/constants'; import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; diff --git a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx index 7b1c0a8dbe..d4ad752700 100644 --- a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx +++ b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx @@ -1,6 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; -import { Notice, Paper, Stack } from '@linode/ui'; -import { Box } from '@linode/ui'; +import { Box, Button, Notice, Paper, Stack } from '@linode/ui'; import { useSnackbar } from 'notistack'; import React, { useState } from 'react'; import { flushSync } from 'react-dom'; @@ -9,7 +8,6 @@ import { useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Button } from 'src/components/Button/Button'; import { Checkbox } from 'src/components/Checkbox'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigPanel.tsx index 8715c86719..a260d45da7 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigPanel.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeConfigPanel.tsx @@ -1,11 +1,10 @@ -import { Paper } from '@linode/ui'; +import { Button, Paper } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import Download from 'src/assets/icons/download.svg'; import View from 'src/assets/icons/view.svg'; -import { Button } from 'src/components/Button/Button'; import { Typography } from 'src/components/Typography'; import { useKubenetesKubeConfigQuery } from 'src/queries/kubernetes'; import { downloadFile } from 'src/utilities/downloadFile'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx index c3ab1f7eda..01ad964451 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx @@ -1,10 +1,9 @@ -import { Box, CircleProgress } from '@linode/ui'; +import { Box, CircleProgress, StyledLinkButton } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { TagCell } from 'src/components/TagCell/TagCell'; import { StyledBox, diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx index a015b59c04..875e6e4b78 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx @@ -1,15 +1,16 @@ -import { Box, Stack } from '@linode/ui'; +import { Box, Stack, StyledActionButton } from '@linode/ui'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { useTheme } from '@mui/material/styles'; import { useSnackbar } from 'notistack'; import * as React from 'react'; +import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { StyledActionButton } from 'src/components/Button/StyledActionButton'; import { Chip } from 'src/components/Chip'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { EntityDetail } from 'src/components/EntityDetail/EntityDetail'; import { EntityHeader } from 'src/components/EntityHeader/EntityHeader'; +import { Hidden } from 'src/components/Hidden'; import { Typography } from 'src/components/Typography'; import { KubeClusterSpecs } from 'src/features/Kubernetes/KubernetesClusterDetail/KubeClusterSpecs'; import { getKubeControlPlaneACL } from 'src/features/Kubernetes/kubeUtils'; @@ -29,8 +30,6 @@ import { KubeControlPlaneACLDrawer } from './KubeControlPaneACLDrawer'; import { KubeEntityDetailFooter } from './KubeEntityDetailFooter'; import type { KubernetesCluster } from '@linode/api-v4/lib/kubernetes'; -import { Hidden } from 'src/components/Hidden'; -import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; interface Props { cluster: KubernetesCluster; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx index 12de978e7d..b5d458499d 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AutoscalePoolDialog.tsx @@ -1,4 +1,4 @@ -import { Notice } from '@linode/ui'; +import { Button, Notice } from '@linode/ui'; import { AutoscaleNodePoolSchema } from '@linode/validation/lib/kubernetes.schema'; import Grid from '@mui/material/Unstable_Grid2'; import { useFormik } from 'formik'; @@ -7,7 +7,6 @@ import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Button } from 'src/components/Button/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx index f788c76b0e..5ae5ca7c12 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx @@ -1,8 +1,7 @@ -import { Box, Paper, Stack, Tooltip } from '@linode/ui'; +import { Box, Paper, Stack, StyledActionButton, Tooltip } from '@linode/ui'; import * as React from 'react'; import { ActionMenu } from 'src/components/ActionMenu/ActionMenu'; -import { StyledActionButton } from 'src/components/Button/StyledActionButton'; import { Hidden } from 'src/components/Hidden'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx index 5003c76bfd..2ca17fc579 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePoolsDisplay.tsx @@ -1,8 +1,7 @@ -import { CircleProgress, Stack } from '@linode/ui'; +import { Button, CircleProgress, Stack } from '@linode/ui'; import React, { useState } from 'react'; import { Waypoint } from 'react-waypoint'; -import { Button } from 'src/components/Button/Button'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Typography } from 'src/components/Typography'; import { useAllKubernetesNodePoolQuery } from 'src/queries/kubernetes'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx index 56cbf4734d..b0bae61893 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/UpgradeKubernetesVersionBanner.tsx @@ -1,13 +1,13 @@ +import { Button } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { Button } from 'src/components/Button/Button'; import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner'; import { Typography } from 'src/components/Typography'; import { useKubernetesVersionQuery } from 'src/queries/kubernetes'; -import UpgradeVersionModal from '../UpgradeVersionModal'; import { getNextVersion } from '../kubeUtils'; +import UpgradeVersionModal from '../UpgradeVersionModal'; interface Props { clusterID: number; @@ -32,8 +32,8 @@ export const UpgradeKubernetesVersionBanner = (props: Props) => { {nextVersion ? (     diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx index c1f6e08f34..e985eee257 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshot.tsx @@ -47,6 +47,11 @@ export const CaptureSnapshot = (props: Props) => { }, }); + const handleClose = () => { + setIsSnapshotConfirmationDialogOpen(false); + reset(); + }; + const hasErrorFor = getErrorMap(['label'], snapshotError); return ( @@ -84,8 +89,7 @@ export const CaptureSnapshot = (props: Props) => { setIsSnapshotConfirmationDialogOpen(false)} - onExited={() => reset()} + onClose={handleClose} onSnapshot={() => snapshotForm.handleSubmit()} open={isSnapshotConfirmationDialogOpen} /> diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshotConfirmationDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshotConfirmationDialog.tsx index d3ce406cae..7568974343 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshotConfirmationDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeBackup/CaptureSnapshotConfirmationDialog.tsx @@ -8,13 +8,12 @@ interface Props { error: string | undefined; loading: boolean; onClose: () => void; - onExited: () => void; onSnapshot: () => void; open: boolean; } export const CaptureSnapshotConfirmationDialog = (props: Props) => { - const { error, loading, onClose, onExited, onSnapshot, open } = props; + const { error, loading, onClose, onSnapshot, open } = props; const actions = ( { actions={actions} error={error} onClose={onClose} - onExited={onExited} open={open} title="Take a snapshot?" > diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx index 36ba47f6fc..597112500e 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditIPRDNSDrawer.tsx @@ -40,24 +40,20 @@ export const EditIPRDNSDrawer = (props: Props) => { enqueueSnackbar(`Successfully updated RDNS for ${ip?.address}`, { variant: 'success', }); - onClose(); + handleClose(); }, }); - const onExited = () => { + const handleClose = () => { formik.resetForm(); reset(); + onClose(); }; const errorMap = getErrorMap(['rdns'], error); return ( - +
    {Boolean(errorMap.none) && ( {errorMap.none} @@ -80,7 +76,7 @@ export const EditIPRDNSDrawer = (props: Props) => { loading: isPending, type: 'submit', }} - secondaryButtonProps={{ label: 'Cancel', onClick: onClose }} + secondaryButtonProps={{ label: 'Cancel', onClick: handleClose }} style={{ marginTop: 16 }} />
    diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx index aa91a6a728..c1c532a3df 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx @@ -63,26 +63,22 @@ export const EditRangeRDNSDrawer = (props: Props) => { enqueueSnackbar(`Successfully updated RDNS for ${range?.range}`, { variant: 'success', }); - onClose(); + handleClose(); }, }); const theme = useTheme(); - const onExited = () => { + const handleClose = () => { formik.resetForm(); reset(); + onClose(); }; const errorMap = getErrorMap(['rdns'], error); return ( - +
    {Boolean(errorMap.none) && ( @@ -117,7 +113,7 @@ export const EditRangeRDNSDrawer = (props: Props) => { secondaryButtonProps={{ 'data-testid': 'cancel', label: 'Close', - onClick: onClose, + onClick: handleClose, }} style={{ marginTop: 16 }} /> diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/ResizeConfirmationDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/ResizeConfirmationDialog.tsx index 8d7d91068a..ae81679eb9 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/ResizeConfirmationDialog.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/ResizeConfirmationDialog.tsx @@ -6,7 +6,7 @@ import { Typography } from 'src/components/Typography'; export interface Props { currentPlan: string; - error?: JSX.Element | string; + error?: string; isOpen: boolean; onClose: () => void; onResize: () => void; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.test.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.test.tsx index 2b4e1b9dc8..fd2bc81d4d 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.test.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.test.tsx @@ -1,4 +1,4 @@ -import { screen } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import React from 'react'; @@ -75,6 +75,8 @@ describe('HostNamesDrawer', () => { const closeButton = screen.getByRole('button', { name: 'Close drawer' }); await userEvent.click(closeButton); - expect(mockOnClose).toHaveBeenCalled(); + await waitFor(() => { + expect(mockOnClose).toHaveBeenCalled(); + }); }); }); diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx index d6aec436ec..6c01457358 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx @@ -109,7 +109,7 @@ export const CreateBucketDrawer = (props: Props) => { } } - onClose(); + handleClose(); } catch (errors) { for (const error of errors) { setError(error?.field ?? 'root', { message: error.reason }); @@ -137,13 +137,13 @@ export const CreateBucketDrawer = (props: Props) => { selectedRegionId: clusterRegion?.id ?? '', }); + const handleClose = () => { + reset(); + onClose(); + }; + return ( - + {isRestrictedUser && ( { : '', type: 'submit', }} - secondaryButtonProps={{ label: 'Cancel', onClick: onClose }} + secondaryButtonProps={{ label: 'Cancel', onClick: handleClose }} /> { } } - onClose(); + handleClose(); } catch (errors) { for (const error of errors) { setError(error?.field ?? 'root', { message: error.reason }); @@ -152,6 +152,11 @@ export const OMC_CreateBucketDrawer = (props: Props) => { } }; + const handleClose = () => { + reset(); + onClose(); + }; + const handleBucketFormSubmit = async ( e: React.FormEvent ) => { @@ -276,12 +281,7 @@ export const OMC_CreateBucketDrawer = (props: Props) => { }, [watchRegion]); return ( - + {isRestrictedUser && ( { : '', type: 'submit', }} - secondaryButtonProps={{ label: 'Cancel', onClick: onClose }} + secondaryButtonProps={{ label: 'Cancel', onClick: handleClose }} /> diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx index 7cc7f432bc..c89332c6e1 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.tsx @@ -71,10 +71,8 @@ export const PlacementGroupsLinodes = (props: Props) => { `/placement-groups/${placementGroup.id}/linodes/unassign/${linode.id}` ); }; - const handleExitedUnassignModal = () => { - setSelectedLinode(undefined); - }; const handleCloseDrawer = () => { + setSelectedLinode(undefined); history.replace(`/placement-groups/${placementGroup.id}/linodes`); }; const isAssignLinodesDrawerOpen = history.location.pathname.includes( @@ -127,7 +125,6 @@ export const PlacementGroupsLinodes = (props: Props) => { /> diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx index 98a372e0ad..1e9c99fb45 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx @@ -18,13 +18,12 @@ import type { interface Props { onClose: () => void; - onExited?: () => void; open: boolean; selectedLinode: Linode | undefined; } export const PlacementGroupsUnassignModal = (props: Props) => { - const { onClose, onExited, open, selectedLinode } = props; + const { onClose, open, selectedLinode } = props; const { enqueueSnackbar } = useSnackbar(); const { id: placementGroupId, linodeId } = useParams<{ @@ -104,7 +103,6 @@ export const PlacementGroupsUnassignModal = (props: Props) => { }, }} onClose={onClose} - onExited={onExited} open={open} title="Delete Placement Group" > @@ -118,7 +116,6 @@ export const PlacementGroupsUnassignModal = (props: Props) => { actions={actions} error={error?.[0]?.reason} onClose={onClose} - onExited={onExited} open={open} title={linode?.label ? `Unassign ${linode.label}` : 'Unassign'} > diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx index ef9819f366..ed7834df2f 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx @@ -65,7 +65,7 @@ export const SubnetCreateDrawer = (props: Props) => { const onCreateSubnet = async (values: CreateSubnetPayload) => { try { await createSubnet(values); - onClose(); + handleClose(); } catch (errors) { for (const error of errors) { setError(error?.field ?? 'root', { message: error.reason }); @@ -73,16 +73,14 @@ export const SubnetCreateDrawer = (props: Props) => { } }; + const handleClose = () => { + resetForm(); + resetRequest(); + onClose(); + }; + return ( - { - resetForm(); - resetRequest(); - }} - onClose={onClose} - open={open} - title={'Create Subnet'} - > + {errors.root?.message && ( )} @@ -147,7 +145,7 @@ export const SubnetCreateDrawer = (props: Props) => { loading: isPending || isSubmitting, type: 'submit', }} - secondaryButtonProps={{ label: 'Cancel', onClick: onClose }} + secondaryButtonProps={{ label: 'Cancel', onClick: handleClose }} /> diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts index 78381da15a..622d44fbe7 100644 --- a/packages/ui/src/foundations/themes/light.ts +++ b/packages/ui/src/foundations/themes/light.ts @@ -666,6 +666,7 @@ export const lightTheme: ThemeOptions = { }, justifyContent: 'flex-start', margin: 0, + marginTop: 24, padding: 24, }, }, From c59c9430bac3d12115ac8a2b41b0c97e2a48e0a9 Mon Sep 17 00:00:00 2001 From: subsingh-akamai Date: Fri, 22 Nov 2024 10:07:10 +0530 Subject: [PATCH 072/131] test: [M3-8393] - Cypress test for Account Maintenance CSV downloads (#11168) * Updated test confirm maintenance details in the tables - to validate entry in downloaded csv files * Added changeset: Cypress test for Account Maintenance CSV downloads * Removed console.log * Removed library - papaparse to parse csv;Implemented script to parse the csv file * Removed it.only from test * Using specific locator for Download CSV and added code to delete downloaded file after assertion * Refeactoring as per review comment for delete files * Added assertion in readFile to ensure file content is not empty --- .../pr-11168-tests-1730108478631.md | 5 + .../core/account/account-maintenance.spec.ts | 124 +++++++++++++++++- packages/manager/cypress/support/util/csv.ts | 48 +++++++ 3 files changed, 170 insertions(+), 7 deletions(-) create mode 100644 packages/manager/.changeset/pr-11168-tests-1730108478631.md create mode 100644 packages/manager/cypress/support/util/csv.ts diff --git a/packages/manager/.changeset/pr-11168-tests-1730108478631.md b/packages/manager/.changeset/pr-11168-tests-1730108478631.md new file mode 100644 index 0000000000..ac1f39b27c --- /dev/null +++ b/packages/manager/.changeset/pr-11168-tests-1730108478631.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tests +--- + +Cypress test for Account Maintenance CSV downloads ([#11168](https://github.com/linode/manager/pull/11168)) diff --git a/packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts b/packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts index 56292a96bd..ba00f88133 100644 --- a/packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts +++ b/packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts @@ -1,5 +1,6 @@ import { mockGetMaintenance } from 'support/intercepts/account'; import { accountMaintenanceFactory } from 'src/factories'; +import { parseCsv } from 'support/util/csv'; describe('Maintenance', () => { /* @@ -7,6 +8,21 @@ describe('Maintenance', () => { * - When there is no pending maintenance, "No pending maintenance." is shown in the table. * - When there is no completed maintenance, "No completed maintenance." is shown in the table. */ + beforeEach(() => { + const downloadsFolder = Cypress.config('downloadsFolder'); + const filePatterns = '{pending-maintenance*,completed-maintenance*}'; + // Delete the file before the test + cy.exec(`rm -f ${downloadsFolder}/${filePatterns}`, { + failOnNonZeroExit: false, + }).then((result) => { + if (result.code === 0) { + cy.log(`Deleted file: ${filePatterns}`); + } else { + cy.log(`Failed to delete file: ${filePatterns}`); + } + }); + }); + it('table empty when no maintenance', () => { mockGetMaintenance([], []).as('getMaintenance'); @@ -118,12 +134,106 @@ describe('Maintenance', () => { }); }); - // Confirm download buttons work - cy.get('button') - .filter(':contains("Download CSV")') - .should('be.visible') - .should('be.enabled') - .click({ multiple: true }); - // TODO Need to add assertions to confirm CSV contains the expected contents on first trial (M3-8393) + // Validate content of the downloaded CSV for pending maintenance + cy.get('a[download*="pending-maintenance"]') + .invoke('attr', 'download') + .then((fileName) => { + const downloadsFolder = Cypress.config('downloadsFolder'); + + // Locate the element for pending-maintenance and then find its sibling