IBX-7816: ALW files upload (#1184)

Co-authored-by: Tomasz Kryszan <tomasz.kryszan@ez.no>

phpstan-baseline.neon

@@ -9255,61 +9255,6 @@ parameters:
 			count: 1
 			path: src/lib/UI/Config/Provider/Autosave.php
 
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:__construct\\(\\) has parameter \\$defaultMappings with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:__construct\\(\\) has parameter \\$fallbackContentType with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:__construct\\(\\) has parameter \\$locationMappings with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:buildFallbackContentTypeStructure\\(\\) has parameter \\$fallbackContentType with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:buildFallbackContentTypeStructure\\(\\) return type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:buildMappingGroupStructure\\(\\) has parameter \\$mappingGroup with no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:buildMappingGroupStructure\\(\\) return type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Method Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:getConfig\\(\\) return type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Property Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:\\$defaultMappings type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Property Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:\\$fallbackContentType type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
-		-
-			message: "#^Property Ibexa\\\\AdminUi\\\\UI\\\\Config\\\\Provider\\\\ContentTypeMappings\\:\\:\\$locationMappings type has no value type specified in iterable type array\\.$#"
-			count: 1
-			path: src/lib/UI/Config/Provider/ContentTypeMappings.php
-
 		-
 			message: "#^Offset 'dirname' does not exist on array\\{dirname\\?\\: string, basename\\: string, extension\\?\\: string, filename\\: string\\}\\.$#"
 			count: 1

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

@@ -228,9 +228,7 @@ module.exports = (Encore) => {
                 '../../ui-dev/src/modules/universal-discovery/components/tree-item-toggle-selection/tree.item.toggle.selection.js',
             ),
         ])
-        .addEntry('ibexa-admin-ui-mfu-js', [
-            path.resolve(__dirname, '../../ui-dev/src/modules/multi-file-upload/multi.file.upload.module.js'),
-        ])
+        .addEntry('ibexa-admin-ui-mfu-js', [path.resolve(__dirname, '../../ui-dev/src/modules/multi-file-upload/config.loader.js')])
         .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'),

src/bundle/Resources/public/js/scripts/admin.location.view.js

@@ -158,8 +158,8 @@
             },
             parentInfo: {
                 contentTypeIdentifier: mfuContainer.dataset.parentContentTypeIdentifier,
-                contentTypeId: parseInt(mfuContainer.dataset.parentContentTypeId, 10),
                 locationPath: mfuContainer.dataset.parentLocationPath,
+                name: mfuContainer.dataset.parentName,
                 language: mfuContainer.dataset.parentContentLanguage,
             },
             currentLanguage: mfuContainer.dataset.currentLanguage,

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

@@ -1,16 +1,17 @@
 let { bootstrap, flatpickr, moment, Popper, Routing, Translator } = window;
 let adminUiConfig = window.ibexa?.adminUiConfig;
+let rootDOMElement = document.body;
 const restInfo = {
     accessToken: null,
     instanceUrl: window.location.origin,
     token: document.querySelector('meta[name="CSRF-Token"]')?.content,
     siteaccess: document.querySelector('meta[name="SiteAccess"]')?.content,
 };
 
-export const setRestInfo = ({ instanceUrl, token, csrfToken, siteaccess }) => {
+export const setRestInfo = ({ instanceUrl, accessToken, token, siteaccess }) => {
     restInfo.instanceUrl = instanceUrl ?? restInfo.instanceUrl;
+    restInfo.accessToken = accessToken ?? restInfo.accessToken;
     restInfo.token = token ?? restInfo.token;
-    restInfo.csrfToken = csrfToken ?? restInfo.csrfToken;
     restInfo.siteaccess = siteaccess ?? restInfo.siteaccess;
 };
 export const setAdminUiConfig = (loadedAdminUiConfig) => (adminUiConfig = loadedAdminUiConfig);
@@ -44,6 +45,7 @@ export const setTranslator = (TranslatorInstance, forceSet = false) => {
         Translator = TranslatorInstance;
     }
 };
+export const setRootDOMElement = (rootDOMElementParam) => (rootDOMElement = rootDOMElementParam);
 
 export const getAdminUiConfig = () => adminUiConfig;
 export const getBootstrap = () => bootstrap;
@@ -53,3 +55,9 @@ export const getPopper = () => Popper;
 export const getRouting = () => Routing;
 export const getTranslator = () => Translator;
 export const getRestInfo = () => restInfo;
+export const getRootDOMElement = () => rootDOMElement;
+export const isExternalInstance = () => {
+    const { instanceUrl } = restInfo;
+
+    return window.origin !== instanceUrl;
+};

src/bundle/Resources/public/scss/ui/modules/common/_tooltip.popup.scss

@@ -9,6 +9,12 @@
         margin: 0;
     }
 
+    &__subtitle {
+        @include modal-subtitle();
+
+        color: $ibexa-color-dark;
+    }
+
     &__close {
         @include close-button();
     }

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss

@@ -5,21 +5,81 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: calculateRem(47px);
 
     &__message {
+        color: $ibexa-color-dark;
+        margin-bottom: calculateRem(16px);
+    }
+
+    &__message--main {
+        cursor: auto;
+        font-weight: 600;
+    }
+
+    &__message--filesize {
+        margin: calculateRem(16px) 0 0 0;
         color: $ibexa-color-dark-400;
-        margin-bottom: calculateRem(12px);
+        font-size: $ibexa-text-font-size-medium;
+    }
+
+    &__max-files-size {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        row-gap: calculateRem(8px);
+
+        &--expanded {
+            .c-drop-area {
+                &__max-file-size-item {
+                    display: flex;
+                }
 
-        &--main {
-            cursor: auto;
-            font-weight: bold;
-            margin-top: calculateRem(44px);
+                &__max-file-size-toggle-btn {
+                    &::after {
+                        transform: rotate(-180deg);
+                    }
+                }
+            }
         }
+    }
+
+    &__max-file-size-item {
+        display: none;
+        gap: calculateRem(4px);
+        justify-content: center;
+        align-items: center;
+        font-size: $ibexa-text-font-size-small;
 
-        &--filesize {
-            color: $ibexa-color-dark-300;
+        &:first-child {
             font-size: $ibexa-text-font-size-medium;
-            margin: calculateRem(12px) 0 calculateRem(44px);
+            display: flex;
+        }
+    }
+
+    &__max-file-size-toggle-btn {
+        width: calculateRem(16px);
+        height: calculateRem(16px);
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+        border: none;
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: calculateRem(6px);
+            height: calculateRem(3px);
+            top: calc(50% - calculateRem(3px));
+            right: 0;
+            border-left: calculateRem(6px) solid transparent;
+            border-right: calculateRem(6px) solid transparent;
+            border-top: calculateRem(6px) solid $ibexa-color-dark-400;
+            transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
         }
     }
 

src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_progress.bar.scss

@@ -9,13 +9,13 @@
         border-radius: calculateRem(4px);
         transition: width 0.2s linear;
         height: calculateRem(8px);
-        width: 10vw;
+        width: calculateRem(176px);
         position: relative;
 
         &::after {
             content: '';
             width: calc(100% - var(--progress));
-            height: calculateRem(10px);
+            height: calculateRem(11px);
             border-radius: calculateRem(4px);
             position: absolute;
             right: 0;
@@ -29,7 +29,7 @@
     }
 
     &__label {
-        font-size: $ibexa-text-font-size-small;
+        font-size: $ibexa-text-font-size-medium;
         color: $ibexa-color-dark-400;
     }
 }