From bd5d67ed28d4e12b61b411861ee980a01e715261 Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Thu, 5 Oct 2023 21:58:35 +0200
Subject: [PATCH] Canvas: Add ability to customize what standard element
 editors show up for all element types (#75935)

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
---
 public/app/features/canvas/element.ts         |  5 +++-
 .../app/features/canvas/elements/button.tsx   |  4 +++
 public/app/features/canvas/types.ts           |  6 ++++
 .../canvas/editor/element/elementEditor.tsx   | 30 ++++++++++++-------
 4 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/public/app/features/canvas/element.ts b/public/app/features/canvas/element.ts
index 97e788fa8eb..e156860313a 100644
--- a/public/app/features/canvas/element.ts
+++ b/public/app/features/canvas/element.ts
@@ -7,7 +7,7 @@ import { config } from 'app/core/config';
 
 import { DimensionContext } from '../dimensions';
 
-import { BackgroundConfig, Constraint, LineConfig, Placement } from './types';
+import { BackgroundConfig, Constraint, LineConfig, Placement, StandardEditorConfig } from './types';
 
 /**
  * This gets saved in panel json
@@ -84,6 +84,9 @@ export interface CanvasElementItem<TConfig = any, TData = any> extends RegistryI
 
   /** If item has an edit mode */
   hasEditMode?: boolean;
+
+  /** Optional config to customize what standard element editor options are available for the item */
+  standardEditorConfig?: StandardEditorConfig;
 }
 
 export const defaultBgColor = '#D9D9D9';
diff --git a/public/app/features/canvas/elements/button.tsx b/public/app/features/canvas/elements/button.tsx
index e35c5e4ed70..981bc02b36a 100644
--- a/public/app/features/canvas/elements/button.tsx
+++ b/public/app/features/canvas/elements/button.tsx
@@ -73,6 +73,10 @@ export const buttonItem: CanvasElementItem<ButtonConfig, ButtonData> = {
   description: 'Button',
   state: PluginState.alpha,
 
+  standardEditorConfig: {
+    background: false,
+  },
+
   display: ButtonDisplay,
 
   defaultSize: {
diff --git a/public/app/features/canvas/types.ts b/public/app/features/canvas/types.ts
index b0e667d1024..fbed9984600 100644
--- a/public/app/features/canvas/types.ts
+++ b/public/app/features/canvas/types.ts
@@ -60,6 +60,12 @@ export interface EllipseData extends TextData {
   width?: number;
 }
 
+export interface StandardEditorConfig {
+  layout?: boolean;
+  background?: boolean;
+  border?: boolean;
+}
+
 export {
   Placement,
   Constraint,
diff --git a/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx b/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx
index 3c9cf6778f8..9f5070708b3 100644
--- a/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/element/elementEditor.tsx
@@ -96,17 +96,27 @@ export function getElementEditor(opts: CanvasEditorOptions): NestedPanelOptions<
         layer.registerOptionsUI(builder, ctx);
       }
 
-      builder.addCustomEditor({
-        category: ['Layout'],
-        id: 'content',
-        path: '__', // not used
-        name: 'Quick placement',
-        editor: PlacementEditor,
-        settings: opts,
-      });
+      const shouldAddLayoutEditor = opts.element.item.standardEditorConfig?.layout ?? true;
+      if (shouldAddLayoutEditor) {
+        builder.addCustomEditor({
+          category: ['Layout'],
+          id: 'content',
+          path: '__', // not used
+          name: 'Quick placement',
+          editor: PlacementEditor,
+          settings: opts,
+        });
+      }
 
-      optionBuilder.addBackground(builder, ctx);
-      optionBuilder.addBorder(builder, ctx);
+      const shouldAddBackgroundEditor = opts.element.item.standardEditorConfig?.background ?? true;
+      if (shouldAddBackgroundEditor) {
+        optionBuilder.addBackground(builder, ctx);
+      }
+
+      const shouldAddBorderEditor = opts.element.item.standardEditorConfig?.border ?? true;
+      if (shouldAddBorderEditor) {
+        optionBuilder.addBorder(builder, ctx);
+      }
     },
   };
 }