[8.11] [SecuritySolution] Fix topN legend actions - filter in / out i…

…n timeline (#170127) (#170269)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[SecuritySolution] Fix topN legend actions - filter in / out in
timeline (#170127)](#170127)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Angela
Chuang","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-10-31T17:30:08Z","message":"[SecuritySolution]
Fix topN legend actions - filter in / out in timeline (#170127)\n\n##
Summary\r\n\r\nhttps://github.com//issues/168199\r\nhttps://github.com//issues/169656\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/6295984/ff5cee55-6da5-4636-85f5-a697a302f8b5\r\n\r\n---------\r\n\r\nCo-authored-by:
Michael Olorunnisola
<[email protected]>\r\nCo-authored-by: kibanamachine
<[email protected]>","sha":"8103a445855f72dd1755a4fd4364e4573ec6a194","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Feature:ExpressionLanguage","Team:Threat
Hunting","Team: SecuritySolution","Team:Threat
Hunting:Explore","Feature:Lens
Charts","v8.11.0","v8.12.0","v8.11.1"],"number":170127,"url":"https://github.com/elastic/kibana/pull/170127","mergeCommit":{"message":"[SecuritySolution]
Fix topN legend actions - filter in / out in timeline (#170127)\n\n##
Summary\r\n\r\nhttps://github.com//issues/168199\r\nhttps://github.com//issues/169656\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/6295984/ff5cee55-6da5-4636-85f5-a697a302f8b5\r\n\r\n---------\r\n\r\nCo-authored-by:
Michael Olorunnisola
<[email protected]>\r\nCo-authored-by: kibanamachine
<[email protected]>","sha":"8103a445855f72dd1755a4fd4364e4573ec6a194"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/170127","number":170127,"mergeCommit":{"message":"[SecuritySolution]
Fix topN legend actions - filter in / out in timeline (#170127)\n\n##
Summary\r\n\r\nhttps://github.com//issues/168199\r\nhttps://github.com//issues/169656\r\n\r\n\r\nhttps://github.com/elastic/kibana/assets/6295984/ff5cee55-6da5-4636-85f5-a697a302f8b5\r\n\r\n---------\r\n\r\nCo-authored-by:
Michael Olorunnisola
<[email protected]>\r\nCo-authored-by: kibanamachine
<[email protected]>","sha":"8103a445855f72dd1755a4fd4364e4573ec6a194"}}]}]
BACKPORT-->

Co-authored-by: Angela Chuang <[email protected]>
Co-authored-by: Michael Olorunnisola <[email protected]>

src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.test.ts

@@ -10,6 +10,7 @@ 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 () => {
@@ -30,6 +31,7 @@ describe('layeredXyVis', () => {
         syncTooltips: false,
         syncCursor: true,
         canNavigateToLens: false,
+        shouldShowLegendAction: shouldShowLegendActionDefault,
       },
     });
   });

src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis_fn.ts

@@ -18,6 +18,7 @@ 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');
@@ -66,6 +67,7 @@ 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,
     },
   };
 };

src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.test.ts

@@ -10,6 +10,7 @@ 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 () => {
@@ -42,6 +43,7 @@ describe('xyVis', () => {
         syncColors: false,
         syncTooltips: false,
         syncCursor: true,
+        shouldShowLegendAction: shouldShowLegendActionDefault,
       },
     });
   });
@@ -352,6 +354,7 @@ describe('xyVis', () => {
         syncColors: false,
         syncTooltips: false,
         syncCursor: true,
+        shouldShowLegendAction: shouldShowLegendActionDefault,
       },
     });
   });
@@ -401,6 +404,7 @@ describe('xyVis', () => {
         syncTooltips: false,
         syncCursor: true,
         overrides,
+        shouldShowLegendAction: shouldShowLegendActionDefault,
       },
     });
   });

src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts

@@ -30,6 +30,7 @@ import {
   validateAxes,
 } from './validate';
 import { logDatatable } from '../utils';
+import { shouldShowLegendActionDefault } from '../helpers/visualization';
 
 const createDataLayer = (args: XYArgs, table: Datatable): DataLayerConfigResult => {
   const accessors = getAccessors<string | ExpressionValueVisDimension, XYArgs>(args, table);
@@ -139,6 +140,7 @@ 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,
     },
   };
 };

src/plugins/chart_expressions/expression_xy/common/helpers/visualization.ts

@@ -19,3 +19,5 @@ export function isTimeChart(layers: CommonXYDataLayerConfigResult[]) {
       (!l.xScaleType || l.xScaleType === XScaleTypes.TIME)
   );
 }
+
+export const shouldShowLegendActionDefault = () => true;

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

@@ -203,7 +203,8 @@ describe('getLegendAction', function () {
         formattedColumns: {},
       },
     },
-    {}
+    {},
+    () => true
   );
   let wrapper: ReactWrapper<LegendActionProps>;
 

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

