Merge branch 'dev' into bug/5969-Unable-to-display-custom-error-throw…

…n-from-the-changePassword-action
etn-ccis · Aug 9, 2024 · 57a2749 · 57a2749
2 parents 14cb8d2 + b01d186
commit 57a2749
Show file tree

Hide file tree

Showing 23 changed files with 125 additions and 83 deletions.
diff --git a/login-workflow/example/package.json b/login-workflow/example/package.json
@@ -47,7 +47,7 @@
         "@types/react-dom": "^18.0.0",
         "date-fns": "^3.6.0",
         "i18next": "^23.7.13",
-        "react": "^18.3.1",
+        "react": "^18.2.0",
         "react-app-polyfill": "^3.0.0",
         "react-dom": "^18.0.0",
         "react-i18next": "^13.0.3",

diff --git a/login-workflow/example/yarn.lock b/login-workflow/example/yarn.lock
@@ -9087,7 +9087,7 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^18.3.1:
+react@^18.2.0:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==

diff --git a/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts b/login-workflow/src/components/WorkflowCard/WorkflowCard.types.ts
@@ -123,4 +123,8 @@ export type WorkflowCardProps = {
      * Props for WorkflowCardActions component
      */
     WorkflowCardActionsProps?: WorkflowCardActionsProps;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: BoxProps['sx']; // or SxProps<Theme>
 };
diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreen.tsx
@@ -76,6 +76,7 @@ export const AccountDetailsScreen: React.FC<AccountDetailsScreenProps> = (props)
         lastNameTextFieldProps,
         initialFirstName = screenData.AccountDetails.firstName,
         initialLastName = screenData.AccountDetails.lastName,
