some fixes for the error page when backend is down w/ burnettk

spiffworkflow-frontend/src/App.tsx

@@ -3,16 +3,10 @@ import { defineAbility } from '@casl/ability';
 import React from 'react';
 
 import { AbilityContext } from './contexts/Can';
-import UserService from './services/UserService';
 import APIErrorProvider from './contexts/APIErrorContext';
 import ContainerForExtensions from './ContainerForExtensions';
 
 export default function App() {
-  if (!UserService.isLoggedIn()) {
-    UserService.doLogin();
-    return null;
-  }
-
   const ability = defineAbility(() => {});
   return (
     <div className="cds--white">

spiffworkflow-frontend/src/ContainerForExtensions.tsx

@@ -18,6 +18,7 @@ import HttpService from './services/HttpService';
 import { ErrorBoundaryFallback } from './ErrorBoundaryFallack';
 import BaseRoutes from './routes/BaseRoutes';
 import BackendIsDown from './routes/BackendIsDown';
+import UserService from './services/UserService';
 
 export default function ContainerForExtensions() {
   const [backendIsUp, setBackendIsUp] = useState<boolean | null>(null);
@@ -93,6 +94,7 @@ export default function ContainerForExtensions() {
   ]);
 
   const routeComponents = () => {
+    UserService.loginIfNeeded();
     return (
       <Routes>
         <Route

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -27,7 +27,6 @@ import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import { PermissionsToCheck } from '../interfaces';
 import { UiSchemaUxElement } from '../extension_ui_schema_interfaces';
 import { usePermissionFetcher } from '../hooks/PermissionService';
-import { UnauthenticatedError } from '../services/HttpService';
 import { DOCUMENTATION_URL, SPIFF_ENVIRONMENT } from '../config';
 import appVersionInfo from '../helpers/appVersionInfo';
 import { slugifyString } from '../helpers';
@@ -50,11 +49,6 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
   const [activeKey, setActiveKey] = useState<string>('');
 
   const { targetUris } = useUriListForPermissions();
-
-  // App.jsx forces login (which redirects to keycloak) so we should never get here if we're not logged in.
-  if (!UserService.isLoggedIn()) {
-    throw new UnauthenticatedError('You must be authenticated to do this.');
-  }
   const permissionRequestData: PermissionsToCheck = {
     [targetUris.authenticationListPath]: ['GET'],
     [targetUris.messageInstanceListPath]: ['GET'],
@@ -99,12 +93,6 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
     return activeKey === menuItemPath;
   };
 
-  let aboutLinkElement = null;
-
-  if (Object.keys(versionInfo).length) {
-    aboutLinkElement = <a href="/about">About</a>;
-  }
-
   const userEmail = UserService.getUserEmail();
   const username = UserService.getPreferredUsername();
 
@@ -113,7 +101,14 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
     return <a href={navItemPage}>{uxElement.label}</a>;
   };
 
-  const profileToggletip = (
+  const profileToggletip = () => {
+    let aboutLinkElement = null;
+
+    if (Object.keys(versionInfo).length) {
+      aboutLinkElement = <a href="/about">About</a>;
+    }
+
+    return (
       <div style={{ display: 'flex' }} id="user-profile-toggletip">
         <Toggletip isTabTip align="bottom-right">
           <ToggletipButton
@@ -155,6 +150,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
         </Toggletip>
       </div>
     );
+  };
 
   const loginAndLogoutAction = () => {
     if (UserService.isLoggedIn()) {
@@ -168,7 +164,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
               {SPIFF_ENVIRONMENT}
             </HeaderGlobalAction>
           ) : null}
-          {profileToggletip}
+          {profileToggletip()}
         </>
       );
     }
@@ -292,6 +288,11 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
     );
   };
 
+  // App.jsx forces login (which redirects to keycloak) so we should never get here if we're not logged in.
+  if (!UserService.isLoggedIn()) {
+    return null;
+  }
+
   if (activeKey && ability && !UserService.onlyGuestTaskCompletion()) {
     return (
       <HeaderContainer

spiffworkflow-frontend/src/index.tsx

@@ -6,7 +6,6 @@ import './index.scss';
 import './index.css';
 
 import reportWebVitals from './reportWebVitals';
-import UserService from './services/UserService';
 
 // @ts-expect-error TS(2345) FIXME: Argument of type 'HTMLElement | null' is not assig... Remove this comment to see the full error message
 const root = ReactDOMClient.createRoot(document.getElementById('root'));
@@ -19,7 +18,6 @@ const doRender = () => {
   );
 };
 
-UserService.loginIfNeeded();
 doRender();
 
 // If you want to start measuring performance in your app, pass a function