@@ -28,6 +28,7 @@ export const getLegendAction = (
   fieldFormats: LayersFieldFormats,
   formattedDatatables: DatatablesWithFormatInfo,
   titles: LayersAccessorsTitles,
+  shouldShowLegendAction?: (actionId: string) => boolean,
   singleTable?: boolean
 ): LegendAction =>
   React.memo(({ series: [xySeries] }) => {
@@ -109,6 +110,7 @@ export const getLegendAction = (
         }
         onFilter={filterHandler}
         legendCellValueActions={legendCellValueActions}
+        shouldShowLegendAction={shouldShowLegendAction}
       />
     );
   });

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

@@ -6,11 +6,18 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiContextMenuPanelDescriptor, EuiIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import {
+  EuiContextMenuPanelDescriptor,
+  EuiIcon,
+  EuiPopover,
+  EuiContextMenu,
+  EuiContextMenuPanelItemDescriptor,
+} from '@elastic/eui';
 import { useLegendAction } from '@elastic/charts';
 import type { CellValueAction } from '../types';
+import { shouldShowLegendActionDefault } from '../../common/helpers/visualization';
 
 export type LegendCellValueActions = Array<
   Omit<CellValueAction, 'execute'> & { execute: () => void }
@@ -29,57 +36,70 @@ export interface LegendActionPopoverProps {
    * Compatible actions to be added to the popover actions
    */
   legendCellValueActions?: LegendCellValueActions;
+  shouldShowLegendAction?: (actionId: string) => boolean;
 }
 
 export const LegendActionPopover: React.FunctionComponent<LegendActionPopoverProps> = ({
   label,
   onFilter,
   legendCellValueActions = [],
+  shouldShowLegendAction = shouldShowLegendActionDefault,
 }) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [ref, onClose] = useLegendAction<HTMLDivElement>();
 
