[Security Solution] Use alert status actions from timeline plugin (#1…

…07928) * use alert status from balk actions * remove unused comment * fix types * fix cypress test
elastic · Aug 10, 2021 · fa47c33 · fa47c33
1 parent ad0760d
commit fa47c33
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 173 deletions.
diff --git a/...ion/public/detections/components/alerts_table/timeline_actions/add_endpoint_exception.tsx b/...ion/public/detections/components/alerts_table/timeline_actions/add_endpoint_exception.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiContextMenuItem, EuiText } from '@elastic/eui';
+import { EuiContextMenuItem } from '@elastic/eui';
 import React from 'react';
 import * as i18n from '../translations';
 
@@ -27,7 +27,7 @@ const AddEndpointExceptionComponent: React.FC<AddEndpointExceptionProps> = ({
       onClick={onClick}
       disabled={disabled}
     >
-      <EuiText size="m">{i18n.ACTION_ADD_ENDPOINT_EXCEPTION}</EuiText>
+      {i18n.ACTION_ADD_ENDPOINT_EXCEPTION}
     </EuiContextMenuItem>
   );
 };

diff --git a/..._solution/public/detections/components/alerts_table/timeline_actions/add_event_filter.tsx b/..._solution/public/detections/components/alerts_table/timeline_actions/add_event_filter.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiContextMenuItem, EuiText } from '@elastic/eui';
+import { EuiContextMenuItem } from '@elastic/eui';
 import React from 'react';
 import * as i18n from '../translations';
 
@@ -24,9 +24,7 @@ const AddEventFilterComponent: React.FC<AddEventFilterProps> = ({ onClick, disab
       onClick={onClick}
       disabled={disabled}
     >
-      <EuiText data-test-subj="addEventFilterButton" size="m">
-        {i18n.ACTION_ADD_EVENT_FILTER}
-      </EuiText>
+      {i18n.ACTION_ADD_EVENT_FILTER}
     </EuiContextMenuItem>
   );
 };

diff --git a/...ity_solution/public/detections/components/alerts_table/timeline_actions/add_exception.tsx b/...ity_solution/public/detections/components/alerts_table/timeline_actions/add_exception.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiContextMenuItem, EuiText } from '@elastic/eui';
+import { EuiContextMenuItem } from '@elastic/eui';
 import React from 'react';
 import * as i18n from '../translations';
 
@@ -24,9 +24,7 @@ const AddExceptionComponent: React.FC<AddExceptionProps> = ({ disabled, onClick
       onClick={onClick}
       disabled={disabled}
     >
-      <EuiText data-test-subj="addExceptionButton" size="m">
-        {i18n.ACTION_ADD_EXCEPTION}
-      </EuiText>
+      {i18n.ACTION_ADD_EXCEPTION}
     </EuiContextMenuItem>
   );
 };

diff --git a/...olution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx b/...olution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx
@@ -7,8 +7,7 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { EuiButtonIcon, EuiContextMenu, EuiPopover, EuiToolTip } from '@elastic/eui';
-import styled from 'styled-components';
+import { EuiButtonIcon, EuiContextMenuPanel, EuiPopover, EuiToolTip } from '@elastic/eui';
 import { indexOf } from 'lodash';
 
 import { ExceptionListType } from '@kbn/securitysolution-io-ts-list-types';
@@ -31,8 +30,10 @@ import { useAlertsActions } from './use_alerts_actions';
 import { useExceptionModal } from './use_add_exception_modal';
 import { useExceptionActions } from './use_add_exception_actions';
 import { useEventFilterModal } from './use_event_filter_modal';
-import { useEventFilterAction } from './use_event_filter_action';
 import { Status } from '../../../../../common/detection_engine/schemas/common/schemas';
+import { AddEventFilter } from './add_event_filter';
+import { AddException } from './add_exception';
+import { AddEndpointException } from './add_endpoint_exception';
 
 interface AlertContextMenuProps {
   ariaLabel?: string;
@@ -112,7 +113,7 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
     onAddEventFilterClick,
   } = useEventFilterModal();
 
