diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap index b9ef672b3..77eb34e55 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap @@ -4,8 +4,8 @@ exports[` matches snapshot with default value "
-
-
+
+
Collapse on mobile
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap index 88d2a7a56..df0fee57e 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap @@ -6,8 +6,8 @@ exports[` matches snapshot with default values 1`
-
-
+
+
Use defaults from karma config file
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap index cb69c82b0..5ba89e112 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap @@ -6,8 +6,8 @@ exports[` matches snapshot with default values 1`] = `
-
-
+
+
Disable multi-grid
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap index cdd2054f5..f1dbab258 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap @@ -4,8 +4,8 @@ exports[` matches snapshot with default values 1`] = ` "
-
-
+
+
Automatic theme, follow browser preference
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap index 873150be6..5fa85b4e9 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap @@ -143,8 +143,8 @@ exports[` matches snapshot 1`] = `
-
-
+
+
Automatic theme, follow browser preference
@@ -386,8 +386,8 @@ exports[` matches snapshot 1`] = `
-
-
+
+
Collapse on mobile
@@ -464,8 +464,8 @@ exports[` matches snapshot 1`] = `
-
-
+
+
Use defaults from karma config file
@@ -544,8 +544,8 @@ exports[` matches snapshot 1`] = `
-
-
+
+
Disable multi-grid
diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap index 52c522723..d3f522749 100644 --- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap +++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap @@ -162,8 +162,8 @@ exports[` matches snapshot 1`] = `
-
-
+
+
Automatic theme, follow browser preference
@@ -405,8 +405,8 @@ exports[` matches snapshot 1`] = `
-
-
+
+
Collapse on mobile
@@ -483,8 +483,8 @@ exports[` matches snapshot 1`] = `
-
-
+
+
Use defaults from karma config file
@@ -563,8 +563,8 @@ exports[` matches snapshot 1`] = `
-
-
+
+
Disable multi-grid
diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap index 2bfb05c9a..f5efa1b1b 100644 --- a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap +++ b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.tsx.snap @@ -3,8 +3,8 @@ exports[` matches snapshot 1`] = ` "
-
-
+
+
Cluster: HA diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap index 461d0a027..6443b5c16 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap +++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.tsx.snap @@ -3,8 +3,8 @@ exports[` matches snapshot 1`] = ` "
-
-
+
+
cluster
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap index 0e6ca1383..9501e83c6 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap +++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.tsx.snap @@ -3,8 +3,8 @@ exports[` fetches suggestions on mount 1`] = ` "
-
-
+
+
Label value @@ -56,8 +56,8 @@ exports[` fetches suggestions on mount 1`] = ` exports[` matches snapshot 1`] = ` "
-
-
+
+
Label value diff --git a/ui/src/Components/Theme/ReactSelect.test.tsx b/ui/src/Components/Theme/ReactSelect.test.tsx index 76b14e396..aba4d57d2 100644 --- a/ui/src/Components/Theme/ReactSelect.test.tsx +++ b/ui/src/Components/Theme/ReactSelect.test.tsx @@ -30,6 +30,12 @@ describe("", () => { expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); + it("matches snapshot when focused and disabled", () => { + const tree = mount(); + tree.find("input").simulate("focus"); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); + it("matches snapshot with a value", () => { const tree = mount( ({ - control: (base: CSSProperties, state: StateFnT) => - state.isFocused +const ReactSelectStyles = < + OptionType extends OptionTypeBase, + IsMulti extends boolean +>( + theme: ReactSelectTheme +): Styles => ({ + control: (base: CSSProperties, props: ControlProps) => + 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 + ) => + 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) => ({ ...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 + ) => ({ ...base, - backgroundColor: state.isDisabled + backgroundColor: props.isDisabled ? theme.disabledValueContainerBackground : theme.valueContainerBackground, borderTopRightRadius: "0.25rem", diff --git a/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap b/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap index 68dd84583..7e1ea81e8 100644 --- a/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap +++ b/ui/src/Components/Theme/__snapshots__/ReactSelect.test.tsx.snap @@ -14,7 +14,7 @@ exports[` matches snapshot when focused 1`] = `
-
+
Select...
@@ -61,11 +61,73 @@ exports[` matches snapshot when focused 1`] = ` " `; +exports[` matches snapshot when focused and disabled 1`] = ` +" +
+ + +   + + +   0 results available. Select is focused ,type to refine list, press Down to open the menu, + + +
+
+
+ Select... +
+
+
+ +
+
+
+
+
+
+ + +
+ + + + +
+
+
+
+" +`; + exports[` matches snapshot with a value 1`] = ` "
-
-
+
+
foo
@@ -76,7 +138,7 @@ exports[` matches snapshot with a value 1`] = ` matches snapshot with a value 1`] = ` exports[` matches snapshot with isDisabled=true 1`] = ` "
-
-
+
+
foo
@@ -128,7 +190,7 @@ exports[` 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[` matches snapshot with isDisabled=true 1`] exports[` matches snapshot with isMulti=true 1`] = ` "
-
-
+
+
Select...
@@ -218,8 +280,8 @@ exports[` matches snapshot with isMulti=true 1`] = ` exports[` matches snapshot with isMulti=true and a value 1`] = ` "
-
-
+
+
foo @@ -244,7 +306,7 @@ exports[` matches snapshot with isMulti=true and a v { export interface ThemeCtx { isDark: boolean; - reactSelectStyles: Styles; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + reactSelectStyles: Styles; animations: { duration: number; };