github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-05 03:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): drop unused MultiSelect component

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-05-12 13:18:35 +01:00
committed by Łukasz Mierzwa
parent 0f3dabb517
commit 22e1c7c05e
9 changed files with 57 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ui/src/Components/MultiSelect/index.js
View File

@@ -1,22 +0,0 @@
import React from "react";
import Creatable from "react-select/creatable";
import { ThemeContext } from "Components/Theme";
class MultiSelect extends Creatable {
renderProps = () => ({});
render() {
return (
<Creatable
styles={this.context.reactSelectStyles}
classNamePrefix="react-select"
{...this.renderProps()}
/>
);
}
}
MultiSelect.contextType = ThemeContext;
export { MultiSelect };

2
ui/src/Components/SilenceModal/AlertManagerInput/index.js
View File

@@ -12,7 +12,7 @@ import {
AlertmanagerClustersToOption,
} from "Stores/SilenceFormStore";
import { ThemeContext } from "Components/Theme";
import { ValidationError } from "Components/MultiSelect/ValidationError";
import { ValidationError } from "Components/ValidationError";
const AlertManagerInput = ({ alertStore, silenceFormStore }) => {
useEffect(() => {

2
ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.js
View File

@@ -6,7 +6,7 @@ import Creatable from "react-select/creatable";
import { SilenceFormMatcher } from "Models/SilenceForm";
import { FormatBackendURI } from "Stores/AlertStore";
import { useFetchGet } from "Hooks/useFetchGet";
import { ValidationError } from "Components/MultiSelect/ValidationError";
import { ValidationError } from "Components/ValidationError";
import { ThemeContext } from "Components/Theme";
const LabelNameInput = ({ matcher, isValid }) => {

2
ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js
View File

@@ -13,7 +13,7 @@ import { FormatBackendURI } from "Stores/AlertStore";
import { SilenceFormStore } from "Stores/SilenceFormStore";
import { SilenceFormMatcher } from "Models/SilenceForm";
import { useFetchGet } from "Hooks/useFetchGet";
import { ValidationError } from "Components/MultiSelect/ValidationError";
import { ValidationError } from "Components/ValidationError";
import { ThemeContext } from "Components/Theme";
import { MatchCounter } from "./MatchCounter";

48
ui/src/Components/MultiSelect/index.test.js → ui/src/Components/Theme/ReactSelect.test.js
View File

@@ -4,65 +4,35 @@ import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
import { ThemeContext } from "Components/Theme";
import Select from "react-select";
import {
ReactSelectColors,
ReactSelectStyles,
} from "Components/Theme/ReactSelect";
import { MultiSelect } from ".";
const Option = (value) => ({ label: value, value: value });
const Wrapped = (component) => (
<ThemeContext.Provider
value={{
reactSelectStyles: ReactSelectStyles(ReactSelectColors.Light),
}}
>
{component}
</ThemeContext.Provider>
const ThemedSelect = (props) => (
<Select styles={ReactSelectStyles(ReactSelectColors.Light)} {...props} />
);
describe("<MultiSelect />", () => {
it("matches snapshot without any extra props", () => {
const tree = mount(Wrapped(<MultiSelect />));
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
});
class CustomMultiSelect extends MultiSelect {
constructor(props) {
super(props);
this.extraProps = props;
}
renderProps = () => this.extraProps;
}
const WrappedCustomMultiSelect = (props) =>
Wrapped(<CustomMultiSelect {...props} />);
describe("<WrappedCustomMultiSelect />", () => {
it("matches snapshot with defaults", () => {
const tree = mount(<WrappedCustomMultiSelect />);
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
it("matches snapshot with isMulti=true", () => {
const tree = mount(<WrappedCustomMultiSelect isMulti />);
const tree = mount(<ThemedSelect isMulti />);
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
it("matches snapshot when focused", () => {
// this test is to cover styles state.isFocused conditions
const tree = mount(<WrappedCustomMultiSelect autoFocus />);
const tree = mount(<ThemedSelect autoFocus />);
tree.find("input").simulate("focus");
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
it("matches snapshot with a value", () => {
const tree = mount(
<WrappedCustomMultiSelect
<ThemedSelect
defaultValue={Option("foo")}
options={[Option("foo"), Option("bar")]}
/>
@@ -72,7 +42,7 @@ describe("<WrappedCustomMultiSelect />", () => {
it("matches snapshot with isMulti=true and a value", () => {
const tree = mount(
<WrappedCustomMultiSelect
<ThemedSelect
isMulti
defaultValue={Option("foo")}
options={[Option("foo"), Option("bar")]}
@@ -83,7 +53,7 @@ describe("<WrappedCustomMultiSelect />", () => {
it("matches snapshot with isDisabled=true", () => {
const tree = mount(
<WrappedCustomMultiSelect
<ThemedSelect
isDisabled
defaultValue={Option("foo")}
options={[Option("foo"), Option("bar")]}

190
ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap → ui/src/Components/Theme/__snapshots__/ReactSelect.test.js.snap
View File

@@ -1,56 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<MultiSelect /> matches snapshot without any extra props 1`] = `
"
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-r5n82u-control\\">
<div class=\\"react-select__value-container css-1ne8613-ValueContainer\\">
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-2-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
aria-autocomplete=\\"list\\"
style=\\"box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;\\"
value
>
<div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
</div>
</div>
</div>
</div>
<div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-6q0nyr-Svg\\"
>
<path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
</path>
</svg>
</div>
</div>
</div>
</div>
"
`;
exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
"
<div class=\\" css-2b097c-container\\">
@@ -64,19 +13,19 @@ exports[`<WrappedCustomMultiSelect /> 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=\\"react-select__control react-select__control--is-focused css-11rrdhm-control\\">
<div class=\\"react-select__value-container css-1ne8613-ValueContainer\\">
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
<div class=\\" css-11rrdhm-control\\">
<div class=\\" css-1ne8613-ValueContainer\\">
<div class=\\" css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
<div class
style=\\"display: inline-block;\\"
>
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-5-input\\"
id=\\"react-select-3-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
@@ -89,11 +38,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
</div>
</div>
</div>
<div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
<div class=\\" css-vcwr3k-IndicatorsContainer\\">
<span class=\\" css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-1ij327q-indicatorContainer\\"
class=\\" css-1ij327q-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -115,19 +64,19 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
"
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-r5n82u-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
<div class=\\" css-r5n82u-control\\">
<div class=\\" css-1ne8613-ValueContainer\\">
<div class=\\" css-1wh03ml-singleValue\\">
foo
</div>
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
<div class
style=\\"display: inline-block;\\"
>
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-6-input\\"
id=\\"react-select-4-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
@@ -140,62 +89,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
</div>
</div>
</div>
<div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
<div class=\\" css-vcwr3k-IndicatorsContainer\\">
<span class=\\" css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
viewbox=\\"0 0 20 20\\"
aria-hidden=\\"true\\"
focusable=\\"false\\"
class=\\"css-6q0nyr-Svg\\"
>
<path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
</path>
</svg>
</div>
</div>
</div>
</div>
"
`;
exports[`<WrappedCustomMultiSelect /> matches snapshot with defaults 1`] = `
"
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-r5n82u-control\\">
<div class=\\"react-select__value-container css-1ne8613-ValueContainer\\">
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
style=\\"display: inline-block;\\"
>
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-3-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
aria-autocomplete=\\"list\\"
style=\\"box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;\\"
value
>
<div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
</div>
</div>
</div>
</div>
<div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
class=\\" css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -216,21 +114,21 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with defaults 1`] = `
exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
"
<div class=\\"react-select--is-disabled css-14jk2my-container\\">
<div class=\\"react-select__control react-select__control--is-disabled css-r5n82u-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-8r64vq-ValueContainer\\">
<div class=\\"react-select__single-value react-select__single-value--is-disabled css-1wh03ml-singleValue\\">
<div class=\\" css-14jk2my-container\\">
<div class=\\" css-r5n82u-control\\">
<div class=\\" css-8r64vq-ValueContainer\\">
<div class=\\" css-1wh03ml-singleValue\\">
foo
</div>
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
<div class
style=\\"display: inline-block;\\"
>
<input disabled
autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-8-input\\"
id=\\"react-select-6-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
@@ -243,11 +141,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
</div>
</div>
</div>
<div class=\\"react-select__indicators css-15bdmde-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-109onse-indicatorSeparator\\">
<div class=\\" css-15bdmde-IndicatorsContainer\\">
<span class=\\" css-109onse-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
class=\\" css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -269,19 +167,19 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
"
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-r5n82u-control\\">
<div class=\\"react-select__value-container react-select__value-container--is-multi css-1pfcrl6-ValueContainer\\">
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
<div class=\\" css-r5n82u-control\\">
<div class=\\" css-1pfcrl6-ValueContainer\\">
<div class=\\" css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
<div class
style=\\"display: inline-block;\\"
>
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-4-input\\"
id=\\"react-select-2-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
@@ -294,11 +192,11 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
</div>
</div>
</div>
<div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
<div class=\\" css-vcwr3k-IndicatorsContainer\\">
<span class=\\" css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
class=\\" css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -320,13 +218,13 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a value 1`] = `
"
<div class=\\" css-2b097c-container\\">
<div class=\\"react-select__control css-r5n82u-control\\">
<div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-1pfcrl6-ValueContainer\\">
<div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
<div class=\\"css-xbn6jz react-select__multi-value__label\\">
<div class=\\" css-r5n82u-control\\">
<div class=\\" css-1pfcrl6-ValueContainer\\">
<div class=\\"css-owt1hd-multiValue\\">
<div class=\\"css-xbn6jz\\">
foo
</div>
<div class=\\"css-1ucqin4 react-select__multi-value__remove\\">
<div class=\\"css-1ucqin4\\">
<svg height=\\"14\\"
width=\\"14\\"
viewbox=\\"0 0 20 20\\"
@@ -340,13 +238,13 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
</div>
</div>
<div class=\\"css-ps6ina-Input\\">
<div class=\\"react-select__input\\"
<div class
style=\\"display: inline-block;\\"
>
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-7-input\\"
id=\\"react-select-5-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
@@ -359,9 +257,9 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
</div>
</div>
</div>
<div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
<div class=\\" css-vcwr3k-IndicatorsContainer\\">
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__clear-indicator css-tlfecz-indicatorContainer\\"
class=\\" css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"
@@ -374,10 +272,10 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
</path>
</svg>
</div>
<span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
<span class=\\" css-1okebmr-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
class=\\" css-tlfecz-indicatorContainer\\"
>
<svg height=\\"20\\"
width=\\"20\\"

0
ui/src/Components/MultiSelect/__snapshots__/ValidationError.test.js.snap → ui/src/Components/ValidationError/__snapshots__/index.test.js.snap
View File

0
ui/src/Components/MultiSelect/ValidationError.js → ui/src/Components/ValidationError/index.js
View File

2
ui/src/Components/MultiSelect/ValidationError.test.js → ui/src/Components/ValidationError/index.test.js
View File

@@ -4,7 +4,7 @@ import { shallow } from "enzyme";
import toDiffableHtml from "diffable-html";
import { ValidationError } from "./ValidationError";
import { ValidationError } from ".";
describe("<ValidationError />", () => {
it("matches snapshot", () => {