-  const { statusActions } = useAlertsActions({
+  const { actionItems } = useAlertsActions({
     alertStatus,
     eventId: ecsRowData?._id,
     timelineId,
@@ -132,23 +133,41 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
     closePopover();
   }, [closePopover, onAddEventFilterClick]);
 
-  const exceptionActions = useExceptionActions({
+  const {
+    disabledAddEndpointException,
+    disabledAddException,
+    handleEndpointExceptionModal,
+    handleDetectionExceptionModal,
+  } = useExceptionActions({
     isEndpointAlert,
     onAddExceptionTypeClick: handleOnAddExceptionTypeClick,
   });
 
-  const eventFilterActions = useEventFilterAction({
-    onAddEventFilterClick: handleOnAddEventFilterClick,
-  });
-
-  const panels = useMemo(
-    () => [
-      {
-        id: 0,
-        items: !isEvent && ruleId ? [...statusActions, ...exceptionActions] : [eventFilterActions],
-      },
-    ],
-    [eventFilterActions, exceptionActions, isEvent, ruleId, statusActions]
+  const items = useMemo(
+    () =>
+      !isEvent && ruleId
+        ? [
+            ...actionItems,
+            <AddEndpointException
+              onClick={handleEndpointExceptionModal}
+              disabled={disabledAddEndpointException}
+            />,
+            <AddException
+              onClick={handleDetectionExceptionModal}
+              disabled={disabledAddException}
+            />,
+          ]
+        : [<AddEventFilter onClick={handleOnAddEventFilterClick} />],
+    [
+      actionItems,
+      disabledAddEndpointException,
+      disabledAddException,
+      handleDetectionExceptionModal,
+      handleEndpointExceptionModal,
+      handleOnAddEventFilterClick,
+      isEvent,
+      ruleId,
+    ]
   );
 
   return (
@@ -164,7 +183,7 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
             anchorPosition="downLeft"
             repositionOnScroll
           >
-            <EuiContextMenu size="s" initialPanelId={0} panels={panels} />
+            <EuiContextMenuPanel size="s" items={items} />
           </EuiPopover>
         </EventsTdContent>
       </div>
@@ -191,12 +210,6 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
   );
 };
 
-const ContextMenuPanel = styled(EuiContextMenu)`
-  font-size: ${({ theme }) => theme.eui.euiFontSizeS};
-`;
-
-ContextMenuPanel.displayName = 'ContextMenuPanel';
-
 export const AlertContextMenu = React.memo(AlertContextMenuComponent);
 
 type AddExceptionModalWrapperProps = Omit<

diff --git a/...etections/components/alerts_table/timeline_actions/alerts_status_actions/close_status.tsx b/...etections/components/alerts_table/timeline_actions/alerts_status_actions/close_status.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiContextMenuItem, EuiText } from '@elastic/eui';
+import { EuiContextMenuItem } from '@elastic/eui';
 import React from 'react';
 import { FILTER_CLOSED } from '../../alerts_filter_group';
 import * as i18n from '../../translations';
@@ -25,7 +25,7 @@ const CloseAlertActionComponent: React.FC<CloseAlertActionProps> = ({ onClick, d
       onClick={onClick}
       disabled={disabled}
     >
-      <EuiText size="m">{i18n.ACTION_CLOSE_ALERT}</EuiText>
+      {i18n.ACTION_CLOSE_ALERT}
     </EuiContextMenuItem>
   );
 };

diff --git a/...mponents/alerts_table/timeline_actions/alerts_status_actions/in_progress_alert_status.tsx b/...mponents/alerts_table/timeline_actions/alerts_status_actions/in_progress_alert_status.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiContextMenuItem, EuiText } from '@elastic/eui';
+import { EuiContextMenuItem } from '@elastic/eui';
 import React from 'react';
 import { FILTER_IN_PROGRESS } from '../../alerts_filter_group';
 import * as i18n from '../../translations';
@@ -28,7 +28,7 @@ const InProgressAlertStatusComponent: React.FC<InProgressAlertStatusProps> = ({
       onClick={onClick}
       disabled={disabled}
     >
-      <EuiText size="m">{i18n.ACTION_IN_PROGRESS_ALERT}</EuiText>
+      {i18n.ACTION_IN_PROGRESS_ALERT}
     </EuiContextMenuItem>
   );
 };

diff --git a/...ions/components/alerts_table/timeline_actions/alerts_status_actions/open_alert_status.tsx b/...ions/components/alerts_table/timeline_actions/alerts_status_actions/open_alert_status.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiContextMenuItem, EuiText } from '@elastic/eui';
+import { EuiContextMenuItem } from '@elastic/eui';
 import React from 'react';
 import { FILTER_OPEN } from '../../alerts_filter_group';
 import * as i18n from '../../translations';
@@ -25,7 +25,7 @@ const OpenAlertStatusComponent: React.FC<OpenAlertStatusProps> = ({ onClick, dis
       onClick={onClick}
       disabled={disabled}
     >
-      <EuiText size="m">{i18n.ACTION_OPEN_ALERT}</EuiText>
+      {i18n.ACTION_OPEN_ALERT}
     </EuiContextMenuItem>
   );
 };

diff --git a/.../public/detections/components/alerts_table/timeline_actions/use_add_exception_actions.tsx b/.../public/detections/components/alerts_table/timeline_actions/use_add_exception_actions.tsx
@@ -11,12 +11,20 @@ import type { ExceptionListType } from '@kbn/securitysolution-io-ts-list-types';
 import { useUserData } from '../../user_info';
 import { ACTION_ADD_ENDPOINT_EXCEPTION, ACTION_ADD_EXCEPTION } from '../translations';
 
-interface UseExceptionActions {
+interface ExceptionActions {
   name: string;
   onClick: () => void;
   disabled: boolean;
 }
 
+interface UseExceptionActions {
+  disabledAddEndpointException: boolean;
+  disabledAddException: boolean;
+  exceptionActions: ExceptionActions[];
+  handleEndpointExceptionModal: () => void;
+  handleDetectionExceptionModal: () => void;
+}
+
 interface UseExceptionActionProps {
   isEndpointAlert: boolean;
   onAddExceptionTypeClick: (type: ExceptionListType) => void;
@@ -25,7 +33,7 @@ interface UseExceptionActionProps {
 export const useExceptionActions = ({
   isEndpointAlert,
   onAddExceptionTypeClick,
-}: UseExceptionActionProps): UseExceptionActions[] => {
+}: UseExceptionActionProps): UseExceptionActions => {
   const [{ canUserCRUD, hasIndexWrite }] = useUserData();
 
   const handleDetectionExceptionModal = useCallback(() => {
@@ -62,5 +70,11 @@ export const useExceptionActions = ({
     ]
   );
 
-  return exceptionActions;
+  return {
+    disabledAddEndpointException,
+    disabledAddException,
+    exceptionActions,
+    handleEndpointExceptionModal,
+    handleDetectionExceptionModal,
+  };
 };