Geomap: Add icon to ResourceDimensionEditor and fix marker color (#40418)

* add resourcedimension icon and fix marker color

* update to input prefix and markerShapePath

* update to svg from icon

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

@@ -1,11 +1,17 @@
 import React, { FC, useCallback, useState } from 'react';
-import { FieldNamePickerConfigSettings, StandardEditorProps, StandardEditorsRegistryItem } from '@grafana/data';
+import {
+  FieldNamePickerConfigSettings,
+  GrafanaTheme2,
+  StandardEditorProps,
+  StandardEditorsRegistryItem,
+} from '@grafana/data';
 import { ResourceDimensionConfig, ResourceDimensionMode, ResourceDimensionOptions } from '../types';
-import { InlineField, InlineFieldRow, RadioButtonGroup, Button, Modal, Input } from '@grafana/ui';
+import { InlineField, InlineFieldRow, RadioButtonGroup, Button, Modal, Input, useStyles2 } from '@grafana/ui';
 import { FieldNamePicker } from '../../../../../packages/grafana-ui/src/components/MatchersUI/FieldNamePicker';
 import { ResourcePicker } from './ResourcePicker';
-import { ResourceFolderName } from '..';
-
+import { getPublicOrAbsoluteUrl, ResourceFolderName } from '..';
+import SVG from 'react-inlinesvg';
+import { css } from '@emotion/css';
 const resourceOptions = [
   { label: 'Fixed', value: ResourceDimensionMode.Fixed, description: 'Fixed value' },
   { label: 'Field', value: ResourceDimensionMode.Field, description: 'Use a string field result' },
@@ -22,6 +28,7 @@ export const ResourceDimensionEditor: FC<
   const { value, context, onChange, item } = props;
   const labelWidth = 9;
   const [isOpen, setOpen] = useState(false);
+  const styles = useStyles2(getStyles);
 
   const onModeChange = useCallback(
     (mode) => {
@@ -62,6 +69,7 @@ export const ResourceDimensionEditor: FC<
   const showSourceRadio = item.settings?.showSourceRadio ?? true;
   const mediaType = item.settings?.resourceType ?? 'icon';
   const folderName = item.settings?.folderName ?? ResourceFolderName.Icon;
+  const srcPath = mediaType === 'icon' && value ? getPublicOrAbsoluteUrl(value?.fixed) : '';
 
   return (
     <>
@@ -92,7 +100,13 @@ export const ResourceDimensionEditor: FC<
       {mode === ResourceDimensionMode.Fixed && (
         <InlineFieldRow>
           <InlineField label={null} grow>
-            <Input value={value?.fixed} placeholder="Resource URL" readOnly={true} onClick={openModal} />
+            <Input
+              value={value?.fixed}
+              placeholder="Resource URL"
+              readOnly={true}
+              onClick={openModal}
+              prefix={srcPath && <SVG src={srcPath} className={styles.icon} />}
+            />
           </InlineField>
           <Button icon="folder-open" variant="secondary" onClick={openModal} />
         </InlineFieldRow>
@@ -107,3 +121,11 @@ export const ResourceDimensionEditor: FC<
     </>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  icon: css`
+    vertical-align: middle;
+    display: inline-block;
+    fill: currentColor;
+  `,
+});

public/app/plugins/panel/geomap/layers/data/markersLayer.tsx

@@ -28,7 +28,7 @@ import {
 import { ScaleDimensionEditor, ColorDimensionEditor, ResourceDimensionEditor } from 'app/features/dimensions/editors';
 import { ObservablePropsWrapper } from '../../components/ObservablePropsWrapper';
 import { MarkersLegend, MarkersLegendProps } from './MarkersLegend';
-import { StyleMaker, getMarkerFromPath, MarkerShapePath } from '../../utils/regularShapes';
+import { StyleMaker, getMarkerFromPath } from '../../utils/regularShapes';
 import { ReplaySubject } from 'rxjs';
 
 // Configuration options for Circle overlays
@@ -55,7 +55,7 @@ const defaultOptions: MarkersConfig = {
   showLegend: true,
   markerSymbol: {
     mode: ResourceDimensionMode.Fixed,
-    fixed: MarkerShapePath.Circle,
+    fixed: 'img/icons/marker/circle.svg',
   },
 };
 
@@ -108,7 +108,7 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
         }
 
         const markerPath =
-          getPublicOrAbsoluteUrl(config.markerSymbol?.fixed) ?? getPublicOrAbsoluteUrl(MarkerShapePath.Circle);
+          getPublicOrAbsoluteUrl(config.markerSymbol?.fixed) ?? getPublicOrAbsoluteUrl('img/icons/marker/circle.svg');
 
         const marker = getMarkerFromPath(config.markerSymbol?.fixed);
 

public/app/plugins/panel/geomap/utils/regularShapes.ts

@@ -11,28 +11,28 @@ export interface MarkerMaker extends RegistryItem {
 }
 
 export enum RegularShapeId {
-  Circle = 'circle',
-  Square = 'square',
-  Triangle = 'triangle',
-  Star = 'star',
-  Cross = 'cross',
-  X = 'x',
+  circle = 'circle',
+  square = 'square',
+  triangle = 'triangle',
+  star = 'star',
+  cross = 'cross',
+  x = 'x',
 }
 
-export enum MarkerShapePath {
-  Circle = 'img/icons/marker/circle.svg',
-  Square = 'img/icons/marker/square.svg',
-  Triangle = 'img/icons/marker/triangle.svg',
-  Star = 'img/icons/marker/star.svg',
-  Cross = 'img/icons/marker/cross.svg',
-  X = 'img/icons/marker/x-mark.svg',
-}
+const MarkerShapePath = {
+  circle: 'img/icons/marker/circle.svg',
+  square: 'img/icons/marker/square.svg',
+  triangle: 'img/icons/marker/triangle.svg',
+  star: 'img/icons/marker/star.svg',
+  cross: 'img/icons/marker/cross.svg',
+  x: 'img/icons/marker/x-mark.svg',
+};
 
 export const circleMarker: MarkerMaker = {
-  id: RegularShapeId.Circle,
+  id: RegularShapeId.circle,
   name: 'Circle',
   hasFill: true,
-  aliasIds: [MarkerShapePath.Circle],
+  aliasIds: [MarkerShapePath.circle],
   make: (color: string, fillColor: string, radius: number) => {
     return new Style({
       image: new Circle({
@@ -47,10 +47,10 @@ export const circleMarker: MarkerMaker = {
 const makers: MarkerMaker[] = [
   circleMarker,
   {
-    id: RegularShapeId.Square,
+    id: RegularShapeId.square,
     name: 'Square',
     hasFill: true,
-    aliasIds: [MarkerShapePath.Square],
+    aliasIds: [MarkerShapePath.square],
     make: (color: string, fillColor: string, radius: number) => {
       return new Style({
         image: new RegularShape({
@@ -64,10 +64,10 @@ const makers: MarkerMaker[] = [
     },
   },
   {
-    id: RegularShapeId.Triangle,
+    id: RegularShapeId.triangle,
     name: 'Triangle',
     hasFill: true,
-    aliasIds: [MarkerShapePath.Triangle],
+    aliasIds: [MarkerShapePath.triangle],
     make: (color: string, fillColor: string, radius: number) => {
       return new Style({
         image: new RegularShape({
@@ -82,10 +82,10 @@ const makers: MarkerMaker[] = [
     },
   },
   {
-    id: RegularShapeId.Star,
+    id: RegularShapeId.star,
     name: 'Star',
     hasFill: true,
-    aliasIds: [MarkerShapePath.Star],
+    aliasIds: [MarkerShapePath.star],
     make: (color: string, fillColor: string, radius: number) => {
       return new Style({
         image: new RegularShape({
@@ -100,10 +100,10 @@ const makers: MarkerMaker[] = [
     },
   },
   {
-    id: RegularShapeId.Cross,
+    id: RegularShapeId.cross,
     name: 'Cross',
     hasFill: false,
-    aliasIds: [MarkerShapePath.Cross],
+    aliasIds: [MarkerShapePath.cross],
     make: (color: string, fillColor: string, radius: number) => {
       return new Style({
         image: new RegularShape({
@@ -118,10 +118,10 @@ const makers: MarkerMaker[] = [
     },
   },
   {
-    id: RegularShapeId.X,
+    id: RegularShapeId.x,
     name: 'X',
     hasFill: false,
-    aliasIds: [MarkerShapePath.X],
+    aliasIds: [MarkerShapePath.x],
     make: (color: string, fillColor: string, radius: number) => {
       return new Style({
         image: new RegularShape({