feat(account-settings): Enable component override for <DeleteUser />

packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx

@@ -4,16 +4,13 @@ import { deleteUser, translate, getLogger } from '@aws-amplify/ui';
 
 import { useAuth } from '../../../internal';
 import { Flex } from '../../../primitives';
-import {
-  DefaultWarning,
-  DefaultError,
-  DefaultSubmitButton,
-} from './defaultComponents';
+import DEFAULTS from './defaults';
 import { DeleteUserProps, DeleteUserState } from './types';
 
 const logger = getLogger('Auth');
 
 function DeleteUser({
+  components,
   onSuccess,
   onError,
   handleDelete,
@@ -26,6 +23,12 @@ function DeleteUser({
 
   const { user, isLoading } = useAuth();
 
+  // subcomponents
+  const { Error, SubmitButton, Warning } = React.useMemo(
+    () => ({ ...DEFAULTS, ...(components || {}) }),
+    [components]
+  );
+
   const startConfirmation = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     setState('CONFIRMATION');
@@ -67,7 +70,7 @@ function DeleteUser({
     runDeleteUser();
   }, [runDeleteUser]);
 
-  /** Return null if user isn't authenticated in the first place */
+  // Return null if user isn't authenticated in the first place
   if (!user) {
     logger.warn('<DeleteUser /> requires user to be authenticated.');
     return null;
@@ -85,22 +88,26 @@ function DeleteUser({
 
   return (
     <Flex direction="column">
-      <DefaultSubmitButton
+      <SubmitButton
         isDisabled={state === 'CONFIRMATION'}
         onClick={startConfirmation}
       >
         {deleteAccountText}
-      </DefaultSubmitButton>
+      </SubmitButton>
       {state === 'CONFIRMATION' || state === 'DELETING' ? (
-        <DefaultWarning
+        <Warning
           onCancel={handleCancel}
           isDisabled={state === 'DELETING'}
           onConfirm={handleConfirmDelete}
         />
       ) : null}
-      {errorMessage ? <DefaultError>{errorMessage}</DefaultError> : null}
+      {errorMessage ? <Error>{errorMessage}</Error> : null}
     </Flex>
   );
 }
 
+DeleteUser.Error = DEFAULTS.Error;
+DeleteUser.SubmitButton = DEFAULTS.SubmitButton;
+DeleteUser.Warning = DEFAULTS.Warning;
+
 export default DeleteUser;

packages/react/src/components/AccountSettings/DeleteUser/__tests__/DeleteUser.test.tsx

@@ -1,8 +1,16 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+} from '@testing-library/react';
 
 import * as UIModule from '@aws-amplify/ui';
 
+import { Button, Flex, Heading, Text } from '../../../../primitives';
+import { DeleteUserComponents } from '../types';
 import DeleteUser from '../DeleteUser';
 
 const user = {} as unknown as UIModule.AmplifyUser;
@@ -15,6 +23,29 @@ jest.mock('../../../../internal', () => ({
 
 const deleteUserSpy = jest.spyOn(UIModule, 'deleteUser');
 
+function CustomWarning({ onCancel, onConfirm, isDisabled }) {
+  return (
+    <Flex direction="column">
+      <Text variation="warning">Custom Warning Message</Text>
+      <Button onClick={onCancel}>Back</Button>
+      <Button variation="primary" onClick={onConfirm} isDisabled={isDisabled}>
+        Custom Confirm Button
+      </Button>
+    </Flex>
+  );
+}
+
+const components: DeleteUserComponents = {
+  SubmitButton: (props) => <Button {...props}>Custom Delete Button</Button>,
+  Warning: (props) => <CustomWarning {...props} />,
+  Error: ({ children }) => (
+    <>
+      <Heading>Custom Error Message</Heading>
+      <Text>{children}</Text>
+    </>
+  ),
+};
+
 describe('ChangePassword', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -133,7 +164,88 @@ describe('ChangePassword', () => {
 
     fireEvent.click(confirmDeleteButton);
 
-    // submit handling is async, wait for error to be displayed
-    await waitFor(() => expect(screen.findByText('Mock Error')).toBeDefined());
+    expect(await screen.findByText('Mock Error')).toBeDefined();
+  });
+
+  it('renders as expected with components overrides', async () => {
+    const { container } = render(<DeleteUser components={components} />);
+
+    const submitButton = await screen.findByRole('button', {
+      name: 'Custom Delete Button',
+    });
+
+    expect(submitButton).toBeDefined();
+    expect(container).toMatchSnapshot();
+
+    fireEvent.click(submitButton);
+
+    expect(await screen.findByText('Custom Warning Message')).toBeDefined();
+  });
+
+  it('onSuccess is called with component overrides after successful user deletion', async () => {
+    deleteUserSpy.mockResolvedValue();
+
+    const onSuccess = jest.fn();
+    render(<DeleteUser components={components} onSuccess={onSuccess} />);
+
+    const deleteAccountButton = await screen.findByRole('button', {
+      name: 'Custom Delete Button',
+    });
+
+    fireEvent.click(deleteAccountButton);
+
+    const confirmDeleteButton = await screen.findByRole('button', {
+      name: 'Custom Confirm Button',
+    });
+
+    fireEvent.click(confirmDeleteButton);
+
+    // submit handling is async, wait for onSuccess to be called
+    // https://testing-library.com/docs/dom-testing-library/api-async/#waitfor
+    await waitFor(() => expect(onSuccess).toBeCalledTimes(1));
+  });
+
+  it('calls deleteUser with expected arguments and component overrides', async () => {
+    deleteUserSpy.mockResolvedValue();
+
+    const onSuccess = jest.fn();
+    render(<DeleteUser components={components} onSuccess={onSuccess} />);
+
+    const deleteAccountButton = await screen.findByRole('button', {
+      name: 'Custom Delete Button',
+    });
+
+    fireEvent.click(deleteAccountButton);
+
+    const confirmDeleteButton = await screen.findByRole('button', {
+      name: 'Custom Confirm Button',
+    });
+
+    fireEvent.click(confirmDeleteButton);
+
+    expect(deleteUserSpy).toBeCalledWith();
+    expect(deleteUserSpy).toBeCalledTimes(1);
+  });
+
+  it('error message is displayed with component overrides after unsuccessful submit', async () => {
+    deleteUserSpy.mockRejectedValue(new Error('Mock Error'));
+
+    render(<DeleteUser components={components} />);
+
+    const deleteAccountButton = await screen.findByRole('button', {
+      name: 'Custom Delete Button',
+    });
+
+    fireEvent.click(deleteAccountButton);
+
+    const confirmDeleteButton = await screen.findByRole('button', {
+      name: 'Custom Confirm Button',
+    });
+
+    fireEvent.click(confirmDeleteButton);
+
+    await screen.findByText('Mock Error');
+
+    expect(await screen.findByText('Custom Error Message')).toBeDefined();
   });
 });

packages/react/src/components/AccountSettings/DeleteUser/__tests__/__snapshots__/DeleteUser.test.tsx.snap

@@ -16,3 +16,20 @@ exports[`ChangePassword renders as expected 1`] = `
   </div>
 </div>
 `;
+
+exports[`ChangePassword renders as expected with components overrides 1`] = `
+<div>
+  <div
+    class="amplify-flex"
+    style="flex-direction: column;"
+  >
+    <button
+      class="amplify-button amplify-field-group__control"
+      data-fullwidth="false"
+      type="button"
+    >
+      Custom Delete Button
+    </button>
+  </div>
+</div>
+`;

packages/react/src/components/AccountSettings/DeleteUser/defaultComponents.tsx → packages/react/src/components/AccountSettings/DeleteUser/defaults.tsx

@@ -1,22 +1,15 @@
-import { translate } from '@aws-amplify/ui';
 import React from 'react';
+import { translate } from '@aws-amplify/ui';
 
-import { Card, Flex, Text, Button, Alert } from '../../../primitives';
-import { ErrorComponent, SubmitButtonComponent } from '../types';
-import { DeleteUserWarningProps } from './types';
-
-export const DefaultSubmitButton: SubmitButtonComponent = ({
-  children,
-  ...rest
-}) => {
-  return <Button {...rest}>{children}</Button>;
-};
+import { Button, Card, Flex, Text } from '../../../primitives';
+import { DefaultError } from '../shared/Defaults';
+import { DeleteUserComponents, WarningComponent } from './types';
 
-export const DefaultWarning = ({
+const DefaultWarning: WarningComponent = ({
   onCancel,
   onConfirm,
   isDisabled,
-}: DeleteUserWarningProps): JSX.Element => {
+}) => {
   // translations
   // TODO: consolodiate translations to accountSettingsTextUtil
   const warningText = translate(
@@ -46,10 +39,10 @@ export const DefaultWarning = ({
   );
 };
 
-export const DefaultError: ErrorComponent = ({ children, ...rest }) => {
-  return (
-    <Alert variation="error" {...rest}>
-      {children}
-    </Alert>
-  );
+const DEFAULTS: Required<DeleteUserComponents> = {
+  Error: DefaultError,
+  SubmitButton: Button,
+  Warning: DefaultWarning,
 };
+
+export default DEFAULTS;

packages/react/src/components/AccountSettings/DeleteUser/types.ts

@@ -1,21 +1,35 @@
+import React from 'react';
+
 import { AmplifyUser } from '@aws-amplify/ui';
 
-export interface DeleteUserWarningProps {
+import { ErrorComponent, SubmitButtonComponent } from '../types';
+
+export interface WarningProps {
   /** called when end user cancels account deletion */
-  onCancel?: () => void;
+  onCancel: () => void;
   /** called when user acknowledges account deletion */
-  onConfirm?: () => void;
+  onConfirm: () => void;
   /** whether account deletion is in progress */
-  isDisabled?: boolean;
+  isDisabled: boolean;
 }
 
+export type WarningComponent<Props = {}> = React.ComponentType<
+  Props & WarningProps
+>;
+
 export type DeleteUserState =
   | 'IDLE'
   | 'CONFIRMATION'
   | 'DELETING'
   | 'DONE'
   | 'ERROR';
 
+export interface DeleteUserComponents {
+  Error?: ErrorComponent;
+  SubmitButton?: SubmitButtonComponent;
+  Warning?: WarningComponent;
+}
+
 export interface DeleteUserProps {
   /** custom delete user service override */
   handleDelete?: (user: AmplifyUser) => Promise<void> | void;
@@ -25,4 +39,7 @@ export interface DeleteUserProps {
 
   /** callback for unsuccessful user deletion  */
   onError?: (error: Error) => void;
+
+  /** custom component overrides */
+  components?: DeleteUserComponents;
 }