From c1e308f61e8bd526a296b8886385990424c5b6a8 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Fri, 24 Oct 2025 15:05:52 +0200
Subject: [PATCH] Dynamic dashboards: Clarify conditional rendering disabled
 tooltip (#112843)

* change conditional rendering copy

* update link

* small fix
---
 .../hooks/useConditionalRenderingEditor.tsx   |  2 +-
 .../DashboardGridItemEditor.tsx               | 22 ++++++++++++++-----
 .../PanelEditor/OptionsPaneCategory.tsx       |  4 ++--
 .../OptionsPaneCategoryDescriptor.tsx         |  2 +-
 public/locales/en-US/grafana.json             |  3 ++-
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/public/app/features/dashboard-scene/conditional-rendering/hooks/useConditionalRenderingEditor.tsx b/public/app/features/dashboard-scene/conditional-rendering/hooks/useConditionalRenderingEditor.tsx
index 13416c90cef..8d5f66d2f85 100644
--- a/public/app/features/dashboard-scene/conditional-rendering/hooks/useConditionalRenderingEditor.tsx
+++ b/public/app/features/dashboard-scene/conditional-rendering/hooks/useConditionalRenderingEditor.tsx
@@ -17,7 +17,7 @@ function getPlaceholderConditionalRendering(): ConditionalRenderingGroup {
 
 export function useConditionalRenderingEditor(
   conditionalRendering?: ConditionalRenderingGroup,
-  disabledText?: string
+  disabledText?: string | React.ReactElement
 ): OptionsPaneCategoryDescriptor {
   const title = t('dashboard.conditional-rendering.root.title', 'Show / hide rules');
 
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 09ed968bd72..4d75bb57965 100644
--- a/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-default/DashboardGridItemEditor.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { t } from '@grafana/i18n';
+import { t, Trans } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
 import { sceneGraph, SceneGridLayout } from '@grafana/scenes';
-import { RadioButtonGroup, Select } from '@grafana/ui';
+import { RadioButtonGroup, Select, TextLink } from '@grafana/ui';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 import { RepeatRowSelect2 } from 'app/features/dashboard/components/RepeatRowSelect/RepeatRowSelect';
@@ -57,10 +57,20 @@ export function getDashboardGridItemOptions(gridItem: DashboardGridItem): Option
 
   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.'
-    )
+    <div>
+      <Trans i18nKey="dashboard.conditional-rendering.editor.not-supported-for-custom-grid">
+        Show/hide rules aren&apos;t supported for panels in the Custom panel layout. Change the panel layout to Auto
+        grid to enable this feature.
+      </Trans>
+      <div>
+        <TextLink
+          href="https://grafana.com/docs/grafana/latest/dashboards/build-dashboards/create-dynamic-dashboard/#configure-showhide-rules"
+          external
+        >
+          <Trans i18nKey="dashboard.conditional-rendering.editor.learn-more">Learn more</Trans>
+        </TextLink>
+      </div>
+    </div>
   );
 
   const options = [repeatCategory];
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
index fa95a98dbc4..d8220b1beac 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
@@ -25,7 +25,7 @@ export interface OptionsPaneCategoryProps {
   /**
    * When set will disable category and show tooltip with disabledText on hover
    */
-  disabledText?: string;
+  disabledText?: string | React.ReactElement;
 }
 
 const CATEGORY_PARAM_NAME = 'showCategory' as const;
@@ -113,7 +113,7 @@ export const OptionsPaneCategory = React.memo(
           data-testid={selectors.components.OptionsGroup.group(id)}
           ref={ref}
         >
-          <Tooltip content={disabledText}>
+          <Tooltip interactive={!(typeof disabledText === 'string')} content={disabledText}>
             <div className={headerStyles}>
               <h6 id={`button-${id}`} className={cx(styles.title, styles.titleDisabled)}>
                 {renderTitle(isExpanded)}
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
index 2c470483466..3e6dd00d5b1 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
@@ -19,7 +19,7 @@ export interface OptionsPaneCategoryDescriptorProps {
   /**
    * When set will disable category and show tooltip with disabledText on
    */
-  disabledText?: string;
+  disabledText?: string | React.ReactElement;
 }
 
 /**
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 51e0165d0b3..15d82375ede 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -4602,7 +4602,8 @@
       },
       "editor": {
         "info": "Set rules to control {{type}} visibility by matching any or all rules.",
-        "not-supported-for-custom-grid": "Conditional rendering is not supported for the custom grid layout. Switch to auto grid to use conditional rendering.",
+        "learn-more": "Learn more",
+        "not-supported-for-custom-grid": "Show/hide rules aren't supported for panels in the Custom panel layout. Change the panel layout to Auto grid to enable this feature.",
         "unsupported-object-type": "Conditional rendering not supported for this item type"
       },
       "overlay": {