[SECURITY] Bug fix for topN on draggables

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';
 
@@ -101,11 +101,13 @@ export const getStyle = (
 
 export const DraggableWrapper = React.memo<Props>(
  ({ dataProvider, onFilterAdded, render, truncate }) => {
+ const draggableRef = useRef<HTMLDivElement | null>(null);
  const [showTopN, setShowTopN] = useState<boolean>(false);
  const toggleTopN = useCallback(() => {
  setShowTopN(!showTopN);
  }, [setShowTopN, showTopN]);
-
+ const [goGetTimelineId, setGoGetTimelineId] = useState(false);
+ const timelineId = useGetTimelineId(draggableRef, goGetTimelineId);
  const [providerRegistered, setProviderRegistered] = useState(false);
 
  const dispatch = useDispatch();
@@ -135,8 +137,10 @@ export const DraggableWrapper = React.memo<Props>(
  <DraggableWrapperHoverContent
  draggableId={getDraggableId(dataProvider.id)}
  field={dataProvider.queryMatch.field}
+ goGetTimelineId={setGoGetTimelineId}
  onFilterAdded={onFilterAdded}
  showTopN={showTopN}
+ timelineId={timelineId}
  toggleTopN={toggleTopN}
  value={
  typeof dataProvider.queryMatch.value !== 'number'
@@ -145,7 +149,7 @@ export const DraggableWrapper = React.memo<Props>(
  }
  />
  ),
- [dataProvider, onFilterAdded, showTopN, toggleTopN]
+ [dataProvider, onFilterAdded, showTopN, timelineId, toggleTopN]
  );
 
  const renderContent = useCallback(
@@ -184,7 +188,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}

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 }} />
+ </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();
@@ -347,7 +363,7 @@ describe('DraggableWrapperHoverContent', () => {
  const aggregatableStringField = 'cloud.account.id';
  const draggableId = 'draggable.id';
 
- [false, true].forEach((showTopN) => {
+ [true].forEach((showTopN) => {
  [value, null].forEach((maybeValue) => {
  [draggableId, undefined].forEach((maybeDraggableId) => {
  const shouldRender = !showTopN && maybeValue != null && maybeDraggableId != null;
@@ -459,6 +475,23 @@ 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,
+ }}
+ />
+ </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(

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

@@ -5,7 +5,7 @@
  */
 
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import { DraggableId } from 'react-beautiful-dnd';
 
 import { getAllFieldsByName, useWithSource } from '../../containers/source';
@@ -19,20 +19,23 @@ import { allowTopN } from './helpers';
 import * as i18n from './translations';
 import { useManageTimeline } from '../../../timelines/components/manage_timeline';
 import { TimelineId } from '../../../../common/types/timeline';
+import { SELECTOR_TIMELINE_BODY_CLASS_NAME } from '../../../timelines/components/timeline/styles';
 
 interface Props {
  draggableId?: DraggableId;
  field: string;
+ goGetTimelineId?: (args: boolean) => void;
  onFilterAdded?: () => void;
  showTopN: boolean;
- timelineId?: string;
+ timelineId?: string | null;
  toggleTopN: () => void;
  value?: string[] | string | null;
 }
 
 const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  draggableId,
  field,
+ goGetTimelineId,
  onFilterAdded,
  showTopN,
  timelineId,
@@ -48,11 +51,10 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
 
  const filterManager = useMemo(
  () =>
- timelineId === TimelineId.active ||
- (draggableId != null && draggableId?.includes(TimelineId.active))
+ timelineId === TimelineId.active
  ? getTimelineFilterManager(TimelineId.active)
  : filterManagerBackup,
- [draggableId, timelineId, getTimelineFilterManager, filterManagerBackup]
+ [timelineId, getTimelineFilterManager, filterManagerBackup]
  );
 
  const filterForValue = useCallback(() => {
@@ -85,6 +87,12 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [field, value, filterManager, onFilterAdded]);
 
+ const handleGoGetTimelineId = useCallback(() => {
+ if (goGetTimelineId != null) {
+ goGetTimelineId(true);
+ }
+ }, [goGetTimelineId]);
+
  const { browserFields } = useWithSource();
 
  return (
@@ -97,6 +105,7 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  data-test-subj="filter-for-value"
  iconType="magnifyWithPlus"
  onClick={filterForValue}
+ onMouseEnter={handleGoGetTimelineId}
  />
  </EuiToolTip>
  )}
@@ -109,6 +118,7 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  data-test-subj="filter-out-value"
  iconType="magnifyWithMinus"
  onClick={filterOutValue}
+ onMouseEnter={handleGoGetTimelineId}
  />
  </EuiToolTip>
  )}
@@ -139,6 +149,7 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  data-test-subj="show-top-field"
  iconType="visBarVertical"
  onClick={toggleTopN}
+ onMouseEnter={handleGoGetTimelineId}
  />
  </EuiToolTip>
  )}
@@ -148,6 +159,7 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
  browserFields={browserFields}
  field={field}
  onFilterAdded={onFilterAdded}
+ timelineId={timelineId ?? null}
  toggleTopN={toggleTopN}
  value={value}
  />
@@ -172,3 +184,30 @@ const DraggableWrapperHoverContentComponent: React.FC<Props> = ({
 DraggableWrapperHoverContentComponent.displayName = 'DraggableWrapperHoverContentComponent';
 
 export const DraggableWrapperHoverContent = React.memo(DraggableWrapperHoverContentComponent);
+
+export const useGetTimelineId = function (
+ elem: React.MutableRefObject<Element | null>,
+ getTimelineId: boolean = false
+) {
+ const [timelineId, setTimelineId] = useState<string | null>(null);
+
+ useEffect(() => {
+ let startElem: Element | (Node & ParentNode) | null = elem.current;
+ if (startElem != null && getTimelineId) {
+ for (; startElem && startElem !== document; startElem = startElem.parentNode) {
+ const myElem: Element = startElem as Element;
+ if (
+ myElem != null &&
+ myElem.classList != null &&
+ myElem.classList.contains(SELECTOR_TIMELINE_BODY_CLASS_NAME) &&
+ myElem.hasAttribute('data-timeline-id')
+ ) {
+ setTimelineId(myElem.getAttribute('data-timeline-id'));
+ break;
+ }
+ }
+ }
+ }, [elem, getTimelineId]);
+
+ return timelineId;
+};

x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx

@@ -147,7 +147,6 @@ export const getColumns = ({
  data-test-subj="field-name"
  fieldId={field}
  onUpdateColumns={onUpdateColumns}
- timelineId={contextId}
  />
  </div>
  )}