CUMULUS-3624-FINAL (#1215)

* first commit

* created unit test and edited functionality/modal text

* added to changelog

* updated test file and component file

* added to changelog

* tried fixing export and import of const

* update package-lock.json

* Revert "update package-lock.json"

This reverts commit 2237d81.

* added form-data fix

* added elliptic

* added elliptic to see if all passing

* Update package.json

* Update test-inactivity-modal.js

---------

Co-authored-by: etcart <[email protected]>

Author: gacondino

CHANGELOG.md

@@ -27,6 +27,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
+- **CUMULUS-3624**
+  - Added an inactivity modal to prompt inactive users and to logout after a period of no user interactions after the modal appears
 - **CUMULUS-3849**
   - Added a network error modal that pops up when the user is offline
 - **CUMULUS-4048**

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

@@ -17,6 +17,7 @@ import linkToKibana from '../../utils/kibana';
 import { getPersistentQueryParams } from '../../utils/url-helper';
 import SessionTimeoutModal from '../SessionTimeoutModal/session-timeout-modal';
 import NetworkErrorModal from '../NetworkErrorModal/network-error-modal';
+import InactivityModal from '../InactivityModal/inactivity-modal';
 
 const paths = [
   [strings.collections, '/collections/all'],
@@ -126,6 +127,7 @@ const Header = ({
         </div>
         <div className="session-timeout-modal"><SessionTimeoutModal/></div>
         <div className="network-error-modal"><NetworkErrorModal/></div>
+        <div className="inactivity-modal"><InactivityModal/></div>
       </div>
   );
 };

app/src/js/components/InactivityModal/inactivity-modal.js

@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import { connect } from 'react-redux';
+import DefaultModal from '../Modal/modal';
+import { logout } from '../../actions';
+
+export const INACTIVITY_LIMIT = 300000; // 5 minutes in milliseconds
+export const MODAL_TIMEOUT = 120000; // 2 minutes in milliseconds
+
+const InactivityModal = ({
+  title = 'Inactivity Warning',
+  children = 'You have been inactive for a while. Move your cursor or press a key to continue using the application. If no action is taken, you will be logged out.',
+  dispatch,
+}) => {
+  const [hasModal, setHasModal] = useState(false);
+  const timerRef = useRef(null);
+  const modalTimeoutRef = useRef(null);
+
+  const handleLogout = useCallback(() => {
+    dispatch(logout()).then(() => {
+      if (get(window, 'location.reload')) {
+        window.location.reload();
+      }
+    });
+  }, [dispatch]);
+
+  const handleClose = () => {
+    setHasModal(false);
+    clearTimeout(timerRef.current);
+    clearTimeout(modalTimeoutRef.current);
+  };
+
+  const resetTimer = useCallback(() => {
+    setHasModal(false);
+    clearTimeout(timerRef.current);
+    clearTimeout(modalTimeoutRef.current);
+    timerRef.current = setTimeout(() => {
+      setHasModal(true);
+      modalTimeoutRef.current = setTimeout(() => {
+        handleLogout();
+      }, MODAL_TIMEOUT); // Logout after modal timeout
+    }, INACTIVITY_LIMIT); // Show modal after 5 minutes of inactivity
+  }, [handleLogout]);
+
+  const handleActivity = useCallback(() => {
+    resetTimer();
+  }, [resetTimer]);
+
+  useEffect(() => {
+    const events = ['mousemove', 'keydown', 'click', 'scroll'];
+    events.forEach((event) => window.addEventListener(event, handleActivity));
+
+    resetTimer();
+
+    return () => {
+      events.forEach((event) => window.removeEventListener(event, handleActivity));
+      clearTimeout(timerRef.current);
+      clearTimeout(modalTimeoutRef.current);
+    };
+  }, [handleActivity, resetTimer]);
+
+  return (
+    <DefaultModal
+      data-Id="inactivity-modal"
+      title={title}
+      className="InactivityModal"
+      onCancel={handleClose}
+      onCloseModal={handleClose}
+      showModal={hasModal}
+      hasConfirmButton={false}
+      hasCancelButton={false}
+      >
+        {children}
+        </DefaultModal>
+  );
+};
+
+InactivityModal.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.string,
+  dispatch: PropTypes.func,
+};
+
+export default connect((state) => ({
+  token: get(state, 'api.tokens.token'),
+}))(InactivityModal);

test/components/InactivityModal/inactivity-modal.js

@@ -0,0 +1,93 @@
+import test from 'ava';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render, screen, act, cleanup } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import { requestMiddleware } from '../../../app/src/js/middleware/request';
+import thunk from 'redux-thunk';
+import sinon from 'sinon';
+import InactivityModal, { INACTIVITY_LIMIT, MODAL_TIMEOUT } from '../../../app/src/js/components/InactivityModal/inactivity-modal';
+
+const middlewares = [requestMiddleware, thunk];
+const mockStore = configureMockStore(middlewares);
+
+let clock;
+
+test.before(() => {
+  clock = sinon.useFakeTimers();
+});
+
+test.after.always(() => {
+  clock.restore();
+  cleanup();
+});
+
+test('modal is displayed after inactivity timeout', async (t) => {
+  const store = mockStore({ api: { tokens: { token: 'dummy' } } });
+
+  render(
+    <Provider store={store}>
+      <InactivityModal />
+    </Provider>
+  );
+
+  t.falsy(screen.queryByText(/You have been inactive for a while/));
+
+  await act(async () => {
+    clock.tick(INACTIVITY_LIMIT-1000); // fast-forward to just before inactivity limit
+    await Promise.resolve();
+  });
+
+  t.truthy(screen.queryByText(/You have been inactive for a while/));
+});
+
+test('modal closes on user activity', async (t) => {
+  const store = mockStore({ api: { tokens: { token: 'dummy' } } });
+
+  render(
+    <Provider store={store}>
+      <InactivityModal dispatch={store.dispatch}/>
+    </Provider>
+  );
+
+  await act(async () => {
+    clock.tick(INACTIVITY_LIMIT-1000); // fast-forward to inactivity limit
+    await Promise.resolve();
+  });
+
+  t.truthy(screen.queryByText(/You have been inactive for a while/));
+
+  // Simulate user activity
+  await act(async () => {
+    window.dispatchEvent(new MouseEvent('mousemove', { bubbles: true }));
+    clock.tick(0);
+    await Promise.resolve();
+  });
+
+  await act(() => Promise.resolve());
+
+  t.falsy(screen.queryByTestId('inactivity-modal'));
+});
+
+test('modal hides as logout runs after modal timeout', async (t) => {
+  const store = mockStore({ api: { tokens: { token: 'dummy' } } });
+
+  render(
+    <Provider store={store}>
+      <InactivityModal />
+    </Provider>
+  );
+
+  await act(async () => {
+    clock.tick(INACTIVITY_LIMIT-1000); // fast-forward to inactivity limit
+    await Promise.resolve();
+  });
+
+  t.truthy(screen.queryByText(/You have been inactive for a while/));
+  await act(async () => {
+    clock.tick(MODAL_TIMEOUT-1000); // fast-forward to modal timeout
+    await Promise.resolve();
+  });
+
+  t.falsy(screen.queryByTestId('inactivity-modal'));
+});

test/components/header/header.js

@@ -28,7 +28,7 @@ const initialState = {
   }
 };
 
-test('Header contains sessionTimeoutModal, networkErrorModal correct number of nav items and excludes PDRs and Logs', function (t) {
+test('Header contains sessionTimeoutModal, networkErrorModal, inactivityModal correct number of nav items and excludes PDRs and Logs', function (t) {
   const dispatch = () => {};
   const api = {
     authenticated: true
@@ -60,6 +60,9 @@ test('Header contains sessionTimeoutModal, networkErrorModal correct number of n
   const modalNetwork = container.querySelector('.network-error-modal');
   t.truthy(modalNetwork);
 
+  const modalInactivity = container.querySelector('.inactivity-modal');
+  t.truthy(modalInactivity);
+
   const navigation = container.querySelectorAll('nav li');
   t.is(navigation.length, 9);