refactor: [M3-6063] - Refactor components to use TypeToConfirmDialog component

packages/manager/.changeset/pr-9175-changed-1685739474444.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Refactor components to use TypeToConfirmDialog ([#9175](https://github.com/linode/manager/pull/9175))

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

@@ -26,6 +26,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
       marginBottom: 0,
     },
   },
+  dialogContent: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
 }));
 
 export interface ConfirmationDialogProps extends DialogProps {
@@ -56,7 +60,7 @@ export const ConfirmationDialog = (props: ConfirmationDialogProps) => {
       data-testid="drawer"
     >
       <DialogTitle title={title} onClose={onClose} />
-      <DialogContent data-qa-dialog-content className="dialog-content">
+      <DialogContent data-qa-dialog-content className={classes.dialogContent}>
         {children}
         {error && (
           <DialogContentText className={`${classes.error} error-for-scroll`}>

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

@@ -13,8 +13,16 @@ import {
 import { usePreferences } from 'src/queries/preferences';
 
 interface EntityInfo {
-  type: 'Linode' | 'Volume' | 'NodeBalancer' | 'Bucket';
+  type:
+    | 'Linode'
+    | 'Volume'
+    | 'NodeBalancer'
+    | 'Bucket'
+    | 'Database'
+    | 'Kubernetes'
+    | 'AccountSetting';
   label: string | undefined;
+  subType?: 'Backup' | 'Cluster' | 'ObjectStorage' | 'CloseAccount';
 }
 
 interface TypeToConfirmDialogProps {
@@ -56,9 +64,49 @@ export const TypeToConfirmDialog = (props: CombinedProps) => {
     }
   }, [open]);
 
+  const getPrimaryBtnText = (entity: EntityInfo) => {
+    if (entity.type === 'Volume' && title.startsWith('Detach')) return 'Detach';
+
+    switch (entity.subType) {
+      case 'Backup':
+        return 'Restore Database';
+      case 'Cluster':
+        return 'Delete Cluster';
+      case 'ObjectStorage':
+        return 'Confirm Cancellation';
+      case 'CloseAccount':
+        return 'Close Account';
+      default:
+        return 'Delete';
+    }
+  };
+
+  const getLabelText = (entity: EntityInfo) => {
+    if (entity.type === 'AccountSetting' && entity.subType === 'CloseAccount') {
+      return `Please enter your username (${entity.label}) to confirm.`;
+    }
+    const ttcLabelText =
+      entity.type === 'Bucket' || entity.subType === 'Cluster'
+        ? 'Name'
+        : 'Label';
+    switch (entity.subType) {
+      case 'ObjectStorage':
+        return `Username`;
+      case 'Cluster':
+        return `Cluster ${ttcLabelText}`;
+      default:
+        return `${entity.type} ${ttcLabelText}`;
+    }
+  };
+
   const actions = (
     <ActionsPanel style={{ padding: 0 }}>
-      <Button buttonType="secondary" onClick={onClose} data-qa-cancel>
+      <Button
+        buttonType="secondary"
+        onClick={onClose}
+        data-qa-cancel
+        data-testid={'dialog-cancel'}
+      >
         Cancel
       </Button>
       <Button
@@ -67,10 +115,9 @@ export const TypeToConfirmDialog = (props: CombinedProps) => {
         loading={loading}
         disabled={disabled}
         data-qa-confirm
+        data-testid={'dialog-confirm'}
       >
-        {entity.type === 'Volume' && title.startsWith('Detach')
-          ? 'Detach'
-          : 'Delete'}
+        {getPrimaryBtnText(entity)}
       </Button>
     </ActionsPanel>
   );
@@ -84,27 +131,31 @@ export const TypeToConfirmDialog = (props: CombinedProps) => {
       error={errors ? errors[0].reason : undefined}
     >
       {children}
-      <TypeToConfirm
-        label={`${entity.type} ${entity.type !== 'Bucket' ? 'Label' : 'Name'}`}
-        confirmationText={
-          confirmationText ? (
-            confirmationText
-          ) : (
-            <span>
-              To confirm deletion, type the name of the {entity.type} (
-              <b>{entity.label}</b>) in the field below:
-            </span>
-          )
-        }
-        value={confirmText}
-        typographyStyle={typographyStyle}
-        data-testid={'dialog-confirm-text-input'}
-        expand
-        onChange={(input) => {
-          setConfirmText(input);
-        }}
-        visible={preferences?.type_to_confirm}
-      />
+      <div style={{ display: 'flex', flexDirection: 'column', order: 2 }}>
+        <TypeToConfirm
+          hideInstructions={entity.subType === 'CloseAccount'}
+          label={getLabelText(entity)}
+          confirmationText={
+            confirmationText || entity.subType === 'CloseAccount' ? (
+              confirmationText
+            ) : (
+              <span>
+                To confirm deletion, type the name of the {entity.type} (
+                <b>{entity.label}</b>) in the field below:
+              </span>
+            )
+          }
+          value={confirmText}
+          typographyStyle={typographyStyle}
+          data-testid={'dialog-confirm-text-input'}
+          expand
+          onChange={(input) => {
+            setConfirmText(input);
+          }}
+          visible={preferences?.type_to_confirm}
+          placeholder={entity.subType === 'CloseAccount' ? 'Username' : ''}
+        />
+      </div>
     </ConfirmationDialog>
   );
 };

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

@@ -2,14 +2,11 @@ import { cancelAccount } from '@linode/api-v4/lib/account';
 import { APIError } from '@linode/api-v4/lib/types';
 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/ConfirmationDialog';
+import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
 import { Notice } from 'src/components/Notice/Notice';
 import Typography from 'src/components/core/Typography';
-import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
 import TextField from 'src/components/TextField';
 import { useProfile } from 'src/queries/profile';
 
@@ -21,6 +18,9 @@ interface Props {
 const useStyles = makeStyles()((theme: Theme) => ({
   dontgo: {
     marginTop: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'column',
+    order: 3,
   },
 }));
 
@@ -32,7 +32,6 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => {
   const [comments, setComments] = React.useState<string>('');
   const [inputtedUsername, setUsername] = React.useState<string>('');
   const [canSubmit, setCanSubmit] = React.useState<boolean>(false);
-
   const { classes } = useStyles();
   const history = useHistory();
   const { data: profile } = useProfile();
@@ -98,85 +97,58 @@ const CloseAccountDialog = ({ closeDialog, open }: Props) => {
   }
 
   return (
-    <ConfirmationDialog
-      open={open}
+    <TypeToConfirmDialog
       title="Are you sure you want to close your Linode account?"
+      entity={{
+        type: 'AccountSetting',
+        subType: 'CloseAccount',
+        label: profile.username,
+      }}
+      open={open}
       onClose={closeDialog}
-      error={errors ? errors[0].reason : ''}
-      actions={
-        <Actions
-          onClose={closeDialog}
-          isCanceling={isClosingAccount}
-          onSubmit={handleCancelAccount}
-          disabled={!canSubmit}
-        />
-      }
+      onClick={handleCancelAccount}
+      loading={isClosingAccount}
+      inputRef={inputRef}
+      disabled={!canSubmit}
     >
-      <Notice warning>
-        <Typography style={{ fontSize: '0.875rem' }}>
+      {errors ? <Notice error text={errors ? errors[0].reason : ''} /> : null}
+      <Notice
+        warning
+        style={{ display: 'flex', flexDirection: 'column', order: 1 }}
+      >
+        <Typography
+          style={{
+            fontSize: '0.875rem',
+            display: 'flex',
+            flexDirection: 'column',
+            order: 3,
+          }}
+        >
           <strong>Warning:</strong> Please note this is an extremely destructive
           action. Closing your account means that all services including
           Linodes, Volumes, DNS Records, etc will be lost and may not be able to
           be restored.
         </Typography>
       </Notice>
-      <TypeToConfirm
-        label={`Please enter your username (${profile.username}) to confirm.`}
-        onChange={(input) => setUsername(input)}
-        inputRef={inputRef}
-        aria-label="username field"
-        value={inputtedUsername}
-        visible
-        hideInstructions
-        placeholder="Username"
-      />
       <Typography className={classes.dontgo}>
         We&rsquo;d hate to see you go. Please let us know what we could be doing
         better in the comments section below. After your account is closed,
         you&rsquo;ll be directed to a quick survey so we can better gauge your
         feedback.
       </Typography>
-      <TextField
-        label="Comments"
-        multiline
-        onChange={(e) => setComments(e.target.value)}
-        optional
-        placeholder="Provide Feedback"
-        rows={1}
-        value={comments}
-        aria-label="Optional comments field"
-      />
-    </ConfirmationDialog>
-  );
-};
-
-interface ActionsProps {
-  onClose: () => void;
-  onSubmit: () => void;
-  isCanceling: boolean;
-  disabled: boolean;
-}
-
-const Actions = ({
-  disabled,
-  isCanceling,
-  onClose,
-  onSubmit,
-}: ActionsProps) => {
-  return (
-    <ActionsPanel>
-      <Button buttonType="secondary" onClick={onClose}>
-        Cancel
-      </Button>
-      <Button
-        buttonType="primary"
-        onClick={onSubmit}
-        disabled={disabled}
-        loading={isCanceling}
-      >
-        Close Account
-      </Button>
-    </ActionsPanel>
+      <div style={{ display: 'flex', flexDirection: 'column', order: 4 }}>
+        <TextField
+          label="Comments"
+          multiline
+          onChange={(e) => setComments(e.target.value)}
+          optional
+          placeholder="Provide Feedback"
+          rows={1}
+          value={comments}
+          aria-label="Optional comments field"
+        />
+      </div>
+    </TypeToConfirmDialog>
   );
 };