Geomap: fix casing for panel options (#44688)

* fix casing for panel options

* remove hardcoded label values

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

@@ -13,6 +13,7 @@ import {
 } from '@grafana/ui';
 import { Observable } from 'rxjs';
 import { useObservable } from 'react-use';
+import { capitalize } from 'lodash';
 
 import {
   ColorDimensionEditor,
@@ -294,9 +295,9 @@ export const StyleEditor: FC<StandardEditorProps<StyleConfig, StyleEditorOptions
               value={value?.textConfig?.textAlign ?? defaultStyleConfig.textConfig.textAlign}
               onChange={onTextAlignChange}
               options={[
-                { value: TextAlignment.Left, label: TextAlignment.Left },
-                { value: TextAlignment.Center, label: TextAlignment.Center },
-                { value: TextAlignment.Right, label: TextAlignment.Right },
+                { value: TextAlignment.Left, label: capitalize(TextAlignment.Left) },
+                { value: TextAlignment.Center, label: capitalize(TextAlignment.Center) },
+                { value: TextAlignment.Right, label: capitalize(TextAlignment.Right) },
               ]}
             />
           </Field>
@@ -305,9 +306,9 @@ export const StyleEditor: FC<StandardEditorProps<StyleConfig, StyleEditorOptions
               value={value?.textConfig?.textBaseline ?? defaultStyleConfig.textConfig.textBaseline}
               onChange={onTextBaselineChange}
               options={[
-                { value: TextBaseline.Top, label: TextBaseline.Top },
-                { value: TextBaseline.Middle, label: TextBaseline.Middle },
-                { value: TextBaseline.Bottom, label: TextBaseline.Bottom },
+                { value: TextBaseline.Top, label: capitalize(TextBaseline.Top) },
+                { value: TextBaseline.Middle, label: capitalize(TextBaseline.Middle) },
+                { value: TextBaseline.Bottom, label: capitalize(TextBaseline.Bottom) },
               ]}
             />
           </Field>

public/app/plugins/panel/geomap/layers/data/geojsonLayer.ts

@@ -168,7 +168,7 @@ export const geojsonLayer: MapLayerRegistryItem<GeoJSONMapperConfig> = {
           .addCustomEditor({
             id: 'config.style',
             path: 'config.style',
-            name: 'Default Style',
+            name: 'Default style',
             description: 'The style to apply when no rules above match',
             editor: StyleEditor,
             settings: {
@@ -180,7 +180,7 @@ export const geojsonLayer: MapLayerRegistryItem<GeoJSONMapperConfig> = {
           .addCustomEditor({
             id: 'config.rules',
             path: 'config.rules',
-            name: 'Style Rules',
+            name: 'Style rules',
             description: 'Apply styles based on feature properties',
             editor: GeomapStyleRulesEditor,
             settings: {

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

@@ -36,7 +36,7 @@ const defaultOptions: HeatmapConfig = {
 export const heatmapLayer: MapLayerRegistryItem<HeatmapConfig> = {
   id: 'heatmap',
   name: 'Heatmap',
-  description: 'visualizes a heatmap of the data',
+  description: 'Visualizes a heatmap of the data',
   isBaseMap: false,
   showLocation: true,
 
@@ -117,7 +117,7 @@ export const heatmapLayer: MapLayerRegistryItem<HeatmapConfig> = {
           })
           .addSliderInput({
             path: 'config.radius',
-            description: 'configures the size of clusters',
+            description: 'Configures the size of clusters',
             name: 'Radius',
             defaultValue: defaultOptions.radius,
             settings: {
@@ -128,7 +128,7 @@ export const heatmapLayer: MapLayerRegistryItem<HeatmapConfig> = {
           })
           .addSliderInput({
             path: 'config.blur',
-            description: 'configures the amount of blur of clusters',
+            description: 'Configures the amount of blur of clusters',
             name: 'Blur',
             defaultValue: defaultOptions.blur,
             settings: {

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

@@ -50,7 +50,7 @@ export const defaultMarkersConfig: MapLayerOptions<MarkersConfig> = {
 export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
   id: MARKERS_LAYER_ID,
   name: 'Markers',
-  description: 'use markers to render each data point',
+  description: 'Use markers to render each data point',
   isBaseMap: false,
   showLocation: true,
 
@@ -162,7 +162,7 @@ export const markersLayer: MapLayerRegistryItem<MarkersConfig> = {
           .addBooleanSwitch({
             path: 'config.showLegend',
             name: 'Show legend',
-            description: 'Show legend',
+            description: 'Show map legend',
             defaultValue: defaultOptions.showLegend,
           });
       },

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

@@ -25,7 +25,7 @@ export const plugin = new PanelPlugin<GeomapPanelOptions>(GeomapPanel)
       id: 'view',
       path: 'view',
       name: 'Initial view', // don't show it
-      description: 'This location will show when the panel first loads',
+      description: 'This location will show when the panel first loads.',
       editor: MapViewEditor,
       defaultValue: defaultView,
     });
@@ -88,13 +88,14 @@ export const plugin = new PanelPlugin<GeomapPanelOptions>(GeomapPanel)
       .addBooleanSwitch({
         category,
         path: 'controls.showZoom',
-        description: 'show buttons in the upper left',
+        description: 'Show zoom control buttons in the upper left corner',
         name: 'Show zoom control',
         defaultValue: true,
       })
       .addBooleanSwitch({
         category,
         path: 'controls.mouseWheelZoom',
+        description: 'Enable zoom control via mouse wheel',
         name: 'Mouse wheel zoom',
         defaultValue: true,
       })
@@ -116,7 +117,7 @@ export const plugin = new PanelPlugin<GeomapPanelOptions>(GeomapPanel)
         category,
         path: 'controls.showDebug',
         name: 'Show debug',
-        description: 'show map info',
+        description: 'Show map info',
         defaultValue: false,
       });
   });