SPIKE Inline validation

client/src/boot/registerTransforms.js

@@ -7,7 +7,6 @@ import addElementToArea from 'state/editor/addElementMutation';
 import ArchiveAction from 'components/ElementActions/ArchiveAction';
 import DuplicateAction from 'components/ElementActions/DuplicateAction';
 import PublishAction from 'components/ElementActions/PublishAction';
-import SaveAction from 'components/ElementActions/SaveAction';
 import UnpublishAction from 'components/ElementActions/UnpublishAction';
 
 export default () => {
@@ -75,7 +74,6 @@ export default () => {
 
   // Add elemental editor actions
   Injector.transform('element-actions', (updater) => {
-    updater.component('ElementActions', SaveAction, 'ElementActionsWithSave');
     updater.component('ElementActions', PublishAction, 'ElementActionsWithPublish');
     updater.component('ElementActions', UnpublishAction, 'ElementActionsWithUnpublish');
     updater.component('ElementActions', DuplicateAction, 'ElementActionsWithDuplicate');

client/src/components/ElementEditor/Content.js

@@ -22,6 +22,7 @@ class Content extends PureComponent {
       handleLoadingError,
       formDirty,
       broken,
+      onFormSchemaResponse,
     } = this.props;
 
     return (
@@ -44,6 +45,7 @@ class Content extends PureComponent {
             activeTab={activeTab}
             onFormInit={onFormInit}
             handleLoadingError={handleLoadingError}
+            onFormSchemaResponse={onFormSchemaResponse}
           />
         }
         {formDirty &&
@@ -69,6 +71,7 @@ Content.propTypes = {
   InlineEditFormComponent: PropTypes.elementType,
   handleLoadingError: PropTypes.func,
   broken: PropTypes.bool,
+  onFormSchemaResponse: PropTypes.func,
 };
 
 Content.defaultProps = {};

client/src/components/ElementEditor/Element.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { elementType } from 'types/elementType';
 import { elementTypeType } from 'types/elementTypeType';
-import { compose } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import { inject } from 'lib/Injector';
 import i18n from 'i18n';
 import classNames from 'classnames';
@@ -15,6 +15,7 @@ import * as TabsActions from 'state/tabs/TabsActions';
 import { DragSource, DropTarget } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { elementDragSource, isOverTop } from 'lib/dragHelpers';
+import * as toastsActions from 'state/toasts/ToastsActions';
 
 /**
  * The Element component used in the context of an ElementEditor shows the summary
@@ -33,12 +34,14 @@ class Element extends Component {
     this.handleLoadingError = this.handleLoadingError.bind(this);
     this.handleTabClick = this.handleTabClick.bind(this);
     this.updateFormTab = this.updateFormTab.bind(this);
+    this.handleFormSchemaResponse = this.handleFormSchemaResponse.bind(this);
 
     this.state = {
       previewExpanded: false,
       initialTab: '',
       loadingError: false,
       childRenderingError: false,
+      justSavedElement: false,
     };
   }
 
@@ -55,6 +58,20 @@ class Element extends Component {
     }
   }
 
+  componentDidUpdate() {
+    if (this.state.justSavedElement) {
+      this.setState({ justSavedElement: false });
+      this.showSuccessToast();
+      // This will trigger a graphql readOneElementalArea request that will cause this
+      // element to re-render including any updated title and versioned badge
+      window.ss.apolloClient.queryManager.reFetchObservableQueries();
+    }
+  }
+
+  showSuccessToast() {
+    this.props.actions.toasts.success('Saved element - wonder what the title is');
+  }
+
   /**
    * Returns the applicable versioned state class names for the element
    *
@@ -215,6 +232,24 @@ class Element extends Component {
     }
   }
 
+  /**
+   * Handle receiving a FormSchema response after inline saving the element
+   */
+  handleFormSchemaResponse(formSchema) {
+    // slightly annoyingly, on validation error formSchema at this point will not have an errors node
+    // instead it will have the original formSchema id used for the GET request to get the formSchema i.e.
+    // admin/elemental-area/schema/<ItemID>
+    // instead of the one used by the POST submission i.e.
+    // admin/elemental-area/elementForm/<LinkID>
+    const hasValidationErrors = formSchema.id.match(/\/schema\/elemental-area\/([0-9]+)/);
+    if (hasValidationErrors) {
+      return;
+    }
+    this.setState({
+      justSavedElement: true
+    });
+  }
+
   render() {
     const {
       element,
@@ -282,6 +317,7 @@ class Element extends Component {
           onFormInit={() => this.updateFormTab(activeTab)}
           handleLoadingError={this.handleLoadingError}
           broken={type.broken}
+          onFormSchemaResponse={this.handleFormSchemaResponse}
         />
       }
 
@@ -339,6 +375,9 @@ function mapDispatchToProps(dispatch, ownProps) {
     onActivateTab(tabSetName, activeTabName) {
       dispatch(TabsActions.activateTab(`element.${elementName}__${tabSetName}`, activeTabName));
     },
+    actions: {
+      toasts: bindActionCreators(toastsActions, dispatch),
+    },
   };
 }
 

client/src/components/ElementEditor/InlineEditForm.js

@@ -13,6 +13,7 @@ class InlineEditForm extends PureComponent {
     super(props);
 
     this.handleLoadingError = this.handleLoadingError.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
 
     this.state = {
       loadingError: null
@@ -41,15 +42,24 @@ class InlineEditForm extends PureComponent {
     handleLoadingError();
   }
 
+  handleSubmit(data, action, submitFn) {
+    return submitFn()
+      .then(formSchema => this.props.onFormSchemaResponse(formSchema));
+  }
+
   render() {
     const { elementId, extraClass, onClick, onFormInit, formHasState } = this.props;
     const { loadingError } = this.state;
 
     const classNames = classnames('element-editor-editform', extraClass);
     const schemaUrl = loadElementSchemaValue('schemaUrl', elementId);
 
+    // formTag needs to be a form rather than a div so that the php FormAction that turns into
+    // a <button type="submit>" submits this <form>, rather than the <form> for the parent page EditForm
+    const formTag = 'form';
+
     const formProps = {
-      formTag: 'div',
+      formTag,
       schemaUrl,
       identifier: 'element',
       refetchSchemaOnMount: !formHasState,
@@ -58,7 +68,9 @@ class InlineEditForm extends PureComponent {
       // FormBuilder forms, such as LinkField v4+, are themselves submitted
       // This FormBuilder form is not submitted in the traditional sense i.e. there is no rendered submit button
       // instead the inline save button will do its own submission in SaveAction.js
-      onSubmit: () => new Promise(resolve => resolve),
+      // onSubmit: () => new Promise(resolve => resolve),
+      // ^^ cannot use this if we do actually want to submit the form though :-)
+      onSubmit: this.handleSubmit,
     };
 
     if (loadingError) {
@@ -82,6 +94,7 @@ InlineEditForm.propTypes = {
   onClick: PropTypes.func,
   elementId: PropTypes.string,
   handleLoadingError: PropTypes.func,
+  onFormSchemaResponse: PropTypes.func.isRequired,
 };
 
 function mapStateToProps(state, ownProps) {