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): migrate to @types/react-select v3.1.x

Browse Source
This commit is contained in:
Łukasz Mierzwa
2021-01-02 16:23:39 +00:00
committed by Łukasz Mierzwa
parent bbdcb3ecd6
commit a3e9a7e0ba
13 changed files with 147 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap
+2 -2
View File
@@ -4,8 +4,8 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
"
<div class=\\"form-group mb-0\\">
<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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Collapse on mobile
</div>
ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap
+2 -2
View File
@@ -6,8 +6,8 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
<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-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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Use defaults from karma config file
</div>
ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap
+2 -2
View File
@@ -6,8 +6,8 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
<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 mx-0 mx-lg-1 mt-1 mt-lg-0\\">
<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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Disable multi-grid
</div>
ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap
+2 -2
View File
@@ -4,8 +4,8 @@ exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
"
<div class=\\"form-group mb-2\\">
<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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Automatic theme, follow browser preference
</div>
ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap
+8 -8
View File
@@ -143,8 +143,8 @@ exports[`<Configuration /> matches snapshot 1`] = `
<div class=\\"card-body my-2\\">
<div class=\\"form-group mb-2\\">
<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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Automatic theme, follow browser preference
</div>
@@ -386,8 +386,8 @@ exports[`<Configuration /> matches snapshot 1`] = `
<div class=\\"card-body my-2\\">
<div class=\\"form-group mb-0\\">
<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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Collapse on mobile
</div>
@@ -464,8 +464,8 @@ exports[`<Configuration /> matches snapshot 1`] = `
<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-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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Use defaults from karma config file
</div>
@@ -544,8 +544,8 @@ exports[`<Configuration /> matches snapshot 1`] = `
<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 mx-0 mx-lg-1 mt-1 mt-lg-0\\">
<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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Disable multi-grid
</div>
ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap
+8 -8
View File
@@ -162,8 +162,8 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
<div class=\\"card-body my-2\\">
<div class=\\"form-group mb-2\\">
<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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Automatic theme, follow browser preference
</div>
@@ -405,8 +405,8 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
<div class=\\"card-body my-2\\">
<div class=\\"form-group mb-0\\">
<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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Collapse on mobile
</div>
@@ -483,8 +483,8 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
<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-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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Use defaults from karma config file
</div>
@@ -563,8 +563,8 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
<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 mx-0 mx-lg-1 mt-1 mt-lg-0\\">
<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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
Disable multi-grid
</div>
ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap
+2 -2
View File
@@ -3,8 +3,8 @@
exports[`<AlertManagerInput /> matches snapshot 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=\\"react-select__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-115r1xl-ValueContainer\\">
<div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
<div class=\\"css-xbn6jz react-select__multi-value__label\\">
Cluster: HA
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap
+2 -2
View File
@@ -3,8 +3,8 @@
exports[`<LabelNameInput /> matches snapshot 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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
<div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
cluster
</div>
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap
+4 -4
View File
@@ -3,8 +3,8 @@
exports[`<LabelValueInput /> fetches suggestions on mount 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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--is-multi css-115r1xl-ValueContainer\\">
<div>
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Label value
@@ -56,8 +56,8 @@ exports[`<LabelValueInput /> fetches suggestions on mount 1`] = `
exports[`<LabelValueInput /> matches snapshot 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__control css-cat782-control\\">
<div class=\\"react-select__value-container react-select__value-container--is-multi css-115r1xl-ValueContainer\\">
<div>
<div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
Label value
ui/src/Components/Theme/ReactSelect.test.tsx
+6
View File
@@ -30,6 +30,12 @@ describe("<WrappedCustomMultiSelect />", () => {
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
it("matches snapshot when focused and disabled", () => {
const tree = mount(<ThemedSelect autoFocus isDisabled />);
tree.find("input").simulate("focus");
expect(toDiffableHtml(tree.html())).toMatchSnapshot();
});
it("matches snapshot with a value", () => {
const tree = mount(
<ThemedSelect
ui/src/Components/Theme/ReactSelect.ts
+33 -17
View File
@@ -1,5 +1,12 @@
import { CSSProperties } from "react";
import { Styles } from "react-select";
import {
ControlProps,
IndicatorContainerProps,
OptionTypeBase,
SingleValueProps,
Styles,
ValueContainerProps,
} from "react-select";
interface ReactSelectTheme {
color: string;
@@ -52,12 +59,19 @@ interface StateFnT {
isDisabled: boolean;
}
const ReactSelectStyles = (theme: ReactSelectTheme): Styles => ({
control: (base: CSSProperties, state: StateFnT) =>
state.isFocused
const ReactSelectStyles = <
OptionType extends OptionTypeBase,
IsMulti extends boolean
>(
theme: ReactSelectTheme
): Styles<OptionType, IsMulti> => ({
control: (base: CSSProperties, props: ControlProps<OptionType, IsMulti>) =>
props.isFocused
? {
...base,
backgroundColor: theme.backgroundColor,
backgroundColor: props.isDisabled
? theme.disabledValueContainerBackground
: theme.valueContainerBackground,
outline: "0",
outlineOffset: "-2px",
boxShadow: `0 0 0 0.2rem ${theme.focusedBoxShadow}`,
@@ -69,20 +83,22 @@ const ReactSelectStyles = (theme: ReactSelectTheme): Styles => ({
}
: {
...base,
backgroundColor: "inherit",
backgroundColor: props.isDisabled
? theme.disabledValueContainerBackground
: theme.valueContainerBackground,
borderRadius: "0.25rem",
borderColor: theme.borderColor,
"&:hover": { borderColor: theme.borderColor },
},
valueContainer: (base: CSSProperties, state: StateFnT) =>
state.isMulti
valueContainer: (
base: CSSProperties,
props: ValueContainerProps<OptionType, IsMulti>
) =>
props.isMulti
? {
...base,
borderTopLeftRadius: "0.25rem",
borderBottomLeftRadius: "0.25rem",
backgroundColor: state.isDisabled
? theme.disabledValueContainerBackground
: theme.valueContainerBackground,
paddingLeft: "4px",
paddingRight: "4px",
display: "flex",
@@ -95,11 +111,8 @@ const ReactSelectStyles = (theme: ReactSelectTheme): Styles => ({
...base,
borderTopLeftRadius: "0.25rem",
borderBottomLeftRadius: "0.25rem",
backgroundColor: state.isDisabled
? theme.disabledValueContainerBackground
: theme.valueContainerBackground,
},
singleValue: (base: CSSProperties) => ({
singleValue: (base: CSSProperties, props: SingleValueProps<OptionType>) => ({
...base,
color: theme.singleValueColor,
}),
@@ -138,9 +151,12 @@ const ReactSelectStyles = (theme: ReactSelectTheme): Styles => ({
...base,
color: "inherit",
}),
indicatorsContainer: (base: CSSProperties, state: StateFnT) => ({
indicatorsContainer: (
base: CSSProperties,
props: IndicatorContainerProps<OptionType, IsMulti>
) => ({
...base,
backgroundColor: state.isDisabled
backgroundColor: props.isDisabled
? theme.disabledValueContainerBackground
: theme.valueContainerBackground,
borderTopRightRadius: "0.25rem",
ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap
+74 -12
View File
@@ -14,7 +14,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
</span>
</span>
<div class=\\" css-11rrdhm-control\\">
<div class=\\" css-1ne8613-ValueContainer\\">
<div class=\\" css-17yk2dy-ValueContainer\\">
<div class=\\" css-1wa3eu0-placeholder\\">
Select...
</div>
@@ -61,11 +61,73 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
"
`;
exports[`<WrappedCustomMultiSelect /> matches snapshot when focused and disabled 1`] = `
"
<div class=\\" css-14jk2my-container\\">
<span aria-live=\\"polite\\"
class=\\"css-1laao21-a11yText\\"
>
<span id=\\"aria-selection-event\\">
&nbsp;
</span>
<span id=\\"aria-context\\">
&nbsp; 0 results available. Select is focused ,type to refine list, press Down to open the menu,
</span>
</span>
<div class=\\" css-1tnfzgk-control\\">
<div class=\\" css-17yk2dy-ValueContainer\\">
<div class=\\" css-1wa3eu0-placeholder\\">
Select...
</div>
<div class=\\"css-ps6ina-Input\\">
<div class
style=\\"display: inline-block;\\"
>
<input disabled
autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-4-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
aria-autocomplete=\\"list\\"
style=\\"box-sizing: content-box; width: 2px; border: 0px; 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-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
</div>
</div>
</div>
</div>
<div class=\\" css-15bdmde-IndicatorsContainer\\">
<span class=\\" css-109onse-indicatorSeparator\\">
</span>
<div aria-hidden=\\"true\\"
class=\\" css-1ij327q-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 a value 1`] = `
"
<div class=\\" css-2b097c-container\\">
<div class=\\" css-r5n82u-control\\">
<div class=\\" css-1ne8613-ValueContainer\\">
<div class=\\" css-cat782-control\\">
<div class=\\" css-17yk2dy-ValueContainer\\">
<div class=\\" css-1wh03ml-singleValue\\">
foo
</div>
@@ -76,7 +138,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-4-input\\"
id=\\"react-select-5-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
@@ -115,8 +177,8 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`] = `
"
<div class=\\" css-14jk2my-container\\">
<div class=\\" css-r5n82u-control\\">
<div class=\\" css-8r64vq-ValueContainer\\">
<div class=\\" css-j5h6r7-control\\">
<div class=\\" css-17yk2dy-ValueContainer\\">
<div class=\\" css-1wh03ml-singleValue\\">
foo
</div>
@@ -128,7 +190,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-6-input\\"
id=\\"react-select-7-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
@@ -167,8 +229,8 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
"
<div class=\\" css-2b097c-container\\">
<div class=\\" css-r5n82u-control\\">
<div class=\\" css-1pfcrl6-ValueContainer\\">
<div class=\\" css-cat782-control\\">
<div class=\\" css-115r1xl-ValueContainer\\">
<div class=\\" css-1wa3eu0-placeholder\\">
Select...
</div>
@@ -218,8 +280,8 @@ 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=\\" css-r5n82u-control\\">
<div class=\\" css-1pfcrl6-ValueContainer\\">
<div class=\\" css-cat782-control\\">
<div class=\\" css-115r1xl-ValueContainer\\">
<div class=\\"css-owt1hd-multiValue\\">
<div class=\\"css-xbn6jz\\">
foo
@@ -244,7 +306,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
<input autocapitalize=\\"none\\"
autocomplete=\\"off\\"
autocorrect=\\"off\\"
id=\\"react-select-5-input\\"
id=\\"react-select-6-input\\"
spellcheck=\\"false\\"
tabindex=\\"0\\"
type=\\"text\\"
ui/src/Components/Theme/index.tsx
+2 -1
View File
@@ -42,7 +42,8 @@ const Placeholder = () => {
export interface ThemeCtx {
isDark: boolean;
reactSelectStyles: Styles;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
reactSelectStyles: Styles<any, any>;
animations: {
duration: number;
};