From 6e6cb02156a623810b24840f462bd89328b4c2fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Mon, 7 Sep 2020 17:20:49 +0100 Subject: [PATCH] fix(ui): use bigger icons for alert group header Fixes #2106 --- .../__snapshots__/index.test.tsx.snap | 30 +++-- .../AlertGroup/GroupHeader/GroupMenu.tsx | 6 +- .../AlertGroup/GroupHeader/index.tsx | 2 +- .../__snapshots__/Silences.test.tsx.snap | 30 +++-- .../Grid/AlertGrid/AlertGroup/index.tsx | 6 +- ui/src/Components/Grid/AlertGrid/Swimlane.tsx | 2 +- .../ManagedSilence/SilenceComment.tsx | 14 +- .../SilenceComment.test.tsx.snap | 120 ++++++++++-------- .../__snapshots__/index.test.tsx.snap | 60 +++++---- .../OverviewModalContent.test.tsx | 10 +- .../OverviewModal/OverviewModalContent.tsx | 9 +- .../SilenceModal/DateTimeSelect/Duration.tsx | 4 +- .../DateTimeSelect/HourMinute.tsx | 8 +- .../__snapshots__/index.test.tsx.snap | 28 ++-- .../SilenceModal/SilenceForm.test.tsx | 8 +- .../Components/SilenceModal/SilenceForm.tsx | 2 +- ui/src/Styles/Components/WithClick.scss | 41 ++++++ ui/src/Styles/Components/_index.scss | 1 + ui/src/Styles/DarkTheme.scss | 3 + ui/src/Styles/LightTheme.scss | 3 + 20 files changed, 228 insertions(+), 159 deletions(-) create mode 100644 ui/src/Styles/Components/WithClick.scss diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap index 3f7f321ef..7be5c9f0d 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap @@ -265,21 +265,23 @@ exports[` mathes snapshot when silence is rendered 1`] = `
- - + - - + + + +
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx index b56423c47..b398e5061 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx @@ -12,7 +12,7 @@ import copy from "copy-to-clipboard"; import { Manager, Reference, Popper } from "react-popper"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV"; +import { faBars } from "@fortawesome/free-solid-svg-icons/faBars"; import { faShareSquare } from "@fortawesome/free-solid-svg-icons/faShareSquare"; import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash"; @@ -160,10 +160,10 @@ const GroupMenu: FC<{ onClick={toggle} className={`${ themed ? "text-white" : "text-muted" - } cursor-pointer badge pl-0 pr-3 pr-sm-2 components-label mr-0`} + } cursor-pointer badge components-label components-label-with-hover with-click mr-1`} data-toggle="dropdown" > - + )} diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx index b8db35adc..78b6fccb0 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx @@ -104,7 +104,7 @@ const GroupHeader: FC<{ diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap index 6afe305c9..f31e8a0fa 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap @@ -36,21 +36,23 @@ exports[` renders ManagedSilence if silence is present in Alert
- - + - - + + + +
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx index e22ec1fa5..d88e4fcdc 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx @@ -25,7 +25,11 @@ const LoadButton: FC<{ }> = ({ icon, action, tooltip }) => { return ( - diff --git a/ui/src/Components/Grid/AlertGrid/Swimlane.tsx b/ui/src/Components/Grid/AlertGrid/Swimlane.tsx index 21948a2a3..1eafed0e0 100644 --- a/ui/src/Components/Grid/AlertGrid/Swimlane.tsx +++ b/ui/src/Components/Grid/AlertGrid/Swimlane.tsx @@ -56,7 +56,7 @@ const Swimlane: FC<{ alertStore={alertStore} /> diff --git a/ui/src/Components/ManagedSilence/SilenceComment.tsx b/ui/src/Components/ManagedSilence/SilenceComment.tsx index 1335b81a3..8a4693002 100644 --- a/ui/src/Components/ManagedSilence/SilenceComment.tsx +++ b/ui/src/Components/ManagedSilence/SilenceComment.tsx @@ -87,13 +87,13 @@ const SilenceComment: FC<{ defaultColor="primary" isAppend={false} /> - + + + diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap index 4ac4a02b4..b3620d218 100644 --- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap +++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap @@ -49,21 +49,23 @@ exports[` Matches snapshot when collapsed 1`] = ` 123 - - + - - + + + + @@ -122,21 +124,23 @@ exports[` Matches snapshot when collapsed and multiple cluster 123 - - + - - + + + + @@ -179,21 +183,23 @@ exports[` Matches snapshot when collapsed and multiple cluster 123 - - + - - + + + + @@ -236,21 +242,23 @@ exports[` Matches snapshot when expanded 1`] = ` 123 - - + - - + + + + diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap index dffb744df..d21347764 100644 --- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap +++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap @@ -51,21 +51,23 @@ exports[` matches snapshot when collapsed 1`] = ` 123 - - + - - + + + + @@ -112,21 +114,23 @@ exports[` matches snapshot with expaned details 1`] = ` 123 - - + - - + + + + diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.test.tsx b/ui/src/Components/OverviewModal/OverviewModalContent.test.tsx index 1f8762a4c..810ceb0e1 100644 --- a/ui/src/Components/OverviewModal/OverviewModalContent.test.tsx +++ b/ui/src/Components/OverviewModal/OverviewModalContent.test.tsx @@ -107,14 +107,14 @@ describe("", () => { ]; const tree = MountedOverviewModalContent(); - expect(tree.find("span.components-label")).toHaveLength(2); + expect(tree.find("span.components-label")).toHaveLength(2 + 1); // +1 for toggle icon expect(tree.find("span.components-label").at(0).text()).toBe("5foo"); expect(tree.find("span.components-label").at(1).text()).toBe("5foo: bar"); - tree.find("svg.cursor-pointer").simulate("click"); + tree.find("span.badge.cursor-pointer.with-click").simulate("click"); - expect(tree.find("span.components-label")).toHaveLength(4); - expect(tree.find("span.components-label").at(2).text()).toBe("3bar"); - expect(tree.find("span.components-label").at(3).text()).toBe("3bar: foo"); + expect(tree.find("span.components-label")).toHaveLength(4 + 1); // +1 for toggle icon + expect(tree.find("span.components-label").at(3).text()).toBe("3bar"); + expect(tree.find("span.components-label").at(4).text()).toBe("3bar: foo"); }); }); diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.tsx b/ui/src/Components/OverviewModal/OverviewModalContent.tsx index b65334007..7e0cc2453 100644 --- a/ui/src/Components/OverviewModal/OverviewModalContent.tsx +++ b/ui/src/Components/OverviewModal/OverviewModalContent.tsx @@ -74,11 +74,12 @@ const LabelsTable: FC<{ - + > + + diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/Duration.tsx b/ui/src/Components/SilenceModal/DateTimeSelect/Duration.tsx index 70aca6261..b78153d8b 100644 --- a/ui/src/Components/SilenceModal/DateTimeSelect/Duration.tsx +++ b/ui/src/Components/SilenceModal/DateTimeSelect/Duration.tsx @@ -43,7 +43,7 @@ const Duration: FC<{ - - @@ -103,14 +103,14 @@ const HourMinute: FC<{ icon={faAngleDown} onClick={onHourDec} onWheel={onHourWheel} - className="components-hour-down" + className="components-hour-down with-click" /> diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap index e1b3de4fc..8d3717cc8 100644 --- a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap +++ b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap @@ -40,7 +40,7 @@ exports[` 'Duration' tab matches snapshot 1`] = `
+
+
- -
+ 'Duration' tab matches snapshot 1`] = `
+ 'Duration' tab matches snapshot 1`] = ` - -
+ 'Duration' tab matches snapshot 1`] = `
+ 'Duration' tab matches snapshot 1`] = ` - -
+ 'Duration' tab matches snapshot 1`] = `
+ 'Ends' tab matches snapshot 1`] = ` - - - -
+ 'Ends' tab matches snapshot 1`] = ` + 'Ends' tab matches snapshot 1`] = `
+ 'Ends' tab matches snapshot 1`] = ` + 'Starts' tab matches snapshot 1`] = ` - - - -
+ 'Starts' tab matches snapshot 1`] = ` + 'Starts' tab matches snapshot 1`] = `
+ 'Starts' tab matches snapshot 1`] = ` + preview", () => { it("renders PayloadPreview after clicking the toggle", () => { const tree = MountedSilenceForm(); - tree.find("span.btn.cursor-pointer.text-muted").simulate("click"); + tree.find("span.badge.cursor-pointer.text-muted").simulate("click"); expect(tree.find("PayloadPreview")).toHaveLength(1); }); it("clicking on the toggle icon toggles PayloadPreview", () => { const tree = MountedSilenceForm(); - const button = tree.find(".btn.cursor-pointer.text-muted"); + const button = tree.find(".badge.cursor-pointer.text-muted"); expect(tree.find("PayloadPreview")).toHaveLength(0); button.simulate("click"); expect(tree.find("PayloadPreview")).toHaveLength(1); @@ -263,7 +263,7 @@ describe(" preview", () => { silenceFormStore.data.autofillMatchers = false; const tree = MountedSilenceForm(); - tree.find(".btn.cursor-pointer.text-muted").simulate("click"); + tree.find(".badge.cursor-pointer.text-muted").simulate("click"); const button = tree.find("span.input-group-text.cursor-pointer"); expect(button.html()).toMatch(/fa-copy/); @@ -282,7 +282,7 @@ describe(" preview", () => { silenceFormStore.data.autofillMatchers = false; const tree = MountedSilenceForm(); - tree.find(".btn.cursor-pointer.text-muted").simulate("click"); + tree.find(".badge.cursor-pointer.text-muted").simulate("click"); const input = tree.find("input.form-control").at(2); expect(input.props().value).toMatch(/http:\/\/localhost\/\?m=/); diff --git a/ui/src/Components/SilenceModal/SilenceForm.tsx b/ui/src/Components/SilenceModal/SilenceForm.tsx index 80b41b8fa..f60ca86ef 100644 --- a/ui/src/Components/SilenceModal/SilenceForm.tsx +++ b/ui/src/Components/SilenceModal/SilenceForm.tsx @@ -232,7 +232,7 @@ const SilenceForm: FC<{ />
setShowPreview(!showPreview)} > diff --git a/ui/src/Styles/Components/WithClick.scss b/ui/src/Styles/Components/WithClick.scss new file mode 100644 index 000000000..08e16797c --- /dev/null +++ b/ui/src/Styles/Components/WithClick.scss @@ -0,0 +1,41 @@ +// https://github.com/mladenplavsic/css-ripple-effect +.with-click { + position: relative; + overflow: hidden; + transform: translate3d(0, 0, 0); + + &:after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + background-image: radial-gradient( + circle, + $with-click-default 10%, + transparent 10.01% + ); + background-repeat: no-repeat; + background-position: 50%; + transform: scale(10, 10); + opacity: 0; + transition: transform 0.4s, opacity 0.4s; + } + + &.with-click-dark:after { + background-image: radial-gradient( + circle, + $with-click-dark 10%, + transparent 10.01% + ); + } + + &:active:after { + transform: scale(0, 0); + opacity: 0.2; + transition: 0s; + } +} diff --git a/ui/src/Styles/Components/_index.scss b/ui/src/Styles/Components/_index.scss index f9a45291a..2d0a1a737 100644 --- a/ui/src/Styles/Components/_index.scss +++ b/ui/src/Styles/Components/_index.scss @@ -25,3 +25,4 @@ @import "Tooltip"; @import "Fetcher"; @import "Toast"; +@import "WithClick"; diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss index 890541536..ed65c993c 100644 --- a/ui/src/Styles/DarkTheme.scss +++ b/ui/src/Styles/DarkTheme.scss @@ -59,6 +59,9 @@ $progress-bg: $black; $dropdown-bg: darken($gray-800, 2%); +$with-click-default: $white; +$with-click-dark: $white; + @import "Styles/RebootlessBootstrap"; @import "~bootswatch/dist/darkly/bootswatch"; diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss index d8c5793d5..71337c6a4 100644 --- a/ui/src/Styles/LightTheme.scss +++ b/ui/src/Styles/LightTheme.scss @@ -41,6 +41,9 @@ $pagination-disabled-bg: $gray-300; $progress-bg: darken($light, 10%); +$with-click-default: $black; +$with-click-dark: $white; + @import "Styles/RebootlessBootstrap"; @import "~bootswatch/dist/flatly/bootswatch";