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.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/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/ + ); + }); +}); 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\\" > ( -

- - - -

+ + + ); export { EmptyGrid }; 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/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 ( = props => (

- + Internal error

@@ -102,4 +102,4 @@ class ErrorBoundary extends Component { } } -export { ErrorBoundary }; +export { ErrorBoundary, InternalError }; diff --git a/ui/src/Components/Grid/EmptyGrid/index.scss b/ui/src/Styles/Components/CenteredMessage.scss similarity index 71% rename from ui/src/Components/Grid/EmptyGrid/index.scss rename to ui/src/Styles/Components/CenteredMessage.scss index 17175a910..af3897430 100644 --- a/ui/src/Components/Grid/EmptyGrid/index.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/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"; 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; +} 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\\"