+        ...otherProps
     } = props;
 
     const workflowCardHeaderProps = {
@@ -134,6 +135,7 @@ export const AccountDetailsScreen: React.FC<AccountDetailsScreenProps> = (props)
             lastNameValidator={lastNameValidator}
             WorkflowCardActionsProps={workflowCardActionsProps}
             errorDisplayConfig={errorDisplayConfig}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx b/login-workflow/src/screens/AccountDetailsScreen/AccountDetailsScreenBase.tsx
@@ -30,6 +30,7 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
         lastNameValidator = (): void => {},
         lastNameTextFieldProps,
         errorDisplayConfig,
+        ...otherProps
     } = props;
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
@@ -87,7 +88,7 @@ export const AccountDetailsScreenBase: React.FC<AccountDetailsScreenProps> = (pr
     }, []);
 
     return (
-        <WorkflowCard {...cardBaseProps}>
+        <WorkflowCard {...cardBaseProps} {...otherProps}>
             <WorkflowCardHeader {...headerProps} />
             <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>

diff --git a/login-workflow/src/screens/AccountDetailsScreen/types.ts b/login-workflow/src/screens/AccountDetailsScreen/types.ts
@@ -1,57 +1,56 @@
-import { BoxProps, TextFieldProps } from '@mui/material';
+import { TextFieldProps } from '@mui/material';
 import { WorkflowCardProps } from '../../components/WorkflowCard/WorkflowCard.types';
 import { ErrorManagerProps } from '../../components/Error/types';
 
-export type AccountDetailsScreenProps = WorkflowCardProps &
-    BoxProps & {
-        /**
-         * The label for the first name text field
-         */
-        firstNameLabel?: string;
-
-        /**
-         * The initial value for the first name text field
-         */
-        initialFirstName?: string;
-
-        /**
-         * The function that validates the first name text field
-         * @param {string} firstName - validates first name input length
-         * @returns boolean | string
-         */
-        firstNameValidator?: (firstName: string) => boolean | string;
-
-        /**
-         * The props to pass to the first name field.
-         * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details.
-         */
-        firstNameTextFieldProps?: TextFieldProps;
-
-        /**
-         * The label for the last name text field
-         */
-        lastNameLabel?: string;
-
-        /**
-         * The initial value for the last name text field
-         */
-        initialLastName?: string;
-
-        /**
-         * The function that validates the last name text field
-         * @param {string} lastName - validates last name input length
-         * @returns boolean | string
-         */
-        lastNameValidator?: (lastName: string) => boolean | string;
-
-        /**
-         * The props to pass to the last name field.
-         * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details.
-         */
-        lastNameTextFieldProps?: TextFieldProps;
-
-        /**
-         * The configuration for customizing how errors are displayed
-         */
-        errorDisplayConfig?: ErrorManagerProps;
-    };
+export type AccountDetailsScreenProps = WorkflowCardProps & {
+    /**
+     * The label for the first name text field
+     */
+    firstNameLabel?: string;
+
+    /**
+     * The initial value for the first name text field
+     */
+    initialFirstName?: string;
+
+    /**
+     * The function that validates the first name text field
+     * @param {string} firstName - validates first name input length
+     * @returns boolean | string
+     */
+    firstNameValidator?: (firstName: string) => boolean | string;
+
+    /**
+     * The props to pass to the first name field.
+     * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details.
+     */
+    firstNameTextFieldProps?: TextFieldProps;
+
+    /**
+     * The label for the last name text field
+     */
+    lastNameLabel?: string;
+
+    /**
+     * The initial value for the last name text field
+     */
+    initialLastName?: string;
+
+    /**
+     * The function that validates the last name text field
+     * @param {string} lastName - validates last name input length
+     * @returns boolean | string
+     */
+    lastNameValidator?: (lastName: string) => boolean | string;
+
+    /**
+     * The props to pass to the last name field.
+     * See [MUI's TextFieldProps API](https://mui.com/material-ui/api/text-field/) for more details.
+     */
+    lastNameTextFieldProps?: TextFieldProps;
+
+    /**
+     * The configuration for customizing how errors are displayed
+     */
+    errorDisplayConfig?: ErrorManagerProps;
+};
diff --git a/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx b/login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx
@@ -51,6 +51,7 @@ export const ContactSupportScreenBase: React.FC<ContactSupportScreenProps> = (pr
         contactPhone,
         dismissButtonLabel,
         onDismiss,
+        ...otherProps
     } = props;
 
     const defaultClasses = useUtilityClasses(props);
@@ -61,7 +62,12 @@ export const ContactSupportScreenBase: React.FC<ContactSupportScreenProps> = (pr
     const actionsProps = props.WorkflowCardActionsProps || {};
 
     return (
-        <WorkflowCard {...cardBaseProps} className={defaultClasses.root} data-testid={defaultClasses.root}>
+        <WorkflowCard
+            {...cardBaseProps}
+            className={defaultClasses.root}
+            data-testid={defaultClasses.root}
+            {...otherProps}
+        >
             <WorkflowCardHeader {...headerProps} className={defaultClasses.title} data-testid={defaultClasses.title} />
             {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             {icon && (

diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx
@@ -70,6 +70,7 @@ export const CreateAccountScreen: React.FC<CreateAccountScreenProps> = (props) =
             return true;
         },
         emailTextFieldProps,
+        ...otherProps
     } = props;
 
     const workflowCardBaseProps = {
@@ -123,6 +124,7 @@ export const CreateAccountScreen: React.FC<CreateAccountScreenProps> = (props) =
             emailValidator={emailValidator}
             WorkflowCardActionsProps={workflowCardActionsProps}
             errorDisplayConfig={errorDisplayConfig}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx b/login-workflow/src/screens/CreateAccountScreen/CreateAccountScreenBase.tsx
@@ -28,6 +28,7 @@ export const CreateAccountScreenBase: React.FC<
         emailTextFieldProps,
         inputRef,
         errorDisplayConfig,
+        ...otherProps
     } = props;
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
@@ -59,7 +60,7 @@ export const CreateAccountScreenBase: React.FC<
     }, []);
 
     return (
-        <WorkflowCard {...cardBaseProps}>
+        <WorkflowCard {...cardBaseProps} {...otherProps}>
             <WorkflowCardHeader {...headerProps} />
             <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>

diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreen.tsx
@@ -34,6 +34,7 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (props)
         WorkflowCardInstructionProps,
         WorkflowCardActionsProps,
         PasswordProps,
+        ...otherProps
     } = props;
 
     const passwordRef = useRef(null);
@@ -162,6 +163,7 @@ export const CreatePasswordScreen: React.FC<CreatePasswordScreenProps> = (props)
             WorkflowCardInstructionProps={workflowCardInstructionProps}
             PasswordProps={passwordProps}
             errorDisplayConfig={errorDisplayConfig}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx b/login-workflow/src/screens/CreatePasswordScreen/CreatePasswordScreenBase.tsx
@@ -24,10 +24,10 @@ export const CreatePasswordScreenBase: React.FC<React.PropsWithChildren<CreatePa
     const instructionsProps = props.WorkflowCardInstructionProps || {};
     const actionsProps = props.WorkflowCardActionsProps || {};
     const passwordProps = props.PasswordProps || { onPasswordChange: () => ({}) };
-    const { errorDisplayConfig } = props;
+    const { errorDisplayConfig, ...otherProps } = props;
 
     return (
-        <WorkflowCard {...cardBaseProps}>
+        <WorkflowCard {...cardBaseProps} {...otherProps}>
             <WorkflowCardHeader {...headerProps} />
             <WorkflowCardInstructions {...instructionsProps} />
             <WorkflowCardBody>

diff --git a/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx b/login-workflow/src/screens/EulaScreen/EulaScreenBase.tsx
@@ -34,6 +34,7 @@ export const EulaScreenBase: React.FC<EulaScreenProps> = (props) => {
         checkboxProps,
         errorDisplayConfig,
         refreshConfig,
+        ...otherProps
     } = props;
 
     const { t } = useTranslation();
@@ -58,7 +59,7 @@ export const EulaScreenBase: React.FC<EulaScreenProps> = (props) => {
     };
 
     return (
-        <WorkflowCard {...cardBaseProps}>
+        <WorkflowCard {...cardBaseProps} {...otherProps}>
             <WorkflowCardHeader {...headerProps} />
             {Object.keys(instructionsProps).length !== 0 && <WorkflowCardInstructions {...instructionsProps} />}
             <WorkflowCardBody sx={{ pt: 2 }}>

diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreen.tsx
@@ -72,6 +72,7 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
         slots = {},
         slotProps = {},
         emailTextFieldProps,
+        ...otherProps
     } = props;
 
     const workflowCardBaseProps = {
@@ -174,6 +175,7 @@ export const ForgotPasswordScreen: React.FC<ForgotPasswordScreenProps> = (props)
                 },
             }}
             errorDisplayConfig={errorDisplayConfig}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx b/login-workflow/src/screens/ForgotPasswordScreen/ForgotPasswordScreenBase.tsx
@@ -32,6 +32,7 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
         showSuccessScreen,
         errorDisplayConfig,
         emailTextFieldProps,
+        ...otherProps
     } = props;
 
     const cardBaseProps = props.WorkflowCardBaseProps || {};
