Canvas: Allow non-icon bg image fields (#112308)

* Canvas: Allow non-icon bg image fields

* add tests

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

@@ -1,3 +1,4 @@
+import { createDataFrame } from '@grafana/data';
 import { ResourceDimensionMode } from '@grafana/schema';
 
 import { getResourceDimension } from './resource';
@@ -13,7 +14,7 @@ describe('getResourceDimension', () => {
     const fixedValue = 'img/icons/unicons/question-circle.svg';
     const config = { mode: ResourceDimensionMode.Fixed, fixed: fixedValue };
 
-    expect(getResourceDimension(frame, config).fixed).toEqual(`${publicPath}build/${fixedValue}`);
+    expect(getResourceDimension(frame, config).value()).toEqual(`${publicPath}build/${fixedValue}`);
   });
 
   it('fixed full URL path', () => {
@@ -21,8 +22,46 @@ describe('getResourceDimension', () => {
     const fixedUrlValue = 'https://3rdparty.fake/image.png';
     const config = { mode: ResourceDimensionMode.Fixed, fixed: fixedUrlValue };
 
-    expect(getResourceDimension(frame, config).fixed).toEqual(fixedUrlValue);
+    expect(getResourceDimension(frame, config).value()).toEqual(fixedUrlValue);
   });
 
-  // TODO: write tests for field and mapping modes
+  it('field URL path', () => {
+    const frame = createDataFrame({
+      fields: [
+        {
+          name: 'image_field',
+          values: ['https://3rdparty.fake/icon.png'],
+          display: (v) => ({
+            text: String(v),
+            numeric: NaN,
+            icon: undefined,
+          }),
+        },
+      ],
+    });
+    const config = { mode: ResourceDimensionMode.Field, field: 'image_field', fixed: '' };
+
+    expect(getResourceDimension(frame, config).value()).toEqual('https://3rdparty.fake/icon.png');
+  });
+
+  it('icon url', () => {
+    const frame = createDataFrame({
+      fields: [
+        {
+          name: 'image_field',
+          values: ['img1'],
+          display: (v) => ({
+            text: String(v),
+            numeric: NaN,
+            icon: v === 'img1' ? 'https://3rdparty.fake/field.png' : undefined,
+          }),
+        },
+      ],
+    });
+    const config = { mode: ResourceDimensionMode.Field, field: 'image_field', fixed: '' };
+
+    expect(getResourceDimension(frame, config).value()).toEqual('https://3rdparty.fake/field.png');
+  });
+
+  // TODO: write tests for mapping modes
 });

public/app/features/dimensions/resource.ts

@@ -55,18 +55,21 @@ export function getResourceDimension(
   }
 
   // mode === ResourceDimensionMode.Field case
-  const getIcon = (value: string): string => {
+  const getImageOrIcon = (value: string): string => {
+    let url = value;
     if (field && field.display) {
-      const icon = field.display(value).icon;
-      return getPublicOrAbsoluteUrl(icon ?? '');
+      const displayValue = field.display(value);
+      if (displayValue.icon) {
+        url = displayValue.icon;
+      }
     }
 
-    return '';
+    return getPublicOrAbsoluteUrl(url);
   };
 
   return {
     field,
-    get: (index: number): string => getIcon(field.values[index]),
-    value: () => getIcon(getLastNotNullFieldValue(field)),
+    get: (index: number): string => getImageOrIcon(field.values[index]),
+    value: () => getImageOrIcon(getLastNotNullFieldValue(field)),
   };
 }