From 7ab710daa7f4986fe0629e1db6a39ac99b46d8b3 Mon Sep 17 00:00:00 2001
From: Haris Rozajac <58232930+harisrozajac@users.noreply.github.com>
Date: Thu, 25 Jan 2024 14:27:11 -0700
Subject: [PATCH] Dashboard-Scenes: JSON Model and Version tabs don't hide edit
 mode on refresh (#81219)

* Add NavToolbarActions to fix the bug

* Update public/app/features/dashboard-scene/settings/VersionsEditView.tsx

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>

* Fix compared view

---------

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>
---
 .../settings/JsonModelEditView.tsx            |  2 +
 .../settings/VersionsEditView.tsx             | 54 ++++++++++---------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/public/app/features/dashboard-scene/settings/JsonModelEditView.tsx b/public/app/features/dashboard-scene/settings/JsonModelEditView.tsx
index 34e08210cc6..bd7626b5d61 100644
--- a/public/app/features/dashboard-scene/settings/JsonModelEditView.tsx
+++ b/public/app/features/dashboard-scene/settings/JsonModelEditView.tsx
@@ -10,6 +10,7 @@ import { getPrettyJSON } from 'app/features/inspector/utils/utils';
 import { DashboardDTO } from 'app/types';
 
 import { DashboardScene } from '../scene/DashboardScene';
+import { NavToolbarActions } from '../scene/NavToolbarActions';
 import { transformSaveModelToScene } from '../serialization/transformSaveModelToScene';
 import { transformSceneToSaveModel } from '../serialization/transformSceneToSaveModel';
 import { getDashboardSceneFor } from '../utils/utils';
@@ -69,6 +70,7 @@ export class JsonModelEditView extends SceneObjectBase<JsonModelEditViewState> i
 
     return (
       <Page navModel={navModel} pageNav={pageNav} layout={PageLayoutType.Standard}>
+        <NavToolbarActions dashboard={dashboard} />
         <div className={styles.wrapper}>
           <Trans i18nKey="dashboard-settings.json-editor.subtitle">
             The JSON model below is the data structure that defines the dashboard. This includes dashboard settings,
diff --git a/public/app/features/dashboard-scene/settings/VersionsEditView.tsx b/public/app/features/dashboard-scene/settings/VersionsEditView.tsx
index 0be7ad68b05..ea44185e9a8 100644
--- a/public/app/features/dashboard-scene/settings/VersionsEditView.tsx
+++ b/public/app/features/dashboard-scene/settings/VersionsEditView.tsx
@@ -6,6 +6,7 @@ import { HorizontalGroup, Spinner } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
 import { DashboardScene } from '../scene/DashboardScene';
+import { NavToolbarActions } from '../scene/NavToolbarActions';
 import { getDashboardSceneFor } from '../utils/utils';
 
 import { DashboardEditView, DashboardEditViewState, useDashboardEditPageNav } from './utils';
@@ -188,32 +189,30 @@ function VersionsEditorSettingsListView({ model }: SceneComponentProps<VersionsE
   const hasMore = model.versions.length >= model.limit;
   const isLastPage = model.versions.find((rev) => rev.version === 1);
 
-  if (viewMode === 'compare') {
-    return (
-      <Page navModel={navModel} pageNav={pageNav} layout={PageLayoutType.Standard}>
-        <VersionHistoryHeader
-          onClick={model.reset}
-          baseVersion={baseInfo?.version}
-          newVersion={newInfo?.version}
-          isNewLatest={isNewLatest}
+  const viewModeCompare = (
+    <>
+      <VersionHistoryHeader
+        onClick={model.reset}
+        baseVersion={baseInfo?.version}
+        newVersion={newInfo?.version}
+        isNewLatest={isNewLatest}
+      />
+      {isLoading ? (
+        <VersionsHistorySpinner msg="Fetching changes&hellip;" />
+      ) : (
+        <VersionHistoryComparison
+          newInfo={newInfo!}
+          baseInfo={baseInfo!}
+          isNewLatest={isNewLatest!}
+          diffData={model.diffData}
+          onRestore={dashboard.onRestore}
         />
-        {isLoading ? (
-          <VersionsHistorySpinner msg="Fetching changes&hellip;" />
-        ) : (
-          <VersionHistoryComparison
-            newInfo={newInfo!}
-            baseInfo={baseInfo!}
-            isNewLatest={isNewLatest!}
-            diffData={model.diffData}
-            onRestore={dashboard.onRestore}
-          />
-        )}
-      </Page>
-    );
-  }
+      )}
+    </>
+  );
 
-  return (
-    <Page navModel={navModel} pageNav={pageNav} layout={PageLayoutType.Standard}>
+  const viewModeList = (
+    <>
       {isLoading ? (
         <VersionsHistorySpinner msg="Fetching history list&hellip;" />
       ) : (
@@ -234,6 +233,13 @@ function VersionsEditorSettingsListView({ model }: SceneComponentProps<VersionsE
           isLastPage={!!isLastPage}
         />
       )}
+    </>
+  );
+
+  return (
+    <Page navModel={navModel} pageNav={pageNav} layout={PageLayoutType.Standard}>
+      <NavToolbarActions dashboard={dashboard} />
+      {viewMode === 'compare' ? viewModeCompare : viewModeList}
     </Page>
   );
 }