Merge pull request #449 from creative-commoners/pulls/4.0/let-them-no…

…-whats-up

NEW Don't render InlineEditForm on loadingError

client/src/components/ElementEditor/Content.js

@@ -12,7 +12,8 @@ class Content extends PureComponent {
       InlineEditFormComponent,
       SummaryComponent,
       activeTab,
-      onFormInit
+      onFormInit,
+      handleLoadingError
     } = this.props;
 
     return (
@@ -33,6 +34,7 @@ class Content extends PureComponent {
             elementId={id}
             activeTab={activeTab}
             onFormInit={onFormInit}
+            handleLoadingError={handleLoadingError}
           />
         }
       </div>
@@ -48,6 +50,7 @@ Content.propTypes = {
   previewExpanded: PropTypes.bool,
   SummaryComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   InlineEditFormComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  handleLoadingError: PropTypes.func,
 };
 
 Content.defaultProps = {};

client/src/components/ElementEditor/Element.js

@@ -28,6 +28,7 @@ class Element extends Component {
     this.state = {
       previewExpanded: false,
       initialTab: '',
+      loadingError: false,
     };
   }
 
@@ -52,6 +53,16 @@ class Element extends Component {
     return `${baseClassName}--published`;
   }
 
+  /**
+   * Prevents the Element from being expanded in case a loading error occurred.
+   * This gets triggered from the InlineEditForm component.
+   */
+   handleLoadingError() {
+    this.setState({
+      loadingError: true
+    });
+   }
+
   /**
    * Dispatcher to Redux-Form state for the Tabs container 'value'
    * @param {string} activeTab Name prop of the active tab
@@ -83,8 +94,9 @@ class Element extends Component {
    */
   handleTabClick(toBeActiveTab) {
     const { activeTab } = this.props;
+    const { loadingError } = this.state;
 
-    if (toBeActiveTab !== activeTab) {
+    if (toBeActiveTab !== activeTab && !loadingError) {
       this.setState({
         previewExpanded: true,
       });
@@ -99,14 +111,15 @@ class Element extends Component {
    */
   handleExpand(event) {
     const { element, link } = this.props;
+    const { loadingError } = this.state;
 
     if (event.target.type === 'button') {
       // Stop bubbling if the click target was a button within this container
       event.stopPropagation();
       return;
     }
 
-    if (element.InlineEditable) {
+    if (element.InlineEditable && !loadingError) {
       this.setState({
         previewExpanded: !this.state.previewExpanded
       });
@@ -200,6 +213,7 @@ class Element extends Component {
           previewExpanded={previewExpanded}
           activeTab={activeTab}
           onFormInit={() => this.updateFormTab(activeTab)}
+          handleLoadingError={this.handleLoadingError}
         />
       </div>
     );

client/src/components/ElementEditor/InlineEditForm.js

@@ -1,11 +1,45 @@
+/* global window */
 import React, { PureComponent, PropTypes } from 'react';
 import classnames from 'classnames';
 import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
 import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
+import i18n from 'i18n';
 
 class InlineEditForm extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleLoadingError = this.handleLoadingError.bind(this);
+
+    this.state = {
+      loadingError: null
+    };
+  }
+
+  handleLoadingError() {
+    const { jQuery: $ } = window;
+    const { handleLoadingError } = this.props;
+
+    this.setState({
+      loadingError: true,
+    });
+
+    $.noticeAdd({
+      text: i18n.inject(
+        i18n._t(
+          'EditForm.ERROR_NOTIFICATION',
+          'Error displaying the edit form for this block'),
+        ),
+        stay: true,
+        type: 'notice'
+    });
+
+    handleLoadingError();
+  }
+
   render() {
     const { elementId, extraClass, onClick, onFormInit } = this.props;
+    const { loadingError } = this.state;
 
     const classNames = classnames('element-editor-editform', extraClass);
     const schemaUrl = loadElementSchemaValue('schemaUrl', elementId);
@@ -15,8 +49,13 @@ class InlineEditForm extends PureComponent {
       schemaUrl,
       identifier: 'element',
       refetchSchemaOnMount: false,
+      onLoadingError: this.handleLoadingError
     };
 
+    if (loadingError) {
+      formProps.loading = false;
+    }
+
     if (typeof onFormInit === 'function') {
       formProps.onReduxFormInit = onFormInit;
     }
@@ -33,6 +72,7 @@ InlineEditForm.propTypes = {
   extraClass: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onClick: PropTypes.func,
   elementId: PropTypes.string,
+  handleLoadingError: PropTypes.func,
 };
 
 export default InlineEditForm;

src/Controllers/ElementalAreaController.php

@@ -6,7 +6,7 @@
 use DNADesign\Elemental\Models\BaseElement;
 use Exception;
 use Psr\Log\LoggerInterface;
-use SilverStripe\Admin\LeftAndMain;
+use SilverStripe\CMS\Controllers\CMSMain;
 use SilverStripe\Control\HTTPRequest;
 use SilverStripe\Control\HTTPResponse;
 use SilverStripe\Control\HTTPResponse_Exception;
@@ -18,7 +18,7 @@
 /**
  * Controller for "ElementalArea" - handles loading and saving of in-line edit forms in an elemental area in admin
  */
-class ElementalAreaController extends LeftAndMain
+class ElementalAreaController extends CMSMain
 {
     const FORM_NAME_TEMPLATE = 'ElementForm_%s';
 
@@ -90,6 +90,10 @@ public function getElementForm($elementID)
             ['Record' => $element]
         );
 
+        if (!$element->canEdit()) {
+            $form->makeReadonly();
+        }
+
         return $form;
     }