From 526cac60e5c061ff32bfc4e80a2cc05c84a3ba94 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Tue, 28 Feb 2023 09:53:33 +0100
Subject: [PATCH] Alerting: Fix AlertLabelDropdown to be case sensitive
 (#63787)

Fix AlertLabelDropdown to be case sensitive
---
 .../src/components/Select/SelectBase.tsx      |  2 +-
 .../grafana-ui/src/components/Select/types.ts |  2 +-
 .../unified/components/AlertLabelDropdown.tsx | 28 +++++++++++++++++--
 .../rule-editor/LabelsField.test.tsx          | 20 +++++++++++++
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 595ca3b1566..0a19c5f7c01 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -181,7 +181,7 @@ export function SelectBase<T>({
 
   let ReactSelectComponent = ReactSelect;
 
-  const creatableProps: ComponentProps<typeof Creatable> = {};
+  const creatableProps: ComponentProps<typeof Creatable<SelectableValue<T>>> = {};
   let asyncSelectProps: any = {};
   let selectedValue;
   if (isMulti && loadOptions) {
diff --git a/packages/grafana-ui/src/components/Select/types.ts b/packages/grafana-ui/src/components/Select/types.ts
index 311cf4055c4..e8c960cd535 100644
--- a/packages/grafana-ui/src/components/Select/types.ts
+++ b/packages/grafana-ui/src/components/Select/types.ts
@@ -88,7 +88,7 @@ export interface SelectCommonProps<T> {
   isValidNewOption?: (
     inputValue: string,
     value: SelectableValue<T> | null,
-    options: OptionsOrGroups<unknown, GroupBase<unknown>>
+    options: OptionsOrGroups<SelectableValue<T>, GroupBase<SelectableValue<T>>>
   ) => boolean;
   /** Message to display isLoading=true*/
   loadingMessage?: string;
diff --git a/public/app/features/alerting/unified/components/AlertLabelDropdown.tsx b/public/app/features/alerting/unified/components/AlertLabelDropdown.tsx
index 21d369b5672..ecd67bf5156 100644
--- a/public/app/features/alerting/unified/components/AlertLabelDropdown.tsx
+++ b/public/app/features/alerting/unified/components/AlertLabelDropdown.tsx
@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
+import { createFilter, GroupBase, OptionsOrGroups } from 'react-select';
 
 import { SelectableValue } from '@grafana/data';
-import { Select, Field } from '@grafana/ui';
+import { Field, Select } from '@grafana/ui';
 
 export interface AlertLabelDropdownProps {
   onChange: (newValue: SelectableValue<string>) => void;
@@ -10,19 +11,42 @@ export interface AlertLabelDropdownProps {
   defaultValue?: SelectableValue;
   type: 'key' | 'value';
 }
+const _customFilter = createFilter({ ignoreCase: false });
+function customFilter(opt: SelectableValue, searchQuery: string) {
+  return _customFilter(
+    {
+      label: opt.label ?? '',
+      value: opt.value ?? '',
+      data: {},
+    },
+    searchQuery
+  );
+}
+
+const handleIsValidNewOption = (
+  inputValue: string,
+  value: SelectableValue<string> | null,
+  options: OptionsOrGroups<SelectableValue<string>, GroupBase<SelectableValue<string>>>
+) => {
+  const exactValueExists = options.some((el) => el.label === inputValue);
+  const valueIsNotEmpty = inputValue.trim().length;
+  return !Boolean(exactValueExists) && Boolean(valueIsNotEmpty);
+};
 
 const AlertLabelDropdown: FC<AlertLabelDropdownProps> = React.forwardRef<HTMLDivElement, AlertLabelDropdownProps>(
   function labelPicker({ onChange, options, defaultValue, type, onOpenMenu = () => {} }, ref) {
     return (
       <div ref={ref}>
         <Field disabled={false} data-testid={`alertlabel-${type}-picker`}>
-          <Select
+          <Select<string>
             placeholder={`Choose ${type}`}
             width={29}
             className="ds-picker select-container"
             backspaceRemovesValue={false}
             onChange={onChange}
             onOpenMenu={onOpenMenu}
+            filterOption={customFilter}
+            isValidNewOption={handleIsValidNewOption}
             options={options}
             maxMenuHeight={500}
             noOptionsMessage="No labels found"
diff --git a/public/app/features/alerting/unified/components/rule-editor/LabelsField.test.tsx b/public/app/features/alerting/unified/components/rule-editor/LabelsField.test.tsx
index 755cf4d6ea3..23d9e11ea18 100644
--- a/public/app/features/alerting/unified/components/rule-editor/LabelsField.test.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/LabelsField.test.tsx
@@ -92,6 +92,26 @@ describe('LabelsField with suggestions', () => {
     expect(screen.getByTestId('label-key-2').textContent).toBe('key3');
     expect(screen.getByTestId('label-value-2').textContent).toBe('value3');
   });
+  it('Should be able to write new keys and values using the dropdowns, case sensitive', async () => {
+    renderAlertLabels('grafana');
+
+    await waitFor(() => expect(screen.getAllByTestId('alertlabel-key-picker')).toHaveLength(2));
+    expect(screen.getByTestId('label-key-0').textContent).toBe('key1');
+    expect(screen.getByTestId('label-key-1').textContent).toBe('key2');
+    expect(screen.getByTestId('label-value-0').textContent).toBe('value1');
+    expect(screen.getByTestId('label-value-1').textContent).toBe('value2');
+
+    const LastKeyDropdown = within(screen.getByTestId('label-key-1'));
+    const LastValueDropdown = within(screen.getByTestId('label-value-1'));
+
+    await userEvent.type(LastKeyDropdown.getByRole('combobox'), 'KEY2{enter}');
+    expect(screen.getByTestId('label-key-0').textContent).toBe('key1');
+    expect(screen.getByTestId('label-key-1').textContent).toBe('KEY2');
+
+    await userEvent.type(LastValueDropdown.getByRole('combobox'), 'VALUE2{enter}');
+    expect(screen.getByTestId('label-value-0').textContent).toBe('value1');
+    expect(screen.getByTestId('label-value-1').textContent).toBe('VALUE2');
+  });
 });
 
 describe('LabelsField without suggestions', () => {