fix(ui): render last 4 filters on history for mobile

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)}

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"),

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 (