From 7d66cf988238254ff1db2d316ed76c098d5ba612 Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Thu, 26 Aug 2021 09:19:20 -0400
Subject: [PATCH] [Security Solution][RAC] Hide filters on case view (#110090)

---
 .../common/components/hover_actions/index.tsx |  9 ++++---
 .../use_hover_action_items.test.tsx           | 26 +++++++++++++++++++
 .../hover_actions/use_hover_action_items.tsx  |  9 ++++---
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx b/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
index 926a0c763f61..81ecec7bdc53 100644
--- a/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx
@@ -11,7 +11,7 @@ import { DraggableId } from 'react-beautiful-dnd';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 
-import { ColumnHeaderOptions, DataProvider } from '../../../../common/types/timeline';
+import { ColumnHeaderOptions, DataProvider, TimelineId } from '../../../../common/types/timeline';
 import { stopPropagationAndPreventDefault } from '../../../../../timelines/public';
 import { SHOW_TOP_N_KEYBOARD_SHORTCUT } from './keyboard_shortcut_constants';
 import { useHoverActionItems } from './use_hover_action_items';
@@ -202,15 +202,18 @@ export const HoverActions: React.FC<Props> = React.memo(
       [ownFocus, toggleTopN]
     );
 
+    const isCaseView = timelineId === TimelineId.casePage;
+
     const { overflowActionItems, allActionItems } = useHoverActionItems({
       dataProvider,
       dataType,
       defaultFocusedButtonRef,
       draggableId,
-      enableOverflowButton,
+      enableOverflowButton: enableOverflowButton && !isCaseView,
       field,
       handleHoverActionClicked,
       hideTopN,
+      isCaseView,
       isObjectArray,
       isOverflowPopoverOpen,
       onFilterAdded,
@@ -245,7 +248,7 @@ export const HoverActions: React.FC<Props> = React.memo(
 
           {additionalContent != null && <AdditionalContent>{additionalContent}</AdditionalContent>}
 
-          {enableOverflowButton ? overflowActionItems : allActionItems}
+          {enableOverflowButton && !isCaseView ? overflowActionItems : allActionItems}
         </StyledHoverActionsContainer>
       </EuiFocusTrap>
     );
diff --git a/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.test.tsx b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.test.tsx
index 3a9217ce05c5..f37f801982d2 100644
--- a/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.test.tsx
@@ -23,6 +23,7 @@ describe('useHoverActionItems', () => {
     field: 'signal.rule.name',
     handleHoverActionClicked: jest.fn(),
     hideTopN: false,
+    isCaseView: false,
     isObjectArray: false,
     ownFocus: false,
     showTopN: false,
@@ -158,4 +159,29 @@ describe('useHoverActionItems', () => {
       });
     });
   });
+
+  test('should not have filter in, filter out, or toggle column', async () => {
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook(() => {
+        const testProps = {
+          ...defaultProps,
+          isCaseView: true,
+          enableOverflowButton: false,
+        };
+        return useHoverActionItems(testProps);
+      });
+      await waitForNextUpdate();
+
+      expect(result.current.allActionItems).toHaveLength(3);
+      expect(result.current.allActionItems[0].props['data-test-subj']).toEqual(
+        'hover-actions-add-timeline'
+      );
+      expect(result.current.allActionItems[1].props['data-test-subj']).toEqual(
+        'hover-actions-show-top-n'
+      );
+      expect(result.current.allActionItems[2].props['data-test-subj']).toEqual(
+        'hover-actions-copy-button'
+      );
+    });
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx
index a4f1304bc679..9ff844c608dd 100644
--- a/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx
@@ -32,6 +32,7 @@ export interface UseHoverActionItemsProps {
   field: string;
   handleHoverActionClicked: () => void;
   hideTopN: boolean;
+  isCaseView: boolean;
   isObjectArray: boolean;
   isOverflowPopoverOpen?: boolean;
   itemsToShow?: number;
@@ -60,6 +61,7 @@ export const useHoverActionItems = ({
   field,
   handleHoverActionClicked,
   hideTopN,
+  isCaseView,
   isObjectArray,
   isOverflowPopoverOpen,
   itemsToShow = 2,
@@ -119,9 +121,8 @@ export const useHoverActionItems = ({
    * in the case of `EnableOverflowButton`, we only need to hide all the items in the overflow popover as the chart's panel opens in the overflow popover, so non-overflowed actions are not affected.
    */
   const showFilters =
-    values != null && (enableOverflowButton || (!showTopN && !enableOverflowButton));
-
-  const shouldDisableColumnToggle = isObjectArray && field !== 'geo_point';
+    values != null && (enableOverflowButton || (!showTopN && !enableOverflowButton)) && !isCaseView;
+  const shouldDisableColumnToggle = (isObjectArray && field !== 'geo_point') || isCaseView;
 
   const allItems = useMemo(
     () =>
@@ -275,7 +276,7 @@ export const useHoverActionItems = ({
     () =>
       [
         ...allItems.slice(0, itemsToShow),
-        ...(enableOverflowButton && itemsToShow > 0
+        ...(enableOverflowButton && itemsToShow > 0 && itemsToShow < allItems.length
           ? [
               getOverflowButton({
                 closePopOver: handleHoverActionClicked,