github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-08-23 11:56:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix bootstrap 5.2 builds

Browse Source
This commit is contained in:
Łukasz Mierzwa
2022-07-26 12:24:19 +01:00
committed by Łukasz Mierzwa
parent 8fcfd22ccd
commit 661ca3d287
11 changed files with 95 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+6
View File
@@ -1,5 +1,11 @@
# Changelog
## v0.106
### Changed
- Upgraded [Bootstrap](https://getbootstrap.com/) to v5.2.
## v0.105
### Added
ui/src/Components/InhibitedByModal/InhibitedByModalContent.tsx
+16 -7
View File
@@ -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<{
<div className="modal-body">
<PaginatedAlertList
alertStore={alertStore}
filters={[
FormatQuery(
StaticLabels.Fingerprint,
QueryOperators.Regex,
`^(${fingerprints.join("|")})$`
),
]}
filters={[formatQuery(fingerprints)]}
/>
</div>
</>
ui/src/Components/InhibitedByModal/index.test.tsx
+17 -7
View File
@@ -20,7 +20,7 @@ afterEach(() => {
describe("<InhibitedByModal />", () => {
it("renders a spinner placeholder while modal content is loading", () => {
const tree = mount(
<InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
<InhibitedByModal alertStore={alertStore} fingerprints={["foo"]} />
);
const toggle = tree.find("span.badge.bg-light");
toggle.simulate("click");
@@ -30,7 +30,17 @@ describe("<InhibitedByModal />", () => {
it("renders modal content if fallback is not used", () => {
const tree = mount(
<InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
<InhibitedByModal alertStore={alertStore} fingerprints={["foo"]} />
);
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(
<InhibitedByModal alertStore={alertStore} fingerprints={["foo", "bar"]} />
);
const toggle = tree.find("span.badge.bg-light");
toggle.simulate("click");
@@ -40,7 +50,7 @@ describe("<InhibitedByModal />", () => {
it("hides the modal when toggle() is called twice", () => {
const tree = mount(
<InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
<InhibitedByModal alertStore={alertStore} fingerprints={["foo"]} />
);
const toggle = tree.find("span.badge.bg-light");
@@ -61,7 +71,7 @@ describe("<InhibitedByModal />", () => {
it("hides the modal when button.btn-close is clicked", () => {
const tree = mount(
<InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
<InhibitedByModal alertStore={alertStore} fingerprints={["foo"]} />
);
const toggle = tree.find("span.badge.bg-light");
@@ -78,7 +88,7 @@ describe("<InhibitedByModal />", () => {
it("'modal-open' class is appended to body node when modal is visible", () => {
const tree = mount(
<InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
<InhibitedByModal alertStore={alertStore} fingerprints={["foo"]} />
);
const toggle = tree.find("span.badge.bg-light");
toggle.simulate("click");
@@ -87,7 +97,7 @@ describe("<InhibitedByModal />", () => {
it("'modal-open' class is removed from body node after modal is hidden", () => {
const tree = mount(
<InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
<InhibitedByModal alertStore={alertStore} fingerprints={["foo"]} />
);
tree.find("span.badge.bg-light").simulate("click");
@@ -102,7 +112,7 @@ describe("<InhibitedByModal />", () => {
it("'modal-open' class is removed from body node after modal is unmounted", () => {
const tree = mount(
<InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
<InhibitedByModal alertStore={alertStore} fingerprints={["foo"]} />
);
const toggle = tree.find("span.badge.bg-light");
ui/src/Components/Pagination/index.tsx
+4 -1
View File
@@ -106,7 +106,10 @@ const PageSelect: FC<{
page === activePage ? "active font-weight-bold" : ""
}`}
>
<button className="page-link" onClick={() => onChange(page)}>
<button
className={`page-link ${page === activePage ? "active" : ""}`}
onClick={() => onChange(page)}
>
{page}
</button>
</li>
ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap
+3 -3
View File
@@ -34,17 +34,17 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
</button>
</li>
<li class=\\"page-item active font-weight-bold\\">
<button class=\\"page-link\\">
<button class=\\"page-link active\\">
1
</button>
</li>
<li class=\\"page-item \\">
<button class=\\"page-link\\">
<button class=\\"page-link \\">
2
</button>
</li>
<li class=\\"page-item \\">
<button class=\\"page-link\\">
<button class=\\"page-link \\">
3
</button>
</li>
ui/src/Styles/BootstrapRoot.scss
+40 -21
View File
@@ -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};
}
ui/src/Styles/Components/_BaseLabel.scss
+3
View File
@@ -9,6 +9,9 @@
.components-label {
border: 1px solid transparent;
&:hover {
border: 1px solid transparent;
}
overflow: hidden;
max-width: 100%;
ui/src/Styles/Components/_ManagedSilence.scss
-6
View File
@@ -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;
ui/src/Styles/LightTheme.scss
+3
View File
@@ -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;
ui/src/Styles/RebootlessBootstrap.scss
+1
View File
@@ -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
ui/src/Styles/ResetCSS.scss
+2 -1
View File
@@ -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";