STCOR-883: fixed-length session timeout banner may scroll off-screen or otherwise be hidden

CHANGELOG.md

@@ -32,6 +32,7 @@
 * Add `nl` (Dutch, Flemish) to the supported locales. Refs STCOR-878.
 * Include optional okapi interfaces, `consortia`, `roles`, `users-keycloak`. Refs STCOR-889.
 * useUserTenantPermissions hook - provide `isFetched` property. Refs STCOR-890.
+* Move session timout banner to the bottom of the page. Refs STCOR-883.
 
 ## [10.1.1](https://github.com/folio-org/stripes-core/tree/v10.1.1) (2024-03-25)
 [Full Changelog](https://github.com/folio-org/stripes-core/compare/v10.1.0...v10.1.1)

src/App.js

@@ -9,6 +9,7 @@ import configureLogger from './configureLogger';
 import configureStore from './configureStore';
 import gatherActions from './gatherActions';
 import { destroyStore } from './mainActions';
+import css from './components/SessionEventContainer/style.css';
 
 import Root from './components/Root';
 
@@ -37,7 +38,11 @@ export default class StripesCore extends Component {
     const parsedTenant = storedTenant ? JSON.parse(storedTenant) : undefined;
 
     const okapi = (typeof okapiConfig === 'object' && Object.keys(okapiConfig).length > 0)
-      ? { ...okapiConfig, tenant: parsedTenant?.tenantName || okapiConfig.tenant, clientId: parsedTenant?.clientId || okapiConfig.clientId } : { withoutOkapi: true };
+      ? {
+        ...okapiConfig,
+        tenant: parsedTenant?.tenantName || okapiConfig.tenant,
+        clientId: parsedTenant?.clientId || okapiConfig.clientId
+      } : { withoutOkapi: true };
 
     const initialState = merge({}, { okapi }, props.initialState);
 
@@ -58,6 +63,10 @@ export default class StripesCore extends Component {
 
     return (
       <StrictWrapper>
+        <div
+          id="events-portal"
+          className={css.eventsContainer}
+        />
         <Root
           store={this.store}
           epics={this.epics}

src/RootWithIntl.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
 import {
   Router,
   Switch,
@@ -62,7 +63,7 @@ const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAut
             >
               <Provider store={connectedStripes.store}>
                 <Router history={history}>
-                  { isAuthenticated || token || disableAuth ?
+                  {isAuthenticated || token || disableAuth ?
                     <>
                       <MainContainer>
                         <AppCtxMenuProvider>
@@ -72,10 +73,14 @@ const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAut
                             event={events.LOGIN}
                             stripes={connectedStripes}
                           />
-                          { (typeof connectedStripes.okapi !== 'object' || connectedStripes.discovery.isFinished) && (
+                          {(typeof connectedStripes.okapi !== 'object' || connectedStripes.discovery.isFinished) && (
                             <ModuleContainer id="content">
                               <OverlayContainer />
-                              {connectedStripes.config.useSecureTokens && <SessionEventContainer history={history} queryClient={queryClient} />}
+                              {connectedStripes.config.useSecureTokens &&
+                                createPortal(<SessionEventContainer
+                                  history={history}
+                                />,
+                                document.getElementById('events-portal'))}
                               <Switch>
                                 <TitledRoute
                                   name="home"

src/RootWithIntl.test.js

@@ -1,21 +1,7 @@
-/* shhhh, eslint, it's ok. we need "unused" imports for mocks */
-/* eslint-disable no-unused-vars */
-
 import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
 import { Router as DefaultRouter } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 
-import AuthnLogin from './components/AuthnLogin';
-import {
-  Login,
-  MainNav,
-  MainContainer,
-  ModuleContainer,
-  OverlayContainer,
-  StaleBundleWarning,
-  SessionEventContainer,
-} from './components';
-
 import RootWithIntl from './RootWithIntl';
 import Stripes from './Stripes';
 
@@ -54,6 +40,11 @@ const store = {
 };
 
 describe('RootWithIntl', () => {
+  beforeAll(() => {
+    const eventsPortal = document.createElement('div');
+    eventsPortal.id = 'events-portal';
+    document.body.appendChild(eventsPortal);
+  });
   it('renders login without one of (isAuthenticated, token, disableAuth)', async () => {
     const stripes = new Stripes({ epics: {}, logger: {}, bindings: {}, config: {}, store, discovery: { isFinished: false } });
     await render(<Harness><RootWithIntl stripes={stripes} history={defaultHistory} isAuthenticated={false} /></Harness>);

src/components/SessionEventContainer/FixedLengthSessionWarning.js

@@ -7,6 +7,7 @@
 } from '@folio/stripes-components';
 
 import { useStripes } from '../../StripesContext';
+import css from './style.css';
 
 /**
  * FixedLengthSessionWarning
@@ -48,7 +49,9 @@
     return '00:00';
   };
 
-  return <MessageBanner type="warning" show><FormattedMessage id="stripes-core.rtr.fixedLengthSession.timeRemaining" /> {timestampFormatter()}</MessageBanner>;
+  return <MessageBanner show contentClassName={css.fixedSessionBanner}><FormattedMessage
+    id="stripes-core.rtr.fixedLengthSession.timeRemaining"
+  /> {timestampFormatter()}</MessageBanner>;
 };
 
 export default FixedLengthSessionWarning;

src/components/SessionEventContainer/style.css

@@ -0,0 +1,14 @@
+@import '@folio/stripes-components/lib/variables.css';
+
+.eventsContainer {
+    position: absolute;
+    bottom: 0;
+    z-index: 100000;
+    left: 50%;
+    transform: translate(-50%);
+    border: none
+}
+
+.fixedSessionBanner {
+    background-color: var(--warn);
+}