From ba3005d47ce5f0852d051386e8beed7935162df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 14 May 2020 14:03:52 +0100
Subject: [PATCH] fix(ui): render last 4 filters on history for mobile

---
 .../Components/NavBar/FilterInput/History.js  |  5 ++-
 .../NavBar/FilterInput/History.test.js        | 32 ++++++++++++++++++-
 ui/src/Components/NavBar/index.stories.js     | 15 ++++++++-
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index 77d18ed1f..829ac429b 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/ui/src/Components/NavBar/FilterInput/History.js
@@ -17,6 +17,7 @@ import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
+import { IsMobile } from "Common/Device";
 import { DropdownSlide } from "Components/Animations/DropdownSlide";
 import { HistoryLabel } from "Components/Labels/HistoryLabel";
 import { useOnClickOutside } from "Hooks/useOnClickOutside";
@@ -62,6 +63,8 @@ const HistoryMenu = ({
   afterClick,
   onClear,
 }) => {
+  const maxItems = IsMobile() ? 4 : 8;
+
   return (
     <div
       className="dropdown-menu d-block shadow components-navbar-historymenu"
@@ -76,7 +79,7 @@ const HistoryMenu = ({
       {filters.length === 0 ? (
         <h6 className="dropdown-header text-muted text-center">Empty</h6>
       ) : (
-        filters.map((historyFilters) => (
+        filters.slice(0, maxItems).map((historyFilters) => (
           <button
             className="dropdown-item cursor-pointer px-3"
             key={hash(historyFilters)}
diff --git a/ui/src/Components/NavBar/FilterInput/History.test.js b/ui/src/Components/NavBar/FilterInput/History.test.js
index f3183ce7c..8b47b7e34 100644
--- a/ui/src/Components/NavBar/FilterInput/History.test.js
+++ b/ui/src/Components/NavBar/FilterInput/History.test.js
@@ -17,6 +17,8 @@ beforeAll(() => {
 beforeEach(() => {
   alertStore = new AlertStore([]);
   settingsStore = new Settings();
+
+  global.window.innerWidth = 1024;
 });
 
 afterEach(() => {
@@ -164,7 +166,9 @@ describe("<HistoryMenu />", () => {
     await act(() => promise);
   });
 
-  it("renders only up to maxSize last filter sets in history", async () => {
+  it("renders only up to 8 last filter sets in history on desktop", async () => {
+    global.window.innerWidth = 1024;
+
     const promise = Promise.resolve();
     const tree = MountedHistory();
     PopulateHistory(tree, 16);
@@ -188,6 +192,32 @@ describe("<HistoryMenu />", () => {
     await act(() => promise);
   });
 
+  it("renders only up to 4 last filter sets in history on mobile", async () => {
+    global.window.innerWidth = 500;
+
+    const promise = Promise.resolve();
+    const tree = MountedHistory();
+    PopulateHistory(tree, 16);
+    tree.find("button.cursor-pointer").simulate("click");
+    expect(tree.find("button.dropdown-item")).toHaveLength(4);
+
+    const labelSets = tree.find(".components-navbar-historymenu-labels");
+    expect(labelSets).toHaveLength(4);
+
+    // oldest pushed label should be rendered last
+    const labelsLast = labelSets.last().find("HistoryLabel");
+    expect(labelsLast).toHaveLength(2);
+    expect(labelsLast.at(0).html()).toMatch(/>foo=bar13</);
+    expect(labelsLast.at(1).html()).toMatch(/>baz=~bar13</);
+
+    // most recently pushed label should be rendered fist
+    const labelsFist = labelSets.first().find("HistoryLabel");
+    expect(labelsFist).toHaveLength(2);
+    expect(labelsFist.at(0).html()).toMatch(/>foo=bar16</);
+    expect(labelsFist.at(1).html()).toMatch(/>baz=~bar16</);
+    await act(() => promise);
+  });
+
   it("clicking on 'Save filters' saves current filter set to Settings", () => {
     alertStore.filters.values = [
       AppliedFilter("foo", "=", "bar"),
diff --git a/ui/src/Components/NavBar/index.stories.js b/ui/src/Components/NavBar/index.stories.js
index 87713fa28..c573f11d9 100644
--- a/ui/src/Components/NavBar/index.stories.js
+++ b/ui/src/Components/NavBar/index.stories.js
@@ -52,7 +52,6 @@ storiesOf("NavBar", module).add("NavBar", () => {
 
   const history = [
     [NewFilter("alertname=Foo", "alertname", "=", "foo", true, true, 15)],
-    [NewFilter("cluster=staging", "cluster", "=", "staging", true, true, 15)],
     [
       NewFilter("cluster=staging", "cluster", "=", "staging", true, true, 15),
       NewFilter("region=AF", "region", "=", "AF", true, true, 180),
@@ -81,6 +80,20 @@ storiesOf("NavBar", module).add("NavBar", () => {
         15
       ),
     ],
+    [NewFilter("cluster=staging", "cluster", "=", "staging", true, true, 15)],
+    [
+      NewFilter(
+        "alertname=VeryVeryVeryVeryVeryLoooooooooooooooongAlertnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+        "alertname",
+        "=",
+        "VeryVeryVeryVeryVeryLoooooooooooooooongAlertnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+        true,
+        true,
+        15
+      ),
+      NewFilter("@state=active", "@state", "=", "active", true, true, 1),
+    ],
+    [NewFilter("cluster=staging", "cluster", "=", "staging", true, true, 15)],
   ];
 
   return (