From 983f809951765e60e31cb65bb77fd658b42f0cb1 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Mon, 13 May 2024 18:00:29 +0200
Subject: [PATCH] fix: Color scheme control crashing when dashboardId present
 (#28457)

---
 .../ColorSchemeControl/ColorSchemeControl.test.tsx     |  8 ++++++++
 .../components/controls/ColorSchemeControl/index.tsx   | 10 +++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
index 1f2b5c722c..8273b1ca92 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
@@ -127,3 +127,11 @@ test('displays color scheme options', async () => {
     expect(screen.getByText('Other color palettes')).toBeInTheDocument();
   });
 });
+
+test('Renders control with dashboard id', () => {
+  setup({ dashboardId: 1 });
+  expect(screen.getByText('Dashboard scheme')).toBeInTheDocument();
+  expect(
+    screen.getByLabelText('Select color scheme', { selector: 'input' }),
+  ).toBeDisabled();
+});
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
index 105cd1e45d..49f9b9a37c 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
@@ -125,13 +125,9 @@ const ColorSchemeControl = ({
   const options = useMemo(() => {
     if (dashboardId) {
       return [
-        {
-          value: 'dashboard',
-          label: t('dashboard'),
-          customLabel: (
-            <Tooltip title={DASHBOARD_ALERT}>{t('Dashboard scheme')}</Tooltip>
-          ),
-        },
+        <Option value="dashboard" label={t('dashboard')} key="dashboard">
+          <Tooltip title={DASHBOARD_ALERT}>{t('Dashboard scheme')}</Tooltip>
+        </Option>,
       ];
     }
     const schemesObject = isFunction(schemes) ? schemes() : schemes;