fix(ui): bump some deps

ui/package-lock.json

@@ -40,8 +40,8 @@
         "react-cool-dimensions": "3.0.1",
         "react-day-picker": "8.10.1",
         "react-dom": "17.0.2",
-        "react-hotkeys-hook": "4.4.1",
-        "react-idle-timer": "4.6.4",
+        "react-hotkeys-hook": "5.2.0",
+        "react-idle-timer": "5.7.2",
         "react-intersection-observer": "10.0.3",
         "react-json-pretty": "2.2.0",
         "react-linkify": "0.2.2",
@@ -11580,22 +11580,24 @@
       }
     },
     "node_modules/react-hotkeys-hook": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.4.1.tgz",
-      "integrity": "sha512-sClBMBioFEgFGYLTWWRKvhxcCx1DRznd+wkFHwQZspnRBkHTgruKIHptlK/U/2DPX8BhHoRGzpMVWUXMmdZlmw==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-5.2.0.tgz",
+      "integrity": "sha512-6hhPHVuofG8De4yU3jr8Q4EjHsxEnob5I1Dag+OxgDRXX1oARHbmURreXyo2CDTYyz0POmFqdBlW6eAa0MwNLw==",
       "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
       "peerDependencies": {
-        "react": ">=16.8.1",
-        "react-dom": ">=16.8.1"
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
       }
     },
     "node_modules/react-idle-timer": {
-      "version": "4.6.4",
-      "resolved": "https://registry.npmjs.org/react-idle-timer/-/react-idle-timer-4.6.4.tgz",
-      "integrity": "sha512-iq61dPud8fgj7l1KOJEY5pyiD532fW0KcIe/5XUe/0lB/4Vytoy4tZBlLGSiYodPzKxTL6HyKoOmG6tyzjD7OQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/react-idle-timer/-/react-idle-timer-5.7.2.tgz",
+      "integrity": "sha512-+BaPfc7XEUU5JFkwZCx6fO1bLVK+RBlFH+iY4X34urvIzZiZINP6v2orePx3E6pAztJGE7t4DzvL7if2SL/0GQ==",
       "license": "MIT",
       "peerDependencies": {
-        "prop-types": ">=15",
         "react": ">=16",
         "react-dom": ">=16"
       }

ui/package.json

@@ -36,8 +36,8 @@
     "react-cool-dimensions": "3.0.1",
     "react-day-picker": "8.10.1",
     "react-dom": "17.0.2",
-    "react-hotkeys-hook": "4.4.1",
-    "react-idle-timer": "4.6.4",
+    "react-hotkeys-hook": "5.2.0",
+    "react-idle-timer": "5.7.2",
     "react-intersection-observer": "10.0.3",
     "react-json-pretty": "2.2.0",
     "react-linkify": "0.2.2",
@@ -107,6 +107,9 @@
     ],
     "preset": "ts-jest/presets/js-with-ts",
     "testEnvironment": "jest-environment-jsdom",
+    "transformIgnorePatterns": [
+      "node_modules/(?!(react-hotkeys-hook|react-idle-timer)/)"
+    ],
     "moduleNameMapper": {
       "\\.(css|less|scss)$": "identity-obj-proxy"
     },

ui/src/Components/NavBar/index.test.tsx

@@ -4,6 +4,8 @@ import { render, screen } from "@testing-library/react";
 
 import fetchMock from "fetch-mock";
 
+import { useIdleTimer } from "react-idle-timer";
+
 import { MockThemeContext } from "__fixtures__/Theme";
 import { EmptyAPIResponse } from "__fixtures__/Fetch";
 import { AlertStore } from "Stores/AlertStore";
@@ -12,15 +14,24 @@ import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { ThemeContext } from "Components/Theme";
 import NavBar from ".";
 
+jest.mock("react-idle-timer");
+
 let alertStore: AlertStore;
 let settingsStore: Settings;
 let silenceFormStore: SilenceFormStore;
 let resizeCallback: (val: any) => void;
+let idleTimerCallbacks: { onIdle?: () => void; onActive?: () => void };
 
 declare let global: any;
 
 beforeEach(() => {
   jest.useFakeTimers();
+  idleTimerCallbacks = {};
+  (useIdleTimer as jest.Mock).mockImplementation((options) => {
+    idleTimerCallbacks.onIdle = options.onIdle;
+    idleTimerCallbacks.onActive = options.onActive;
+    return { pause: jest.fn(), reset: jest.fn() };
+  });
   global.ResizeObserver = jest.fn((cb) => {
     resizeCallback = cb;
     return {
@@ -91,12 +102,12 @@ const renderNavbar = (fixedTop?: boolean) => {
 
 describe("<NavBar />", () => {
   it("sets isIdle to true after idle timeout", () => {
-    // Verifies that react-idle-timer triggers onIdle callback after timeout period
+    // Verifies that onIdle callback from react-idle-timer sets isIdle to true
     renderNavbar();
     expect(alertStore.ui.isIdle).toBe(false);
 
     act(() => {
-      jest.advanceTimersByTime(1000 * 60 * 3 + 1000);
+      idleTimerCallbacks.onIdle?.();
     });
 
     expect(alertStore.ui.isIdle).toBe(true);
@@ -110,7 +121,8 @@ describe("<NavBar />", () => {
     expect(container.querySelector(".invisible")).not.toBeInTheDocument();
 
     act(() => {
-      jest.advanceTimersByTime(1000 * 60 * 3 + 1000);
+      idleTimerCallbacks.onIdle?.();
+      jest.advanceTimersByTime(1000);
     });
 
     expect(alertStore.ui.isIdle).toBe(true);

ui/src/__fixtures__/PressKey.ts

@@ -2,20 +2,15 @@ import { act } from "react-dom/test-utils";
 
 function PressKey(key: string, code: number): void {
   act(() => {
-    document.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: key,
-        keyCode: code,
-        which: code,
-      } as KeyboardEventInit),
-    );
-    document.dispatchEvent(
-      new KeyboardEvent("keyup", {
-        key: key,
-        keyCode: code,
-        which: code,
-      } as KeyboardEventInit),
-    );
+    const eventInit = {
+      key: key,
+      code: key,
+      keyCode: code,
+      which: code,
+      bubbles: true,
+    } as KeyboardEventInit;
+    document.dispatchEvent(new KeyboardEvent("keydown", eventInit));
+    document.dispatchEvent(new KeyboardEvent("keyup", eventInit));
   });
 }
 

ui/src/setupTests.ts

@@ -4,8 +4,7 @@ import "@testing-library/jest-dom";
 
 import { useInView } from "react-intersection-observer";
 
-// react-idle-timer >= 4.6.0
-import "regenerator-runtime/runtime";
+import { createMocks as createIdleTimerMocks } from "react-idle-timer";
 
 import { configure } from "mobx";
 
@@ -14,6 +13,8 @@ import { FetchRetryConfig } from "Common/Fetch";
 import { useFetchGetMock } from "__fixtures__/useFetchGet";
 import { useFetchGet } from "Hooks/useFetchGet";
 
+createIdleTimerMocks();
+
 configure({
   enforceActions: "always",
   //computedRequiresReaction: true,