fix(ui): add custom label for unmatched values in Creatable select

ui/src/Common/Select.js

@@ -0,0 +1,5 @@
+const NewLabelName = (v) => `New label: ${v}`;
+
+const NewLabelValue = (v) => `New value: ${v}`;
+
+export { NewLabelName, NewLabelValue };

ui/src/Common/Select.test.js

@@ -0,0 +1,13 @@
+import { NewLabelName, NewLabelValue } from "./Select";
+
+describe("NewLabelName", () => {
+  it("returns correct text", () => {
+    expect(NewLabelName("foo")).toBe("New label: foo");
+  });
+});
+
+describe("NewLabelValue", () => {
+  it("returns correct text", () => {
+    expect(NewLabelValue("foo")).toBe("New value: foo");
+  });
+});

ui/src/Components/MainModal/Configuration/GridLabelName.js

@@ -7,6 +7,7 @@ import { useFetchGet } from "Hooks/useFetchGet";
 import { FormatBackendURI } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { ThemeContext } from "Components/Theme";
+import { NewLabelName } from "Common/Select";
 
 const disabledLabel = "Disable multi-grid";
 
@@ -28,6 +29,7 @@ const GridLabelName = ({ settingsStore }) => {
       styles={context.reactSelectStyles}
       classNamePrefix="react-select"
       instanceId="configuration-grid-label"
+      formatCreateLabel={NewLabelName}
       defaultValue={valueToOption(
         settingsStore.multiGridConfig.config.gridLabel
       )}

ui/src/Components/MainModal/Configuration/SortLabelName.js

@@ -8,6 +8,7 @@ import { FormatBackendURI } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { useFetchGet } from "Hooks/useFetchGet";
 import { ThemeContext } from "Components/Theme";
+import { NewLabelName } from "Common/Select";
 
 const valueToOption = (v) => ({ label: v, value: v });
 
@@ -25,6 +26,7 @@ const SortLabelName = ({ settingsStore }) => {
       styles={context.reactSelectStyles}
       classNamePrefix="react-select"
       instanceId="configuration-sort-label"
+      formatCreateLabel={NewLabelName}
       defaultValue={valueToOption(settingsStore.gridConfig.config.sortLabel)}
       options={
         response

ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.js

@@ -8,6 +8,7 @@ import { FormatBackendURI } from "Stores/AlertStore";
 import { useFetchGet } from "Hooks/useFetchGet";
 import { ValidationError } from "Components/ValidationError";
 import { ThemeContext } from "Components/Theme";
+import { NewLabelName } from "Common/Select";
 
 const LabelNameInput = ({ matcher, isValid }) => {
   const { response } = useFetchGet(FormatBackendURI(`labelNames.json`));
@@ -19,6 +20,7 @@ const LabelNameInput = ({ matcher, isValid }) => {
       styles={context.reactSelectStyles}
       classNamePrefix="react-select"
       instanceId={`silence-input-label-name-${matcher.id}`}
+      formatCreateLabel={NewLabelName}
       defaultValue={
         matcher.name ? { label: matcher.name, value: matcher.name } : null
       }

ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js

@@ -12,6 +12,7 @@ import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { SilenceFormMatcher } from "Models/SilenceForm";
 import { useFetchGet } from "Hooks/useFetchGet";
 import { hashObject } from "Common/Hash";
+import { NewLabelValue } from "Common/Select";
 import { ValidationError } from "Components/ValidationError";
 import { ThemeContext } from "Components/Theme";
 import { MatchCounter } from "./MatchCounter";
@@ -69,6 +70,7 @@ const LabelValueInput = observer(({ silenceFormStore, matcher, isValid }) => {
       styles={context.reactSelectStyles}
       classNamePrefix="react-select"
       instanceId={`silence-input-label-value-${matcher.id}`}
+      formatCreateLabel={NewLabelValue}
       defaultValue={matcher.values}
       options={
         response