From 685a0220e01408720106581cf0cdc89ebac11bcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 27 May 2019 11:39:35 +0100
Subject: [PATCH] fix(ui): use width passed by ReactResizeDetector instead of
 body width

Trying to fix #721.
---
 ui/src/Components/Grid/AlertGrid/index.js      |  5 +++--
 ui/src/Components/Grid/AlertGrid/index.test.js | 17 +++++------------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js
index 2ddeafa06..abcd7cf57 100644
--- a/ui/src/Components/Grid/AlertGrid/index.js
+++ b/ui/src/Components/Grid/AlertGrid/index.js
@@ -82,8 +82,8 @@ const AlertGrid = observer(
       this.viewport = observable(
         {
           width: document.body.clientWidth,
-          update() {
-            this.width = document.body.clientWidth;
+          update(width, height) {
+            this.width = width;
           },
           get gridSizesConfig() {
             return GridSizesConfig(
@@ -240,6 +240,7 @@ const AlertGrid = observer(
         <React.Fragment>
           <ReactResizeDetector
             handleWidth
+            handleHeight
             onResize={debounce(this.viewport.update, 100)}
           />
           <MasonryInfiniteScroller
diff --git a/ui/src/Components/Grid/AlertGrid/index.test.js b/ui/src/Components/Grid/AlertGrid/index.test.js
index ad41e366e..04c269998 100644
--- a/ui/src/Components/Grid/AlertGrid/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/index.test.js
@@ -14,15 +14,9 @@ import { AlertGrid } from ".";
 let alertStore;
 let settingsStore;
 let silenceFormStore;
-let bodyWidth;
 
 beforeAll(() => {
   jest.useFakeTimers();
-  Object.defineProperty(document.body, "clientWidth", {
-    get: () => {
-      return bodyWidth;
-    }
-  });
 });
 
 beforeEach(() => {
@@ -82,9 +76,9 @@ const MockGroupList = (count, alertPerGroup) => {
 };
 
 const VerifyColumnCount = (innerWidth, columns) => {
-  bodyWidth = innerWidth;
   MockGroupList(60, 5);
   const tree = ShallowAlertGrid();
+  tree.instance().viewport.update(innerWidth, 500);
   expect(
     tree
       .find("AlertGroup")
@@ -444,9 +438,10 @@ describe("<AlertGrid />", () => {
   });
 
   it("viewport resize also resizes alert groups", () => {
-    bodyWidth = 1980;
     MockGroupList(60, 5);
     const tree = ShallowAlertGrid();
+    // set initial width
+    tree.instance().viewport.update(1980, 500);
     expect(
       tree
         .find("AlertGroup")
@@ -454,10 +449,8 @@ describe("<AlertGrid />", () => {
         .props().style.width
     ).toBe(1980 / 4);
 
-    bodyWidth = 1000;
-    // not sure how to force ReactResizeDetector to detect width change, so
-    // we directly call viewport update here
-    tree.instance().viewport.update();
+    // then resize and verify if column count was changed
+    tree.instance().viewport.update(1000, 500);
     expect(
       tree
         .find("AlertGroup")