Dynamic dashboards: Clarify conditional rendering disabled tooltip (#112843)

* change conditional rendering copy

* update link

* small fix

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

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];

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

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

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": {