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

@@ -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';

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: {

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,

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