Merge branch 'development' into ML-4898

package.json

@@ -24,7 +24,7 @@
     "final-form-arrays": "^3.0.2",
     "fs-extra": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "iguazio.dashboard-react-controls": "1.7.0",
+    "iguazio.dashboard-react-controls": "1.7.1",
     "is-wsl": "^1.1.0",
     "js-base64": "^2.5.2",
     "js-yaml": "^3.13.1",

src/actions/functions.js

@@ -287,13 +287,13 @@ const functionsActions = {
     type: FETCH_HUB_FUNCTION_TEMPLATE_FAILURE,
     payload: err
   }),
-  fetchHubFunctions: () => dispatch => {
+  fetchHubFunctions: allowedHubFunctions => dispatch => {
     dispatch(functionsActions.fetchHubFunctionsBegin())
 
     return functionsApi
       .getHubFunctions()
       .then(({ data: functionTemplates }) => {
-        const templatesData = generateHubCategories(functionTemplates.catalog)
+        const templatesData = generateHubCategories(functionTemplates.catalog, allowedHubFunctions)
 
         dispatch(functionsActions.setHubFunctions(templatesData))
 

src/actions/projects.js

@@ -72,14 +72,10 @@ import {
   FETCH_PROJECTS_BEGIN,
   FETCH_PROJECTS_FAILURE,
   FETCH_PROJECTS_SUCCESS,
-  REMOVE_NEW_PROJECT,
   REMOVE_NEW_PROJECT_ERROR,
   REMOVE_PROJECT_SUMMARY,
   REMOVE_PROJECT_DATA,
   REMOVE_PROJECTS,
-  SET_NEW_PROJECT_DESCRIPTION,
-  SET_NEW_PROJECT_LABELS,
-  SET_NEW_PROJECT_NAME,
   SET_PROJECT_DATA,
   SET_PROJECT_LABELS,
   FETCH_PROJECTS_NAMES_BEGIN,
@@ -587,20 +583,10 @@ const projectsAction = {
     type: FETCH_PROJECT_WORKFLOWS_SUCCESS,
     payload: workflows
   }),
-  removeNewProject: () => ({ type: REMOVE_NEW_PROJECT }),
   removeNewProjectError: () => ({ type: REMOVE_NEW_PROJECT_ERROR }),
   removeProjectData: () => ({ type: REMOVE_PROJECT_DATA }),
   removeProjectSummary: () => ({ type: REMOVE_PROJECT_SUMMARY }),
   removeProjects: () => ({ type: REMOVE_PROJECTS }),
-  setNewProjectDescription: description => ({
-    type: SET_NEW_PROJECT_DESCRIPTION,
-    payload: description
-  }),
-  setNewProjectLabels: (label, labels) => ({
-    type: SET_NEW_PROJECT_LABELS,
-    payload: { ...labels, ...label }
-  }),
-  setNewProjectName: name => ({ type: SET_NEW_PROJECT_NAME, payload: name }),
   setProjectData: data => ({
     type: SET_PROJECT_DATA,
     payload: data

src/common/ActionsMenu/ActionsMenu.js

@@ -17,14 +17,13 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-import React, { useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from 'lodash'
 import classnames from 'classnames'
 
 import ActionsMenuItem from '../../elements/ActionMenuItem/ActionsMenuItem'
-import { RoundedIcon } from 'igz-controls/components'
+import { PopUpDialog, RoundedIcon } from 'igz-controls/components'
 
 import { ACTIONS_MENU } from '../../types'
 
@@ -33,86 +32,78 @@ import { ReactComponent as ActionMenuIcon } from 'igz-controls/images/elipsis.sv
 import './actionsMenu.scss'
 
 const ActionsMenu = ({ dataItem, menu, time, withQuickActions }) => {
-  const [isShowMenu, setIsShowMenu] = useState(false)
-  const [isIconDisplayed, setIsIconDisplayed] = useState(false)
   const [actionMenu, setActionMenu] = useState(menu)
-  const [renderMenu, setRenderMenu] = useState(false)
+  const [isIconDisplayed, setIsIconDisplayed] = useState(false)
+  const [isShowMenu, setIsShowMenu] = useState(false)
+  const [position, setPosition] = useState('bottom-left')
   const actionMenuRef = useRef()
+  const actionMenuBtnRef = useRef()
   const dropDownMenuRef = useRef()
   const mainActionsWrapperRef = useRef()
-  const actionMenuBtnRef = useRef()
+  const { bottom: actionMenubottom } = actionMenuRef?.current?.getBoundingClientRect() || {}
+
+  let idTimeout = null
 
   const actionMenuClassNames = classnames(
     'actions-menu__container',
     withQuickActions && 'actions-menu__container_extended',
     isShowMenu && 'actions-menu__container-active'
   )
-  const dropDownMenuClassNames = classnames('actions-menu__body', isShowMenu && 'show')
-  let idTimeout = null
-  const offset = 15
-
-  useEffect(() => {
-    if (!isEmpty(dataItem)) {
-      setActionMenu(typeof menu === 'function' ? menu(dataItem) : menu)
-    }
-  }, [dataItem, menu])
-
-  useEffect(() => {
-    setIsIconDisplayed(actionMenu[0].some(menuItem => menuItem.icon))
-  }, [actionMenu])
-
-  const showActionsList = () => {
-    setIsShowMenu(show => !show)
-    const actionMenuBtnRect = actionMenuBtnRef.current.getBoundingClientRect()
-    const dropDownMenuRect = dropDownMenuRef.current.getBoundingClientRect()
 
+  const hideActionMenu = useCallback(event => {
     if (
-      actionMenuBtnRect.top + actionMenuBtnRect.height + offset + dropDownMenuRect.height >=
-      window.innerHeight
+      !event.target.closest('.actions-menu-button') &&
+      !event.target.closest('.actions-menu__body')
     ) {
-      dropDownMenuRef.current.style.top = `${actionMenuBtnRect.top - dropDownMenuRect.height}px`
-      dropDownMenuRef.current.style.left = `${
-        actionMenuBtnRect.left - dropDownMenuRect.width + offset
-      }px`
-    } else {
-      dropDownMenuRef.current.style.top = `${actionMenuBtnRect.bottom}px`
-      dropDownMenuRef.current.style.left = `${
-        actionMenuBtnRect.left - (dropDownMenuRect.width - offset)
-      }px`
+      setIsShowMenu(false)
     }
-  }
+  }, [])
 
   const onMouseOut = () => {
     if (isShowMenu) {
       idTimeout = setTimeout(() => {
         setIsShowMenu(false)
-        setRenderMenu(false)
       }, time)
     }
   }
 
   const handleMouseOver = event => {
     if (mainActionsWrapperRef.current?.contains(event.target)) {
-      setRenderMenu(false)
       setIsShowMenu(false)
-    } else {
-      setRenderMenu(true)
     }
 
     if (idTimeout) clearTimeout(idTimeout)
   }
 
-  const handleScroll = () => {
-    setIsShowMenu(false)
-  }
+  useLayoutEffect(() => {
+    if (dropDownMenuRef?.current) {
+      const { height } = dropDownMenuRef.current.getBoundingClientRect()
+
+      actionMenubottom + height > window.innerHeight
+        ? setPosition('top-left')
+        : setPosition('bottom-left')
+    }
+  }, [isShowMenu, actionMenubottom])
 
   useEffect(() => {
-    if (isShowMenu) {
-      window.addEventListener('scroll', handleScroll, true)
+    if (!isEmpty(dataItem)) {
+      setActionMenu(typeof menu === 'function' ? menu(dataItem) : menu)
     }
+  }, [dataItem, menu])
 
-    return () => window.removeEventListener('scroll', handleScroll, true)
-  }, [isShowMenu])
+  useEffect(() => {
+    setIsIconDisplayed(actionMenu[0].some(menuItem => menuItem.icon))
+  }, [actionMenu])
+
+  useEffect(() => {
+    window.addEventListener('click', hideActionMenu)
+    window.addEventListener('scroll', hideActionMenu, true)
+
+    return () => {
+      window.removeEventListener('click', hideActionMenu)
+      window.removeEventListener('scroll', hideActionMenu, true)
+    }
+  }, [hideActionMenu])
 
   return (
     <div
@@ -136,41 +127,45 @@ const ActionsMenu = ({ dataItem, menu, time, withQuickActions }) => {
           ))}
         </div>
       )}
-      <RoundedIcon
-        isActive={isShowMenu}
-        id="actions-menu"
-        onClick={showActionsList}
-        ref={actionMenuBtnRef}
-      >
-        <ActionMenuIcon />
-      </RoundedIcon>
-      {renderMenu &&
-        createPortal(
-          <div
-            data-testid="actions-drop-down-menu"
-            className={dropDownMenuClassNames}
-            onClick={event => {
-              setIsShowMenu(false)
-              setRenderMenu(false)
-              event.stopPropagation()
+      <div className="actions-menu" data-testid="actions-menu">
+        <RoundedIcon
+          className="actions-menu-button"
+          isActive={isShowMenu}
+          id="actions-menu-button"
+          onClick={() => {
+            setIsShowMenu(prevValue => !prevValue)
+          }}
+          ref={actionMenuBtnRef}
+        >
+          <ActionMenuIcon />
+        </RoundedIcon>
+        {isShowMenu && (
+          <PopUpDialog
+            className="actions-menu__body"
+            customPosition={{
+              element: actionMenuBtnRef,
+              position
             }}
+            headerIsHidden
             ref={dropDownMenuRef}
           >
-            {actionMenu[0].map(
-              (menuItem, idx) =>
-                !menuItem.hidden && (
-                  <ActionsMenuItem
-                    dataItem={dataItem}
-                    isIconDisplayed={isIconDisplayed}
-                    index={idx}
-                    key={menuItem.label}
-                    menuItem={menuItem}
-                  />
-                )
-            )}
-          </div>,
-          document.getElementById('overlay_container')
+            <ul data-testid="actions-drop-down-menu" className="actions-menu__list">
+              {actionMenu[0].map(
+                (menuItem, idx) =>
+                  !menuItem.hidden && (
+                    <ActionsMenuItem
+                      dataItem={dataItem}
+                      isIconDisplayed={isIconDisplayed}
+                      index={idx}
+                      key={menuItem.label}
+                      menuItem={menuItem}
+                    />
+                  )
+              )}
+            </ul>
+          </PopUpDialog>
         )}
+      </div>
     </div>
   )
 }

src/common/ActionsMenu/actionsMenu.scss

@@ -3,17 +3,20 @@
 @import '~igz-controls/scss/shadows';
 
 .actions-menu {
+  position: relative;
+
   &__container {
     position: relative;
     display: none;
 
     &_extended {
       position: absolute;
-      right: 5px;
+      right: 0;
       display: none;
       align-items: center;
       justify-content: center;
       background-color: $ghostWhite;
+      height: 100%;
 
       &:before {
         content: '';
@@ -24,6 +27,10 @@
         left: -30px;
         background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(245, 247, 255, 1) 100%);
       }
+
+      .actions-menu {
+        padding: 0 5px 0 0;
+      }
     }
 
     &-active {
@@ -38,17 +45,18 @@
   }
 
   &__body {
-    position: fixed;
     min-width: 150px;
     max-width: 250px;
-    background: $white;
-    border: $primaryBorder;
-    border-radius: $mainBorderRadius;
-    box-shadow: $filterShadow;
-    visibility: hidden;
-
-    &.show {
-      visibility: visible;
+
+    .pop-up-dialog {
+      width: 100%;
+      padding: 0;
     }
   }
+
+  &__list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
 }

src/common/Download/DownloadItem.js

@@ -99,7 +99,7 @@ const DownloadItem = ({ downloadItem }) => {
 
           timeoutRef.current = setTimeout(() => {
             dispatch(removeDownloadItem(downloadItem.id))
-          }, 1000)
+          }, 5000)
         })
     }
   }, [

src/common/Download/downloadContainer.scss

@@ -6,7 +6,7 @@
   right: 24px;
   bottom: -115px;
   opacity: 0;
-  z-index: 1000;
+  z-index: 9;
   width: 220px;
   min-height: 90px;
   max-height: 200px;

src/common/NameFilter/nameFilter.scss

@@ -16,6 +16,8 @@ such restriction.
 */
 
 .name-filter {
+  min-width: 180px;
+
   &__icon {
     cursor: pointer;
   }

src/common/TargetPath/targetPath.util.js

@@ -275,7 +275,7 @@ export const generateComboboxMatchesList = (
 export const generateArtifactsList = artifacts => {
   const generatedArtifacts = artifacts
     .map(artifact => {
-      const key = artifact.link_iteration ? artifact.link_iteration.db_key : artifact.key ?? ''
+      const key = artifact.link_iteration?.db_key || artifact.db_key || artifact.key || ''
       return {
         label: key,
         id: key