IBX-8109: [ALW] folders management

src/bundle/Resources/public/js/scripts/helpers/content.type.helper.js

@@ -67,6 +67,14 @@ const getContentTypeName = (contentTypeIdentifier) => {
     return contentTypesDataMap[contentTypeIdentifier].name;
 };
 
+const getContentTypeData = (contentTypeIdentifier) => {
+    if (!contentTypesDataMap) {
+        contentTypesDataMap = createContentTypeDataMap();
+    }
+
+    return contentTypesDataMap[contentTypeIdentifier] ?? null;
+};
+
 const getContentTypeIconUrlByHref = (contentTypeHref) => {
     if (!contentTypesDataMapByHref) {
         contentTypesDataMapByHref = createContentTypeDataMapByHref();
@@ -97,4 +105,12 @@ const getContentTypeDataByHref = (contentTypeHref) => {
     return contentTypesDataMapByHref[contentTypeHref];
 };
 
-export { getContentTypeIconUrl, getContentTypeName, getContentTypeIconUrlByHref, getContentTypeDataByHref, getContentTypeNameByHref };
+export {
+    createContentTypeDataMapByHref,
+    getContentTypeIconUrl,
+    getContentTypeName,
+    getContentTypeData,
+    getContentTypeIconUrlByHref,
+    getContentTypeDataByHref,
+    getContentTypeNameByHref,
+};

src/bundle/Resources/public/js/scripts/helpers/context.helper.js

@@ -8,6 +8,10 @@ const restInfo = {
     siteaccess: document.querySelector('meta[name="SiteAccess"]')?.content,
 };
 
+export const SYSTEM_ROOT_LOCATION_ID = 1;
+export const SYSTEM_ROOT_LOCATION_PATH = `/${SYSTEM_ROOT_LOCATION_ID}/`;
+export const SYSTEM_ROOT_LOCATION = { pathString: SYSTEM_ROOT_LOCATION_PATH };
+
 export const setRestInfo = ({ instanceUrl, accessToken, token, siteaccess }) => {
     restInfo.instanceUrl = instanceUrl ?? restInfo.instanceUrl;
     restInfo.accessToken = accessToken ?? restInfo.accessToken;

src/bundle/Resources/public/js/scripts/helpers/notification.helper.js

@@ -1,4 +1,4 @@
-const { document: doc } = window;
+import { getRootDOMElement } from './context.helper';
 
 const NOTIFICATION_INFO_LABEL = 'info';
 const NOTIFICATION_SUCCESS_LABEL = 'success';
@@ -16,9 +16,10 @@ const NOTIFICATION_ERROR_LABEL = 'error';
  * @param {Object} detail.rawPlaceholdersMap
  */
 const showNotification = (detail) => {
+    const rootDOMElement = getRootDOMElement();
     const event = new CustomEvent('ibexa-notify', { detail });
 
-    doc.body.dispatchEvent(event);
+    rootDOMElement.dispatchEvent(event);
 };
 
 /**

src/bundle/Resources/public/scss/_custom.scss

@@ -175,6 +175,11 @@ $ibexa-font-family:
     sans-serif !default;
 $ibexa-font-family-headings: 'Work Sans', sans-serif;
 
+//Ibexa z-index
+$ibexa-backdrop-zindex: 2175;
+$ibexa-modal-zindex: 2180;
+$ibexa-popover-zindex: 2185;
+
 // boostrap variables
 $white: $ibexa-color-white;
 $gray-100: $ibexa-color-light-300;
@@ -319,6 +324,12 @@ $modal-content-border-radius: $ibexa-border-radius;
 $modal-inner-padding: calculateRem(24px);
 $modal-footer-padding: calculateRem(24px) 0;
 $modal-footer-border-width: 0;
+$zindex-modal-backdrop: $ibexa-backdrop-zindex;
+$zindex-modal: $ibexa-modal-zindex;
+
+//Popover
+$zindex-popover: $ibexa-popover-zindex;
+
 //Components
 $border-radius: $ibexa-border-radius;
 

src/bundle/Resources/public/scss/mixins/_modals.scss

@@ -39,6 +39,7 @@
     cursor: pointer;
     opacity: 1;
     border: none;
+    background: transparent;
 
     .ibexa-icon {
         margin: 0;

src/bundle/Resources/public/scss/ui/modules/universal-discovery/_main.scss

@@ -1,6 +1,6 @@
 .m-ud {
     position: fixed;
-    z-index: 99999;
+    z-index: 2100;
     top: 0;
     left: 0;
     height: 100vh;

src/bundle/ui-dev/src/modules/common/icon/inculdedIcon.js

@@ -3,12 +3,14 @@ import PropTypes from 'prop-types';
 
 import About from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/about.svg';
 import AboutInfo from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/about-info.svg';
+import Approved from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/approved.svg';
 import Article from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/article.svg';
 import Back from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/back.svg';
 import Blog from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/blog.svg';
 import BlogPost from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/blog_post.svg';
 import CaretDown from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/caret-down.svg';
 import CaretUp from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/caret-up.svg';
+import Create from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/create.svg';
 import Checkmark from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/checkmark.svg';
 import ContentTree from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/content-tree.svg';
 import Date from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/date.svg';
@@ -21,6 +23,8 @@ import Form from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/form.svg
 import Gallery from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/gallery.svg';
 import Image from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/image.svg';
 import LandingPage from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/landing_page.svg';
+import Notice from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/notice.svg';
+import Options from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/options.svg';
 import Place from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/place.svg';
 import Product from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/product.svg';
 import Search from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/search.svg';
@@ -39,10 +43,12 @@ import Warning from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/warni
 const iconsMap = {
     about: About,
     'about-info': AboutInfo,
+    approved: Approved,
     article: Article,
     back: Back,
     blog: Blog,
     blog_post: BlogPost,
+    create: Create,
     'caret-down': CaretDown,
     'caret-up': CaretUp,
     checkmark: Checkmark,
@@ -57,6 +63,8 @@ const iconsMap = {
     gallery: Gallery,
     image: Image,
     landing_page: LandingPage,
+    notice: Notice,
+    options: Options,
     place: Place,
     product: Product,
     search: Search,

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

@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import Icon from '../icon/icon';
 
 import { createCssClassNames } from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/helpers/css.class.names';
-import { getTranslator, getBootstrap } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+import {
+    getTranslator,
+    getBootstrap,
+    getRootDOMElement,
+} from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
 const CLASS_NON_SCROLLABLE = 'ibexa-non-scrollable';
 const CLASS_MODAL_OPEN = 'modal-open';
@@ -32,13 +36,14 @@ const Popup = ({
     extraClasses,
     showTooltip,
 }) => {
+    const rootDOMElement = getRootDOMElement();
     const modalRef = useRef(null);
     const Translator = getTranslator();
     const bootstrap = getBootstrap();
 
     useEffect(() => {
-        document.body.classList.toggle(CLASS_MODAL_OPEN, isVisible);
-        document.body.classList.toggle(CLASS_NON_SCROLLABLE, isVisible);
+        rootDOMElement.classList.toggle(CLASS_MODAL_OPEN, isVisible);
+        rootDOMElement.classList.toggle(CLASS_NON_SCROLLABLE, isVisible);
 
         if (isVisible) {
             showPopup();
@@ -58,14 +63,19 @@ const Popup = ({
     const closeBtnLabel = Translator.trans(/*@Desc("Close")*/ 'popup.close.label', {}, 'ibexa_universal_discovery_widget');
     const hidePopup = () => {
         bootstrap.Modal.getOrCreateInstance(modalRef.current).hide();
-        document.body.classList.remove(CLASS_MODAL_OPEN, CLASS_NON_SCROLLABLE);
+        rootDOMElement.classList.remove(CLASS_MODAL_OPEN, CLASS_NON_SCROLLABLE);
     };
     const showPopup = () => {
         const bootstrapModal = bootstrap.Modal.getOrCreateInstance(modalRef.current, {
             ...MODAL_CONFIG,
             keyboard: !noKeyboard,
             focus: hasFocus,
         });
+        const initializedBackdropRootElement = bootstrapModal._backdrop._config.rootElement;
+
+        if (initializedBackdropRootElement !== rootDOMElement) {
+            bootstrapModal._backdrop._config.rootElement = rootDOMElement;
+        }
 
         bootstrapModal.show();
     };
@@ -97,14 +107,14 @@ const Popup = ({
             <div className={`modal-dialog c-popup__dialog ${MODAL_SIZE_CLASS[size]}`} role="dialog">
                 <div className="modal-content c-popup__content">
                     {noHeader
-                        ? renderCloseBtn
+                        ? renderCloseBtn()
                         : title && (
                               <div className="modal-header c-popup__header">
                                   <h3 className="modal-title c-popup__headline" title={showTooltip ? title : null}>
                                       <span className="c-popup__title">{title}</span>
                                       {subtitle && <span className="c-popup__subtitle">{subtitle}</span>}
                                   </h3>
-                                  {renderCloseBtn}
+                                  {renderCloseBtn()}
                               </div>
                           )}
                     <div className="modal-body c-popup__body">{children}</div>

src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js

@@ -4,7 +4,11 @@ import Icon from '../../../common/icon/icon';
 
 import { showWarningNotification } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/notification.helper';
 import { getContentTypeIconUrl } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/content.type.helper';
-import { getTranslator, getAdminUiConfig } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+import {
+    getTranslator,
+    getAdminUiConfig,
+    SYSTEM_ROOT_LOCATION_ID,
+} from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
 class ListItem extends Component {
     constructor(props) {
@@ -124,7 +128,7 @@ class ListItem extends Component {
         };
 
         if (!this.state.isLoading || this.props.subitems.length) {
-            if (locationId === 1) {
+            if (locationId === SYSTEM_ROOT_LOCATION_ID) {
                 iconAttrs.customPath = getContentTypeIconUrl('folder');
             } else {
                 iconAttrs.customPath = getContentTypeIconUrl(contentTypeIdentifier) || getContentTypeIconUrl('file');
@@ -184,7 +188,7 @@ class ListItem extends Component {
     renderItemLabel() {
         const { href, name, locationId, indent, onClick } = this.props;
 
-        if (locationId === 1) {
+        if (locationId === SYSTEM_ROOT_LOCATION_ID) {
             return null;
         }
 

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

@@ -16,11 +16,11 @@ export default class UploadPopupModule extends Component {
         super(props);
 
         this.refTooltip = React.createRef();
-        this.rootNode = getRootDOMElement();
+        this.rootDOMElement = getRootDOMElement();
     }
 
     componentDidMount() {
-        this.rootNode.classList.add(CLASS_SCROLL_DISABLED);
+        this.rootDOMElement.classList.add(CLASS_SCROLL_DISABLED);
         parseTooltips(this.refTooltip.current);
     }
 

src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js

@@ -2,7 +2,7 @@ import React, { useContext, useState, useMemo, useEffect, useCallback, useRef }
 
 import Icon from '../../../common/icon/icon';
 
-import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+import { getTranslator, SYSTEM_ROOT_LOCATION_ID } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import { getLoadedLocationsLimitedMap } from './breadcrumbs.helpers';
 import { LoadedLocationsMapContext, MarkedLocationIdContext, GridActiveLocationIdContext } from '../../universal.discovery.module';
@@ -69,7 +69,7 @@ const Breadcrumbs = () => {
                     {hiddenItems.map((item) => {
                         const locationId = item.parentLocationId;
                         const locationName =
-                            locationId === 1
+                            locationId === SYSTEM_ROOT_LOCATION_ID
                                 ? Translator.trans(
                                       /*@Desc("Root Location")*/ 'breadcrumbs.root_location',
                                       {},
@@ -124,7 +124,7 @@ const Breadcrumbs = () => {
                     {visibleItems.map((item, index) => {
                         const locationId = item.parentLocationId;
                         const locationName =
-                            locationId === 1
+                            locationId === SYSTEM_ROOT_LOCATION_ID
                                 ? Translator.trans(
                                       /*@Desc("Root Location")*/ 'breadcrumbs.root_location',
                                       {},

src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js

@@ -17,7 +17,11 @@ import {
 } from '../../universal.discovery.module';
 
 import { parse as parseTooltip } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper';
-import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+import {
+    getAdminUiConfig,
+    getTranslator,
+    SYSTEM_ROOT_LOCATION_ID,
+} from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
 const MINIMUM_ITEMS_COUNT_FOR_SEARCH_TO_APPEAR = 10;
 
@@ -63,7 +67,7 @@ const ContentCreateWidget = () => {
         setFilterQuery(query);
     };
     const updateSelectedLanguage = (value) => setSelectedLanguage(value);
-    const isConfirmDisabled = !selectedContentType || !selectedLanguage || markedLocationId === 1;
+    const isConfirmDisabled = !selectedContentType || !selectedLanguage || markedLocationId === SYSTEM_ROOT_LOCATION_ID;
     const createContent = () => {
         setContentOnTheFlyData({
             locationId: markedLocationId,

src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js

@@ -16,7 +16,12 @@ import {
 
 import { formatShortDateTime } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/timezone.helper';
 import { parse as parseTooltip } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper';
-import { getTranslator, getRouting, getAdminUiConfig } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+import {
+    getTranslator,
+    getRouting,
+    getAdminUiConfig,
+    SYSTEM_ROOT_LOCATION_ID,
+} from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
 const ContentMetaPreview = () => {
     const Translator = getTranslator();
@@ -42,7 +47,7 @@ const ContentMetaPreview = () => {
         parseTooltip(refContentMetaPreview.current);
     });
 
-    if (!markedLocationId || markedLocationId === 1 || !locationData) {
+    if (!markedLocationId || markedLocationId === SYSTEM_ROOT_LOCATION_ID || !locationData) {
         return null;
     }