[SECURITY] Bug fix for topN on draggables

x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx

@@ -69,6 +69,7 @@ interface AlertsHistogramPanelProps {
  showLinkToAlerts?: boolean;
  showTotalAlertsCount?: boolean;
  stackByOptions?: AlertsHistogramOption[];
+ timelineId?: string;
  title?: string;
  to: number;
  updateDateRange: UpdateDateRange;
@@ -98,8 +99,9 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
  showLinkToAlerts = false,
  showTotalAlertsCount = false,
  stackByOptions,
- to,
+ timelineId,
  title = i18n.HISTOGRAM_HEADER,
+ to,
  updateDateRange,
  }) => {
  // create a unique, but stable (across re-renders) query id
@@ -163,11 +165,12 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
  `draggable-legend-item-${uuid.v4()}-${selectedStackByOption.value}-${bucket.key}`
  ),
  field: selectedStackByOption.value,
+ timelineId,
  value: bucket.key,
  }))
  : NO_LEGEND_DATA,
  // eslint-disable-next-line react-hooks/exhaustive-deps
- [alertsData, selectedStackByOption.value]
+ [alertsData, selectedStackByOption.value, timelineId]
  );
 
  useEffect(() => {

x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx

@@ -117,6 +117,7 @@ interface BarChartComponentProps {
  barChart: ChartSeriesData[] | null | undefined;
  configs?: ChartSeriesConfigs | undefined;
  stackByField?: string;
+ timelineId?: string;
 }
 
 const NO_LEGEND_DATA: LegendItem[] = [];
@@ -125,6 +126,7 @@ export const BarChartComponent: React.FC<BarChartComponentProps> = ({
  barChart,
  configs,
  stackByField,
+ timelineId,
 }) => {
  const { ref: measureRef, width, height } = useThrottledResizeObserver();
  const legendItems: LegendItem[] = useMemo(
@@ -135,11 +137,12 @@ export const BarChartComponent: React.FC<BarChartComponentProps> = ({
  dataProviderId: escapeDataProviderId(
  `draggable-legend-item-${uuid.v4()}-${stackByField}-${d.key}`
  ),
+ timelineId,
  field: stackByField,
  value: d.key,
  }))
  : NO_LEGEND_DATA,
- [barChart, stackByField]
+ [barChart, stackByField, timelineId]
  );
 
  const customHeight = get('customHeight', configs);

x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx

@@ -21,13 +21,14 @@ export interface LegendItem {
  color?: string;
  dataProviderId: string;
  field: string;
+ timelineId?: string;
  value: string;
 }
 
 const DraggableLegendItemComponent: React.FC<{
  legendItem: LegendItem;
 }> = ({ legendItem }) => {
- const { color, dataProviderId, field, value } = legendItem;
+ const { color, dataProviderId, field, timelineId, value } = legendItem;
 
  return (
  <EuiText size="xs">
@@ -44,6 +45,7 @@ const DraggableLegendItemComponent: React.FC<{
  data-test-subj={`legend-item-${dataProviderId}`}
  field={field}
  id={dataProviderId}
+ timelineId={timelineId}
  value={value}
  />
  ) : (

x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx

@@ -18,11 +18,10 @@ import { IdToDataProvider } from '../../store/drag_and_drop/model';
 import { State } from '../../store/types';
 import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
 import { reArrangeProviders } from '../../../timelines/components/timeline/data_providers/helpers';
-import { ACTIVE_TIMELINE_REDUX_ID } from '../top_n';
 import { ADDED_TO_TIMELINE_MESSAGE } from '../../hooks/translations';
 import { useAddToTimelineSensor } from '../../hooks/use_add_to_timeline';
 import { displaySuccessToast, useStateToaster } from '../toasters';
-
+import { TimelineId } from '../../../../common/types/timeline';
 import {
  addFieldToTimelineColumns,
  addProviderToTimeline,
@@ -35,7 +34,7 @@ import {
  userIsReArrangingProviders,
 } from './helpers';
 
-// @ts-ignore
+// @ts-expect-error
 window['__react-beautiful-dnd-disable-dev-warnings'] = true;
 
 interface Props {
@@ -67,7 +66,7 @@ const onDragEndHandler = ({
  destination: result.destination,
  dispatch,
  source: result.source,
- timelineId: ACTIVE_TIMELINE_REDUX_ID,
+ timelineId: TimelineId.active,
  });
  } else if (providerWasDroppedOnTimeline(result)) {
  addProviderToTimeline({
@@ -76,7 +75,7 @@ const onDragEndHandler = ({
  dispatch,
  onAddedToTimeline,
  result,
- timelineId: ACTIVE_TIMELINE_REDUX_ID,
+ timelineId: TimelineId.active,
  });
  } else if (fieldWasDroppedOnTimelineColumns(result)) {
  addFieldToTimelineColumns({
@@ -130,7 +129,6 @@ export const DragDropContextWrapperComponent = React.memo<Props & PropsFromRedux
  [dataProviders, activeTimelineDataProviders, browserFields]
  );
  return (
- // @ts-ignore
  <DragDropContext onDragEnd={onDragEnd} onBeforeCapture={onBeforeCapture} sensors={sensors}>
  {children}
  </DragDropContext>
@@ -152,7 +150,7 @@ const emptyActiveTimelineDataProviders: DataProvider[] = []; // stable reference
 
 const mapStateToProps = (state: State) => {
  const activeTimelineDataProviders =
- timelineSelectors.getTimelineByIdSelector()(state, ACTIVE_TIMELINE_REDUX_ID)?.dataProviders ??
+ timelineSelectors.getTimelineByIdSelector()(state, TimelineId.active)?.dataProviders ??
  emptyActiveTimelineDataProviders;
  const dataProviders = dragAndDropSelectors.dataProvidersSelector(state) ?? emptyDataProviders;
 

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import {
  Draggable,
  DraggableProvided,
@@ -22,7 +22,7 @@ import { DataProvider } from '../../../timelines/components/timeline/data_provid
 import { TruncatableText } from '../truncatable_text';
 import { WithHoverActions } from '../with_hover_actions';
 
-import { DraggableWrapperHoverContent } from './draggable_wrapper_hover_content';
+import { DraggableWrapperHoverContent, useGetTimelineId } from './draggable_wrapper_hover_content';
 import { getDraggableId, getDroppableId } from './helpers';
 import { ProviderContainer } from './provider_container';
 
@@ -76,6 +76,7 @@ interface Props {
  dataProvider: DataProvider;
  inline?: boolean;
  render: RenderFunctionProp;
+ timelineId?: string;
  truncate?: boolean;
  onFilterAdded?: () => void;
 }
@@ -100,16 +101,31 @@ export const getStyle = (
 };
 
 export const DraggableWrapper = React.memo<Props>(
- ({ dataProvider, onFilterAdded, render, truncate }) => {
+ ({ dataProvider, onFilterAdded, render, timelineId, truncate }) => {
+ const draggableRef = useRef<HTMLDivElement | null>(null);
+ const [closePopOverTrigger, setClosePopOverTrigger] = useState(false);
  const [showTopN, setShowTopN] = useState<boolean>(false);
- const toggleTopN = useCallback(() => {
- setShowTopN(!showTopN);
- }, [setShowTopN, showTopN]);
-
+ const [goGetTimelineId, setGoGetTimelineId] = useState(false);
+ const timelineIdFind = useGetTimelineId(draggableRef, goGetTimelineId);
  const [providerRegistered, setProviderRegistered] = useState(false);
 
  const dispatch = useDispatch();
 
+ const handleClosePopOverTrigger = useCallback(
+ () => setClosePopOverTrigger((prevClosePopOverTrigger) => !prevClosePopOverTrigger),
+ []
+ );
+
+ const toggleTopN = useCallback(() => {
+ setShowTopN((prevShowTopN) => {
+ const newShowTopN = !prevShowTopN;
+ if (newShowTopN === false) {
+ handleClosePopOverTrigger();
+ }
+ return newShowTopN;
+ });
+ }, [handleClosePopOverTrigger]);
+
  const registerProvider = useCallback(() => {
  if (!providerRegistered) {
  dispatch(dragAndDropActions.registerProvider({ provider: dataProvider }));
@@ -126,17 +142,19 @@ export const DraggableWrapper = React.memo<Props>(
  () => () => {
  unRegisterProvider();
  },
- // eslint-disable-next-line react-hooks/exhaustive-deps
- []
+ [unRegisterProvider]
  );
 
  const hoverContent = useMemo(
  () => (
  <DraggableWrapperHoverContent
+ closePopOver={handleClosePopOverTrigger}
  draggableId={getDraggableId(dataProvider.id)}
  field={dataProvider.queryMatch.field}
+ goGetTimelineId={setGoGetTimelineId}
  onFilterAdded={onFilterAdded}
  showTopN={showTopN}
+ timelineId={timelineId ?? timelineIdFind}
  toggleTopN={toggleTopN}
  value={
  typeof dataProvider.queryMatch.value !== 'number'
@@ -145,7 +163,15 @@ export const DraggableWrapper = React.memo<Props>(
  }
  />
  ),
- [dataProvider, onFilterAdded, showTopN, toggleTopN]
+ [
+ dataProvider,
+ handleClosePopOverTrigger,
+ onFilterAdded,
+ showTopN,
+ timelineId,
+ timelineIdFind,
+ toggleTopN,
+ ]
  );
 
  const renderContent = useCallback(
@@ -184,7 +210,10 @@ export const DraggableWrapper = React.memo<Props>(
  <ProviderContainer
  {...provided.draggableProps}
  {...provided.dragHandleProps}
- ref={provided.innerRef}
+ ref={(e: HTMLDivElement) => {
+ provided.innerRef(e);
+ draggableRef.current = e;
+ }}
  data-test-subj="providerContainer"
  isDragging={snapshot.isDragging}
  registerProvider={registerProvider}
@@ -214,7 +243,12 @@ export const DraggableWrapper = React.memo<Props>(
  );
 
  return (
- <WithHoverActions alwaysShow={showTopN} hoverContent={hoverContent} render={renderContent} />
+ <WithHoverActions
+ alwaysShow={showTopN}
+ closePopOverTrigger={closePopOverTrigger}
+ hoverContent={hoverContent}
+ render={renderContent}
+ />
  );
  },
  (prevProps, nextProps) =>

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx

@@ -52,6 +52,7 @@ jest.mock('../../../timelines/components/manage_timeline', () => {
  return {
  ...original,
  useManageTimeline: () => ({
+ getManageTimelineById: jest.fn().mockReturnValue({ indexToAdd: [] }),
  getTimelineFilterManager: mockGetTimelineFilterManager,
  isManagedTimeline: jest.fn().mockReturnValue(false),
  }),
@@ -63,8 +64,10 @@ const timelineId = TimelineId.active;
 const field = 'process.name';
 const value = 'nice';
 const toggleTopN = jest.fn();
+const goGetTimelineId = jest.fn();
 const defaultProps = {
  field,
+ goGetTimelineId,
  showTopN: false,
  timelineId,
  toggleTopN,
@@ -130,6 +133,18 @@ describe('DraggableWrapperHoverContent', () => {
  wrapper.find(`[data-test-subj="filter-${hoverAction}-value"]`).first().exists()
  ).toBe(false);
  });
+
+ test(`it should call goGetTimelineId when user is over the 'Filter ${hoverAction} value' button`, () => {
+ const wrapper = mount(
+ <TestProviders>
+ <DraggableWrapperHoverContent {...{ ...defaultProps, timelineId: undefined }} />
+ </TestProviders>
+ );
+ const button = wrapper.find(`[data-test-subj="filter-${hoverAction}-value"]`).first();
+ button.simulate('mouseenter');
+ expect(goGetTimelineId).toHaveBeenCalledWith(true);
+ });
+
  describe('when run in the context of a timeline', () => {
  let wrapper: ReactWrapper;
  let onFilterAdded: () => void;
@@ -151,6 +166,7 @@ describe('DraggableWrapperHoverContent', () => {
  </TestProviders>
  );
  });
+
  test('when clicked, it adds a filter to the timeline when running in the context of a timeline', () => {
  wrapper.find(`[data-test-subj="filter-${hoverAction}-value"]`).first().simulate('click');
  wrapper.update();
@@ -459,6 +475,24 @@ describe('DraggableWrapperHoverContent', () => {
  expect(wrapper.find('[data-test-subj="show-top-field"]').first().exists()).toBe(false);
  });
 
+ test(`it should invokes goGetTimelineId when user is over the 'Show top field' button`, () => {
+ const whitelistedField = 'signal.rule.name';
+ const wrapper = mount(
+ <TestProviders>
+ <DraggableWrapperHoverContent
+ {...{
+ ...defaultProps,
+ field: whitelistedField,
+ timelineId: undefined,
+ }}
+ />
+ </TestProviders>
+ );
+ const button = wrapper.find(`[data-test-subj="show-top-field"]`).first();
+ button.simulate('mouseenter');
+ expect(goGetTimelineId).toHaveBeenCalledWith(true);
+ });
+
  test(`invokes the toggleTopN function when the 'Show top field' button is clicked`, async () => {
  const whitelistedField = 'signal.rule.name';
  const wrapper = mount(