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

CHANGELOG.md

@@ -33,6 +33,8 @@
 * Include optional okapi interfaces, `consortia`, `roles`, `users-keycloak`. Refs STCOR-889.
 * useUserTenantPermissions hook - provide `isFetched` property. Refs STCOR-890.
 * Reword error message "Error: server is forbidden, unreachable or down. VPN issue?". Refs STCOR-893.
+* Move session timeout 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,8 +9,10 @@ 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';
+import { eventsPortal } from './constants';
 
 const StrictWrapper = ({ children }) => {
   if (config.disableStrictMode) {
@@ -58,6 +60,10 @@ export default class StripesCore extends Component {
 
     return (
       <StrictWrapper>
+        <div
+          id={eventsPortal}
+          className={css.eventsContainer}
+        />
         <Root
           store={this.store}
           epics={this.epics}

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

src/components/SessionEventContainer/FixedLengthSessionWarning.js

@@ -7,6 +7,7 @@ import {
 } from '@folio/stripes-components';
 
 import { useStripes } from '../../StripesContext';
+import css from './style.css';
 
 /**
  * FixedLengthSessionWarning
@@ -48,7 +49,7 @@ const FixedLengthSessionWarning = () => {
     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/SessionEventContainer.js

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import createInactivityTimer from 'inactivity-timer';
 import ms from 'ms';
@@ -15,6 +16,7 @@ import {
 } from '../Root/constants';
 import { toggleRtrModal } from '../../okapiActions';
 import FixedLengthSessionWarning from './FixedLengthSessionWarning';
+import { eventsPortal } from '../../constants';
 
 //
 // event listeners
@@ -278,7 +280,7 @@ const SessionEventContainer = ({ history }) => {
     renderList.push(<FixedLengthSessionWarning key="FixedLengthSessionWarning" />);
   }
 
-  return renderList.length ? renderList : null;
+  return renderList.length ? createPortal(renderList, document.getElementById(eventsPortal)) : null;
 };
 
 SessionEventContainer.propTypes = {

src/components/SessionEventContainer/SessionEventContainer.test.js

@@ -16,6 +16,7 @@ import {
 import { RTR_TIMEOUT_EVENT } from '../Root/constants';
 
 import { toggleRtrModal } from '../../okapiActions';
+import { eventsPortal } from '../../constants';
 
 jest.mock('./KeepWorkingModal', () => (() => <div>KeepWorkingModal</div>));
 jest.mock('../../loginServices');
@@ -37,6 +38,11 @@ const stripes = {
 };
 
 describe('SessionEventContainer', () => {
+  beforeAll(() => {
+    const eventsPortalElement = document.createElement('div');
+    eventsPortalElement.id = eventsPortal;
+    document.body.appendChild(eventsPortalElement);
+  });
   it('Renders nothing if useSecureTokens is false', async () => {
     const insecureStripes = {
       config: {

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

src/constants/eventsPortal.js

@@ -0,0 +1,3 @@
+const EVENTS_PORTAL = 'events-portal';
+
+export default EVENTS_PORTAL;

src/constants/index.js

@@ -5,3 +5,4 @@ export { default as ssoErrorCodes } from './ssoErrorCodes';
 export { default as defaultErrors } from './defaultErrors';
 export { default as packageName } from './packageName';
 export { default as delimiters } from './delimiters';
+export { default as eventsPortal } from './eventsPortal';