Fix [Functions] Actions dropdown menu is displayed over the Edit func…

…tion form (#2635)
mlrun · Aug 1, 2024 · ad5e5e3 · ad5e5e3
1 parent d4a6a05
commit ad5e5e3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 25 deletions.
diff --git a/src/common/ActionsMenu/ActionsMenu.js b/src/common/ActionsMenu/ActionsMenu.js
@@ -31,7 +31,13 @@ import { ReactComponent as ActionMenuIcon } from 'igz-controls/images/elipsis.sv
 
 import './actionsMenu.scss'
 
-const ActionsMenu = ({ dataItem, menu, menuPosition, time, withQuickActions }) => {
+const ActionsMenu = ({
+  dataItem = {},
+  menu,
+  menuPosition = '',
+  time = 100,
+  withQuickActions = false
+}) => {
   const [actionMenu, setActionMenu] = useState(menu)
   const [isIconDisplayed, setIsIconDisplayed] = useState(false)
   const [isShowMenu, setIsShowMenu] = useState(false)
@@ -48,14 +54,21 @@ const ActionsMenu = ({ dataItem, menu, menuPosition, time, withQuickActions }) =
     isShowMenu && 'actions-menu__container-active'
   )
 
-  const hideActionMenu = useCallback(event => {
+  const clickHandler = useCallback(event => {
+    if (
+      !event.target.closest('.actions-menu-button')
+    ) {
+      setIsShowMenu(false)
+    }
+  }, [setIsShowMenu])
+
+  const scrollHandler = useCallback(event => {
     if (
-      !event.target.closest('.actions-menu-button') &&
       !event.target.closest('.actions-menu__body')
     ) {
       setIsShowMenu(false)
     }
-  }, [])
+  }, [setIsShowMenu])
 
   const onMouseOut = () => {
     if (isShowMenu) {
@@ -84,14 +97,14 @@ const ActionsMenu = ({ dataItem, menu, menuPosition, time, withQuickActions }) =
   }, [actionMenu])
 
   useEffect(() => {
-    window.addEventListener('click', hideActionMenu)
-    window.addEventListener('scroll', hideActionMenu, true)
+    window.addEventListener('click', clickHandler)
+    window.addEventListener('scroll', scrollHandler, true)
 
     return () => {
-      window.removeEventListener('click', hideActionMenu)
-      window.removeEventListener('scroll', hideActionMenu, true)
+      window.removeEventListener('click', clickHandler)
+      window.removeEventListener('scroll', scrollHandler, true)
     }
-  }, [hideActionMenu])
+  }, [clickHandler, scrollHandler])
 
   return (
     <div
@@ -148,8 +161,8 @@ const ActionsMenu = ({ dataItem, menu, menuPosition, time, withQuickActions }) =
                   !menuItem.hidden && (
                     <ActionsMenuItem
                       dataItem={dataItem}
-                      isIconDisplayed={isIconDisplayed}
                       index={idx}
+                      isIconDisplayed={isIconDisplayed}
                       key={menuItem.label}
                       menuItem={menuItem}
                     />
@@ -163,13 +176,6 @@ const ActionsMenu = ({ dataItem, menu, menuPosition, time, withQuickActions }) =
   )
 }
 
-ActionsMenu.defaultProps = {
-  dataItem: {},
-  menuPosition: '',
-  time: 100,
-  withQuickActions: false
-}
-
 ActionsMenu.propTypes = {
   dataItem: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]),
   menu: ACTIONS_MENU.isRequired,

diff --git a/src/elements/ActionMenuItem/ActionsMenuItem.js b/src/elements/ActionMenuItem/ActionsMenuItem.js
@@ -25,7 +25,12 @@ import './actionsMenuItem.scss'
 
 import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
 
-const ActionsMenuItem = ({ dataItem, index, isIconDisplayed, menuItem }) => {
+const ActionsMenuItem = ({
+  dataItem = {},
+  index,
+  isIconDisplayed,
+  menuItem,
+}) => {
   const iconClassNames = classnames(
     'actions-menu__icon',
     isIconDisplayed && 'actions-menu__icon_visible'
@@ -41,8 +46,6 @@ const ActionsMenuItem = ({ dataItem, index, isIconDisplayed, menuItem }) => {
       data-testid={`actions-menu__option-${index}`}
       className={menuClassNames}
       onClick={event => {
-        event.stopPropagation()
-
         if (!menuItem.disabled) {
           menuItem.onClick(dataItem)
         }
@@ -60,12 +63,9 @@ const ActionsMenuItem = ({ dataItem, index, isIconDisplayed, menuItem }) => {
   )
 }
 
-ActionsMenuItem.defaultProps = {
-  dataItem: {}
-}
-
 ActionsMenuItem.propTypes = {
   dataItem: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]),
+  index: PropTypes.number.isRequired,
   isIconDisplayed: PropTypes.bool.isRequired,
   menuItem: PropTypes.shape({}).isRequired
 }

diff --git a/src/elements/ProjectCard/ProjectCardView.js b/src/elements/ProjectCard/ProjectCardView.js
@@ -44,7 +44,8 @@ const ProjectCardView = React.forwardRef(({ actionsMenu, project, statistics },
         if (
           event.target.tagName !== 'A' &&
           !ref.current.contains(event.target) &&
-          !chipRef.current?.contains(event.target)
+          !chipRef.current?.contains(event.target) &&
+          !event.target.closest('#overlay_container')
         ) {
           navigate(`/projects/${project.metadata.name}/monitor`)
         }