From 63ac32a4ae8485cb6308bc08f0b64c383cbead00 Mon Sep 17 00:00:00 2001
From: Domas <domasx2@gmail.com>
Date: Thu, 18 Jan 2024 14:28:05 +0200
Subject: [PATCH] Field color: Filter out editor options that have
 excludeFromPicker=true (#79907)

* filter color palette options to to remove excluded items

* add test

* make betterer happy

* remove unused
---
 .../components/OptionsUI/fieldColor.test.tsx  | 54 +++++++++++++++++++
 .../core/components/OptionsUI/fieldColor.tsx  | 28 +++++-----
 2 files changed, 69 insertions(+), 13 deletions(-)
 create mode 100644 public/app/core/components/OptionsUI/fieldColor.test.tsx

diff --git a/public/app/core/components/OptionsUI/fieldColor.test.tsx b/public/app/core/components/OptionsUI/fieldColor.test.tsx
new file mode 100644
index 00000000000..316679ab359
--- /dev/null
+++ b/public/app/core/components/OptionsUI/fieldColor.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { FieldColorEditor } from './fieldColor';
+
+const testRegistryItems = [
+  {
+    id: 'foo',
+    name: 'Foo',
+    description: 'This option will appear in the picker',
+    getCalculator: () => 'red',
+  },
+  {
+    id: 'bar',
+    name: 'Bar',
+    description: 'This option will also appear in the picker',
+    getCalculator: () => 'green',
+  },
+  {
+    id: 'baz',
+    name: 'Baz',
+    description: 'This option will not appear in the picker',
+    getCalculator: () => 'blue',
+    excludeFromPicker: true,
+  },
+];
+
+jest.mock('@grafana/data', () => {
+  const actualData = jest.requireActual('@grafana/data');
+  return {
+    ...actualData,
+    fieldColorModeRegistry: new actualData.Registry(() => testRegistryItems),
+  };
+});
+
+describe('fieldColor', () => {
+  it('filters out registry options with excludeFromPicker=true', async () => {
+    render(
+      <FieldColorEditor
+        value={undefined}
+        onChange={() => {}}
+        id="test"
+        data-testid="test"
+        context={{ data: [] }}
+        item={testRegistryItems[0]}
+      />
+    );
+    await userEvent.type(screen.getByRole('combobox'), '{arrowdown}');
+    expect(screen.getByText(/^Foo/i)).toBeInTheDocument();
+    expect(screen.getByText(/^Bar/i)).toBeInTheDocument();
+    expect(screen.queryByText(/^Baz/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/public/app/core/components/OptionsUI/fieldColor.tsx b/public/app/core/components/OptionsUI/fieldColor.tsx
index bfd8c480bcb..77e67d73d11 100644
--- a/public/app/core/components/OptionsUI/fieldColor.tsx
+++ b/public/app/core/components/OptionsUI/fieldColor.tsx
@@ -28,20 +28,22 @@ export const FieldColorEditor = ({ value, onChange, item, id }: Props) => {
     ? fieldColorModeRegistry.list()
     : fieldColorModeRegistry.list().filter((m) => !m.isByValue);
 
-  const options = availableOptions.map((mode) => {
-    let suffix = mode.isByValue ? ' (by value)' : '';
+  const options = availableOptions
+    .filter((mode) => !mode.excludeFromPicker)
+    .map((mode) => {
+      let suffix = mode.isByValue ? ' (by value)' : '';
 
-    return {
-      value: mode.id,
-      label: `${mode.name}${suffix}`,
-      description: mode.description,
-      isContinuous: mode.isContinuous,
-      isByValue: mode.isByValue,
-      component() {
-        return <FieldColorModeViz mode={mode} theme={theme} />;
-      },
-    };
-  });
+      return {
+        value: mode.id,
+        label: `${mode.name}${suffix}`,
+        description: mode.description,
+        isContinuous: mode.isContinuous,
+        isByValue: mode.isByValue,
+        component() {
+          return <FieldColorModeViz mode={mode} theme={theme} />;
+        },
+      };
+    });
 
   const onModeChange = (newMode: SelectableValue<string>) => {
     onChange({