From a1197cfe445f364fa184173ad08e1949c95dbd60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 16 Aug 2020 21:19:51 +0100
Subject: [PATCH] feat(ui): pause fetches on alt+space

---
 ui/src/Components/Grid/AlertGrid/index.tsx    |  4 +++
 .../__snapshots__/index.test.tsx.snap         | 36 ++++++++++---------
 .../NavBar/FetchIndicator/index.tsx           | 11 ++++--
 ui/src/Stores/AlertStore.test.ts              |  9 +++++
 ui/src/Stores/AlertStore.ts                   |  4 +++
 5 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/index.tsx b/ui/src/Components/Grid/AlertGrid/index.tsx
index 5d8595ed7..4b7a41f3c 100644
--- a/ui/src/Components/Grid/AlertGrid/index.tsx
+++ b/ui/src/Components/Grid/AlertGrid/index.tsx
@@ -7,6 +7,8 @@ import useDimensions from "react-cool-dimensions";
 
 import { SizeDetail } from "bricks.js";
 
+import { useHotkeys } from "react-hotkeys-hook";
+
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -52,6 +54,8 @@ const AlertGrid: FC<{
     [windowWidth, bodyWidth] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
+  useHotkeys("alt+space", alertStore.status.togglePause);
+
   return useObserver(() => (
     <React.Fragment>
       <div ref={ref as Ref<HTMLDivElement>} />
diff --git a/ui/src/Components/NavBar/FetchIndicator/__snapshots__/index.test.tsx.snap b/ui/src/Components/NavBar/FetchIndicator/__snapshots__/index.test.tsx.snap
index a07e1fa83..e40ee2b27 100644
--- a/ui/src/Components/NavBar/FetchIndicator/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/NavBar/FetchIndicator/__snapshots__/index.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<FetchIndicator /> matches snapshot when fetch is in progress 1`] = `
      focusable=\\"false\\"
      data-prefix=\\"fas\\"
      data-icon=\\"circle-notch\\"
-     class=\\"svg-inline--fa fa-circle-notch fa-w-16 fa-spin fa-lg mx-1 text-muted\\"
+     class=\\"svg-inline--fa fa-circle-notch fa-w-16 fa-spin fa-lg mx-1 text-muted \\"
      role=\\"img\\"
      xmlns=\\"http://www.w3.org/2000/svg\\"
      viewbox=\\"0 0 512 512\\"
@@ -26,7 +26,7 @@ exports[`<FetchIndicator /> matches snapshot when idle 1`] = `
      focusable=\\"false\\"
      data-prefix=\\"fas\\"
      data-icon=\\"circle-notch\\"
-     class=\\"svg-inline--fa fa-circle-notch fa-w-16 fa-lg mx-1 text-muted\\"
+     class=\\"svg-inline--fa fa-circle-notch fa-w-16 fa-lg mx-1 text-muted \\"
      role=\\"img\\"
      xmlns=\\"http://www.w3.org/2000/svg\\"
      viewbox=\\"0 0 512 512\\"
@@ -42,21 +42,23 @@ exports[`<FetchIndicator /> matches snapshot when idle 1`] = `
 
 exports[`<FetchIndicator /> matches snapshot when paused 1`] = `
 "
-<svg aria-hidden=\\"true\\"
-     focusable=\\"false\\"
-     data-prefix=\\"far\\"
-     data-icon=\\"pause-circle\\"
-     class=\\"svg-inline--fa fa-pause-circle fa-w-16 fa-lg mx-1 text-muted\\"
-     role=\\"img\\"
-     xmlns=\\"http://www.w3.org/2000/svg\\"
-     viewbox=\\"0 0 512 512\\"
-     style=\\"opacity: 1;\\"
->
-  <path fill=\\"currentColor\\"
-        d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm96-280v160c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16zm-112 0v160c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16z\\"
+<div class=\\" tooltip-trigger\\">
+  <svg aria-hidden=\\"true\\"
+       focusable=\\"false\\"
+       data-prefix=\\"far\\"
+       data-icon=\\"pause-circle\\"
+       class=\\"svg-inline--fa fa-pause-circle fa-w-16 fa-lg mx-1 text-muted cursor-pointer\\"
+       role=\\"img\\"
+       xmlns=\\"http://www.w3.org/2000/svg\\"
+       viewbox=\\"0 0 512 512\\"
+       style=\\"opacity: 1;\\"
   >
-  </path>
-</svg>
+    <path fill=\\"currentColor\\"
+          d=\\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm96-280v160c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16zm-112 0v160c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16z\\"
+    >
+    </path>
+  </svg>
+</div>
 "
 `;
 
@@ -66,7 +68,7 @@ exports[`<FetchIndicator /> matches snapshot when response is processed 1`] = `
      focusable=\\"false\\"
      data-prefix=\\"fas\\"
      data-icon=\\"circle-notch\\"
-     class=\\"svg-inline--fa fa-circle-notch fa-w-16 fa-spin fa-lg mx-1 text-success\\"
+     class=\\"svg-inline--fa fa-circle-notch fa-w-16 fa-spin fa-lg mx-1 text-success \\"
      role=\\"img\\"
      xmlns=\\"http://www.w3.org/2000/svg\\"
      viewbox=\\"0 0 512 512\\"
diff --git a/ui/src/Components/NavBar/FetchIndicator/index.tsx b/ui/src/Components/NavBar/FetchIndicator/index.tsx
index 5fde4e743..d55a6e10a 100644
--- a/ui/src/Components/NavBar/FetchIndicator/index.tsx
+++ b/ui/src/Components/NavBar/FetchIndicator/index.tsx
@@ -8,19 +8,22 @@ import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
 import { faPauseCircle } from "@fortawesome/free-regular-svg-icons/faPauseCircle";
 
 import { AlertStore, AlertStoreStatuses } from "Stores/AlertStore";
+import { TooltipWrapper } from "Components/TooltipWrapper";
 
 const FetchIcon: FC<{
   icon: IconDefinition;
   color?: string;
   visible?: boolean;
   spin?: boolean;
-}> = ({ icon, color = "muted", visible = true, spin = false }) => (
+  onClick?: () => void;
+}> = ({ icon, color = "muted", visible = true, spin = false, onClick }) => (
   <FontAwesomeIcon
     style={{ opacity: visible ? 1 : 0 }}
-    className={`mx-1 text-${color}`}
+    className={`mx-1 text-${color} ${onClick ? "cursor-pointer" : ""}`}
     size="lg"
     icon={icon}
     spin={spin}
+    onClick={onClick}
   />
 );
 
@@ -29,7 +32,9 @@ const FetchIndicator: FC<{
 }> = ({ alertStore }) => {
   return useObserver(() =>
     alertStore.status.paused ? (
-      <FetchIcon icon={faPauseCircle} />
+      <TooltipWrapper title="Updates are paused, click to resume">
+        <FetchIcon icon={faPauseCircle} onClick={alertStore.status.resume} />
+      </TooltipWrapper>
     ) : alertStore.status.value.toString() ===
       AlertStoreStatuses.Fetching.toString() ? (
       <FetchIcon
diff --git a/ui/src/Stores/AlertStore.test.ts b/ui/src/Stores/AlertStore.test.ts
index 97ef9fea2..64dc72652 100644
--- a/ui/src/Stores/AlertStore.test.ts
+++ b/ui/src/Stores/AlertStore.test.ts
@@ -144,6 +144,15 @@ describe("AlertStore.status", () => {
     expect(store.status.value).toEqual(AlertStoreStatuses.Idle);
     expect(store.status.error).toBeNull();
   });
+
+  it("togglePause() toggles pause state", () => {
+    const store = new AlertStore([]);
+    expect(store.status.paused).toBe(false);
+    store.status.togglePause();
+    expect(store.status.paused).toBe(true);
+    store.status.togglePause();
+    expect(store.status.paused).toBe(false);
+  });
 });
 
 describe("AlertStore.filters", () => {
diff --git a/ui/src/Stores/AlertStore.ts b/ui/src/Stores/AlertStore.ts
index 3564c09af..1ef718f7f 100644
--- a/ui/src/Stores/AlertStore.ts
+++ b/ui/src/Stores/AlertStore.ts
@@ -343,6 +343,9 @@ class AlertStore {
       resume() {
         this.paused = false;
       },
+      togglePause() {
+        this.paused = !this.paused;
+      },
     },
     {
       setIdle: action,
@@ -351,6 +354,7 @@ class AlertStore {
       setFailure: action,
       pause: action.bound,
       resume: action.bound,
+      togglePause: action.bound,
     },
     { name: "Store status" }
   );