From 0e6bcba4a8b6fb036094a5cba8191ed505cb6c3f Mon Sep 17 00:00:00 2001
From: Sergej-Vlasov <37613182+Sergej-Vlasov@users.noreply.github.com>
Date: Tue, 10 Dec 2024 10:06:07 +0000
Subject: [PATCH] Dashboards: Fixes issue with panel header showing even when
 hide time override was enabled (#97389)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dashboards: Fixes issue with panel header showing even when hide time override was enabled (#95814)

* Dashboards: Fixes issue with panel header showing even when hide time override was enabled

* fixes

* fixed test

(cherry picked from commit 6fd3620d50e6204c2113ec523020084aa84e760b)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../PanelDataQueriesTab.test.tsx              | 16 +++++++++
 .../PanelDataPane/PanelDataQueriesTab.tsx     | 33 ++++++++-----------
 .../panel-edit/getPanelFrameOptions.tsx       | 19 +++++++++--
 .../transformSaveModelToScene.test.ts         | 12 +++++++
 .../transformSaveModelToScene.ts              |  4 ++-
 5 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.test.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.test.tsx
index 5a406406282..c086588f098 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.test.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.test.tsx
@@ -425,6 +425,22 @@ describe('PanelDataQueriesTab', () => {
           expect(panel.state.$timeRange).toBeInstanceOf(PanelTimeRange);
         });
 
+        it('should update hoverHeader', async () => {
+          const { queriesTab, panel } = await setupScene('panel-1');
+
+          panel.setState({ title: '', hoverHeader: true });
+
+          panel.state.$data?.activate();
+
+          queriesTab.onQueryOptionsChange({
+            dataSource: { name: 'grafana-testdata', type: 'grafana-testdata-datasource', default: true },
+            queries: [],
+            timeRange: { from: '1h' },
+          });
+
+          expect(panel.state.hoverHeader).toBe(false);
+        });
+
         it('should update PanelTimeRange object on time options update', async () => {
           const { queriesTab, panel } = await setupScene('panel-1');
 
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx
index 23f663ca9f5..9eb246042fd 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx
@@ -24,8 +24,9 @@ import { updateQueries } from 'app/features/query/state/updateQueries';
 import { isSharedDashboardQuery } from 'app/plugins/datasource/dashboard';
 import { QueryGroupOptions } from 'app/types';
 
-import { PanelTimeRange, PanelTimeRangeState } from '../../scene/PanelTimeRange';
+import { PanelTimeRange } from '../../scene/PanelTimeRange';
 import { getDashboardSceneFor, getPanelIdForVizPanel, getQueryRunnerFor } from '../../utils/utils';
+import { getUpdatedHoverHeader } from '../getPanelFrameOptions';
 
 import { PanelDataPaneTab, TabId, PanelDataTabHeaderProps } from './types';
 
@@ -190,12 +191,11 @@ export class PanelDataQueriesTab extends SceneObjectBase<PanelDataQueriesTabStat
   };
 
   public onQueryOptionsChange = (options: QueryGroupOptions) => {
-    const panelObj = this.state.panelRef.resolve();
+    const panel = this.state.panelRef.resolve();
     const dataObj = this.queryRunner;
-    const timeRangeObj = panelObj.state.$timeRange;
 
     const dataObjStateUpdate: Partial<SceneQueryRunner['state']> = {};
-    const timeRangeObjStateUpdate: Partial<PanelTimeRangeState> = {};
+    const panelStateUpdate: Partial<VizPanel['state']> = {};
 
     if (options.maxDataPoints !== dataObj.state.maxDataPoints) {
       dataObjStateUpdate.maxDataPoints = options.maxDataPoints ?? undefined;
@@ -205,23 +205,16 @@ export class PanelDataQueriesTab extends SceneObjectBase<PanelDataQueriesTabStat
       dataObjStateUpdate.minInterval = options.minInterval;
     }
 
-    if (options.timeRange) {
-      timeRangeObjStateUpdate.timeFrom = options.timeRange.from ?? undefined;
-      timeRangeObjStateUpdate.timeShift = options.timeRange.shift ?? undefined;
-      timeRangeObjStateUpdate.hideTimeOverride = options.timeRange.hide;
-    }
+    const timeFrom = options.timeRange?.from ?? undefined;
+    const timeShift = options.timeRange?.shift ?? undefined;
+    const hideTimeOverride = options.timeRange?.hide;
 
-    if (timeRangeObj instanceof PanelTimeRange) {
-      if (timeRangeObjStateUpdate.timeFrom !== undefined || timeRangeObjStateUpdate.timeShift !== undefined) {
-        // update time override
-        timeRangeObj.setState(timeRangeObjStateUpdate);
-      } else {
-        // remove time override
-        panelObj.setState({ $timeRange: undefined });
-      }
+    if (timeFrom !== undefined || timeShift !== undefined) {
+      panelStateUpdate.$timeRange = new PanelTimeRange({ timeFrom, timeShift, hideTimeOverride });
+      panelStateUpdate.hoverHeader = getUpdatedHoverHeader(panel.state.title, panelStateUpdate.$timeRange);
     } else {
-      // no time override present on the panel, let's create one first
-      panelObj.setState({ $timeRange: new PanelTimeRange(timeRangeObjStateUpdate) });
+      panelStateUpdate.$timeRange = undefined;
+      panelStateUpdate.hoverHeader = getUpdatedHoverHeader(panel.state.title, undefined);
     }
 
     if (options.cacheTimeout !== dataObj?.state.cacheTimeout) {
@@ -232,6 +225,8 @@ export class PanelDataQueriesTab extends SceneObjectBase<PanelDataQueriesTabStat
       dataObjStateUpdate.queryCachingTTL = options.queryCachingTTL;
     }
 
+    panel.setState(panelStateUpdate);
+
     dataObj.setState(dataObjStateUpdate);
     dataObj.runQueries();
   };
diff --git a/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx b/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
index 0f2a8961278..08bbf2750e6 100644
--- a/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/getPanelFrameOptions.tsx
@@ -1,7 +1,7 @@
 import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
-import { SceneObjectState, VizPanel } from '@grafana/scenes';
+import { SceneObjectState, SceneTimeRangeLike, VizPanel } from '@grafana/scenes';
 import { DataLinksInlineEditor, Input, TextArea, Switch, RadioButtonGroup, Select } from '@grafana/ui';
 import { GenAIPanelDescriptionButton } from 'app/features/dashboard/components/GenAI/GenAIPanelDescriptionButton';
 import { GenAIPanelTitleButton } from 'app/features/dashboard/components/GenAI/GenAIPanelTitleButton';
@@ -12,6 +12,7 @@ import { getPanelLinksVariableSuggestions } from 'app/features/panel/panellinks/
 
 import { DashboardGridItem } from '../scene/DashboardGridItem';
 import { VizPanelLinks } from '../scene/PanelLinks';
+import { PanelTimeRange } from '../scene/PanelTimeRange';
 import { vizPanelToPanel, transformSceneToSaveModel } from '../serialization/transformSceneToSaveModel';
 import { dashboardSceneGraph } from '../utils/dashboardSceneGraph';
 import { getDashboardSceneFor } from '../utils/utils';
@@ -209,5 +210,19 @@ function DescriptionTextArea({ panel }: { panel: VizPanel }) {
 }
 
 function setPanelTitle(panel: VizPanel, title: string) {
-  panel.setState({ title: title, hoverHeader: title === '' });
+  panel.setState({ title: title, hoverHeader: getUpdatedHoverHeader(title, panel.state.$timeRange) });
+}
+
+export function getUpdatedHoverHeader(title: string, timeRange: SceneTimeRangeLike | undefined): boolean {
+  if (title !== '') {
+    return false;
+  }
+
+  if (timeRange instanceof PanelTimeRange && !timeRange.state.hideTimeOverride) {
+    if (timeRange.state.timeFrom || timeRange.state.timeShift) {
+      return false;
+    }
+  }
+
+  return true;
 }
diff --git a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts
index 42c621d2386..cd6a67e60eb 100644
--- a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts
+++ b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts
@@ -585,6 +585,18 @@ describe('transformSaveModelToScene', () => {
       expect(vizPanel.state.hoverHeader).toEqual(true);
     });
 
+    it('should set hoverHeader to true if timeFrom and hideTimeOverride is true', () => {
+      const panel = {
+        type: 'test-plugin',
+        timeFrom: '2h',
+        hideTimeOverride: true,
+      };
+
+      const { vizPanel } = buildGridItemForTest(panel);
+
+      expect(vizPanel.state.hoverHeader).toBe(true);
+    });
+
     it('should initalize the VizPanel with min interval set', () => {
       const panel = {
         title: '',
diff --git a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts
index 5979197500c..1d74aec3e99 100644
--- a/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts
+++ b/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts
@@ -291,6 +291,8 @@ export function buildGridItemForPanel(panel: PanelModel): DashboardGridItem {
 
   titleItems.push(new PanelNotices());
 
+  const timeOverrideShown = (panel.timeFrom || panel.timeShift) && !panel.hideTimeOverride;
+
   const vizPanelState: VizPanelState = {
     key: getVizPanelKeyForPanelId(panel.id),
     title: panel.title,
@@ -301,7 +303,7 @@ export function buildGridItemForPanel(panel: PanelModel): DashboardGridItem {
     pluginVersion: panel.pluginVersion,
     displayMode: panel.transparent ? 'transparent' : undefined,
     // To be replaced with it's own option persited option instead derived
-    hoverHeader: !panel.title && !panel.timeFrom && !panel.timeShift,
+    hoverHeader: !panel.title && !timeOverrideShown,
     hoverHeaderOffset: 0,
     $data: createPanelDataProvider(panel),
     titleItems,