refactor: [M3-6305] - MUI v5 Migration SRC > Components > ConfirmationDialog

CHANGELOG.md

@@ -44,6 +44,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - MUI v5 Migration - `Features > Billing` #8933
 - MUI v5 Migration - `Components > CheckBox` #8980
 - MUI v5 Migration - `Components > BackupStatus` #8960
+- MUI v5 Migration - `SRC > Components > ConfirmationDialog` #9016
 - Use MUI Grid v2 #8959
 - Update the `usePagination` hook to use Query Params instead of state #8914
 - Use Query Client from Context #8949

packages/manager/src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -3,11 +3,11 @@ import Dialog, { DialogProps } from 'src/components/core/Dialog';
 import DialogActions from 'src/components/core/DialogActions';
 import DialogContent from 'src/components/core/DialogContent';
 import DialogContentText from 'src/components/core/DialogContentText';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
 import DialogTitle from 'src/components/DialogTitle';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     '& .MuiPaper-root': {
       minWidth: 480,
@@ -35,8 +35,8 @@ export interface Props extends DialogProps {
   title: string;
 }
 
-const ConfirmationDialog: React.FC<Props> = (props) => {
-  const classes = useStyles();
+export const ConfirmationDialog = (props: Props) => {
+  const { classes } = useStyles();
 
   const { title, children, actions, error, ...dialogProps } = props;
 
@@ -72,5 +72,3 @@ const ConfirmationDialog: React.FC<Props> = (props) => {
     </Dialog>
   );
 };
-
-export default ConfirmationDialog;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';

packages/manager/src/components/Dialog/Dialog.stories.mdx

@@ -3,12 +3,10 @@ import Typography from 'src/components/core/Typography';
 import Button from 'src/components/Button';
 import ActionsPanel from 'src/components/ActionsPanel';
 import DeletionDialog from 'src/components/DeletionDialog';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
-<Meta
-  title="Components/Dialogs"
-/>
+<Meta title="Components/Dialogs" />
 
 export const DeletionTemplate = (args) => (
   <DeletionDialog
@@ -23,7 +21,6 @@ export const DeletionTemplate = (args) => (
   </DeletionDialog>
 );
 
-
 export const ConfirmationTemplate = (args) => (
   <ConfirmationDialog
     style={{ position: 'unset' }}
@@ -53,11 +50,13 @@ export const NormalTemplate = (args) => (
 # Dialogs
 
 ## Overview
+
 A modal dialog is a window that appears on top of a parent screen. It's called 'modal' because it creates a mode that disables the parent screen but keeps it visible. Users must interact with the modal to return to the main screen.
 
 > ⚠️ In Cloud Manager, dialogs will lock focus onto the dialog and prevent scrolling. For the sake of previewing dialogs, this does not occur in Storybook.
 
 ### Modal Types
+
 - **Standard**
   - Has an "X" button in the top right
   - Can contain anything in the body of the dialog
@@ -67,7 +66,6 @@ A modal dialog is a window that appears on top of a parent screen. It's called '
   - The user must confirm the deleteion of an entity
   - Can require user to type the entity name to confirm deletion
 
-
 > Clicking off of the modal will not close it.
 > A modal can only be closed by taking direct action, clicking on a button or the “X” button, or using the `esc` key.
 
@@ -91,10 +89,12 @@ A modal dialog is a window that appears on top of a parent screen. It's called '
         description: 'Is the modal open?',
       },
       fullHeight: {
-        description: 'Should the Modal take up the entire height of the viewport?',
+        description:
+          'Should the Modal take up the entire height of the viewport?',
       },
       fullWidth: {
-        description: 'Should the Modal take up the entire width of the viewport?',
+        description:
+          'Should the Modal take up the entire width of the viewport?',
       },
       title: {
         description: 'Title that appears in the heading of the dialog.',
@@ -107,21 +107,14 @@ A modal dialog is a window that appears on top of a parent screen. It's called '
       },
       onClose: {
         description: 'Callback fired when the component requests to be closed.',
-      }
+      },
     }}
   >
     {NormalTemplate.bind({})}
   </Story>
 </Canvas>
 
-
-<ArgsTable
-  story="Dialog"
-  exclude={[
-    'ref',
-  ]}
-  sort="requiredFirst"
-/>
+<ArgsTable story="Dialog" exclude={['ref']} sort="requiredFirst" />
 
 ### Confirmation Dialog
 
@@ -132,6 +125,7 @@ A Confirmation Dialog is used for confirming a simple task.
 > If you are confirming a delete action, use a `Deletion Dialog`
 
 ### Language
+
 - Avoid “Are you sure?” language. Assume the user knows what they want to do while helping them avoid unintended consequences.
 
 <Canvas>
@@ -140,14 +134,15 @@ A Confirmation Dialog is used for confirming a simple task.
     args={{
       open: true,
       title: 'Enable this feature?',
-      children: 'This confirmation modal is making sure you really want to do this.',
+      children:
+        'This confirmation modal is making sure you really want to do this.',
       error: '',
       actions: (
         <ActionsPanel>
           <Button>Cancel</Button>
           <Button buttonType="primary">Continue</Button>
         </ActionsPanel>
-      )
+      ),
     }}
     argTypes={{
       open: {
@@ -163,26 +158,20 @@ A Confirmation Dialog is used for confirming a simple task.
         description: 'Error that will be shown in the dialog.',
       },
       actions: {
-        description: 'Items that get rendered in the footer of the Dialog. Typicaly you put an `<ActionsPanel />` with `<Button />`s in it.',
+        description:
+          'Items that get rendered in the footer of the Dialog. Typicaly you put an `<ActionsPanel />` with `<Button />`s in it.',
         control: false,
       },
       onClose: {
         description: 'Callback fired when the component requests to be closed.',
-      }
+      },
     }}
   >
     {ConfirmationTemplate.bind({})}
   </Story>
 </Canvas>
 
