IBX-11029: Fixed z-indexes

Author: OstafinL

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss

@@ -1,7 +1,7 @@
 .c-upload-popup {
     background: rgba($ibexa-color-black, 0.35);
     position: fixed;
-    z-index: 10100;
+    z-index: 10250;
     top: 0;
     left: 0;
     height: 100vh;

src/bundle/ui-dev/src/modules/common/popup/popup.component.js

@@ -9,6 +9,9 @@ import {
     getRootDOMElement,
 } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
+const MODAL_Z_INDEX = 10260;
+const MODAL_BACKDROP_Z_INDEX = 10250;
+
 const CLASS_NON_SCROLLABLE = 'ibexa-non-scrollable';
 const CLASS_MODAL_OPEN = 'modal-open';
 const MODAL_CONFIG = {
@@ -37,6 +40,7 @@ const Popup = ({
     extraClasses,
     showTooltip,
     subheader,
+    controlZIndex,
 }) => {
     const rootDOMElement = getRootDOMElement();
     const modalRef = useRef(null);
@@ -56,6 +60,33 @@ const Popup = ({
                 latestBootstrapModal.current.hide();
             }
         }
+
+        const modalNode = modalRef.current;
+        const modalBackdrop = document.querySelector('.modal-backdrop');
+
+        if (!modalBackdrop || !modalNode || !controlZIndex) {
+            return;
+        }
+
+        const backdropInitialZIndex = modalBackdrop.style.zIndex;
+        const modalInitialZIndex = modalNode.style.zIndex;
+
+        modalBackdrop.style.zIndex = MODAL_BACKDROP_Z_INDEX;
+        modalNode.style.zIndex = MODAL_Z_INDEX;
+
+        return () => {
+            if (backdropInitialZIndex) {
+                modalBackdrop.style.zIndex = backdropInitialZIndex;
+            } else {
+                modalBackdrop.style.removeProperty('z-index');
+            }
+
+            if (modalInitialZIndex) {
+                modalNode.style.zIndex = modalInitialZIndex;
+            } else {
+                modalNode.style.removeProperty('z-index');
+            }
+        };
     }, [isVisible]);
 
     useEffect(() => {
@@ -196,6 +227,7 @@ Popup.propTypes = {
     extraClasses: PropTypes.string,
     showTooltip: PropTypes.bool,
     subheader: PropTypes.node,
+    controlZIndex: PropTypes.bool,
 };
 
 Popup.defaultProps = {
@@ -211,6 +243,7 @@ Popup.defaultProps = {
     subtitle: null,
     showTooltip: true,
     subheader: null,
+    controlZIndex: false,
 };
 
 export default Popup;