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,48 +101,56 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
     return <a href={navItemPage}>{uxElement.label}</a>;
   };
 
-  const profileToggletip = (
+  const profileToggletip = () => {
-    <div style={{ display: 'flex' }} id="user-profile-toggletip">
+    let aboutLinkElement = null;
-      <Toggletip isTabTip align="bottom-right">
+
-        <ToggletipButton
+    if (Object.keys(versionInfo).length) {
-          aria-label="User Actions"
+      aboutLinkElement = <a href="/about">About</a>;
-          className="user-profile-toggletip-button"
+    }
-          type="button"
+
-        >
+    return (
-          <div className="user-circle">{username[0].toUpperCase()}</div>
+      <div style={{ display: 'flex' }} id="user-profile-toggletip">
-        </ToggletipButton>
+        <Toggletip isTabTip align="bottom-right">
-        <ToggletipContent className="user-profile-toggletip-content">
+          <ToggletipButton
-          <p>
+            aria-label="User Actions"
-            <strong>{username}</strong>
+            className="user-profile-toggletip-button"
-          </p>
+            type="button"
-          {username !== userEmail && <p>{userEmail}</p>}
+          >
-          <hr />
+            <div className="user-circle">{username[0].toUpperCase()}</div>
-          {aboutLinkElement}
+          </ToggletipButton>
-          <a target="_blank" href={documentationUrl} rel="noreferrer">
+          <ToggletipContent className="user-profile-toggletip-content">
-            Documentation
+            <p>
-          </a>
+              <strong>{username}</strong>
-          <ExtensionUxElementForDisplay
+            </p>
-            displayLocation="user_profile_item"
+            {username !== userEmail && <p>{userEmail}</p>}
-            elementCallback={extensionUserProfileElement}
+            <hr />
-            extensionUxElements={extensionUxElements}
+            {aboutLinkElement}
-          />
+            <a target="_blank" href={documentationUrl} rel="noreferrer">
-          {!UserService.authenticationDisabled() ? (
+              Documentation
-            <>
+            </a>
-              <hr />
+            <ExtensionUxElementForDisplay
-              <Button
+              displayLocation="user_profile_item"
-                data-qa="logout-button"
+              elementCallback={extensionUserProfileElement}
-                className="button-link"
+              extensionUxElements={extensionUxElements}
-                onClick={handleLogout}
+            />
-              >
+            {!UserService.authenticationDisabled() ? (
-                <Logout />
+              <>
-                &nbsp;&nbsp;Sign out
+                <hr />
-              </Button>
+                <Button
-            </>
+                  data-qa="logout-button"
-          ) : null}
+                  className="button-link"
-        </ToggletipContent>
+                  onClick={handleLogout}
-      </Toggletip>
+                >
-    </div>
+                  <Logout />
-  );
+                  &nbsp;&nbsp;Sign out
+                </Button>
+              </>
+            ) : null}
+          </ToggletipContent>
+        </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