[Maps] Add UI counters for custom icons (#139240)

* Add UI counters for custom icons

* Only report events when adding a new custom icon, not when editing an existing icon

* Fix jest test

x-pack/plugins/maps/common/telemetry/index.ts

@@ -6,6 +6,7 @@
  */
 
 export { LayerStatsCollector } from './layer_stats_collector';
+export { MapSettingsCollector } from './map_settings_collector';
 export type {
   EMS_BASEMAP_KEYS,
   JOIN_KEYS,

x-pack/plugins/maps/public/classes/styles/vector/components/symbol/custom_icon_modal.test.tsx

@@ -10,6 +10,14 @@ import { shallow } from 'enzyme';
 
 import { CustomIconModal } from './custom_icon_modal';
 
+jest.mock('../../../../../kibana_services', () => ({
+  getUsageCollection: () => {
+    return {
+      reportUiCounter: () => {},
+    };
+  },
+}));
+
 const defaultProps = {
   cutoff: 0.25,
   onCancel: () => {},

x-pack/plugins/maps/public/classes/styles/vector/components/symbol/custom_icon_modal.tsx

@@ -25,6 +25,7 @@ import {
   EuiSpacer,
   EuiToolTip,
 } from '@elastic/eui';
+import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
 import { IconPreview } from './icon_preview';
 // @ts-expect-error
@@ -32,6 +33,8 @@ import { getCustomIconId } from '../../symbol_utils';
 // @ts-expect-error
 import { ValidatedRange } from '../../../../../components/validated_range';
 import { CustomIcon } from '../../../../../../common/descriptor_types';
+import { APP_ID } from '../../../../../../common';
+import { getUsageCollection } from '../../../../../kibana_services';
 
 const strings = {
   getAdvancedOptionsLabel: () =>
@@ -314,6 +317,7 @@ export class CustomIconModal extends Component<Props, State> {
   }
 
   public render() {
+    const usageCollector = getUsageCollection();
     const { symbolId, onSave, onCancel, onDelete, title } = this.props;
     const { label, svg, cutoff, radius, isFileInvalid } = this.state;
     const isComplete = label.length !== 0 && svg.length !== 0 && !isFileInvalid;
@@ -365,6 +369,11 @@ export class CustomIconModal extends Component<Props, State> {
                 <EuiButton
                   color="danger"
                   onClick={() => {
+                    usageCollector?.reportUiCounter(
+                      APP_ID,
+                      METRIC_TYPE.CLICK,
+                      'settings_custom_icons_delete'
+                    );
                     onDelete(symbolId);
                   }}
                   data-test-subj="mapsCustomIconForm-submit"
@@ -377,6 +386,14 @@ export class CustomIconModal extends Component<Props, State> {
               <EuiButton
                 fill
                 onClick={() => {
+                  if (!onDelete) {
+                    // Only report events when adding a new custom icon, not when editing an existing icon
+                    usageCollector?.reportUiCounter(
+                      APP_ID,
+                      METRIC_TYPE.CLICK,
+                      'settings_custom_icons_add'
+                    );
+                  }
                   onSave({ symbolId: symbolId ?? getCustomIconId(), label, svg, cutoff, radius });
                 }}
                 data-test-subj="mapsCustomIconForm-submit"

x-pack/plugins/maps/public/routes/map_page/saved_map/saved_map.ts

@@ -52,7 +52,7 @@ import { createBasemapLayerDescriptor } from '../../../classes/layers/create_bas
 import { whenLicenseInitialized } from '../../../licensed_features';
 import { SerializedMapState, SerializedUiState } from './types';
 import { setAutoOpenLayerWizardId } from '../../../actions/ui_actions';
-import { LayerStatsCollector } from '../../../../common/telemetry';
+import { LayerStatsCollector, MapSettingsCollector } from '../../../../common/telemetry';
 
 function setMapSettingsFromEncodedState(settings: Partial<MapSettings>) {
   const decodedCustomIcons = settings.customIcons
@@ -281,6 +281,8 @@ export class SavedMap {
       return;
     }
 
+    const mapSettingsStatsCollector = new MapSettingsCollector(this._attributes);
+
     const layerStatsCollector = new LayerStatsCollector(this._attributes);
 
     const uiCounterEvents = {
@@ -289,6 +291,9 @@ export class SavedMap {
       resolution: layerStatsCollector.getResolutionCounts(),
       join: layerStatsCollector.getJoinCounts(),
       ems_basemap: layerStatsCollector.getBasemapCounts(),
+      settings: {
+        custom_icons_count: mapSettingsStatsCollector.getCustomIconsCount(),
+      },
     };
 
     for (const [eventType, eventTypeMetrics] of Object.entries(uiCounterEvents)) {