IBX-6398: UDW as GH package

src/bundle/Resources/encore/ibexa.js.config.js

@@ -3,8 +3,6 @@ const fs = require('fs');
 const translationsPath = path.resolve('./public/assets/translations/');
 const fieldTypesPath = path.resolve(__dirname, '../public/js/scripts/fieldType/');
 const layout = [
-    path.resolve(__dirname, '../../ui-dev/src/modules/universal-discovery/config.loader.js'),
-    path.resolve(__dirname, '../../ui-dev/src/modules/config.loader.js'),
     path.resolve(__dirname, '../public/js/scripts/helpers/config.loader.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.format.date.js'),
     path.resolve(__dirname, '../public/js/scripts/core/draggable.js'),
@@ -192,6 +190,7 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../public/js/scripts/admin.settings.datetimeformat.update.js'),
         ])
         .addEntry('ibexa-admin-ui-udw-js', [
+            path.resolve(__dirname, '../../ui-dev/src/modules/universal-discovery/config.loader.js'),
             path.resolve(__dirname, '../../ui-dev/src/modules/universal-discovery/universal.discovery.module.js'),
         ])
         .addEntry('ibexa-admin-ui-udw-tabs-js', [
@@ -224,6 +223,7 @@ module.exports = (Encore) => {
         .addEntry('ibexa-admin-ui-subitems-js', [path.resolve(__dirname, '../../ui-dev/src/modules/sub-items/sub.items.module.js')])
         .addEntry('ibexa-admin-ui-content-tree-js', [
             path.resolve(__dirname, '../../ui-dev/src/modules/content-tree/content.tree.module.js'),
+            path.resolve(__dirname, '../../ui-dev/src/modules/content-tree/config.loader.js'),
         ])
         .addEntry('ibexa-admin-ui-url-management-js', [
             path.resolve(__dirname, '../public/js/scripts/button.state.toggle.js'),

src/bundle/Resources/public/js/scripts/___udw.test.js

@@ -12,20 +12,20 @@ import assetsLibraryWidget from '@ibexa-assets-library-widget/src/bundle/Resourc
         const triggerElement = event.currentTarget;
         const configUDW = {
             ...JSON.parse(triggerElement.dataset.udwConfig),
-            title: triggerElement.classList.contains('ibexa-open-image-picker') ? 'Image picker' : 'UDW'
-        }
-        console.log(JSON.parse(triggerElement.dataset.udwConfig));
+            title: triggerElement.classList.contains('ibexa-open-image-picker') ? 'Image picker' : 'UDW',
+        };
 
         const config = {
             ...configUDW,
+            multiple: true,
             // activeTab: 'image_picker',
             // rootLocationId: 51,
             onConfirm: () => {
                 console.log('confirm');
             },
             onCancel: closeUDW,
             restInfo: {
-                token: '0b3b96f4c5fcd.bHTsJMDym1W3FJTlAFn0aOClYQuQlNkzlO340R02Vec.CwSKcaKzqj7QbKOVQi63GrPoD2f405hhrJ2yiUd9DYg_F7pM8abIAdxA-w',
+                token: 'd841ca.RfcZs2jLlEue-t8KFM7BfoA2BqMHpC06UOuqerrXQ4A.BpBS-17zyyqsqed-V7SNSOhvWelS7hkOadnEI_y4DbYfj2zEPPzBCf2ltA',
                 siteaccess: 'admin',
             },
         };
@@ -34,8 +34,6 @@ import assetsLibraryWidget from '@ibexa-assets-library-widget/src/bundle/Resourc
         udwRoot.render(React.createElement(assetsLibraryWidget, config));
     };
 
-
-
     imagePickerBtn.addEventListener('click', openUdw, false);
     udwBtn.addEventListener('click', openUdw, false);
     // setTimeout(() => {

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

@@ -1,6 +1,10 @@
 import { getContext as getHelpersContext } from './helpers.service';
 
-const getIconPath = (path, iconSet = getHelpersContext().iconPaths.defaultIconSet) => {
+const getIconPath = (path, iconSet) => {
+    if (!iconSet) {
+        iconSet = getHelpersContext().iconPaths.defaultIconSet;
+    }
+
     const iconSetPath = getHelpersContext().iconPaths.iconSets[iconSet];
     return `${iconSetPath}#${path}`;
 };

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

@@ -3,7 +3,7 @@ import { getJsonFromResponse } from './request.helper';
 import { showErrorNotification } from './notification.helper';
 import { getContext as getHelpersContext } from './helpers.service';
 
-const { Translator, document: doc } = window;
+const { document: doc } = window;
 
 const removeRootFromPathString = (pathString) => {
     const pathArray = pathString.split('/').filter((id) => id);
@@ -13,8 +13,7 @@ const removeRootFromPathString = (pathString) => {
 const buildLocationsBreadcrumbs = (locations) =>
     locations.map((Location) => escapeHTML(Location.ContentInfo.Content.TranslatedName)).join(' / ');
 const findLocationsByIds = (idList, callback) => {
-    const token = getHelpersContext().token ?? doc.querySelector('meta[name="CSRF-Token"]')?.content;
-    const siteaccess = getHelpersContext().siteaccess ?? doc.querySelector('meta[name="SiteAccess"]')?.content;
+    const { token, siteaccess, Translator } = getHelpersContext();
     const body = JSON.stringify({
         ViewInput: {
             identifier: `locations-by-path-string-${idList.join('-')}`,
@@ -34,8 +33,8 @@ const findLocationsByIds = (idList, callback) => {
             Accept: 'application/vnd.ibexa.api.View+json; version=1.1',
             'Content-Type': 'application/vnd.ibexa.api.ViewInput+json; version=1.1',
             'X-Requested-With': 'XMLHttpRequest',
-            'X-Siteaccess': siteaccess,
-            'X-CSRF-Token': token,
+            'X-Siteaccess': siteaccess ?? doc.querySelector('meta[name="SiteAccess"]')?.content,
+            'X-CSRF-Token': token ?? doc.querySelector('meta[name="CSRF-Token"]')?.content,
         },
         body,
         mode: 'same-origin',

src/bundle/Resources/views/themes/admin/account/base.html.twig

@@ -21,7 +21,10 @@
 
     </head>
     <body class="ibexa-login-view">
-       <div id="react-udw"></div>
+       <div
+            id="react-udw"
+            data-filter-subtree-udw-config="{&quot;multiple&quot;:false,&quot;multipleItemsLimit&quot;:0,&quot;rootLocationId&quot;:1,&quot;startingLocationId&quot;:1,&quot;containersOnly&quot;:true,&quot;allowedContentTypes&quot;:null,&quot;activeSortClause&quot;:&quot;DatePublished&quot;,&quot;activeSortOrder&quot;:&quot;ascending&quot;,&quot;activeTab&quot;:&quot;browse&quot;,&quot;activeView&quot;:&quot;finder&quot;,&quot;allowRedirects&quot;:false,&quot;allowConfirmation&quot;:true,&quot;contentOnTheFly&quot;:{&quot;allowedLanguages&quot;:null,&quot;allowedLocations&quot;:null,&quot;preselectedLanguage&quot;:null,&quot;preselectedContentType&quot;:null,&quot;hidden&quot;:false,&quot;autoConfirmAfterPublish&quot;:true},&quot;tabsConfig&quot;:{&quot;search&quot;:{&quot;itemsPerPage&quot;:50,&quot;priority&quot;:10,&quot;hidden&quot;:false},&quot;bookmarks&quot;:{&quot;itemsPerPage&quot;:50,&quot;priority&quot;:20,&quot;hidden&quot;:false},&quot;browse&quot;:{&quot;itemsPerPage&quot;:50,&quot;priority&quot;:30}}}"
+        ></div>
         <div class="container-fluid ibexa-main-container">
             <div class="row ibexa-login">
                 <img class="ibexa-login__logo" src="{{ asset('bundles/ibexaadminui/img/ibexa-logo.svg') }}" alt="ibexa" />

src/bundle/ui-dev/src/modules/content-tree/components/header/header.js

@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import Icon from '../../../common/icon/icon';
 import PopupActions from '../popup-actions/popup.actions';
-
-const { Translator } = window;
+import { getTranslator } from '../../../modules.service';
 
 const Header = ({ isCollapsed, toggleCollapseTree, actions, popupRef }) => {
+    const Translator = getTranslator();
     const headerTitle = Translator.trans(/*@Desc("Content tree")*/ 'content_tree.header', {}, 'ibexa_content_tree');
     const renderCollapseButton = () => {
         const iconName = isCollapsed ? 'caret-next' : 'caret-back';

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

@@ -2,7 +2,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../../../common/icon/icon';
 
-const { ibexa, Translator } = window;
+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 '../../../modules.service';
 
 class ListItem extends Component {
     constructor(props) {
@@ -13,6 +15,8 @@ class ListItem extends Component {
         this.loadMoreSubitems = this.loadMoreSubitems.bind(this);
         this.handleAfterExpandedStateChange = this.handleAfterExpandedStateChange.bind(this);
 
+        this.Translator = getTranslator()
+        this.adminUiConfig = getAdminUiConfig();
         this.secondaryItemActions = this.getSecondaryItemActions();
         this.sortedActions = this.getSortedActions();
 
@@ -23,7 +27,7 @@ class ListItem extends Component {
     }
 
     getSecondaryItemActions() {
-        const { secondaryItemActions } = ibexa.adminUiConfig.contentTreeWidget;
+        const { secondaryItemActions } = this.adminUiConfig.contentTreeWidget;
 
         if (!secondaryItemActions) {
             return [];
@@ -35,7 +39,7 @@ class ListItem extends Component {
     }
 
     getSortedActions() {
-        const { itemActions } = ibexa.adminUiConfig.contentTreeWidget;
+        const { itemActions } = this.adminUiConfig.contentTreeWidget;
         const actions = itemActions ? [...itemActions] : [];
 
         return actions.sort((actionA, actionB) => {
@@ -52,13 +56,13 @@ class ListItem extends Component {
         const currentDepth = currentPath.split(',').length - 1;
 
         if (currentDepth >= treeMaxDepth) {
-            const notificationMessage = Translator.trans(
+            const notificationMessage = this.Translator.trans(
                 /*@Desc("Cannot load sub-items for this Location because you reached max tree depth.")*/ 'expand_item.limit.message',
                 {},
                 'ibexa_content_tree',
             );
 
-            ibexa.helpers.notification.showWarningNotification(notificationMessage);
+            showWarningNotification(notificationMessage);
 
             return;
         }
@@ -121,11 +125,11 @@ class ListItem extends Component {
 
         if (!this.state.isLoading || this.props.subitems.length) {
             if (locationId === 1) {
-                iconAttrs.customPath = ibexa.helpers.contentType.getContentTypeIconUrl('folder');
+                iconAttrs.customPath = getContentTypeIconUrl('folder');
             } else {
                 iconAttrs.customPath =
-                    ibexa.helpers.contentType.getContentTypeIconUrl(contentTypeIdentifier) ||
-                    ibexa.helpers.contentType.getContentTypeIconUrl('file');
+                    getContentTypeIconUrl(contentTypeIdentifier) ||
+                    getContentTypeIconUrl('file');
             }
         } else {
             iconAttrs.name = 'spinner';
@@ -172,7 +176,7 @@ class ListItem extends Component {
             return null;
         }
 
-        const message = Translator.trans(/*@Desc("Loading limit reached")*/ 'show_more.limit_reached', {}, 'ibexa_content_tree');
+        const message = this.Translator.trans(/*@Desc("Loading limit reached")*/ 'show_more.limit_reached', {}, 'ibexa_content_tree');
 
         return <div className="c-list-item__load-more-limit-info">{message}</div>;
     }
@@ -287,6 +291,7 @@ ListItem.propTypes = {
     isRootItem: PropTypes.bool,
     onClick: PropTypes.func,
     indent: PropTypes.number,
+    adminUiConfig: PropTypes.object,
 };
 
 ListItem.defaultProps = {
@@ -296,6 +301,7 @@ ListItem.defaultProps = {
     onClick: () => {},
     subitemsLoadLimit: null,
     indent: 0,
+    adminUiConfig: window.ibexa?.adminUiConfig,
 };
 
 export default ListItem;

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ListItem from '../list-item/list.item.component';
-
-const { Translator } = window;
+import { getTranslator, getRouting } from '../../../modules.service';
 
 const List = ({
     items,
@@ -17,6 +16,8 @@ const List = ({
     isRoot,
     onClickItem,
 }) => {
+    const Translator = getTranslator();
+    const Routing = getRouting();
     const commonAttrs = { loadMoreSubitems, subitemsLoadLimit, subitemsLimit, treeMaxDepth, afterItemToggle, onClickItem };
     const listAttrs = { ...commonAttrs, currentLocationId };
     const listItemAttrs = commonAttrs;
@@ -36,7 +37,7 @@ const List = ({
         <ul className="c-list">
             {items.map((item) => {
                 const hasPreviousPath = path && path.length;
-                const locationHref = window.Routing.generate('ibexa.content.view', {
+                const locationHref = Routing.generate('ibexa.content.view', {
                     contentId: item.contentId,
                     locationId: item.locationId,
                 });

src/bundle/ui-dev/src/modules/content-tree/config.loader.js

@@ -0,0 +1,5 @@
+import ContentTreeModule from './content.tree.module';
+
+(function (ibexa) {
+    ibexa.addConfig('modules.ContentTree', ContentTreeModule);
+})(window.ibexa);

src/bundle/ui-dev/src/modules/content-tree/content.tree.module.js

@@ -355,7 +355,7 @@ export default class ContentTreeModule extends Component {
 
     render() {
         const { onClickItem, subitemsLimit, subitemsLoadLimit, treeMaxDepth, userId, resizable } = this.props;
-        console.log(onClickItem, subitemsLimit, subitemsLoadLimit, treeMaxDepth, userId, resizable);
+
         const attrs = {
             items: this.items,
             currentLocationId: this.getCurrentLocationId(),

src/bundle/ui-dev/src/modules/modules.service.js

@@ -0,0 +1,17 @@
+let token = document.querySelector('meta[name="CSRF-Token"]')?.content;
+let siteaccess = document.querySelector('meta[name="SiteAccess"]')?.content;
+let RoutingInstance = window.Routing;
+let TranslatorInstance = window.Translator;
+let adminUiConfig = window.ibexa?.adminUiConfig;
+
+export const setToken = (loadedToken) => (token = loadedToken);
+export const setSiteaccess = (loadedSiteaccess) => (siteaccess = loadedSiteaccess);
+export const setRouting = (loadedRoutingInstance) => (RoutingInstance = loadedRoutingInstance);
+export const setAdminUiConfig = (loadedAdminUiConfig) => (adminUiConfig = loadedAdminUiConfig);
+export const setTranslator = (loadedTranslatorInstance) => (TranslatorInstance = loadedTranslatorInstance);
+
+export const getToken = () => token;
+export const getSiteaccess = () => siteaccess;
+export const getRouting = () => RoutingInstance;
+export const getAdminUiConfig = () => adminUiConfig;
+export const getTranslator = () => TranslatorInstance;

src/bundle/ui-dev/src/modules/universal-discovery/bookmarks.tab.module.js

@@ -17,8 +17,8 @@ import {
     SortOrderContext,
     RootLocationIdContext,
     TabsConfigContext,
-    getTranslator
 } from './universal.discovery.module';
+import { getTranslator } from '../modules.service';
 import { loadAccordionData } from './services/universal.discovery.service';
 
 const BookmarksTabModule = () => {

src/bundle/ui-dev/src/modules/universal-discovery/browse.tab.module.js

@@ -7,7 +7,8 @@ import GridView from './components/grid-view/grid.view';
 import Finder from './components/finder/finder';
 import TreeView from './components/tree-view/tree.view';
 
-import { CurrentViewContext, TabsConfigContext, getTranslator } from './universal.discovery.module';
+import { CurrentViewContext, TabsConfigContext } from './universal.discovery.module';
+import { getTranslator } from '../modules.service';
 
 const BrowseTabModule = () => {
     const [currentView] = useContext(CurrentViewContext);

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

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 
-import { AllowConfirmationContext, ConfirmContext, CancelContext, SelectedLocationsContext, getTranslator } from '../../universal.discovery.module';
+import { AllowConfirmationContext, ConfirmContext, CancelContext, SelectedLocationsContext } from '../../universal.discovery.module';
+import { getTranslator } from '../../../modules.service';
 
 const ActionsMenu = () => {
     const Translator = getTranslator();

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

@@ -17,8 +17,6 @@ import {
     AllowedContentTypesContext,
 } from '../../universal.discovery.module';
 
-const { ibexa } = window;
-
 const SCROLL_OFFSET = 200;
 
 const BookmarksList = ({ setBookmarkedLocationMarked, itemsPerPage }) => {

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

@@ -3,7 +3,8 @@ import React, { useContext, useState, useMemo, useEffect, useCallback } from 're
 import Icon from '../../../common/icon/icon';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
-import { LoadedLocationsMapContext, getTranslator } from '../../universal.discovery.module';
+import { LoadedLocationsMapContext } from '../../universal.discovery.module';
+import { getTranslator } from '../../../modules.service';
 
 const Breadcrumbs = () => {
     const Translator = getTranslator();

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

@@ -11,9 +11,9 @@ import {
     ContentOnTheFlyConfigContext,
     SelectedLocationsContext,
     MultipleConfigContext,
-    ContentTypesMapContext,
-    getTranslator
+    ContentTypesMapContext
 } from '../../universal.discovery.module';
+import { getTranslator } from '../../../modules.service';
 
 const ContentCreateButton = ({ isDisabled }) => {
     const Translator = getTranslator();

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

@@ -12,16 +12,15 @@ import {
     MarkedLocationIdContext,
     LoadedLocationsMapContext,
     ContentOnTheFlyConfigContext,
-    AllowedContentTypesContext,
-    ConfigContext,
-    getTranslator
+    AllowedContentTypesContext
 } from '../../universal.discovery.module';
+import { getAdminUiConfig, getTranslator } from '../../../modules.service';
 import Dropdown from '../../../common/dropdown/dropdown';
 
 const ContentCreateWidget = () => {
     const Translator = getTranslator();
+    const adminUiConfig = getAdminUiConfig();
     const refContentTree = useRef(null);
-    const adminUiConfig = useContext(ConfigContext);
     const dropdownListRef = useContext(DropdownPortalRefContext);
     const [markedLocationId] = useContext(MarkedLocationIdContext);
     const [loadedLocationsMap] = useContext(LoadedLocationsMapContext);

src/bundle/ui-dev/src/modules/universal-discovery/components/content-edit-button/content.edit.button.js

@@ -4,21 +4,20 @@ import PropTypes from 'prop-types';
 import Icon from '../../../common/icon/icon';
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import TranslationSelector from '../translation-selector/translation.selector';
-import { createDraft } from '../..//services/universal.discovery.service';
+import { getAdminUiConfig, getRouting } from '../../../modules.service';
+import { createDraft } from '../../services/universal.discovery.service';
 import {
     RestInfoContext,
     EditOnTheFlyDataContext,
     AllowRedirectsContext,
     ActiveTabContext,
-    ContentTypesMapContext,
-    ConfigContext,
-    RoutingContext,
+    ContentTypesMapContext
 } from '../..//universal.discovery.module';
 
 const ContentEditButton = ({ version, location, isDisabled, label }) => {
-    const Routing = useContext(RoutingContext);
+    const Routing = getRouting();
+    const adminUiConfig = getAdminUiConfig();
     const restInfo = useContext(RestInfoContext);
-    const adminUiConfig = useContext(ConfigContext);
     const allowRedirects = useContext(AllowRedirectsContext);
     const [, setEditOnTheFlyData] = useContext(EditOnTheFlyDataContext);
     const [, setActiveTab] = useContext(ActiveTabContext);