Canvas: Fix duplicated option editors functionality (#53184)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

public/app/features/dimensions/editors/BackgroundSizeEditor.tsx

@@ -0,0 +1,34 @@
+import React, { FC, useCallback } from 'react';
+
+import { SelectableValue, StandardEditorProps } from '@grafana/data';
+import { InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui/src';
+import { BackgroundImageSize } from 'app/features/canvas';
+
+const options: Array<SelectableValue<BackgroundImageSize>> = [
+  { value: BackgroundImageSize.Original, label: 'Original' },
+  { value: BackgroundImageSize.Contain, label: 'Contain' },
+  { value: BackgroundImageSize.Cover, label: 'Cover' },
+  { value: BackgroundImageSize.Fill, label: 'Fill' },
+  { value: BackgroundImageSize.Tile, label: 'Tile' },
+];
+
+export const BackgroundSizeEditor: FC<StandardEditorProps<string, undefined, undefined>> = (props) => {
+  const { value, onChange } = props;
+
+  const imageSize = value ?? BackgroundImageSize.Cover;
+
+  const onImageSizeChange = useCallback(
+    (size) => {
+      onChange(size);
+    },
+    [onChange]
+  );
+
+  return (
+    <InlineFieldRow>
+      <InlineField grow={true}>
+        <RadioButtonGroup value={imageSize} options={options} onChange={onImageSizeChange} fullWidth />
+      </InlineField>
+    </InlineFieldRow>
+  );
+};

public/app/plugins/panel/canvas/editor/options.ts

@@ -1,15 +1,23 @@
 import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
-import { BackgroundImageSize, CanvasElementOptions } from 'app/features/canvas';
+import { CanvasElementOptions } from 'app/features/canvas';
 import { ColorDimensionEditor, ResourceDimensionEditor } from 'app/features/dimensions/editors';
+import { BackgroundSizeEditor } from 'app/features/dimensions/editors/BackgroundSizeEditor';
 
 interface OptionSuppliers {
   addBackground: PanelOptionsSupplier<CanvasElementOptions>;
   addBorder: PanelOptionsSupplier<CanvasElementOptions>;
 }
 
+const getCategoryName = (str: string, type: string | undefined) => {
+  if (type !== 'frame' && type !== undefined) {
+    return [str + ` (${type})`];
+  }
+  return [str];
+};
+
 export const optionBuilder: OptionSuppliers = {
   addBackground: (builder, context) => {
-    const category = ['Background'];
+    const category = getCategoryName('Background', context.options?.type);
     builder
       .addCustomEditor({
         category,
@@ -33,25 +41,20 @@ export const optionBuilder: OptionSuppliers = {
           resourceType: 'image',
         },
       })
-      .addRadio({
+      .addCustomEditor({
         category,
+        id: 'background.size',
         path: 'background.size',
         name: 'Image size',
+        editor: BackgroundSizeEditor,
         settings: {
-          options: [
+          resourceType: 'image',
-            { value: BackgroundImageSize.Original, label: 'Original' },
-            { value: BackgroundImageSize.Contain, label: 'Contain' },
-            { value: BackgroundImageSize.Cover, label: 'Cover' },
-            { value: BackgroundImageSize.Fill, label: 'Fill' },
-            { value: BackgroundImageSize.Tile, label: 'Tile' },
-          ],
         },
-        defaultValue: BackgroundImageSize.Cover,
       });
   },
 
   addBorder: (builder, context) => {
-    const category = ['Border'];
+    const category = getCategoryName('Border', context.options?.type);
     builder.addSliderInput({
       category,
       path: 'border.width',