github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): correctly set card background color

Browse Source 
Cards only need color definition once, on the top level element
This commit is contained in:
Łukasz Mierzwa
2019-04-19 22:48:43 +01:00
parent f5ee85e1b1
commit 4b37c209fa
6 changed files with 29 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
View File

@@ -2,7 +2,7 @@
exports[`<GroupFooter /> matches snapshot 1`] = `
"
<div class=\\"card-footer px-2 py-1\\">
<div class=\\"card-footer bg-card-footer-default px-2 py-1\\">
<div class=\\"mb-1\\">
<div class
style=\\"display: inline;\\"
@@ -145,7 +145,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
"
<div class=\\"card-footer px-2 py-1\\">
<div class=\\"card-footer bg-card-footer-default px-2 py-1\\">
<div class=\\"mb-1\\">
<div class
style=\\"display: inline;\\"

5
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.css
View File

@@ -6,3 +6,8 @@
.components-grid-alertgrid-alertgroup-shared-silence > .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);
}

2
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js
View File

@@ -30,7 +30,7 @@ const GroupFooter = observer(
} = this.props;
return (
<div className="card-footer px-2 py-1">
<div className="card-footer bg-card-footer-default px-2 py-1">
<div className="mb-1">
{group.shared.annotations
.filter(a => a.isLink === false)

4
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.js
View File

@@ -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 (
<h5
className={`card-header ${headerBackgroundClass} mb-0 d-flex flex-row px-2 py-1 ${
className={`card-header mb-0 d-flex flex-row px-2 py-1 ${
collapseStore.value ? "border-bottom-0" : ""
}`}
>

16
ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
View File

@@ -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 (
<div className="components-grid-alertgrid-alertgroup p-1" style={style}>
<MountFade in={true}>
<div className={`card ${groupClassesMap.border}`}>
<div className={`card ${cardBackgroundClass}`}>
<GroupHeader
collapseStore={this.collapse}
group={group}
silenceFormStore={silenceFormStore}
headerBackgroundClass={groupClassesMap.background}
themedCounters={themedCounters}
/>
{this.collapse.value ? null : (
<div className="card-body px-2 py-1">
<div className="card-body bg-white px-2 py-1">
<ul className="list-group">
{group.alerts
.slice(0, this.renderConfig.alertsToRender)

42
ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
View File

@@ -275,15 +275,15 @@ describe("<AlertGroup /> renderConfig", () => {
});
});
describe("<AlertGroup /> theme", () => {
it("renders bg-light border when colorTitleBar=false", () => {
describe("<AlertGroup /> 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("<AlertGroup /> 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("<AlertGroup /> 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("<AlertGroup /> 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);
});
});