From 4700f7d8911fea700cbf90eedebad82cc5efee8b Mon Sep 17 00:00:00 2001
From: Vitaly Pinchuk <146737590+vitPinchuk@users.noreply.github.com>
Date: Fri, 9 Feb 2024 06:45:30 +0300
Subject: [PATCH] Visual Editor: Disallow to choose already selected fields
 (#251)

* fixed - prevent add existed items

* fix - change .find to .some

* fix - add test to Select

* fix PR feedback

* Update CHANGELOG.md

---------

Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>
Co-authored-by: Mikhail Volkov <47795110+mikhail-vl@users.noreply.github.com>
---
 CHANGELOG.md                                  |  3 ++-
 src/__mocks__/@grafana/ui.tsx                 |  3 ++-
 .../DatasetEditor/DatasetEditor.test.tsx      | 20 ++++++++++++++
 .../DatasetEditor/DatasetEditor.tsx           | 26 +++++++++++--------
 4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34c6e43..179a39a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Change Log
 
-## 5.2.0 (2024-02-07)
+## 5.2.0 (2024-02-08)
 
 ### Features / Enhancements
 
@@ -10,6 +10,7 @@
 - Update dependencies and Actions (#238)
 - Add context parameter to non-visual mode (#245)
 - Add refresh function using Application Event Bus (#247)
+- Update to disallow to choose already selected fields (#251)
 
 ## 5.1.0 (2023-08-11)
 
diff --git a/src/__mocks__/@grafana/ui.tsx b/src/__mocks__/@grafana/ui.tsx
index a9e1276..c14b4d2 100644
--- a/src/__mocks__/@grafana/ui.tsx
+++ b/src/__mocks__/@grafana/ui.tsx
@@ -12,7 +12,8 @@ const Select = jest.fn(({ options, onChange, value, isMulti, isClearable, ...res
         if (isMulti) {
           onChange(options.filter((option: any) => event.target.values.includes(option.value)));
         } else {
-          onChange(options.find((option: any) => option.value === event.target.value));
+          const option = options.find((option: any) => option.value === event.target.value);
+          option && onChange(option);
         }
       }
     }}
diff --git a/src/components/DatasetEditor/DatasetEditor.test.tsx b/src/components/DatasetEditor/DatasetEditor.test.tsx
index f53ffbe..2588ad3 100644
--- a/src/components/DatasetEditor/DatasetEditor.test.tsx
+++ b/src/components/DatasetEditor/DatasetEditor.test.tsx
@@ -159,6 +159,26 @@ describe('Dataset Editor', () => {
     expect(selectors.item(true, 'A:Value')).not.toBeInTheDocument();
   });
 
+  it('Should not allow selecting already selected fields', () => {
+    const { value, onChange } = createOnChangeHandler([{ name: 'Time', source: 'A' }]);
+
+    /**
+     * Render
+     */
+    render(
+      getComponent({
+        value,
+        onChange,
+      })
+    );
+
+    /**
+     * Simulate select option doesn't exist
+     */
+    fireEvent.change(selectors.newItemName(), { target: { value: 'A:Time' } });
+    expect(selectors.buttonAddNew()).toBeDisabled();
+  });
+
   /**
    * Items order
    */
diff --git a/src/components/DatasetEditor/DatasetEditor.tsx b/src/components/DatasetEditor/DatasetEditor.tsx
index 0602c4a..d86e373 100644
--- a/src/components/DatasetEditor/DatasetEditor.tsx
+++ b/src/components/DatasetEditor/DatasetEditor.tsx
@@ -99,17 +99,21 @@ export const DatasetEditor: React.FC<Props> = ({ value, onChange, data }) => {
    * Available Field Options
    */
   const availableFieldOptions = useMemo(() => {
-    return data.reduce((acc: SelectableValue[], dataFrame) => {
-      return acc.concat(
-        dataFrame.fields.map((field) => ({
-          value: `${dataFrame.refId}:${field.name}`,
-          fieldName: field.name,
-          label: `${dataFrame.refId ? `${dataFrame.refId}:` : ''}${field.name}`,
-          source: dataFrame.refId,
-        }))
-      );
-    }, []);
-  }, [data]);
+    return data
+      .reduce((acc: SelectableValue[], dataFrame) => {
+        return acc.concat(
+          dataFrame.fields.map((field) => ({
+            value: `${dataFrame.refId}:${field.name}`,
+            fieldName: field.name,
+            label: `${dataFrame.refId ? `${dataFrame.refId}:` : ''}${field.name}`,
+            source: dataFrame.refId,
+          }))
+        );
+      }, [])
+      .filter((field) => {
+        return !items.some((item) => item.name === field.fieldName && item.source === field.source);
+      });
+  }, [items, data]);
 
   /**
    * Add New Item