fix topN popover for case view (#111514) (#111567)

* fix topN popover for case view * unit tests Co-authored-by: Angela Chuang <[email protected]>
elastic · Sep 8, 2021 · d381d36 · d381d36
1 parent e1ae485
commit d381d36
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 44 deletions.
diff --git a/.../security_solution/public/common/components/hover_actions/use_hover_action_items.test.tsx b/.../security_solution/public/common/components/hover_actions/use_hover_action_items.test.tsx
@@ -184,4 +184,94 @@ describe('useHoverActionItems', () => {
       );
     });
   });
+
+  test('if not on CaseView, overflow button is enabled, ShowTopNButton should disable popOver (e.g.: alerts flyout)', async () => {
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook(() => {
+        const testProps = {
+          ...defaultProps,
+          enableOverflowButton: true,
+        };
+        return useHoverActionItems(testProps);
+      });
+      await waitForNextUpdate();
+      expect(result.current.allActionItems[4].props.enablePopOver).toEqual(false);
+    });
+  });
+
+  test('if not on CaseView, overflow button is disabled, ShowTopNButton should disable popOver (e.g.: alerts table - reason field)', async () => {
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook(() => {
+        const testProps = {
+          ...defaultProps,
+          enableOverflowButton: false,
+        };
+        return useHoverActionItems(testProps);
+      });
+      await waitForNextUpdate();
+      expect(result.current.allActionItems[4].props.enablePopOver).toEqual(false);
+    });
+  });
+
+  test('if on CaseView, ShowTopNButton should enable popOver', async () => {
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook(() => {
+        const testProps = {
+          ...defaultProps,
+          isCaseView: true,
+          enableOverflowButton: false,
+        };
+        return useHoverActionItems(testProps);
+      });
+      await waitForNextUpdate();
+
+      expect(result.current.allActionItems[1].props.enablePopOver).toEqual(true);
+    });
+  });
+
+  test('if on CaseView, it should show all items when shoTopN is true', async () => {
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook(() => {
+        const testProps = {
+          ...defaultProps,
+          showTopN: true,
+          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'
+      );
+    });
+  });
+
+  test('when disable OverflowButton, it should show only "showTopNBtn" when shoTopN is true', async () => {
+    await act(async () => {
+      const { result, waitForNextUpdate } = renderHook(() => {
+        const testProps = {
+          ...defaultProps,
+          showTopN: true,
+          isCaseView: false,
+          enableOverflowButton: false,
+        };
+        return useHoverActionItems(testProps);
+      });
+      await waitForNextUpdate();
+
+      expect(result.current.allActionItems).toHaveLength(1);
+      expect(result.current.allActionItems[0].props['data-test-subj']).toEqual(
+        'hover-actions-show-top-n'
+      );
+    });
+  });
 });
diff --git a/...ugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx b/...ugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-/* eslint-disable complexity */
-
 import { EuiContextMenuItem } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { DraggableId } from 'react-beautiful-dnd';
@@ -124,6 +122,36 @@ export const useHoverActionItems = ({
     values != null && (enableOverflowButton || (!showTopN && !enableOverflowButton)) && !isCaseView;
   const shouldDisableColumnToggle = (isObjectArray && field !== 'geo_point') || isCaseView;
 
+  const showTopNBtn = useMemo(
+    () => (
+      <ShowTopNButton
+        Component={enableOverflowButton ? EuiContextMenuItem : undefined}
+        data-test-subj="hover-actions-show-top-n"
+        enablePopOver={!enableOverflowButton && isCaseView}
+        field={field}
+        key="hover-actions-show-top-n"
+        onClick={toggleTopN}
+        onFilterAdded={onFilterAdded}
+        ownFocus={ownFocus}
+        showTopN={showTopN}
+        showTooltip={enableOverflowButton ? false : true}
+        timelineId={timelineId}
+        value={values}
+      />
+    ),
+    [
+      enableOverflowButton,
+      field,
+      isCaseView,
+      onFilterAdded,
+      ownFocus,
+      showTopN,
+      timelineId,
+      toggleTopN,
+      values,
+    ]
+  );
+
   const allItems = useMemo(
     () =>
       [
@@ -191,21 +219,9 @@ export const useHoverActionItems = ({
           browserField: getAllFieldsByName(browserFields)[field],
           fieldName: field,
           hideTopN,
-        }) ? (
-          <ShowTopNButton
-            Component={enableOverflowButton ? EuiContextMenuItem : undefined}
-            data-test-subj="hover-actions-show-top-n"
-            field={field}
-            key="hover-actions-show-top-n"
-            onClick={toggleTopN}
-            onFilterAdded={onFilterAdded}
-            ownFocus={ownFocus}
-            showTopN={showTopN}
-            showTooltip={enableOverflowButton ? false : true}
-            timelineId={timelineId}
-            value={values}
-          />
-        ) : null,
+        })
+          ? showTopNBtn
+          : null,
         field != null ? (
           <div data-test-subj="hover-actions-copy-button" key="hover-actions-copy-button">
             {getCopyButton({
@@ -244,34 +260,13 @@ export const useHoverActionItems = ({
       ownFocus,
       shouldDisableColumnToggle,
       showFilters,
-      showTopN,
+      showTopNBtn,
       stKeyboardEvent,
-      timelineId,
       toggleColumn,
-      toggleTopN,
       values,
     ]
   ) as JSX.Element[];
 
-  const showTopNBtn = useMemo(
-    () => (
-      <ShowTopNButton
-        Component={enableOverflowButton ? EuiContextMenuItem : undefined}
-        data-test-subj="hover-actions-show-top-n"
-        field={field}
-        key="hover-actions-show-top-n"
-        onClick={toggleTopN}
-        onFilterAdded={onFilterAdded}
-        ownFocus={ownFocus}
-        showTopN={showTopN}
-        showTooltip={enableOverflowButton ? false : true}
-        timelineId={timelineId}
-        value={values}
-      />
-    ),
-    [enableOverflowButton, field, onFilterAdded, ownFocus, showTopN, timelineId, toggleTopN, values]
-  );
-
   const overflowActionItems = useMemo(
     () =>
       [
@@ -311,11 +306,10 @@ export const useHoverActionItems = ({
     ]
   );
 
-  const allActionItems = useMemo(() => (showTopN ? [showTopNBtn] : allItems), [
-    allItems,
-    showTopNBtn,
-    showTopN,
-  ]);
+  const allActionItems = useMemo(
+    () => (showTopN && !enableOverflowButton && !isCaseView ? [showTopNBtn] : allItems),
+    [showTopN, enableOverflowButton, isCaseView, showTopNBtn, allItems]
+  );
 
   return {
     overflowActionItems,