From 480ef44edfd13cb8ff341b74ae86c8ccb71dacff Mon Sep 17 00:00:00 2001
From: Sergej-Vlasov <37613182+Sergej-Vlasov@users.noreply.github.com>
Date: Fri, 3 May 2024 19:12:30 +0300
Subject: [PATCH] DashboardScene: Restrict dashboard in read only state
 (#87316) (#87335)

---------

Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
(cherry picked from commit 64330534799cd1e222c69a0a07ba5dc8f39366e1)
---
 .../scene/DashboardSceneUrlSync.ts            | 10 +++++---
 .../scene/NavToolbarActions.tsx               | 24 ++++++++++++++++++-
 .../scene/PanelMenuBehavior.tsx               |  4 ++--
 .../dashboard-scene/settings/utils.ts         |  8 -------
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts
index 99acc84e760..90a8a932491 100644
--- a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts
+++ b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts
@@ -51,9 +51,13 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler {
 
       // If we are not in editing (for example after full page reload)
       if (!isEditing) {
-        // Not sure what is best to do here.
-        // The reason for the timeout is for this change to happen after the url sync has completed
-        setTimeout(() => this._scene.onEnterEditMode());
+        if (this._scene.state.editable) {
+          // Not sure what is best to do here.
+          // The reason for the timeout is for this change to happen after the url sync has completed
+          setTimeout(() => this._scene.onEnterEditMode());
+        } else {
+          update.editview = undefined;
+        }
       }
     } else if (values.hasOwnProperty('editview')) {
       update.editview = undefined;
diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
index c9fba9cf2e4..7f06537a383 100644
--- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
+++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
@@ -54,6 +54,7 @@ export function ToolbarActions({ dashboard }: Props) {
     meta,
     editview,
     editPanel,
+    editable,
     hasCopiedPanel: copiedPanel,
   } = dashboard.useState();
   const { isPlaying } = playlistSrv.useState();
@@ -326,7 +327,7 @@ export function ToolbarActions({ dashboard }: Props) {
 
   toolbarActions.push({
     group: 'main-buttons',
-    condition: !isEditing && dashboard.canEditDashboard() && !isViewingPanel && !isPlaying,
+    condition: !isEditing && dashboard.canEditDashboard() && !isViewingPanel && !isPlaying && editable,
     render: () => (
       <Button
         onClick={() => {
@@ -344,6 +345,27 @@ export function ToolbarActions({ dashboard }: Props) {
     ),
   });
 
+  toolbarActions.push({
+    group: 'main-buttons',
+    condition: !isEditing && dashboard.canEditDashboard() && !isViewingPanel && !isPlaying && !editable,
+    render: () => (
+      <Button
+        onClick={() => {
+          dashboard.onEnterEditMode();
+          dashboard.setState({ editable: true, meta: { ...meta, canEdit: true } });
+        }}
+        tooltip="This dashboard was marked as read only"
+        key="edit"
+        className={styles.buttonWithExtraMargin}
+        variant="secondary"
+        size="sm"
+        data-testid={selectors.components.NavToolbar.editDashboard.editButton}
+      >
+        Make editable
+      </Button>
+    ),
+  });
+
   toolbarActions.push({
     group: 'settings',
     condition: isEditing && dashboard.canEditDashboard() && isShowingDashboard,
diff --git a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
index cbb73094aa9..3761e8dd00f 100644
--- a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
+++ b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
@@ -66,12 +66,12 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
       });
     }
 
-    if (dashboard.canEditDashboard() && !isRepeat && !isEditingPanel) {
+    if (dashboard.canEditDashboard() && dashboard.state.editable && !isRepeat && !isEditingPanel) {
       // We could check isEditing here but I kind of think this should always be in the menu,
       // and going into panel edit should make the dashboard go into edit mode is it's not already
       items.push({
         text: t('panel.header-menu.edit', `Edit`),
-        iconClassName: 'eye',
+        iconClassName: 'edit',
         shortcut: 'e',
         onClick: () => DashboardInteractions.panelMenuItemClicked('edit'),
         href: getEditPanelUrl(getPanelIdForVizPanel(panel)),
diff --git a/public/app/features/dashboard-scene/settings/utils.ts b/public/app/features/dashboard-scene/settings/utils.ts
index b53c0094faa..1f40d2be8e6 100644
--- a/public/app/features/dashboard-scene/settings/utils.ts
+++ b/public/app/features/dashboard-scene/settings/utils.ts
@@ -64,14 +64,6 @@ export function useDashboardEditPageNav(dashboard: DashboardScene, currentEditVi
     });
   }
 
-  if (dashboard.state.meta.canMakeEditable) {
-    pageNav.children!.push({
-      text: t('dashboard-settings.general.title', 'General'),
-      url: locationUtil.getUrlForPartial(location, { editview: 'settings', editIndex: null }),
-      active: currentEditView === 'settings',
-    });
-  }
-
   if (dashboard.state.id && dashboard.state.meta.canSave) {
     pageNav.children!.push({
       text: t('dashboard-settings.versions.title', 'Versions'),