[Lens] Make title align left correctly after removing icon in Metric …

…chart (elastic#191057)

## Summary

Fixes elastic#190765 


![metric_title_fix](https://github.com/user-attachments/assets/9cd88722-7d12-4473-a216-10718a2dc7a6)

packages/kbn-visualization-ui-components/index.ts

@@ -31,7 +31,7 @@ export {
   ChartSwitchTrigger,
 } from './components';
 
-export { isFieldLensCompatible } from './util';
+export { isFieldLensCompatible, sharedSetOfIcons, hasIcon, iconSortCriteria } from './util';
 
 export type {
   DataType,
@@ -43,4 +43,4 @@ export type {
   ColorPickerProps,
 } from './components';
 
-export type { FormatFactory, LineStyle } from './types';
+export type { FormatFactory, LineStyle, SharedSetOfIcons } from './types';

packages/kbn-visualization-ui-components/types.ts

@@ -11,3 +11,18 @@ import type { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plu
 export type FormatFactory = (mapping?: SerializedFieldFormat) => IFieldFormat;
 
 export type LineStyle = 'solid' | 'dashed' | 'dotted';
+
+// This is a line of shared icon names used by Reference Lines, Annotations and Metric chart
+export type SharedSetOfIcons =
+  | 'empty'
+  | 'asterisk'
+  | 'alert'
+  | 'bell'
+  | 'bolt'
+  | 'bug'
+  | 'editorComment'
+  | 'flag'
+  | 'heart'
+  | 'mapMarker'
+  | 'starEmpty'
+  | 'tag';

packages/kbn-visualization-ui-components/util.ts

@@ -7,6 +7,92 @@
  */
 
 import { DataViewField, isNestedField } from '@kbn/data-views-plugin/common';
+import { i18n } from '@kbn/i18n';
+import type { IconSet } from './components';
+import type { SharedSetOfIcons } from './types';
 
 export const isFieldLensCompatible = (field: DataViewField) =>
   !isNestedField(field) && (!!field.aggregatable || !!field.scripted);
+
+/**
+ * Icon checking logic. It makes sure an icon has actual content.
+ */
+export function hasIcon(icon: string | undefined): icon is string {
+  return icon != null && icon !== 'empty';
+}
+
+/**
+ * Sorting criteria for icons sets. It makes sure empty icon is always on top.
+ */
+export function iconSortCriteria<T extends string>(a: IconSet<T>[number], b: IconSet<T>[number]) {
+  if (a.value === 'empty') {
+    return -1;
+  }
+  if (b.value === 'empty') {
+    return 1;
+  }
+  return a.value.localeCompare(b.value);
+}
+
+/**
+ * This is the minimal icons set.
+ * So far it is computed from Reference line and Metric chart icons.
+ * Needs to consider annotation icons set too in the future.
+ */
+
+export const sharedSetOfIcons: IconSet<SharedSetOfIcons> = [
+  {
+    value: 'empty',
+    label: i18n.translate('visualizationUiComponents.iconSelect.noIconLabel', {
+      defaultMessage: 'None',
+    }),
+  },
+  {
+    value: 'asterisk',
+    label: i18n.translate('visualizationUiComponents.iconSelect.asteriskIconLabel', {
+      defaultMessage: 'Asterisk',
+    }),
+  },
+  {
+    value: 'bell',
+    label: i18n.translate('visualizationUiComponents.iconSelect.bellIconLabel', {
+      defaultMessage: 'Bell',
+    }),
+  },
+  {
+    value: 'bolt',
+    label: i18n.translate('visualizationUiComponents.iconSelect.boltIconLabel', {
+      defaultMessage: 'Bolt',
+    }),
+  },
+  {
+    value: 'bug',
+    label: i18n.translate('visualizationUiComponents.iconSelect.bugIconLabel', {
+      defaultMessage: 'Bug',
+    }),
+  },
+  {
+    value: 'editorComment',
+    label: i18n.translate('visualizationUiComponents.iconSelect.commentIconLabel', {
+      defaultMessage: 'Comment',
+    }),
+  },
+  {
+    value: 'alert',
+    label: i18n.translate('visualizationUiComponents.iconSelect.alertIconLabel', {
+      defaultMessage: 'Alert',
+    }),
+  },
+  {
+    value: 'flag',
+    label: i18n.translate('visualizationUiComponents.iconSelect.flagIconLabel', {
+      defaultMessage: 'Flag',
+    }),
+  },
+  {
+    value: 'tag',
+    label: i18n.translate('visualizationUiComponents.iconSelect.tagIconLabel', {
+      defaultMessage: 'Tag',
+    }),
+  },
+];

x-pack/plugins/lens/public/shared_components/icon_set.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import type { AvailableReferenceLineIcon } from '@kbn/expression-xy-plugin/common';
+import type { AvailableMetricIcon } from '@kbn/expression-metric-vis-plugin/common';
+import { iconSortCriteria, type IconSet, sharedSetOfIcons } from '@kbn/visualization-ui-components';
+
+export const referenceLineIconsSet: IconSet<AvailableReferenceLineIcon> = sharedSetOfIcons;
+
+export const metricIconsSet: IconSet<AvailableMetricIcon> = [
+  ...sharedSetOfIcons,
+  // use spread here to avoid to cast single entries
+  ...([
+    {
+      value: 'sortUp',
+      label: i18n.translate('xpack.lens.metric.iconSelect.sortUpLabel', {
+        defaultMessage: 'Sort up',
+      }),
+    },
+    {
+      value: 'sortDown',
+      label: i18n.translate('xpack.lens.metric.iconSelect.sortDownLabel', {
+        defaultMessage: 'Sort down',
+      }),
+    },
+    {
+      value: 'compute',
+      label: i18n.translate('xpack.lens.metric.iconSelect.computeLabel', {
+        defaultMessage: 'Compute',
+      }),
+    },
+    {
+      value: 'globe',
+      label: i18n.translate('xpack.lens.metric.iconSelect.globeLabel', {
+        defaultMessage: 'Globe',
+      }),
+    },
+    {
+      value: 'temperature',
+      label: i18n.translate('xpack.lens.metric.iconSelect.temperatureLabel', {
+        defaultMessage: 'Temperature',
+      }),
+    },
+    {
+      value: 'heart',
+      label: i18n.translate('xpack.lens.metric.iconSelect.heartLabel', { defaultMessage: 'Heart' }),
+    },
+    {
+      value: 'mapMarker',
+      label: i18n.translate('xpack.lens.metric.iconSelect.mapMarkerLabel', {
+        defaultMessage: 'Map Marker',
+      }),
+    },
+    {
+      value: 'pin',
+      label: i18n.translate('xpack.lens.metric.iconSelect.mapPinLabel', {
+        defaultMessage: 'Map Pin',
+      }),
+    },
+    {
+      value: 'starEmpty',
+      label: i18n.translate('xpack.lens.metric.iconSelect.starLabel', { defaultMessage: 'Star' }),
+    },
+  ] as const),
+].sort(iconSortCriteria);

x-pack/plugins/lens/public/visualizations/metric/dimension_editor.tsx

@@ -36,8 +36,8 @@ import type { VisualizationDimensionEditorProps } from '../../types';
 import { defaultNumberPaletteParams, defaultPercentagePaletteParams } from './palette_config';
 import { DEFAULT_MAX_COLUMNS, getDefaultColor, showingBar } from './visualization';
 import { CollapseSetting } from '../../shared_components/collapse_setting';
-import { iconsSet } from './icon_set';
 import { MetricVisualizationState } from './types';
+import { metricIconsSet } from '../../shared_components/icon_set';
 
 export type SupportingVisType = 'none' | 'bar' | 'trendline';
 
@@ -350,7 +350,7 @@ function PrimaryMetricEditor(props: SubProps) {
         })}
       >
         <IconSelect
-          customIconSet={iconsSet}
+          customIconSet={metricIconsSet}
           value={state?.icon}
           onChange={(newIcon) => {
             setState({

x-pack/plugins/lens/public/visualizations/metric/to_expression.ts

@@ -13,6 +13,7 @@ import type {
 import { buildExpression, buildExpressionFunction } from '@kbn/expressions-plugin/common';
 import { Ast } from '@kbn/interpreter';
 import { LayoutDirection } from '@elastic/charts';
+import { hasIcon } from '@kbn/visualization-ui-components';
 import { CollapseArgs, CollapseFunction } from '../../../common/expressions';
 import { CollapseExpressionFunction } from '../../../common/expressions/collapse/types';
 import { DatasourceLayers } from '../../types';
@@ -155,7 +156,7 @@ export const toExpression = (
     iconAlign: state.iconAlign ?? metricStateDefaults.iconAlign,
     valueFontSize: state.valueFontMode ?? metricStateDefaults.valueFontMode,
     color: state.color || getDefaultColor(state, isMetricNumeric),
-    icon: state.icon,
+    icon: hasIcon(state.icon) ? state.icon : undefined,
     palette:
       isMetricNumeric && state.palette?.params
         ? [

x-pack/plugins/lens/public/visualizations/metric/visualization.test.ts

@@ -318,9 +318,6 @@ describe('metric visualization', () => {
                 "color": Array [
                   "static-color",
                 ],
-                "icon": Array [
-                  "empty",
-                ],
                 "iconAlign": Array [
                   "left",
                 ],
@@ -394,9 +391,6 @@ describe('metric visualization', () => {
                 "color": Array [
                   "static-color",
                 ],
-                "icon": Array [
-                  "empty",
-                ],
                 "iconAlign": Array [
                   "left",
                 ],

x-pack/plugins/lens/public/visualizations/xy/visualization.tsx

@@ -109,8 +109,6 @@ import {
 } from './visualization_helpers';
 import { getAxesConfiguration, groupAxesByType } from './axes_configuration';
 import type { XYByValueAnnotationLayerConfig, XYState } from './types';
-import { ReferenceLinePanel } from './xy_config_panel/reference_line_config_panel';
-import { AnnotationsPanel } from './xy_config_panel/annotations_config_panel';
 import { defaultAnnotationLabel } from './annotations/helpers';
 import { onDropForVisualization } from '../../editor_frame_service/editor_frame/config_panel/buttons/drop_targets_utils';
 import { createAnnotationActions } from './annotations/actions';
@@ -130,6 +128,8 @@ import {
   XY_X_WRONG_DATA_TYPE,
   XY_Y_WRONG_DATA_TYPE,
 } from '../../user_messages_ids';
+import { AnnotationsPanel } from './xy_config_panel/annotations_config_panel/annotations_panel';
+import { ReferenceLinePanel } from './xy_config_panel/reference_line_config_panel/reference_line_panel';
 
 const XY_ID = 'lnsXY';