[Security Solution][RAC] Migrate add to case action to timelines plugin (elastic#106205)

* First pass add to case action in timelines plugin

* Fix fake duplicate import lint rule and some type errors

* Fix some tests

* Remove use_insert_timeline and pass as prop

* Remove unneeded ports, fix types/tests

* Finish fixing types and tests for add to case action

* Remove duplicated security_solution code

* Pass appId as props

* Fix lint and a type error

* Use react-router-dom instead of window.location.search

* Fix broken test

* Remove unused imports

* Remove unused export and related code

Author: kqualters-elastic

.eslintrc.js

@@ -895,7 +895,8 @@ module.exports = {
     {
       files: ['x-pack/plugins/cases/**/*.{js,mjs,ts,tsx}'],
       rules: {
-        'no-duplicate-imports': 'error',
+        'no-duplicate-imports': 'off',
+        '@typescript-eslint/no-duplicate-imports': ['error'],
       },
     },
 
@@ -912,6 +913,8 @@ module.exports = {
       ],
       rules: {
         'import/no-nodejs-modules': 'error',
+        'no-duplicate-imports': 'off',
+        '@typescript-eslint/no-duplicate-imports': ['error'],
         'no-restricted-imports': [
           'error',
           {
@@ -954,7 +957,7 @@ module.exports = {
         'no-continue': 'error',
         'no-dupe-keys': 'error',
         'no-duplicate-case': 'error',
-        'no-duplicate-imports': 'error',
+        'no-duplicate-imports': 'off',
         'no-empty-character-class': 'error',
         'no-empty-pattern': 'error',
         'no-ex-assign': 'error',
@@ -1025,6 +1028,7 @@ module.exports = {
         'require-atomic-updates': 'error',
         'symbol-description': 'error',
         'vars-on-top': 'error',
+        '@typescript-eslint/no-duplicate-imports': ['error'],
       },
     },
 

x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.test.tsx

@@ -5,11 +5,9 @@
  * 2.0.
  */
 
-/* eslint-disable no-duplicate-imports */
 import type ResizeObserver from 'resize-observer-polyfill';
 import type React from 'react';
-import { Store } from 'redux';
-import { Middleware, Dispatch } from 'redux';
+import { Store, Middleware, Dispatch } from 'redux';
 import { BBox } from 'rbush';
 import { Provider } from 'react-redux';
 import { ResolverAction } from './store/actions';

x-pack/plugins/security_solution/public/resolver/types.ts

@@ -7,9 +7,7 @@
 
 /* eslint-disable @elastic/eui/href-or-on-click */
 
-/* eslint-disable no-duplicate-imports */
-
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 /* eslint-disable react/display-name */
 
@@ -22,7 +20,6 @@ import {
   EuiInMemoryTable,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useSelector } from 'react-redux';
 import { SideEffectContext } from '../side_effect_context';
 import { StyledPanel } from '../styles';
 import {

x-pack/plugins/security_solution/public/resolver/view/panels/node_list.tsx

@@ -5,14 +5,9 @@
  * 2.0.
  */
 
-import { EuiCode } from '@elastic/eui';
-
-/* eslint-disable no-duplicate-imports */
-
-import { EuiBreadcrumbs } from '@elastic/eui';
+import { EuiCode, EuiBreadcrumbs, EuiDescriptionList } from '@elastic/eui';
 
 import styled from 'styled-components';
-import { EuiDescriptionList } from '@elastic/eui';
 
 /**
  * Used by the nodeDetail view to show attributes of the related events.

x-pack/plugins/security_solution/public/resolver/view/panels/styles.tsx

@@ -20,6 +20,14 @@ jest.mock('../../../../../common/hooks/use_selector', () => ({
   useShallowEqualSelector: jest.fn(),
 }));
 
+jest.mock('../../../../../common/lib/kibana', () => {
+  const useKibana = jest.requireActual('../../../../../common/lib/kibana');
+  return {
+    ...useKibana,
+    useGetUserCasesPermissions: jest.fn(),
+  };
+});
+
 describe('Actions', () => {
   beforeEach(() => {
     (useShallowEqualSelector as jest.Mock).mockReturnValue(mockTimelineModel);

x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.test.tsx

@@ -22,10 +22,12 @@ import { InvestigateInTimelineAction } from '../../../../../detections/component
 import { AddEventNoteAction } from '../actions/add_note_icon_item';
 import { PinEventAction } from '../actions/pin_event_action';
 import { EventsTdContent } from '../../styles';
+import { useKibana, useGetUserCasesPermissions } from '../../../../../common/lib/kibana';
+import { APP_ID } from '../../../../../../common/constants';
 import * as i18n from '../translations';
 import { DEFAULT_ICON_BUTTON_WIDTH } from '../../helpers';
 import { useShallowEqualSelector } from '../../../../../common/hooks/use_selector';
-import { AddToCaseAction } from '../../../../../cases/components/timeline_actions/add_to_case_action';
+import { useInsertTimeline } from '../../../../../cases/components/use_insert_timeline';
 import { TimelineId, ActionProps, OnPinEvent } from '../../../../../../common/types/timeline';
 import { timelineActions, timelineSelectors } from '../../../../store/timeline';
 import { timelineDefaults } from '../../../../store/timeline/defaults';
@@ -59,6 +61,7 @@ const ActionsComponent: React.FC<ActionProps> = ({
   const dispatch = useDispatch();
   const emptyNotes: string[] = [];
   const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
+  const { timelines: timelinesUi } = useKibana().services;
 
   const onPinEvent: OnPinEvent = useCallback(
     (evtId) => dispatch(timelineActions.pinEvent({ id: timelineId, eventId: evtId })),
@@ -93,12 +96,21 @@ const ActionsComponent: React.FC<ActionProps> = ({
     (state) => (getTimeline(state, timelineId) ?? timelineDefaults).timelineType
   );
   const eventType = getEventType(ecsData);
-
+  const casePermissions = useGetUserCasesPermissions();
+  const insertTimelineHook = useInsertTimeline;
   const isEventContextMenuEnabledForEndpoint = useMemo(
     () => ecsData.event?.kind?.includes('event') && ecsData.agent?.type?.includes('endpoint'),
     [ecsData.event?.kind, ecsData.agent?.type]
   );
-
+  const addToCaseActionProps = useMemo(() => {
+    return {
+      ariaLabel: i18n.ATTACH_ALERT_TO_CASE_FOR_ROW({ ariaRowindex, columnValues }),
+      ecsRowData: ecsData,
+      useInsertTimeline: insertTimelineHook,
+      casePermissions,
+      appId: APP_ID,
+    };
+  }, [ariaRowindex, ecsData, casePermissions, insertTimelineHook, columnValues]);
   return (
     <ActionsContainer>
       {showCheckboxes && (
@@ -169,13 +181,8 @@ const ActionsComponent: React.FC<ActionProps> = ({
           TimelineId.detectionsPage,
           TimelineId.detectionsRulesDetailsPage,
           TimelineId.active,
-        ].includes(timelineId as TimelineId) && (
-          <AddToCaseAction
-            ariaLabel={i18n.ATTACH_ALERT_TO_CASE_FOR_ROW({ ariaRowindex, columnValues })}
-            key="attach-to-case"
-            ecsRowData={ecsData}
-          />
-        )}
+        ].includes(timelineId as TimelineId) &&
+          timelinesUi.getAddToCaseAction(addToCaseActionProps)}
         <AlertContextMenu
           ariaLabel={i18n.MORE_ACTIONS_FOR_ROW({ ariaRowindex, columnValues })}
           key="alert-context-menu"

x-pack/plugins/security_solution/public/timelines/components/timeline/body/actions/index.tsx

@@ -23,16 +23,33 @@ import { testLeadingControlColumn } from '../../../../../common/mock/mock_timeli
 
 jest.mock('../../../../../common/hooks/use_experimental_features');
 const useIsExperimentalFeatureEnabledMock = useIsExperimentalFeatureEnabled as jest.Mock;
-
 jest.mock('../../../../../common/hooks/use_selector');
-
-jest.mock('../../../../../cases/components/timeline_actions/add_to_case_action', () => {
-  return {
-    AddToCaseAction: () => {
-      return <div data-test-subj="add-to-case-action">{'Add to case'}</div>;
+jest.mock('../../../../../common/lib/kibana', () => ({
+  useKibana: () => ({
+    services: {
+      timelines: {
+        getAddToCaseAction: () => <div data-test-subj="add-to-case-action">{'Add to case'}</div>,
+      },
     },
-  };
-});
+  }),
+  useToasts: jest.fn().mockReturnValue({
+    addError: jest.fn(),
+    addSuccess: jest.fn(),
+    addWarning: jest.fn(),
+  }),
+  useGetUserCasesPermissions: jest.fn(),
+}));
+
+jest.mock(
+  '../../../../../../../timelines/public/components/actions/timeline/cases/add_to_case_action',
+  () => {
+    return {
+      AddToCaseAction: () => {
+        return <div data-test-subj="add-to-case-action">{'Add to case'}</div>;
+      },
+    };
+  }
+);
 
 describe('EventColumnView', () => {
   useIsExperimentalFeatureEnabledMock.mockReturnValue(false);

x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.test.tsx

@@ -15,6 +15,7 @@ import {
 } from '../../../timelines/components/timeline/data_providers/data_provider';
 
 import { KqlMode, TimelineModel } from './model';
+import { InsertTimeline } from './types';
 import { FieldsEqlOptions } from '../../../../common/search_strategy/timeline';
 import {
   TimelineEventsType,
@@ -23,7 +24,6 @@ import {
   TimelinePersistInput,
   SerializedFilterQuery,
 } from '../../../../common/types/timeline';
-import { InsertTimeline } from './types';
 import { tGridActions } from '../../../../../timelines/public';
 export const {
   applyDeltaToColumnWidth,
@@ -55,6 +55,10 @@ export const addNoteToEvent = actionCreator<{ id: string; noteId: string; eventI
   'ADD_NOTE_TO_EVENT'
 );
 
+export const showTimeline = actionCreator<{ id: string; show: boolean }>('SHOW_TIMELINE');
+
+export const setInsertTimeline = actionCreator<InsertTimeline | null>('SET_INSERT_TIMELINE');
+
 export const addProvider = actionCreator<{ id: string; provider: DataProvider }>('ADD_PROVIDER');
 
 export const saveTimeline = actionCreator<TimelinePersistInput>('SAVE_TIMELINE');
@@ -69,8 +73,6 @@ export const removeProvider = actionCreator<{
   andProviderId?: string;
 }>('REMOVE_PROVIDER');
 
-export const showTimeline = actionCreator<{ id: string; show: boolean }>('SHOW_TIMELINE');
-
 export const updateTimelineGraphEventId = actionCreator<{ id: string; graphEventId: string }>(
   'UPDATE_TIMELINE_GRAPH_EVENT_ID'
 );
@@ -88,8 +90,6 @@ export const addTimeline = actionCreator<{
   savedTimeline?: boolean;
 }>('ADD_TIMELINE');
 
-export const setInsertTimeline = actionCreator<InsertTimeline | null>('SET_INSERT_TIMELINE');
-
 export const startTimelineSaving = actionCreator<{
   id: string;
 }>('START_TIMELINE_SAVING');

x-pack/plugins/security_solution/public/timelines/store/timeline/actions.ts

@@ -364,4 +364,12 @@ export const timelineReducer = reducerWithInitialState(initialTimelineState)
       },
     },
   }))
+  .case(setInsertTimeline, (state, insertTimeline) => ({
+    ...state,
+    insertTimeline,
+  }))
+  .case(showTimeline, (state, { id, show }) => ({
+    ...state,
+    timelineById: updateTimelineShowTimeline({ id, show, timelineById: state.timelineById }),
+  }))
   .build();

x-pack/plugins/security_solution/public/timelines/store/timeline/reducer.ts

@@ -6,6 +6,6 @@
   "extraPublicDirs": ["common"],
   "server": true,
   "ui": true,
-  "requiredPlugins": ["alerting", "data", "dataEnhanced", "kibanaReact", "kibanaUtils"],
+  "requiredPlugins": ["alerting", "cases", "data", "dataEnhanced", "kibanaReact", "kibanaUtils"],
   "optionalPlugins": []
 }

x-pack/plugins/timelines/kibana.json

@@ -0,0 +1,54 @@
+/*
+ * 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 React, { MouseEvent } from 'react';
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+
+import { EventsTdContent } from '../t_grid/styles';
+import { DEFAULT_ICON_BUTTON_WIDTH } from '../t_grid/helpers';
+
+interface ActionIconItemProps {
+  ariaLabel?: string;
+  width?: number;
+  dataTestSubj?: string;
+  content?: string;
+  iconType?: string;
+  isDisabled?: boolean;
+  onClick?: (event: MouseEvent) => void;
+  children?: React.ReactNode;
+}
+
+const ActionIconItemComponent: React.FC<ActionIconItemProps> = ({
+  width = DEFAULT_ICON_BUTTON_WIDTH,
+  dataTestSubj,
+  content,
+  ariaLabel,
+  iconType = '',
+  isDisabled = false,
+  onClick,
+  children,
+}) => (
+  <div>
+    <EventsTdContent textAlign="center" width={width}>
+      {children ?? (
+        <EuiToolTip data-test-subj={`${dataTestSubj}-tool-tip`} content={content}>
+          <EuiButtonIcon
+            aria-label={ariaLabel}
+            data-test-subj={`${dataTestSubj}-button`}
+            iconType={iconType}
+            isDisabled={isDisabled}
+            onClick={onClick}
+          />
+        </EuiToolTip>
+      )}
+    </EventsTdContent>
+  </div>
+);
+
+ActionIconItemComponent.displayName = 'ActionIconItemComponent';
+
+export const ActionIconItem = React.memo(ActionIconItemComponent);

x-pack/plugins/timelines/public/components/actions/action_icon_item.tsx

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * from './timeline';