-  const legendCellValueActionPanelItems = legendCellValueActions.map((action) => ({
-    name: action.displayName,
-    'data-test-subj': `legend-${label}-${action.id}`,
-    icon: <EuiIcon type={action.iconType} size="m" />,
-    onClick: () => {
-      action.execute();
-      setPopoverOpen(false);
-    },
-  }));
-
-  const panels: EuiContextMenuPanelDescriptor[] = [
-    {
-      id: 'main',
-      title: label,
-      items: [
-        {
-          name: i18n.translate('expressionXY.legend.filterForValueButtonAriaLabel', {
-            defaultMessage: 'Filter for',
-          }),
-          'data-test-subj': `legend-${label}-filterIn`,
-          icon: <EuiIcon type="plusInCircle" size="m" />,
-          onClick: () => {
-            setPopoverOpen(false);
-            onFilter();
-          },
+  const panels: EuiContextMenuPanelDescriptor[] = useMemo(() => {
+    const defaultActions = [
+      {
+        id: 'filterIn',
+        displayName: i18n.translate('expressionXY.legend.filterForValueButtonAriaLabel', {
+          defaultMessage: 'Filter for',
+        }),
+        'data-test-subj': `legend-${label}-filterIn`,
+        iconType: 'plusInCircle',
+        execute: () => {
+          setPopoverOpen(false);
+          onFilter();
         },
-        {
-          name: i18n.translate('expressionXY.legend.filterOutValueButtonAriaLabel', {
-            defaultMessage: 'Filter out',
-          }),
-          'data-test-subj': `legend-${label}-filterOut`,
-          icon: <EuiIcon type="minusInCircle" size="m" />,
+      },
+      {
+        id: 'filterOut',
+        displayName: i18n.translate('expressionXY.legend.filterOutValueButtonAriaLabel', {
+          defaultMessage: 'Filter out',
+        }),
+        'data-test-subj': `legend-${label}-filterOut`,
+        iconType: 'minusInCircle',
+        execute: () => {
+          setPopoverOpen(false);
+          onFilter({ negate: true });
+        },
+      },
+    ];
+
+    const legendCellValueActionPanelItems = [...defaultActions, ...legendCellValueActions].reduce<
+      EuiContextMenuPanelItemDescriptor[]
+    >((acc, action) => {
+      if (shouldShowLegendAction(action.id)) {
+        acc.push({
+          name: action.displayName,
+          'data-test-subj': `legend-${label}-${action.id}`,
+          icon: <EuiIcon type={action.iconType} size="m" />,
           onClick: () => {
+            action.execute();
             setPopoverOpen(false);
-            onFilter({ negate: true });
           },
-        },
-        ...legendCellValueActionPanelItems,
-      ],
-    },
-  ];
+        });
+      }
+      return acc;
+    }, []);
+    return [
+      {
+        id: 'main',
+        title: label,
+        items: legendCellValueActionPanelItems,
+      },
+    ];
+  }, [label, legendCellValueActions, onFilter, shouldShowLegendAction]);
 
   const Button = (
     <div

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

@@ -144,6 +144,7 @@ export type XYChartRenderProps = Omit<XYChartProps, 'canNavigateToLens'> & {
   renderComplete: () => void;
   uiState?: PersistedState;
   timeFormat: string;
+  shouldShowLegendAction?: (actionId: string) => boolean;
 };
 
 function nonNullable<T>(v: T): v is NonNullable<T> {
@@ -206,6 +207,7 @@ export function XYChart({
   uiState,
   timeFormat,
   overrides,
+  shouldShowLegendAction,
 }: XYChartRenderProps) {
   const {
     legend,
@@ -838,6 +840,7 @@ export function XYChart({
                     fieldFormats,
                     formattedDatatables,
                     titles,
+                    shouldShowLegendAction,
                     singleTable
                   )
                 : undefined

src/plugins/chart_expressions/expression_xy/public/expression_renderers/xy_chart_renderer.tsx

@@ -277,6 +277,7 @@ export const getXyChartRenderer = ({
               syncCursor={config.syncCursor}
               uiState={handlers.uiState as PersistedState}
               renderComplete={renderComplete}
+              shouldShowLegendAction={handlers.shouldShowLegendAction}
             />
           </div>
         </I18nProvider>

src/plugins/expressions/common/execution/types.ts

@@ -84,6 +84,8 @@ export interface ExecutionContext<
    * Logs datatable.
    */
   logDatatable?(name: string, datatable: Datatable): void;
+
+  shouldShowLegendAction?: (actionId: string) => boolean;
 }
 
 /**

src/plugins/expressions/common/expression_renderers/types.ts

@@ -105,4 +105,5 @@ export interface IInterpreterRenderHandlers {
   uiState?: unknown;
 
   getExecutionContext(): KibanaExecutionContext | undefined;
+  shouldShowLegendAction?: (actionId: string) => boolean;
 }

src/plugins/expressions/public/loader.ts

@@ -63,6 +63,7 @@ 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$;

src/plugins/expressions/public/react_expression_renderer/react_expression_renderer.tsx

@@ -24,6 +24,7 @@ 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<ReactExpressionRendererProps>;

src/plugins/expressions/public/render.ts

@@ -36,6 +36,7 @@ export interface ExpressionRenderHandlerParams {
   hasCompatibleActions?: (event: ExpressionRendererEvent) => Promise<boolean>;
   getCompatibleCellValueActions?: (data: object[]) => Promise<unknown[]>;
   executionContext?: KibanaExecutionContext;
+  shouldShowLegendAction?: (actionId: string) => boolean;
 }
 
 type UpdateValue = IInterpreterRenderUpdateParams<IExpressionLoaderParams>;
@@ -66,6 +67,7 @@ export class ExpressionRenderHandler {
       hasCompatibleActions = async () => false,
       getCompatibleCellValueActions = async () => [],
       executionContext,
+      shouldShowLegendAction,
     }: ExpressionRenderHandlerParams = {}
   ) {
     this.element = element;
@@ -118,6 +120,9 @@ export class ExpressionRenderHandler {
       },
       hasCompatibleActions,
       getCompatibleCellValueActions,
+      shouldShowLegendAction: (actionId: string) => {
+        return shouldShowLegendAction?.(actionId) ?? true;
+      },
     };
   }
 

src/plugins/expressions/public/types/index.ts

@@ -67,6 +67,7 @@ export interface IExpressionLoaderParams {
    * By default, it equals 1000.
    */
   throttle?: number;
+  shouldShowLegendAction?: (actionId: string) => boolean;
 }
 
 export interface ExpressionRenderError extends Error {

x-pack/plugins/lens/public/embeddable/embeddable.tsx

@@ -176,6 +176,7 @@ interface LensBaseEmbeddableInput extends EmbeddableInput {
   onTableRowClick?: (
     data: Simplify<LensTableRowContextMenuEvent['data'] & PreventableEvent>
   ) => void;
+  shouldShowLegendAction?: (actionId: string) => boolean;
 }
 
 export type LensByValueInput = {
@@ -1103,6 +1104,7 @@ export class Embeddable
               }}
               noPadding={this.visDisplayOptions.noPadding}
               docLinks={this.deps.coreStart.docLinks}
+              shouldShowLegendAction={input.shouldShowLegendAction}
             />
           </KibanaThemeProvider>
           <MessagesBadge

x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx

@@ -47,6 +47,7 @@ export interface ExpressionWrapperProps {
   lensInspector: LensInspector;
   noPadding?: boolean;
   docLinks: CoreStart['docLinks'];
+  shouldShowLegendAction?: (actionId: string) => boolean;
 }
 
 export function ExpressionWrapper({
@@ -73,6 +74,7 @@ export function ExpressionWrapper({
   lensInspector,
   noPadding,
   docLinks,
+  shouldShowLegendAction,
 }: ExpressionWrapperProps) {
   if (!expression) return null;
   return (
@@ -104,6 +106,7 @@ export function ExpressionWrapper({
           onEvent={handleEvent}
           hasCompatibleActions={hasCompatibleActions}
           getCompatibleCellValueActions={getCompatibleCellValueActions}
+          shouldShowLegendAction={shouldShowLegendAction}
         />
       </div>
     </I18nProvider>

x-pack/plugins/security_solution/public/actions/filter/index.ts

@@ -9,3 +9,7 @@ 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';