Merge pull request #619 from etn-ccis/bug/5975-Fix-React-workflow-issue

SX Style overrides do not work on full screens
etn-ccis · Aug 9, 2024 · b01d186 · b01d186
2 parents 26048c4 + cdeead7
commit b01d186
Show file tree

Hide file tree

Showing 23 changed files with 141 additions and 85 deletions.
diff --git a/login-workflow/example/package.json b/login-workflow/example/package.json
@@ -43,11 +43,11 @@
         "@okta/okta-auth-js": "^7.7.0",
         "@okta/okta-react": "^6.9.0",
         "@types/node": "^17.0.23",
-        "@types/react": "^18.3.3",
+        "@types/react": "18.2.39",
         "@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
@@ -2713,14 +2713,23 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.3.3":
+"@types/react@*":
   version "18.3.3"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
   integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/[email protected]":
+  version "18.2.39"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.39.tgz#744bee99e053ad61fe74eb8b897f3ab5b19a7e25"
+  integrity sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/[email protected]":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -2733,6 +2742,11 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/scheduler@*":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.23.0.tgz#0a6655b3e2708eaabca00b7372fafd7a792a7b09"
+  integrity sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==
+
 "@types/semver@^7.3.12", "@types/semver@^7.3.13":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
@@ -9073,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();