Merge pull request #582 from prymitive/handle-orientation

fix(ui): redraw alert grid on orientation changes

ui/package.json

@@ -49,6 +49,7 @@
     "react-tippy": "1.2.3",
     "react-transition-group": "2.8.0",
     "react-truncate": "2.4.0",
+    "screen-orientation": "1.0.3",
     "whatwg-fetch": "3.0.0"
   },
   "scripts": {

ui/src/Components/Grid/index.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 
+import screenOrientation from "screen-orientation";
+
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -29,8 +31,10 @@ const Grid = observer(
       this.viewport = observable(
         {
           width: window.innerWidth,
+          orientation: screenOrientation().direction,
           update() {
             this.width = window.innerWidth;
+            this.orientation = screenOrientation().direction;
           }
         },
         {
@@ -84,7 +88,7 @@ const Grid = observer(
             ))}
 
           <AlertGrid
-            key={this.viewport.width}
+            key={`${this.viewport.width}-${this.viewport.orientation}`}
             alertStore={alertStore}
             settingsStore={settingsStore}
             silenceFormStore={silenceFormStore}

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

@@ -101,13 +101,15 @@ describe("<Grid />", () => {
     // This test only checks if we force re-render of the AlertGrid component
     // by updating its key prop
 
-    global.innerWidth = 2048;
+    global.innerWidth = 1980;
+    global.innerHeight = 1080;
     const tree = ShallowGrid();
-    expect(tree.find("AlertGrid").key()).toBe("2048");
+    expect(tree.find("AlertGrid").key()).toBe("1980-landscape");
 
     global.innerWidth = 500;
+    global.innerHeight = 1000;
     global.dispatchEvent(new Event("resize"));
-    expect(tree.find("AlertGrid").key()).toBe("500");
+    expect(tree.find("AlertGrid").key()).toBe("500-portrait");
   });
 
   it("unmounts without crashes", () => {

ui/yarn.lock

@@ -3776,6 +3776,11 @@ dom-serializer@0, dom-serializer@~0.1.0:
     domelementtype "^1.3.0"
     entities "^1.1.1"
 
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+  integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -5013,6 +5018,14 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global@~4.3.0:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
+  integrity sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
 globals@^11.1.0, globals@^11.7.0:
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.11.0.tgz#dcf93757fa2de5486fbeed7118538adf789e9c2e"
@@ -7288,6 +7301,13 @@ mimic-fn@^2.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
+  dependencies:
+    dom-walk "^0.1.0"
+
 mini-css-extract-plugin@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
@@ -9017,6 +9037,11 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
+process@~0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.5.2.tgz#1638d8a8e34c2f440a91db95ab9aeb677fc185cf"
+  integrity sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=
+
 progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -10119,6 +10144,14 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+screen-orientation@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/screen-orientation/-/screen-orientation-1.0.3.tgz#a390951b13504417fa19293d5b7e1fb93e8766c4"
+  integrity sha1-o5CVGxNQRBf6GSk9W34fuT6HZsQ=
+  dependencies:
+    global "~4.3.0"
+    view-size "~1.0.1"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -11418,6 +11451,13 @@ vfile@^3.0.0, vfile@^3.0.1:
     unist-util-stringify-position "^1.0.0"
     vfile-message "^1.0.0"
 
+view-size@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/view-size/-/view-size-1.0.1.tgz#747d8285fab00896ba83e4c0dcf333e1e028ab11"
+  integrity sha1-dH2ChfqwCJa6g+TA3PMz4eAoqxE=
+  dependencies:
+    global "~4.3.0"
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"