After QA

src/bundle/Resources/translations/ibexa_multi_file_upload.en.xliff

@@ -106,14 +106,19 @@
         <target state="new">Upload file</target>
         <note>key: upload_btn.label</note>
       </trans-unit>
+      <trans-unit id="19d5456f3b1299d65b92474d58e70ff787010ba1" resname="upload_popup.cancel_label">
+        <source>Cancel pending upload</source>
+        <target state="new">Cancel pending upload</target>
+        <note>key: upload_popup.cancel_label</note>
+      </trans-unit>
       <trans-unit id="36999e5e928304452a57984fe9fb29daef497121" resname="upload_popup.close_label">
-        <source>Confirm and close</source>
-        <target state="new">Confirm and close</target>
+        <source>Close</source>
+        <target state="new">Close</target>
         <note>key: upload_popup.close_label</note>
       </trans-unit>
       <trans-unit id="69ca9f45ba70d7b75027057e8b1f23057801a70e" resname="upload_popup.confirm_label">
-        <source>Cancel pending upload</source>
-        <target state="new">Cancel pending upload</target>
+        <source>Confirm and close</source>
+        <target state="new">Confirm and close</target>
         <note>key: upload_popup.confirm_label</note>
       </trans-unit>
       <trans-unit id="8964e0ca9f836009ee40abf9e9b013b41b2dd2d4" resname="upload_popup.label">

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

@@ -34,6 +34,7 @@ import User from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/user.svg
 import UserGroup from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/user_group.svg';
 import Upload from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/upload.svg';
 import UploadImage from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/upload-image.svg';
