Canvas: Add icon value mapping (#59013)

public/app/features/dimensions/resource.test.ts

@@ -0,0 +1,19 @@
+import { getResourceDimension } from './resource';
+import { ResourceDimensionMode } from './types';
+
+describe('getResourceDimension', () => {
+  const publicPath = '/public/';
+  beforeAll(() => {
+    window.__grafana_public_path__ = publicPath;
+  });
+
+  it('fixed mode', () => {
+    const frame = undefined;
+    const fixedValue = 'img/icons/unicons/question-circle.svg';
+    const config = { mode: ResourceDimensionMode.Fixed, fixed: fixedValue };
+
+    expect(getResourceDimension(frame, config).fixed).toEqual(publicPath + fixedValue);
+  });
+
+  // TODO: write tests for field and mapping modes
+});

public/app/features/dimensions/resource.ts

@@ -50,8 +50,12 @@ export function getResourceDimension(
 
   // mode === ResourceDimensionMode.Field case
   const getIcon = (value: string): string => {
-    const display = field.display!;
+    if (field && field.display) {
-    return getPublicOrAbsoluteUrl(display(value).icon ?? value ?? '');
+      const icon = field.display(value).icon;
+      return getPublicOrAbsoluteUrl(icon ?? '');
+    }
+
+    return '';
   };
 
   return {

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

@@ -1,4 +1,4 @@
-import { PanelOptionsEditorBuilder, PanelPlugin } from '@grafana/data';
+import { FieldConfigProperty, PanelOptionsEditorBuilder, PanelPlugin } from '@grafana/data';
 import { FrameState } from 'app/features/canvas/runtime/frame';
 
 import { CanvasPanel, InstanceState } from './CanvasPanel';
@@ -25,7 +25,15 @@ export const addStandardCanvasEditorOptions = (builder: PanelOptionsEditorBuilde
 
 export const plugin = new PanelPlugin<PanelOptions>(CanvasPanel)
   .setNoPadding() // extend to panel edges
-  .useFieldConfig()
+  .useFieldConfig({
+    standardOptions: {
+      [FieldConfigProperty.Mappings]: {
+        settings: {
+          icon: true,
+        },
+      },
+    },
+  })
   .setMigrationHandler(canvasMigrationHandler)
   .setPanelOptions((builder, context) => {
     const state: InstanceState = context.instanceState;