[Lens] Fixes the partition legend actions header format problem (#149114

)

## Summary

Closes #149019

This PR fixes 2 bugs that are related.
- The first one is unreleased and is described on the issue. It happens
only if you try to open the legend actions with a partition chart with
custom interval breakdown. The problem was that the title we were giving
on the ContextMenu was not a string but an Object
- The second one exists on 8.6 (haven't checked the prior versions) and
has to do with the title of the legend action popover. It was not
formatted correctly so you can see a title like that:
<img width="658" alt="image"
src="https://user-images.githubusercontent.com/17003240/213172686-b8f1a4d1-c245-4211-bc2e-534d7ed6b473.png">

or 
<img width="400" alt="image"
src="https://user-images.githubusercontent.com/17003240/213172759-015998fc-38d1-46fd-a6f8-294ca113442a.png">


This PR fixes both problems:
<img width="824" alt="image"
src="https://user-images.githubusercontent.com/17003240/213172863-d088359e-89ab-4d7e-9bdd-5d9d8181e482.png">


### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

src/plugins/chart_expressions/expression_partition_vis/public/utils/filter_helpers.test.ts

@@ -6,14 +6,16 @@
  * Side Public License, v 1.
  */
 import { Datatable, DatatableColumn } from '@kbn/expressions-plugin/public';
-import { getFilterClickData, getFilterEventData } from './filter_helpers';
-import { createMockBucketColumns, createMockVisData } from '../mocks';
+import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
+import { getFilterClickData, getFilterEventData, getFilterPopoverTitle } from './filter_helpers';
+import { createMockBucketColumns, createMockVisData, createMockPieParams } from '../mocks';
 import { consolidateMetricColumns } from '../../common/utils';
 import { LayerValue } from '@elastic/charts';
 import faker from 'faker';
 
 const bucketColumns = createMockBucketColumns();
 const visData = createMockVisData();
+const visParams = createMockPieParams();
 
 describe('getFilterClickData', () => {
   it('returns the correct filter data for the specific layer', () => {
@@ -264,3 +266,31 @@ describe('getFilterEventData', () => {
     expect(data[0].column).toEqual(0);
   });
 });
+
+describe('getFilterPopoverTitle', () => {
+  it('returns the series key if no buckets', () => {
+    const series = {
+      key: 'Kibana Airlines',
+      specId: 'pie',
+    };
+    const newVisParams = {
+      ...visParams,
+      buckets: [],
+    };
+    const defaultFormatter = jest.fn((...args) => fieldFormatsMock.deserialize(...args));
+
+    const title = getFilterPopoverTitle(newVisParams, visData, 0, defaultFormatter, series.key);
+    expect(title).toBe('Kibana Airlines');
+  });
+
+  it('calls the formatter if buckets given', () => {
+    const series = {
+      key: '0',
+      specId: 'pie',
+    };
+    const defaultFormatter = jest.fn((...args) => fieldFormatsMock.deserialize(...args));
+
+    getFilterPopoverTitle(visParams, visData, 1, defaultFormatter, series.key);
+    expect(defaultFormatter).toHaveBeenCalled();
+  });
+});

src/plugins/chart_expressions/expression_partition_vis/public/utils/filter_helpers.ts

@@ -10,8 +10,9 @@ import { LayerValue, SeriesIdentifier } from '@elastic/charts';
 import { Datatable, DatatableColumn } from '@kbn/expressions-plugin/public';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { ValueClickContext } from '@kbn/embeddable-plugin/public';
-import type { FieldFormat } from '@kbn/field-formats-plugin/common';
-import { BucketColumns } from '../../common/types';
+import { getFormatByAccessor } from '@kbn/visualizations-plugin/common/utils';
+import type { FieldFormat, FormatFactory } from '@kbn/field-formats-plugin/common';
+import { BucketColumns, PartitionVisParams } from '../../common/types';
 import { FilterEvent } from '../types';
 
 export const canFilter = async (
@@ -129,3 +130,20 @@ export const getFilterEventData = (
 export const getSeriesValueColumnIndex = (value: string, visData: Datatable): number => {
   return visData.columns.findIndex(({ id }) => !!visData.rows.find((r) => r[id] === value));
 };
+
+export const getFilterPopoverTitle = (
+  visParams: PartitionVisParams,
+  visData: Datatable,
+  columnIndex: number,
+  formatter: FormatFactory,
+  seriesKey: string
+) => {
+  let formattedTitle = '';
+  if (visParams.dimensions.buckets) {
+    const accessor = visParams.dimensions.buckets[columnIndex];
+    formattedTitle = accessor
+      ? formatter(getFormatByAccessor(accessor, visData.columns)).convert(seriesKey)
+      : '';
+  }
+  return formattedTitle || seriesKey;
+};

src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx

@@ -13,11 +13,10 @@ import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } fr
 import { LegendAction, SeriesIdentifier, useLegendAction } from '@elastic/charts';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { Datatable } from '@kbn/expressions-plugin/public';
-import { getFormatByAccessor, getAccessor } from '@kbn/visualizations-plugin/common/utils';
 import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { PartitionVisParams } from '../../common/types';
 import { ColumnCellValueActions, FilterEvent } from '../types';
-import { getSeriesValueColumnIndex } from './filter_helpers';
+import { getSeriesValueColumnIndex, getFilterPopoverTitle } from './filter_helpers';
 
 export const getLegendActions = (
   canFilter: (
@@ -50,17 +49,13 @@ export const getLegendActions = (
       return null;
     }
 
-    let formattedTitle = '';
-    if (visParams.dimensions.buckets) {
-      const accessor = visParams.dimensions.buckets.find(
-        (bucket) => getAccessor(bucket) === columnIndex
-      );
-      formattedTitle =
-        formatter
-          .deserialize(accessor ? getFormatByAccessor(accessor, visData.columns) : undefined)
-          .convert(pieSeries.key) ?? '';
-    }
-    const title = formattedTitle || pieSeries.key;
+    const title = getFilterPopoverTitle(
+      visParams,
+      visData,
+      columnIndex,
+      formatter.deserialize,
+      pieSeries.key
+    );
 
     const panelItems: EuiContextMenuPanelDescriptor['items'] = [];