From 6c4f9364eefda801fb0aebd9d9373b9a2148794c Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Wed, 16 Sep 2020 15:35:02 -0700
Subject: [PATCH 1/3] kick back to login page if config gets 401 response

---
 .../components/AppContainer/AppContainer.jsx   | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.jsx
index 7250bb4352..88d92d4e4e 100644
--- a/awx/ui_next/src/components/AppContainer/AppContainer.jsx
+++ b/awx/ui_next/src/components/AppContainer/AppContainer.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { useHistory, useLocation, withRouter } from 'react-router-dom';
 import {
   Nav,
@@ -40,15 +40,16 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
   const [config, setConfig] = useState({});
   const [configError, setConfigError] = useState(null);
   const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
+  const [isReady, setIsReady] = useState(false);
 
   const handleAboutModalOpen = () => setIsAboutModalOpen(true);
   const handleAboutModalClose = () => setIsAboutModalOpen(false);
   const handleConfigErrorClose = () => setConfigError(null);
 
-  const handleLogout = async () => {
+  const handleLogout = useCallback(async () => {
     await RootAPI.logout();
     history.replace('/login');
-  };
+  }, [history]);
 
   useEffect(() => {
     const loadConfig = async () => {
@@ -63,12 +64,21 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
           },
         ] = await Promise.all([ConfigAPI.read(), MeAPI.read()]);
         setConfig({ ...data, me });
+        setIsReady(true);
       } catch (err) {
+        if (err.response.status === 401) {
+          handleLogout();
+          return;
+        }
         setConfigError(err);
       }
     };
     loadConfig();
-  }, [config, pathname]);
+  }, [config, pathname, handleLogout]);
+
+  if (!isReady) {
+    return null;
+  }
 
   const header = (
     <PageHeader

From cde8cb57da3bb1a02b9f3f0102fc9bcc562ad306 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 17 Sep 2020 12:31:13 -0700
Subject: [PATCH 2/3] allow app skeleton to display while config is loading

---
 awx/ui_next/src/components/AppContainer/AppContainer.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.jsx
index 88d92d4e4e..1d968906d8 100644
--- a/awx/ui_next/src/components/AppContainer/AppContainer.jsx
+++ b/awx/ui_next/src/components/AppContainer/AppContainer.jsx
@@ -76,10 +76,6 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
     loadConfig();
   }, [config, pathname, handleLogout]);
 
-  if (!isReady) {
-    return null;
-  }
-
   const header = (
     <PageHeader
       showNavToggle
@@ -119,7 +115,7 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
   return (
     <>
       <Page isManagedSidebar header={header} sidebar={sidebar}>
-        <ConfigProvider value={config}>{children}</ConfigProvider>
+        {isReady && <ConfigProvider value={config}>{children}</ConfigProvider>}
       </Page>
       <About
         ansible_version={config?.ansible_version}

From 43d339d1cdb9fda88fbb3990bcf261485956b738 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 17 Sep 2020 13:46:43 -0700
Subject: [PATCH 3/3] fix test

---
 awx/ui_next/src/components/AppContainer/AppContainer.test.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.test.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.test.jsx
index 93a7bb5963..bdb67db490 100644
--- a/awx/ui_next/src/components/AppContainer/AppContainer.test.jsx
+++ b/awx/ui_next/src/components/AppContainer/AppContainer.test.jsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-
 import {
   mountWithContexts,
   waitForElement,
 } from '../../../testUtils/enzymeHelpers';
 import { ConfigAPI, MeAPI, RootAPI } from '../../api';
-
 import AppContainer from './AppContainer';
 
 jest.mock('../../api');
@@ -58,6 +56,7 @@ describe('<AppContainer />', () => {
         </AppContainer>
       );
     });
+    wrapper.update();
 
     // page components
     expect(wrapper.length).toBe(1);