From 4b37c209faab3fbd0b6281e10a7469e0856126df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Fri, 19 Apr 2019 22:48:43 +0100 Subject: [PATCH] fix(ui): correctly set card background color Cards only need color definition once, on the top level element --- .../__snapshots__/index.test.js.snap | 4 +- .../AlertGroup/GroupFooter/index.css | 5 +++ .../AlertGrid/AlertGroup/GroupFooter/index.js | 2 +- .../AlertGrid/AlertGroup/GroupHeader/index.js | 4 +- .../Grid/AlertGrid/AlertGroup/index.js | 16 +++---- .../Grid/AlertGrid/AlertGroup/index.test.js | 42 +++++++------------ 6 files changed, 29 insertions(+), 44 deletions(-) diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap index f1b578125..d3cb19a08 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap @@ -2,7 +2,7 @@ exports[` matches snapshot 1`] = ` " -
+
matches snapshot 1`] = ` exports[` mathes snapshot when silence is rendered 1`] = ` " -
+
.card { background-color: inherit; } + +/* this is default card background color, can't access it as scss variable */ +.card-footer.bg-card-footer-default { + background-color: rgb(247, 247, 247); +} diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js index c24feb89a..f9e6e82d3 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js @@ -30,7 +30,7 @@ const GroupFooter = observer( } = this.props; return ( -
+
{group.shared.annotations .filter(a => a.isLink === false) diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js index 578f647a7..61c33bfc8 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js @@ -23,7 +23,6 @@ const GroupHeader = observer( }).isRequired, group: APIGroup.isRequired, silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired, - headerBackgroundClass: PropTypes.string.isRequired, themedCounters: PropTypes.bool.isRequired }; @@ -32,13 +31,12 @@ const GroupHeader = observer( collapseStore, group, silenceFormStore, - headerBackgroundClass, themedCounters } = this.props; return (
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js index dd27f11d7..581ad2621 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js @@ -14,7 +14,7 @@ import { APIGroup } from "Models/API"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { IsMobile } from "Common/Device"; -import { BackgroundClassMap, BorderClassMap } from "Common/Colors"; +import { BackgroundClassMap } from "Common/Colors"; import { MountFade } from "Components/Animations/MountFade"; import { TooltipWrapper } from "Components/TooltipWrapper"; import { GroupHeader } from "./GroupHeader"; @@ -179,19 +179,14 @@ const AlertGroup = observer( } let themedCounters = true; - const groupClassesMap = { - background: "bg-light", - border: "border-light" - }; - + let cardBackgroundClass = "bg-light"; if (settingsStore.alertGroupConfig.config.colorTitleBar) { const stateList = Object.entries(group.stateCount) .filter(([k, v]) => v !== 0) .map(([k, _]) => k); if (stateList.length === 1) { const state = stateList.pop(); - groupClassesMap.background = BackgroundClassMap[state]; - groupClassesMap.border = BorderClassMap[state]; + cardBackgroundClass = BackgroundClassMap[state]; themedCounters = false; } } @@ -199,16 +194,15 @@ const AlertGroup = observer( return (
-
+
{this.collapse.value ? null : ( -
+
    {group.alerts .slice(0, this.renderConfig.alertsToRender) diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js index b4cc83977..16ea8fb2c 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js @@ -275,15 +275,15 @@ describe(" renderConfig", () => { }); }); -describe(" theme", () => { - it("renders bg-light border when colorTitleBar=false", () => { +describe(" card theme", () => { + it("renders bg-light background when colorTitleBar=false", () => { settingsStore.alertGroupConfig.config.colorTitleBar = false; group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 }; const tree = MountedAlertGroup(jest.fn(), false); - expect(tree.find(".card").hasClass("border-light")).toBe(true); - expect(tree.find(".card").hasClass("border-danger")).toBe(false); - expect(tree.find(".card").hasClass("border-success")).toBe(false); - expect(tree.find(".card").hasClass("border-secondary")).toBe(false); + expect(tree.find(".card").hasClass("bg-light")).toBe(true); + expect(tree.find(".card").hasClass("bg-danger")).toBe(false); + expect(tree.find(".card").hasClass("bg-success")).toBe(false); + expect(tree.find(".card").hasClass("bg-secondary")).toBe(false); }); it("renders themed titlebar when colorTitleBar=false", () => { @@ -291,20 +291,16 @@ describe(" theme", () => { group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 }; const tree = MountedAlertGroup(jest.fn(), false); expect(tree.find("GroupHeader").props().themedCounters).toBe(true); - expect(tree.find(".card-header").hasClass("bg-light")).toBe(true); - expect(tree.find(".card-header").hasClass("bg-danger")).toBe(false); - expect(tree.find(".card-header").hasClass("bg-success")).toBe(false); - expect(tree.find(".card-header").hasClass("bg-secondary")).toBe(false); }); it("renders bg-light border when colorTitleBar=true and there are multiple alert states", () => { settingsStore.alertGroupConfig.config.colorTitleBar = false; group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 }; const tree = MountedAlertGroup(jest.fn(), false); - expect(tree.find(".card").hasClass("border-light")).toBe(true); - expect(tree.find(".card").hasClass("border-danger")).toBe(false); - expect(tree.find(".card").hasClass("border-success")).toBe(false); - expect(tree.find(".card").hasClass("border-secondary")).toBe(false); + expect(tree.find(".card").hasClass("bg-light")).toBe(true); + expect(tree.find(".card").hasClass("bg-danger")).toBe(false); + expect(tree.find(".card").hasClass("bg-success")).toBe(false); + expect(tree.find(".card").hasClass("bg-secondary")).toBe(false); }); it("renders themed titlebar when colorTitleBar=true and there are multiple alert states", () => { @@ -312,20 +308,16 @@ describe(" theme", () => { group.stateCount = { active: 5, suppressed: 6, unprocessed: 7 }; const tree = MountedAlertGroup(jest.fn(), false); expect(tree.find("GroupHeader").props().themedCounters).toBe(true); - expect(tree.find(".card-header").hasClass("bg-light")).toBe(true); - expect(tree.find(".card-header").hasClass("bg-danger")).toBe(false); - expect(tree.find(".card-header").hasClass("bg-success")).toBe(false); - expect(tree.find(".card-header").hasClass("bg-secondary")).toBe(false); }); - it("renders state based border when colorTitleBar=true and there's only one alert state", () => { + it("renders state based background when colorTitleBar=true and there's only one alert state", () => { settingsStore.alertGroupConfig.config.colorTitleBar = true; group.stateCount = { active: 0, suppressed: 5, unprocessed: 0 }; const tree = MountedAlertGroup(jest.fn(), false); - expect(tree.find(".card").hasClass("border-light")).toBe(false); - expect(tree.find(".card").hasClass("border-danger")).toBe(false); - expect(tree.find(".card").hasClass("border-success")).toBe(true); - expect(tree.find(".card").hasClass("border-secondary")).toBe(false); + expect(tree.find(".card").hasClass("bg-light")).toBe(false); + expect(tree.find(".card").hasClass("bg-danger")).toBe(false); + expect(tree.find(".card").hasClass("bg-success")).toBe(true); + expect(tree.find(".card").hasClass("bg-secondary")).toBe(false); }); it("renders unthemed titlebar when colorTitleBar=true and there's only one alert state", () => { @@ -333,9 +325,5 @@ describe(" theme", () => { group.stateCount = { active: 5, suppressed: 0, unprocessed: 0 }; const tree = MountedAlertGroup(jest.fn(), false); expect(tree.find("GroupHeader").props().themedCounters).toBe(false); - expect(tree.find(".card-header").hasClass("bg-light")).toBe(false); - expect(tree.find(".card-header").hasClass("bg-danger")).toBe(true); - expect(tree.find(".card-header").hasClass("bg-success")).toBe(false); - expect(tree.find(".card-header").hasClass("bg-secondary")).toBe(false); }); });