From 44b7d941b4467d119fae922009449322c6ff26c1 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Fri, 15 Aug 2025 16:37:54 +0200
Subject: [PATCH] Dynamic dashboards: Show disabled conditional rendering when
 not supported (#109663)

* Show disabled conditional rendering when not supported

* don't create unessecary sceneObjects

* fix i18n identifier strings

* Update i18n
---
 .../ConditionalRenderingEditor.tsx            | 45 ++++++++++++++-----
 .../DashboardGridItemEditor.tsx               | 11 ++++-
 public/locales/en-US/grafana.json             |  4 ++
 3 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx b/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx
index 9df4bd0de02..8d0a0614778 100644
--- a/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx
+++ b/public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingEditor.tsx
@@ -6,25 +6,50 @@ import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 
 import { ConditionalRendering } from './ConditionalRendering';
+import { ConditionalRenderingGroup } from './ConditionalRenderingGroup';
+
+let placeholderConditionalRendering: ConditionalRendering | undefined;
+function getPlaceholderConditionalRendering(): ConditionalRendering {
+  if (!placeholderConditionalRendering) {
+    placeholderConditionalRendering = new ConditionalRendering({
+      rootGroup: new ConditionalRenderingGroup({
+        visibility: 'show',
+        condition: 'and',
+        value: [],
+      }),
+    });
+  }
+  return placeholderConditionalRendering;
+}
 
 export function useConditionalRenderingEditor(
-  conditionalRendering?: ConditionalRendering
-): OptionsPaneCategoryDescriptor | null {
-  if (!conditionalRendering) {
-    return null;
-  }
-
+  conditionalRendering?: ConditionalRendering,
+  disabledText?: string
+): OptionsPaneCategoryDescriptor {
   const title = t('dashboard.conditional-rendering.root.title', 'Show / hide rules');
 
+  const conditionalRenderingToRender = conditionalRendering ?? getPlaceholderConditionalRendering();
+
   return new OptionsPaneCategoryDescriptor({
     title,
+    disabledText: conditionalRendering
+      ? undefined
+      : (disabledText ??
+        t(
+          'dashboard.conditional-rendering.editor.unsupported-item-type',
+          'Conditional rendering not supported for this item type'
+        )),
     id: 'conditional-rendering-options',
     renderTitle: () => (
       <Stack direction="row" gap={1} alignItems="center">
         <div>{title}</div>
-        <Tooltip content={conditionalRendering.info}>
-          <Icon name={!conditionalRendering.evaluate() ? 'eye-slash' : 'eye'} />
-        </Tooltip>
+        {conditionalRendering ? (
+          <Tooltip content={conditionalRenderingToRender.info}>
+            <Icon name={!conditionalRenderingToRender.evaluate() ? 'eye-slash' : 'eye'} />
+          </Tooltip>
+        ) : (
+          <Icon name="eye-slash" />
+        )}
       </Stack>
     ),
     isOpenDefault: true,
@@ -32,7 +57,7 @@ export function useConditionalRenderingEditor(
     new OptionsPaneItemDescriptor({
       title,
       id: uuidv4(),
-      render: () => <conditionalRendering.Component model={conditionalRendering} />,
+      render: () => <conditionalRenderingToRender.Component model={conditionalRenderingToRender} />,
     })
   );
 }
diff --git a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
index e5b39a60c59..9f822fe01e7 100644
--- a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
@@ -9,6 +9,7 @@ import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 import { RepeatRowSelect2 } from 'app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect';
 
+import { useConditionalRenderingEditor } from '../../conditional-rendering/ConditionalRenderingEditor';
 import { dashboardEditActions } from '../../edit-pane/shared';
 
 import { DashboardGridItem } from './DashboardGridItem';
@@ -52,7 +53,15 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option
       })
     );
 
-  return [repeatCategory];
+  const conditionalRenderingCategory = useConditionalRenderingEditor(
+    undefined,
+    t(
+      'dashboard.conditional-rendering.editor.not-supported-for-custom-grid',
+      'Conditional rendering is not supported for the custom grid layout. Switch to auto grid to use conditional rendering.'
+    )
+  );
+
+  return [repeatCategory, conditionalRenderingCategory];
 }
 
 interface OptionComponentProps {
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 9eecf0099ab..d39902baac5 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -4522,6 +4522,10 @@
           "value": "Value"
         }
       },
+      "editor": {
+        "not-supported-for-custom-grid": "Conditional rendering is not supported for the custom grid layout. Switch to auto grid to use conditional rendering.",
+        "unsupported-item-type": "Conditional rendering not supported for this item type"
+      },
       "overlay": {
         "tooltip": "Element is hidden due to conditional rendering."
       },