CUMULUS-4048: Dashboard - Launchpad Timeout Modal (#1186)

* first commit

* removing script

* adding test (not working properly)

* removing script code

* updated Test

* CHANGELOG.md

* cleaning code + extending test

* changing naming

* adding small header test

* fixing CHANGELOG description

* grammar fix

* changing from refresh to re-login

* updating comment

* adding back tokenExpiration

Author: Nnaga1

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "root": false,
+  "root": true,
   "extends": [
     "airbnb-base",
     "standard",

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [v13.1.0] - 2025-03-25
 
+### Added
+
+- **CUMULUS-4048**
+  - Added a session timeout warning modal that pops up five minutes before the session expires
+
 ### Changed
 
 - **CUMULUS-4028**

app/src/js/components/Header/header.js

@@ -15,6 +15,7 @@ import { window } from '../../utils/browser';
 import { strings } from '../locale';
 import linkToKibana from '../../utils/kibana';
 import { getPersistentQueryParams } from '../../utils/url-helper';
+import SessionTimeoutModal from '../SessionTimeoutModal/session-timeout-modal';
 
 const paths = [
   [strings.collections, '/collections/all'],
@@ -122,6 +123,7 @@ const Header = ({
                 )}
           </nav>
         </div>
+        <div className="session-timeout-modal"><SessionTimeoutModal/></div>
       </div>
   );
 };

app/src/js/components/SessionTimeoutModal/session-timeout-modal.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import { connect } from 'react-redux';
+import { decode as jwtDecode } from 'jsonwebtoken';
+import DefaultModal from '../Modal/modal';
+import { logout } from '../../actions';
+
+const SessionTimeoutModal = ({
+  tokenExpiration,
+  title = 'Session Expiration Warning',
+  children = 'Your session will expire in 5 minutes. Please re-login if you would like to stay signed in.',
+  dispatch,
+}) => {
+  const [hasModal, setHasModal] = useState(false);
+  const [modalClosed, setModalClosed] = useState(false);
+
+  const handleLogout = useCallback(() => {
+    dispatch(logout()).then(() => {
+      if (get(window, 'location.reload')) {
+        window.location.reload();
+      }
+    });
+  }, [dispatch]);
+
+  const handleClose = () => {
+    setHasModal(false);
+    setModalClosed(true);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // the modal will only pop up when the user is logged in, not already shown, or closed
+      if (!tokenExpiration || hasModal || modalClosed) {
+        return;
+      }
+
+      const currentTime = Math.ceil(Date.now() / 1000);
+      const secondsLeft = tokenExpiration - currentTime;
+
+      if (secondsLeft <= 300) {
+        setHasModal(true);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [tokenExpiration, hasModal, modalClosed]);
+
+  return (
+    <DefaultModal
+      title={title}
+      className="SessionTimeoutModal"
+      onCancel={handleClose}
+      onCloseModal={handleClose}
+      onConfirm={handleLogout}
+      showModal={hasModal}
+      hasConfirmButton={true}
+      hasCancelButton={true}
+      cancelButtonText="Dismiss"
+      confirmButtonText="Re-login"
+    >
+      {children}
+    </DefaultModal>
+  );
+};
+
+SessionTimeoutModal.propTypes = {
+  tokenExpiration: PropTypes.number,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  children: PropTypes.string,
+  dispatch: PropTypes.func,
+};
+
+export default connect((state) => {
+  const token = get(state, 'api.tokens.token');
+  const jwtData = token ? jwtDecode(token) : null;
+  const tokenExpiration = get(jwtData, 'exp');
+
+  return { tokenExpiration };
+})(SessionTimeoutModal);

test/components/SessionTimeoutModal/session-timeout-modal.js

@@ -0,0 +1,60 @@
+import test from 'ava';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render, screen, act } from '@testing-library/react';
+import sinon from 'sinon';
+import thunk from 'redux-thunk';
+import configureMockStore from 'redux-mock-store';
+import { requestMiddleware } from '../../../app/src/js/middleware/request';
+import jwt from 'jsonwebtoken';
+import SessionTimeoutModal from '../../../app/src/js/components/SessionTimeoutModal/session-timeout-modal';
+
+const middlewares = [requestMiddleware, thunk];
+const mockStore = configureMockStore(middlewares);
+
+function createDummyToken(expiration) {
+  return jwt.sign({ exp: expiration }, '', { algorithm: 'none' });
+}
+
+let clock;
+
+test.before(() => {
+  clock = sinon.useFakeTimers();
+});
+
+test.after.always(() => {
+  clock.restore();
+});
+
+test('SessionTimeout modal shows up 5 minutes before token expiration', async (t) => {
+  const futureExp = Math.floor(Date.now() / 1000) + 400; // expires in 400 seconds
+  const dummyToken = createDummyToken(futureExp);
+
+  const store = mockStore({
+    api: {
+      tokens: { token: dummyToken },
+    },
+  });
+
+  render(
+    <Provider store={store}>
+      <SessionTimeoutModal />
+    </Provider>
+  );
+
+  t.falsy(screen.queryByText('Your session will expire in 5 minutes'));
+
+  await act(async () => {
+    clock.tick(100000); // fast-forwards a 100 seconds, to within 5 minutes of expiration
+    await Promise.resolve();
+  });
+
+  const modalText = screen.getByText(/Your session will expire in 5 minutes/);
+  t.truthy(modalText);
+
+  const logoutButton = screen.getByRole('button', { name: /Dismiss/i });
+  const closeButton = screen.getByRole('button', { name: /Re-login/i });
+
+  t.truthy(logoutButton);
+  t.truthy(closeButton);
+});

test/components/header/header.js

@@ -28,7 +28,7 @@ const initialState = {
   }
 };
 
-test('Header contains correct number of nav items and excludes PDRs and Logs', function (t) {
+test('Header contains sessionTimeoutModal, correct number of nav items and excludes PDRs and Logs', function (t) {
   const dispatch = () => {};
   const api = {
     authenticated: true
@@ -53,6 +53,10 @@ test('Header contains correct number of nav items and excludes PDRs and Logs', f
     </MemoryRouter>
     </Provider>
   );
+
+  const modal = container.querySelector('.session-timeout-modal');
+  t.truthy(modal);
+
   const navigation = container.querySelectorAll('nav li');
   t.is(navigation.length, 9);