From acf675c15caa133289c764100eeb3ab6096d8e21 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 25 Aug 2022 09:50:28 +0200
Subject: [PATCH] [Security Solution] Fixes the position of popover when
 presenting dynamic content (#139079)

## Summary

Issue #133186 ( as shown in below video) demonstrates couple of issues and this PR tries to fix those.

https://user-images.githubusercontent.com/61860752/171141631-f633a223-af76-457d-bed2-6bd8ea418a0e.mp4

**ISSUE - 1**

When in host details flyout, clicking on `show Top N`, the datagrid will flicker scrolling from right to left and then back to its original position.

**Solution** : This issue was not reproducible so I am assuming this has been already resolved. ( See below video for more details)


**ISSUE - 2**

When in host details flyout, clicking on `show Top N`, the popup hides behind the bottom screen edge. This is because initially the popup was small but when `Show TopN` is clicked, the content of Popup is changed and popup becomes bigger in size forcing it to exceed out of the screen's real estate.

**Solution** : This PR makes sure that, if hover actions Popup's content changes, Popup is re-positioned according to its new dimensions. Checkout below demonstration.


https://user-images.githubusercontent.com/7485038/185380538-d8fb159a-d666-4be2-b3b0-161a21d1b9d6.mov
---
 .../common/components/with_hover_actions/index.tsx     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

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
index 05dc523700690..f7fb39a8f7c6d 100644
--- 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
@@ -10,7 +10,7 @@ import {
   HOVER_ACTIONS_ALWAYS_SHOW_CLASS_NAME,
   IS_DRAGGING_CLASS_NAME,
 } from '@kbn/securitysolution-t-grid';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 /**
@@ -82,6 +82,7 @@ export const WithHoverActions = React.memo<Props>(
     const [isOpen, setIsOpen] = useState(hoverContent != null && alwaysShow);
     const [showHoverContent, setShowHoverContent] = useState(false);
     const [, setHoverTimeout] = useState<number | undefined>(undefined);
+    const popoverRef = useRef<EuiPopover>(null);
 
     const tryClosePopover = useCallback(() => {
       setHoverTimeout((prevHoverTimeout) => {
@@ -143,12 +144,19 @@ export const WithHoverActions = React.memo<Props>(
       setShowHoverContent(false);
     }, [closePopOverTrigger]); // NOTE: the `closePopOverTrigger` dependency here will close the hover menu whenever `closePopOverTrigger` changes
 
+    useEffect(() => {
+      // in case of dynamic content i.e when the value of hoverContent changes,
+      // we will try to reposition the popover so that the content does not collide with screen edge.
+      if (isOpen) popoverRef?.current?.positionPopoverFluid();
+    }, [hoverContent, isOpen]);
+
     return (
       <div
         className={alwaysShow ? HOVER_ACTIONS_ALWAYS_SHOW_CLASS_NAME : ''}
         onMouseLeave={onMouseLeave}
       >
         <WithHoverActionsPopover
+          ref={popoverRef}
           anchorPosition={'downCenter'}
           button={content}
           closePopover={tryClosePopover}