EZEE-2660: 500 error occurs when publishing form in form on the fly

Piotr Nalepa · Piotr Nalepa · commit 4dd7f64f07f2 · 2019-01-21T08:59:51.000+01:00
diff --git a/.prettierrc b/.prettierrc
@@ -3,7 +3,7 @@
     "tabWidth": 4,
     "semi": true,
     "bracketSpacing": true,
-    "jsxBracketsSameLine": true,
+    "jsxBracketSameLine": true,
     "arrowParens": "always",
     "singleQuote": true,
     "trailingComma": "es5"
diff --git a/Resources/public/js/MultiFileUpload.module.js b/Resources/public/js/MultiFileUpload.module.js
diff --git a/Resources/public/js/MultiFileUpload.module.js.map b/Resources/public/js/MultiFileUpload.module.js.map
diff --git a/Resources/public/js/SubItems.module.js b/Resources/public/js/SubItems.module.js
diff --git a/Resources/public/js/SubItems.module.js.map b/Resources/public/js/SubItems.module.js.map
diff --git a/Resources/public/js/UniversalDiscovery.module.js b/Resources/public/js/UniversalDiscovery.module.js
diff --git a/Resources/public/js/UniversalDiscovery.module.js.map b/Resources/public/js/UniversalDiscovery.module.js.map
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
         "build": "webpack --config webpack.prod.js",
         "builddev": "webpack --config webpack.dev.js",
         "watch": "webpack --watch --config webpack.dev.js",
