From 236e03e316a9b5e40f88235b75735bd4c7827481 Mon Sep 17 00:00:00 2001
From: Suraj Karambe <surajakarambe@eaton.com>
Date: Fri, 26 Jul 2024 18:24:14 +0530
Subject: [PATCH] Added onLogin prop to okta login screen

---
 .../OktaLoginScreenBase.test.tsx               | 11 ++---------
 .../OktaLoginScreen/OktaLoginScreenBase.tsx    | 18 +++---------------
 .../src/screens/OktaLoginScreen/types.ts       |  6 ++++++
 3 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreenBase.test.tsx b/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreenBase.test.tsx
index 1d0f7f3b..e5c64caf 100644
--- a/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreenBase.test.tsx
+++ b/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreenBase.test.tsx
@@ -4,9 +4,7 @@ import '@testing-library/jest-dom';
 import { OktaLoginScreenBase } from './OktaLoginScreenBase';
 import { useOktaAuth } from '@okta/okta-react';
 import { Box } from '@mui/material';
-import { ErrorContextProvider } from '../../contexts/ErrorContext';
 import { OktaLoginScreenProps } from './types';
-import { errorContextProviderProps } from '../../contexts/ErrorContext/ErrorContextProvider.test';
 
 jest.mock('@okta/okta-react', () => ({
     useOktaAuth: jest.fn(),
@@ -26,12 +24,7 @@ describe('OktaLoginScreenBase', () => {
         });
     });
 
-    const renderer = (props?: OktaLoginScreenProps): RenderResult =>
-        render(
-            <ErrorContextProvider {...errorContextProviderProps}>
-                <OktaLoginScreenBase {...props} />
-            </ErrorContextProvider>
-        );
+    const renderer = (props?: OktaLoginScreenProps): RenderResult => render(<OktaLoginScreenBase {...props} />);
 
     it('renders correctly', () => {
         renderer({ header: <Box data-testid="test-header">Test Header</Box> });
@@ -39,7 +32,7 @@ describe('OktaLoginScreenBase', () => {
     });
 
     it('calls signInWithRedirect on login button click', () => {
-        renderer({ loginButtonLabel: 'Login' });
+        renderer({ loginButtonLabel: 'Login', onLogin: mockSignInWithRedirect });
         const loginButton = screen.getByText('Login');
         fireEvent.click(loginButton);
         expect(mockSignInWithRedirect).toHaveBeenCalled();
diff --git a/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreenBase.tsx b/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreenBase.tsx
index 024b9a4d..6693440d 100644
--- a/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreenBase.tsx
+++ b/login-workflow/src/screens/OktaLoginScreen/OktaLoginScreenBase.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useOktaAuth } from '@okta/okta-react';
 import { OktaLoginScreenProps } from './types';
 import { WorkflowCard } from '../../components/WorkflowCard';
 import { WorkflowCardBody } from '../../components/WorkflowCard/WorkflowCardBody';
@@ -7,7 +6,6 @@ import { Box, Button, Typography } from '@mui/material';
 import ErrorManager from '../../components/Error/ErrorManager';
 import { LinkStyles } from '../../styles';
 import cyberSecurityBadge from '../../assets/images/cybersecurity_certified.png';
-import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { getOktaLoginScreenUtilityClass, OktaLoginScreenClassKey } from './utilityClasses';
 
@@ -36,8 +34,6 @@ const useUtilityClasses = (ownerState: OktaLoginScreenProps): Record<OktaLoginSc
  */
 
 export const OktaLoginScreenBase: React.FC<OktaLoginScreenProps> = (props) => {
-    const { authState, oktaAuth } = useOktaAuth();
-    const { triggerError } = useErrorManager();
     const defaultClasses = useUtilityClasses(props);
 
     const {
@@ -45,6 +41,7 @@ export const OktaLoginScreenBase: React.FC<OktaLoginScreenProps> = (props) => {
         projectImage,
         errorDisplayConfig,
         loginButtonLabel,
+        onLogin,
         showContactSupport,
         showCyberSecurityBadge,
         contactSupportLabel,
@@ -54,11 +51,7 @@ export const OktaLoginScreenBase: React.FC<OktaLoginScreenProps> = (props) => {
     } = props;
 
     const handleOnLogin = async (): Promise<void> => {
-        try {
-            await oktaAuth.signInWithRedirect();
-        } catch (_error) {
-            triggerError(_error as Error);
-        }
+        if (onLogin) await onLogin();
     };
 
     const handleContactSupport = (): void => {
@@ -66,12 +59,7 @@ export const OktaLoginScreenBase: React.FC<OktaLoginScreenProps> = (props) => {
     };
 
     return (
-        <WorkflowCard
-            loading={!authState}
-            className={defaultClasses.root}
-            data-testid={defaultClasses.root}
-            {...otherProps}
-        >
+        <WorkflowCard className={defaultClasses.root} data-testid={defaultClasses.root} {...otherProps}>
             <WorkflowCardBody
                 sx={{
                     py: { xs: 4, sm: 4, md: 4 },
diff --git a/login-workflow/src/screens/OktaLoginScreen/types.ts b/login-workflow/src/screens/OktaLoginScreen/types.ts
index db97e18d..4922ca6b 100644
--- a/login-workflow/src/screens/OktaLoginScreen/types.ts
+++ b/login-workflow/src/screens/OktaLoginScreen/types.ts
@@ -13,6 +13,12 @@ export type OktaLoginScreenProps = WorkflowCardBaseProps & {
      */
     loginButtonLabel?: string;
 
+    /**
+     * Callback function that is called when the login button is clicked
+     * @returns Promise<void> | void
+     */
+    onLogin?: () => Promise<void> | void;
+
     /**
      * whether or not to show the 'contact support' link
      */