-
-<ArgsTable
-  story="Confirmation Dialog"
-  exclude={[
-    'ref',
-  ]}
-  sort="requiredFirst"
-/>
+<ArgsTable story="Confirmation Dialog" exclude={['ref']} sort="requiredFirst" />
 
 ### Deletion Dialog
 
@@ -221,18 +210,11 @@ If a user has opted out of type-to-confirm this will be ignored
       },
       onClose: {
         description: 'Callback fired when the component requests to be closed.',
-      }
+      },
     }}
   >
     {DeletionTemplate.bind({})}
   </Story>
 </Canvas>
 
-
-<ArgsTable
-  story="Deletion Dialog"
-  exclude={[
-    'ref',
-  ]}
-  sort="requiredFirst"
-/>
+<ArgsTable story="Deletion Dialog" exclude={['ref']} sort="requiredFirst" />

packages/manager/src/components/PaymentMethodRow/DeletePaymentMethodDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ActionsPanel from '../ActionsPanel';
 import Button from '../Button';
-import Dialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { PaymentMethod } from '@linode/api-v4/lib/account/types';
 import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';
 import ThirdPartyPayment from './ThirdPartyPayment';
@@ -45,7 +45,7 @@ export const DeletePaymentMethodDialog: React.FC<Props> = (props) => {
   );
 
   return (
-    <Dialog
+    <ConfirmationDialog
       title="Delete Payment Method"
       error={error}
       open={open}
@@ -66,7 +66,7 @@ export const DeletePaymentMethodDialog: React.FC<Props> = (props) => {
           ) : null}
         </Grid>
       </Grid>
-    </Dialog>
+    </ConfirmationDialog>
   );
 };
 

packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import ConfirmationDialog, {
-  ConfirmationDialogProps,
-} from 'src/components/ConfirmationDialog';
+import {
+  ConfirmationDialog,
+  Props as ConfirmationDialogProps,
+} from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import TypeToConfirm from 'src/components/TypeToConfirm';
 import { usePreferences } from 'src/queries/preferences';
 import ActionsPanel from 'src/components/ActionsPanel';

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import Dialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
 import Notice from 'src/components/Notice';
@@ -98,7 +98,7 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => {
   }
 
   return (
-    <Dialog
+    <ConfirmationDialog
       open={open}
       title="Are you sure you want to close your Linode account?"
       onClose={closeDialog}
@@ -146,7 +146,7 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => {
         value={comments}
         aria-label="Optional comments field"
       />
-    </Dialog>
+    </ConfirmationDialog>
   );
 };
 

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import Accordion from 'src/components/Accordion';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import Typography from 'src/components/core/Typography';
 import ExternalLink from 'src/components/ExternalLink';
 import Grid from '@mui/material/Unstable_Grid2';

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

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import Accordion from 'src/components/Accordion';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import Notice from 'src/components/Notice';
 import TypeToConfirm from 'src/components/TypeToConfirm';
 import Typography from 'src/components/core/Typography';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/CreditCardDialog.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { compose } from 'recompose';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import Typography from 'src/components/core/Typography';
 import Notice from 'src/components/Notice';
 

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentBits/PaypalDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { compose } from 'recompose';
 
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import Typography from 'src/components/core/Typography';
 import DialogActions, {
   Props as ActionsProps,

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { makeStyles } from 'tss-react/mui';
 import Typography from 'src/components/core/Typography';
 import Notice from 'src/components/Notice';

packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import AddNewLink from 'src/components/AddNewLink';
 import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import TableBody from 'src/components/core/TableBody';
 import Typography from 'src/components/core/Typography';
 import InlineMenuAction from 'src/components/InlineMenuAction';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import TypeToConfirm from 'src/components/TypeToConfirm';
 import Typography from 'src/components/core/Typography';
 import { DialogProps } from 'src/components/Dialog';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsDeleteClusterDialog.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import Typography from 'src/components/core/Typography';
 import Notice from 'src/components/Notice';
 import TypeToConfirm from 'src/components/TypeToConfirm';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsResetPasswordDialog.tsx

@@ -2,7 +2,7 @@ import { Engine } from '@linode/api-v4/lib/databases';
 import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import ConfirmationDialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import Typography from 'src/components/core/Typography';
 import Notice from 'src/components/Notice';
 import { useDatabaseCredentialsMutation } from 'src/queries/databases';

packages/manager/src/features/Domains/DisableDomainDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ActionPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import Dialog from 'src/components/ConfirmationDialog';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Domain } from '@linode/api-v4/lib/domains';
 import { useUpdateDomainMutation } from 'src/queries/domains';
 import { sendDomainStatusChangeEvent } from 'src/utilities/ga';
@@ -42,7 +42,7 @@ const DisableDomainDialog = (props: Props) => {
   };
 
   return (
-    <Dialog
+    <ConfirmationDialog
       open={open}
       title={`Disable Domain ${domain?.domain}?`}
       onClose={onClose}
@@ -59,7 +59,7 @@ const DisableDomainDialog = (props: Props) => {
       }
     >
       Are you sure you want to disable this DNS zone?
-    </Dialog>
+    </ConfirmationDialog>
   );
 };