[SECURITY] Bug truncation on timeline (#72221) (#72268)

* bring back truncated ceil + only show menu context hover text * update unit test
elastic · Jul 17, 2020 · f1ab2c6 · f1ab2c6
1 parent 9881383
commit f1ab2c6
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/...security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx b/...security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx
@@ -157,8 +157,10 @@ describe('AddFilterToGlobalSearchBar Component', () => {
       </TestProviders>
     );
 
+    wrapper.find('[data-test-subj="withHoverActionsButton"]').simulate('mouseenter');
+    wrapper.update();
+
     wrapper
-      .simulate('mouseenter')
       .find('[data-test-subj="hover-actions-container"] [data-euiicon-type]')
       .first()
       .simulate('click');

diff --git a/...ugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx b/...ugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
@@ -65,7 +65,7 @@ describe('DraggableWrapper', () => {
       expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(false);
     });
 
-    test('it renders hover actions when the mouse is over the draggable wrapper', () => {
+    test('it renders hover actions when the mouse is over the text of draggable wrapper', () => {
       const wrapper = mount(
         <TestProviders>
           <MockedProvider mocks={mocksSource} addTypename={false}>
@@ -76,7 +76,7 @@ describe('DraggableWrapper', () => {
         </TestProviders>
       );
 
-      wrapper.simulate('mouseenter');
+      wrapper.find('[data-test-subj="withHoverActionsButton"]').simulate('mouseenter');
       wrapper.update();
       expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(true);
     });

diff --git a/x-pack/plugins/security_solution/public/common/components/with_hover_actions/index.tsx b/x-pack/plugins/security_solution/public/common/components/with_hover_actions/index.tsx
@@ -17,10 +17,6 @@ const WithHoverActionsPopover = (styled(EuiPopover as any)`
   }
 ` as unknown) as typeof EuiPopover;
 
-const Container = styled.div`
-  width: fit-content;
-`;
-
 interface Props {
   /**
    * Always show the hover menu contents (default: false)
@@ -68,7 +64,14 @@ export const WithHoverActions = React.memo<Props>(
       setShowHoverContent(false);
     }, []);
 
-    const content = useMemo(() => <>{render(showHoverContent)}</>, [render, showHoverContent]);
+    const content = useMemo(
+      () => (
+        <div data-test-subj="withHoverActionsButton" onMouseEnter={onMouseEnter}>
+          {render(showHoverContent)}
+        </div>
+      ),
+      [onMouseEnter, render, showHoverContent]
+    );
 
     useEffect(() => {
       setIsOpen(hoverContent != null && (showHoverContent || alwaysShow));
@@ -79,7 +82,7 @@ export const WithHoverActions = React.memo<Props>(
     }, [closePopOverTrigger]);
 
     return (
-      <Container onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <div onMouseLeave={onMouseLeave}>
         <WithHoverActionsPopover
           anchorPosition={'downCenter'}
           button={content}
@@ -90,7 +93,7 @@ export const WithHoverActions = React.memo<Props>(
         >
           {isOpen ? <>{hoverContent}</> : null}
         </WithHoverActionsPopover>
-      </Container>
+      </div>
     );
   }
 );

diff --git a/.../plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx b/.../plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx
@@ -46,7 +46,7 @@ describe('FieldName', () => {
         <FieldName {...defaultProps} />
       </TestProviders>
     );
-    wrapper.find('div').at(1).simulate('mouseenter');
+    wrapper.find('[data-test-subj="withHoverActionsButton"]').at(0).simulate('mouseenter');
     wrapper.update();
     expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(true);
   });