From 661ca3d2878a04c9676ab75f3c83d34f81d68054 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Tue, 26 Jul 2022 09:23:40 +0100 Subject: [PATCH] fix(ui): fix bootstrap 5.2 builds --- CHANGELOG.md | 6 ++ .../InhibitedByModalContent.tsx | 23 ++++--- .../InhibitedByModal/index.test.tsx | 24 +++++--- ui/src/Components/Pagination/index.tsx | 5 +- .../__snapshots__/index.test.tsx.snap | 6 +- ui/src/Styles/BootstrapRoot.scss | 61 ++++++++++++------- ui/src/Styles/Components/_BaseLabel.scss | 3 + ui/src/Styles/Components/_ManagedSilence.scss | 6 -- ui/src/Styles/LightTheme.scss | 3 + ui/src/Styles/RebootlessBootstrap.scss | 1 + ui/src/Styles/ResetCSS.scss | 3 +- 11 files changed, 95 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2dd5ff3bd..cada6594d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## v0.106 + +### Changed + +- Upgraded [Bootstrap](https://getbootstrap.com/) to v5.2. + ## v0.105 ### Added diff --git a/ui/src/Components/InhibitedByModal/InhibitedByModalContent.tsx b/ui/src/Components/InhibitedByModal/InhibitedByModalContent.tsx index 94c1e3efa..917ac8193 100644 --- a/ui/src/Components/InhibitedByModal/InhibitedByModalContent.tsx +++ b/ui/src/Components/InhibitedByModal/InhibitedByModalContent.tsx @@ -4,6 +4,21 @@ import type { AlertStore } from "Stores/AlertStore"; import { FormatQuery, QueryOperators, StaticLabels } from "Common/Query"; import { PaginatedAlertList } from "Components/PaginatedAlertList"; +const formatQuery = (fingerprints: string[]): string => { + if (fingerprints.length === 1) { + return FormatQuery( + StaticLabels.Fingerprint, + QueryOperators.Equal, + fingerprints[0] + ); + } + return FormatQuery( + StaticLabels.Fingerprint, + QueryOperators.Regex, + `^(${fingerprints.join("|")})$` + ); +}; + const InhibitedByModalContent: FC<{ alertStore: AlertStore; fingerprints: string[]; @@ -18,13 +33,7 @@ const InhibitedByModalContent: FC<{
diff --git a/ui/src/Components/InhibitedByModal/index.test.tsx b/ui/src/Components/InhibitedByModal/index.test.tsx index 344432079..31cd23c3a 100644 --- a/ui/src/Components/InhibitedByModal/index.test.tsx +++ b/ui/src/Components/InhibitedByModal/index.test.tsx @@ -20,7 +20,7 @@ afterEach(() => { describe("", () => { it("renders a spinner placeholder while modal content is loading", () => { const tree = mount( - + ); const toggle = tree.find("span.badge.bg-light"); toggle.simulate("click"); @@ -30,7 +30,17 @@ describe("", () => { it("renders modal content if fallback is not used", () => { const tree = mount( - + + ); + const toggle = tree.find("span.badge.bg-light"); + toggle.simulate("click"); + expect(tree.find(".modal-title").text()).toBe("Inhibiting alerts"); + expect(tree.find(".modal-content").find("svg.fa-spinner")).toHaveLength(0); + }); + + it("handles multiple fingerprints", () => { + const tree = mount( + ); const toggle = tree.find("span.badge.bg-light"); toggle.simulate("click"); @@ -40,7 +50,7 @@ describe("", () => { it("hides the modal when toggle() is called twice", () => { const tree = mount( - + ); const toggle = tree.find("span.badge.bg-light"); @@ -61,7 +71,7 @@ describe("", () => { it("hides the modal when button.btn-close is clicked", () => { const tree = mount( - + ); const toggle = tree.find("span.badge.bg-light"); @@ -78,7 +88,7 @@ describe("", () => { it("'modal-open' class is appended to body node when modal is visible", () => { const tree = mount( - + ); const toggle = tree.find("span.badge.bg-light"); toggle.simulate("click"); @@ -87,7 +97,7 @@ describe("", () => { it("'modal-open' class is removed from body node after modal is hidden", () => { const tree = mount( - + ); tree.find("span.badge.bg-light").simulate("click"); @@ -102,7 +112,7 @@ describe("", () => { it("'modal-open' class is removed from body node after modal is unmounted", () => { const tree = mount( - + ); const toggle = tree.find("span.badge.bg-light"); diff --git a/ui/src/Components/Pagination/index.tsx b/ui/src/Components/Pagination/index.tsx index 606993ecb..1a933b8c1 100644 --- a/ui/src/Components/Pagination/index.tsx +++ b/ui/src/Components/Pagination/index.tsx @@ -106,7 +106,10 @@ const PageSelect: FC<{ page === activePage ? "active font-weight-bold" : "" }`} > - diff --git a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap index 384c313d5..11aeaeac0 100644 --- a/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap +++ b/ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap @@ -34,17 +34,17 @@ exports[` matches snapshot 1`] = `
  • -
  • -
  • -
    • diff --git a/ui/src/Styles/BootstrapRoot.scss b/ui/src/Styles/BootstrapRoot.scss index 53fc53279..b8348bbdd 100644 --- a/ui/src/Styles/BootstrapRoot.scss +++ b/ui/src/Styles/BootstrapRoot.scss @@ -6,49 +6,68 @@ // Generate palettes for full colors, grays, and theme colors. @each $color, $value in $colors { - --#{$variable-prefix}#{$color}: #{$value}; + --#{$prefix}#{$color}: #{$value}; } @each $color, $value in $grays { - --#{$variable-prefix}gray-#{$color}: #{$value}; + --#{$prefix}gray-#{$color}: #{$value}; } @each $color, $value in $theme-colors { - --#{$variable-prefix}#{$color}: #{$value}; + --#{$prefix}#{$color}: #{$value}; } @each $color, $value in $theme-colors-rgb { - --#{$variable-prefix}#{$color}-rgb: #{$value}; + --#{$prefix}#{$color}-rgb: #{$value}; } - --#{$variable-prefix}white-rgb: #{to-rgb($white)}; - --#{$variable-prefix}black-rgb: #{to-rgb($black)}; - --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)}; - --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)}; + --#{$prefix}white-rgb: #{to-rgb($white)}; + --#{$prefix}black-rgb: #{to-rgb($black)}; + --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; // Fonts // Note: Use `inspect` for lists so that quoted items keep the quotes. // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 - --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; - --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)}; - --#{$variable-prefix}gradient: #{$gradient}; + --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; + --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; + --#{$prefix}gradient: #{$gradient}; // Root and body - // stylelint-disable custom-property-empty-line-before // scss-docs-start root-body-variables @if $font-size-root != null { - --#{$variable-prefix}root-font-size: #{$font-size-root}; + --#{$prefix}root-font-size: #{$font-size-root}; } - --#{$variable-prefix}body-font-family: #{$font-family-base}; - --#{$variable-prefix}body-font-size: #{$font-size-base}; - --#{$variable-prefix}body-font-weight: #{$font-weight-base}; - --#{$variable-prefix}body-line-height: #{$line-height-base}; - --#{$variable-prefix}body-color: #{$body-color}; + --#{$prefix}body-font-family: #{$font-family-base}; + @include rfs($font-size-base, --#{$prefix}body-font-size); + --#{$prefix}body-font-weight: #{$font-weight-base}; + --#{$prefix}body-line-height: #{$line-height-base}; + --#{$prefix}body-color: #{$body-color}; @if $body-text-align != null { - --#{$variable-prefix}body-text-align: #{$body-text-align}; + --#{$prefix}body-text-align: #{$body-text-align}; } - --#{$variable-prefix}body-bg: #{$body-bg}; + --#{$prefix}body-bg: #{$body-bg}; // scss-docs-end root-body-variables - // stylelint-enable custom-property-empty-line-before + + // scss-docs-start root-border-var + --#{$prefix}border-width: #{$border-width}; + --#{$prefix}border-style: #{$border-style}; + --#{$prefix}border-color: #{$border-color}; + --#{$prefix}border-color-translucent: #{$border-color-translucent}; + + --#{$prefix}border-radius: #{$border-radius}; + --#{$prefix}border-radius-sm: #{$border-radius-sm}; + --#{$prefix}border-radius-lg: #{$border-radius-lg}; + --#{$prefix}border-radius-xl: #{$border-radius-xl}; + --#{$prefix}border-radius-2xl: #{$border-radius-2xl}; + --#{$prefix}border-radius-pill: #{$border-radius-pill}; + // scss-docs-end root-border-var + + --#{$prefix}link-color: #{$link-color}; + --#{$prefix}link-hover-color: #{$link-hover-color}; + + --#{$prefix}code-color: #{$code-color}; + + --#{$prefix}highlight-bg: #{$mark-bg}; } diff --git a/ui/src/Styles/Components/_BaseLabel.scss b/ui/src/Styles/Components/_BaseLabel.scss index de178c07d..b1952bc01 100644 --- a/ui/src/Styles/Components/_BaseLabel.scss +++ b/ui/src/Styles/Components/_BaseLabel.scss @@ -9,6 +9,9 @@ .components-label { border: 1px solid transparent; + &:hover { + border: 1px solid transparent; + } overflow: hidden; max-width: 100%; diff --git a/ui/src/Styles/Components/_ManagedSilence.scss b/ui/src/Styles/Components/_ManagedSilence.scss index 8437d5580..153dd46f7 100644 --- a/ui/src/Styles/Components/_ManagedSilence.scss +++ b/ui/src/Styles/Components/_ManagedSilence.scss @@ -1,10 +1,4 @@ .components-managed-silence { - &.card, - & > .card-header, - & > .card-body { - background-color: $silence-bg; - } - &.card { border-left-width: 3px; border-left-color: $silence-border; diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss index 9c869bb30..82af8b6fa 100644 --- a/ui/src/Styles/LightTheme.scss +++ b/ui/src/Styles/LightTheme.scss @@ -48,6 +48,9 @@ $with-click-light: $black; $accordion-active-bg: $gray-100; $accordion-button-bg: $gray-100; $accordion-button-active-bg: $gray-100; +$accordion-border-color: $gray-300; + +$modal-header-border-color: $gray-300; $table-bg: transparent; $table-accent-bg: transparent; diff --git a/ui/src/Styles/RebootlessBootstrap.scss b/ui/src/Styles/RebootlessBootstrap.scss index c4c025bb2..9303f68fa 100644 --- a/ui/src/Styles/RebootlessBootstrap.scss +++ b/ui/src/Styles/RebootlessBootstrap.scss @@ -2,6 +2,7 @@ @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/utilities"; // Layout & components diff --git a/ui/src/Styles/ResetCSS.scss b/ui/src/Styles/ResetCSS.scss index 66c94a468..f3abf9bdc 100644 --- a/ui/src/Styles/ResetCSS.scss +++ b/ui/src/Styles/ResetCSS.scss @@ -4,9 +4,10 @@ $font-size-base: 1rem; $body-bg: #455a64; @import "bootstrap/scss/functions"; +@import "bootswatch/dist/flatly/variables"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; -@import "bootswatch/dist/flatly/variables"; +@import "bootstrap/scss/maps"; @import "bootstrap/scss/root"; @import "bootstrap/scss/type"; @import "bootstrap/scss/reboot";