diff --git a/ui/.storybook/config.js b/ui/.storybook/config.js index 52284b361..6b5ae9036 100644 --- a/ui/.storybook/config.js +++ b/ui/.storybook/config.js @@ -1,15 +1,62 @@ -import { configure, getStorybook, setAddon } from "@storybook/react"; +import React from "react"; +import { + configure, + getStorybook, + setAddon, + addDecorator +} from "@storybook/react"; import createPercyAddon from "@percy-io/percy-storybook"; import { advanceTo } from "jest-date-mock"; +import { ThemeContext } from "Components/Theme"; +import { ReactSelectColors, ReactSelectStyles } from "Components/MultiSelect"; + const { percyAddon, serializeStories } = createPercyAddon(); setAddon(percyAddon); // mock date so the silence form always shows same preview advanceTo(new Date(Date.UTC(2018, 7, 14, 17, 36, 40))); +addDecorator(story => { + document.body.style = ""; + return story(); +}); +addDecorator(story => { + return ( +
+
+ + {story()} + +
+
+
+ + {story()} + +
+
+ ); +}); + const req = require.context("../src/Components", true, /\.stories\.(js|tsx)$/); function loadStories() { diff --git a/ui/src/App.scss b/ui/src/App.scss deleted file mode 100644 index 85e38c8c4..000000000 --- a/ui/src/App.scss +++ /dev/null @@ -1,32 +0,0 @@ -// bundled font assets, so we don't need to talk to Google Fonts API -@import "src/Fonts.scss"; - -@import "Theme.scss"; - -@import "~bootstrap/scss/bootstrap"; -@import "~bootswatch/dist/flatly/bootswatch"; - -// negative margin used for silence expiry badges with progress -.nmb-05 { - margin-bottom: -($spacer * 0.125) !important; -} - -// this is used for navbar, to make it transparent -.bg-primary-transparent { - background-color: rgba($primary, 0.95); -} -// version for modals -.bg-primary-transparent-80 { - background-color: rgba($dark, 0.8); -} - -.cursor-pointer { - cursor: pointer; -} -.cursor-text { - cursor: text; -} - -.mw-1p { - min-width: 1%; -} diff --git a/ui/src/App.test.js b/ui/src/App.test.js index 03fe95049..4e6d4467c 100644 --- a/ui/src/App.test.js +++ b/ui/src/App.test.js @@ -1,6 +1,6 @@ import React from "react"; -import { shallow } from "enzyme"; +import { shallow, mount } from "enzyme"; import { NewUnappliedFilter } from "Stores/AlertStore"; import { App } from "./App"; @@ -18,12 +18,15 @@ beforeEach(() => { // createing App instance will push current filters into window.location // ensure it's wiped after each test window.history.pushState({}, "App", "/"); + + document.body.className = ""; }); afterEach(() => { localStorage.setItem("savedFilters", ""); jest.restoreAllMocks(); window.history.pushState({}, "App", "/"); + document.body.className = ""; }); describe("", () => { @@ -155,7 +158,19 @@ describe("", () => { window.onpopstate(event); }); - it("appends 'dark-theme' class to #root if dark mode is enabled", () => { + it("appends correct theme class to #root if dark mode is disabled", () => { + const tree = shallow( + + ); + tree.instance().componentWillUnmount(); + + expect(document.body.className.split(" ")).toContain("theme-light"); + }); + + it("appends 'theme-dark' class to #root if dark mode is enabled", () => { const tree = shallow( ", () => { ); tree.instance().componentWillUnmount(); - expect(document.body.className.split(" ")).toContain("dark-theme"); + expect(document.body.className.split(" ")).toContain("theme-dark"); + }); + + it("toggling settingsStore.themeConfig.config.darkTheme modifies the theme", () => { + const tree = mount( + + ); + tree.update(); + expect(document.body.className.split(" ")).toContain("theme-light"); + + tree.instance().settingsStore.themeConfig.config.darkTheme = true; + tree.update(); + expect(document.body.className.split(" ")).toContain("theme-dark"); + tree.instance().componentWillUnmount(); }); }); diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 2f50957d0..f961e3d2a 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,5 +1,7 @@ import React, { Component } from "react"; +import { observer } from "mobx-react"; + import { AlertStore, DecodeLocationSearch } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; @@ -7,10 +9,12 @@ import { NavBar } from "Components/NavBar"; import { Grid } from "Components/Grid"; import { Fetcher } from "Components/Fetcher"; import { FaviconBadge } from "Components/FaviconBadge"; +import { ReactSelectColors, ReactSelectStyles } from "Components/MultiSelect"; +import { Theme, ThemeContext } from "Components/Theme"; import { ErrorBoundary } from "./ErrorBoundary"; -import "./App.scss"; -import "./DarkTheme.scss"; +import "Styles/ResetCSS.scss"; +import "Styles/App.scss"; interface UIDefaults { Refresh: number; @@ -27,81 +31,98 @@ interface AppProps { uiDefaults: UIDefaults; } -class App extends Component { - alertStore: AlertStore; - silenceFormStore: SilenceFormStore; - settingsStore: Settings; - filters: Array = []; +const App = observer( + class App extends Component { + alertStore: AlertStore; + silenceFormStore: SilenceFormStore; + settingsStore: Settings; + filters: Array = []; - constructor(props: AppProps) { - super(props); + constructor(props: AppProps) { + super(props); - const { defaultFilters, uiDefaults } = this.props; + const { defaultFilters, uiDefaults } = this.props; - this.silenceFormStore = new SilenceFormStore(); - this.settingsStore = new Settings(uiDefaults); + this.silenceFormStore = new SilenceFormStore(); + this.settingsStore = new Settings(uiDefaults); - let filters; + this.state = { darkTheme: false }; - // parse and decode request query args - const p = DecodeLocationSearch(window.location.search); + let filters; - // p.defaultsUsed means that karma URI didn't have ?q=foo query args - if (p.defaultsUsed) { - // no ?q=foo set, use defaults saved by the user or from backend config - if (this.settingsStore.savedFilters.config.present) { - filters = this.settingsStore.savedFilters.config.filters; + // parse and decode request query args + const p = DecodeLocationSearch(window.location.search); + + // p.defaultsUsed means that karma URI didn't have ?q=foo query args + if (p.defaultsUsed) { + // no ?q=foo set, use defaults saved by the user or from backend config + if (this.settingsStore.savedFilters.config.present) { + filters = this.settingsStore.savedFilters.config.filters; + } else { + filters = defaultFilters; + } } else { - filters = defaultFilters; + // user passed ?q=foo, use it as initial filters + filters = p.params.q; } - } else { - // user passed ?q=foo, use it as initial filters - filters = p.params.q; + + this.alertStore = new AlertStore(filters); } - this.alertStore = new AlertStore(filters); + onPopState = (event: PopStateEvent) => { + event.preventDefault(); + const p = DecodeLocationSearch(window.location.search); + this.alertStore.filters.setWithoutLocation(p.params.q); + }; + + componentDidMount() { + window.onpopstate = this.onPopState; + + document.body.classList.toggle( + "theme-dark", + this.settingsStore.themeConfig.config.darkTheme + ); + document.body.classList.toggle( + "theme-light", + !this.settingsStore.themeConfig.config.darkTheme + ); + } + + componentWillUnmount() { + window.onpopstate = () => {}; + } + + render() { + return ( + + + + + + + + + + ); + } } - - onPopState = (event: PopStateEvent) => { - event.preventDefault(); - const p = DecodeLocationSearch(window.location.search); - this.alertStore.filters.setWithoutLocation(p.params.q); - }; - - componentDidMount() { - window.onpopstate = this.onPopState; - - document.body.classList.toggle( - "dark-theme", - this.settingsStore.themeConfig.config.darkTheme - ); - } - - componentWillUnmount() { - window.onpopstate = () => {}; - } - - render() { - return ( - - - - - - - ); - } -} +); export { App }; diff --git a/ui/src/Components/Accordion/index.js b/ui/src/Components/Accordion/index.js index 4a86a5fb0..811857ff2 100644 --- a/ui/src/Components/Accordion/index.js +++ b/ui/src/Components/Accordion/index.js @@ -6,8 +6,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown"; -import "./index.scss"; - const Trigger = ({ text, isOpen }) => (
{text}
@@ -28,7 +26,7 @@ const Accordion = ({ text, content, extraProps }) => ( className="card" openedClassName="card" triggerClassName="card-header cursor-pointer border-bottom-0" - triggerOpenedClassName="card-header cursor-pointer bg-light" + triggerOpenedClassName="card-header cursor-pointer" contentOuterClassName="collapse show" contentInnerClassName="card-body my-2" {...extraProps} diff --git a/ui/src/Components/Accordion/index.scss b/ui/src/Components/Accordion/index.scss deleted file mode 100644 index 5bd4b051e..000000000 --- a/ui/src/Components/Accordion/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -.accordion > .Collapsible.card { - overflow: unset; -} diff --git a/ui/src/Components/AlertAck/index.test.js b/ui/src/Components/AlertAck/index.test.js index b36a4bf2f..9512f7dd8 100644 --- a/ui/src/Components/AlertAck/index.test.js +++ b/ui/src/Components/AlertAck/index.test.js @@ -2,6 +2,8 @@ import React from "react"; import { mount } from "enzyme"; +import toDiffableHtml from "diffable-html"; + import { advanceTo, clear } from "jest-date-mock"; import { MockAlertGroup, MockAlert } from "__mocks__/Alerts.js"; @@ -85,7 +87,7 @@ describe("", () => { it("uses faCheck icon when idle", () => { const tree = MountedAlertAck(); - expect(tree.html()).toMatch(/fa-check/); + expect(toDiffableHtml(tree.html())).toMatch(/fa-check/); }); it("uses faExclamationCircle after failed fetch", async () => { @@ -96,7 +98,7 @@ describe("", () => { await expect( tree.instance().submitState.silencesByCluster["default"].fetch ).resolves.toBeUndefined(); - expect(tree.html()).toMatch(/fa-exclamation-circle/); + expect(toDiffableHtml(tree.html())).toMatch(/fa-exclamation-circle/); }); it("[v1] uses faCheckCircle after successful fetch", async () => { @@ -109,7 +111,7 @@ describe("", () => { await expect( tree.instance().submitState.silencesByCluster["default"].fetch ).resolves.toBeUndefined(); - expect(tree.html()).toMatch(/fa-check-circle/); + expect(toDiffableHtml(tree.html())).toMatch(/fa-check-circle/); }); it("[v2] uses faCheckCircle after successful fetch", async () => { @@ -121,7 +123,7 @@ describe("", () => { await expect( tree.instance().submitState.silencesByCluster["default"].fetch ).resolves.toBeUndefined(); - expect(tree.html()).toMatch(/fa-check-circle/); + expect(toDiffableHtml(tree.html())).toMatch(/fa-check-circle/); }); it("sends a request on click", () => { diff --git a/ui/src/Components/Animations/DropdownSlide/index.js b/ui/src/Components/Animations/DropdownSlide/index.js index 5275644c0..f2b72a474 100644 --- a/ui/src/Components/Animations/DropdownSlide/index.js +++ b/ui/src/Components/Animations/DropdownSlide/index.js @@ -3,8 +3,6 @@ import PropTypes from "prop-types"; import { CSSTransition } from "react-transition-group"; -import "./index.css"; - const DropdownSlide = ({ children, duration, ...props }) => ( ( ( ( matches snapshot when inhibited 1`] = ` " -
  • +
  • matches snapshot when inhibited 1`] = ` exports[` matches snapshot with showAlertmanagers=false showReceiver=false 1`] = ` " -
  • +
  • ", () => { it("contains value when visible=true", () => { const tree = ShallowNonLinkAnnotation(true); - expect(tree.html()).toMatch(/some long text/); + expect(toDiffableHtml(tree.html())).toMatch(/some long text/); }); it("matches snapshot when visible=false", () => { @@ -89,7 +89,7 @@ describe("", () => { it("doesn't contain value when visible=false", () => { const tree = ShallowNonLinkAnnotation(false); - expect(tree.html()).not.toMatch(/some long text/); + expect(toDiffableHtml(tree.html())).not.toMatch(/some long text/); }); it("links inside annotation are rendered as a.href", () => { @@ -100,19 +100,19 @@ describe("", () => { it("clicking on - icon hides the value", () => { const tree = MountedNonLinkAnnotation(true); - expect(tree.html()).toMatch(/fa-search-minus/); - expect(tree.html()).toMatch(/some long text/); + expect(toDiffableHtml(tree.html())).toMatch(/fa-search-minus/); + expect(toDiffableHtml(tree.html())).toMatch(/some long text/); tree.find(".fa-search-minus").simulate("click"); - expect(tree.html()).toMatch(/fa-search-plus/); - expect(tree.html()).not.toMatch(/some long text/); + expect(toDiffableHtml(tree.html())).toMatch(/fa-search-plus/); + expect(toDiffableHtml(tree.html())).not.toMatch(/some long text/); }); it("clicking on + icon shows the value", () => { const tree = MountedNonLinkAnnotation(false); - expect(tree.html()).toMatch(/fa-search-plus/); - expect(tree.html()).not.toMatch(/some long text/); + expect(toDiffableHtml(tree.html())).toMatch(/fa-search-plus/); + expect(toDiffableHtml(tree.html())).not.toMatch(/some long text/); tree.find(".components-grid-annotation").simulate("click"); - expect(tree.html()).toMatch(/fa-search-minus/); - expect(tree.html()).toMatch(/some long text/); + expect(toDiffableHtml(tree.html())).toMatch(/fa-search-minus/); + expect(toDiffableHtml(tree.html())).toMatch(/some long text/); }); }); 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 077095c38..ae7faf160 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 f983f6db6..7f0ea3470 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.js @@ -11,8 +11,6 @@ import { FilteringLabel } from "Components/Labels/FilteringLabel"; import { RenderNonLinkAnnotation, RenderLinkAnnotation } from "../Annotation"; import { RenderSilence } from "../Silences"; -import "./index.css"; - const GroupFooter = observer( class GroupFooter extends Component { static propTypes = { @@ -33,7 +31,7 @@ const GroupFooter = observer( } = this.props; return ( -
    +
    {group.shared.annotations .filter(a => a.isLink === false) diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js index 410edd3e3..f90dc113b 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js @@ -25,11 +25,7 @@ import { GroupFooter } from "./GroupFooter"; const LoadButton = ({ icon, action, tooltip }) => { return ( - @@ -224,7 +220,7 @@ const AlertGroup = observer( setIsMenuOpen={this.renderConfig.setIsMenuOpen} /> {this.collapse.value ? null : ( -
    +
      {group.alerts .slice(0, this.renderConfig.alertsToRender) @@ -244,7 +240,7 @@ const AlertGroup = observer( /> ))} {group.alerts.length > this.defaultRenderCount ? ( -
    • +
    • matches snapshot 1`] = ` " -

      +

      ( -

      +

      diff --git a/ui/src/Components/Grid/index.stories.js b/ui/src/Components/Grid/index.stories.js index 449e0d476..00054d8c9 100644 --- a/ui/src/Components/Grid/index.stories.js +++ b/ui/src/Components/Grid/index.stories.js @@ -10,7 +10,7 @@ import { FatalError } from "./FatalError"; import { UpgradeNeeded } from "./UpgradeNeeded"; import { Grid } from "."; -import "Percy.scss"; +import "Styles/Percy.scss"; storiesOf("Grid", module) .add("FatalError", () => { diff --git a/ui/src/Components/Labels/BaseLabel/index.js b/ui/src/Components/Labels/BaseLabel/index.js index d5a0a522f..d1269ff79 100644 --- a/ui/src/Components/Labels/BaseLabel/index.js +++ b/ui/src/Components/Labels/BaseLabel/index.js @@ -10,8 +10,6 @@ import { } from "Common/Colors"; import { QueryOperators, FormatQuery, StaticLabels } from "Common/Query"; -import "./index.scss"; - const isBackgroundDark = brightness => brightness <= 125; // base class for shared code, not used directly diff --git a/ui/src/Components/Labels/FilterInputLabel/index.js b/ui/src/Components/Labels/FilterInputLabel/index.js index e2dce2b4c..b03036fc3 100644 --- a/ui/src/Components/Labels/FilterInputLabel/index.js +++ b/ui/src/Components/Labels/FilterInputLabel/index.js @@ -15,8 +15,6 @@ import { QueryOperators } from "Common/Query"; import { TooltipWrapper } from "Components/TooltipWrapper"; import { BaseLabel } from "Components/Labels/BaseLabel"; -import "./index.scss"; - const FilterInputLabel = observer( class FilterInputLabel extends BaseLabel { static propTypes = { @@ -98,7 +96,7 @@ const FilterInputLabel = observer( value={filter.raw} propName="raw" change={this.onChange} - classEditing="py-0 border-0 bg-light text-black rounded" + classEditing="py-0 border-0 editing rounded" afterStart={alertStore.status.pause} afterFinish={alertStore.status.resume} /> diff --git a/ui/src/Components/Labels/HistoryLabel/index.js b/ui/src/Components/Labels/HistoryLabel/index.js index 991847591..e3312d779 100644 --- a/ui/src/Components/Labels/HistoryLabel/index.js +++ b/ui/src/Components/Labels/HistoryLabel/index.js @@ -7,8 +7,6 @@ import { QueryOperators } from "Common/Query"; import { AlertStore } from "Stores/AlertStore"; import { BaseLabel } from "Components/Labels/BaseLabel"; -import "./index.css"; - const HistoryLabel = observer( class HistoryLabel extends BaseLabel { static propTypes = { diff --git a/ui/src/Components/Labels/LabelWithPercent/index.js b/ui/src/Components/Labels/LabelWithPercent/index.js index f072a3b5b..67772bcf2 100644 --- a/ui/src/Components/Labels/LabelWithPercent/index.js +++ b/ui/src/Components/Labels/LabelWithPercent/index.js @@ -10,8 +10,6 @@ import { AlertStore } from "Stores/AlertStore"; import { QueryOperators, FormatQuery } from "Common/Query"; import { BaseLabel } from "Components/Labels/BaseLabel"; -import "./index.scss"; - const LabelWithPercent = observer( class LabelWithPercent extends BaseLabel { static propTypes = { diff --git a/ui/src/Components/Labels/LabelWithPercent/index.test.js b/ui/src/Components/Labels/LabelWithPercent/index.test.js index 6f2390fc6..6befabb3d 100644 --- a/ui/src/Components/Labels/LabelWithPercent/index.test.js +++ b/ui/src/Components/Labels/LabelWithPercent/index.test.js @@ -90,16 +90,16 @@ describe("", () => { it("uses bg-danger when percent is >66", () => { const tree = MountedLabelWithPercent("foo", "bar", 25, 67, 0, false); - expect(tree.html()).toMatch(/progress-bar bg-danger/); + expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-danger/); }); it("uses bg-warning when percent is >33", () => { const tree = MountedLabelWithPercent("foo", "bar", 25, 66, 0, false); - expect(tree.html()).toMatch(/progress-bar bg-warning/); + expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-warning/); }); it("uses bg-success when percent is <=33", () => { const tree = MountedLabelWithPercent("foo", "bar", 25, 33, 0, false); - expect(tree.html()).toMatch(/progress-bar bg-success/); + expect(toDiffableHtml(tree.html())).toMatch(/progress-bar bg-success/); }); }); diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js index 51fde4c2c..d0215c53d 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js @@ -7,13 +7,14 @@ import { observer } from "mobx-react"; import Select from "react-select"; import { Settings } from "Stores/Settings"; -import { ReactSelectStyles } from "Components/MultiSelect"; +import { ThemeContext } from "Components/Theme"; const AlertGroupCollapseConfiguration = observer( class AlertGroupCollapseConfiguration extends Component { static propTypes = { settingsStore: PropTypes.instanceOf(Settings).isRequired }; + static contextType = ThemeContext; constructor(props) { super(props); @@ -56,7 +57,7 @@ const AlertGroupCollapseConfiguration = observer( return (
      { }); const FakeConfiguration = () => { - return mount(); + return mount( + + + + ); }; const ExpandSortLabelSuggestions = async () => { diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.js index 816182a39..a199e0858 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.js @@ -10,8 +10,6 @@ import InputRange from "react-input-range"; import { Settings } from "Stores/Settings"; -import "./InputRange.scss"; - const AlertGroupWidthConfiguration = observer( class AlertGroupWidthConfiguration extends Component { static propTypes = { diff --git a/ui/src/Components/MainModal/Configuration/FetchConfiguration.js b/ui/src/Components/MainModal/Configuration/FetchConfiguration.js index 21cb797b6..afbf521b5 100644 --- a/ui/src/Components/MainModal/Configuration/FetchConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/FetchConfiguration.js @@ -8,8 +8,6 @@ import InputRange from "react-input-range"; import { Settings } from "Stores/Settings"; -import "./InputRange.scss"; - const FetchConfiguration = observer( class FetchConfiguration extends Component { static propTypes = { diff --git a/ui/src/Components/MainModal/Configuration/SortLabelName.js b/ui/src/Components/MainModal/Configuration/SortLabelName.js index 8d68d8238..8b9c09763 100644 --- a/ui/src/Components/MainModal/Configuration/SortLabelName.js +++ b/ui/src/Components/MainModal/Configuration/SortLabelName.js @@ -10,7 +10,7 @@ import { StaticLabels } from "Common/Query"; import { FetchGet } from "Common/Fetch"; import { FormatBackendURI } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; -import { ReactSelectStyles } from "Components/MultiSelect"; +import { ThemeContext } from "Components/Theme"; const valueToOption = v => ({ label: v, value: v }); @@ -19,6 +19,7 @@ const SortLabelName = observer( static propTypes = { settingsStore: PropTypes.instanceOf(Settings).isRequired }; + static contextType = ThemeContext; constructor(props) { super(props); @@ -71,7 +72,7 @@ const SortLabelName = observer( return ( matches snapshot with default value "
      -
      -
      -
      +
      +
      +
      Collapse on mobile
      diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap index 1e3fd53c3..9d431d1cd 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap @@ -6,9 +6,9 @@ exports[` matches snapshot with default values 1`
      -
      -
      -
      +
      +
      +
      Use defaults from karma config file
      diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap index c7ad0cacb..d69874e53 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap @@ -4,7 +4,7 @@ exports[` matches snapshot 1`] = ` "
      -
      +
      Refresh interval @@ -28,7 +28,7 @@ exports[` matches snapshot 1`] = `
      @@ -41,12 +41,12 @@ exports[` matches snapshot 1`] = `
      -
      @@ -75,7 +75,7 @@ exports[` matches snapshot 1`] = `
      -
      +
      Filter bar configuration @@ -99,15 +99,15 @@ exports[` matches snapshot 1`] = `
      - @@ -123,7 +123,7 @@ exports[` matches snapshot 1`] = `
      -
      +
      Theme @@ -147,15 +147,15 @@ exports[` matches snapshot 1`] = `
      -