diff --git a/packages/manager/src/components/ConfirmationDialog/ConfirmationDialog.tsx b/packages/manager/src/components/ConfirmationDialog/ConfirmationDialog.tsx index 43937633388..e96cf370a91 100644 --- a/packages/manager/src/components/ConfirmationDialog/ConfirmationDialog.tsx +++ b/packages/manager/src/components/ConfirmationDialog/ConfirmationDialog.tsx @@ -1,4 +1,5 @@ import { Stack } from '@linode/ui'; +import { styled } from '@mui/material/styles'; import * as React from 'react'; import { Dialog } from 'src/components/Dialog/Dialog'; @@ -26,12 +27,12 @@ export const ConfirmationDialog = (props: ConfirmationDialogProps) => { return ( - {children} + {children} {actions && typeof actions === 'function' ? actions(dialogProps) @@ -40,3 +41,10 @@ export const ConfirmationDialog = (props: ConfirmationDialogProps) => { ); }; + +const StyledDialogContentSection = styled(Stack, { + label: 'StyledDialogContentSection', +})(({ theme: { spacing } }) => ({ + marginBottom: spacing(2), + order: -1, +})); diff --git a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx index 93f1c2bcdf9..8fc18208c7a 100644 --- a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx +++ b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx @@ -73,12 +73,12 @@ export const DeletionDialog = React.memo((props: DeletionDialogProps) => { return ( - {error && } Warning: Deleting this {entity} is permanent and diff --git a/packages/manager/src/components/Dialog/Dialog.tsx b/packages/manager/src/components/Dialog/Dialog.tsx index f4df58c8269..7b06647c805 100644 --- a/packages/manager/src/components/Dialog/Dialog.tsx +++ b/packages/manager/src/components/Dialog/Dialog.tsx @@ -124,6 +124,8 @@ export const Dialog = React.forwardRef( /> { subType: 'ObjectStorage', type: 'AccountSetting', }} + errors={error} label="Username" loading={isCancelLoading} onClick={handleCancelObjectStorage} @@ -100,7 +101,6 @@ export const ObjectStorageSettings = () => { open={isCancelDialogOpen} title="Cancel Object Storage" > - {error && } Warning: Canceling Object Storage will permanently 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 c3db7b92f0d..bd28c8bb7da 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,4 +1,4 @@ -import { Notice, Typography } from '@linode/ui'; +import { Typography } from '@linode/ui'; import * as React from 'react'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; @@ -36,11 +36,11 @@ export const CreditCardDialog = (props: Props) => { }} /> } + error={error ?? undefined} onClose={cancel} open={open} title="Confirm Payment" > - {error && } {`Confirm payment of $${usd} USD to Linode LLC?`} ); diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx index 4e9be23752d..7cd84d5548b 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx +++ b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx @@ -1,5 +1,5 @@ import { addPromotion } from '@linode/api-v4/lib'; -import { Notice, TextField, Typography } from '@linode/ui'; +import { TextField, Typography } from '@linode/ui'; import { useQueryClient } from '@tanstack/react-query'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -78,11 +78,11 @@ const PromoDialog = (props: Props) => { return ( - {error && } Enter the promo code in the field below. You will see promo details in the Promotions panel on the Billing Info tab. diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx index 8de8ecf2d26..2220419e1ff 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsReviewUpdatesDialog.tsx @@ -1,4 +1,4 @@ -import { Notice, Typography } from '@linode/ui'; +import { Typography } from '@linode/ui'; import { useTheme } from '@mui/material'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -79,11 +79,11 @@ export const DatabaseSettingsReviewUpdatesDialog = (props: Props) => { return ( - {error && } During the maintenance there is a brief service interruption. diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx index 325b9c00309..326915dcc07 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsUpgradeVersionDialog.tsx @@ -1,10 +1,10 @@ +import { Autocomplete } from '@linode/ui'; import { FormControl, Notice, Typography } 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 { Autocomplete } from '@linode/ui'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { DATABASE_ENGINE_MAP, @@ -109,11 +109,11 @@ export const DatabaseSettingsUpgradeVersionDialog = (props: Props) => { return ( - {error && } Current Version: v{databaseVersion} diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx index b2dfa77a499..4a6d544bec7 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx @@ -55,6 +55,7 @@ export const DeleteKubernetesClusterDialog = (props: Props) => { subType: 'Cluster', type: 'Kubernetes', }} + errors={error} label={'Cluster Name'} loading={isDeleting} onClick={onDelete} @@ -62,7 +63,6 @@ export const DeleteKubernetesClusterDialog = (props: Props) => { open={open} title={`Delete Cluster ${clusterLabel}`} > - {error ? : null} Warning: diff --git a/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx b/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx index 861748d24f5..8652a474ac2 100644 --- a/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx +++ b/packages/manager/src/features/Volumes/DeleteVolumeDialog.tsx @@ -1,4 +1,3 @@ -import { Notice } from '@linode/ui'; import * as React from 'react'; import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog'; @@ -40,6 +39,7 @@ export const DeleteVolumeDialog = (props: Props) => { primaryBtnText: 'Delete', type: 'Volume', }} + errors={error} isFetching={isFetching} label="Volume Label" loading={isPending} @@ -48,8 +48,6 @@ export const DeleteVolumeDialog = (props: Props) => { open={open} title={`Delete Volume ${volume?.label}?`} typographyStyle={{ marginTop: '10px' }} - > - {error && } - + /> ); }; diff --git a/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx b/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx index 859de32f1fe..411edb0caac 100644 --- a/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx +++ b/packages/manager/src/features/Volumes/DetachVolumeDialog.tsx @@ -1,4 +1,4 @@ -import { Notice, Typography } from '@linode/ui'; +import { Typography } from '@linode/ui'; import { useSnackbar } from 'notistack'; import * as React from 'react'; @@ -54,6 +54,7 @@ export const DetachVolumeDialog = (props: Props) => { primaryBtnText: 'Detach', type: 'Volume', }} + errors={error} isFetching={isFetching} label="Volume Label" loading={isPending} @@ -63,7 +64,6 @@ export const DetachVolumeDialog = (props: Props) => { title={`Detach Volume ${volume?.label}?`} typographyStyle={{ marginTop: '10px' }} > - {error && } {!poweredOff && linode !== undefined && ( ({