From 22f220c88347b7a4f714d758f07be79e3e7f99af Mon Sep 17 00:00:00 2001
From: kushalsourav <66814079+kushalsourav@users.noreply.github.com>
Date: Thu, 12 Dec 2024 10:58:46 +0530
Subject: [PATCH] fix: popup breaking screen (#11381)

fixed auto close popover when user scroll pasts the app card

Fix: #11256
---
 frontend/src/HomePage/AppCard.jsx | 37 ++++++++++++++++++++++++-------
 frontend/src/HomePage/AppMenu.jsx |  6 ++++-
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/frontend/src/HomePage/AppCard.jsx b/frontend/src/HomePage/AppCard.jsx
index 6d48ed0caa..8530cbf464 100644
--- a/frontend/src/HomePage/AppCard.jsx
+++ b/frontend/src/HomePage/AppCard.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import cx from 'classnames';
 import { AppMenu } from './AppMenu';
 import moment from 'moment';
@@ -32,6 +32,17 @@ export default function AppCard({
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const cardRef = useRef();
+  const [popoverVisible, setPopoverVisible] = useState(true)
+  const options = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 1.0
+  }
+  const callBackFunction = (entries) => {
+    const [entry] = entries;
+    setPopoverVisible(isMenuOpen && entry.isIntersecting)
+  }
   const onMenuToggle = useCallback(
     (status) => {
       setMenuOpen(!!status);
@@ -54,8 +65,17 @@ export default function AppCard({
 
   useEffect(() => {
     !isMenuOpen && setFocused(!!isHovered);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isHovered]);
+    const observer = new IntersectionObserver(callBackFunction, options)
+    if (cardRef.current) observer.observe(cardRef.current)
+
+    return () => {
+      if (cardRef.current) {
+        observer.unobserve(cardRef.current)
+      }
+    }
+  }, [isHovered, cardRef, options]);
 
   const updated_at = app?.editing_version?.updated_at || app?.updated_at;
   const updated = moment(updated_at).fromNow(true);
@@ -69,7 +89,7 @@ export default function AppCard({
   }
 
   return (
-    <div className="card homepage-app-card">
+    <div className="card homepage-app-card" ref={cardRef}>
       <div key={app?.id} ref={hoverRef} data-cy={`${app?.name.toLowerCase().replace(/\s+/g, '-')}-card`}>
         <div className="row home-app-card-header">
           <div className="col-12 d-flex justify-content-between">
@@ -90,7 +110,9 @@ export default function AppCard({
                   canUpdateApp={canUpdateApp(app)}
                   deleteApp={() => deleteApp(app)}
                   exportApp={() => exportApp(app)}
-                  isMenuOpen={isMenuOpen}
+                  isMenuOpen={setMenuOpen}
+                  popoverVisible={popoverVisible}
+                  setMenuOpen={setMenuOpen}
                   darkMode={darkMode}
                   currentFolder={currentFolder}
                 />
@@ -146,8 +168,7 @@ export default function AppCard({
               <button
                 type="button"
                 className={cx(
-                  ` launch-button tj-text-xsm ${
-                    app?.current_version_id === null || app?.is_maintenance_on ? 'tj-disabled-btn ' : 'tj-tertiary-btn'
+                  ` launch-button tj-text-xsm ${app?.current_version_id === null || app?.is_maintenance_on ? 'tj-disabled-btn ' : 'tj-tertiary-btn'
                   }`
                 )}
                 onClick={() => {
@@ -168,8 +189,8 @@ export default function AppCard({
                     app?.current_version_id === null || app?.is_maintenance_on
                       ? '#4C5155'
                       : darkMode
-                      ? '#FDFDFE'
-                      : '#11181C'
+                        ? '#FDFDFE'
+                        : '#11181C'
                   }
                 />
 
diff --git a/frontend/src/HomePage/AppMenu.jsx b/frontend/src/HomePage/AppMenu.jsx
index 4e88978be3..93ea2062b5 100644
--- a/frontend/src/HomePage/AppMenu.jsx
+++ b/frontend/src/HomePage/AppMenu.jsx
@@ -13,6 +13,8 @@ export const AppMenu = function AppMenu({
   openAppActionModal,
   darkMode,
   currentFolder,
+  popoverVisible,
+  setMenuOpen,
 }) {
   const { t } = useTranslation();
   const Field = ({ text, onClick, customClass }) => {
@@ -38,9 +40,11 @@ export const AppMenu = function AppMenu({
   return (
     <OverlayTrigger
       trigger="click"
-      placement="bottom-end"
+      placement="top-start"
       rootClose
       onToggle={onMenuOpen}
+      onExit={() => setMenuOpen(false)}
+      show={popoverVisible}
       overlay={
         <div>
           <Popover id="popover-app-menu" className={darkMode && 'dark-theme'} placement="bottom">