Canvas: Add support to disable panel editing (#40724)

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!);

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;

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']);
+      }
     }
   };
 

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,
     });