Merge pull request #571 from prymitive/collapse-by-default-on-mobile

feat(ui): collapse alert groups on mobile by default

ui/src/Common/Device.js

@@ -0,0 +1,5 @@
+function IsMobile() {
+  return window.innerWidth < 768;
+}
+
+export { IsMobile };

ui/src/Components/Grid/AlertGrid/AlertGroup/index.js

@@ -13,6 +13,7 @@ import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus";
 import { APIGroup } from "Models/API";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { IsMobile } from "Common/Device";
 import { MountFade } from "Components/Animations/MountFade";
 import { TooltipWrapper } from "Components/TooltipWrapper";
 import { GroupHeader } from "./GroupHeader";
@@ -74,7 +75,7 @@ const AlertGroup = observer(
     // this observable needs to be passed down to it
     collapse = observable(
       {
-        value: false,
+        value: IsMobile(),
         toggle() {
           this.value = !this.value;
         }

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

@@ -28,13 +28,24 @@ const MockGroup = groupName => {
   return group;
 };
 
+let originalInnerWidth;
+
+beforeAll(() => {
+  originalInnerWidth = global.innerWidth;
+});
+
 beforeEach(() => {
+  global.innerWidth = originalInnerWidth;
   alertStore = new AlertStore([]);
   settingsStore = new Settings();
   silenceFormStore = new SilenceFormStore();
   group = MockGroup("fakeGroup");
 });
 
+afterEach(() => {
+  global.innerWidth = originalInnerWidth;
+});
+
 const MockAlerts = alertCount => {
   for (let i = 1; i <= alertCount; i++) {
     let alert = MockAlert([], { instance: `instance${i}` }, "active");
@@ -97,6 +108,28 @@ describe("<AlertGroup />", () => {
     expect(tree.find("Alert")).toHaveLength(0);
     expect(tree.find("ul.list-group")).toHaveLength(0);
   });
+
+  it("is expanded by default on desktop", () => {
+    // set window.innerWidth to 2k to mock a desktop window
+    global.innerWidth = 2048;
+
+    MockAlerts(3);
+    const tree = MountedAlertGroup(jest.fn(), false);
+    const alertGroup = tree.find("AlertGroup");
+    expect(alertGroup.instance().collapse.value).toBe(false);
+    expect(tree.find("Alert")).toHaveLength(3);
+  });
+
+  it("is collapsed by default on mobile", () => {
+    // set window.innerWidth to <768 to mock a mobile window
+    global.innerWidth = 700;
+
+    MockAlerts(3);
+    const tree = MountedAlertGroup(jest.fn(), false);
+    const alertGroup = tree.find("AlertGroup");
+    expect(alertGroup.instance().collapse.value).toBe(true);
+    expect(tree.find("Alert")).toHaveLength(0);
+  });
 });
 
 const ValidateLoadButtonPresent = (totalAlerts, isPresent) => {

ui/src/Components/NavBar/index.js

@@ -11,6 +11,7 @@ import IdleTimer from "react-idle-timer";
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
+import { IsMobile } from "Common/Device";
 import { NavBarSlide } from "Components/Animations/NavBarSlide";
 import { MainModal } from "Components/MainModal";
 import { SilenceModal } from "Components/SilenceModal";
@@ -100,6 +101,8 @@ const NavBar = observer(
           ? "flex-column flex-sm-column flex-md-row flex-lg-row flex-xl-row"
           : "flex-row";
 
+      const isMobile = IsMobile();
+
       return (
         <IdleTimer
           onActive={this.activityStatus.setActive}
@@ -108,9 +111,7 @@ const NavBar = observer(
               this.activityStatus.setIdle();
             }
           }}
-          timeout={
-            window.innerWidth >= 768 ? DesktopIdleTimeout : MobileIdleTimeout
-          }
+          timeout={isMobile ? MobileIdleTimeout : DesktopIdleTimeout}
         >
           <div className={`container ${this.activityStatus.className}`}>
             <NavBarSlide