Canvas: Support context menu in panel edit mode (#80335)

public/app/features/canvas/runtime/scene.tsx

@@ -665,34 +665,36 @@ export class Scene {
   };
 
   render() {
-    const canShowContextMenu = this.isPanelEditing || (!this.isPanelEditing && this.isEditingEnabled);
     const isTooltipValid = (this.tooltip?.element?.data?.links?.length ?? 0) > 0;
     const canShowElementTooltip = !this.isEditingEnabled && isTooltipValid;
 
+    const onSceneContainerMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      // If pan and zoom is disabled or context menu is visible, don't pan
+      if ((!this.shouldPanZoom || this.contextMenuVisible) && (e.button === 1 || (e.button === 2 && e.ctrlKey))) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+
+      // If context menu is hidden, ignore left mouse or non-ctrl right mouse for pan
+      if (!this.contextMenuVisible && !this.isPanelEditing && e.button === 2 && !e.ctrlKey) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
     const sceneDiv = (
-      // TODO: Address this eslint error
+      // The <div> element has child elements that allow for mouse events, so we need to disable the linter rule
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
         key={this.revId}
         className={this.styles.wrap}
         style={this.style}
         ref={this.setRef}
-        onMouseDown={(e) => {
-          // If pan and zoom is disabled and middle mouse or ctrl + right mouse, don't pan
-          if ((!this.shouldPanZoom || this.contextMenuVisible) && (e.button === 1 || (e.button === 2 && e.ctrlKey))) {
-            e.preventDefault();
-            e.stopPropagation();
-          }
-          // If context menu is hidden, ignore left mouse or non-ctrl right mouse for pan
-          if (!this.contextMenuVisible && e.button === 2 && !e.ctrlKey) {
-            e.preventDefault();
-            e.stopPropagation();
-          }
-        }}
+        onMouseDown={onSceneContainerMouseDown}
       >
         {this.connections.render()}
         {this.root.render()}
-        {canShowContextMenu && (
+        {this.isEditingEnabled && (
           <Portal>
             <CanvasContextMenu
               scene={this}

public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx

@@ -71,6 +71,7 @@ export const CanvasContextMenu = ({ scene, panel, onVisibilityChange }: Props) =
   };
 
   const renderMenuItems = () => {
+    // This is disabled when panel is in edit mode because opening inline editor over panel editor is not ideal UX
     const openCloseEditorMenuItem = !scene.isPanelEditing && (
       <MenuItem
         label={inlineEditorOpen ? 'Close Editor' : 'Open Editor'}
@@ -139,7 +140,7 @@ export const CanvasContextMenu = ({ scene, panel, onVisibilityChange }: Props) =
       return submenuItems;
     };
 
-    const addItemMenuItem = !scene.isPanelEditing && (
+    const addItemMenuItem = (
       <MenuItem
         label="Add item"
         className={styles.menuItem}
@@ -148,7 +149,7 @@ export const CanvasContextMenu = ({ scene, panel, onVisibilityChange }: Props) =
       />
     );
 
-    const setBackgroundMenuItem = !scene.isPanelEditing && (
+    const setBackgroundMenuItem = (
       <MenuItem
         label={'Set background'}
         onClick={() => {