@@ -73,7 +74,7 @@ export const ForgotPasswordScreenBase: React.FC<React.PropsWithChildren<ForgotPa
             {showSuccessScreen ? (
                 getSuccessScreen(slotProps?.SuccessScreen || {}, slots?.SuccessScreen)
             ) : (
-                <WorkflowCard {...cardBaseProps}>
+                <WorkflowCard {...cardBaseProps} {...otherProps}>
                     <WorkflowCardHeader {...headerProps} />
                     <WorkflowCardInstructions {...instructionsProps} />
                     <WorkflowCardBody>

diff --git a/login-workflow/src/screens/LoginScreen/LoginScreen.tsx b/login-workflow/src/screens/LoginScreen/LoginScreen.tsx
@@ -74,6 +74,7 @@ export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenProps>> =
         projectImage,
         header,
         footer,
+        ...otherProps
     } = props;
 
     return (
@@ -119,6 +120,7 @@ export const LoginScreen: React.FC<React.PropsWithChildren<LoginScreenProps>> =
             projectImage={projectImage}
             header={header}
             footer={footer}
+            {...otherProps}
         />
     );
 };
diff --git a/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreen.test.tsx b/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreen.test.tsx
@@ -17,7 +17,6 @@ describe('OktaLoginScreen', () => {
     const mockSignInWithRedirect = jest.fn();
     const mockTriggerError = jest.fn();
     const mockNavigate = jest.fn();
-    const mockOnLogin = jest.fn();
 
     beforeEach(() => {
         (useOktaAuth as jest.Mock).mockReturnValue({
@@ -51,18 +50,6 @@ describe('OktaLoginScreen', () => {
         expect(screen.getByRole('button', { name: 'bluiCommon:ACTIONS.OKTA_LOG_IN' })).toBeInTheDocument();
     });
 
-    it('handles login correctly', async () => {
-        renderer({ onLogin: mockOnLogin });
-        const loginButton = screen.getByRole('button', { name: 'bluiCommon:ACTIONS.OKTA_LOG_IN' });
-
-        act(() => {
-            fireEvent.click(loginButton);
-        });
-
-        await waitFor(() => expect(mockSignInWithRedirect).toHaveBeenCalled());
-        await waitFor(() => expect(mockOnLogin).toHaveBeenCalled());
-    });
-
     it('handles login error correctly', async () => {
         mockSignInWithRedirect.mockRejectedValueOnce(new Error('Login error'));
         renderer();

diff --git a/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreen.tsx b/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreen.tsx
@@ -45,6 +45,7 @@ export const OktaLoginScreen: React.FC<OktaLoginScreenProps> = (props) => {
         projectImage,
         header,
         footer,
+        ...otherProps
     } = props;
 
     useEffect(() => {
@@ -83,6 +84,7 @@ export const OktaLoginScreen: React.FC<OktaLoginScreenProps> = (props) => {
             projectImage={projectImage}
             header={header}
             footer={footer}
+            {...otherProps}
         />
     );
 };