chore(ui): use CenteredMessage for full page messages

2026-05-07 03:26:52 +00:00 · 2019-12-12 22:13:41 +00:00
parent ef5a9594ad
commit 0a57500c86
9 changed files with 80 additions and 39 deletions
--- a/ui/src/Components/Grid/EmptyGrid/snapshots/index.test.js.snap
+++ b/ui/src/Components/Grid/EmptyGrid/snapshots/index.test.js.snap
@@ -7,11 +7,10 @@ exports[`<EmptyGrid /> matches snapshot 1`] = `
       focusable=\\"false\\"
       data-prefix=\\"fas\\"
       data-icon=\\"mug-hot\\"
-       class=\\"svg-inline--fa fa-mug-hot fa-w-16 \\"
+       class=\\"svg-inline--fa fa-mug-hot fa-w-16 screen-center-icon-big text-placeholder\\"
       role=\\"img\\"
       xmlns=\\"http://www.w3.org/2000/svg\\"
       viewbox=\\"0 0 512 512\\"
-       style=\\"font-size:14rem\\"
  >
    <path fill=\\"currentColor\\"
          d=\\"M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0 63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zm112 0c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C223.8 5.9 217 0 208.8 0h-16.4c-9.8 0-17.5 8.5-16.3 18 3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zM400 192H32c-17.7 0-32 14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48z\\"
--- a/ui/src/Components/Grid/EmptyGrid/index.js
+++ b/ui/src/Components/Grid/EmptyGrid/index.js
@@ -7,7 +7,10 @@ import { CenteredMessage } from "Components/CenteredMessage";

 const EmptyGrid = () => (
  <CenteredMessage>
-    <FontAwesomeIcon icon={faMugHot} style={{ fontSize: "14rem" }} />
+    <FontAwesomeIcon
+      icon={faMugHot}
+      className="screen-center-icon-big text-placeholder"
+    />
  </CenteredMessage>
 );

--- a/ui/src/Components/Grid/FatalError/snapshots/index.test.js.snap
+++ b/ui/src/Components/Grid/FatalError/snapshots/index.test.js.snap
@@ -2,28 +2,26 @@

 exports[`<FatalError /> matches snapshot 1`] = `
 "
-<div class=\\"jumbotron text-center bg-primary my-4\\">
-  <div class=\\"container-fluid\\">
-    <h1 class=\\"display-1 my-5 text-danger\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"exclamation-circle\\"
-           class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 \\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+<h1 class=\\"display-1 text-placeholder screen-center\\">
+  <div class=\\"container-fluid text-center\\">
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"exclamation-circle\\"
+         class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 screen-center-icon-big text-danger mb-4\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 512 512\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
      >
-        <path fill=\\"currentColor\\"
-              d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
-        >
-        </path>
-      </svg>
-    </h1>
+      </path>
+    </svg>
    <p class=\\"lead text-white bg-secondary px-1 py-3 rounded text-wrap text-break\\">
      foo bar
    </p>
  </div>
-</div>
+</h1>
 "
 `;
--- a/ui/src/Components/Grid/FatalError/index.js
+++ b/ui/src/Components/Grid/FatalError/index.js
@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";

+import { CenteredMessage } from "Components/CenteredMessage";
+
 class FatalError extends Component {
  static propTypes = {
    message: PropTypes.string.isRequired
@@ -12,16 +14,17 @@ class FatalError extends Component {
  render() {
    const { message } = this.props;
    return (
-      <div className="jumbotron text-center bg-primary my-4">
-        <div className="container-fluid">
-          <h1 className="display-1 my-5 text-danger">
-            <FontAwesomeIcon icon={faExclamationCircle} />
-          </h1>
+      <CenteredMessage>
+        <div className="container-fluid text-center">
+          <FontAwesomeIcon
+            icon={faExclamationCircle}
+            className="screen-center-icon-big text-danger mb-4"
+          />
          <p className="lead text-white bg-secondary px-1 py-3 rounded text-wrap text-break">
            {message}
          </p>
        </div>
-      </div>
+      </CenteredMessage>
    );
  }
 }
--- a/ui/src/Components/Grid/UpgradeNeeded/snapshots/index.test.js.snap
+++ b/ui/src/Components/Grid/UpgradeNeeded/snapshots/index.test.js.snap
@@ -2,14 +2,14 @@

 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 shake-slow shake-constant\\">
+<h1 class=\\"display-1 text-placeholder screen-center\\">
+  <div class=\\"container-fluid text-center\\">
+    <div class=\\"shake-slow shake-constant mb-4\\">
      <svg aria-hidden=\\"true\\"
           focusable=\\"false\\"
           data-prefix=\\"fas\\"
           data-icon=\\"rocket\\"
-           class=\\"svg-inline--fa fa-rocket fa-w-16 \\"
+           class=\\"svg-inline--fa fa-rocket fa-w-16 screen-center-icon-big text-success\\"
           role=\\"img\\"
           xmlns=\\"http://www.w3.org/2000/svg\\"
           viewbox=\\"0 0 512 512\\"
@@ -19,7 +19,7 @@ exports[`<UpgradeNeeded /> matches snapshot 1`] = `
        >
        </path>
      </svg>
