Merge pull request #8168 from keithjgrant/3321-session-management

Logout session if config returns 401

Reviewed-by: John Hill <johill@redhat.com>
             https://github.com/unlikelyzero

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,17 @@ 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]);
 
   const header = (
     <PageHeader
@@ -109,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}

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);