feat: [M3-8792] - Improve Consistency of Notice Error States

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 (
     <Dialog {...dialogProps} PaperProps={{ role: undefined }}>
-      {children}
+      <StyledDialogContentSection>{children}</StyledDialogContentSection>
       <Stack
         direction="row"
         justifyContent="flex-end"
         spacing={2}
-        sx={{ mt: 4 }}
+        sx={{ mt: 2 }}
       >
         {actions && typeof actions === 'function'
           ? actions(dialogProps)
@@ -40,3 +41,10 @@ export const ConfirmationDialog = (props: ConfirmationDialogProps) => {
     </Dialog>
   );
 };
+
+const StyledDialogContentSection = styled(Stack, {
+  label: 'StyledDialogContentSection',
+})(({ theme: { spacing } }) => ({
+  marginBottom: spacing(2),
+  order: -1,
+}));

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

@@ -73,12 +73,12 @@ export const DeletionDialog = React.memo((props: DeletionDialogProps) => {
   return (
     <ConfirmationDialog
       actions={renderActions}
+      error={error}
       onClose={onClose}
       open={open}
       title={`Delete ${titlecase(entity)} ${label}?`}
       {...rest}
     >
-      {error && <Notice text={error} variant="error" />}
       <Notice variant="warning">
         <Typography style={{ fontSize: '0.875rem' }}>
           <strong>Warning:</strong> Deleting this {entity} is permanent and

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

@@ -124,6 +124,8 @@ export const Dialog = React.forwardRef(
           />
           <DialogContent
             sx={{
+              display: 'flex',
+              flexDirection: 'column',
               overflowX: 'hidden',
               paddingBottom: theme.spacing(3),
             }}

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

@@ -93,14 +93,14 @@ export const ObjectStorageSettings = () => {
           subType: 'ObjectStorage',
           type: 'AccountSetting',
         }}
+        errors={error}
         label="Username"
         loading={isCancelLoading}
         onClick={handleCancelObjectStorage}
         onClose={handleCloseCancelDialog}
         open={isCancelDialogOpen}
         title="Cancel Object Storage"
       >
-        {error && <Notice text={error[0].reason} variant="error" />}
         <Notice variant="warning">
           <Typography sx={{ fontSize: '0.875rem' }}>
             <strong>Warning:</strong> Canceling Object Storage will permanently

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 && <Notice text={error} variant="error" />}
       <Typography>{`Confirm payment of $${usd} USD to Linode LLC?`}</Typography>
     </ConfirmationDialog>
   );

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 (
     <ConfirmationDialog
       actions={actions}
+      error={error}
       onClose={onClose}
       open={open}
       title="Add promo code"
     >
-      {error && <Notice text={error} variant="error" />}
       <Typography>
         Enter the promo code in the field below. You will see promo details in
         the Promotions panel on the Billing Info tab.

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 (
     <ConfirmationDialog
       actions={renderActions}
+      error={error}
       onClose={onClose}
       open={open}
       title="Maintenance Updates"
     >
-      {error && <Notice text={error} variant="error" />}
       <Typography>
         During the maintenance there is a brief service interruption.
       </Typography>

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 (
     <ConfirmationDialog
       actions={renderActions}
+      error={error}
       onClose={onClose}
       open={open}
       title={`Upgrade ${dialogTitle}`}
     >
-      {error && <Notice text={error} variant="error" />}
       <Typography sx={{ mb: theme.spacing(1.5) }}>
         Current Version: v{databaseVersion}
       </Typography>

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/DeleteKubernetesClusterDialog.tsx

@@ -55,14 +55,14 @@ export const DeleteKubernetesClusterDialog = (props: Props) => {
         subType: 'Cluster',
         type: 'Kubernetes',
       }}
+      errors={error}
       label={'Cluster Name'}
       loading={isDeleting}
       onClick={onDelete}
       onClose={onClose}
       open={open}
       title={`Delete Cluster ${clusterLabel}`}
     >
-      {error ? <Notice text={error?.[0].reason} variant="error" /> : null}
       <Notice variant="warning">
         <Typography component="div" sx={{ fontSize: '0.875rem' }}>
           <strong>Warning:</strong>

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 && <Notice text={error?.[0]?.reason} variant="error" />}
-    </TypeToConfirmDialog>
+    />
   );
 };

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 && <Notice text={error?.[0].reason} variant="error" />}
       {!poweredOff && linode !== undefined && (
         <Typography
           sx={(theme) => ({