-    </h1>
+    </div>
    <p class=\\"lead text-muted\\">
      <svg aria-hidden=\\"true\\"
           focusable=\\"false\\"
@@ -38,6 +38,6 @@ exports[`<UpgradeNeeded /> matches snapshot 1`] = `
      Upgrading to a new version: 1.2.3
    </p>
  </div>
-</div>
+</h1>
 "
 `;
--- a/ui/src/Components/Grid/UpgradeNeeded/index.js
+++ b/ui/src/Components/Grid/UpgradeNeeded/index.js
@@ -5,6 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faRocket } from "@fortawesome/free-solid-svg-icons/faRocket";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";

+import { CenteredMessage } from "Components/CenteredMessage";
+
 import "csshake/scss/csshake-slow.scss";

 class UpgradeNeeded extends Component {
@@ -30,17 +32,20 @@ class UpgradeNeeded extends Component {
  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 shake-slow shake-constant">
-            <FontAwesomeIcon icon={faRocket} />
-          </h1>
+      <CenteredMessage>
+        <div className="container-fluid text-center">
+          <div className="shake-slow shake-constant mb-4">
+            <FontAwesomeIcon
+              icon={faRocket}
+              className="screen-center-icon-big text-success"
+            />
+          </div>
          <p className="lead text-muted">
            <FontAwesomeIcon className="mr-1" icon={faSpinner} spin />
            Upgrading to a new version: {newVersion}
          </p>
        </div>
-      </div>
+      </CenteredMessage>
    );
  }
 }
--- a/ui/src/Components/Grid/index.stories.js
+++ b/ui/src/Components/Grid/index.stories.js
@@ -8,11 +8,22 @@ import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { FatalError } from "./FatalError";
 import { UpgradeNeeded } from "./UpgradeNeeded";
+import { EmptyGrid } from "./EmptyGrid";
 import { Grid } from ".";
+import { InternalError } from "../../ErrorBoundary";

 import "Styles/Percy.scss";

 storiesOf("Grid", module)
+  .add("InternalError", () => {
+    return (
+      <InternalError
+        message="React error boundary message"
+        secondsLeft={45}
+        progressLeft={66}
+      />
+    );
+  })
  .add("FatalError", () => {
    return (
      <FatalError message="Something failed with a veryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrapping" />
@@ -21,6 +32,13 @@ storiesOf("Grid", module)
  .add("UpgradeNeeded", () => {
    return <UpgradeNeeded newVersion="1.2.3" reloadAfter={100000000} />;
  })
+  .add("EmptyGrid", () => {
+    return (
+      <div className="text-center">
+        <EmptyGrid />
+      </div>
+    );
+  })
  .add("AlertGrid", () => {
    const alertStore = new AlertStore([]);
    const settingsStore = new Settings();
--- a/ui/src/Styles/Components/CenteredMessage.scss
+++ b/ui/src/Styles/Components/CenteredMessage.scss
@@ -5,3 +5,7 @@
  margin-right: -50%;
  transform: translate(-50%, -50%);
 }
+
+.screen-center-icon-big {
+  font-size: 14rem;
+}
--- a/ui/src/Styles/Percy.scss
+++ b/ui/src/Styles/Percy.scss
@@ -7,3 +7,14 @@
  position: relative !important;
  float: none !important;
 }
+
+.screen-center {
+  position: unset !important;
+  top: unset !important;
+  left: unset !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  transform: unset !important;
+}