feat(ui): show an icon when the grid is empty

Makes it clear that there are no alerts, especially with hidden navbar

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EmptyGrid /> matches snapshot 1`] = `
+"
+<h1 class=\\"display-1 text-secondary screen-center\\">
+  <svg aria-hidden=\\"true\\"
+       focusable=\\"false\\"
+       data-prefix=\\"fas\\"
+       data-icon=\\"check-circle\\"
+       class=\\"svg-inline--fa fa-check-circle fa-w-16 fa-null fa-rotate-null fa-pull-null \\"
+       role=\\"img\\"
+       xmlns=\\"http://www.w3.org/2000/svg\\"
+       viewbox=\\"0 0 512 512\\"
+       style=\\"font-size:14rem\\"
+  >
+    <path fill=\\"currentColor\\"
+          d=\\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\\"
+    >
+    </path>
+  </svg>
+</h1>
+"
+`;

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

@@ -0,0 +1,14 @@
+import React from "react";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
+
+import "./index.scss";
+
+const EmptyGrid = () => (
+  <h1 className="display-1 text-secondary screen-center">
+    <FontAwesomeIcon icon={faCheckCircle} style={{ fontSize: "14rem" }} />
+  </h1>
+);
+
+export { EmptyGrid };

ui/src/Components/Grid/EmptyGrid/index.scss

@@ -0,0 +1,7 @@
+.screen-center {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+
+import { shallow } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { EmptyGrid } from ".";
+
+describe("<EmptyGrid />", () => {
+  it("matches snapshot", () => {
+    const tree = shallow(<EmptyGrid />);
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+});

ui/src/Components/Grid/index.js

@@ -10,6 +10,7 @@ import { AlertGrid } from "./AlertGrid";
 import { FatalError } from "./FatalError";
 import { UpstreamError } from "./UpstreamError";
 import { UpgradeNeeded } from "./UpgradeNeeded";
+import { EmptyGrid } from "./EmptyGrid";
 
 const Grid = observer(
   class Grid extends Component {
@@ -47,6 +48,13 @@ const Grid = observer(
         );
       }
 
+      if (
+        alertStore.info.version !== "unknown" &&
+        alertStore.info.totalAlerts === 0
+      ) {
+        return <EmptyGrid />;
+      }
+
       return (
         <React.Fragment>
           {alertStore.data.upstreams.instances

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

@@ -94,6 +94,27 @@ describe("<Grid />", () => {
     expect(tree.text()).toBe("<UpgradeNeeded />");
   });
 
+  it("renders AlertGrid before any fetch finished when totalAlerts is 0", () => {
+    alertStore.info.version = "unknown";
+    alertStore.info.totalAlerts = 0;
+    const tree = ShallowGrid();
+    expect(tree.text()).toBe("<AlertGrid />");
+  });
+
+  it("renders EmptyGrid after first fetch when totalAlerts is 0", () => {
+    alertStore.info.version = "1.2.3";
+    alertStore.info.totalAlerts = 0;
+    const tree = ShallowGrid();
+    expect(tree.text()).toBe("<EmptyGrid />");
+  });
+
+  it("renders AlertGrid after first fetch finished when totalAlerts is >0", () => {
+    alertStore.info.version = "unknown";
+    alertStore.info.totalAlerts = 1;
+    const tree = ShallowGrid();
+    expect(tree.text()).toBe("<AlertGrid />");
+  });
+
   it("unmounts without crashes", () => {
     const tree = ShallowGrid();
     tree.unmount();