From a19b1178349acf89994c518ac8a13682cda80d42 Mon Sep 17 00:00:00 2001
From: Caleb Pollman <cpollman@amazon.com>
Date: Mon, 5 Dec 2022 10:24:10 -0800
Subject: [PATCH] chore(AccountSettings): update subcomponent names and types
 (#3134)

* chore(AccountSettings): update subcomponent names and types

* Update packages/react/src/components/AccountSettings/types.ts

Co-authored-by: William Lee <43682783+wlee221@users.noreply.github.com>

Co-authored-by: William Lee <43682783+wlee221@users.noreply.github.com>
---
 .../ChangePassword/ChangePassword.tsx         | 22 +++++++++----------
 .../__tests__/ChangePassword.test.tsx         | 12 +++++-----
 .../ChangePassword/defaults.tsx               | 12 +++++-----
 .../AccountSettings/ChangePassword/types.ts   | 15 +++++++------
 .../AccountSettings/DeleteUser/DeleteUser.tsx |  6 ++---
 .../DeleteUser/__tests__/DeleteUser.test.tsx  |  4 ++--
 .../AccountSettings/DeleteUser/defaults.tsx   |  6 ++---
 .../AccountSettings/DeleteUser/types.ts       |  8 +++----
 .../src/components/AccountSettings/types.ts   | 14 +++++++-----
 9 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx b/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx
index 10e61924827..ea2d18c8342 100644
--- a/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx
+++ b/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx
@@ -122,9 +122,9 @@ function ChangePassword({
 
   /* Subcomponents */
   const {
-    CurrentPassword,
-    NewPassword,
-    ConfirmPassword,
+    CurrentPasswordField,
+    NewPasswordField,
+    ConfirmPasswordField,
     SubmitButton,
     ErrorMessage,
   } = React.useMemo(
@@ -192,7 +192,7 @@ function ChangePassword({
       onSubmit={handleSubmit}
     >
       <Flex direction="column">
-        <CurrentPassword
+        <CurrentPasswordField
           autoComplete="current-password"
           isRequired
           label={currentPasswordLabel}
@@ -200,23 +200,23 @@ function ChangePassword({
           onBlur={handleBlur}
           onChange={handleChange}
         />
-        <NewPassword
+        <NewPasswordField
           autoComplete="new-password"
+          fieldValidationErrors={validationError?.newPassword}
           isRequired
           label={newPasswordLabel}
           name="newPassword"
           onBlur={handleBlur}
           onChange={handleChange}
-          validationErrors={validationError?.newPassword}
         />
-        <ConfirmPassword
+        <ConfirmPasswordField
           autoComplete="new-password"
+          fieldValidationErrors={validationError?.confirmPassword}
           isRequired
           label={confirmPasswordLabel}
           name="confirmPassword"
           onBlur={handleBlur}
           onChange={handleChange}
-          validationErrors={validationError?.confirmPassword}
         />
         <SubmitButton isDisabled={isDisabled} type="submit">
           {updatePasswordText}
@@ -227,9 +227,9 @@ function ChangePassword({
   );
 }
 
-ChangePassword.CurrentPassword = DEFAULTS.CurrentPassword;
-ChangePassword.NewPassword = DEFAULTS.NewPassword;
-ChangePassword.ConfirmPassword = DEFAULTS.ConfirmPassword;
+ChangePassword.CurrentPasswordField = DEFAULTS.CurrentPasswordField;
+ChangePassword.NewPasswordField = DEFAULTS.NewPasswordField;
+ChangePassword.ConfirmPasswordField = DEFAULTS.ConfirmPasswordField;
 ChangePassword.SubmitButton = DEFAULTS.SubmitButton;
 ChangePassword.ErrorMessage = DEFAULTS.ErrorMessage;
 
diff --git a/packages/react/src/components/AccountSettings/ChangePassword/__tests__/ChangePassword.test.tsx b/packages/react/src/components/AccountSettings/ChangePassword/__tests__/ChangePassword.test.tsx
index 7075f7aa5af..bd13b0dd0bc 100644
--- a/packages/react/src/components/AccountSettings/ChangePassword/__tests__/ChangePassword.test.tsx
+++ b/packages/react/src/components/AccountSettings/ChangePassword/__tests__/ChangePassword.test.tsx
@@ -9,17 +9,17 @@ import { ChangePasswordComponents } from '../types';
 import { ComponentClassName } from '../../constants';
 
 const components: ChangePasswordComponents = {
-  CurrentPassword: (props) => (
-    <ChangePassword.CurrentPassword
+  CurrentPasswordField: (props) => (
+    <ChangePassword.CurrentPasswordField
       {...props}
       label="Custom Current Password"
     />
   ),
-  NewPassword: (props) => (
-    <ChangePassword.NewPassword {...props} label="Custom New Password" />
+  NewPasswordField: (props) => (
+    <ChangePassword.NewPasswordField {...props} label="Custom New Password" />
   ),
-  ConfirmPassword: (props) => (
-    <ChangePassword.ConfirmPassword
+  ConfirmPasswordField: (props) => (
+    <ChangePassword.ConfirmPasswordField
       {...props}
       label="Custom Confirm Password"
     />
diff --git a/packages/react/src/components/AccountSettings/ChangePassword/defaults.tsx b/packages/react/src/components/AccountSettings/ChangePassword/defaults.tsx
index 7ee0ba56324..e4caec90334 100644
--- a/packages/react/src/components/AccountSettings/ChangePassword/defaults.tsx
+++ b/packages/react/src/components/AccountSettings/ChangePassword/defaults.tsx
@@ -6,22 +6,22 @@ import { PasswordFieldComponent } from '../types';
 import { ChangePasswordComponents } from './types';
 
 const DefaultPasswordField: PasswordFieldComponent = ({
+  fieldValidationErrors,
   label,
-  validationErrors,
   ...rest
 }) => {
   return (
     <>
-      <PasswordField label={label} {...rest} />
-      <ValidationErrors errors={validationErrors} />
+      <PasswordField {...rest} label={label} />
+      <ValidationErrors errors={fieldValidationErrors} />
     </>
   );
 };
 
 const DEFAULTS: Required<ChangePasswordComponents> = {
-  CurrentPassword: DefaultPasswordField,
-  NewPassword: DefaultPasswordField,
-  ConfirmPassword: DefaultPasswordField,
+  CurrentPasswordField: DefaultPasswordField,
+  NewPasswordField: DefaultPasswordField,
+  ConfirmPasswordField: DefaultPasswordField,
   SubmitButton: Button,
   ErrorMessage: DefaultErrorMessage,
 };
diff --git a/packages/react/src/components/AccountSettings/ChangePassword/types.ts b/packages/react/src/components/AccountSettings/ChangePassword/types.ts
index a646bceda6c..848d300537d 100644
--- a/packages/react/src/components/AccountSettings/ChangePassword/types.ts
+++ b/packages/react/src/components/AccountSettings/ChangePassword/types.ts
@@ -1,23 +1,24 @@
 import { InputEventType, ValidatorOptions } from '@aws-amplify/ui';
 import {
+  SubmitButtonComponent,
   ErrorMessageComponent,
   PasswordFieldComponent,
-  SubmitButtonComponent,
   FormValues,
 } from '../types';
 
 export interface ChangePasswordComponents {
-  CurrentPassword?: PasswordFieldComponent;
-  NewPassword?: PasswordFieldComponent;
-  ConfirmPassword?: PasswordFieldComponent;
-  SubmitButton?: SubmitButtonComponent;
+  ConfirmPasswordField?: PasswordFieldComponent;
+  CurrentPasswordField?: PasswordFieldComponent;
   ErrorMessage?: ErrorMessageComponent;
+  NewPasswordField?: PasswordFieldComponent;
+  SubmitButton?: SubmitButtonComponent;
 }
 
-export type ValidateParams = {
+export interface ValidateParams {
   formValues: FormValues;
   eventType: InputEventType;
-};
+}
+
 export interface ChangePasswordProps {
   /** callback once password is successfully updated */
   onSuccess?: () => void;
diff --git a/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx b/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx
index df39972ce2d..ee4aa90323c 100644
--- a/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx
+++ b/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx
@@ -25,7 +25,7 @@ function DeleteUser({
   const { user, isLoading } = useAuth();
 
   // subcomponents
-  const { ErrorMessage, DeleteButton, Warning } = React.useMemo(
+  const { ErrorMessage, DeleteButton, WarningView } = React.useMemo(
     () => ({ ...DEFAULTS, ...(components ?? {}) }),
     [components]
   );
@@ -96,7 +96,7 @@ function DeleteUser({
         {deleteAccountText}
       </DeleteButton>
       {state === 'CONFIRMATION' || state === 'DELETING' ? (
-        <Warning
+        <WarningView
           onCancel={handleCancel}
           isDisabled={state === 'DELETING'}
           onConfirm={handleConfirmDelete}
@@ -109,6 +109,6 @@ function DeleteUser({
 
 DeleteUser.ErrorMessage = DEFAULTS.ErrorMessage;
 DeleteUser.DeleteButton = DEFAULTS.DeleteButton;
-DeleteUser.Warning = DEFAULTS.Warning;
+DeleteUser.WarningView = DEFAULTS.WarningView;
 
 export default DeleteUser;
diff --git a/packages/react/src/components/AccountSettings/DeleteUser/__tests__/DeleteUser.test.tsx b/packages/react/src/components/AccountSettings/DeleteUser/__tests__/DeleteUser.test.tsx
index 1e41577273b..0eef76ae9e7 100644
--- a/packages/react/src/components/AccountSettings/DeleteUser/__tests__/DeleteUser.test.tsx
+++ b/packages/react/src/components/AccountSettings/DeleteUser/__tests__/DeleteUser.test.tsx
@@ -18,7 +18,7 @@ jest.mock('../../../../internal', () => ({
 
 const deleteUserSpy = jest.spyOn(UIModule, 'deleteUser');
 
-function CustomWarning({ onCancel, onConfirm }) {
+function CustomWarningView({ onCancel, onConfirm }) {
   return (
     <Flex direction="column">
       <Text variation="warning">Custom Warning Message</Text>
@@ -47,7 +47,7 @@ const CustomErrorMessage = ({ children }) => (
 
 const components: DeleteUserComponents = {
   DeleteButton: CustomDeleteButton,
-  Warning: CustomWarning,
+  WarningView: CustomWarningView,
   ErrorMessage: CustomErrorMessage,
 };
 
diff --git a/packages/react/src/components/AccountSettings/DeleteUser/defaults.tsx b/packages/react/src/components/AccountSettings/DeleteUser/defaults.tsx
index 987332ca898..63599568bb9 100644
--- a/packages/react/src/components/AccountSettings/DeleteUser/defaults.tsx
+++ b/packages/react/src/components/AccountSettings/DeleteUser/defaults.tsx
@@ -3,9 +3,9 @@ import { translate } from '@aws-amplify/ui';
 
 import { Button, Card, Flex, Text } from '../../../primitives';
 import { DefaultErrorMessage } from '../shared/Defaults';
-import { DeleteUserComponents, WarningComponent } from './types';
+import { DeleteUserComponents, WarningViewComponent } from './types';
 
-const DefaultWarning: WarningComponent = ({
+const DefaultWarningView: WarningViewComponent = ({
   onCancel,
   onConfirm,
   isDisabled,
@@ -42,7 +42,7 @@ const DefaultWarning: WarningComponent = ({
 const DEFAULTS: Required<DeleteUserComponents> = {
   ErrorMessage: DefaultErrorMessage,
   DeleteButton: Button,
-  Warning: DefaultWarning,
+  WarningView: DefaultWarningView,
 };
 
 export default DEFAULTS;
diff --git a/packages/react/src/components/AccountSettings/DeleteUser/types.ts b/packages/react/src/components/AccountSettings/DeleteUser/types.ts
index 729accedf9e..63acba1fb1e 100644
--- a/packages/react/src/components/AccountSettings/DeleteUser/types.ts
+++ b/packages/react/src/components/AccountSettings/DeleteUser/types.ts
@@ -4,7 +4,7 @@ import { AmplifyUser } from '@aws-amplify/ui';
 
 import { ButtonComponent, ErrorMessageComponent } from '../types';
 
-export interface WarningProps {
+export interface WarningViewProps {
   /** called when end user cancels account deletion */
   onCancel: () => void;
   /** called when user acknowledges account deletion */
@@ -13,8 +13,8 @@ export interface WarningProps {
   isDisabled: boolean;
 }
 
-export type WarningComponent<Props = {}> = React.ComponentType<
-  Props & WarningProps
+export type WarningViewComponent<Props = {}> = React.ComponentType<
+  Props & WarningViewProps
 >;
 
 export type DeleteUserState =
@@ -27,7 +27,7 @@ export type DeleteUserState =
 export interface DeleteUserComponents {
   ErrorMessage?: ErrorMessageComponent;
   DeleteButton?: ButtonComponent;
-  Warning?: WarningComponent;
+  WarningView?: WarningViewComponent;
 }
 
 export interface DeleteUserProps {
diff --git a/packages/react/src/components/AccountSettings/types.ts b/packages/react/src/components/AccountSettings/types.ts
index 0166709dbf2..60f7f725f1c 100644
--- a/packages/react/src/components/AccountSettings/types.ts
+++ b/packages/react/src/components/AccountSettings/types.ts
@@ -21,10 +21,14 @@ type AlertPrimitiveProps = PrimitiveProps<AlertProps, 'div'>;
  * Any essential props for overriding components are marked as required.
  */
 type CommonPasswordFieldProps = Partial<PasswordFieldPrimitiveProps> &
-  Required<Pick<PasswordFieldPrimitiveProps, 'onBlur' | 'onChange' | 'name'>>;
+  Required<
+    Pick<PasswordFieldPrimitiveProps, 'onBlur' | 'onChange' | 'name'>
+  > & { fieldValidationErrors?: string[] };
+
 type CommonAlertProps = Partial<PrimitiveProps<AlertProps, 'div'>> &
   Required<Pick<AlertPrimitiveProps, 'children'>>;
-type CommonButtonProps<T = 'submit' | 'default'> =
+
+type CommonButtonProps<T extends 'submit' | 'default' = 'default'> =
   Partial<ButtonPrimitiveProps> &
     Required<
       Pick<
@@ -35,14 +39,14 @@ type CommonButtonProps<T = 'submit' | 'default'> =
 
 /*
  * These are component override types.
+ * Usage of `Props` generic allows additional props passed on override components
  */
 export type PasswordFieldComponent<Props = {}> = React.ComponentType<
-  // `Props` generic allows additional props passed on override components
-  Props & CommonPasswordFieldProps & { validationErrors?: string[] }
+  Props & CommonPasswordFieldProps
 >;
 
 export type ButtonComponent<Props = {}> = React.ComponentType<
-  Props & CommonButtonProps<'default'>
+  Props & CommonButtonProps
 >;
 
 export type SubmitButtonComponent<Props = {}> = React.ComponentType<