From e157ef1171d67a85ea2dc2fc24085f0fa427398f Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Tue, 22 Nov 2022 15:39:19 -0700
Subject: [PATCH] Canvas: Add icon value mapping (#59013)

---
 .../app/features/dimensions/resource.test.ts  | 19 +++++++++++++++++++
 public/app/features/dimensions/resource.ts    |  8 ++++++--
 public/app/plugins/panel/canvas/module.tsx    | 12 ++++++++++--
 3 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 public/app/features/dimensions/resource.test.ts

diff --git a/public/app/features/dimensions/resource.test.ts b/public/app/features/dimensions/resource.test.ts
new file mode 100644
index 00000000000..489e6339abd
--- /dev/null
+++ b/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
+});
diff --git a/public/app/features/dimensions/resource.ts b/public/app/features/dimensions/resource.ts
index 523a044f666..57fed7cb6a9 100644
--- a/public/app/features/dimensions/resource.ts
+++ b/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!;
-    return getPublicOrAbsoluteUrl(display(value).icon ?? value ?? '');
+    if (field && field.display) {
+      const icon = field.display(value).icon;
+      return getPublicOrAbsoluteUrl(icon ?? '');
+    }
+
+    return '';
   };
 
   return {
diff --git a/public/app/plugins/panel/canvas/module.tsx b/public/app/plugins/panel/canvas/module.tsx
index aa0488ab356..092afb38e0a 100644
--- a/public/app/plugins/panel/canvas/module.tsx
+++ b/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;