From 5642b55943ecedcafebb7d3177026ac7f8282e9c Mon Sep 17 00:00:00 2001
From: "denys.oblohin" <denys.oblohin@okta.om>
Date: Tue, 27 Jul 2021 14:50:50 +0000
Subject: [PATCH] Rename loadingComponent -> loadingElement

OKTA-415463
<<<Jenkins Check-In of Tested SHA: 0a1fa360de29c051b37b0669b172e8af7a5ceefd for eng_productivity_ci_bot_okta@okta.com>>>
Artifact: okta-react
Files changed count: 6
PR Link: "https://github.com/okta/okta-react/pull/153"
---
 CHANGELOG.md                                   |  2 +-
 README.md                                      |  4 ++++
 src/LoginCallback.tsx                          |  6 +++---
 .../e2e/page-objects/login-callback.po.js      |  4 ++--
 test/e2e/harness/src/App.tsx                   |  2 +-
 test/jest/loginCallback.test.tsx               | 18 +++++++++---------
 6 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd8fb90a..a95a8346 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ### Features
 
-- [#67](https://github.com/okta/okta-react/pull/67) Adds `loadingComponent` prop to `LoginCallback` component
+- [#67](https://github.com/okta/okta-react/pull/67) Adds `loadingElement` prop to `LoginCallback` component
 
 ### Bug Fixes
 
diff --git a/README.md b/README.md
index f876e554..7c4c9001 100644
--- a/README.md
+++ b/README.md
@@ -484,6 +484,10 @@ As with `Route` from `react-router-dom`, `<SecureRoute>` can take one of:
 
 By default, LoginCallback will display any errors from `authState.error`.  If you wish to customise the display of such error messages, you can pass your own component as an `errorComponent` prop to `<LoginCallback>`.  The `authState.error` value will be passed to the `errorComponent` as the `error` prop.
 
+#### loadingElement
+
+By default, LoginCallback will display nothing during handling the callback. If you wish to customize this, you can pass your React element (not component) as `loadingElement` prop to `<LoginCallback>`. Example: `<p>Loading...</p>`
+
 #### onAuthResume
 
 When an external auth (such as a social IDP) redirects back to your application AND your Okta sign-in policies require additional authentication factors before authentication is complete, the redirect to your application redirectUri callback will be an `interaction_required` error.  
diff --git a/src/LoginCallback.tsx b/src/LoginCallback.tsx
index 30f3da3d..029404ab 100644
--- a/src/LoginCallback.tsx
+++ b/src/LoginCallback.tsx
@@ -17,10 +17,10 @@ import OktaError from './OktaError';
 interface LoginCallbackProps {
   errorComponent?: React.ComponentType<{ error: Error }>;
   onAuthResume?: OnAuthResumeFunction;
-  loadingComponent?: React.ReactElement;
+  loadingElement?: React.ReactElement;
 }
 
-const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingComponent = null, onAuthResume }) => { 
+const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingElement = null, onAuthResume }) => { 
   const { oktaAuth, authState } = useOktaAuth();
   const [callbackError, setCallbackError] = React.useState(null);
 
@@ -45,7 +45,7 @@ const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingCo
     return <ErrorReporter error={displayError}/>;
   }
 
-  return loadingComponent;
+  return loadingElement;
 };
 
 export default LoginCallback;
diff --git a/test/e2e/harness/e2e/page-objects/login-callback.po.js b/test/e2e/harness/e2e/page-objects/login-callback.po.js
index 117d5175..e73faddd 100644
--- a/test/e2e/harness/e2e/page-objects/login-callback.po.js
+++ b/test/e2e/harness/e2e/page-objects/login-callback.po.js
@@ -15,10 +15,10 @@ import { Util } from '../util';
 
 export class LoginCallbackPage {
     waitUntilVisible() {
-      Util.waitElement(this.loadingComponent());
+      Util.waitElement(this.loadingElement());
     }
 
-    loadingComponent() {
+    loadingElement() {
       return element(by.id('login-callback-loading'));
     }
 
diff --git a/test/e2e/harness/src/App.tsx b/test/e2e/harness/src/App.tsx
index 1c5cc5f2..54a92e4f 100644
--- a/test/e2e/harness/src/App.tsx
+++ b/test/e2e/harness/src/App.tsx
@@ -58,7 +58,7 @@ const App: React.FC<{
             <LoginCallback 
               {...props} 
               onAuthResume={ onAuthResume } 
-              loadingComponent={ <p id='login-callback-loading'>Loading...</p> }
+              loadingElement={ <p id='login-callback-loading'>Loading...</p> }
             />
           } />
           <Route path='/' component={Home} />
diff --git a/test/jest/loginCallback.test.tsx b/test/jest/loginCallback.test.tsx
index 7a80d622..86a93031 100644
--- a/test/jest/loginCallback.test.tsx
+++ b/test/jest/loginCallback.test.tsx
@@ -185,41 +185,41 @@ describe('<LoginCallback />', () => {
       expect(wrapper.text()).toBe('');
     });
 
-    it('custom loading component can be passed to render during loading', () => {
-      const MyLoadingComponent = (<p>loading...</p>);
+    it('custom loading element can be passed to render during loading', () => {
+      const MyLoadingElement = (<p>loading...</p>);
 
       const wrapper = mount(
         <Security {...mockProps}>
-          <LoginCallback loadingComponent={MyLoadingComponent}/>
+          <LoginCallback loadingElement={MyLoadingElement}/>
         </Security>
       );
       expect(wrapper.text()).toBe('loading...');
     });
 
-    it('does not render loading component on error', () => {
+    it('does not render loading element on error', () => {
       authState = {
         isAuthenticated: true,
         error: new Error('oh drat!')
       };
-      const MyLoadingComponent = (<p>loading...</p>);
+      const MyLoadingElement = (<p>loading...</p>);
 
       const wrapper = mount(
         <Security {...mockProps}>
-          <LoginCallback loadingComponent={MyLoadingComponent}/>
+          <LoginCallback loadingElement={MyLoadingElement}/>
         </Security>
       );
       expect(wrapper.text()).toBe('Error: oh drat!');
     });
 
-    it('renders loading component if onAuthResume is passed', async () => { 
+    it('renders loading element if onAuthResume is passed', async () => { 
       oktaAuth.isInteractionRequired = jest.fn().mockImplementation( () => true );
       const resumeFunction = jest.fn();
-      const MyLoadingComponent = (<p>loading...</p>);
+      const MyLoadingElement = (<p>loading...</p>);
       jest.spyOn(React, 'useEffect').mockImplementation(f => f())
 
       const wrapper = mount(
         <Security {...mockProps}>
-          <LoginCallback onAuthResume={resumeFunction} loadingComponent={MyLoadingComponent}/>
+          <LoginCallback onAuthResume={resumeFunction} loadingElement={MyLoadingElement}/>
         </Security>
       );
       expect(resumeFunction).toHaveBeenCalled();