[Lens] Move empty string handling into field formatter (#102877)

src/plugins/data/common/field_formats/converters/string.ts

@@ -13,6 +13,10 @@ import { FieldFormat } from '../field_format';
 import { TextContextTypeConvert, FIELD_FORMAT_IDS } from '../types';
 import { shortenDottedString } from '../../utils';
 
+export const emptyLabel = i18n.translate('data.fieldFormats.string.emptyLabel', {
+  defaultMessage: '(empty)',
+});
+
 const TRANSFORM_OPTIONS = [
   {
     kind: false,
@@ -103,6 +107,9 @@ export class StringFormat extends FieldFormat {
   }
 
   textConvert: TextContextTypeConvert = (val) => {
+    if (val === '') {
+      return emptyLabel;
+    }
     switch (this.param('transform')) {
       case 'lower':
         return String(val).toLowerCase();

src/plugins/vis_type_pie/public/utils/get_layers.ts

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { i18n } from '@kbn/i18n';
 import {
   Datum,
   PartitionFillLabel,
@@ -125,11 +124,6 @@ export const getLayers = (
       },
       showAccessor: (d: Datum) => d !== EMPTY_SLICE,
       nodeLabel: (d: unknown) => {
-        if (d === '') {
-          return i18n.translate('visTypePie.emptyLabelValue', {
-            defaultMessage: '(empty)',
-          });
-        }
         if (col.format) {
           const formattedLabel = formatter.deserialize(col.format).convert(d) ?? '';
           if (visParams.labels.truncate && formattedLabel.length <= visParams.labels.truncate) {

src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx

@@ -19,7 +19,6 @@ import {
 import { Aspects } from '../types';
 
 import './_detailed_tooltip.scss';
-import { fillEmptyValue } from '../utils/get_series_name_fn';
 import { COMPLEX_SPLIT_ACCESSOR, isRangeAggType } from '../utils/accessors';
 
 interface TooltipData {
@@ -100,8 +99,7 @@ export const getTooltipData = (
   return data;
 };
 
-const renderData = ({ label, value: rawValue }: TooltipData, index: number) => {
-  const value = fillEmptyValue(rawValue);
+const renderData = ({ label, value }: TooltipData, index: number) => {
   return label && value ? (
     <tr key={label + value + index}>
       <td className="detailedTooltip__label">

src/plugins/vis_type_xy/public/components/xy_settings.tsx

@@ -29,7 +29,6 @@ import { renderEndzoneTooltip } from '../../../charts/public';
 
 import { getThemeService, getUISettings } from '../services';
 import { VisConfig } from '../types';
-import { fillEmptyValue } from '../utils/get_series_name_fn';
 
 declare global {
   interface Window {
@@ -134,7 +133,7 @@ export const XYSettings: FC<XYSettingsProps> = ({
   };
 
   const headerValueFormatter: TickFormatter<any> | undefined = xAxis.ticks?.formatter
-    ? (value) => fillEmptyValue(xAxis.ticks?.formatter?.(value)) ?? ''
+    ? (value) => xAxis.ticks?.formatter?.(value) ?? ''
     : undefined;
   const headerFormatter =
     isTimeChart && xDomain && adjustedXDomain

src/plugins/vis_type_xy/public/config/get_axis.ts

@@ -27,7 +27,6 @@ import {
   YScaleType,
   SeriesParam,
 } from '../types';
-import { fillEmptyValue } from '../utils/get_series_name_fn';
 
 export function getAxis<S extends XScaleType | YScaleType>(
   { type, title: axisTitle, labels, scale: axisScale, ...axis }: CategoryAxis,
@@ -90,8 +89,7 @@ function getLabelFormatter(
   }
 
   return (value: any) => {
-    const formattedStringValue = `${formatter ? formatter(value) : value}`;
-    const finalValue = fillEmptyValue(formattedStringValue);
+    const finalValue = `${formatter ? formatter(value) : value}`;
 
     if (finalValue.length > truncate) {
       return `${finalValue.slice(0, truncate)}...`;

src/plugins/vis_type_xy/public/utils/get_series_name_fn.ts

@@ -8,21 +8,10 @@
 
 import { memoize } from 'lodash';
 
-import { i18n } from '@kbn/i18n';
 import { XYChartSeriesIdentifier, SeriesName } from '@elastic/charts';
 
 import { VisConfig } from '../types';
 
-const emptyTextLabel = i18n.translate('visTypeXy.emptyTextColumnValue', {
-  defaultMessage: '(empty)',
-});
-
-/**
- * Returns empty values
- */
-export const fillEmptyValue = <T extends string | number | undefined>(value: T) =>
-  value === '' ? emptyTextLabel : value;
-
 function getSplitValues(
   splitAccessors: XYChartSeriesIdentifier['splitAccessors'],
   seriesAspects?: VisConfig['aspects']['series']
@@ -36,7 +25,7 @@ function getSplitValues(
     const split = (seriesAspects ?? []).find(({ accessor }) => accessor === key);
     splitValues.push(split?.formatter ? split?.formatter(value) : value);
   });
-  return splitValues.map(fillEmptyValue);
+  return splitValues;
 }
 
 export const getSeriesNameFn = (aspects: VisConfig['aspects'], multipleY = false) =>

x-pack/plugins/lens/public/datatable_visualization/components/table_actions.ts

@@ -15,8 +15,6 @@ import type {
   LensToggleAction,
 } from './types';
 import { ColumnConfig } from './table_basic';
-
-import { desanitizeFilterContext } from '../../utils';
 import { getOriginalId } from '../transpose_helpers';
 
 export const createGridResizeHandler = (
@@ -92,7 +90,7 @@ export const createGridFilterHandler = (
     timeFieldName,
   };
 
-  onClickValue(desanitizeFilterContext(data));
+  onClickValue(data);
 };
 
 export const createTransposeColumnFilterHandler = (
@@ -125,7 +123,7 @@ export const createTransposeColumnFilterHandler = (
     timeFieldName,
   };
 
-  onClickValue(desanitizeFilterContext(data));
+  onClickValue(data);
 };
 
 export const createGridSortingConfig = (

x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx

@@ -21,7 +21,6 @@ import { VisualizationContainer } from '../visualization_container';
 import { HeatmapRenderProps } from './types';
 import './index.scss';
 import { LensBrushEvent, LensFilterEvent } from '../types';
-import { desanitizeFilterContext } from '../utils';
 import { EmptyPlaceholder } from '../shared_components';
 import { LensIconChartHeatmap } from '../assets/chart_heatmap';
 
@@ -117,7 +116,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
       })),
       timeFieldName,
     };
-    onClickValue(desanitizeFilterContext(context));
+    onClickValue(context);
   }) as ElementClickListener;
 
   const onBrushEnd = (e: HeatmapBrushEvent) => {
@@ -164,7 +163,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
         })),
         timeFieldName,
       };
-      onClickValue(desanitizeFilterContext(context));
+      onClickValue(context);
     }
   };
 

x-pack/plugins/lens/public/indexpattern_datasource/rename_columns.test.ts

@@ -83,29 +83,6 @@ describe('rename_columns', () => {
     `);
   });
 
-  it('should replace "" with a visible value', () => {
-    const input: Datatable = {
-      type: 'datatable',
-      columns: [{ id: 'a', name: 'A', meta: { type: 'string' } }],
-      rows: [{ a: '' }],
-    };
-
-    const idMap = {
-      a: {
-        id: 'a',
-        label: 'Austrailia',
-      },
-    };
-
-    const result = renameColumns.fn(
-      input,
-      { idMap: JSON.stringify(idMap) },
-      createMockExecutionContext()
-    );
-
-    expect(result.rows[0].a).toEqual('(empty)');
-  });
-
   it('should keep columns which are not mapped', () => {
     const input: Datatable = {
       type: 'datatable',

x-pack/plugins/lens/public/indexpattern_datasource/rename_columns.ts

@@ -49,9 +49,9 @@ export const renameColumns: ExpressionFunctionDefinition<
 
         Object.entries(row).forEach(([id, value]) => {
           if (id in idMap) {
-            mappedRow[idMap[id].id] = sanitizeValue(value);
+            mappedRow[idMap[id].id] = value;
           } else {
-            mappedRow[id] = sanitizeValue(value);
+            mappedRow[id] = value;
           }
         });
 
@@ -86,13 +86,3 @@ function getColumnName(originalColumn: OriginalColumn, newColumn: DatatableColum
 
   return originalColumn.label;
 }
-
-function sanitizeValue(value: unknown) {
-  if (value === '') {
-    return i18n.translate('xpack.lens.indexpattern.emptyTextColumnValue', {
-      defaultMessage: '(empty)',
-    });
-  }
-
-  return value;
-}

x-pack/plugins/lens/public/pie_visualization/render_function.tsx

@@ -31,7 +31,6 @@ import { PieExpressionProps } from './types';
 import { getSliceValue, getFilterContext } from './render_helpers';
 import { EmptyPlaceholder } from '../shared_components';
 import './visualization.scss';
-import { desanitizeFilterContext } from '../utils';
 import {
   ChartsPluginSetup,
   PaletteRegistry,
@@ -254,7 +253,7 @@ export function PieComponent(
   const onElementClickHandler: ElementClickListener = (args) => {
     const context = getFilterContext(args[0][0] as LayerValue[], groups, firstTable);
 
-    onClickValue(desanitizeFilterContext(context));
+    onClickValue(context);
   };
 
   return (

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

@@ -9,7 +9,6 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
 import type { LensFilterEvent } from '../types';
-import { desanitizeFilterContext } from '../utils';
 
 export interface LegendActionPopoverProps {
   /**
@@ -45,7 +44,7 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
           icon: <EuiIcon type="plusInCircle" size="m" />,
           onClick: () => {
             setPopoverOpen(false);
-            onFilter(desanitizeFilterContext(context));
+            onFilter(context);
           },
         },
         {
@@ -56,7 +55,7 @@ export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverPro
           icon: <EuiIcon type="minusInCircle" size="m" />,
           onClick: () => {
             setPopoverOpen(false);
-            onFilter(desanitizeFilterContext({ ...context, negate: true }));
+            onFilter({ ...context, negate: true });
           },
         },
       ],