From e48351fbd32596dd34146ab1bd04c5c1e718cd89 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 14 Oct 2024 16:21:15 +0100
Subject: [PATCH] AppChromeService: Improve `useChromeHeaderHeight` to only
 react to necessary state changes (#94624)

make useChromeHeaderHeight only react to necessary state changes
---
 .../components/AppChrome/AppChromeService.tsx | 28 ++++++++++++++++++-
 public/app/core/context/GrafanaContext.ts     | 24 ++--------------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChromeService.tsx b/public/app/core/components/AppChrome/AppChromeService.tsx
index c041574aff9..ba7fb666478 100644
--- a/public/app/core/components/AppChrome/AppChromeService.tsx
+++ b/public/app/core/components/AppChrome/AppChromeService.tsx
@@ -1,5 +1,5 @@
 import { useObservable } from 'react-use';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, map } from 'rxjs';
 
 import { AppEvents, NavModel, NavModelItem, PageLayoutType, UrlQueryValue } from '@grafana/data';
 import { config, locationService, reportInteraction } from '@grafana/runtime';
@@ -12,6 +12,7 @@ import { KioskMode } from 'app/types';
 import { RouteDescriptor } from '../../navigation/types';
 
 import { ReturnToPreviousProps } from './ReturnToPrevious/ReturnToPrevious';
+import { TOP_BAR_LEVEL_HEIGHT } from './types';
 
 export interface AppChromeState {
   chromeless?: boolean;
@@ -56,6 +57,31 @@ export class AppChromeService {
     returnToPrevious: this.returnToPreviousData,
   });
 
+  public headerHeightObservable = this.state
+    .pipe(
+      map(({ actions, chromeless, kioskMode, searchBarHidden }) => {
+        if (config.featureToggles.singleTopNav) {
+          if (kioskMode || chromeless) {
+            return 0;
+          } else if (actions) {
+            return TOP_BAR_LEVEL_HEIGHT * 2;
+          } else {
+            return TOP_BAR_LEVEL_HEIGHT;
+          }
+        } else {
+          if (kioskMode || chromeless) {
+            return 0;
+          } else if (searchBarHidden) {
+            return TOP_BAR_LEVEL_HEIGHT;
+          } else {
+            return TOP_BAR_LEVEL_HEIGHT * 2;
+          }
+        }
+      })
+    )
+    // only emit if the state has actually changed
+    .pipe(distinctUntilChanged());
+
   public setMatchedRoute(route: RouteDescriptor) {
     if (this.currentRoute !== route) {
       this.currentRoute = route;
diff --git a/public/app/core/context/GrafanaContext.ts b/public/app/core/context/GrafanaContext.ts
index cf3ed6f1f1c..1a82d7f5c3d 100644
--- a/public/app/core/context/GrafanaContext.ts
+++ b/public/app/core/context/GrafanaContext.ts
@@ -1,10 +1,10 @@
 import { createContext, useCallback, useContext } from 'react';
+import { useObservable } from 'react-use';
 
 import { GrafanaConfig } from '@grafana/data';
-import { LocationService, locationService, BackendSrv, config } from '@grafana/runtime';
+import { LocationService, locationService, BackendSrv } from '@grafana/runtime';
 
 import { AppChromeService } from '../components/AppChrome/AppChromeService';
-import { TOP_BAR_LEVEL_HEIGHT } from '../components/AppChrome/types';
 import { NewFrontendAssetsChecker } from '../services/NewFrontendAssetsChecker';
 import { KeybindingSrv } from '../services/keybindingSrv';
 
@@ -45,23 +45,5 @@ export function useReturnToPreviousInternal() {
 
 export function useChromeHeaderHeight() {
   const { chrome } = useGrafana();
-  const { actions, kioskMode, searchBarHidden, chromeless } = chrome.useState();
-
-  if (config.featureToggles.singleTopNav) {
-    if (kioskMode || chromeless) {
-      return 0;
-    } else if (actions) {
-      return TOP_BAR_LEVEL_HEIGHT * 2;
-    } else {
-      return TOP_BAR_LEVEL_HEIGHT;
-    }
-  } else {
-    if (kioskMode || chromeless) {
-      return 0;
-    } else if (searchBarHidden) {
-      return TOP_BAR_LEVEL_HEIGHT;
-    } else {
-      return TOP_BAR_LEVEL_HEIGHT * 2;
-    }
-  }
+  return useObservable(chrome.headerHeightObservable, 0);
 }