From 969ad1b4e0532032203a13aaeee0d2d41d56da95 Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Fri, 28 Apr 2023 12:23:48 +0200
Subject: [PATCH] Select: Don't show remove button on multi select if disabled
 (#67303)

---
 .../src/components/Select/SelectBase.test.tsx | 45 ++++++++++++++++++-
 .../src/components/Select/SelectBase.tsx      |  2 +-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectBase.test.tsx b/packages/grafana-ui/src/components/Select/SelectBase.test.tsx
index 97d877616fd..f2b04373235 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.test.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.test.tsx
@@ -9,7 +9,7 @@ import { selectOptionInTest } from '../../../../../public/test/helpers/selectOpt
 import { SelectBase } from './SelectBase';
 
 describe('SelectBase', () => {
-  const onChangeHandler = () => jest.fn();
+  const onChangeHandler = jest.fn();
   const options: Array<SelectableValue<number>> = [
     {
       label: 'Option 1',
@@ -218,4 +218,47 @@ describe('SelectBase', () => {
       expect(menuOptions).toHaveLength(2);
     });
   });
+
+  describe('Multi select', () => {
+    it('calls on change to remove an item when the user presses the remove button', async () => {
+      const value = [
+        {
+          label: 'Option 1',
+          value: 1,
+        },
+      ];
+      render(
+        <SelectBase onChange={onChangeHandler} options={options} isMulti={true} value={value} aria-label="My select" />
+      );
+
+      expect(screen.getByLabelText('My select')).toBeInTheDocument();
+
+      await userEvent.click(screen.getByLabelText('Remove Option 1'));
+      expect(onChangeHandler).toHaveBeenCalledWith([], {
+        action: 'remove-value',
+        name: undefined,
+        removedValue: { label: 'Option 1', value: 1 },
+      });
+    });
+    it('does not allow deleting selected values when disabled', async () => {
+      const value = [
+        {
+          label: 'Option 1',
+          value: 1,
+        },
+      ];
+      render(
+        <SelectBase
+          onChange={onChangeHandler}
+          options={options}
+          disabled
+          isMulti={true}
+          value={value}
+          aria-label="My select"
+        />
+      );
+
+      expect(screen.queryByLabelText('Remove Option 1')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 4b650d22394..eac330e6fb1 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -357,7 +357,7 @@ export function SelectBase<T>({
           },
           SelectContainer,
           MultiValueContainer: MultiValueContainer,
-          MultiValueRemove: MultiValueRemove,
+          MultiValueRemove: !disabled ? MultiValueRemove : () => null,
           ...components,
         }}
         styles={selectStyles}