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

fix(ui): migrate to react-select v3

Browse Source
This commit is contained in:
Łukasz Mierzwa
2019-05-27 16:50:30 +01:00
parent 434688ee04
commit 92a7c8c847
18 changed files with 138 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js
+2 -2
View File
@@ -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
</label>
</div>
<ReactSelect
<Select
styles={ReactSelectStyles}
classNamePrefix="react-select"
instanceId="configuration-collapse"
ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.test.js
+3 -3
View File
@@ -27,7 +27,7 @@ describe("<AlertGroupCollapseConfiguration />", () => {
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("<AlertGroupCollapseConfiguration />", () => {
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("<AlertGroupCollapseConfiguration />", () => {
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(
ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js
+2 -2
View File
@@ -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(
</div>
<div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
<div className="flex-shrink-0 flex-grow-1 flex-basis-auto">
<ReactSelect
<Select
styles={ReactSelectStyles}
classNamePrefix="react-select"
instanceId="configuration-sort-order"
ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.test.js
+4 -4
View File
@@ -125,7 +125,7 @@ describe("<AlertGroupSortConfiguration />", () => {
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("<AlertGroupSortConfiguration />", () => {
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("<AlertGroupSortConfiguration />", () => {
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");
ui/src/Components/MainModal/Configuration/SortLabelName.js
+3 -3
View File
@@ -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 (
<CreatableSelect
<Creatable
styles={ReactSelectStyles}
classNamePrefix="react-select"
instanceId="configuration-sort-label"
ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap
+7 -7
View File
@@ -8,10 +8,10 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
Default alert group display
</label>
</div>
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
<div class=\\"css-dvua67-singleValue react-select__single-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-1g6gooi\\">
@@ -34,11 +34,11 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
+7 -7
View File
@@ -10,10 +10,10 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
</div>
<div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
<div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
<div class=\\"css-dvua67-singleValue react-select__single-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Use defaults from karma config file
</div>
<div class=\\"css-1g6gooi\\">
@@ -36,11 +36,11 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
+14 -14
View File
@@ -191,10 +191,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
Default alert group display
</label>
</div>
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
<div class=\\"css-dvua67-singleValue react-select__single-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-1g6gooi\\">
@@ -217,11 +217,11 @@ exports[`<Configuration /> matches snapshot 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -248,10 +248,10 @@ exports[`<Configuration /> matches snapshot 1`] = `
</div>
<div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
<div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
<div class=\\"css-dvua67-singleValue react-select__single-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Use defaults from karma config file
</div>
<div class=\\"css-1g6gooi\\">
@@ -274,11 +274,11 @@ exports[`<Configuration /> matches snapshot 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
+14 -14
View File
@@ -210,10 +210,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
Default alert group display
</label>
</div>
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
<div class=\\"css-dvua67-singleValue react-select__single-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Collapse on mobile
</div>
<div class=\\"css-1g6gooi\\">
@@ -236,11 +236,11 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -267,10 +267,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</div>
<div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
<div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
<div class=\\"css-dvua67-singleValue react-select__single-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
Use defaults from karma config file
</div>
<div class=\\"css-1g6gooi\\">
@@ -293,11 +293,11 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
+45 -45
View File
@@ -2,9 +2,9 @@
exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
"
<div class=\\"css-1pcexqc-container\\">
<span class=\\"css-3esr4u-a11yText\\"
aria-live=\\"assertive\\"
<div class=\\" css-2b097c-container\\">
<span aria-live=\\"assertive\\"
class=\\"css-1laao21-a11yText\\"
>
<p id=\\"aria-selection-event\\">
&nbsp;
@@ -13,9 +13,9 @@ exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
&nbsp; 0 results available. Select is focused ,type to refine list, press Down to open the menu,
</p>
</span>
<div class=\\"css-1qu0514-control react-select__control react-select__control--is-focused\\">
<div class=\\"css-pb81dw react-select__value-container\\">
<div class=\\"css-151xaom-placeholder react-select__placeholder\\">
<div class=\\"react-select__control react-select__control--is-focused css-nmfa0p-control\\">
<div class=\\"react-select__value-container css-pb81dw\\">
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-1g6gooi\\">
@@ -38,11 +38,11 @@ exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-1thkkgx-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-1gtu0rj-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -63,10 +63,10 @@ exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
"
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
<div class=\\"css-dvua67-singleValue react-select__single-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
foo
</div>
<div class=\\"css-1g6gooi\\">
@@ -89,11 +89,11 @@ exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -114,10 +114,10 @@ exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
"
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-pb81dw react-select__value-container\\">
<div class=\\"css-151xaom-placeholder react-select__placeholder\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container css-pb81dw\\">
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-1g6gooi\\">
@@ -140,11 +140,11 @@ exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -165,10 +165,10 @@ exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
"
<div class=\\"css-ssi0ig-container react-select--is-disabled\\">
<div class=\\"css-63ovm4-control react-select__control react-select__control--is-disabled\\">
<div class=\\"css-57r8lk react-select__value-container react-select__value-container--has-value\\">
<div class=\\"css-ue83k8-singleValue react-select__single-value react-select__single-value--is-disabled\\">
<div class=\\"react-select--is-disabled css-14jk2my-container\\">
<div class=\\"react-select__control react-select__control--is-disabled css-jk9kg2-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-57r8lk\\">
<div class=\\"react-select__single-value react-select__single-value--is-disabled css-107lb6w-singleValue\\">
foo
</div>
<div class=\\"css-1g6gooi\\">
@@ -192,11 +192,11 @@ exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
</div>
</div>
</div>
<div class=\\"css-191n9vh react-select__indicators\\">
<span class=\\"css-622gbt-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-191n9vh\\">
<span class=\\"react-select__indicator-separator css-109onse-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -217,10 +217,10 @@ exports[`<CustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
"
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi\\">
<div class=\\"css-151xaom-placeholder react-select__placeholder\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--is-multi css-10war8y\\">
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-1g6gooi\\">
@@ -243,11 +243,11 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -268,10 +268,10 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`] = `
"
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value\\">
<div class=\\"css-8oj454-multiValue react-select__multi-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-10war8y\\">
<div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
<div class=\\"css-xbn6jz react-select__multi-value__label\\">
foo
</div>
@@ -308,9 +308,9 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<div class=\\"react-select__indicators css-mik995\\">
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__clear-indicator\\"
class=\\"react-select__indicator react-select__clear-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -323,10 +323,10 @@ exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`
</path>
</svg>
</div>
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
ui/src/Components/MultiSelect/index.js
+3 -3
View File
@@ -1,6 +1,6 @@
import React from "react";
import CreatableSelect from "react-select/lib/Creatable";
import Creatable from "react-select/creatable";
const ReactSelectStyles = {
control: (base, state) =>
@@ -90,12 +90,12 @@ const ReactSelectStyles = {
})
};
class MultiSelect extends CreatableSelect {
class MultiSelect extends Creatable {
renderProps = () => ({});
render() {
return (
<CreatableSelect
<Creatable
styles={ReactSelectStyles}
classNamePrefix="react-select"
{...this.renderProps()}
ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
+9 -9
View File
@@ -2,10 +2,10 @@
exports[`<AlertManagerInput /> matches snapshot 1`] = `
"
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value\\">
<div class=\\"css-8oj454-multiValue react-select__multi-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-10war8y\\">
<div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
<div class=\\"css-xbn6jz react-select__multi-value__label\\">
am1 | am2
</div>
@@ -22,7 +22,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
</svg>
</div>
</div>
<div class=\\"css-8oj454-multiValue react-select__multi-value\\">
<div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
<div class=\\"css-xbn6jz react-select__multi-value__label\\">
am3
</div>
@@ -59,9 +59,9 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<div class=\\"react-select__indicators css-mik995\\">
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__clear-indicator\\"
class=\\"react-select__indicator react-select__clear-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -74,10 +74,10 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
</path>
</svg>
</div>
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
ui/src/Components/SilenceModal/AlertManagerInput/index.js
+2 -2
View File
@@ -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 { AlertStore } from "Stores/AlertStore";
import {
@@ -67,7 +67,7 @@ const AlertManagerInput = observer(
}
return (
<ReactSelect
<Select
styles={ReactSelectStyles}
classNamePrefix="react-select"
instanceId="silence-input-alertmanagers"
ui/src/Components/SilenceModal/AlertManagerInput/index.test.js
+2 -2
View File
@@ -125,7 +125,7 @@ describe("<AlertManagerInput />", () => {
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("<AlertManagerInput />", () => {
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);
ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.test.js
+2 -2
View File
@@ -72,7 +72,7 @@ describe("<LabelNameInput />", () => {
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("<LabelNameInput />", () => {
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");
});
ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js
+5 -5
View File
@@ -84,7 +84,7 @@ describe("<LabelValueInput />", () => {
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("<LabelValueInput />", () => {
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("<LabelValueInput />", () => {
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("<LabelValueInput />", () => {
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("<LabelValueInput />", () => {
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);
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap
+7 -7
View File
@@ -2,10 +2,10 @@
exports[`<LabelNameInput /> matches snapshot 1`] = `
"
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-pb81dw react-select__value-container react-select__value-container--has-value\\">
<div class=\\"css-dvua67-singleValue react-select__single-value\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-pb81dw\\">
<div class=\\"react-select__single-value css-1uccc91-singleValue\\">
name
</div>
<div class=\\"css-1g6gooi\\">
@@ -28,11 +28,11 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
+7 -7
View File
@@ -2,9 +2,9 @@
exports[`<LabelValueInput /> matches snapshot 1`] = `
"
<div class=\\"css-1pcexqc-container\\">
<div class=\\"css-75iuk3-control react-select__control\\">
<div class=\\"css-10war8y react-select__value-container react-select__value-container--is-multi\\">
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-au8pbo-control\\">
<div class=\\"react-select__value-container react-select__value-container--is-multi css-10war8y\\">
<div title=\\"Number of alerts matching this label\\"
class
style=\\"display:inline-block;max-width:100%\\"
@@ -29,7 +29,7 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
</span>
</div>
<div>
<div class=\\"css-151xaom-placeholder react-select__placeholder\\">
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Label value
</div>
</div>
@@ -53,11 +53,11 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
</div>
</div>
</div>
<div class=\\"css-mik995 react-select__indicators\\">
<span class=\\"css-bgvzuu-indicatorSeparator react-select__indicator-separator\\">
<div class=\\"react-select__indicators css-mik995\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"css-16pqwjk-indicatorContainer react-select__indicator react-select__dropdown-indicator\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"