Visual Editor: Disallow to choose already selected fields

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)
 

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);
         }
       }
     }}

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
    */

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