From 013499388f7ca032fd6390b5a60c5303fb696303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 31 Oct 2019 23:33:47 +0000
Subject: [PATCH] fix(ui): reset lazy loader limit if group count changes

---
 ui/src/Components/Grid/AlertGrid/index.js     | 23 +++++++++++++++----
 .../Components/Grid/AlertGrid/index.test.js   | 21 +++++++++++++++++
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js
index cee7fd162..c094f0f05 100644
--- a/ui/src/Components/Grid/AlertGrid/index.js
+++ b/ui/src/Components/Grid/AlertGrid/index.js
@@ -94,19 +94,22 @@ const AlertGrid = observer(
       10
     );
 
-    // how many alert groups to render
-    // FIXME reset on filter change
     initial = 50;
     groupsToRender = observable(
       {
-        value: this.initial
+        value: this.initial,
+        setValue(value) {
+          this.value = value;
+        }
+      },
+      {
+        setValue: action.bound
       },
-      {},
       { name: "Groups to render" }
     );
     // how many groups add to render count when user scrolls to the bottom
     loadMoreStep = 30;
-    //
+
     loadMore = action(() => {
       const { alertStore } = this.props;
 
@@ -134,6 +137,16 @@ const AlertGrid = observer(
       window.addEventListener("resize", this.handleResize);
     }
 
+    componentDidUpdate() {
+      const { alertStore } = this.props;
+
+      if (this.groupsToRender.value > alertStore.data.groups.length) {
+        this.groupsToRender.setValue(
+          Math.max(this.initial, alertStore.data.groups.length)
+        );
+      }
+    }
+
     componentWillUnmount() {
       window.removeEventListener("resize", this.handleResize);
     }
diff --git a/ui/src/Components/Grid/AlertGrid/index.test.js b/ui/src/Components/Grid/AlertGrid/index.test.js
index 53ea1da85..97dbee9c0 100644
--- a/ui/src/Components/Grid/AlertGrid/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/index.test.js
@@ -104,6 +104,27 @@ describe("<AlertGrid />", () => {
     expect(alertGroups).toHaveLength(80);
   });
 
+  it("resets groupsToRender.value back to 50 if current value is > alertStore.data.groups.length", () => {
+    MockGroupList(100, 5);
+    const tree = ShallowAlertGrid();
+    expect(tree.find("AlertGroup")).toHaveLength(50);
+    expect(tree.instance().groupsToRender.value).toBe(50);
+
+    tree.instance().loadMore();
+    expect(tree.find("AlertGroup")).toHaveLength(80);
+    expect(tree.instance().groupsToRender.value).toBe(80);
+
+    MockGroupList(10, 5);
+    tree.instance().componentDidUpdate();
+    expect(tree.find("AlertGroup")).toHaveLength(10);
+    expect(tree.instance().groupsToRender.value).toBe(50);
+
+    MockGroupList(100, 5);
+    tree.instance().componentDidUpdate();
+    expect(tree.find("AlertGroup")).toHaveLength(50);
+    expect(tree.instance().groupsToRender.value).toBe(50);
+  });
+
   it("calling masonryRepack() calls forcePack() on Masonry instance`", () => {
     const tree = ShallowAlertGrid();
     const instance = tree.instance();