From ef5a9594adf837d8d67d838d571b4ff41de0ea4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Mon, 9 Dec 2019 21:36:14 +0000 Subject: [PATCH 1/5] refactor(ui): move out centered message style to a dedicated component --- ui/src/Components/CenteredMessage/index.js | 15 +++++++++++++++ ui/src/Components/Grid/EmptyGrid/index.js | 12 ++++-------- .../Components/CenteredMessage.scss} | 0 ui/src/Styles/DarkTheme.scss | 1 + ui/src/Styles/LightTheme.scss | 1 + 5 files changed, 21 insertions(+), 8 deletions(-) create mode 100644 ui/src/Components/CenteredMessage/index.js rename ui/src/{Components/Grid/EmptyGrid/index.scss => Styles/Components/CenteredMessage.scss} (100%) diff --git a/ui/src/Components/CenteredMessage/index.js b/ui/src/Components/CenteredMessage/index.js new file mode 100644 index 000000000..4cea9a1a0 --- /dev/null +++ b/ui/src/Components/CenteredMessage/index.js @@ -0,0 +1,15 @@ +import React from "react"; + +import { MountFade } from "Components/Animations/MountFade"; + +const CenteredMessage = ({ children, className }) => ( +

+ {children} +

+); + +export { CenteredMessage }; diff --git a/ui/src/Components/Grid/EmptyGrid/index.js b/ui/src/Components/Grid/EmptyGrid/index.js index 9e4765f36..4df43a9af 100644 --- a/ui/src/Components/Grid/EmptyGrid/index.js +++ b/ui/src/Components/Grid/EmptyGrid/index.js @@ -3,16 +3,12 @@ import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faMugHot } from "@fortawesome/free-solid-svg-icons/faMugHot"; -import { MountFade } from "Components/Animations/MountFade"; - -import "./index.scss"; +import { CenteredMessage } from "Components/CenteredMessage"; const EmptyGrid = () => ( -

- - - -

+ + + ); export { EmptyGrid }; diff --git a/ui/src/Components/Grid/EmptyGrid/index.scss b/ui/src/Styles/Components/CenteredMessage.scss similarity index 100% rename from ui/src/Components/Grid/EmptyGrid/index.scss rename to ui/src/Styles/Components/CenteredMessage.scss diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss index a3060ebc1..42150504e 100644 --- a/ui/src/Styles/DarkTheme.scss +++ b/ui/src/Styles/DarkTheme.scss @@ -83,6 +83,7 @@ $datepicker__day-hover-color: $white; @import "Styles/Components/Alert"; @import "Styles/Components/AlertGroup"; @import "Styles/Components/BaseLabel"; +@import "Styles/Components/CenteredMessage"; @import "Styles/Components/FilterInputLabel"; @import "Styles/Components/LabelWithPercent"; @import "Styles/Components/InputRange"; diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss index 73e292226..54073aa51 100644 --- a/ui/src/Styles/LightTheme.scss +++ b/ui/src/Styles/LightTheme.scss @@ -74,6 +74,7 @@ $datepicker__day-hover-color: $black; @import "Styles/Components/Alert"; @import "Styles/Components/AlertGroup"; @import "Styles/Components/BaseLabel"; +@import "Styles/Components/CenteredMessage"; @import "Styles/Components/FilterInputLabel"; @import "Styles/Components/LabelWithPercent"; @import "Styles/Components/InputRange"; From 0a57500c869973fbd0ce7d2e412adb048afe4132 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Thu, 12 Dec 2019 22:13:41 +0000 Subject: [PATCH 2/5] chore(ui): use CenteredMessage for full page messages --- .../__snapshots__/index.test.js.snap | 3 +- ui/src/Components/Grid/EmptyGrid/index.js | 5 ++- .../__snapshots__/index.test.js.snap | 34 +++++++++---------- ui/src/Components/Grid/FatalError/index.js | 15 ++++---- .../__snapshots__/index.test.js.snap | 12 +++---- ui/src/Components/Grid/UpgradeNeeded/index.js | 17 ++++++---- ui/src/Components/Grid/index.stories.js | 18 ++++++++++ ui/src/Styles/Components/CenteredMessage.scss | 4 +++ ui/src/Styles/Percy.scss | 11 ++++++ 9 files changed, 80 insertions(+), 39 deletions(-) diff --git a/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.js.snap index 01212e6ed..83c5063f8 100644 --- 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[` 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\\" > ( - + ); diff --git a/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap index 634c3c8c4..6ab0d47f7 100644 --- 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[` matches snapshot 1`] = ` " -
-
-

- +
+ + - - - -

+ +

foo bar

-
+ " `; diff --git a/ui/src/Components/Grid/FatalError/index.js b/ui/src/Components/Grid/FatalError/index.js index 177cef44a..9930a9d55 100644 --- 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 ( -
-
-

- -

+ +
+

{message}

-
+ ); } } diff --git a/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap index 948ef6753..6a55d3cea 100644 --- 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[` matches snapshot 1`] = ` " -
-
-

+

+
+
matches snapshot 1`] = ` > -

+

matches snapshot 1`] = ` Upgrading to a new version: 1.2.3

-
+ " `; diff --git a/ui/src/Components/Grid/UpgradeNeeded/index.js b/ui/src/Components/Grid/UpgradeNeeded/index.js index be6f0eadf..f2ebe92a1 100644 --- 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 ( -
-
-

- -

+ +
+
+ +

Upgrading to a new version: {newVersion}

-
+ ); } } diff --git a/ui/src/Components/Grid/index.stories.js b/ui/src/Components/Grid/index.stories.js index 00054d8c9..4ddf80830 100644 --- 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 ( + + ); + }) .add("FatalError", () => { return ( @@ -21,6 +32,13 @@ storiesOf("Grid", module) .add("UpgradeNeeded", () => { return ; }) + .add("EmptyGrid", () => { + return ( +
+ +
+ ); + }) .add("AlertGrid", () => { const alertStore = new AlertStore([]); const settingsStore = new Settings(); diff --git a/ui/src/Styles/Components/CenteredMessage.scss b/ui/src/Styles/Components/CenteredMessage.scss index 17175a910..af3897430 100644 --- 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; +} diff --git a/ui/src/Styles/Percy.scss b/ui/src/Styles/Percy.scss index ae96990d4..91fbad033 100644 --- 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; +} From 3c125a4b978a5be7635ec960258eedea6b89b44e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Thu, 12 Dec 2019 22:14:01 +0000 Subject: [PATCH 3/5] fix(ui): add more margin between text and the icon --- ui/src/ErrorBoundary.tsx | 4 ++-- ui/src/__snapshots__/ErrorBoundary.test.js.snap | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/src/ErrorBoundary.tsx b/ui/src/ErrorBoundary.tsx index 390ac0521..d1dae0826 100644 --- a/ui/src/ErrorBoundary.tsx +++ b/ui/src/ErrorBoundary.tsx @@ -20,7 +20,7 @@ const InternalError: StatelessComponent = props => (

- + Internal error

@@ -102,4 +102,4 @@ class ErrorBoundary extends Component { } } -export { ErrorBoundary }; +export { ErrorBoundary, InternalError }; diff --git a/ui/src/__snapshots__/ErrorBoundary.test.js.snap b/ui/src/__snapshots__/ErrorBoundary.test.js.snap index b7b84ab9a..e9909b532 100644 --- a/ui/src/__snapshots__/ErrorBoundary.test.js.snap +++ b/ui/src/__snapshots__/ErrorBoundary.test.js.snap @@ -9,7 +9,7 @@ exports[` matches snapshot 1`] = ` focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"bomb\\" - class=\\"svg-inline--fa fa-bomb fa-w-16 text-danger mr-2\\" + class=\\"svg-inline--fa fa-bomb fa-w-16 text-danger mr-4\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 512 512\\" From ccc44b042a854e004537fbe8822b318778d9de7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Thu, 12 Dec 2019 22:25:39 +0000 Subject: [PATCH 4/5] feat(storybook): add more stories --- .../Components/OverviewModal/index.stories.js | 28 ++++++++----- .../Components/SilenceModal/index.stories.js | 39 +++++++++++++++++++ 2 files changed, 58 insertions(+), 9 deletions(-) diff --git a/ui/src/Components/OverviewModal/index.stories.js b/ui/src/Components/OverviewModal/index.stories.js index 5309c31ab..002bb937d 100644 --- a/ui/src/Components/OverviewModal/index.stories.js +++ b/ui/src/Components/OverviewModal/index.stories.js @@ -8,18 +8,28 @@ import { OverviewModalContent } from "./OverviewModalContent"; import "Styles/Percy.scss"; -storiesOf("OverviewModal", module) - .addDecorator(storyFn => ( +storiesOf("OverviewModal", module).add("OverviewModal", () => { + const Modal = ({ children }) => (

-
{storyFn()}
+
{children}
- )) - .add("OverviewModal", () => { - const alertStore = new AlertStore([]); + ); - MockGrid(alertStore); + const alertStore = new AlertStore([]); + MockGrid(alertStore); - return {}} />; - }); + const emptyAlertStore = new AlertStore([]); + + return ( +
+ + {}} /> + + + {}} /> + +
+ ); +}); diff --git a/ui/src/Components/SilenceModal/index.stories.js b/ui/src/Components/SilenceModal/index.stories.js index 4edf22ec8..ca59f129e 100644 --- a/ui/src/Components/SilenceModal/index.stories.js +++ b/ui/src/Components/SilenceModal/index.stories.js @@ -177,6 +177,45 @@ storiesOf("SilenceModal", module) overwriteRoutes: true }); + return ( + + {}} + onDeleteModalClose={() => {}} + /> + + ); + }) + .add("Empty Browser", () => { + const alertStore = new AlertStore([]); + const settingsStore = new Settings(); + const silenceFormStore = new SilenceFormStore(); + + silenceFormStore.tab.current = SilenceTabNames.Browser; + + alertStore.data.upstreams = { + instances: [ + { + name: "am1", + cluster: "am", + clusterMembers: ["am1"], + uri: "http://localhost:9093", + publicURI: "http://example.com", + error: "", + version: "0.15.3", + headers: {} + } + ], + clusters: { am: ["am1"] } + }; + + fetchMock.mock("begin:/silences.json?", [], { + overwriteRoutes: true + }); + return ( Date: Thu, 12 Dec 2019 22:34:41 +0000 Subject: [PATCH 5/5] fix(ui): add tests for CenteredMessage --- .../__snapshots__/index.test.js.snap | 11 +++++ .../Components/CenteredMessage/index.test.js | 41 +++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap create mode 100644 ui/src/Components/CenteredMessage/index.test.js diff --git a/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap b/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap new file mode 100644 index 000000000..b6ed545f0 --- /dev/null +++ b/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` matches snapshot 1`] = ` +" +

+
+ Foo +
+

+" +`; diff --git a/ui/src/Components/CenteredMessage/index.test.js b/ui/src/Components/CenteredMessage/index.test.js new file mode 100644 index 000000000..fa3da4341 --- /dev/null +++ b/ui/src/Components/CenteredMessage/index.test.js @@ -0,0 +1,41 @@ +import React from "react"; + +import { shallow } from "enzyme"; + +import toDiffableHtml from "diffable-html"; + +import { CenteredMessage } from "."; + +describe("", () => { + const Message = () =>
Foo
; + + it("matches snapshot", () => { + const tree = shallow( + + + + ); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); + + it("uses 'display-1 text-placeholder' className by default", () => { + const tree = shallow( + + + + ); + expect(toDiffableHtml(tree.html())).toMatch(/display-1 text-placeholder/); + }); + + it("uses custom className if passed", () => { + const tree = shallow( + + + + ); + expect(toDiffableHtml(tree.html())).toMatch(/bar-class/); + expect(toDiffableHtml(tree.html())).not.toMatch( + /display-1 text-placeholder/ + ); + }); +});