IBX-11029: Fixed z-indexes

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

@@ -15,6 +15,10 @@
         line-height: calculateRem(18px);
     }
 
+    &--elevated {
+        z-index: 10250;
+    }
+
     .c-tooltip-popup {
         width: 100%;
         max-height: 90vh;

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

@@ -9,6 +9,8 @@
     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 +39,7 @@
     extraClasses,
     showTooltip,
     subheader,
+    controlZIndex,
 }) => {
     const rootDOMElement = getRootDOMElement();
     const modalRef = useRef(null);
@@ -56,7 +59,34 @@
                 latestBootstrapModal.current.hide();
             }
         }
-    }, [isVisible]);
+
+        const modalNode = modalRef.current;
+        const modalBackdrop = document.querySelector('.modal-backdrop');
+
+        if (!modalBackdrop || !modalNode || !controlZIndex) {
+            return;
+        }
+
+        const backdropInitialZIndex = window.getComputedStyle(modalBackdrop)['z-index'];
+        const modalInitialZIndex = window.getComputedStyle(modalNode)['z-index'];
+
+        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, controlZIndex]);
 
     useEffect(() => {
         return () => {
@@ -196,6 +226,7 @@
     extraClasses: PropTypes.string,
     showTooltip: PropTypes.bool,
     subheader: PropTypes.node,
+    controlZIndex: PropTypes.bool,
 };
 
 Popup.defaultProps = {
@@ -211,6 +242,7 @@
     subtitle: null,
     showTooltip: true,
     subheader: null,
+    controlZIndex: false,
 };
 
 export default Popup;

src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-popup/upload.popup.component.js

@@ -8,10 +8,12 @@ import { getContentTypeName } from '@ibexa-admin-ui/src/bundle/Resources/public/
 import TooltipPopup from '../../../common/tooltip-popup/tooltip.popup.component';
 import DropAreaComponent from '../drop-area/drop.area.component';
 import UploadListComponent from '../upload-list/upload.list.component';
+import { UDWContext } from '../../../universal-discovery/universal.discovery.module';
+import { createCssClassNames } from '../../..//common/helpers/css.class.names';
 
 const CLASS_SCROLL_DISABLED = 'ibexa-scroll-disabled';
 
-export default class UploadPopupModule extends Component {
+class UploadPopupModule extends Component {
     constructor(props) {
         super(props);
 
@@ -47,6 +49,7 @@ export default class UploadPopupModule extends Component {
     }
 
     render() {
+        const isUDW = this.context;
         const Translator = getTranslator();
         const hasAnyUploadedItems = !!this.props.uploadedItems.length;
         const hasAnyItemsToUpload = !!this.props.itemsToUpload.length;
@@ -60,6 +63,10 @@ export default class UploadPopupModule extends Component {
             {},
             'ibexa_multi_file_upload',
         );
+        const className = createCssClassNames({
+            'c-upload-popup': true,
+            'c-upload-popup--elevated': !!isUDW,
+        });
         const {
             addItemsToUpload,
             subtitle,
@@ -120,7 +127,7 @@ export default class UploadPopupModule extends Component {
         }
 
         return (
-            <div className="c-upload-popup" ref={this.refTooltip}>
+            <div className={className} ref={this.refTooltip}>
                 <TooltipPopup {...tooltipAttrs}>
                     <div className="c-upload-popup__label">{label}</div>
                     <DropAreaComponent
@@ -184,3 +191,7 @@ UploadPopupModule.defaultProps = {
     onAfterDelete: () => {},
     enableUploadedItemEdit: true,
 };
+
+UploadPopupModule.contextType = UDWContext;
+
+export default UploadPopupModule;