Merge pull request #579 from prymitive/handle-browser-resize

fix(ui): reset grid after browser reset

ui/src/Components/Grid/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
+import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 
 import { AlertStore } from "Stores/AlertStore";
@@ -19,6 +20,34 @@ const Grid = observer(
       silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired
     };
 
+    constructor(props) {
+      super(props);
+
+      // this is used to track viewport width, when browser window is resized
+      // we need to recreate the entire grid object to apply new column count
+      // and group size
+      this.viewport = observable(
+        {
+          width: window.innerWidth,
+          update() {
+            this.width = window.innerWidth;
+          }
+        },
+        {
+          update: action.bound
+        }
+      );
+    }
+
+    componentDidMount() {
+      this.viewport.update();
+      window.addEventListener("resize", this.viewport.update);
+    }
+
+    componentWillUnmount() {
+      window.removeEventListener("resize", this.viewport.update);
+    }
+
     render() {
       const { alertStore, settingsStore, silenceFormStore } = this.props;
 
@@ -55,6 +84,7 @@ const Grid = observer(
             ))}
 
           <AlertGrid
+            key={this.viewport.width}
             alertStore={alertStore}
             settingsStore={settingsStore}
             silenceFormStore={silenceFormStore}

ui/src/Components/Grid/index.test.js

@@ -11,12 +11,22 @@ let alertStore;
 let settingsStore;
 let silenceFormStore;
 
+let originalInnerWidth;
+
+beforeAll(() => {
+  originalInnerWidth = global.innerWidth;
+});
+
 beforeEach(() => {
   alertStore = new AlertStore([]);
   settingsStore = new Settings();
   silenceFormStore = new SilenceFormStore();
 });
 
+afterEach(() => {
+  global.innerWidth = originalInnerWidth;
+});
+
 const ShallowGrid = () => {
   return shallow(
     <Grid
@@ -83,4 +93,25 @@ describe("<Grid />", () => {
     const tree = ShallowGrid();
     expect(tree.text()).toBe("<UpgradeNeeded />");
   });
+
+  it("re-creates AlertGrid after viewport resize", () => {
+    // Different columns are positioned using css via fixed offsets, so
+    // it's hard to tell how many columns we have just by looking at the
+    // generated css
+    // This test only checks if we force re-render of the AlertGrid component
+    // by updating its key prop
+
+    global.innerWidth = 2048;
+    const tree = ShallowGrid();
+    expect(tree.find("AlertGrid").key()).toBe("2048");
+
+    global.innerWidth = 500;
+    global.dispatchEvent(new Event("resize"));
+    expect(tree.find("AlertGrid").key()).toBe("500");
+  });
+
+  it("unmounts without crashes", () => {
+    const tree = ShallowGrid();
+    tree.unmount();
+  });
 });