From 38ee910e396d6c99fa8489d666f023e9c80969ab Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 13 Apr 2023 12:00:59 +0100
Subject: [PATCH] Dashboards: Prevent template variables from resolving twice
 (#66372)

---
 .../core/components/AppChrome/AppChrome.tsx   | 43 ++++++++++---------
 .../components/AppChrome/AppChromeService.tsx |  1 +
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx
index 548436f4101..6e2f3f9ad06 100644
--- a/public/app/core/components/AppChrome/AppChrome.tsx
+++ b/public/app/core/components/AppChrome/AppChrome.tsx
@@ -47,31 +47,32 @@ export function AppChrome({ children }: Props) {
   });
 
   // Chromeless routes are without topNav, mega menu, search & command palette
-  if (state.chromeless) {
-    return (
-      <main className="main-view">
-        <div className={contentClass}>{children}</div>
-      </main>
-    );
-  }
+  // We check chromeless twice here instead of having a separate path so {children}
+  // doesn't get re-mounted when chromeless goes from true to false.
 
   return (
     <main className="main-view">
-      <div className={cx(styles.topNav)}>
-        {!searchBarHidden && <TopSearchBar />}
-        <NavToolbar
-          searchBarHidden={searchBarHidden}
-          sectionNav={state.sectionNav}
-          pageNav={state.pageNav}
-          actions={state.actions}
-          onToggleSearchBar={chrome.onToggleSearchBar}
-          onToggleMegaMenu={chrome.onToggleMegaMenu}
-          onToggleKioskMode={chrome.onToggleKioskMode}
-        />
-      </div>
+      {!state.chromeless && (
+        <div className={cx(styles.topNav)}>
+          {!searchBarHidden && <TopSearchBar />}
+          <NavToolbar
+            searchBarHidden={searchBarHidden}
+            sectionNav={state.sectionNav}
+            pageNav={state.pageNav}
+            actions={state.actions}
+            onToggleSearchBar={chrome.onToggleSearchBar}
+            onToggleMegaMenu={chrome.onToggleMegaMenu}
+            onToggleKioskMode={chrome.onToggleKioskMode}
+          />
+        </div>
+      )}
       <div className={contentClass}>{children}</div>
-      <MegaMenu searchBarHidden={searchBarHidden} onClose={() => chrome.setMegaMenu(false)} />
-      <CommandPalette />
+      {!state.chromeless && (
+        <>
+          <MegaMenu searchBarHidden={searchBarHidden} onClose={() => chrome.setMegaMenu(false)} />
+          <CommandPalette />
+        </>
+      )}
     </main>
   );
 }
diff --git a/public/app/core/components/AppChrome/AppChromeService.tsx b/public/app/core/components/AppChrome/AppChromeService.tsx
index bc919918d99..641d4d87283 100644
--- a/public/app/core/components/AppChrome/AppChromeService.tsx
+++ b/public/app/core/components/AppChrome/AppChromeService.tsx
@@ -73,6 +73,7 @@ export class AppChromeService {
     // Some updates can have new instance of sectionNav or pageNav but with same values
     if (newState.sectionNav !== current.sectionNav || newState.pageNav !== current.pageNav) {
       if (
+        newState.actions === current.actions &&
         navItemsAreTheSame(newState.sectionNav, current.sectionNav) &&
         navItemsAreTheSame(newState.pageNav, current.pageNav)
       ) {