diff --git a/packages/kbn-cell-actions/constants.ts b/packages/kbn-cell-actions/constants.ts new file mode 100644 index 0000000000000..c78869a471cb0 --- /dev/null +++ b/packages/kbn-cell-actions/constants.ts @@ -0,0 +1,9 @@ +/* + * 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 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export * from './src/constants'; diff --git a/packages/kbn-cell-actions/src/index.ts b/packages/kbn-cell-actions/src/index.ts index dfd1d83937c0f..4e478baec441f 100644 --- a/packages/kbn-cell-actions/src/index.ts +++ b/packages/kbn-cell-actions/src/index.ts @@ -20,7 +20,7 @@ export type { export type { UseDataGridColumnsCellActions, UseDataGridColumnsCellActionsProps } from './hooks'; // Constants -export { CellActionsMode, FILTER_CELL_ACTION_TYPE, COPY_CELL_ACTION_TYPE } from './constants'; +export { CellActionsMode } from './constants'; // Components and hooks export { CellActionsProvider } from './context'; diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/types.ts b/src/plugins/chart_expressions/expression_partition_vis/public/types.ts index 0beca2e79de8d..7b139df576d6e 100755 --- a/src/plugins/chart_expressions/expression_partition_vis/public/types.ts +++ b/src/plugins/chart_expressions/expression_partition_vis/public/types.ts @@ -47,6 +47,7 @@ export interface MultiFilterEvent { export interface CellValueAction { id: string; + type?: string; iconType: string; displayName: string; execute: (data: CellValueContext['data']) => void; diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx index 778c2003de4f1..b734e1b07a0c0 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx +++ b/src/plugins/chart_expressions/expression_partition_vis/public/utils/get_legend_actions.tsx @@ -14,10 +14,15 @@ import { LegendAction, SeriesIdentifier, useLegendAction } from '@elastic/charts import { DataPublicPluginStart } from '@kbn/data-plugin/public'; import { Datatable } from '@kbn/expressions-plugin/public'; import { FieldFormatsStart } from '@kbn/field-formats-plugin/public'; +import { FILTER_CELL_ACTION_TYPE } from '@kbn/cell-actions/constants'; import { PartitionVisParams } from '../../common/types'; -import { ColumnCellValueActions, FilterEvent } from '../types'; +import { CellValueAction, ColumnCellValueActions, FilterEvent } from '../types'; import { getSeriesValueColumnIndex, getFilterPopoverTitle } from './filter_helpers'; +const hasFilterCellAction = (actions: CellValueAction[]) => { + return actions.some(({ type }) => type === FILTER_CELL_ACTION_TYPE); +}; + export const getLegendActions = ( canFilter: ( data: FilterEvent | null, @@ -58,9 +63,10 @@ export const getLegendActions = ( pieSeries.key ); - const panelItems: EuiContextMenuPanelDescriptor['items'] = []; + const compatibleCellActions = columnCellValueActions[columnIndex] ?? []; - if (isFilterable && filterData) { + const panelItems: EuiContextMenuPanelDescriptor['items'] = []; + if (!hasFilterCellAction(compatibleCellActions) && isFilterable && filterData) { panelItems.push( { name: i18n.translate('expressionPartitionVis.legend.filterForValueButtonAriaLabel', { @@ -87,20 +93,18 @@ export const getLegendActions = ( ); } - if (columnCellValueActions[columnIndex]) { - const columnMeta = visData.columns[columnIndex].meta; - columnCellValueActions[columnIndex].forEach((action) => { - panelItems.push({ - name: action.displayName, - 'data-test-subj': `legend-${title}-${action.id}`, - icon: , - onClick: () => { - action.execute([{ columnMeta, value: pieSeries.key }]); - setPopoverOpen(false); - }, - }); + const columnMeta = visData.columns[columnIndex].meta; + compatibleCellActions.forEach((action) => { + panelItems.push({ + name: action.displayName, + 'data-test-subj': `legend-${title}-${action.id}`, + icon: , + onClick: () => { + action.execute([{ columnMeta, value: pieSeries.key }]); + setPopoverOpen(false); + }, }); - } + }); if (panelItems.length === 0) { return null; diff --git a/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json b/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json index bfb4774a1676e..59b7893879ced 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json +++ b/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json @@ -29,6 +29,7 @@ "@kbn/analytics", "@kbn/chart-icons", "@kbn/chart-expressions-common", + "@kbn/cell-actions", ], "exclude": [ "target/**/*", diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.test.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.test.ts index 78eb7c54ebf8a..eae70ea54f0c9 100644 --- a/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.test.ts +++ b/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.test.ts @@ -10,7 +10,6 @@ import { layeredXyVisFunction } from '.'; import { createMockExecutionContext } from '@kbn/expressions-plugin/common/mocks'; import { sampleArgs, sampleExtendedLayer } from '../__mocks__'; import { XY_VIS } from '../constants'; -import { shouldShowLegendActionDefault } from '../helpers/visualization'; describe('layeredXyVis', () => { test('it renders with the specified data and args', async () => { @@ -31,7 +30,6 @@ describe('layeredXyVis', () => { syncTooltips: false, syncCursor: true, canNavigateToLens: false, - shouldShowLegendAction: shouldShowLegendActionDefault, }, }); }); diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis_fn.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis_fn.ts index 5a1a79ef984fc..cf1325f09bf22 100644 --- a/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis_fn.ts +++ b/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis_fn.ts @@ -18,7 +18,6 @@ import { validateAxes, } from './validate'; import { appendLayerIds, getDataLayers } from '../helpers'; -import { shouldShowLegendActionDefault } from '../helpers/visualization'; export const layeredXyVisFn: LayeredXyVisFn['fn'] = async (data, args, handlers) => { const layers = appendLayerIds(args.layers ?? [], 'layers'); @@ -67,7 +66,6 @@ export const layeredXyVisFn: LayeredXyVisFn['fn'] = async (data, args, handlers) syncTooltips: handlers?.isSyncTooltipsEnabled?.() ?? false, syncCursor: handlers?.isSyncCursorEnabled?.() ?? true, overrides: handlers.variables?.overrides as XYRender['value']['overrides'], - shouldShowLegendAction: handlers?.shouldShowLegendAction ?? shouldShowLegendActionDefault, }, }; }; diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.test.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.test.ts index e0c825597d328..9a71ec92d7a51 100644 --- a/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.test.ts +++ b/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.test.ts @@ -10,7 +10,6 @@ import { xyVisFunction } from '.'; import { createMockExecutionContext } from '@kbn/expressions-plugin/common/mocks'; import { sampleArgs, sampleLayer } from '../__mocks__'; import { XY_VIS } from '../constants'; -import { shouldShowLegendActionDefault } from '../helpers/visualization'; describe('xyVis', () => { test('it renders with the specified data and args', async () => { @@ -43,7 +42,6 @@ describe('xyVis', () => { syncColors: false, syncTooltips: false, syncCursor: true, - shouldShowLegendAction: shouldShowLegendActionDefault, }, }); }); @@ -354,7 +352,6 @@ describe('xyVis', () => { syncColors: false, syncTooltips: false, syncCursor: true, - shouldShowLegendAction: shouldShowLegendActionDefault, }, }); }); @@ -404,7 +401,6 @@ describe('xyVis', () => { syncTooltips: false, syncCursor: true, overrides, - shouldShowLegendAction: shouldShowLegendActionDefault, }, }); }); diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts index 1eb4357e57c84..03df575b3c653 100644 --- a/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts +++ b/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts @@ -30,7 +30,6 @@ import { validateAxes, } from './validate'; import { logDatatable } from '../utils'; -import { shouldShowLegendActionDefault } from '../helpers/visualization'; const createDataLayer = (args: XYArgs, table: Datatable): DataLayerConfigResult => { const accessors = getAccessors(args, table); @@ -140,7 +139,6 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => { syncTooltips: handlers?.isSyncTooltipsEnabled?.() ?? false, syncCursor: handlers?.isSyncCursorEnabled?.() ?? true, overrides: handlers.variables?.overrides as XYRender['value']['overrides'], - shouldShowLegendAction: handlers?.shouldShowLegendAction ?? shouldShowLegendActionDefault, }, }; }; diff --git a/src/plugins/chart_expressions/expression_xy/common/helpers/visualization.ts b/src/plugins/chart_expressions/expression_xy/common/helpers/visualization.ts index 8f740c2578d7e..66d4c11a9f7ae 100644 --- a/src/plugins/chart_expressions/expression_xy/common/helpers/visualization.ts +++ b/src/plugins/chart_expressions/expression_xy/common/helpers/visualization.ts @@ -19,5 +19,3 @@ export function isTimeChart(layers: CommonXYDataLayerConfigResult[]) { (!l.xScaleType || l.xScaleType === XScaleTypes.TIME) ); } - -export const shouldShowLegendActionDefault = () => true; diff --git a/src/plugins/chart_expressions/expression_xy/public/components/legend_action.test.tsx b/src/plugins/chart_expressions/expression_xy/public/components/legend_action.test.tsx index 47e36adab06f8..1398fc64357cb 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/legend_action.test.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/legend_action.test.tsx @@ -203,8 +203,7 @@ describe('getLegendAction', function () { formattedColumns: {}, }, }, - {}, - () => true + {} ); let wrapper: ReactWrapper; diff --git a/src/plugins/chart_expressions/expression_xy/public/components/legend_action.tsx b/src/plugins/chart_expressions/expression_xy/public/components/legend_action.tsx index 2ae2c21b8c0d8..f5b00f696d04f 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/legend_action.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/legend_action.tsx @@ -28,7 +28,6 @@ export const getLegendAction = ( fieldFormats: LayersFieldFormats, formattedDatatables: DatatablesWithFormatInfo, titles: LayersAccessorsTitles, - shouldShowLegendAction?: (actionId: string) => boolean, singleTable?: boolean ): LegendAction => React.memo(({ series: [xySeries] }) => { @@ -110,7 +109,6 @@ export const getLegendAction = ( } onFilter={filterHandler} legendCellValueActions={legendCellValueActions} - shouldShowLegendAction={shouldShowLegendAction} /> ); }); diff --git a/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx b/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx index aa2db4c4eb47c..268a7051bd4c3 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/legend_action_popover.tsx @@ -8,16 +8,14 @@ import React, { useState, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { - EuiContextMenuPanelDescriptor, - EuiIcon, - EuiPopover, - EuiContextMenu, - EuiContextMenuPanelItemDescriptor, -} from '@elastic/eui'; +import { FILTER_CELL_ACTION_TYPE } from '@kbn/cell-actions/constants'; +import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui'; import { useLegendAction } from '@elastic/charts'; import type { CellValueAction } from '../types'; -import { shouldShowLegendActionDefault } from '../../common/helpers/visualization'; + +const hasFilterCellAction = (actions: CellValueAction[]) => { + return actions.some(({ type }) => type === FILTER_CELL_ACTION_TYPE); +}; export type LegendCellValueActions = Array< Omit & { execute: () => void } @@ -36,20 +34,18 @@ export interface LegendActionPopoverProps { * Compatible actions to be added to the popover actions */ legendCellValueActions?: LegendCellValueActions; - shouldShowLegendAction?: (actionId: string) => boolean; } export const LegendActionPopover: React.FunctionComponent = ({ label, onFilter, legendCellValueActions = [], - shouldShowLegendAction = shouldShowLegendActionDefault, }) => { const [popoverOpen, setPopoverOpen] = useState(false); const [ref, onClose] = useLegendAction(); const panels: EuiContextMenuPanelDescriptor[] = useMemo(() => { - const defaultActions = [ + const defaultFilterActions = [ { id: 'filterIn', displayName: i18n.translate('expressionXY.legend.filterForValueButtonAriaLabel', { @@ -76,22 +72,21 @@ export const LegendActionPopover: React.FunctionComponent((acc, action) => { - if (shouldShowLegendAction(action.id)) { - acc.push({ - name: action.displayName, - 'data-test-subj': `legend-${label}-${action.id}`, - icon: , - onClick: () => { - action.execute(); - setPopoverOpen(false); - }, - }); - } - return acc; - }, []); + const allActions = [ + ...(!hasFilterCellAction(legendCellValueActions) ? defaultFilterActions : []), + ...legendCellValueActions, + ]; + + const legendCellValueActionPanelItems = allActions.map((action) => ({ + name: action.displayName, + 'data-test-subj': `legend-${label}-${action.id}`, + icon: , + onClick: () => { + action.execute(); + setPopoverOpen(false); + }, + })); + return [ { id: 'main', @@ -99,7 +94,7 @@ export const LegendActionPopover: React.FunctionComponent & { renderComplete: () => void; uiState?: PersistedState; timeFormat: string; - shouldShowLegendAction?: (actionId: string) => boolean; }; function nonNullable(v: T): v is NonNullable { @@ -208,7 +207,6 @@ export function XYChart({ uiState, timeFormat, overrides, - shouldShowLegendAction, }: XYChartRenderProps) { const { legend, @@ -841,7 +839,6 @@ export function XYChart({ fieldFormats, formattedDatatables, titles, - shouldShowLegendAction, singleTable ) : undefined diff --git a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx index 401af740375b2..c2561191deb9a 100644 --- a/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx @@ -277,7 +277,6 @@ export const getXyChartRenderer = ({ syncCursor={config.syncCursor} uiState={handlers.uiState as PersistedState} renderComplete={renderComplete} - shouldShowLegendAction={handlers.shouldShowLegendAction} /> diff --git a/src/plugins/chart_expressions/expression_xy/public/types.ts b/src/plugins/chart_expressions/expression_xy/public/types.ts index 733dba9400bf2..14aa84768efea 100755 --- a/src/plugins/chart_expressions/expression_xy/public/types.ts +++ b/src/plugins/chart_expressions/expression_xy/public/types.ts @@ -120,6 +120,7 @@ export interface VisualizationType { export interface CellValueAction { id: string; + type?: string; iconType: string; displayName: string; execute: (data: CellValueContext['data']) => void; diff --git a/src/plugins/chart_expressions/expression_xy/tsconfig.json b/src/plugins/chart_expressions/expression_xy/tsconfig.json index 901b7eb0568c6..a0e7e207f92c0 100644 --- a/src/plugins/chart_expressions/expression_xy/tsconfig.json +++ b/src/plugins/chart_expressions/expression_xy/tsconfig.json @@ -34,6 +34,7 @@ "@kbn/event-annotation-common", "@kbn/visualization-ui-components", "@kbn/es-query", + "@kbn/cell-actions", ], "exclude": [ "target/**/*", diff --git a/src/plugins/expressions/common/execution/types.ts b/src/plugins/expressions/common/execution/types.ts index eed9628444cc7..dddc503285942 100644 --- a/src/plugins/expressions/common/execution/types.ts +++ b/src/plugins/expressions/common/execution/types.ts @@ -84,8 +84,6 @@ export interface ExecutionContext< * Logs datatable. */ logDatatable?(name: string, datatable: Datatable): void; - - shouldShowLegendAction?: (actionId: string) => boolean; } /** diff --git a/src/plugins/expressions/common/expression_renderers/types.ts b/src/plugins/expressions/common/expression_renderers/types.ts index e75e0af849ed3..7dae307aa6c01 100644 --- a/src/plugins/expressions/common/expression_renderers/types.ts +++ b/src/plugins/expressions/common/expression_renderers/types.ts @@ -105,5 +105,4 @@ export interface IInterpreterRenderHandlers { uiState?: unknown; getExecutionContext(): KibanaExecutionContext | undefined; - shouldShowLegendAction?: (actionId: string) => boolean; } diff --git a/src/plugins/expressions/public/loader.ts b/src/plugins/expressions/public/loader.ts index c3d7b1fb9920d..f10b8db1f1287 100644 --- a/src/plugins/expressions/public/loader.ts +++ b/src/plugins/expressions/public/loader.ts @@ -63,7 +63,6 @@ export class ExpressionLoader { hasCompatibleActions: params?.hasCompatibleActions, getCompatibleCellValueActions: params?.getCompatibleCellValueActions, executionContext: params?.executionContext, - shouldShowLegendAction: params?.shouldShowLegendAction, }); this.render$ = this.renderHandler.render$; this.update$ = this.renderHandler.update$; diff --git a/src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx b/src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx index 7c299e1bc7240..1d479bd9b4c1c 100644 --- a/src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx +++ b/src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx @@ -24,7 +24,6 @@ export interface ReactExpressionRendererProps error?: ExpressionRenderError | null ) => React.ReactElement | React.ReactElement[]; padding?: 'xs' | 's' | 'm' | 'l' | 'xl'; - shouldShowLegendAction?: (actionId: string) => boolean; } export type ReactExpressionRendererType = React.ComponentType; diff --git a/src/plugins/expressions/public/render.ts b/src/plugins/expressions/public/render.ts index 6bb9c4d0836ba..a7b919625b8d6 100644 --- a/src/plugins/expressions/public/render.ts +++ b/src/plugins/expressions/public/render.ts @@ -36,7 +36,6 @@ export interface ExpressionRenderHandlerParams { hasCompatibleActions?: (event: ExpressionRendererEvent) => Promise; getCompatibleCellValueActions?: (data: object[]) => Promise; executionContext?: KibanaExecutionContext; - shouldShowLegendAction?: (actionId: string) => boolean; } type UpdateValue = IInterpreterRenderUpdateParams; @@ -67,7 +66,6 @@ export class ExpressionRenderHandler { hasCompatibleActions = async () => false, getCompatibleCellValueActions = async () => [], executionContext, - shouldShowLegendAction, }: ExpressionRenderHandlerParams = {} ) { this.element = element; @@ -120,9 +118,6 @@ export class ExpressionRenderHandler { }, hasCompatibleActions, getCompatibleCellValueActions, - shouldShowLegendAction: (actionId: string) => { - return shouldShowLegendAction?.(actionId) ?? true; - }, }; } diff --git a/src/plugins/expressions/public/types/index.ts b/src/plugins/expressions/public/types/index.ts index a96c0629ce8a3..870b44e9bc02c 100644 --- a/src/plugins/expressions/public/types/index.ts +++ b/src/plugins/expressions/public/types/index.ts @@ -67,7 +67,6 @@ export interface IExpressionLoaderParams { * By default, it equals 1000. */ throttle?: number; - shouldShowLegendAction?: (actionId: string) => boolean; } export interface ExpressionRenderError extends Error { diff --git a/x-pack/plugins/lens/public/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/embeddable/embeddable.tsx index b9d0bae197909..bb99e061893f2 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable.tsx +++ b/x-pack/plugins/lens/public/embeddable/embeddable.tsx @@ -176,7 +176,6 @@ interface LensBaseEmbeddableInput extends EmbeddableInput { onTableRowClick?: ( data: Simplify ) => void; - shouldShowLegendAction?: (actionId: string) => boolean; } export type LensByValueInput = { @@ -1110,7 +1109,6 @@ export class Embeddable }} noPadding={this.visDisplayOptions.noPadding} docLinks={this.deps.coreStart.docLinks} - shouldShowLegendAction={input.shouldShowLegendAction} /> (a.order ?? Infinity) - (b.order ?? Infinity)) .map((action) => ({ id: action.id, + type: action.type, iconType: action.getIconType({ embeddable, data, trigger: cellValueTrigger })!, displayName: action.getDisplayName({ embeddable, data, trigger: cellValueTrigger }), execute: (cellData) => diff --git a/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx b/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx index 75b141514f20c..82205c5b5990e 100644 --- a/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx +++ b/x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx @@ -47,7 +47,6 @@ export interface ExpressionWrapperProps { lensInspector: LensInspector; noPadding?: boolean; docLinks: CoreStart['docLinks']; - shouldShowLegendAction?: (actionId: string) => boolean; } export function ExpressionWrapper({ @@ -74,7 +73,6 @@ export function ExpressionWrapper({ lensInspector, noPadding, docLinks, - shouldShowLegendAction, }: ExpressionWrapperProps) { if (!expression) return null; return ( @@ -106,7 +104,6 @@ export function ExpressionWrapper({ onEvent={handleEvent} hasCompatibleActions={hasCompatibleActions} getCompatibleCellValueActions={getCompatibleCellValueActions} - shouldShowLegendAction={shouldShowLegendAction} /> diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts index 6ac2b98569d7f..25b637aebf071 100644 --- a/x-pack/plugins/lens/public/types.ts +++ b/x-pack/plugins/lens/public/types.ts @@ -1416,6 +1416,7 @@ export type LensTopNavMenuEntryGenerator = (props: { export interface LensCellValueAction { id: string; iconType: string; + type?: string; displayName: string; execute: (data: CellValueContext['data']) => void; } diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/columns.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/columns.tsx index 51aa500bbfebf..c31486d0a0f05 100644 --- a/x-pack/plugins/lens/public/visualizations/datatable/components/columns.tsx +++ b/x-pack/plugins/lens/public/visualizations/datatable/components/columns.tsx @@ -19,10 +19,15 @@ import type { DatatableColumnMeta, } from '@kbn/expressions-plugin/common'; import { EuiDataGridColumnCellAction } from '@elastic/eui/src/components/datagrid/data_grid_types'; +import { FILTER_CELL_ACTION_TYPE } from '@kbn/cell-actions/constants'; import type { FormatFactory } from '../../../../common/types'; import type { ColumnConfig } from '../../../../common/expressions'; import { LensCellValueAction } from '../../../types'; +const hasFilterCellAction = (actions: LensCellValueAction[]) => { + return actions.some(({ type }) => type === FILTER_CELL_ACTION_TYPE); +}; + export const createGridColumns = ( bucketColumns: string[], table: Datatable, @@ -81,7 +86,16 @@ export const createGridColumns = ( const columnArgs = columnConfig.columns.find(({ columnId }) => columnId === field); const cellActions: EuiDataGridColumnCellAction[] = []; - if (filterable && handleFilterClick && !columnArgs?.oneClickFilter) { + + // compatible cell actions from actions registry + const compatibleCellActions = columnCellValueActions?.[colIndex] ?? []; + + if ( + !hasFilterCellAction(compatibleCellActions) && + filterable && + handleFilterClick && + !columnArgs?.oneClickFilter + ) { cellActions.push( ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => { const { rowValue, contentsIsDefined, cellContent } = getContentData({ @@ -166,8 +180,6 @@ export const createGridColumns = ( ); } - // Add all the column compatible cell actions - const compatibleCellActions = columnCellValueActions?.[colIndex] ?? []; compatibleCellActions.forEach((action) => { cellActions.push(({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => { const rowValue = table.rows[rowIndex][columnId]; diff --git a/x-pack/plugins/lens/tsconfig.json b/x-pack/plugins/lens/tsconfig.json index 12f737244bcb0..6cb071d18352a 100644 --- a/x-pack/plugins/lens/tsconfig.json +++ b/x-pack/plugins/lens/tsconfig.json @@ -91,7 +91,8 @@ "@kbn/logging", "@kbn/core-plugins-server", "@kbn/field-utils", - "@kbn/shared-ux-button-toolbar" + "@kbn/shared-ux-button-toolbar", + "@kbn/cell-actions" ], "exclude": [ "target/**/*", diff --git a/x-pack/plugins/security_solution/public/actions/constants.ts b/x-pack/plugins/security_solution/public/actions/constants.ts index 95e72e70ccbab..c477d5c6fc9c1 100644 --- a/x-pack/plugins/security_solution/public/actions/constants.ts +++ b/x-pack/plugins/security_solution/public/actions/constants.ts @@ -4,6 +4,9 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ + +import { FILTER_CELL_ACTION_TYPE, COPY_CELL_ACTION_TYPE } from '@kbn/cell-actions/constants'; + export enum SecurityCellActionsTrigger { DEFAULT = 'security-default-cellActions', DETAILS_FLYOUT = 'security-detailsFlyout-cellActions', @@ -26,3 +29,8 @@ export enum SecurityCellActionType { SHOW_TOP_N = 'security-cellAction-type-showTopN', TOGGLE_COLUMN = 'security-cellAction-type-toggleColumn', } + +export const DefaultCellActionTypes = { + FILTER: FILTER_CELL_ACTION_TYPE, + COPY: COPY_CELL_ACTION_TYPE, +} as const; diff --git a/x-pack/plugins/security_solution/public/actions/filter/index.ts b/x-pack/plugins/security_solution/public/actions/filter/index.ts index 2759d5cc20d36..b2e492956ecde 100644 --- a/x-pack/plugins/security_solution/public/actions/filter/index.ts +++ b/x-pack/plugins/security_solution/public/actions/filter/index.ts @@ -9,7 +9,5 @@ export { createFilterInCellActionFactory } from './cell_action/filter_in'; export { createFilterOutCellActionFactory } from './cell_action/filter_out'; export { createFilterInDiscoverCellActionFactory } from './discover/filter_in'; export { createFilterOutDiscoverCellActionFactory } from './discover/filter_out'; -export { createTimelineHistogramFilterInLegendActionFactory } from './lens/filter_in_timeline'; -export { createFilterInHistogramLegendActionFactory } from './lens/filter_in'; -export { createTimelineHistogramFilterOutLegendActionFactory } from './lens/filter_out_timeline'; -export { createFilterOutHistogramLegendActionFactory } from './lens/filter_out'; +export { createFilterInLensAction } from './lens/filter_in'; +export { createFilterOutLensAction } from './lens/filter_out'; diff --git a/x-pack/plugins/security_solution/public/actions/filter/lens/helpers.ts b/x-pack/plugins/security_solution/public/actions/filter/lens/create_action.ts similarity index 72% rename from x-pack/plugins/security_solution/public/actions/filter/lens/helpers.ts rename to x-pack/plugins/security_solution/public/actions/filter/lens/create_action.ts index d138561aab1b6..78a0a9d46ff21 100644 --- a/x-pack/plugins/security_solution/public/actions/filter/lens/helpers.ts +++ b/x-pack/plugins/security_solution/public/actions/filter/lens/create_action.ts @@ -16,15 +16,12 @@ import type { CellValueContext } from '@kbn/embeddable-plugin/public'; import { createAction } from '@kbn/ui-actions-plugin/public'; import { ACTION_INCOMPATIBLE_VALUE_WARNING } from '@kbn/cell-actions/src/actions/translations'; import { i18n } from '@kbn/i18n'; -import { KibanaServices } from '../../../common/lib/kibana'; import { timelineSelectors } from '../../../timelines/store/timeline'; import { fieldHasCellActions, isInSecurityApp, isLensEmbeddable } from '../../utils'; import { TimelineId } from '../../../../common/types'; -import { SecurityCellActionType } from '../../constants'; +import { DefaultCellActionTypes } from '../../constants'; import type { SecurityAppStore } from '../../../common/store'; import type { StartServices } from '../../../types'; -import { HISTOGRAM_LEGEND_ACTION_FILTER_IN } from './filter_in'; -import { HISTOGRAM_LEGEND_ACTION_FILTER_OUT } from './filter_out'; function isDataColumnsValid(data?: CellValueContext['data']): boolean { return ( @@ -34,7 +31,7 @@ function isDataColumnsValid(data?: CellValueContext['data']): boolean { ); } -export const createHistogramFilterLegendActionFactory = ({ +export const createFilterLensAction = ({ id, order, store, @@ -47,14 +44,13 @@ export const createHistogramFilterLegendActionFactory = ({ services: StartServices; negate?: boolean; }) => { - const { application: applicationService } = KibanaServices.get(); + const { application, notifications, data: dataService, topValuesPopover } = services; + let currentAppId: string | undefined; - applicationService.currentAppId$.subscribe((appId) => { + application.currentAppId$.subscribe((appId) => { currentAppId = appId; }); const getTimelineById = timelineSelectors.getTimelineByIdSelector(); - const { notifications } = services; - const { filterManager } = services.data.query; return createAction({ id, @@ -68,7 +64,7 @@ export const createHistogramFilterLegendActionFactory = ({ : i18n.translate('xpack.securitySolution.actions.filterForTimeline', { defaultMessage: `Filter for`, }), - type: SecurityCellActionType.FILTER, + type: DefaultCellActionTypes.FILTER, isCompatible: async ({ embeddable, data }) => !isErrorEmbeddable(embeddable) && isLensEmbeddable(embeddable) && @@ -85,27 +81,19 @@ export const createHistogramFilterLegendActionFactory = ({ }); return; } - if (!field) return; + topValuesPopover.closePopover(); + + const addFilter = negate === true ? addFilterOut : addFilterIn; + const timeline = getTimelineById(store.getState(), TimelineId.active); - services.topValuesPopover.closePopover(); + // timeline is open add the filter to timeline, otherwise add filter to global filters + const filterManager = timeline?.show + ? timeline.filterManager + : dataService.query.filterManager; - if (!negate) { - addFilterIn({ - filterManager: - id === HISTOGRAM_LEGEND_ACTION_FILTER_IN ? filterManager : timeline.filterManager, - fieldName: field, - value, - }); - } else { - addFilterOut({ - filterManager: - id === HISTOGRAM_LEGEND_ACTION_FILTER_OUT ? filterManager : timeline.filterManager, - fieldName: field, - value, - }); - } + addFilter({ filterManager, fieldName: field, value }); }, }); }; diff --git a/x-pack/plugins/security_solution/public/actions/filter/lens/filter_in.ts b/x-pack/plugins/security_solution/public/actions/filter/lens/filter_in.ts index aee91a849d898..fae9175879c9f 100644 --- a/x-pack/plugins/security_solution/public/actions/filter/lens/filter_in.ts +++ b/x-pack/plugins/security_solution/public/actions/filter/lens/filter_in.ts @@ -8,11 +8,11 @@ import type { SecurityAppStore } from '../../../common/store'; import type { StartServices } from '../../../types'; -import { createHistogramFilterLegendActionFactory } from './helpers'; +import { createFilterLensAction } from './create_action'; -export const HISTOGRAM_LEGEND_ACTION_FILTER_IN = 'histogramLegendActionFilterIn'; +export const ACTION_ID = 'embeddable_filterIn'; -export const createFilterInHistogramLegendActionFactory = ({ +export const createFilterInLensAction = ({ store, order, services, @@ -21,8 +21,8 @@ export const createFilterInHistogramLegendActionFactory = ({ order: number; services: StartServices; }) => - createHistogramFilterLegendActionFactory({ - id: HISTOGRAM_LEGEND_ACTION_FILTER_IN, + createFilterLensAction({ + id: ACTION_ID, order, store, services, diff --git a/x-pack/plugins/security_solution/public/actions/filter/lens/filter_in_timeline.ts b/x-pack/plugins/security_solution/public/actions/filter/lens/filter_in_timeline.ts deleted file mode 100644 index 6721972f0bcfb..0000000000000 --- a/x-pack/plugins/security_solution/public/actions/filter/lens/filter_in_timeline.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* - * 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 type { SecurityAppStore } from '../../../common/store'; - -import type { StartServices } from '../../../types'; -import { createHistogramFilterLegendActionFactory } from './helpers'; - -export const TIMELINE_HISTOGRAM_LEGEND_ACTION_FILTER_IN = 'timelineHistogramLegendActionFilterIn'; - -export const createTimelineHistogramFilterInLegendActionFactory = ({ - store, - order, - services, -}: { - store: SecurityAppStore; - order: number; - services: StartServices; -}) => - createHistogramFilterLegendActionFactory({ - id: TIMELINE_HISTOGRAM_LEGEND_ACTION_FILTER_IN, - order, - store, - services, - }); diff --git a/x-pack/plugins/security_solution/public/actions/filter/lens/filter_out.ts b/x-pack/plugins/security_solution/public/actions/filter/lens/filter_out.ts index 4e32a3bee1b1f..2b629ac1be861 100644 --- a/x-pack/plugins/security_solution/public/actions/filter/lens/filter_out.ts +++ b/x-pack/plugins/security_solution/public/actions/filter/lens/filter_out.ts @@ -8,11 +8,11 @@ import type { SecurityAppStore } from '../../../common/store'; import type { StartServices } from '../../../types'; -import { createHistogramFilterLegendActionFactory } from './helpers'; +import { createFilterLensAction } from './create_action'; -export const HISTOGRAM_LEGEND_ACTION_FILTER_OUT = 'histogramLegendActionFilterOut'; +export const ACTION_ID = 'embeddable_filterOut'; -export const createFilterOutHistogramLegendActionFactory = ({ +export const createFilterOutLensAction = ({ store, order, services, @@ -21,8 +21,8 @@ export const createFilterOutHistogramLegendActionFactory = ({ order: number; services: StartServices; }) => - createHistogramFilterLegendActionFactory({ - id: HISTOGRAM_LEGEND_ACTION_FILTER_OUT, + createFilterLensAction({ + id: ACTION_ID, order, store, services, diff --git a/x-pack/plugins/security_solution/public/actions/filter/lens/filter_out_timeline.ts b/x-pack/plugins/security_solution/public/actions/filter/lens/filter_out_timeline.ts deleted file mode 100644 index 1712c94c21b79..0000000000000 --- a/x-pack/plugins/security_solution/public/actions/filter/lens/filter_out_timeline.ts +++ /dev/null @@ -1,30 +0,0 @@ -/* - * 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 type { SecurityAppStore } from '../../../common/store'; - -import type { StartServices } from '../../../types'; -import { createHistogramFilterLegendActionFactory } from './helpers'; - -export const TIMELINE_HISTOGRAM_LEGEND_ACTION_FILTER_OUT = 'timelineHistogramLegendActionFilterOut'; - -export const createTimelineHistogramFilterOutLegendActionFactory = ({ - store, - order, - services, -}: { - store: SecurityAppStore; - order: number; - services: StartServices; -}) => - createHistogramFilterLegendActionFactory({ - id: TIMELINE_HISTOGRAM_LEGEND_ACTION_FILTER_OUT, - order, - store, - services, - negate: true, - }); diff --git a/x-pack/plugins/security_solution/public/actions/register.ts b/x-pack/plugins/security_solution/public/actions/register.ts index 5aa0794ae9c49..46f37f68f48d1 100644 --- a/x-pack/plugins/security_solution/public/actions/register.ts +++ b/x-pack/plugins/security_solution/public/actions/register.ts @@ -13,12 +13,8 @@ import type { StartServices } from '../types'; import { createFilterInCellActionFactory, createFilterInDiscoverCellActionFactory, - createTimelineHistogramFilterInLegendActionFactory, - createFilterInHistogramLegendActionFactory, createFilterOutCellActionFactory, createFilterOutDiscoverCellActionFactory, - createFilterOutHistogramLegendActionFactory, - createTimelineHistogramFilterOutLegendActionFactory, } from './filter'; import { createAddToTimelineLensAction, @@ -41,7 +37,9 @@ import type { SecurityCellActions, } from './types'; import { enhanceActionWithTelemetry } from './telemetry'; -import { registerDiscoverHistogramActions } from './discover_in_timeline/vis_apply_filter'; +import { registerDiscoverHistogramActions } from './register_discover_histogram_actions'; +import { createFilterInLensAction } from './filter/lens/filter_in'; +import { createFilterOutLensAction } from './filter/lens/filter_out'; export const registerUIActions = ( store: SecurityAppStore, @@ -51,45 +49,24 @@ export const registerUIActions = ( registerLensEmbeddableActions(store, services); registerDiscoverCellActions(store, services); registerCellActions(store, history, services); + // TODO: Remove discover histogram actions when timeline esql tab is extracted from discover registerDiscoverHistogramActions(store, history, services); }; const registerLensEmbeddableActions = (store: SecurityAppStore, services: StartServices) => { const { uiActions } = services; + const filterInLegendActions = createFilterInLensAction({ store, order: 2, services }); + uiActions.addTriggerAction(CELL_VALUE_TRIGGER, filterInLegendActions); + + const filterOutLegendActions = createFilterOutLensAction({ store, order: 3, services }); + uiActions.addTriggerAction(CELL_VALUE_TRIGGER, filterOutLegendActions); + const addToTimelineAction = createAddToTimelineLensAction({ store, order: 4 }); uiActions.addTriggerAction(CELL_VALUE_TRIGGER, addToTimelineAction); const copyToClipboardAction = createCopyToClipboardLensAction({ order: 5 }); uiActions.addTriggerAction(CELL_VALUE_TRIGGER, copyToClipboardAction); - - const filterInTimelineLegendActions = createTimelineHistogramFilterInLegendActionFactory({ - store, - order: 0, - services, - }); - uiActions.addTriggerAction(CELL_VALUE_TRIGGER, filterInTimelineLegendActions); - - const filterOutTimelineLegendActions = createTimelineHistogramFilterOutLegendActionFactory({ - store, - order: 1, - services, - }); - uiActions.addTriggerAction(CELL_VALUE_TRIGGER, filterOutTimelineLegendActions); - - const filterInLegendActions = createFilterInHistogramLegendActionFactory({ - store, - order: 2, - services, - }); - uiActions.addTriggerAction(CELL_VALUE_TRIGGER, filterInLegendActions); - - const filterOutLegendActions = createFilterOutHistogramLegendActionFactory({ - store, - order: 3, - services, - }); - uiActions.addTriggerAction(CELL_VALUE_TRIGGER, filterOutLegendActions); }; const registerDiscoverCellActions = (store: SecurityAppStore, services: StartServices) => { diff --git a/x-pack/plugins/security_solution/public/actions/discover_in_timeline/vis_apply_filter.ts b/x-pack/plugins/security_solution/public/actions/register_discover_histogram_actions.ts similarity index 88% rename from x-pack/plugins/security_solution/public/actions/discover_in_timeline/vis_apply_filter.ts rename to x-pack/plugins/security_solution/public/actions/register_discover_histogram_actions.ts index 8c3f9e0214a63..5235cef932e4f 100644 --- a/x-pack/plugins/security_solution/public/actions/discover_in_timeline/vis_apply_filter.ts +++ b/x-pack/plugins/security_solution/public/actions/register_discover_histogram_actions.ts @@ -7,9 +7,9 @@ import { createFilterAction } from '@kbn/unified-search-plugin/public'; import type { History } from 'history'; -import type { SecurityAppStore } from '../../common/store'; -import type { StartServices } from '../../types'; -import { EsqlInTimelineTrigger, EsqlInTimelineAction } from '../constants'; +import type { SecurityAppStore } from '../common/store'; +import type { StartServices } from '../types'; +import { EsqlInTimelineTrigger, EsqlInTimelineAction } from './constants'; const createDiscoverHistogramCustomFilterAction = ( store: SecurityAppStore, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx index df564277122ce..943bf4dab0d80 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx @@ -24,7 +24,7 @@ import { inputsSelectors } from '../../store'; import { useDeepEqualSelector } from '../../hooks/use_selector'; import { ModalInspectQuery } from '../inspect/modal'; import { InputsModelId } from '../../store/inputs/constants'; -import { getRequestsAndResponses, showLegendActionsByActionId } from './utils'; +import { getRequestsAndResponses } from './utils'; import { SourcererScopeName } from '../../store/sourcerer/model'; import { VisualizationActions } from './actions'; @@ -218,11 +218,6 @@ const LensEmbeddableComponent: React.FC = ({ [attributes?.state?.adHocDataViews] ); - const shouldShowLegendAction = useCallback( - (actionId: string) => showLegendActionsByActionId({ actionId, scopeId }), - [scopeId] - ); - if (!searchSessionId) { return null; } @@ -286,7 +281,6 @@ const LensEmbeddableComponent: React.FC = ({ showInspector={false} syncTooltips={false} syncCursor={false} - shouldShowLegendAction={shouldShowLegendAction} /> )} diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/utils.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/utils.ts index 678cc16c915ef..ef3aa936d293d 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/utils.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/utils.ts @@ -8,10 +8,6 @@ import type { Filter } from '@kbn/es-query'; import { SecurityPageName } from '../../../../common/constants'; -import { HISTOGRAM_LEGEND_ACTION_FILTER_IN } from '../../../actions/filter/lens/filter_in'; -import { TIMELINE_HISTOGRAM_LEGEND_ACTION_FILTER_IN } from '../../../actions/filter/lens/filter_in_timeline'; -import { HISTOGRAM_LEGEND_ACTION_FILTER_OUT } from '../../../actions/filter/lens/filter_out'; -import { TIMELINE_HISTOGRAM_LEGEND_ACTION_FILTER_OUT } from '../../../actions/filter/lens/filter_out_timeline'; import type { Request } from './types'; export const VISUALIZATION_ACTIONS_BUTTON_CLASS = 'histogram-actions-trigger'; @@ -199,28 +195,3 @@ export const parseVisualizationData = (data: string[]): T[] => return acc; } }, [] as T[]); - -export const showLegendActionsByActionId = ({ - actionId, - scopeId, -}: { - actionId: string; - scopeId: string; -}) => { - switch (actionId) { - /** We no longer use Lens' default filter in / out actions - * as extra custom actions needed after filters applied. - * For example: hide the topN panel after filters applied */ - case FILTER_IN_LEGEND_ACTION: - case FILTER_OUT_LEGEND_ACTION: - return false; - case HISTOGRAM_LEGEND_ACTION_FILTER_IN: - case HISTOGRAM_LEGEND_ACTION_FILTER_OUT: - return scopeId !== 'timeline'; - case TIMELINE_HISTOGRAM_LEGEND_ACTION_FILTER_IN: - case TIMELINE_HISTOGRAM_LEGEND_ACTION_FILTER_OUT: - return scopeId === 'timeline'; - default: - return true; - } -}; diff --git a/x-pack/test/security_solution_cypress/cypress/screens/alerts.ts b/x-pack/test/security_solution_cypress/cypress/screens/alerts.ts index f616b63e45e19..0eaec7ce0b471 100644 --- a/x-pack/test/security_solution_cypress/cypress/screens/alerts.ts +++ b/x-pack/test/security_solution_cypress/cypress/screens/alerts.ts @@ -140,10 +140,8 @@ export const SELECT_HISTOGRAM = '[data-test-subj="chart-select-trend"]'; export const LEGEND_ACTIONS = { ADD_TO_TIMELINE: (ruleName: string) => `[data-test-subj="legend-${ruleName}-embeddable_addToTimeline"]`, - FILTER_FOR: (ruleName: string) => - `[data-test-subj="legend-${ruleName}-histogramLegendActionFilterIn"]`, - FILTER_OUT: (ruleName: string) => - `[data-test-subj="legend-${ruleName}-histogramLegendActionFilterOut"]`, + FILTER_FOR: (ruleName: string) => `[data-test-subj="legend-${ruleName}-embeddable_filterIn"]`, + FILTER_OUT: (ruleName: string) => `[data-test-subj="legend-${ruleName}-embeddable_filterOut"]`, COPY: (ruleName: string) => `[data-test-subj="legend-${ruleName}-embeddable_copyToClipboard"]`, };