-        "watchprod": "webpack --watch --config webpack.prod.js"
+        "watchprod": "webpack --watch --config webpack.prod.js",
+        "fix-cs": "eslint --fix src/ && prettier --write src/**/*.js"
     },
     "devDependencies": {
         "babel-core": "^6.26.3",
diff --git a/src/modules/common/popup/popup.component.js b/src/modules/common/popup/popup.component.js
@@ -90,8 +90,7 @@ class Popup extends Component {
                     className="close c-popup__btn--close"
                     data-dismiss="modal"
                     aria-label={closeBtnLabel}
-                    onClick={this.props.onClose}
-                >
+                    onClick={this.props.onClose}>
                     <Icon name="discard" extraClasses="ez-icon--medium" />
                 </button>
             </div>
diff --git a/src/modules/multi-file-upload/components/upload-list/upload.list.component.js b/src/modules/multi-file-upload/components/upload-list/upload.list.component.js
@@ -188,6 +188,7 @@ UploadListComponent.propTypes = {
         language: PropTypes.string.isRequired,
     }).isRequired,
     uploadedItemsListTitle: PropTypes.string.isRequired,
+    contentCreatePermissionsConfig: PropTypes.object.isRequired,
 };
 
 UploadListComponent.defaultProps = {
diff --git a/src/modules/sub-items/sub.items.module.js b/src/modules/sub-items/sub.items.module.js
@@ -408,7 +408,7 @@ export default class SubItemsModule extends Component {
      */
     deselectItems(locationsIds) {
         const { selectedItems } = this.state;
-        const newSelection = new Map([...selectedItems].filter(([locationId, item]) => !locationsIds.has(locationId)));
+        const newSelection = new Map([...selectedItems].filter(([locationId]) => !locationsIds.has(locationId)));
 
         this.setState(() => ({ selectedItems: newSelection }));
     }
@@ -634,8 +634,7 @@ export default class SubItemsModule extends Component {
                     onClick={this.closeBulkDeletePopup}
                     type="button"
                     className="btn btn-secondary btn--no m-sub-items__confirmation-modal-cancel-btn"
-                    data-dismiss="modal"
-                >
+                    data-dismiss="modal">
                     {cancelLabel}
                 </button>
                 <button onClick={this.onBulkDeletePopupConfirm} type="button" className="btn btn-danger font-weight-bold btn--trigger">
@@ -665,8 +664,7 @@ export default class SubItemsModule extends Component {
                 isLoading={false}
                 size="medium"
                 footerChildren={this.renderConfirmationPopupFooter()}
-                noHeader={true}
-            >
+                noHeader={true}>
                 <div className="m-sub-items__confirmation-modal-body">{confirmationMessage}</div>
             </Popup>,
             this.bulkDeleteModalContainer
diff --git a/src/modules/universal-discovery/components/content-creator/content.creator.component.js b/src/modules/universal-discovery/components/content-creator/content.creator.component.js
@@ -11,23 +11,31 @@ export default class ContentCreatorComponent extends Component {
 
         this.handleIframeLoad = this.handleIframeLoad.bind(this);
         this.handlePublish = this.handlePublish.bind(this);
+        this.enablePublishBtn = this.enablePublishBtn.bind(this);
+        this.disablePublishBtn = this.disablePublishBtn.bind(this);
+        this.renderPublishBtn = this.renderPublishBtn.bind(this);
+
+        this._refIframe = null;
 
         this.state = {
             iframeLoading: true,
+            publishBtnDisabled: false,
         };
     }
 
     handlePublish() {
-        this.iframe.contentWindow.onbeforeunload = () => {};
-        this.iframe.contentWindow.document.body.querySelector('#ezrepoforms_content_edit_publish').click();
+        this._refIframe.contentWindow.onbeforeunload = () => {};
+        this._refIframe.contentWindow.document.body.querySelector('#ezrepoforms_content_edit_publish').click();
     }
 
     handleIframeLoad() {
-        const locationId = this.iframe.contentWindow.document.querySelector('meta[name="LocationID"]');
+        const iframeWindow = this._refIframe.contentWindow;
+        const iframeDoc = iframeWindow.document;
+        const locationId = iframeDoc.querySelector('meta[name="LocationID"]');
         const iframeUrl = this.generateIframeUrl();
 
-        if (this.iframe.contentWindow.location.pathname !== iframeUrl && !locationId) {
-            this.iframe.setAttribute('src', iframeUrl);
+        if (iframeWindow.location.pathname !== iframeUrl && !locationId) {
+            this._refIframe.setAttribute('src', iframeUrl);
 
             return;
         }
@@ -37,13 +45,24 @@ export default class ContentCreatorComponent extends Component {
         } else {
             this.setState((state) => Object.assign({}, state, { iframeLoading: false }));
 
-            this.iframe.contentWindow.onbeforeunload = () => {
+            iframeWindow.onbeforeunload = () => {
                 return '';
             };
-            this.iframe.contentWindow.onunload = () => {
+            iframeWindow.onunload = () => {
                 this.setState((state) => Object.assign({}, state, { iframeLoading: true }));
             };
         }
+
+        iframeDoc.body.addEventListener('fbFormBuilderLoaded', this.disablePublishBtn, false);
+        iframeDoc.body.addEventListener('fbFormBuilderUnloaded', this.enablePublishBtn, false);
+    }
+
+    enablePublishBtn() {
+        this.setState(() => ({ publishBtnDisabled: false }));
+    }
+
+    disablePublishBtn() {
+        this.setState(() => ({ publishBtnDisabled: true }));
     }
 
     loadLocationInfo(locationId) {
@@ -84,6 +103,21 @@ export default class ContentCreatorComponent extends Component {
         );
     }
 
+    renderPublishBtn() {
+        const publishLabel = Translator.trans(/*@Desc("Publish")*/ 'content_on_the_fly.publish.label', {}, 'universal_discovery_widget');
+        const attrs = {
+            className: 'm-ud__action--publish',
+            onClick: this.handlePublish,
+            type: 'button',
+        };
+
+        if (this.state.publishBtnDisabled) {
+            attrs.disabled = true;
+        }
+
+        return <button {...attrs}>{publishLabel}</button>;
+    }
+
     render() {
         const { selectedContentType, selectedLanguage, maxHeight, onCancel } = this.props;
         const title = Translator.trans(
@@ -95,33 +129,30 @@ export default class ContentCreatorComponent extends Component {
             'universal_discovery_widget'
         );
         const cancelLabel = Translator.trans(/*@Desc("Cancel")*/ 'cancel.label', {}, 'universal_discovery_widget');
-        const publishLabel = Translator.trans(/*@Desc("Publish")*/ 'content_on_the_fly.publish.label', {}, 'universal_discovery_widget');
         const iframeUrl = this.generateIframeUrl();
         const contentClass = this.state.iframeLoading ? 'm-ud__content is-loading' : 'm-ud__content';
 
         return (
             <div className="m-ud__wrapper">
-                <div className="m-ud c-content-creator">
+                <div className="m-ud c-content-creator" ref={this.props.setMainContainerRef}>
                     <h1 className="m-ud__title">{title}</h1>
                     <div className="m-ud__content-wrapper">
-                        <div className={contentClass} ref={(ref) => (this._refContentContainer = ref)}>
+                        <div className={contentClass}>
                             {this.renderLoadingSpinner()}
                             <iframe
                                 src={iframeUrl}
-                                ref={(ref) => (this.iframe = ref)}
+                                ref={(ref) => (this._refIframe = ref)}
                                 className="c-content-creator__iframe"
                                 onLoad={this.handleIframeLoad}
                                 style={{ height: `${maxHeight + 32}px` }}
                             />
                         </div>
                         <div className="m-ud__actions">
                             <div className="m-ud__btns">
-                                <button className="m-ud__action--cancel" onClick={onCancel}>
+                                <button className="m-ud__action--cancel" onClick={onCancel} type="button">
                                     {cancelLabel}
                                 </button>
-                                <button className="m-ud__action--publish" onClick={this.handlePublish}>
-                                    {publishLabel}
-                                </button>
+                                {this.renderPublishBtn()}
                             </div>
                         </div>
                     </div>
@@ -140,6 +171,7 @@ ContentCreatorComponent.propTypes = {
     handlePublish: PropTypes.func.isRequired,
     loadLocation: PropTypes.func,
     restInfo: PropTypes.object.isRequired,
+    setMainContainerRef: PropTypes.func.isRequired,
 };
 
 ContentCreatorComponent.defaultProps = {
diff --git a/src/modules/universal-discovery/components/content-creator/css/content.creator.component.css b/src/modules/universal-discovery/components/content-creator/css/content.creator.component.css
@@ -35,12 +35,20 @@
     background: #cb3400;
 }
 
+.m-ud__action--publish[disabled],
+.m-ud__action--publish[disabled]:hover,
+.m-ud__action--publish[disabled]:focus {
+    cursor: not-allowed;
+    background: #f15a10;
+    opacity: 0.3;
+}
+
 .m-ud__content {
     position: relative;
 }
 
 .is-loading:before {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
diff --git a/src/modules/universal-discovery/components/content-table/content.table.item.component.js b/src/modules/universal-discovery/components/content-table/content.table.item.component.js
@@ -6,25 +6,12 @@ import SelectContentButtonComponent from '../select-content-button/select.conten
 import './css/content.table.item.component.css';
 
 const ContentTableItemComponent = (props) => {
-    const {
-        onItemClick,
-        onPreview,
-        data,
-        contentTypesMap,
-        multiple,
-        selectedContent,
-        onSelectContent,
-        onItemRemove,
-        canSelectContent,
-    } = props;
+    const { onPreview, data, contentTypesMap, multiple, selectedContent, onSelectContent, onItemRemove, canSelectContent } = props;
     const notAvailableLabel = Translator.trans(/*@Desc("N/A")*/ 'content_table.not_available.label', {}, 'universal_discovery_widget');
     const item = data.ContentInfo.Content;
     const contentType = contentTypesMap ? contentTypesMap[item.ContentType._href] : null;
     const contentTypeIdentifier = contentType ? contentType.identifier : null;
     const contentTypeName = contentTypeIdentifier ? window.eZ.adminUiConfig.contentTypeNames[contentTypeIdentifier] : notAvailableLabel;
-    const onClick = !!onItemClick ? onItemClick.bind(null, data) : null;
-    const isSelectedContent = selectedContent.find((content) => content.id === data.id);
-    const iconId = isSelectedContent ? 'checkmark' : 'create';
 
     return (
         <div className="c-content-table-item" onClick={() => onPreview(data)}>
diff --git a/src/modules/universal-discovery/components/search/search.pagination.component.js b/src/modules/universal-discovery/components/search/search.pagination.component.js
@@ -8,7 +8,7 @@ const SearchPaginationComponent = (props) => {
     console.warn('[DEPRECATED] it will be removed from ezplatform-admin-ui-modules 2.0');
     console.warn('[DEPRECATED] use ContentTablePaginationComponent instead');
 
-    const { minIndex, activeIndex, maxIndex, onChange, labels } = props;
+    const { minIndex, activeIndex, maxIndex, onChange } = props;
     const btnFirstLabel = Translator.trans(/*@Desc("First")*/ 'pagination.first', {}, 'universal_discovery_widget');
     const btnPrevLabel = Translator.trans(/*@Desc("Previous")*/ 'pagination.prev', {}, 'universal_discovery_widget');
     const btnNextLabel = Translator.trans(/*@Desc("Next")*/ 'pagination.next', {}, 'universal_discovery_widget');
diff --git a/src/modules/universal-discovery/components/selected-content/selected.content.component.js b/src/modules/universal-discovery/components/selected-content/selected.content.component.js
@@ -69,15 +69,15 @@ export default class SelectedContentComponent extends PureComponent {
         let limitLabel = '';
 
         if (this.props.itemsLimit && this.props.multiple) {
-            const limitLabel = Translator.trans(
+            const limitLabelText = Translator.trans(
                 /*@Desc("Limit %items% max")*/ 'select_content.limit.label',
                 {
                     items: this.props.itemsLimit,
                 },
                 'universal_discovery_widget'
             );
 
-            limitLabel = <small className="c-selected-content__label--limit">{limitLabel}</small>;
+            limitLabel = <small className="c-selected-content__label--limit">{limitLabelText}</small>;
         }
 
         return limitLabel;
diff --git a/src/modules/universal-discovery/services/bookmark.service.js b/src/modules/universal-discovery/services/bookmark.service.js
@@ -1,5 +1,10 @@
 import { showErrorNotification } from '../../common/services/notification.service';
-import { getBasicRequestInit, handleRequestResponse, handleRequestError, handleRequestResponseStatus } from '../../common/helpers/request.helper.js';
+import {
+    getBasicRequestInit,
+    handleRequestResponse,
+    handleRequestError,
+    handleRequestResponseStatus,
+} from '../../common/helpers/request.helper.js';
 
 const ENDPOINT_BOOKMARK = '/api/ezp/v2/bookmark';
 
diff --git a/src/modules/universal-discovery/universal.discovery.module.js b/src/modules/universal-discovery/universal.discovery.module.js
@@ -1062,6 +1062,7 @@ export default class UniversalDiscoveryModule extends Component {
                     onCancel={this.props.onCancel}
                     handlePublish={this.handlePublish}
                     restInfo={this.props.restInfo}
+                    setMainContainerRef={this.setMainContainerRef}
                 />
             );
         }