+import Warning from '@ibexa-admin-ui/src/bundle/Resources/public/img/icons/warning.svg';
 
 const iconsMap = {
     about: About,
@@ -69,6 +70,7 @@ const iconsMap = {
     user_group: UserGroup,
     upload: Upload,
     'upload-image': UploadImage,
+    warning: Warning
 };
 
 const InculdedIcon = (props) => {

src/bundle/ui-dev/src/modules/common/pagination/pagination.button.js

@@ -25,12 +25,13 @@ PaginationButton.propTypes = {
     label: PropTypes.string,
     disabled: PropTypes.bool,
     onPageChange: PropTypes.func,
-    pageIndex: PropTypes.number.isRequired,
+    pageIndex: PropTypes.number,
     additionalClasses: PropTypes.string,
     buttonAdditionalClasses: PropTypes.string,
 };
 
 PaginationButton.defaultProps = {
+    pageIndex: null,
     label: '',
     disabled: false,
     additionalClasses: '',

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

@@ -342,14 +342,15 @@ export default class UploadItemComponent extends Component {
         const label = Translator.trans(/*@Desc("Abort")*/ 'abort.label', {}, 'ibexa_multi_file_upload');
 
         return (
-            <div
+            <button
                 className="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-btn--small c-upload-list-item__action c-upload-list-item__action--abort"
                 onClick={this.abortUploading}
                 title={label}
                 tabIndex="-1"
+                type="button"
             >
                 <Icon name="trash" extraClasses="ibexa-icon--small" />
-            </div>
+            </button>
         );
     }
 
@@ -373,7 +374,7 @@ export default class UploadItemComponent extends Component {
 
     renderEditBtn() {
         const Translator = getTranslator();
-        const { uploaded, failed } = this.state;
+        const { uploaded, failed, struct } = this.state;
         const canEdit = uploaded && !failed;
 
         if (!canEdit || this.isExternalInstance) {
@@ -383,19 +384,21 @@ export default class UploadItemComponent extends Component {
         const label = Translator.trans(/*@Desc("Edit")*/ 'edit.label', {}, 'ibexa_multi_file_upload');
 
         return (
-            <div
+            <button
                 className="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-btn--small c-upload-list-item__action c-upload-list-item__action--edit"
                 title={label}
                 onClick={this.handleEditBtnClick}
                 tabIndex="-1"
+                type="button"
+                disabled={!struct}
             >
                 <Icon name="edit" extraClasses="ibexa-icon--small" />
-            </div>
+            </button>
         );
     }
 
     renderDeleteBtn() {
-        const { uploaded, aborted, failed } = this.state;
+        const { uploaded, aborted, failed, struct } = this.state;
         const canDelete = (uploaded && !aborted) || failed;
 
         if (!canDelete) {
@@ -406,14 +409,16 @@ export default class UploadItemComponent extends Component {
         const label = Translator.trans(/*@Desc("Delete")*/ 'delete.label', {}, 'ibexa_multi_file_upload');
 
         return (
-            <div
+            <button
                 className="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-btn--small c-upload-list-item__action c-upload-list-item__action--delete"
                 onClick={this.deleteFile}
                 title={label}
                 tabIndex="-1"
+                type="button"
+                disabled={!(struct || failed)}
             >
                 <Icon name="trash" extraClasses="ibexa-icon--small" />
-            </div>
+            </button>
         );
     }
 

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

@@ -13,15 +13,18 @@ export default class UploadListComponent extends Component {
         };
     }
 
-    componentDidUpdate() {
-        this.props.onAfterUpload(this.state.items);
-    }
-
     handleAfterUpload(item) {
-        this.props.removeItemsToUpload([item]);
-        this.setState((state) => ({
-            items: [...state.items, item],
-        }));
+        this.setState(
+            (state) => {
+                return {
+                    items: [...state.items, item],
+                };
+            },
+            () => {
+                this.props.removeItemsToUpload([item]);
+                this.props.onAfterUpload(this.state.items);
+            },
+        );
     }
 
     handleAfterAbort(item) {

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

@@ -39,7 +39,7 @@ export default class UploadPopupModule extends Component {
 
             maxFileSizes.push({
                 name: contentTypeName,
-                maxFileSize: contentTypeMapping.maxFileSize || defaultMaxFileSize,
+                maxFileSize: contentTypeMapping?.maxFileSize || defaultMaxFileSize,
             });
 
             return maxFileSizes;
@@ -48,7 +48,18 @@ export default class UploadPopupModule extends Component {
 
     render() {
         const Translator = getTranslator();
+        const hasAnyUploadedItems = !!this.props.uploadedItems.length;
+        const hasAnyItemsToUpload = !!this.props.itemsToUpload.length;
         const label = Translator.trans(/*@Desc("Upload")*/ 'upload_popup.label', {}, 'ibexa_multi_file_upload');
+        const confirmBtnLabel =
+            !hasAnyUploadedItems && !hasAnyItemsToUpload
+                ? Translator.trans(/*@Desc("Close")*/ 'upload_popup.close_label', {}, 'ibexa_multi_file_upload')
+                : Translator.trans(/*@Desc("Confirm and close")*/ 'upload_popup.confirm_label', {}, 'ibexa_multi_file_upload');
+        const closeBtnLabel = Translator.trans(
+            /*@Desc("Cancel pending upload")*/ 'upload_popup.cancel_label',
+            {},
+            'ibexa_multi_file_upload',
+        );
         const {
             addItemsToUpload,
             subtitle,
@@ -77,8 +88,8 @@ export default class UploadPopupModule extends Component {
             onConfirm,
             onClose,
             title: Translator.trans(/*@Desc("Multi-file upload")*/ 'upload_popup.title', {}, 'ibexa_multi_file_upload'),
-            confirmLabel: Translator.trans(/*@Desc("Confirm and close")*/ 'upload_popup.close_label', {}, 'ibexa_multi_file_upload'),
-            closeLabel: Translator.trans(/*@Desc("Cancel pending upload")*/ 'upload_popup.confirm_label', {}, 'ibexa_multi_file_upload'),
+            confirmLabel: confirmBtnLabel,
+            closeLabel: closeBtnLabel,
             confirmBtnAttrs: {
                 disabled: itemsToUpload.length,
             },
@@ -123,6 +134,7 @@ UploadPopupModule.propTypes = {
     subtitle: PropTypes.string,
     visible: PropTypes.bool,
     itemsToUpload: PropTypes.array,
+    uploadedItems: PropTypes.array,
     onAfterUpload: PropTypes.func.isRequired,
     createFileStruct: PropTypes.func.isRequired,
     publishFile: PropTypes.func.isRequired,
@@ -157,6 +169,7 @@ UploadPopupModule.defaultProps = {
     subtitle: '',
     visible: true,
     itemsToUpload: [],
+    uploadedItems: [],
     currentLanguage: '',
     contentCreatePermissionsConfig: {},
     onConfirm: () => {},

src/bundle/ui-dev/src/modules/multi-file-upload/multi.file.upload.module.js

@@ -217,6 +217,7 @@ export default class MultiFileUploadModule extends Component {
             onClose: this.hidePopup,
             onConfirm: this.confirmPopup,
             itemsToUpload: this.state.itemsToUpload,
+            uploadedItems: this._itemsUploaded,
             onAfterUpload: this.handleAfterUpload,
             onAfterDelete: this.handleAfterDelete,
             preventDefaultAction: this.preventDefaultAction,