Canvas: Remove inline editor button #52237

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

@@ -67,7 +67,7 @@ export const CanvasContextMenu = ({ scene }: Props) => {
         onClick={() => {
           if (scene.inlineEditingCallback) {
             if (inlineEditorOpen) {
-              activePanel.panel.inlineEditButtonClose();
+              activePanel.panel.closeInlineEdit();
             } else {
               scene.inlineEditingCallback();
             }

public/app/plugins/panel/canvas/CanvasPanel.tsx

@@ -1,10 +1,9 @@
-import { css } from '@emotion/css';
 import React, { Component } from 'react';
 import { ReplaySubject, Subscription } from 'rxjs';
 
-import { GrafanaTheme, PanelProps } from '@grafana/data';
-import { config, locationService } from '@grafana/runtime/src';
-import { Button, PanelContext, PanelContextRoot, stylesFactory } from '@grafana/ui';
+import { PanelProps } from '@grafana/data';
+import { locationService } from '@grafana/runtime/src';
+import { PanelContext, PanelContextRoot } from '@grafana/ui';
 import { CanvasFrameOptions } from 'app/features/canvas';
 import { ElementState } from 'app/features/canvas/runtime/element';
 import { Scene } from 'app/features/canvas/runtime/scene';
@@ -42,7 +41,6 @@ export class CanvasPanel extends Component<Props, State> {
   readonly scene: Scene;
   private subs = new Subscription();
   needsReload = false;
-  styles = getStyles(config.theme);
   isEditing = locationService.getSearchObject().editPanel !== undefined;
 
   constructor(props: Props) {
@@ -57,13 +55,13 @@ export class CanvasPanel extends Component<Props, State> {
     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);
-    this.scene.inlineEditingCallback = this.inlineEditButtonClick;
+    this.scene.inlineEditingCallback = this.openInlineEdit;
 
     this.subs.add(
       this.props.eventBus.subscribe(PanelEditEnteredEvent, (evt) => {
         // Remove current selection when entering edit mode for any panel in dashboard
         this.scene.clearCurrentSelection();
-        this.inlineEditButtonClose();
+        this.closeInlineEdit();
       })
     );
 
@@ -171,7 +169,7 @@ export class CanvasPanel extends Component<Props, State> {
     return changed;
   }
 
-  inlineEditButtonClick = () => {
+  openInlineEdit = () => {
     if (isInlineEditOpen) {
       this.forceUpdate();
       this.setActivePanel();
@@ -183,7 +181,7 @@ export class CanvasPanel extends Component<Props, State> {
     isInlineEditOpen = true;
   };
 
-  inlineEditButtonClose = () => {
+  closeInlineEdit = () => {
     this.setState({ openInlineEdit: false });
     isInlineEditOpen = false;
   };
@@ -194,39 +192,14 @@ export class CanvasPanel extends Component<Props, State> {
   };
 
   renderInlineEdit = () => {
-    return (
-      <InlineEdit onClose={() => this.inlineEditButtonClose()} id={this.props.id} scene={activeCanvasPanel!.scene} />
-    );
+    return <InlineEdit onClose={() => this.closeInlineEdit()} id={this.props.id} scene={activeCanvasPanel!.scene} />;
   };
-
   render() {
     return (
       <>
         {this.scene.render()}
-        {this.props.options.inlineEditing && !this.isEditing && (
-          <div>
-            <div className={this.styles.inlineEditButton}>
-              <Button
-                size="lg"
-                variant="secondary"
-                icon="edit"
-                data-btninlineedit={this.props.id}
-                onClick={this.inlineEditButtonClick}
-              />
-            </div>
-            {this.state.openInlineEdit && this.renderInlineEdit()}
-          </div>
-        )}
+        {this.state.openInlineEdit && this.renderInlineEdit()}
       </>
     );
   }
 }
-
-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
-  inlineEditButton: css`
-    position: absolute;
-    bottom: 8px;
-    left: 8px;
-    z-index: 999;
-  `,
-}));