From 570a5b39435ab6c47378188054b7e936a265e85e Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Wed, 9 Apr 2025 19:01:57 +0200
Subject: [PATCH] Dyanamic dashboards: Show hidden overlay when editing tab
 hidden by conditional rendering (#103582)

* test disable metrics reporting

* Show overlay on hidden tabs

* Fix accidental inclusion

* hide overlay when not editing, this can happen if a user navigates to a hidden tab by url

* Fix lint
---
 .../scene/layout-tabs/TabsLayoutManagerRenderer.tsx  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
index 25be6dd13ca..acfda7fa47c 100644
--- a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
@@ -6,6 +6,7 @@ import { SceneComponentProps } from '@grafana/scenes';
 import { Button, TabContent, TabsBar, useStyles2 } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';
 
+import { useIsConditionallyHidden } from '../../conditional-rendering/useIsConditionallyHidden';
 import { getDashboardSceneFor } from '../../utils/utils';
 import { useClipboardState } from '../layouts-shared/useClipboardState';
 
@@ -19,6 +20,7 @@ export function TabsLayoutManagerRenderer({ model }: SceneComponentProps<TabsLay
   const dashboard = getDashboardSceneFor(model);
   const { isEditing } = dashboard.useState();
   const { hasCopiedTab } = useClipboardState();
+  const [_, conditionalRenderingClass, conditionalRenderingOverlay] = useIsConditionallyHidden(currentTab);
 
   return (
     <div className={styles.tabLayoutContainer}>
@@ -64,9 +66,13 @@ export function TabsLayoutManagerRenderer({ model }: SceneComponentProps<TabsLay
           </div>
         </DragDropContext>
       </TabsBar>
-      <TabContent className={styles.tabContentContainer}>
-        {currentTab && <layout.Component model={layout} />}
-      </TabContent>
+
+      <div className={conditionalRenderingClass}>
+        <TabContent className={styles.tabContentContainer}>
+          {currentTab && <layout.Component model={layout} />}
+        </TabContent>
+        {isEditing && conditionalRenderingOverlay}
+      </div>
     </div>
   );
 }