Refactor and cleanups

Author: mariairiartef

src/platform/packages/shared/chart-expressions-common/computed_column_warning.ts

@@ -10,56 +10,67 @@
 import type { DatatableColumn } from '@kbn/expressions-plugin/common';
 import { i18n } from '@kbn/i18n';
 
-function getComputedColumnFilterDisabledMessage({
+const getComputedColumnFilterDisabledMessage = ({
   computedColumnNames,
   allColumnsAreComputed,
   panelHasConfiguredDrilldowns,
 }: {
   computedColumnNames: string[];
   allColumnsAreComputed: boolean;
   panelHasConfiguredDrilldowns: boolean;
-}): string {
-  const hasDrilldowns = String(panelHasConfiguredDrilldowns);
+}) => {
   const count = computedColumnNames.length;
 
   if (allColumnsAreComputed) {
-    return i18n.translate('chartExpressionsCommon.computedColumnFilterDisabledMessage', {
-      defaultMessage:
-        "You can't apply a filter {hasDrilldowns, select, true {or drill down } other {}}{count, plural, one {from this value because it relies on a field} other {from these values because they rely on fields}} created at query time.",
-      values: { hasDrilldowns, count },
-    });
+    return panelHasConfiguredDrilldowns
+      ? i18n.translate('chartExpressionsCommon.computedColumn.filterDrilldownDisabledDescription', {
+          defaultMessage:
+            "You can't apply a filter or drill down {count, plural, one {from this value because it relies on a field} other {from these values because they rely on fields}} created at query time.",
+          values: { count },
+        })
+      : i18n.translate('chartExpressionsCommon.computedColumn.filterDisabledDescription', {
+          defaultMessage:
+            "You can't apply a filter {count, plural, one {from this value because it relies on a field} other {from these values because they rely on fields}} created at query time.",
+          values: { count },
+        });
   }
 
   const names = computedColumnNames.map((n) => `'${n}'`).join(', ');
-  return i18n.translate('chartExpressionsCommon.partialComputedColumnFilterDisabledMessage', {
-    defaultMessage:
-      "You can't apply a filter {hasDrilldowns, select, true {or drill down } other {}}from {names} because {count, plural, one {it relies on a field} other {they rely on fields}} created at query time.",
-    values: { hasDrilldowns, names, count },
-  });
-}
+  return panelHasConfiguredDrilldowns
+    ? i18n.translate(
+        'chartExpressionsCommon.computedColumn.partialFilterDrilldownDisabledDescription',
+        {
+          defaultMessage:
+            "You can't apply a filter or drill down from {names} because {count, plural, one {it relies on a field} other {they rely on fields}} created at query time.",
+          values: { names, count },
+        }
+      )
+    : i18n.translate('chartExpressionsCommon.computedColumn.partialFilterDisabledDescription', {
+        defaultMessage:
+          "You can't apply a filter from {names} because {count, plural, one {it relies on a field} other {they rely on fields}} created at query time.",
+        values: { names, count },
+      });
+};
 
 /**
  * Returns the warning message to show when filterable chart columns are computed ES|QL
  * fields that cannot be used for filtering. Returns `undefined` when there is nothing
  * to warn about.
- *
- * The caller is responsible for:
- *  - Passing only the columns that represent filterable dimensions (x-axis, y-axis,
- *    split accessors, etc.) — not every column in the table.
- *  - Deduplicating columns when the same column ID appears across multiple layers.
- *  - Checking `isEsqlMode` before calling (pass an empty array or skip the call entirely
- *    when not in ES|QL mode).
  */
 export const getComputedColumnWarningForColumns = (
   filterableColumns: Array<DatatableColumn | undefined>,
   panelHasConfiguredDrilldowns: boolean
 ): string | undefined => {
   const defined = filterableColumns.filter((c): c is DatatableColumn => c != null);
-  if (defined.length === 0) return undefined;
+  if (defined.length === 0) {
+    return undefined;
+  }
 
   const computedColumnNames = defined.filter((col) => col.isComputedColumn).map((col) => col.name);
 
-  if (computedColumnNames.length === 0) return undefined;
+  if (computedColumnNames.length === 0) {
+    return undefined;
+  }
 
   const allColumnsAreComputed = computedColumnNames.length === defined.length;
   return getComputedColumnFilterDisabledMessage({

src/platform/plugins/shared/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

@@ -10,6 +10,7 @@
 import type { FC } from 'react';
 import React, { memo, useMemo, useState, useCallback, useRef } from 'react';
 import { css } from '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
 import { useEuiTheme } from '@elastic/eui';
 import moment from 'moment';
 import { ESQL_TABLE_TYPE } from '@kbn/data-plugin/common';
@@ -46,6 +47,7 @@ import {
 } from '@kbn/chart-expressions-common';
 import { useKibanaIsDarkMode } from '@kbn/react-kibana-context-theme';
 import type { CoreSetup } from '@kbn/core/public';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import type { HeatmapRenderProps, FilterEvent, BrushEvent } from '../../common';
 import {
   applyPaletteParams,
@@ -286,14 +288,20 @@ export function getDateFormatPattern(
   return uiSettings.get('dateFormat');
 }
 
+const computedColumnWarningStyles = {
+  message: ({ euiTheme }: UseEuiTheme) =>
+    css`
+      color: ${euiTheme.colors.textSubdued};
+      font-size: ${euiTheme.size.m};
+      font-weight: ${euiTheme.font.weight.regular};
+    `,
+};
+
 /** Renders the computed-column filter warning inside the chart tooltip footer. */
-const TooltipComputedColumnWarning: React.FC<{ message: string }> = ({ message }) => {
-  const { euiTheme } = useEuiTheme();
+const ComputedColumnWarning: React.FC<{ message: string }> = ({ message }) => {
+  const styles = useMemoCss(computedColumnWarningStyles);
   return (
-    <div
-      css={css({ color: euiTheme.colors.textSubdued, fontSize: euiTheme.size.m })}
-      data-test-subj="heatmapChartComputedColumnWarning"
-    >
+    <div css={styles.message} data-test-subj="heatmapChartComputedColumnWarning">
       {message}
     </div>
   );
@@ -476,7 +484,6 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
     const hasTooltipActions = interactive && !isEsqlMode;
 
     // Compute warning message for ES|QL computed columns that cannot be filtered.
-    // Shown in the tooltip footer on every hover (tooltip actions only show when pinned).
     const computedColumnWarningMessage = useMemo(
       () =>
         isEsqlMode
@@ -496,8 +503,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
       | 'default'
     >(() => {
       if (!computedColumnWarningMessage) return 'default';
-      const message = computedColumnWarningMessage;
-      return () => <TooltipComputedColumnWarning message={message} />;
+      return () => <ComputedColumnWarning message={computedColumnWarningMessage} />;
     }, [computedColumnWarningMessage]);
 
     const onElementClick = useCallback(

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/legend_action.test.tsx

@@ -22,6 +22,7 @@ import { mockPaletteOutput } from '../../common/test_utils';
 import type { FieldFormat } from '@kbn/field-formats-plugin/common';
 import type { InvertedRawValueMap, LayerFieldFormats } from '../helpers';
 import type { RawValue } from '@kbn/data-plugin/common';
+import { ESQL_TABLE_TYPE } from '@kbn/data-plugin/common';
 
 const legendCellValueActions: LegendCellValueActions = [
   { id: 'action_1', displayName: 'Action 1', iconType: 'testIcon1', execute: () => {} },
@@ -271,6 +272,7 @@ describe('getLegendAction', function () {
   it('disables filter actions if column has isComputedColumn set to true', () => {
     const tableWithComputedColumn: Datatable = {
       ...table,
+      meta: { type: ESQL_TABLE_TYPE },
       columns: table.columns.map((col) =>
         col.id === 'splitAccessorId' ? { ...col, isComputedColumn: true } : col
       ),
@@ -314,7 +316,7 @@ describe('getLegendAction', function () {
     };
     wrapper = mountWithIntl(<ComponentWithComputedColumn {...newProps} />);
     expect(wrapper.find(EuiPopover).length).toBe(1);
-    expect(wrapper.find(LegendActionPopover).prop('filterActionsDisabled')).toBe(true);
+    expect(wrapper.find(LegendActionPopover).prop('hasComputedColumn')).toBe(true);
   });
 
   it('is rendered if column has isComputedColumn set to false', () => {

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/legend_action.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import type { LegendAction, XYChartSeriesIdentifier } from '@elastic/charts';
 import { getAccessorByDimension } from '@kbn/chart-expressions-common';
 import type { CellValueContext } from '@kbn/embeddable-plugin/public';
+import { ESQL_TABLE_TYPE } from '@kbn/data-plugin/common';
 import type { LayerCellValueActions, FilterEvent } from '../types';
 import type { CommonXYDataLayerConfig } from '../../common';
 import type { LegendCellValueActions } from './legend_action_popover';
@@ -53,6 +54,7 @@ export const getLegendAction = (
     }
 
     const { table } = layer;
+    const isEsqlMode = table?.meta?.type === ESQL_TABLE_TYPE;
 
     const filterActionData: FilterEvent['data']['data'] = [];
     const cellValueActionData: CellValueContext['data'] = [];
@@ -82,7 +84,7 @@ export const getLegendAction = (
       return null;
     }
 
-    const hasComputedColumn = filterActionData.some((data) => {
+    const hasComputedColumn = isEsqlMode && filterActionData.some((data) => {
       const column = data.table.columns[data.column];
       return column?.isComputedColumn === true;
     });

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/legend_action_popover.tsx

@@ -24,11 +24,11 @@ const getEsqlComputedColumnFilterDisabledMessage = (
   panelHasConfiguredDrilldowns: boolean = false
 ) => {
   return panelHasConfiguredDrilldowns
-    ? i18n.translate('expressionXY.legend.esqlComputedColumnFilterDrilldownDisabledMessage', {
+    ? i18n.translate('expressionXY.legend.esqlComputedColumnFilterDrilldownDisabledDescription', {
         defaultMessage:
           "You can't apply a filter or drill down from this value because it relies on a field created at query time.",
       })
-    : i18n.translate('expressionXY.legend.esqlComputedColumnFilterDisabledMessage', {
+    : i18n.translate('expressionXY.legend.esqlComputedColumnFilterDisabledDescription', {
         defaultMessage:
           "You can't apply a filter from this value because it relies on a field created at query time.",
       });

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/computed_column_warning.ts

@@ -20,11 +20,8 @@ import type { CommonXYDataLayerConfig } from '../../../common';
  */
 export const getComputedColumnWarning = (
   dataLayers: CommonXYDataLayerConfig[],
-  isEsqlMode: boolean | undefined,
   panelHasConfiguredDrilldowns: boolean
 ): string | undefined => {
-  if (!isEsqlMode) return undefined;
-
   // Collect all filterable column IDs (x-accessor + split accessors) across layers.
   const allFilterableColumnIds = new Set(
     dataLayers.flatMap((layer) => {

src/platform/plugins/shared/chart_expressions/expression_xy/public/components/xy_chart.tsx

@@ -38,7 +38,7 @@ import {
   LEGACY_LIGHT_THEME,
 } from '@elastic/charts';
 import { partition } from 'lodash';
-import type { IconType } from '@elastic/eui';
+import type { IconType, UseEuiTheme } from '@elastic/eui';
 import { useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isOfAggregateQueryType } from '@kbn/es-query';
@@ -65,6 +65,7 @@ import {
 import { useAppFixedViewport } from '@kbn/core-rendering-browser';
 import { useKibanaIsDarkMode } from '@kbn/react-kibana-context-theme';
 import type { AlertRuleFromVisUIActionData } from '@kbn/alerts-ui-shared';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 import type {
   FilterEvent,
   BrushEvent,
@@ -201,14 +202,20 @@ function getIconForSeriesType(layer: CommonXYDataLayerConfig): IconType {
   );
 }
 
+const computedColumnWarningStyles = {
+  message: ({ euiTheme }: UseEuiTheme) =>
+    css`
+      color: ${euiTheme.colors.textSubdued};
+      font-size: ${euiTheme.size.m};
+      font-weight: ${euiTheme.font.weight.regular};
+    `,
+};
+
 /** Renders the computed-column filter warning inside the chart tooltip footer. */
-const TooltipComputedColumnWarning: React.FC<{ message: string }> = ({ message }) => {
-  const { euiTheme } = useEuiTheme();
+const ComputedColumnWarning: React.FC<{ message: string }> = ({ message }) => {
+  const styles = useMemoCss(computedColumnWarningStyles);
   return (
-    <div
-      css={css({ color: euiTheme.colors.textSubdued, fontSize: euiTheme.size.m })}
-      data-test-subj="xyChartComputedColumnWarning"
-    >
+    <div css={styles.message} data-test-subj="xyChartComputedColumnWarning">
       {message}
     </div>
   );
@@ -368,10 +375,12 @@ export function XYChart({
   const isEsqlMode = dataLayers.some((l) => l.table?.meta?.type === ESQL_TABLE_TYPE);
 
   // Compute warning message for ES|QL computed columns that cannot be filtered.
-  // Shown in the tooltip footer on every hover.
   const computedColumnWarningMessage = useMemo(
-    () => getComputedColumnWarning(dataLayers, isEsqlMode, panelHasConfiguredDrilldowns ?? false),
-    [dataLayers, isEsqlMode, panelHasConfiguredDrilldowns]
+    () =>
+      isEsqlMode
+        ? getComputedColumnWarning(dataLayers, panelHasConfiguredDrilldowns ?? false)
+        : undefined,
+    [isEsqlMode, dataLayers, panelHasConfiguredDrilldowns]
   );
 
   const TooltipWarningFooter = useMemo<
@@ -382,7 +391,7 @@ export function XYChart({
     | 'default'
   >(() => {
     if (!computedColumnWarningMessage) return 'default';
-    return () => <TooltipComputedColumnWarning message={computedColumnWarningMessage} />;
+    return () => <ComputedColumnWarning message={computedColumnWarningMessage} />;
   }, [computedColumnWarningMessage]);
 
   const icon: IconType = getIconForSeriesType(getDataLayers(layers)?.[0]);