feat(ui): reload app on version change

ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UpgradeNeeded /> matches snapshot 1`] = `
+"
+<div class=\\"jumbotron text-center bg-primary my-4\\">
+  <div class=\\"container-fluid\\">
+    <h1 class=\\"display-1 my-5 text-success\\">
+      <svg aria-hidden=\\"true\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"box-open\\"
+           class=\\"svg-inline--fa fa-box-open fa-w-20 \\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 640 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M53.2 41L1.7 143.8c-4.6 9.2.3 20.2 10.1 23l197.9 56.5c7.1 2 14.7-1 18.5-7.3L320 64 69.8 32.1c-6.9-.8-13.5 2.7-16.6 8.9zm585.1 102.8L586.8 41c-3.1-6.2-9.8-9.8-16.7-8.9L320 64l91.7 152.1c3.8 6.3 11.4 9.3 18.5 7.3l197.9-56.5c9.9-2.9 14.7-13.9 10.2-23.1zM425.7 256c-16.9 0-32.8-9-41.4-23.4L320 126l-64.2 106.6c-8.7 14.5-24.6 23.5-41.5 23.5-4.5 0-9-.6-13.3-1.9L64 215v178c0 14.7 10 27.5 24.2 31l216.2 54.1c10.2 2.5 20.9 2.5 31 0L551.8 424c14.2-3.6 24.2-16.4 24.2-31V215l-137 39.1c-4.3 1.3-8.8 1.9-13.3 1.9z\\"
+        >
+        </path>
+      </svg>
+    </h1>
+    <p class=\\"lead text-muted\\">
+      <svg aria-hidden=\\"true\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"spinner\\"
+           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin mr-1\\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 512 512\\"
+      >
+        <path fill=\\"currentColor\\"
+              d=\\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\\"
+        >
+        </path>
+      </svg>
+      Upgrading to a new version: 1.2.3
+    </p>
+  </div>
+</div>
+"
+`;

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

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBoxOpen } from "@fortawesome/free-solid-svg-icons/faBoxOpen";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
+
+class UpgradeNeeded extends Component {
+  static propTypes = {
+    newVersion: PropTypes.string.isRequired
+  };
+
+  reloadApp = () => {
+    window.location.reload();
+  };
+
+  componentDidMount() {
+    this.timer = setTimeout(this.reloadApp, 3000);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+    this.timer = null;
+  }
+
+  render() {
+    const { newVersion } = this.props;
+    return (
+      <div className="jumbotron text-center bg-primary my-4">
+        <div className="container-fluid">
+          <h1 className="display-1 my-5 text-success">
+            <FontAwesomeIcon icon={faBoxOpen} />
+          </h1>
+          <p className="lead text-muted">
+            <FontAwesomeIcon className="mr-1" icon={faSpinner} spin />
+            Upgrading to a new version: {newVersion}
+          </p>
+        </div>
+      </div>
+    );
+  }
+}
+
+export { UpgradeNeeded };

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

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { mount, shallow } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { UpgradeNeeded } from ".";
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  jest.clearAllTimers();
+});
+
+afterEach(() => {
+  jest.clearAllTimers();
+});
+
+describe("<UpgradeNeeded />", () => {
+  it("matches snapshot", () => {
+    const tree = shallow(<UpgradeNeeded newVersion="1.2.3" />);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+
+  it("calls window.location.reload after timer is done", () => {
+    const reloadSpy = jest.spyOn(global.window.location, "reload");
+    mount(<UpgradeNeeded newVersion="1.2.3" />);
+    jest.runOnlyPendingTimers();
+    expect(reloadSpy).toBeCalled();
+  });
+
+  it("timer is cleared on unmount", () => {
+    const tree = mount(<UpgradeNeeded newVersion="1.2.3" />);
+    const instance = tree.instance();
+
+    instance.componentWillUnmount();
+    expect(instance.timer).toBeNull();
+  });
+});

ui/src/Components/Grid/index.js

@@ -9,6 +9,7 @@ import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { AlertGrid } from "./AlertGrid";
 import { FatalError } from "./FatalError";
 import { UpstreamError } from "./UpstreamError";
+import { UpgradeNeeded } from "./UpgradeNeeded";
 
 const Grid = observer(
   class Grid extends Component {
@@ -25,6 +26,10 @@ const Grid = observer(
         return <FatalError message={alertStore.status.error} />;
       }
 
+      if (alertStore.info.upgradeNeeded) {
+        return <UpgradeNeeded newVersion={alertStore.info.version} />;
+      }
+
       if (
         alertStore.data.upstreams.counters &&
         alertStore.data.upstreams.counters.total === 1 &&

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

@@ -73,4 +73,10 @@ describe("<Grid />", () => {
     const tree = ShallowGrid();
     expect(tree.text()).toBe("<FatalError />");
   });
+
+  it("renders UpgradeNeeded when alertStore.info.upgradeNeeded=true", () => {
+    alertStore.info.upgradeNeeded = true;
+    const tree = ShallowGrid();
+    expect(tree.text()).toBe("<UpgradeNeeded />");
+  });
 });