SPIKE Inline validation

client/src/boot/registerTransforms.js

@@ -6,8 +6,8 @@ import readBlocksForAreaQuery from 'state/editor/readBlocksForAreaQuery';
 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 PublishAction from 'components/ElementActions/PublishAction';
 import UnpublishAction from 'components/ElementActions/UnpublishAction';
 
 export default () => {

client/src/components/ElementActions/PublishAction.js

@@ -1,14 +1,13 @@
 /* global window */
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import { compose } from 'redux';
 import AbstractAction from 'components/ElementActions/AbstractAction';
 import publishBlockMutation from 'state/editor/publishBlockMutation';
 import i18n from 'i18n';
-import backend from 'lib/Backend';
 import { connect } from 'react-redux';
-import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
 import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
-import { initialize } from 'redux-form';
+import { ElementContext } from 'components/ElementEditor/Element';
+
 
 /**
  * Show a toast message reporting whether publication of Element was successful
@@ -37,85 +36,31 @@ const reportPublicationStatus = (type, title, success) => {
   });
 };
 
-/**
- * Post updated Element data to save it
- *
- * @param {number} id Element ID
- * @param {object} formData Information to be saved
- * @param {string} securityId Security ID for form submission
- */
-const performSaveForElementWithFormData = (id, formData, securityId) => {
-  const saveEndpoint = backend.createEndpointFetcher({
-    url: loadElementSchemaValue('saveUrl', id),
-    method: loadElementSchemaValue('saveMethod'),
-    payloadFormat: loadElementSchemaValue('payloadFormat'),
-    defaultData: {
-      SecurityID: securityId
-    },
-  });
-
-  // Perform save & get new version number to publish
-  return saveEndpoint(formData)
-    .then(() => window.ss.apolloClient.queryManager.reFetchObservableQueries())
-    .then((input) => {
-      const preview = window.jQuery('.cms-preview');
-      preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
-      return input;
-    })
-    .then((newPageData) => {
-      const newElementData = newPageData[0] && newPageData[0]
-        .data
-        .readOneElementalArea
-        .elements
-        .find((elementData) => elementData.id === id);
-      return newElementData && newElementData.version;
-    });
-};
-
 /**
  * Adds the elemental menu action to publish a draft/modified block
  */
 const PublishAction = (MenuComponent) => (props) => {
-  if (props.type.broken) {
-    // Don't allow this action for a broken element.
-    return (
-      <MenuComponent {...props} />
-    );
-  }
-
-  const { element, formDirty } = props;
+  const {
+    formDirty,
+    onPublishButtonClick,
+    doPublishElement,
+    onAfterPublish,
+    formHasRendered,
+  } = useContext(ElementContext);
+
+  const { element, type, actions } = props;
+
+  const publishElement = () => {
+    // handlePublishBlock is a graphql mutation defined in publishBlockMutation.js
+    actions.handlePublishBlock(element.id)
+      .then(() => reportPublicationStatus(type.title, element.title, true))
+      .catch(() => reportPublicationStatus(type.title, element.title, false));
+    onAfterPublish();
+  };
 
   const handleClick = (event) => {
     event.stopPropagation();
-
-    const {
-      element: {
-        id,
-        title,
-      },
-      type,
-      securityId,
-      formData,
-      actions: { handlePublishBlock },
-      reinitialiseForm,
-    } = props;
-
-    let actionFlow = new Promise((resolve) => resolve());
-
-    // Edits have been made to the form. Peform a "Save & Publish"
-    if (formDirty) {
-      actionFlow = performSaveForElementWithFormData(id, formData, securityId)
-        .then((passthrough) => {
-          reinitialiseForm(formData);
-          return passthrough;
-        });
-    }
-
-    // Perform publish. Data is assumed to be up to date
-    actionFlow
-      .then(() => handlePublishBlock(id))
-      .then(() => reportPublicationStatus(type.title, title, true))
-      .catch(() => reportPublicationStatus(type.title, title, false));
+    onPublishButtonClick();
   };
 
   const disabled = props.element.canPublish !== undefined && !props.element.canPublish;
@@ -132,6 +77,19 @@ const PublishAction = (MenuComponent) => (props) => {
     toggle: props.toggle,
   };
 
+  useEffect(() => {
+    if (formHasRendered && doPublishElement) {
+      publishElement();
+    }
+  }, [formHasRendered, doPublishElement]);
+
+  if (props.type.broken) {
+    // Don't allow this action for a broken element.
+    return (
+      <MenuComponent {...props} />
+    );
+  }
+
   return (
     <MenuComponent {...props}>
       {props.children}
@@ -149,27 +107,17 @@ function mapStateToProps(state, ownProps) {
     formData = state.form.formState.element[formName].values;
   }
 
+  // TODO: remove some of this?
   return {
     formData,
     securityId: state.config.SecurityID,
-    formDirty: state.unsavedForms.find((unsaved) => unsaved.name === `element.${formName}`),
-  };
-}
-
-function mapDispatchToProps(dispatch, ownProps) {
-  const formName = loadElementFormStateName(ownProps.element.id);
-
-  return {
-    reinitialiseForm(savedData) {
-      dispatch(initialize(`element.${formName}`, savedData));
-    }
   };
 }
 
 export { PublishAction as Component };
 
 export default compose(
   publishBlockMutation,
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps),
   PublishAction
 );

client/src/components/ElementActions/SaveAction.js

@@ -1,86 +1,28 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import AbstractAction from 'components/ElementActions/AbstractAction';
-import backend from 'lib/Backend';
 import i18n from 'i18n';
-import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
 import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
-import { initialize } from 'redux-form';
+import { ElementContext } from 'components/ElementEditor/Element';
 
-/**
- * Using a REST backend, serialize the current form data and post it to the backend endpoint to save
- * the inline edit form's data for the current block.
- */
 const SaveAction = (MenuComponent) => (props) => {
-  if (!props.expandable || props.type.broken) {
-    // Some elemental blocks can not be edited inline (e.g. User form blocks)
-    // We don't want to add a "Save" action for those blocks.
-    return (
-      <MenuComponent {...props} />
-    );
-  }
+  const {
+    doSaveElement,
+    onSaveButtonClick,
+    onAfterSave,
+    formHasRendered,
+    submitForm
+  } = useContext(ElementContext);
 
   const handleClick = (event) => {
     event.stopPropagation();
+    onSaveButtonClick();
+  };
 
-    const { element, type, securityId, formData, reinitialiseForm } = props;
-    const { jQuery: $ } = window;
-    const noTitle = i18n.inject(
-      i18n._t(
-        'ElementHeader.NOTITLE',
-        'Untitled {type} block'
-      ),
-      { type: type.title }
-    );
-
-    const endpointSpec = {
-      url: loadElementSchemaValue('saveUrl', element.id),
-      method: loadElementSchemaValue('saveMethod'),
-      payloadFormat: loadElementSchemaValue('payloadFormat'),
-      defaultData: {
-        SecurityID: securityId
-      },
-    };
-
-    const endpoint = backend.createEndpointFetcher(endpointSpec);
-    endpoint(formData)
-      .then(() => {
-        // Update the Apollo query cache with the new form data
-        const { apolloClient } = window.ss;
-
-        apolloClient.queryManager.reFetchObservableQueries();
-        reinitialiseForm(formData);
-
-        const preview = $('.cms-preview');
-        preview.entwine('ss.preview')._loadUrl(preview.find('iframe').attr('src'));
-
-        const newTitle = formData ? formData[`PageElements_${element.id}_Title`] : null;
-        $.noticeAdd({
-          text: i18n.inject(
-            i18n._t(
-              'ElementSaveAction.SUCCESS_NOTIFICATION',
-              'Saved \'{title}\' successfully'
-            ),
-            { title: newTitle || noTitle }
-          ),
-          stay: false,
-          type: 'success'
-        });
-      })
-      .catch(() => {
-        $.noticeAdd({
-          text: i18n.inject(
-            i18n._t(
-              'ElementSaveAction.ERROR_NOTIFICATION',
-              'Error saving \'{title}\''
-            ),
-            { title: element.Title || noTitle }
-          ),
-          stay: false,
-          type: 'error'
-        });
-      });
+  const saveElement = () => {
+    submitForm();
+    onAfterSave();
   };
 
   const newProps = {
@@ -89,6 +31,20 @@ const SaveAction = (MenuComponent) => (props) => {
     onClick: handleClick,
   };
 
+  useEffect(() => {
+    if (formHasRendered && doSaveElement) {
+      saveElement();
+    }
+  }, [formHasRendered, doSaveElement]);
+
+  if (!props.expandable || props.type.broken) {
+    // Some elemental blocks can not be edited inline (e.g. User form blocks)
+    // We don't want to add a "Save" action for those blocks.
+    return (
+      <MenuComponent {...props} />
+    );
+  }
+
   return (
     <MenuComponent {...props}>
       {props.children}
@@ -113,16 +69,6 @@ function mapStateToProps(state, ownProps) {
   };
 }
 
-function mapDispatchToProps(dispatch, ownProps) {
-  const formName = loadElementFormStateName(ownProps.element.id);
-
-  return {
-    reinitialiseForm(savedData) {
-      dispatch(initialize(`element.${formName}`, savedData));
-    }
-  };
-}
-
 export { SaveAction as Component };
 
-export default compose(connect(mapStateToProps, mapDispatchToProps), SaveAction);
+export default compose(connect(mapStateToProps), SaveAction);

client/src/components/ElementEditor/Content.js

@@ -22,8 +22,17 @@ class Content extends PureComponent {
       handleLoadingError,
       formDirty,
       broken,
+      onFormSchemaFetchResponse,
+      onFormSchemaSubmitResponse,
+      ensureFormRendered,
+      formHasRendered,
     } = this.props;
 
+    const extraClass = {
+      'element-editor-editform--collapsed': !previewExpanded,
+      'element-editor-editform--rendered-not-visible': !previewExpanded && (ensureFormRendered || formHasRendered),
+    };
+
     return (
       <div className="element-editor-content">
         {!previewExpanded &&
@@ -35,15 +44,17 @@ class Content extends PureComponent {
             broken={broken}
           />
         }
-        {previewExpanded &&
+        {(previewExpanded || ensureFormRendered || formHasRendered) &&
           // Show inline editable fields
           <InlineEditFormComponent
-            extraClass={{ 'element-editor-editform--collapsed': !previewExpanded }}
+            extraClass={extraClass}
             onClick={(event) => event.stopPropagation()}
             elementId={id}
             activeTab={activeTab}
             onFormInit={onFormInit}
             handleLoadingError={handleLoadingError}
+            onFormSchemaFetchResponse={onFormSchemaFetchResponse}
+            onFormSchemaSubmitResponse={onFormSchemaSubmitResponse}
           />
         }
         {formDirty &&
@@ -69,6 +80,10 @@ Content.propTypes = {
   InlineEditFormComponent: PropTypes.elementType,
   handleLoadingError: PropTypes.func,
   broken: PropTypes.bool,
+  onFormSchemaFetchResponse: PropTypes.func,
+  onFormSchemaSubmitResponse: PropTypes.func,
+  ensureFormRendered: PropTypes.bool,
+  formHasRendered: PropTypes.bool,
 };
 
 Content.defaultProps = {};