From 27ba6b37ab82581cd9215fd2dc35f0807291c2ef Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathan.marrs@grafana.com>
Date: Wed, 20 Oct 2021 14:52:53 -0700
Subject: [PATCH] Canvas: Add support to disable panel editing (#40724)

---
 public/app/features/canvas/runtime/scene.tsx      | 12 ++++--------
 public/app/plugins/panel/canvas/CanvasPanel.tsx   | 15 +++++++++++----
 .../canvas/editor/LayerElementListEditor.tsx      |  9 +++++++--
 public/app/plugins/panel/canvas/module.tsx        |  2 +-
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx
index d098ba0b6c3..aa151f85a5f 100644
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -46,11 +46,11 @@ export class Scene {
   selecto?: Selecto;
   div?: HTMLDivElement;
 
-  constructor(cfg: CanvasGroupOptions, public onSave: (cfg: CanvasGroupOptions) => void) {
-    this.root = this.load(cfg);
+  constructor(cfg: CanvasGroupOptions, enableEditing: boolean, public onSave: (cfg: CanvasGroupOptions) => void) {
+    this.root = this.load(cfg, enableEditing);
   }
 
-  load(cfg: CanvasGroupOptions) {
+  load(cfg: CanvasGroupOptions, enableEditing: boolean) {
     this.root = new RootElement(
       cfg ?? {
         type: 'group',
@@ -66,7 +66,7 @@ export class Scene {
     });
 
     setTimeout(() => {
-      if (this.div) {
+      if (this.div && enableEditing) {
         this.initMoveable();
       }
     }, 100);
@@ -158,10 +158,6 @@ export class Scene {
   };
 
   initMoveable = () => {
-    if (this.selecto) {
-      this.selecto.destroy();
-    }
-
     const targetElements: HTMLDivElement[] = [];
     this.root.elements.forEach((element: ElementState) => {
       targetElements.push(element.div!);
diff --git a/public/app/plugins/panel/canvas/CanvasPanel.tsx b/public/app/plugins/panel/canvas/CanvasPanel.tsx
index 0aae1c9cd43..330019f0d8f 100644
--- a/public/app/plugins/panel/canvas/CanvasPanel.tsx
+++ b/public/app/plugins/panel/canvas/CanvasPanel.tsx
@@ -37,7 +37,7 @@ export class CanvasPanel extends Component<Props, State> {
 
     // Only the initial options are ever used.
     // later changes are all controlled by the scene
-    this.scene = new Scene(this.props.options.root, this.onUpdateScene);
+    this.scene = new Scene(this.props.options.root, this.props.options.inlineEditing, this.onUpdateScene);
     this.scene.updateSize(props.width, props.height);
     this.scene.updateData(props.data);
 
@@ -109,13 +109,20 @@ export class CanvasPanel extends Component<Props, State> {
       changed = true;
     }
 
-    // After editing, the options are valid, but the scene was in a different panel
-    if (this.needsReload && this.props.options !== nextProps.options) {
+    // After editing, the options are valid, but the scene was in a different panel or inline editing mode has changed
+    const shouldUpdateSceneAndPanel =
+      (this.needsReload && this.props.options !== nextProps.options) ||
+      this.props.options.inlineEditing !== nextProps.options.inlineEditing;
+    if (shouldUpdateSceneAndPanel) {
       this.needsReload = false;
-      this.scene.load(nextProps.options.root);
+      this.scene.load(nextProps.options.root, nextProps.options.inlineEditing);
       this.scene.updateSize(nextProps.width, nextProps.height);
       this.scene.updateData(nextProps.data);
       changed = true;
+
+      if (this.props.options.inlineEditing) {
+        this.scene.selecto?.destroy();
+      }
     }
 
     return changed;
diff --git a/public/app/plugins/panel/canvas/editor/LayerElementListEditor.tsx b/public/app/plugins/panel/canvas/editor/LayerElementListEditor.tsx
index 3a4e6fa7a43..a374bdbcf33 100644
--- a/public/app/plugins/panel/canvas/editor/LayerElementListEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/LayerElementListEditor.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { css, cx } from '@emotion/css';
 import { Button, Container, Icon, IconButton, stylesFactory, ValuePicker } from '@grafana/ui';
-import { GrafanaTheme, SelectableValue, StandardEditorProps } from '@grafana/data';
+import { AppEvents, GrafanaTheme, SelectableValue, StandardEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
 
@@ -9,6 +9,7 @@ import { PanelOptions } from '../models.gen';
 import { InstanceState } from '../CanvasPanel';
 import { LayerActionID } from '../types';
 import { canvasElementRegistry } from 'app/features/canvas';
+import appEvents from 'app/core/app_events';
 
 type Props = StandardEditorProps<any, InstanceState, PanelOptions>;
 
@@ -36,7 +37,11 @@ export class LayerElementListEditor extends PureComponent<Props> {
     const { settings } = this.props.item;
 
     if (settings?.scene && settings?.scene?.selecto) {
-      settings.scene.selecto.clickTarget(item, item?.div);
+      try {
+        settings.scene.selecto.clickTarget(item, item?.div);
+      } catch (error) {
+        appEvents.emit(AppEvents.alertError, ['Unable to select element with inline editing disabled']);
+      }
     }
   };
 
diff --git a/public/app/plugins/panel/canvas/module.tsx b/public/app/plugins/panel/canvas/module.tsx
index 28bb10cb5a1..0525400ee02 100644
--- a/public/app/plugins/panel/canvas/module.tsx
+++ b/public/app/plugins/panel/canvas/module.tsx
@@ -14,7 +14,7 @@ export const plugin = new PanelPlugin<PanelOptions>(CanvasPanel)
     builder.addBooleanSwitch({
       path: 'inlineEditing',
       name: 'Inline editing',
-      description: 'Enable editing while the panel is in dashboard mode',
+      description: 'Enable editing the panel directly',
       defaultValue: true,
     });