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 00000000000..00ede31e247 --- /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 f2ab261a93e..a62c1d96040 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 00000000000..a9984fd394a --- /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 066ac25045c..d09a5484d2d 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 65f55f44187..d834f55fb2d 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 9e1134a0f02..9637bf42c73 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 efd25755d06..0584e4b195c 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 7c26208c4e9..2652233c815 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 0a383207b1b..ad365e380a1 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 7bf5cf630d6..67551fdbdf2 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 4e210b5f4ca..b42ac1ebe7a 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 69b998cfd4a..54c0316b385 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 07d01cd91bc..a58ef52c366 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 2951c34ee34..7ae7824d2f8 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 e5ad1ec0225..3b50311095b 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 54926a1b8ac..67adeef3f9b 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 6a99347fd21..5470fb0899f 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 45fa7b3809f..8dd31bba9f9 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 90289afadcf..58a7d152fb2 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 5da22919834..b3ab3e678da 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 0bfd67a0b85..174486d23e0 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 f1db5c4759b..cf6dfcaae0b 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 8d2387c989e..8fb1914e919 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 89e06beb12f..43c8a4367e6 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 57606e222d2..5e048b40542 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 2e2768e6c05..c0f4fedcbcc 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 dc2bf134a93..504e84bb8cd 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 fcf4339ed35..a8ea018ca26 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 7215aa6bf87..99163fa45c2 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 6c44321ce49..05de98947e4 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 6fc8200980e..41a0d9bb56a 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 bd4a2e76c84..10706d4a054 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 08c1e59efab..0a62914917d 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 26d1a8c098e..66c6e11ad01 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 070e792bea5..47eedde3168 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 b3bcaa62788..e352648397a 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 87cc023382b..d5de5b95061 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 f0ad6916711..857d7a4833c 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 4f98b28637e..575809aa0d7 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 4d56a83b079..637c310821c 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 bea6fc91ef4..9e6d78fb9ee 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 a6e5d9374d1..87bd9d7c402 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 65989e5796d..fa651aba768 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 c096b2b343e..7e4dad7cf54 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 b84ec5a7fca..6d9361f867e 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 2ef7b01e54b..1daea0a5015 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 00a6c05c09c..c08d2727edb 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 0260fd5f049..f715498b028 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 dedfb32743c..144877d0dad 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 dbb4e111a0c..fb2a9e2fd26 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 9a8c8f2dc55..fd5f87bfb7c 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 8aaa0e6eae6..2ae24dd9a21 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 03388e23ac4..a26ef03d98c 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 2689d6229a1..374a87e023e 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 efba74259d0..37bf55467c7 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 caed45a3d8f..2309057377e 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 118739bf97c..3e9afd06c85 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 e1812a53fc5..5d9351dc07d 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 a87a4e5a2e7..41b7cb642ac 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 9c146e8649a..fd4460be026 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 eb978e15480..d68be69c338 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 195bc0d7b65..063ca7d533c 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 6ea3b004c25..344a08bfccf 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 7c5dc9d88e5..1a4bcf8fcc3 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 8856b1c656a..0fbc7a4898e 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 9a9bd187c8c..5a7d52752e8 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 00000000000..ea4ab9ebe4c --- /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 52619e8223f..364e02f1308 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 6186797e1e3..0939d4026bc 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 d1887cebe1c..0d3f2829be3 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 330b95f7f02..49af7e93bbd 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 47e5542387b..f8430e0871f 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 00000000000..8763a003d48 --- /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 d7f2407acb3..ac02162e06e 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 810a4c92446..cb48ac45077 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 6b4cf458e50..6e6c9d40042 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 e495d7db708..db046030fbe 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 6f91f150b1c..dcd5bc3beb9 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 99a5957085d..3976191515b 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 2aba5674d8a..738c9249a60 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 97675764fff..b00eacbf634 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 c65f67dde39..ec38258918f 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 04c3ad2a2a0..7006acc13ca 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 1e7421ac180..7ef3e3fcb8b 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 2516418fc67..5f55d3ea49d 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 e102a493d0c..3171d89e615 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 35d73a1e4ff..55c105bd6ad 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 03d1c85efae..d6fd0abfc96 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 ac0b8ccd68e..7f9b395fc8e 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 1168895d2f0..9c7f05f5677 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 3ba84a95ebe..5e5904431ba 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 0bcfd9a3cea..fffdca2ea64 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 ae3fe3b182b..d3be0d72e22 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 0c8e7a6ac1f..ce3198c04c4 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 0d66a284d73..c7d2f1f2aef 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 e5dc1d7121f..30c41276507 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 634cd91be8d..7feb8689c43 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 bbe8717ca9e..d1cd22c3a08 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 d2184880199..c4f0f11c9ec 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 3eb601769d6..76fe9e4043d 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 811a24cee3b..ac81057d5b2 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 67adeef3f9b..b310162e1aa 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 6ea06dbc27f..f35ade587c0 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 9ac9a88e315..cb025ffcf0a 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 8dd31bba9f9..08d7bf76dcb 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 44160e35d1b..e170c35ead2 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 b4cf958c96f..001ca7adaed 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 4e8316e03d1..b784a113d80 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 968a7b84174..14a5bed997b 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 1aaebc172b9..dcee670dc65 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 e60aefc45ab..0e8b07b032f 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 50d6c634731..32895538c5d 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 4915ce42a5d..b3640a1b32a 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 504e84bb8cd..3621505ee81 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 d9864096ce4..1dfcbc34a65 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 f77e7250caa..66076605c18 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 cb48ac45077..278ed3bfb26 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 6e6c9d40042..a015b59c040 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 db046030fbe..cc7c3e3e3e8 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 dcd5bc3beb9..f788c76b0ef 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 3976191515b..c99d8364886 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 b00eacbf634..df20b2298e4 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 41a0d9bb56a..cc77ba35f84 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 ee213c28063..147ab41532b 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 d13be07239d..742784a531e 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 7db562deec7..33f7e3bdfab 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 013ef0e613e..77699ddf205 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 0a62914917d..819570f3014 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 20a2aa33e18..4a57fb2c096 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 4a4719157d1..487352d53cf 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 0636a84dddf..3485ba948e2 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 4c7cfbfd261..d86ac000d39 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 76b15841eba..ceea612f1aa 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 66c6e11ad01..75afc4d25a6 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 cf463f1ce10..3380f5f581e 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 6874de8d953..72c79975c06 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 2cb93d90e0b..d249134ddd4 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 797401d1fb6..8368abb931b 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 5717962591d..e29b9b89319 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 b81d62f824e..72002b6935d 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 641ed2e5d00..03110b3472c 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 47eedde3168..267c7081b4e 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 ccdfb4c3a71..342d538c9fe 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 840f208a33c..498cbeac133 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 b2fb1437a3e..1047de69ecf 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 e352648397a..61f17825503 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 a7c5e53d855..cec5f7458fa 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 ae4125d2ee1..c1d2b14594d 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 69c5bcbdfe8..a1b6db881e9 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 434c1c4b4d9..8249b1d704f 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 d5c8b4e7fcd..a0c53f02f28 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 575809aa0d7..6ac14f57ce8 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 b01dae1d22b..b7f3aab63ab 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 15421aec60d..7ee6cfd342c 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 1032778b8ff..486ca340ba1 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 1daea0a5015..625cfa2f5d7 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 68c87f6f469..601320ac9f0 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 73895ce899a..66943ae8728 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 0d8d8dba333..a95c6644edd 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 ec74531a2af..02344ecc776 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 0728eb2ada4..09c6520ca17 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 98a20f5062a..bb107719cfb 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 706cacadcce..1412d22c9ed 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 552f0d56928..2d851e25e62 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 0ab0801891f..b4a2a09770e 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 b0c13b737c1..a0a89cfcb4b 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 f9755977e65..9803c41c0f8 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 a84a923baba..1febd590d2a 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 2ae24dd9a21..d5e1f680b50 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 a26ef03d98c..5ca092f996a 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 7347ff8ca95..dbdc218d306 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 374a87e023e..735d99dc63a 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 5acd5364415..5e466724443 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 52c0c3a4378..97401d291eb 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 5d9351dc07d..f641329cf95 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 d8d9097879f..c355262f836 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 b8e7fc08930..6603686dd99 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 fd4460be026..440e5d2dd0f 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 be966b504cc..b1902189e0c 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 51c289edd7e..778e155250a 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 e056efd29d6..f5a15031b24 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 d68be69c338..f418f016a20 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 344a08bfccf..7ad661fdc8e 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 4d941453204..ce7c366f6f2 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 9236aaa831f..a559e7f07cb 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 d535ed50dcf..a422515620f 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 e49877489e9..e34eebd8ad0 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 b47d5fa1b12..3bf621de650 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 d3d1326a69a..bf6245629a9 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 cc2ac13e4ea..dfc65ee2a88 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 5be75d6d874..ac7ef2ce153 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 00000000000..7ff25354ed9 --- /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 0939d4026bc..202d428a716 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 00000000000..1f84888dc70 --- /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 00000000000..1a85f0f7251 --- /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 a58ef52c366..d28537ad374 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 abaec23cbf8..40e4bb915c2 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 00000000000..453d31cff2a --- /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 0d3f2829be3..d3c290289fd 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 6302d388d1a..5cce4365273 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 7006acc13ca..3642372e4f2 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 bce1c53ad8d..89938fbeb61 100644 --- a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx +++ b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm'; import { Typography } from 'src/components/Typography'; import { titlecase } from 'src/features/Linodes/presentation'; diff --git a/packages/manager/src/components/Dialog/Dialog.tsx b/packages/manager/src/components/Dialog/Dialog.tsx index 6002e942dfc..fbbb76cfaa1 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 7ac4261bf71..acd8cea2d56 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts +++ b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts @@ -1,7 +1,6 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; -import { Notice } from 'src/components/Notice/Notice'; - import { StyledLinkButton } from '../Button/StyledLinkButton'; export const StyledNotice = styled(Notice, { label: 'StyledNotice' })( diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx index 0322ed2ffbf..4ee35065ea8 100644 --- a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx +++ b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx @@ -7,7 +7,7 @@ import { useDismissibleNotifications } from 'src/hooks/useDismissibleNotificatio import { StyledButton, StyledNotice } from './DismissibleBanner.styles'; -import type { NoticeProps } from 'src/components/Notice/Notice'; +import type { NoticeProps } from '@linode/ui'; import type { DismissibleNotificationOptions } from 'src/hooks/useDismissibleNotifications'; interface Props extends NoticeProps { diff --git a/packages/manager/src/components/DrawerContent/DrawerContent.tsx b/packages/manager/src/components/DrawerContent/DrawerContent.tsx index a19fb1949a6..bbc53f3b641 100644 --- a/packages/manager/src/components/DrawerContent/DrawerContent.tsx +++ b/packages/manager/src/components/DrawerContent/DrawerContent.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; export interface DrawerContentProps { children: React.ReactNode; diff --git a/packages/manager/src/components/Encryption/Encryption.tsx b/packages/manager/src/components/Encryption/Encryption.tsx index 6b170531c2d..fb55ce2c2ff 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 3171d89e615..7a06bf1465c 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 c01acbaf9ba..2c77c1d38f9 100644 --- a/packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx +++ b/packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx @@ -1,14 +1,15 @@ -import { AccountMaintenance } from '@linode/api-v4/lib/account'; +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Link } from 'react-router-dom'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useAllAccountMaintenanceQuery } from 'src/queries/account/maintenance'; import { useProfile } from 'src/queries/profile/profile'; import { formatDate } from 'src/utilities/formatDate'; import { isPast } from 'src/utilities/isPast'; +import type { AccountMaintenance } from '@linode/api-v4/lib/account'; + interface Props { maintenanceEnd?: null | string; /** please keep in mind here that it's possible the start time can be in the past */ diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx index e96367d4b1d..39e9e4939d0 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 43ca759db6e..b681403808a 100644 --- a/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx +++ b/packages/manager/src/components/ProductInformationBanner/ProductInformationBanner.tsx @@ -2,13 +2,13 @@ import * as React from 'react'; import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown'; import { reportException } from 'src/exceptionReporting'; -import { ProductInformationBannerLocation } from 'src/featureFlags'; import { useFlags } from 'src/hooks/useFlags'; import { isAfter } from 'src/utilities/date'; import { DismissibleBanner } from '../DismissibleBanner/DismissibleBanner'; -import type { NoticeProps } from 'src/components/Notice/Notice'; +import type { NoticeProps } from '@linode/ui'; +import type { ProductInformationBannerLocation } from 'src/featureFlags'; interface Props { bannerLocation: ProductInformationBannerLocation; diff --git a/packages/manager/src/components/ProductNotification/ProductNotification.tsx b/packages/manager/src/components/ProductNotification/ProductNotification.tsx index 0ee8d6eb8f0..d15bbd83c43 100644 --- a/packages/manager/src/components/ProductNotification/ProductNotification.tsx +++ b/packages/manager/src/components/ProductNotification/ProductNotification.tsx @@ -1,6 +1,7 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice, NoticeVariant } from 'src/components/Notice/Notice'; +import type { NoticeVariant } from '@linode/ui'; export interface ProductNotificationProps { onClick?: () => void; diff --git a/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx b/packages/manager/src/components/TabbedPanel/TabbedPanel.tsx index 8393e3cbde1..5a678a2b89b 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 b717753b230..fd7e48ee97f 100644 --- a/packages/manager/src/components/Tile/Tile.tsx +++ b/packages/manager/src/components/Tile/Tile.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import Button from '@mui/material/Button'; import * as React from 'react'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useStyles } from './Tile.styles'; diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts index edbf8292360..33b44d19c41 100644 --- a/packages/manager/src/featureFlags.ts +++ b/packages/manager/src/featureFlags.ts @@ -1,6 +1,6 @@ import type { OCA } from './features/OneClickApps/types'; import type { TPAProvider } from '@linode/api-v4/lib/profile'; -import type { NoticeVariant } from 'src/components/Notice/Notice'; +import type { NoticeVariant } from '@linode/ui'; // These flags should correspond with active features flags in LD diff --git a/packages/manager/src/features/Account/AccountLogins.tsx b/packages/manager/src/features/Account/AccountLogins.tsx index 7f44e77be56..f9fddc29fbb 100644 --- a/packages/manager/src/features/Account/AccountLogins.tsx +++ b/packages/manager/src/features/Account/AccountLogins.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { Hidden } from 'src/components/Hidden'; -import { Notice } from 'src/components/Notice/Notice'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; diff --git a/packages/manager/src/features/Account/AutoBackups.tsx b/packages/manager/src/features/Account/AutoBackups.tsx index 0dd9a134ead..5386207805a 100644 --- a/packages/manager/src/features/Account/AutoBackups.tsx +++ b/packages/manager/src/features/Account/AutoBackups.tsx @@ -1,15 +1,16 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; -import { Theme } from '@mui/material/styles'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { Accordion } from 'src/components/Accordion'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; +import type { Theme } from '@mui/material/styles'; + const useStyles = makeStyles()((theme: Theme) => ({ enableBackupsButton: { ...theme.applyLinkStyles, diff --git a/packages/manager/src/features/Account/CloseAccountDialog.tsx b/packages/manager/src/features/Account/CloseAccountDialog.tsx index 9513c701954..78226d57fd4 100644 --- a/packages/manager/src/features/Account/CloseAccountDialog.tsx +++ b/packages/manager/src/features/Account/CloseAccountDialog.tsx @@ -1,16 +1,18 @@ import { cancelAccount } from '@linode/api-v4/lib/account'; -import { APIError } from '@linode/api-v4/lib/types'; -import { Theme, styled } from '@mui/material/styles'; +import { Notice } from '@linode/ui'; +import { styled } from '@mui/material/styles'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; import { makeStyles } from 'tss-react/mui'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; import { useProfile } from 'src/queries/profile/profile'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { Theme } from '@mui/material/styles'; + interface Props { closeDialog: () => void; open: boolean; diff --git a/packages/manager/src/features/Account/ObjectStorageSettings.tsx b/packages/manager/src/features/Account/ObjectStorageSettings.tsx index d1cd22c3a08..42b42cced98 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 50f546ae1de..0c89986ada2 100644 --- a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx +++ b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { PARENT_USER_SESSION_EXPIRED } from 'src/features/Account/constants'; import { useParentChildAuthentication } from 'src/features/Account/SwitchAccounts/useParentChildAuthentication'; diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx index c4f0f11c9ec..473b84ed6d7 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 9a1a6e4764c..1a7b8a2f138 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 76fe9e4043d..b1cb2884b59 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 e07974e3fd3..5741aff6eef 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; interface Actions { @@ -18,7 +18,7 @@ interface Props extends Actions { } export const CreditCardDialog = (props: Props) => { - const { cancel, error, open, usd, isMakingPayment, executePayment } = props; + const { cancel, error, executePayment, isMakingPayment, open, usd } = props; return ( ({ input: { maxWidth: 'unset', diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx index 0bab8d585f8..1d85088674b 100644 --- a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/UpdateContactInformationForm/UpdateContactInformationForm.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { allCountries } from 'country-region-data'; import { useFormik } from 'formik'; @@ -6,7 +7,6 @@ import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import EnhancedSelect from 'src/components/EnhancedSelect/Select'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { getRestrictedResourceText, diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx index 5644c16737c..b41b64996dc 100644 --- a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx @@ -1,22 +1,24 @@ import { addPaymentMethod } from '@linode/api-v4/lib'; +import { Notice } from '@linode/ui'; import { CreditCardSchema } from '@linode/validation'; -import { InputBaseComponentProps } from '@mui/material/InputBase/InputBase'; -import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { useQueryClient } from '@tanstack/react-query'; import { useFormik, yupToFormErrors } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import NumberFormat, { NumberFormatProps } from 'react-number-format'; +import NumberFormat from 'react-number-format'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { accountQueries } from 'src/queries/account/queries'; import { parseExpiryYear } from 'src/utilities/creditCard'; import { handleAPIErrors } from 'src/utilities/formikErrorUtils'; +import type { InputBaseComponentProps } from '@mui/material/InputBase/InputBase'; +import type { Theme } from '@mui/material/styles'; +import type { NumberFormatProps } from 'react-number-format'; + const useStyles = makeStyles()((theme: Theme) => ({ error: { marginTop: theme.spacing(2), diff --git a/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx b/packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx index 58a7d152fb2..82357868ff4 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 e88a7a0df46..4f7fb0e301d 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 cf6dfcaae0b..1b58b3f7a39 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 360dfa533f4..6d62c66c179 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 50ae7d7998f..29f03cf8ffa 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 ebbd3edbfe9..996387fd88a 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -5,7 +6,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Button } from 'src/components/Button/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; -import { Notice } from 'src/components/Notice/Notice'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx index e05dd1d9a8e..c14f0c7e768 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.tsx @@ -1,26 +1,27 @@ -import { APIError } from '@linode/api-v4/lib/types'; -import { Theme } from '@mui/material/styles'; +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; -import { Database, DatabaseInstance } from '@linode/api-v4'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { MultipleIPInput } from 'src/components/MultipleIPInput/MultipleIPInput'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { enforceIPMasks } from 'src/features/Firewalls/FirewallDetail/Rules/FirewallRuleDrawer.utils'; import { useDatabaseMutation } from 'src/queries/databases/databases'; import { handleAPIErrors } from 'src/utilities/formikErrorUtils'; import { - ExtendedIP, extendedIPToString, ipFieldPlaceholder, stringToExtendedIP, validateIPs, } from 'src/utilities/ipUtils'; +import type { Database, DatabaseInstance } from '@linode/api-v4'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { Theme } from '@mui/material/styles'; +import type { ExtendedIP } from 'src/utilities/ipUtils'; + const useStyles = makeStyles()((theme: Theme) => ({ instructions: { marginBottom: '2rem', diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx index 8fb1914e919..d8098c7b92a 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 b8c3a97fc98..e2d616f71fa 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 63f9315ae91..cc51b819756 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 43c8a4367e6..8e87fa684c7 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 57f9a81b1a2..af880558943 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 6866fcc99f5..242ac52fea7 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 e531dc963c7..47b084ac172 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 9b2e125404b..a9c8aa0b7d2 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 f42d1777e40..14d75204ef1 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 ad3a4734d1c..5b1cf264083 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 b8d125b0da4..117578b9986 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 ff6345ffe27..0192c19a34a 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 7a4bd2d9362..1e346477f68 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 4cc6b0f8a6a..6958ddd56c2 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 ccc0ac55d03..42b03a8359d 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 0a59f0428a7..51803d22c3f 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 beb82cdaf22..a3ff5e3ec67 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 14c2c3c0c31..c664e3fb742 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 c9ba37b7794..aea30496629 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 e282dc76cd6..2c1d12c8934 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 d1f99dab257..c79cecf7e04 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 cd4eab3e95d..faf5bf4a53c 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 86f799f810a..28ea6434f45 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 7943230962a..41e3135af1c 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 a0beae974dc..3a9ac80fcf8 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 d998e9809b2..6d010ca9717 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 3a728007b29..093f9592f8f 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 dd09facc8b8..d844382a34d 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 65d4a952805..63b02b09e94 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 f369b2e6146..d3adb497e06 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 715dbdcd6e4..38c705b2712 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 c6c2372b08b..9ea11aa21f4 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 24ccb36326a..bec36434a12 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 14a5bed997b..26da650b1c4 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 dcee670dc65..7b1c0a8dbe9 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 09c2d02e8b2..bd3c629d050 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 32895538c5d..02f3a154219 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 d002d4c97e7..9882d8e8694 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 3621505ee81..fc881f29992 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 de7cfb34c41..5d672fda40a 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 66076605c18..9f29c709686 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 30496031138..789ecf75a7c 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 a8ea018ca26..a44ad7ce3dd 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 b1e13f1a5ab..a991632db14 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 5daafad7648..65b282bf332 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 9fedd22aac3..c858e21e93f 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 d0627395474..12de978e7d7 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 dc4b0aee90f..30bbf9c23a6 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 b61c0226f54..fa000d5acc2 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 7f0ca291dad..e88d951a9ab 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 1ef66ba6214..088aa038d04 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 05de98947e4..5ea4fcab368 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 cc77ba35f84..c8ce1609339 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 147ab41532b..7cd4de48dcd 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 33f7e3bdfab..1cf226c61b6 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 8b75dc5a0bd..a179493359c 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 dcb9d03cdc3..1150f2975ac 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 4a57fb2c096..c70bfca80e6 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 f06f2a2a462..d665bb04bcd 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 d9ba1436410..c3b8adcb745 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 3380f5f581e..227fc43dfe2 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 f1fe6d0abaa..9dbcc63ab66 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 342d538c9fe..5cfc84c9473 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 94357dc98df..bd22cb4d40f 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 498cbeac133..e41d57f1e16 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 1305bf811aa..0556b7d9f30 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 61f17825503..29adb4eff22 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 a1b6db881e9..787ef0d4676 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 3addcabeac1..953104d0168 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 9197bf2a675..d81433d6a04 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 23951d4edcc..3a78d55b03e 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodePermissionsError.tsx @@ -1,6 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { getRestrictedResourceText } from 'src/features/Account/utils'; export const LinodePermissionsError = () => ( diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/ImageEmptyState.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/ImageEmptyState.tsx index 960aed6ed8b..7bca294a5a1 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 c93992386a3..db001478398 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 a031081ee54..bf473765e04 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.styles.ts @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Notice } from 'src/components/Notice/Notice'; export const StyledNotice = styled(Notice, { label: 'StyledNotice' })({ marginBottom: '0px !important', diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/UserDataAccordion/UserDataAccordion.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/UserDataAccordion/UserDataAccordion.tsx index d20ae58c5c1..ef0683830cc 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 c4a9c1eeb62..fd51eca05c7 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/RescueDescription.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { lishLaunch } from 'src/features/Lish/lishUtils'; import { useLinodeFirewallsQuery } from 'src/queries/linodes/firewalls'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRescue/StandardRescueDialog.tsx index 0c3f4c1969e..cb9c5c6ef18 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 fdb44a8ea4f..098fde3c6d0 100644 --- a/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx +++ b/packages/manager/src/features/Managed/Credentials/AddCredentialDrawer.tsx @@ -1,16 +1,17 @@ -import { CredentialPayload } from '@linode/api-v4/lib/managed'; +import { Notice } from '@linode/ui'; import { Formik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { TextField } from 'src/components/TextField'; import { handleFormikBlur } from 'src/utilities/formikTrimUtil'; import { creationSchema } from './credential.schema'; +import type { CredentialPayload } from '@linode/api-v4/lib/managed'; + const PasswordInput = React.lazy( () => import('src/components/PasswordInput/PasswordInput') ); diff --git a/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx b/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx index dbc382a18f2..c3114d00e66 100644 --- a/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx +++ b/packages/manager/src/features/Managed/Credentials/UpdateCredentialDrawer.tsx @@ -1,16 +1,17 @@ -import { CredentialPayload } from '@linode/api-v4/lib/managed'; +import { Notice } from '@linode/ui'; import { Formik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { SuspenseLoader } from 'src/components/SuspenseLoader'; import { TextField } from 'src/components/TextField'; import { handleFormikBlur } from 'src/utilities/formikTrimUtil'; import { updateLabelSchema, updatePasswordSchema } from './credential.schema'; +import type { CredentialPayload } from '@linode/api-v4/lib/managed'; + const PasswordInput = React.lazy( () => import('src/components/PasswordInput/PasswordInput') ); diff --git a/packages/manager/src/features/Managed/MonitorDrawer.tsx b/packages/manager/src/features/Managed/MonitorDrawer.tsx index e872cb239d6..9a314541d5a 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 be63b6a4e08..758f6251cb0 100644 --- a/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx +++ b/packages/manager/src/features/Managed/SSHAccess/EditSSHAccessDrawer.tsx @@ -1,13 +1,12 @@ -import { ManagedLinodeSetting } from '@linode/api-v4/lib/managed'; +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; -import { Formik, FormikHelpers } from 'formik'; +import { Formik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { IPSelect } from 'src/components/IPSelect/IPSelect'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle/Toggle'; import { useUpdateLinodeSettingsMutation } from 'src/queries/managed/managed'; @@ -17,12 +16,15 @@ import { } from 'src/utilities/formikErrorUtils'; import { isPrivateIP, removePrefixLength } from 'src/utilities/ipUtils'; +import { DEFAULTS } from './common'; import { StyledIPGrid, StyledPortGrid, StyledTypography, } from './EditSSHAccessDrawer.styles'; -import { DEFAULTS } from './common'; + +import type { ManagedLinodeSetting } from '@linode/api-v4/lib/managed'; +import type { FormikHelpers } from 'formik'; interface EditSSHAccessDrawerProps { closeDrawer: () => void; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx index c08d2727edb..e32e13724b4 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 f715498b028..c6e82c69564 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 2d851e25e62..e7a82ef8318 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 982963c6716..adafe73aa42 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; import { useNodebalancerDeleteMutation } from 'src/queries/nodebalancers'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx index 14ce668e8ca..5def42f3069 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { @@ -10,7 +11,6 @@ import { import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { TabLinkList } from 'src/components/Tabs/TabLinkList'; import { TabPanels } from 'src/components/Tabs/TabPanels'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx index ec1772b47c2..5b98653ade1 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { createObjectStorageKeysSchema } from '@linode/validation/lib/objectStorageKeys.schema'; import { Formik } from 'formik'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { useAccountSettings } from 'src/queries/account/settings'; diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx index d2800c937b5..4d3f0b058a9 100644 --- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { createObjectStorageKeysSchema, updateObjectStorageKeysSchema, @@ -9,7 +10,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { CircleProgress } from 'src/components/CircleProgress'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { useAccountSettings } from 'src/queries/account/settings'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx index 362a8b21f74..6e60543b31e 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/AccessSelect.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; @@ -6,7 +7,6 @@ import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { FormControlLabel } from 'src/components/FormControlLabel'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Toggle } from 'src/components/Toggle/Toggle'; import { Typography } from 'src/components/Typography'; import { useOpenClose } from 'src/hooks/useOpenClose'; diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketSSL.tsx index c410769f1db..dd52c4ad660 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 0c8115d8b5c..3364a09a270 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -6,7 +7,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import OrderBy from 'src/components/OrderBy'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx index 3adc16b1863..93e60b33c19 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/CreateBucketDrawer.tsx @@ -1,4 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; +import { Notice } from '@linode/ui'; import { CreateBucketSchema } from '@linode/validation'; import { styled } from '@mui/material/styles'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { Controller, useForm } from 'react-hook-form'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { EUAgreementCheckbox } from 'src/features/Account/Agreements/EUAgreementCheckbox'; import { diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx index df19e2f4efa..1c595b05674 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; @@ -6,7 +7,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import OrderBy from 'src/components/OrderBy'; import { TransferDisplay } from 'src/components/TransferDisplay/TransferDisplay'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx index c1ba644e64d..dc3080c7efa 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx @@ -1,4 +1,5 @@ import { yupResolver } from '@hookform/resolvers/yup'; +import { Notice } from '@linode/ui'; import { CreateBucketSchema } from '@linode/validation'; import * as React from 'react'; import { Controller, useForm } from 'react-hook-form'; @@ -7,7 +8,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { BucketRateLimitTable } from 'src/features/ObjectStorage/BucketLanding/BucketRateLimitTable'; diff --git a/packages/manager/src/features/ObjectStorage/EnableObjectStorageModal.tsx b/packages/manager/src/features/ObjectStorage/EnableObjectStorageModal.tsx index 10299d74625..ffe51b118b4 100644 --- a/packages/manager/src/features/ObjectStorage/EnableObjectStorageModal.tsx +++ b/packages/manager/src/features/ObjectStorage/EnableObjectStorageModal.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useObjectStorageTypesQuery } from 'src/queries/object-storage/queries'; import { diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupPolicyRadioGroup.tsx index 27d4b7f299d..965414a2fed 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 d5e1f680b50..89621be0775 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 5ca092f996a..9da8bd6be02 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 383bbc74093..902bd710643 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { List } from 'src/components/List'; import { ListItem } from 'src/components/ListItem'; -import { Notice } from 'src/components/Notice/Notice'; import { RemovableSelectionsList } from 'src/components/RemovableSelectionsList/RemovableSelectionsList'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx index fce4cd920c0..27280179d3d 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx @@ -1,4 +1,5 @@ import { PLACEMENT_GROUP_TYPES } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; import { useParams } from 'react-router-dom'; @@ -8,7 +9,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { LandingHeader } from 'src/components/LandingHeader'; import { NotFound } from 'src/components/NotFound'; -import { Notice } from 'src/components/Notice/Notice'; import { getRestrictedResourceText } from 'src/features/Account/utils'; import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck'; import { useAllLinodesQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx index d5b3489c74b..a539181243c 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 5b6d526718c..6ddd64f4751 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 735d99dc63a..ed33610ca15 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 5d41f301424..8b179291dde 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx +++ b/packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { useParams } from 'react-router-dom'; @@ -6,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { CircleProgress } from 'src/components/CircleProgress'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { NotFound } from 'src/components/NotFound'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted'; import { useLinodeQuery } from 'src/queries/linodes/linodes'; diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx index 58a0b8cc935..5ba5c47dcf0 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 3aba5fb979f..5c4e9b2bc74 100644 --- a/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx +++ b/packages/manager/src/features/Profile/APITokens/EditAPITokenDrawer.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { useUpdatePersonalAccessTokenMutation } from 'src/queries/profile/tokens'; import { getErrorMap } from 'src/utilities/errorUtils'; diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SMSMessaging.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SMSMessaging.tsx index d9cde16e883..7b09373c3ba 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 f0cc13c638c..1a8ccc383f8 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 2584b7bd3d1..af8c2d769d4 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 3e9afd06c85..5881375ed7c 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 9dd8382c268..fc5fde78603 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx +++ b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx @@ -1,11 +1,11 @@ import { getTFAToken } from '@linode/api-v4/lib/profile'; -import { APIError } from '@linode/api-v4/lib/types'; -import * as React from 'react'; +import { Notice } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; +import * as React from 'react'; import { StyledLinkButton } from 'src/components/Button/StyledLinkButton'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; +import { profileQueries } from 'src/queries/profile/profile'; import { useSecurityQuestions } from 'src/queries/profile/securityQuestions'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; @@ -19,7 +19,8 @@ import { StyledRootContainer, } from './TwoFactor.styles'; import { TwoFactorToggle } from './TwoFactorToggle'; -import { profileQueries } from 'src/queries/profile/profile'; + +import type { APIError } from '@linode/api-v4/lib/types'; export interface TwoFactorProps { disabled?: boolean; diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx index 43c8e8053ea..ebb9d98b901 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 dc6f213bb8e..fb26da9094f 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 5b49daef10d..47c80675997 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 4f2d4673e55..aa0d637bdfc 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 cca81a2f77e..68fac0090c6 100644 --- a/packages/manager/src/features/Profile/Referrals/Referrals.styles.ts +++ b/packages/manager/src/features/Profile/Referrals/Referrals.styles.ts @@ -1,7 +1,7 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; export const StyledResultsWrapper = styled('div', { diff --git a/packages/manager/src/features/Profile/Referrals/Referrals.tsx b/packages/manager/src/features/Profile/Referrals/Referrals.tsx index 6ea34956725..3694d5705ea 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 b845b8a2039..3236b371132 100644 --- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Code } from 'src/components/Code/Code'; import { Drawer } from 'src/components/Drawer'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Typography } from 'src/components/Typography'; import { useCreateSSHKeyMutation } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx index 05a0393ecc5..49078d5333d 100644 --- a/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/EditSSHKeyDrawer.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -5,7 +6,6 @@ import { useEffect } from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { useUpdateSSHKeyMutation } from 'src/queries/profile/profile'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx b/packages/manager/src/features/Profile/SecretTokenDialog/SecretTokenDialog.tsx index 6bb1e386a0f..8ca79c82a4a 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 c5905bb42f2..db175a0d279 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 4ed6f58a824..383c50ffec1 100644 --- a/packages/manager/src/features/Search/SearchLanding.tsx +++ b/packages/manager/src/features/Search/SearchLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import { equals } from 'ramda'; @@ -5,7 +6,6 @@ import * as React from 'react'; import { debounce } from 'throttle-debounce'; import { CircleProgress } from 'src/components/CircleProgress'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { useAPISearch } from 'src/features/Search/useAPISearch'; import { useIsLargeAccount } from 'src/hooks/useIsLargeAccount'; @@ -28,6 +28,7 @@ import { isNilOrEmpty } from 'src/utilities/isNilOrEmpty'; import { isNotNullOrUndefined } from 'src/utilities/nullOrUndefined'; import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; +import { useIsDatabasesEnabled } from '../Databases/utilities'; import { getImageLabelForLinode } from '../Images/utils'; import { ResultGroup } from './ResultGroup'; import './searchLanding.css'; @@ -43,7 +44,6 @@ import withStoreSearch from './withStoreSearch'; import type { SearchProps } from './withStoreSearch'; import type { RouteComponentProps } from 'react-router-dom'; -import { useIsDatabasesEnabled } from '../Databases/utilities'; const displayMap = { buckets: 'Buckets', diff --git a/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx b/packages/manager/src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel.tsx index 246c633d453..9d549f97ba3 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 e08a0db4129..a08edd0ce3d 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx @@ -1,9 +1,7 @@ -import { Image } from '@linode/api-v4/lib/images'; -import { StackScript } from '@linode/api-v4/lib/stackscripts'; -import { APIError, Filter, ResourcePage } from '@linode/api-v4/lib/types'; +import { Notice } from '@linode/ui'; import { pathOr } from 'ramda'; import * as React from 'react'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import { Waypoint } from 'react-waypoint'; import { compose } from 'recompose'; @@ -11,12 +9,7 @@ import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg'; import { Button } from 'src/components/Button/Button'; import { CircleProgress } from 'src/components/CircleProgress'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; -import { Notice } from 'src/components/Notice/Notice'; -import { - WithProfileProps, - withProfile, -} from 'src/containers/profile.container'; -import { WithQueryClientProps } from 'src/containers/withQueryClient.container'; +import { withProfile } from 'src/containers/profile.container'; import { isLinodeKubeImageId } from 'src/store/image/image.helpers'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getDisplayName } from 'src/utilities/getDisplayName'; @@ -25,11 +18,9 @@ import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; import { StackScriptTableHead } from '../Partials/StackScriptTableHead'; import { - AcceptedFilters, generateCatchAllFilter, generateSpecificFilter, } from '../stackScriptUtils'; -import { StackScriptsRequest } from '../types'; import { StyledContentDiv, StyledDebouncedSearchTextfield, @@ -40,6 +31,15 @@ import { } from './StackScriptBase.styles'; import { StackScriptsEmptyLandingState } from './StackScriptsEmptyLandingPage'; +import type { AcceptedFilters } from '../stackScriptUtils'; +import type { StackScriptsRequest } from '../types'; +import type { Image } from '@linode/api-v4/lib/images'; +import type { StackScript } from '@linode/api-v4/lib/stackscripts'; +import type { APIError, Filter, ResourcePage } from '@linode/api-v4/lib/types'; +import type { RouteComponentProps } from 'react-router-dom'; +import type { WithProfileProps } from 'src/containers/profile.container'; +import type { WithQueryClientProps } from 'src/containers/withQueryClient.container'; + type CurrentFilter = 'deploys' | 'label' | 'revision'; type SortOrder = 'asc' | 'desc'; @@ -102,199 +102,6 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => ( const { isSelecting, useQueryString } = options; class EnhancedComponent extends React.Component { - componentDidMount() { - this.mounted = true; - // If the URL contains a QS param called "query" treat it as a filter. - const query = getQueryParamFromQueryString( - this.props.location.search, - 'query' - ); - if (query) { - return this.handleSearch(query); - } - - return this.getDataAtPage(1); - } - - componentWillUnmount() { - this.mounted = false; - } - - render() { - const { - allStackScriptsLoaded, - currentFilterType, - didSearch, - error, - fieldError, - getMoreStackScriptsFailed, - gettingMoreStackScripts, - isSearching, - isSorting, - listOfStackScripts, - sortOrder, - successMessage, - } = this.state; - - const { grants, profile } = this.props; - - const userCannotCreateStackScripts = - Boolean(profile.data?.restricted) && - !grants.data?.global.add_stackscripts; - - if (error) { - return ( -
- -
- ); - } - - if (this.state.loading) { - return ( - - - - ); - } - - // Use the query string if the argument has been specified. - const query = useQueryString - ? getQueryParamFromQueryString(this.props.location.search, 'query') - : undefined; - - return ( - - {fieldError && fieldError.reason && ( - - )} - {successMessage && } - {/* - * We only want to show this empty state on the initial GET StackScripts request - * If the user is searching and 0 results come back, we just want to show - * an empty table, rather than showing a message indicating no StackScripts exist - */} - {!didSearch && - listOfStackScripts && - listOfStackScripts.length === 0 ? ( - - {userCannotCreateStackScripts ? ( - - You don’t have any StackScripts to select from. - - ) : ( - - )} - - ) : ( - - - - - - - - - - {/* - * show loading indicator if we're getting more stackscripts - * and if we're not showing the "get more stackscripts" button - */} - {gettingMoreStackScripts && !isSorting && ( -
- -
- )} - - )} - {/* - * if we're sorting, or if we already loaded all results - * or if we're in the middle of getting more results, don't render - * the lazy load trigger - */} - {!isSorting && !allStackScriptsLoaded && !gettingMoreStackScripts && ( -
- {/* - * If the lazy-load failed (marked by the catch in getNext), - * show the "Show more StackScripts button - * Otherwise, try to lazy load some more dang stackscripts - */} - {!getMoreStackScriptsFailed ? ( - - {/* - * The reason for this empty div is that there was some wonkiness when - * scrolling to the waypoint with trackpads. For some reason, the Waypoint - * would never be scrolled into view no matter how much you scrolled on the - * trackpad. Especially finicky at zoomed in browser sizes - */} -
- - ) : ( - - )} -
- )} - - ); - } - static displayName = `WithStackScriptBase(${getDisplayName(Component)})`; generateFilterInfo = (value: CurrentFilter): FilterInfo => { @@ -599,6 +406,199 @@ const withStackScriptBase = (options: WithStackScriptBaseOptions) => ( usesKubeImage = (stackScriptImages: string[]) => stackScriptImages.some((imageId) => isLinodeKubeImageId(imageId)); + + componentDidMount() { + this.mounted = true; + // If the URL contains a QS param called "query" treat it as a filter. + const query = getQueryParamFromQueryString( + this.props.location.search, + 'query' + ); + if (query) { + return this.handleSearch(query); + } + + return this.getDataAtPage(1); + } + + componentWillUnmount() { + this.mounted = false; + } + + render() { + const { + allStackScriptsLoaded, + currentFilterType, + didSearch, + error, + fieldError, + getMoreStackScriptsFailed, + gettingMoreStackScripts, + isSearching, + isSorting, + listOfStackScripts, + sortOrder, + successMessage, + } = this.state; + + const { grants, profile } = this.props; + + const userCannotCreateStackScripts = + Boolean(profile.data?.restricted) && + !grants.data?.global.add_stackscripts; + + if (error) { + return ( +
+ +
+ ); + } + + if (this.state.loading) { + return ( + + + + ); + } + + // Use the query string if the argument has been specified. + const query = useQueryString + ? getQueryParamFromQueryString(this.props.location.search, 'query') + : undefined; + + return ( + + {fieldError && fieldError.reason && ( + + )} + {successMessage && } + {/* + * We only want to show this empty state on the initial GET StackScripts request + * If the user is searching and 0 results come back, we just want to show + * an empty table, rather than showing a message indicating no StackScripts exist + */} + {!didSearch && + listOfStackScripts && + listOfStackScripts.length === 0 ? ( + + {userCannotCreateStackScripts ? ( + + You don’t have any StackScripts to select from. + + ) : ( + + )} + + ) : ( + + + + + + + + + + {/* + * show loading indicator if we're getting more stackscripts + * and if we're not showing the "get more stackscripts" button + */} + {gettingMoreStackScripts && !isSorting && ( +
+ +
+ )} + + )} + {/* + * if we're sorting, or if we already loaded all results + * or if we're in the middle of getting more results, don't render + * the lazy load trigger + */} + {!isSorting && !allStackScriptsLoaded && !gettingMoreStackScripts && ( +
+ {/* + * If the lazy-load failed (marked by the catch in getNext), + * show the "Show more StackScripts button + * Otherwise, try to lazy load some more dang stackscripts + */} + {!getMoreStackScriptsFailed ? ( + + {/* + * The reason for this empty div is that there was some wonkiness when + * scrolling to the waypoint with trackpads. For some reason, the Waypoint + * would never be scrolled into view no matter how much you scrolled on the + * trackpad. Especially finicky at zoomed in browser sizes + */} +
+ + ) : ( + + )} +
+ )} + + ); + } } return compose(withRouter, withProfile)(EnhancedComponent); diff --git a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx index 0d232b42e56..039c4ce1a67 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 296fda0b312..a004081854d 100644 --- a/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.styles.ts +++ b/packages/manager/src/features/StackScripts/StackScriptForm/StackScriptForm.styles.ts @@ -1,8 +1,8 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import { Notice } from '@linode/ui'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; export const StyledActionsPanel = styled(ActionsPanel, { diff --git a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx index 1101d6b33c1..6b749ec1a29 100644 --- a/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptsLanding.tsx @@ -1,3 +1,4 @@ +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { createLazyRoute } from '@tanstack/react-router'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { useHistory } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { LandingHeader } from 'src/components/LandingHeader'; -import { Notice } from 'src/components/Notice/Notice'; import { listToItemsByID } from 'src/queries/base'; import { useAllImagesQuery } from 'src/queries/images'; diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx index 64d230bbc87..03263e8bc3e 100644 --- a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx +++ b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedMultiSelect.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; -import { Notice } from 'src/components/Notice/Notice'; import { RenderGuard } from 'src/components/RenderGuard'; import type { UserDefinedField } from '@linode/api-v4/lib/stackscripts'; diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedSelect.tsx index 2d911c2ae12..b96c0aa0eb8 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 41b7cb642ac..b14d90c0097 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 b6382a79daa..c709707ee13 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/AttachmentError.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/AttachmentError.tsx @@ -1,7 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; - interface Props { fileName: string; reason: string; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx index 383ed47eeb4..1fcdedd4ef5 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx @@ -1,4 +1,5 @@ import { uploadAttachment } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import Grid from '@mui/material/Unstable_Grid2'; import { lensPath, set } from 'ramda'; import * as React from 'react'; @@ -6,7 +7,6 @@ import { debounce } from 'throttle-debounce'; import { makeStyles } from 'tss-react/mui'; import { Accordion } from 'src/components/Accordion'; -import { Notice } from 'src/components/Notice/Notice'; import { useSupportTicketReplyMutation } from 'src/queries/support'; import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils'; import { storage } from 'src/utilities/storage'; diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx index d09a5484d2d..d009c0e262f 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 a41ce5521a2..b704b22da5e 100644 --- a/packages/manager/src/features/Users/CreateUserDrawer.tsx +++ b/packages/manager/src/features/Users/CreateUserDrawer.tsx @@ -1,17 +1,20 @@ -import { User, createUser } from '@linode/api-v4/lib/account'; -import { APIError } from '@linode/api-v4/lib/types'; +import { createUser } from '@linode/api-v4/lib/account'; +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; import { FormControlLabel } from 'src/components/FormControlLabel'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { Toggle } from 'src/components/Toggle/Toggle'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor'; +import type { User } from '@linode/api-v4/lib/account'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { RouteComponentProps } from 'react-router-dom'; + interface Props { onClose: () => void; open: boolean; @@ -29,6 +32,64 @@ interface State { interface CreateUserDrawerProps extends Props, RouteComponentProps<{}> {} class CreateUserDrawer extends React.Component { + handleChangeEmail = (e: React.ChangeEvent) => { + this.setState({ + email: e.target.value, + }); + }; + + handleChangeRestricted = () => { + this.setState({ + restricted: !this.state.restricted, + }); + }; + + handleChangeUsername = ( + e: + | React.ChangeEvent + | React.FocusEvent + ) => { + this.setState({ + username: e.target.value, + }); + }; + + onSubmit = () => { + const { + history: { push }, + onClose, + refetch, + } = this.props; + const { email, restricted, username } = this.state; + this.setState({ errors: [], submitting: true }); + createUser({ email, restricted, username }) + .then((user: User) => { + this.setState({ submitting: false }); + onClose(); + if (user.restricted) { + push(`/account/users/${username}/permissions`, { + newUsername: user.username, + }); + } + refetch(); + }) + .catch((errResponse) => { + const errors = getAPIErrorOrDefault( + errResponse, + 'Error creating user.' + ); + this.setState({ errors, submitting: false }); + }); + }; + + state: State = { + email: '', + errors: [], + restricted: false, + submitting: false, + username: '', + }; + componentDidUpdate(prevProps: CreateUserDrawerProps) { if (this.props.open === true && prevProps.open === false) { this.setState({ @@ -113,64 +174,6 @@ class CreateUserDrawer extends React.Component { ); } - - handleChangeEmail = (e: React.ChangeEvent) => { - this.setState({ - email: e.target.value, - }); - }; - - handleChangeRestricted = () => { - this.setState({ - restricted: !this.state.restricted, - }); - }; - - handleChangeUsername = ( - e: - | React.ChangeEvent - | React.FocusEvent - ) => { - this.setState({ - username: e.target.value, - }); - }; - - onSubmit = () => { - const { - history: { push }, - onClose, - refetch, - } = this.props; - const { email, restricted, username } = this.state; - this.setState({ errors: [], submitting: true }); - createUser({ email, restricted, username }) - .then((user: User) => { - this.setState({ submitting: false }); - onClose(); - if (user.restricted) { - push(`/account/users/${username}/permissions`, { - newUsername: user.username, - }); - } - refetch(); - }) - .catch((errResponse) => { - const errors = getAPIErrorOrDefault( - errResponse, - 'Error creating user.' - ); - this.setState({ errors, submitting: false }); - }); - }; - - state: State = { - email: '', - errors: [], - restricted: false, - submitting: false, - username: '', - }; } export default withRouter(CreateUserDrawer); diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx index 8bad43671f2..4bc2481f265 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 66f379fc05c..53220e98caa 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/CannotCreateVPCNotice.tsx @@ -1,7 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; - import { CANNOT_CREATE_VPC_MESSAGE } from '../../constants'; export const CannotCreateVPCNotice = ( diff --git a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx index 313ac63afe1..0e514bec10c 100644 --- a/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx +++ b/packages/manager/src/features/VPCs/VPCCreate/FormComponents/SubnetContent.tsx @@ -1,8 +1,8 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { useLocation } from 'react-router-dom'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics'; import { getQueryParamsFromQueryString } from 'src/utilities/queryParams'; diff --git a/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx b/packages/manager/src/features/VPCs/VPCCreate/VPCCreate.tsx index 8995ec53601..161425ee5c4 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 f22abc2de96..d477be0dadb 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 0fbc7a4898e..d743659cbe2 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 7a53ece0254..5cac4973cf4 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 bf6245629a9..23bf08ab451 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 28b079c9bb2..9dfb64e400e 100644 --- a/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetEditDrawer.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; import { useGrants, useProfile } from 'src/queries/profile/profile'; import { useUpdateSubnetMutation } from 'src/queries/vpcs/vpcs'; diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.styles.ts index 066e2105715..4e75344d122 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 8b726a12699..eeda7874cd8 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 d8264de1f43..c9034543df6 100644 --- a/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx +++ b/packages/manager/src/features/VPCs/VPCLanding/VPCEditDrawer.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import { updateVPCSchema } from '@linode/validation/lib/vpcs.schema'; import { useFormik } from 'formik'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { RegionSelect } from 'src/components/RegionSelect/RegionSelect'; import { TextField } from 'src/components/TextField'; import { useGrants, useProfile } from 'src/queries/profile/profile'; diff --git a/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx b/packages/manager/src/features/Volumes/AttachVolumeDrawer.tsx index b71987020a3..6a2d0ffa4b5 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 1bd690b3043..5a8a21b59d9 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 cc0db32476a..b36575e65b6 100644 --- a/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx +++ b/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx @@ -1,6 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { useEventsPollingActions } from 'src/queries/events/events'; import { useDeleteVolumeMutation } from 'src/queries/volumes/volumes'; diff --git a/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx b/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx index 4e1d7d6e186..06cf1444af6 100644 --- a/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx +++ b/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; import { Typography } from 'src/components/Typography'; import { useEventsPollingActions } from 'src/queries/events/events'; diff --git a/packages/manager/src/features/Volumes/EditVolumeDrawer.tsx b/packages/manager/src/features/Volumes/EditVolumeDrawer.tsx index 94865d8de53..84ba1c888dc 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 550e9afa576..d24e6992bba 100644 --- a/packages/manager/src/features/Volumes/ResizeVolumeDrawer.tsx +++ b/packages/manager/src/features/Volumes/ResizeVolumeDrawer.tsx @@ -1,4 +1,4 @@ -import { Volume } from '@linode/api-v4'; +import { Notice } from '@linode/ui'; import { ResizeVolumeSchema } from '@linode/validation'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; @@ -6,7 +6,6 @@ import React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Drawer } from 'src/components/Drawer'; -import { Notice } from 'src/components/Notice/Notice'; import { useEventsPollingActions } from 'src/queries/events/events'; import { useGrants } from 'src/queries/profile/profile'; import { @@ -22,6 +21,8 @@ import { PRICES_RELOAD_ERROR_NOTICE_TEXT } from 'src/utilities/pricing/constants import { PricePanel } from './VolumeDrawer/PricePanel'; import { SizeField } from './VolumeDrawer/SizeField'; +import type { Volume } from '@linode/api-v4'; + interface Props { onClose: () => void; open: boolean; diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx index dfc65ee2a88..4ebd1772e17 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 cb0c40d646f..4973aafbad1 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAddDrawer.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAddDrawer.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Drawer } from 'src/components/Drawer'; import { BLOCK_STORAGE_CLIENT_LIBRARY_UPDATE_REQUIRED_COPY } from 'src/components/Encryption/constants'; import { useIsBlockStorageEncryptionFeatureEnabled } from 'src/components/Encryption/utils'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { LinodeVolumeAttachForm } from './LinodeVolumeAttachForm'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAttachForm.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAttachForm.tsx index 8aa76a1345a..51b4b9e4c0d 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAttachForm.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeAttachForm.tsx @@ -1,10 +1,10 @@ +import { Notice } from '@linode/ui'; import { useFormik } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; import { number, object } from 'yup'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { Notice } from 'src/components/Notice/Notice'; import { useEventsPollingActions } from 'src/queries/events/events'; import { useGrants } from 'src/queries/profile/profile'; import { diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/LinodeVolumeCreateForm.tsx index bc07204f6ba..ad3a3ae8d98 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 ea927d09792..431570f54d5 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 35ef6810ec4..55044502c6d 100644 --- a/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx +++ b/packages/manager/src/features/components/PlansPanel/MetalNotice.tsx @@ -1,6 +1,6 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; -import { Notice } from 'src/components/Notice/Notice'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { StyledTypography } from './PlansPanel.styles'; diff --git a/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx b/packages/manager/src/features/components/PlansPanel/PlanContainer.tsx index b1201e0a3d0..38f54c07f99 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 422fa0f9a19..5109e2b6c22 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx @@ -1,7 +1,7 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; import { Typography } from 'src/components/Typography'; import { StyledNoticeTypography } from 'src/features/components/PlansPanel/PlansAvailabilityNotice.styles'; import { useFlags } from 'src/hooks/useFlags'; diff --git a/packages/manager/src/features/components/PlansPanel/PlansAvailabilityNotice.tsx b/packages/manager/src/features/components/PlansPanel/PlansAvailabilityNotice.tsx index a839965ee10..c80c5be86bb 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansAvailabilityNotice.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansAvailabilityNotice.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { ListItem } from 'src/components/ListItem'; -import { Notice } from 'src/components/Notice/Notice'; -import { getCapabilityFromPlanType } from 'src/utilities/planNotices'; import { formatPlanTypes } from 'src/utilities/planNotices'; +import { getCapabilityFromPlanType } from 'src/utilities/planNotices'; import { StyledFormattedRegionList, diff --git a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx index 833cd24a11e..3cf6cc8a6bf 100644 --- a/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlansPanel.tsx @@ -1,9 +1,9 @@ +import { Notice } from '@linode/ui'; import * as React from 'react'; import { useLocation } from 'react-router-dom'; -import { Notice } from 'src/components/Notice/Notice'; -import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils'; +import { useIsGeckoEnabled } from 'src/components/RegionSelect/RegionSelect.utils'; import { isDistributedRegionSupported } from 'src/components/RegionSelect/RegionSelect.utils'; import { TabbedPanel } from 'src/components/TabbedPanel/TabbedPanel'; import { useFlags } from 'src/hooks/useFlags'; diff --git a/packages/ui/.changeset/pr-11174-added-1730757183801.md b/packages/ui/.changeset/pr-11174-added-1730757183801.md new file mode 100644 index 00000000000..13ad8e0ff69 --- /dev/null +++ b/packages/ui/.changeset/pr-11174-added-1730757183801.md @@ -0,0 +1,5 @@ +--- +"@linode/ui": Added +--- + +Move `Notice` and `Tooltip` components to UI package ([#11174](https://github.com/linode/manager/pull/11174)) diff --git a/packages/ui/.eslintrc.json b/packages/ui/.eslintrc.json index 3388926d8ea..c3e7d4466ad 100644 --- a/packages/ui/.eslintrc.json +++ b/packages/ui/.eslintrc.json @@ -56,7 +56,7 @@ "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-use-before-define": "off", "@typescript-eslint/interface-name-prefix": "off", - "sonarjs/cognitive-complexity": "warn", + "sonarjs/cognitive-complexity": "off", "sonarjs/no-duplicate-string": "warn", "sonarjs/prefer-immediate-return": "warn", "sonarjs/no-identical-functions": "warn", diff --git a/packages/manager/src/assets/icons/alert.svg b/packages/ui/src/assets/icons/alert.svg similarity index 100% rename from packages/manager/src/assets/icons/alert.svg rename to packages/ui/src/assets/icons/alert.svg diff --git a/packages/manager/src/assets/icons/check.svg b/packages/ui/src/assets/icons/check.svg similarity index 100% rename from packages/manager/src/assets/icons/check.svg rename to packages/ui/src/assets/icons/check.svg diff --git a/packages/ui/src/assets/icons/index.ts b/packages/ui/src/assets/icons/index.ts new file mode 100644 index 00000000000..0103e50c33e --- /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 00000000000..838008a0b2f --- /dev/null +++ b/packages/ui/src/assets/index.ts @@ -0,0 +1 @@ +export * from './icons'; diff --git a/packages/manager/src/components/Notice/Notice.stories.tsx b/packages/ui/src/components/Notice/Notice.stories.tsx similarity index 100% rename from packages/manager/src/components/Notice/Notice.stories.tsx rename to packages/ui/src/components/Notice/Notice.stories.tsx diff --git a/packages/manager/src/components/Notice/Notice.styles.ts b/packages/ui/src/components/Notice/Notice.styles.ts similarity index 100% rename from packages/manager/src/components/Notice/Notice.styles.ts rename to packages/ui/src/components/Notice/Notice.styles.ts diff --git a/packages/manager/src/components/Notice/Notice.test.tsx b/packages/ui/src/components/Notice/Notice.test.tsx similarity index 96% rename from packages/manager/src/components/Notice/Notice.test.tsx rename to packages/ui/src/components/Notice/Notice.test.tsx index e7d536cd907..3e1e343d900 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 55d7950def6..a75c8f428b7 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 00000000000..c2b2fea9b2b --- /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 d3c290289fd..377df45a01b 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 00000000000..f36c722baed --- /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 952d61ff3b1..f43dcafbcfd 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 00000000000..1fb55370691 --- /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 e42051f8ee3..141cd45f9a4 100644 --- a/packages/ui/testSetup.ts +++ b/packages/ui/testSetup.ts @@ -1,5 +1,8 @@ +import * as matchers from '@testing-library/jest-dom/matchers'; import { cleanup } from '@testing-library/react'; -import { afterEach } from 'vitest'; +import { afterEach, expect } from 'vitest'; + +expect.extend(matchers); afterEach(() => { cleanup(); From 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 00000000000..6993a57ddf2 --- /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 d019a34c5ff..a72f98c7a77 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 3205fd5973b..41dce23f752 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 ac5a5480935..f6f300ca60a 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 00000000000..6e80abad54d --- /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 09bb450ec65..d30d3943694 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 b5ad2776429..24f504d5bb5 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 38f54c07f99..d0cf1a7231d 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 4cd06f4a678..e76d0cb9e65 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 01333bdab73..d3af3af8798 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 4a025ce90f4..a97bf29a06c 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 00000000000..5e42e2805a3 --- /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 e18c0dc546a..d90b014d13c 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 00000000000..6823f5d4bad --- /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 7c20f14834f..09e600eb986 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 278ed3bfb26..2a762da39b8 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 d3af3af8798..e6603ee17fb 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 00000000000..48da6c5bae5 --- /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 b5167d53b5f..b7af555aaa7 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 4b8d8167b45..0d6f6a2e4b1 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 d5b355a3d15..2237d31bd6a 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 6d62c66c179..4d0873efd69 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 29f03cf8ffa..9bd717bcd8e 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 5b1cf264083..a6076d5a622 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 0192c19a34a..6fe4f7fc883 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 1e346477f68..aacb78a4c26 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 c664e3fb742..5dac28fbfb0 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 3a9ac80fcf8..e007423e638 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 093f9592f8f..bfa4e51be2c 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 a80fb994986..23db7369123 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 789ecf75a7c..a231585fca5 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 267c7081b4e..4de7f8401a0 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 d5de5b95061..6280805fb1e 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 11f56c3cf75..00c6d28e679 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 7e4dad7cf54..508d1ecdb19 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 965414a2fed..8301a5bcc70 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 c355262f836..36722ffdf16 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 9b36c48239d..972817dbeca 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 00000000000..6db7363f8e0 --- /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 00000000000..ad083eb4889 --- /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 377df45a01b..99c1cd89b7d 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 00000000000..e7c775bff48 --- /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 efeb39df9a9..303aac90f97 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 00000000000..61d61de165b --- /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 17fda30faa9..07ca420e56d 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 3182a4c5bed..8109717608d 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 5073da56424..7772498eabc 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 8599f4a1621..f9c431f5a30 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 e189ad3a87d..ec96b743c0b 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 00000000000..b08c07068cf --- /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 00000000000..ea910200a39 --- /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 00000000000..0b2cffa9534 --- /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 00000000000..9b88c73aea1 --- /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 838db834c2d..29838058bfe 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 00000000000..82546d3f944 --- /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 00000000000..eadd1c31b79 --- /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 00000000000..4cfc06f687c --- /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 00000000000..5ce8a9f2d43 --- /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 00000000000..df8ccca56ba --- /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 d25b874d81d..e4317a5f9e1 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 1756903172b..4144166f1b6 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 891cc6dddf6..55f9ea18715 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 b12722dd77c..6de1559f69c 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 82aebd910fd..efd967ebdec 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 cf0331b9095..76831a9e31e 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 c42c7695083..c88222fc1cf 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 00000000000..7fb5a241388 --- /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 ea910200a39..2a0e70071a0 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 9b88c73aea1..57029d3d9eb 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 29838058bfe..dd996b686d2 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 00000000000..b8a322debd8 --- /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 00000000000..55a576694bd --- /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 00000000000..bf6d89ad037 --- /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 00000000000..4083e9e93a9 --- /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 00000000000..70d1d56bf88 --- /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 00000000000..df33e999ac8 --- /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 4cfc06f687c..f3a16356f97 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 5ce8a9f2d43..2870f89b0bf 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 00000000000..074ea03fe3a --- /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 00000000000..acb53e60b51 --- /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 00000000000..94bf4e366a3 --- /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 a02b78db4a7..be2b95935b1 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 af27106fa38..00000000000 --- 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 fc62afddd4f..887bc8762ec 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 bbc53f3b641..7f08ca2572c 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 88cbadaeeb3..0220686cf22 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 d3d7caa7f09..267eeb53162 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 955dd85fc43..c0f085b80ac 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 4890a2af50d..1a2e65b66f7 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 fe6fc62fce3..55a245e06f9 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 0928cc1787b..67fd8047260 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 92d667b0f32..2cdcbd04ca9 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 41119007223..a5a5940d24d 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 ff3e9b810f8..dfee8dabdd2 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 6cd6e48c495..eafd7c681aa 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 42b42cced98..77d1fe9a6e5 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 473b84ed6d7..f87c43ed7da 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 b310162e1aa..cd5a73da05d 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 f35ade587c0..1c38b97a867 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 18dcac982f6..f4ed8ac9fbb 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 714f1213da9..4b18b0570f4 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 af9ecd6aaeb..9af3f088734 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 b79ac9dadf7..2b6e038b8e3 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 69fac104d84..1ab3302de0e 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 056fc1c7e61..8d9213eab8a 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 0c7fcb6e4b1..484c18f014e 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 cb2ed55152e..00f73834381 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 5c3ce2fd3fd..c0c24841b5d 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 1b58b3f7a39..9108c864b05 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 8e87fa684c7..492becef638 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 a45c1814922..cdbd454b99c 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 9ccfea88542..2e1d6435165 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 2f9288bddd3..0972480a957 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 117578b9986..367dbb113b4 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 f8430e0871f..b026eb7765f 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 6958ddd56c2..f3df84a85d5 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 9d357c8b26e..fdb8bb62e4f 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 a3ff5e3ec67..ced0818f525 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 c79cecf7e04..fd69f869c2a 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 5809b559e20..bb2c3ce7e68 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 b62f4f12eeb..85a97b47c54 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 96b3bef8dba..664b60b082f 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 9882d8e8694..4f5668d7d85 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 a231585fca5..28f35b9d2d6 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 ca09a087b47..055c990ebbd 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 a44ad7ce3dd..13240877d9c 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 ac02162e06e..746070c2e04 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 2a762da39b8..5b0388097b1 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 adcf11e964e..c3ab1f7eda9 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 cc7c3e3e3e8..a02072b5b5a 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 c99d8364886..5003c76bfd4 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 30bbf9c23a6..b39544ada44 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 fa000d5acc2..87f00290cad 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 6de1559f69c..8d1303c9466 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 72c79975c06..81b24b4f5f6 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 7e96c887204..32c16c22946 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 e29b9b89319..174083b192e 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 2f54bf79115..dba0f22cc61 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 ce89d142219..caa100ea311 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 689fe22187a..4c03c536970 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 757979a0d8f..9451285ac86 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 c9aae1fb1aa..2aec79e2b61 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 7ee6cfd342c..59fbbd0685f 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 c322fae26c2..b8ca057e123 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 5fcdab4f038..5510384fe4d 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 389c863d32b..faeb26b416a 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 e4144c3dbb7..7d098c34729 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 d6a3576cb9b..d4625c5dd47 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 e6e285c8bbd..645a7018fc6 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 16d3706d31f..d1c6eb1da15 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 dccfa5c7e00..3949fa21835 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 72d21d9f21e..8c2b2aa11d1 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 bccf58d5fd4..b18a34d5a46 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 1cbb251f1de..f935de8126a 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 3b7754871b1..b1c40220f4d 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 64222f5404c..4fda02f2e4a 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 a3c858b2d1d..818140d8389 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 6953ba9e374..e95e5130623 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 4e1359668de..a66c346aa74 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 f692007c36e..45a99427cfc 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 d8290803e1c..a06c13055b8 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 e824eace561..9bad1f8d7fe 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 4229160b091..85dbe89200f 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 5c4730043d4..4cd3d6d9449 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 5def42f3069..840a68aab4d 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 b610a54444f..3ebb2b486c7 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 5af50f420d8..66084266b3f 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 21f130e327f..7b17b3496d2 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 8a32e960cf6..818dc19a083 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 5b98653ade1..d020fe88a44 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 4d3f0b058a9..7c8f4deb8e8 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 dd52c4ad660..ebfea82f9e1 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 3364a09a270..5bfdeed2143 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 1c595b05674..0cb0316849e 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 7b7b1b2513b..7cfefa5631b 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 902bd710643..918302d6cca 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 27280179d3d..67d1cb570d1 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 ed33610ca15..ed9c0f34b28 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 cdf640b57ba..f6c3a75f986 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 8b179291dde..98a372e0ad2 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 37bf55467c7..2045fc45d90 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 e0cba8feed9..31ef475f8bc 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 5881375ed7c..4b792f224b4 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 3694d5705ea..44e76e91be4 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 383c50ffec1..afc3dec3853 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 9d549f97ba3..32354850dd1 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 6d3501573a0..cab45abec89 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 a08edd0ce3d..4e2aea38ed4 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 039c4ce1a67..87acdf77fd8 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 cb6c1bce806..dc2e431955f 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 d1f8e8a51b9..22de1ca959e 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 6b749ec1a29..50072049ae8 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 b1902189e0c..0eaea7acc97 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 6bba93cb2df..795cd77f413 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 a4dd0c9e512..636d0e3da4a 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 4bc2481f265..e980741e338 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 a422515620f..c7a820cd90a 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 725f74c4bb3..a2287b14be0 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 48c43928aba..166966c212a 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 f8ccdc60d4c..3de0bd80f74 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 5a212586d7a..d9761248f12 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 aebc1294fd0..f7d7bfbd1be 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 6577ff113c7..97abcfe4927 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 972d7d67090..2ea24e180ab 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 00000000000..93a5d6e6000 --- /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 28b1e392d38..93938f88cb8 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 989113ef285..9784efa81ef 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 04270ba551f..49a96ec8ee7 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 00000000000..49d8f6fd92a --- /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 99c1cd89b7d..663af3c4051 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 00000000000..6258d7497b1 --- /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 57029d3d9eb..8aa9fd0ce17 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 13d8df47e77..0231d49a097 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 00000000000..e0bb94b1a71 --- /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 4f5668d7d85..56ff19e48d0 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 3cfb368c29a..580ccba8476 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 2f9ff72c27d..b600661f33b 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 3d520329ce9..101de8d7b5a 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 b7af555aaa7..2c8138603c9 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 0d6f6a2e4b1..dbdf843da7d 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 4d0873efd69..db9960b2a45 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 9bd717bcd8e..82a30994278 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 a6076d5a622..8c56424ab6e 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 6fe4f7fc883..8843d6eadf5 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 aacb78a4c26..644ec9554c6 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 5dac28fbfb0..1a67a4b8d2a 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 e007423e638..337521695cd 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 bfa4e51be2c..a573130220f 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 23db7369123..082c916b1c0 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 28f35b9d2d6..90fc5e6f6bc 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 72002b6935d..e1381fcb265 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 4de7f8401a0..32cbc5b1bcc 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 9f68f2fa8ae..3bdccb73b8e 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 caa100ea311..5b09ea2b5a5 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 00c6d28e679..c491e37cf2c 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 508d1ecdb19..18032fc6ff6 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 45a99427cfc..c99c4d5951b 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 00a7b857da7..fd625947b30 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 fc5edf25df5..90d3de1bbd3 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 d8d9240d2b4..06ee656abcb 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 b7ab4530a89..f9a0548ac8d 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 8301a5bcc70..08877deac4b 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 5ba5c47dcf0..49fa0549c0d 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 36722ffdf16..4b39ee4cdcf 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 e62856f1015..0f4b8e1f36b 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 b96c0aa0eb8..398d017b2c5 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 9ff26232bf7..09697b2d6c4 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 972817dbeca..7195cdee81d 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 dc7dfc0bd33..dd893ceacc0 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 afab3254c56..4b1d85d1f14 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 00000000000..9cf7472318f --- /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 f4bac6c85eb..342fef3d1ba 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 0103e50c33e..d4d29f8262f 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 2237d31bd6a..29c850aa6b9 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 c46243be778..35c14687ce3 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 04debbb64bf..4977151e8ce 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 00000000000..bfbe6d09bf3 --- /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 663af3c4051..4f982b69ac7 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 95754d431b5..801346a35eb 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 00000000000..0019a20f8ff --- /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 00000000000..fb71431f560 --- /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 00000000000..a3f818a16ba --- /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 33b44d19c41..e2e160c535c 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 7249de52a16..989a706dc43 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 437ee3bd8e1..6052bebd785 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 00000000000..c85fd352839 --- /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 174486d23e0..47cdce9018d 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 00000000000..9d8620abadb --- /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 00000000000..f2fbcdc66a7 --- /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 2c63c892e70..e3d472a67c6 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 72cff995b53..3f2c28fccb9 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 8ba02d36997..c623b8640bf 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 00000000000..59e1694751d --- /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 831c9af0224..273472e13fe 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 405fb57b34c..00000000000 --- 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 5e2686d5665..00000000000 --- 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 2652233c815..c2a256514c7 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 e9d6e75da35..d059e88beea 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 48005a66ee7..54b22fc20d7 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 e743777f5a0..457dc086e6f 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 4748ad13237..c8f16f29890 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 fab15c53678..11a972df665 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 25f38245c01..168b0273668 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 acd8cea2d56..6ec0bfda539 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 cba9ba38d02..18ab5397c20 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 ace75c60c7f..b0b0030be20 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 090b4a5eb0c..43a96102085 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 303542ee695..a52c164703a 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 5b054906f4c..441f40cb177 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 f68c63b08a0..8bf1d22d705 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 abc97c5a100..ba812126498 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 702a551a132..1ad3717afa1 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 7a06bf1465c..d8123228e4b 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 8aac572d997..8a2f79ebf7a 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 1f91db3d338..bf85e77865a 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 035f316edcc..a0cadfdd91a 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 18f4ae4a10e..701022c458d 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 75af5f913a9..c1192567abf 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 b0f5ff173ee..a867521b183 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 267eeb53162..e15c1acb3f3 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 d6fd0abfc96..41312a43ba4 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 39e9e4939d0..27945ca02eb 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 55f9ea18715..1b3510b5db2 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 300f3e4486b..49dc6d58ad6 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 89bbf72f9d4..6dc50bb8bec 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 713689dd2c7..817daf34aba 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 3b0b6304d38..cc25cd9e66d 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 c7d2f1f2aef..79399717b43 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 7ae7824d2f8..788fe95d0e0 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 77a491cc8cb..773e9c48c2e 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 2cdcbd04ca9..ec217726a24 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 dfee8dabdd2..90ae6e5651c 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 c5b1ef3bdff..66ab50509d3 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 6152322f7af..51b5e81b1d2 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 da70cc34ee4..8f31c64d772 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 30c41276507..a4c09edaccc 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 84256163ea0..40292f3ec98 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 99f9424c9e1..84133c5c4a5 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 4d87c9c8380..fac8a327312 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 ced0818f525..a5b026bdc14 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 b165c463e47..25ec08bea09 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 ff49d135abb..3c5b5605c31 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 1deca5e434d..be31f51fff6 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 f0feb2f4892..f75105158ea 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 902259d38dd..b34d45e7ae1 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 41e3135af1c..4981a2a0c39 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 320f254c7d1..7047efed1b9 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 664b60b082f..239c7e98794 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 a630ab54381..61d51635208 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 63b02b09e94..ebf7393a055 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 51f52a13eff..38066b1f848 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 38c705b2712..3a64dddd996 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 26da650b1c4..d7998b98c9d 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 7b1c0a8dbe9..d4ad752700f 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 8715c86719f..a260d45da71 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 c3ab1f7eda9..01ad9644511 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 a015b59c040..875e6e4b78c 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 12de978e7d7..b5d458499de 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 f788c76b0ef..5ae5ca7c12b 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 5003c76bfd4..2ca17fc5790 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 56cbf4734d9..b0bae618932 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 c1f6e08f34d..e985eee2576 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 d3ce406cae1..7568974343e 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 36ba47f6fc9..597112500e9 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 aa91a6a728a..c1c532a3dfa 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 8d7d91068a6..ae81679eb9c 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 2b4e1b9dc80..fd2bc81d4d3 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 d6aec436ec4..6c01457358f 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 7cc7f432bc9..c89332c6e19 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 98a372e0ad2..1e9c99fb45a 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 ef9819f366d..ed7834df2fb 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 78381da15ab..622d44fbe78 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 00000000000..ac1f39b27cc --- /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 56292a96bd5..ba00f881332 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