some fixes for the error page when backend is down w/ burnettk
This commit is contained in:
parent
af9dfe58ff
commit
ce7898fbd6
|
@ -3,16 +3,10 @@ import { defineAbility } from '@casl/ability';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { AbilityContext } from './contexts/Can';
|
import { AbilityContext } from './contexts/Can';
|
||||||
import UserService from './services/UserService';
|
|
||||||
import APIErrorProvider from './contexts/APIErrorContext';
|
import APIErrorProvider from './contexts/APIErrorContext';
|
||||||
import ContainerForExtensions from './ContainerForExtensions';
|
import ContainerForExtensions from './ContainerForExtensions';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
if (!UserService.isLoggedIn()) {
|
|
||||||
UserService.doLogin();
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ability = defineAbility(() => {});
|
const ability = defineAbility(() => {});
|
||||||
return (
|
return (
|
||||||
<div className="cds--white">
|
<div className="cds--white">
|
||||||
|
|
|
@ -18,6 +18,7 @@ import HttpService from './services/HttpService';
|
||||||
import { ErrorBoundaryFallback } from './ErrorBoundaryFallack';
|
import { ErrorBoundaryFallback } from './ErrorBoundaryFallack';
|
||||||
import BaseRoutes from './routes/BaseRoutes';
|
import BaseRoutes from './routes/BaseRoutes';
|
||||||
import BackendIsDown from './routes/BackendIsDown';
|
import BackendIsDown from './routes/BackendIsDown';
|
||||||
|
import UserService from './services/UserService';
|
||||||
|
|
||||||
export default function ContainerForExtensions() {
|
export default function ContainerForExtensions() {
|
||||||
const [backendIsUp, setBackendIsUp] = useState<boolean | null>(null);
|
const [backendIsUp, setBackendIsUp] = useState<boolean | null>(null);
|
||||||
|
@ -93,6 +94,7 @@ export default function ContainerForExtensions() {
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const routeComponents = () => {
|
const routeComponents = () => {
|
||||||
|
UserService.loginIfNeeded();
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route
|
<Route
|
||||||
|
|
|
@ -27,7 +27,6 @@ import { useUriListForPermissions } from '../hooks/UriListForPermissions';
|
||||||
import { PermissionsToCheck } from '../interfaces';
|
import { PermissionsToCheck } from '../interfaces';
|
||||||
import { UiSchemaUxElement } from '../extension_ui_schema_interfaces';
|
import { UiSchemaUxElement } from '../extension_ui_schema_interfaces';
|
||||||
import { usePermissionFetcher } from '../hooks/PermissionService';
|
import { usePermissionFetcher } from '../hooks/PermissionService';
|
||||||
import { UnauthenticatedError } from '../services/HttpService';
|
|
||||||
import { DOCUMENTATION_URL, SPIFF_ENVIRONMENT } from '../config';
|
import { DOCUMENTATION_URL, SPIFF_ENVIRONMENT } from '../config';
|
||||||
import appVersionInfo from '../helpers/appVersionInfo';
|
import appVersionInfo from '../helpers/appVersionInfo';
|
||||||
import { slugifyString } from '../helpers';
|
import { slugifyString } from '../helpers';
|
||||||
|
@ -50,11 +49,6 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
|
||||||
const [activeKey, setActiveKey] = useState<string>('');
|
const [activeKey, setActiveKey] = useState<string>('');
|
||||||
|
|
||||||
const { targetUris } = useUriListForPermissions();
|
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 = {
|
const permissionRequestData: PermissionsToCheck = {
|
||||||
[targetUris.authenticationListPath]: ['GET'],
|
[targetUris.authenticationListPath]: ['GET'],
|
||||||
[targetUris.messageInstanceListPath]: ['GET'],
|
[targetUris.messageInstanceListPath]: ['GET'],
|
||||||
|
@ -99,12 +93,6 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
|
||||||
return activeKey === menuItemPath;
|
return activeKey === menuItemPath;
|
||||||
};
|
};
|
||||||
|
|
||||||
let aboutLinkElement = null;
|
|
||||||
|
|
||||||
if (Object.keys(versionInfo).length) {
|
|
||||||
aboutLinkElement = <a href="/about">About</a>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const userEmail = UserService.getUserEmail();
|
const userEmail = UserService.getUserEmail();
|
||||||
const username = UserService.getPreferredUsername();
|
const username = UserService.getPreferredUsername();
|
||||||
|
|
||||||
|
@ -113,48 +101,56 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
|
||||||
return <a href={navItemPage}>{uxElement.label}</a>;
|
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 />
|
<>
|
||||||
Sign out
|
<hr />
|
||||||
</Button>
|
<Button
|
||||||
</>
|
data-qa="logout-button"
|
||||||
) : null}
|
className="button-link"
|
||||||
</ToggletipContent>
|
onClick={handleLogout}
|
||||||
</Toggletip>
|
>
|
||||||
</div>
|
<Logout />
|
||||||
);
|
Sign out
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</ToggletipContent>
|
||||||
|
</Toggletip>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const loginAndLogoutAction = () => {
|
const loginAndLogoutAction = () => {
|
||||||
if (UserService.isLoggedIn()) {
|
if (UserService.isLoggedIn()) {
|
||||||
|
@ -168,7 +164,7 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) {
|
||||||
{SPIFF_ENVIRONMENT}
|
{SPIFF_ENVIRONMENT}
|
||||||
</HeaderGlobalAction>
|
</HeaderGlobalAction>
|
||||||
) : null}
|
) : 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()) {
|
if (activeKey && ability && !UserService.onlyGuestTaskCompletion()) {
|
||||||
return (
|
return (
|
||||||
<HeaderContainer
|
<HeaderContainer
|
||||||
|
|
|
@ -6,7 +6,6 @@ import './index.scss';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
|
||||||
import reportWebVitals from './reportWebVitals';
|
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
|
// @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'));
|
const root = ReactDOMClient.createRoot(document.getElementById('root'));
|
||||||
|
@ -19,7 +18,6 @@ const doRender = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
UserService.loginIfNeeded();
|
|
||||||
doRender();
|
doRender();
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
// If you want to start measuring performance in your app, pass a function
|
||||||
|
|
Loading…
Reference in New Issue