diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js index f5150225a..338343f2c 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js @@ -4,7 +4,7 @@ import PropTypes from "prop-types"; import { action } from "mobx"; import { observer } from "mobx-react"; -import ReactSelect from "react-select"; +import Select from "react-select"; import { Settings } from "Stores/Settings"; import { ReactSelectStyles } from "Components/MultiSelect"; @@ -60,7 +60,7 @@ const AlertGroupCollapseConfiguration = observer( Default alert group display - ", () => { it("resets stored config to defaults if it is invalid", done => { settingsStore.alertGroupConfig.config.defaultCollapseState = "foo"; const tree = FakeConfiguration(); - const select = tree.find(".react-select__value-container"); + const select = tree.find("div.react-select__value-container"); expect(select.text()).toBe( settingsStore.alertGroupConfig.options.collapsedOnMobile.label ); @@ -43,7 +43,7 @@ describe("", () => { settingsStore.alertGroupConfig.config.defaultCollapseState = settingsStore.alertGroupConfig.options.expanded.value; const tree = FakeConfiguration(); - const select = tree.find(".react-select__value-container"); + const select = tree.find("div.react-select__value-container"); setTimeout(() => { expect(select.text()).toBe( settingsStore.alertGroupConfig.options.expanded.label @@ -57,7 +57,7 @@ describe("", () => { tree .find("input#react-select-configuration-collapse-input") .simulate("change", { target: { value: " " } }); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); options.at(1).simulate("click"); setTimeout(() => { expect(settingsStore.alertGroupConfig.config.defaultCollapseState).toBe( diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js index 1a0146271..66bc5dfec 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js @@ -4,7 +4,7 @@ import PropTypes from "prop-types"; import { action } from "mobx"; import { observer } from "mobx-react"; -import ReactSelect from "react-select"; +import Select from "react-select"; import { Settings } from "Stores/Settings"; import { ReactSelectStyles } from "Components/MultiSelect"; @@ -69,7 +69,7 @@ const AlertGroupSortConfiguration = observer(
- ", () => { it("label select renders suggestions on click", async () => { fetch.mockResponse(JSON.stringify(["alertname", "cluster", "fakeLabel"])); const tree = await ExpandSortLabelSuggestions(); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); expect(options).toHaveLength(3); expect(options.at(0).text()).toBe("alertname"); expect(options.at(1).text()).toBe("cluster"); @@ -135,7 +135,7 @@ describe("", () => { it("label select handles fetch errors", async () => { fetch.mockReject("error"); const tree = await ExpandSortLabelSuggestions(); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); expect(options).toHaveLength(0); }); @@ -143,14 +143,14 @@ describe("", () => { jest.spyOn(console, "error").mockImplementation(() => {}); fetch.mockResponse("invalid JSON"); const tree = await ExpandSortLabelSuggestions(); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); expect(options).toHaveLength(0); }); it("clicking on a label option updates settingsStore", async done => { fetch.mockResponse(JSON.stringify(["alertname", "cluster", "fakeLabel"])); const tree = await ExpandSortLabelSuggestions(); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); options.at(1).simulate("click"); setTimeout(() => { expect(settingsStore.gridConfig.config.sortLabel).toBe("cluster"); diff --git a/ui/src/Components/MainModal/Configuration/SortLabelName.js b/ui/src/Components/MainModal/Configuration/SortLabelName.js index dca03f1eb..216de65c8 100644 --- a/ui/src/Components/MainModal/Configuration/SortLabelName.js +++ b/ui/src/Components/MainModal/Configuration/SortLabelName.js @@ -4,7 +4,7 @@ import PropTypes from "prop-types"; import { action, observable } from "mobx"; import { observer } from "mobx-react"; -import CreatableSelect from "react-select/lib/Creatable"; +import Creatable from "react-select/creatable"; import { StaticLabels } from "Common/Query"; import { FormatBackendURI } from "Stores/AlertStore"; @@ -14,7 +14,7 @@ import { ReactSelectStyles } from "Components/MultiSelect"; const valueToOption = v => ({ label: v, value: v }); const SortLabelName = observer( - class SortLabelName extends CreatableSelect { + class SortLabelName extends Creatable { static propTypes = { settingsStore: PropTypes.instanceOf(Settings).isRequired }; @@ -68,7 +68,7 @@ const SortLabelName = observer( const { settingsStore } = this.props; return ( - matches snapshot with default value Default alert group display
-
-
-
-
+
+
+
+
Collapse on mobile
@@ -34,11 +34,11 @@ exports[` matches snapshot with default value
-
- +
+
matches snapshot with default values 1`
-
-
-
-
+
+
+
+
Use defaults from karma config file
@@ -36,11 +36,11 @@ exports[` matches snapshot with default values 1`
-
- +
+
matches snapshot 1`] = ` Default alert group display
-
-
-
-
+
+
+
+
Collapse on mobile
@@ -217,11 +217,11 @@ exports[` matches snapshot 1`] = `
-
- +
+
matches snapshot 1`] = `
-
-
-
-
+
+
+
+
Use defaults from karma config file
@@ -274,11 +274,11 @@ exports[` matches snapshot 1`] = `
-
- +
+
matches snapshot 1`] = ` Default alert group display
-
-
-
-
+
+
+
+
Collapse on mobile
@@ -236,11 +236,11 @@ exports[` matches snapshot 1`] = `
-
- +
+
matches snapshot 1`] = `
-
-
-
-
+
+
+
+
Use defaults from karma config file
@@ -293,11 +293,11 @@ exports[` matches snapshot 1`] = `
-
- +
+
matches snapshot when focused 1`] = ` " -
- +

  @@ -13,9 +13,9 @@ exports[` matches snapshot when focused 1`] = `   0 results available. Select is focused ,type to refine list, press Down to open the menu,

-
-
-
+
+
+
Select...
@@ -38,11 +38,11 @@ exports[` matches snapshot when focused 1`] = `
-
- +
+
matches snapshot when focused 1`] = ` exports[` matches snapshot with a value 1`] = ` " -
-
-
-
+
+
+
+
foo
@@ -89,11 +89,11 @@ exports[` matches snapshot with a value 1`] = `
-
- +
+
matches snapshot with a value 1`] = ` exports[` matches snapshot with defaults 1`] = ` " -
-
-
-
+
+
+
+
Select...
@@ -140,11 +140,11 @@ exports[` matches snapshot with defaults 1`] = `
-
- +
+
matches snapshot with defaults 1`] = ` exports[` matches snapshot with isDisabled=true 1`] = ` " -
-
-
-
+
+
+
+
foo
@@ -192,11 +192,11 @@ exports[` matches snapshot with isDisabled=true 1`] = `
-
- +
+
matches snapshot with isDisabled=true 1`] = ` exports[` matches snapshot with isMulti=true 1`] = ` " -
-
-
-
+
+
+
+
Select...
@@ -243,11 +243,11 @@ exports[` matches snapshot with isMulti=true 1`] = `
-
- +
+
matches snapshot with isMulti=true 1`] = ` exports[` matches snapshot with isMulti=true and a value 1`] = ` " -
-
-
-
+
+
+
+
foo
@@ -308,9 +308,9 @@ exports[` matches snapshot with isMulti=true and a value 1`
-
+
matches snapshot with isMulti=true and a value 1`
- +
@@ -90,12 +90,12 @@ const ReactSelectStyles = { }) }; -class MultiSelect extends CreatableSelect { +class MultiSelect extends Creatable { renderProps = () => ({}); render() { return ( - matches snapshot 1`] = ` " -
-
-
-
+
+
+
+
am1 | am2
@@ -22,7 +22,7 @@ exports[` matches snapshot 1`] = `
-
+
am3
@@ -59,9 +59,9 @@ exports[` matches snapshot 1`] = `
-
+
matches snapshot 1`] = `
- +
", () => { it("renders all 3 suggestions", () => { const tree = ValidateSuggestions(); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); expect(options).toHaveLength(2); expect(options.at(0).text()).toBe("am1 | am2"); expect(options.at(1).text()).toBe("am3"); @@ -134,7 +134,7 @@ describe("", () => { it("clicking on options appends them to silenceFormStore.data.alertmanagers", () => { silenceFormStore.data.alertmanagers = []; const tree = ValidateSuggestions(); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); options.at(0).simulate("click"); options.at(1).simulate("click"); expect(silenceFormStore.data.alertmanagers).toHaveLength(2); diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js index 4b7677456..ad58c2d24 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js +++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js @@ -72,7 +72,7 @@ describe("", () => { it("renders suggestions", () => { const tree = ValidateSuggestions(); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); expect(options).toHaveLength(2); expect(options.at(0).text()).toBe("job"); expect(options.at(1).text()).toBe("cluster"); @@ -80,7 +80,7 @@ describe("", () => { it("clicking on options updates the matcher", () => { const tree = ValidateSuggestions(); - const option = tree.find(".react-select__option").at(0); + const option = tree.find("div.react-select__option").at(0); option.simulate("click"); expect(matcher.name).toBe("job"); }); diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js index 00a529816..a0a58797d 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js +++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js @@ -84,7 +84,7 @@ describe("", () => { it("renders suggestions", () => { const tree = ValidateSuggestions(); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); expect(options).toHaveLength(2); expect(options.at(0).text()).toBe("foo"); expect(options.at(1).text()).toBe("bar"); @@ -92,7 +92,7 @@ describe("", () => { it("clicking on options appends them to matcher.values", () => { const tree = ValidateSuggestions(); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); options.at(0).simulate("click"); options.at(1).simulate("click"); expect(matcher.values).toHaveLength(2); @@ -103,7 +103,7 @@ describe("", () => { it("selecting one option doesn't force matcher.isRegex=true", () => { const tree = ValidateSuggestions(); expect(matcher.isRegex).toBe(false); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); options.at(0).simulate("click"); expect(matcher.isRegex).toBe(false); }); @@ -112,7 +112,7 @@ describe("", () => { matcher.isRegex = true; const tree = ValidateSuggestions(); expect(matcher.isRegex).toBe(true); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); options.at(0).simulate("click"); expect(matcher.isRegex).toBe(false); }); @@ -120,7 +120,7 @@ describe("", () => { it("selecting multiple options forces matcher.isRegex=true", () => { const tree = ValidateSuggestions(); expect(matcher.isRegex).toBe(false); - const options = tree.find(".react-select__option"); + const options = tree.find("div.react-select__option"); options.at(0).simulate("click"); options.at(1).simulate("click"); expect(matcher.isRegex).toBe(true); diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap index 42aa7b30d..f8ad0314e 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap +++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap @@ -2,10 +2,10 @@ exports[` matches snapshot 1`] = ` " -
-
-
-
+
+
+
+
name
@@ -28,11 +28,11 @@ exports[` matches snapshot 1`] = `
-
- +
+
matches snapshot 1`] = ` " -
-
-
+
+
+
matches snapshot 1`] = `
-
+
Label value
@@ -53,11 +53,11 @@ exports[` matches snapshot 1`] = `
-
- +
+