AddToCampaign save message, Submitting indicator on FormAction button

admin/client/dist/js/AddToCampaignForm.js

@@ -22,7 +22,7 @@
   }
 
   _jQuery2.default.entwine('ss', function ($) {
-    $('.add-to-campaign-action, #add-to-campaign__action').entwine({
+    $('#add-to-campaign__dialog .add-to-campaign-action,' + '.cms-content-actions .add-to-campaign-action,' + '#add-to-campaign__action').entwine({
       onclick: function onclick() {
         var dialog = $('#add-to-campaign__dialog');
 

admin/client/src/components/AddToCampaignModal/AddToCampaignModal.js

@@ -2,24 +2,47 @@ import React from 'react';
 import { Modal } from 'react-bootstrap-4';
 import SilverStripeComponent from 'lib/SilverStripeComponent';
 import FormBuilder from 'components/FormBuilder/FormBuilder';
-import Config from 'lib/Config';
 
 class AddToCampaignModal extends SilverStripeComponent {
   constructor(props) {
     super(props);
 
     this.handleSubmit = this.handleSubmit.bind(this);
+
+    this.state = {
+      response: null,
+      error: false,
+    };
   }
 
   handleSubmit(event, fieldValues, submitFn) {
-
+    let promise = null;
     if (typeof this.props.handleSubmit === 'function') {
-      this.props.handleSubmit(event, fieldValues, submitFn);
+      promise = this.props.handleSubmit(event, fieldValues, submitFn);
-      return;
+    } else {
+      event.preventDefault();
+      promise = submitFn();
     }
 
-    event.preventDefault();
+    if (promise) {
-    submitFn();
+      promise
+        .then((response) => {
+          // show response
+          if (typeof response === 'string' || response.response.ok) {
+            this.setState({
+              response,
+              error: false,
+            });
+          } else {
+            this.setState({
+              response: `${response.name}: ${response.message}`,
+              error: true,
+            });
+          }
+          return response;
+        });
+    }
+    return promise;
   }
 
   getBody() {
@@ -28,17 +51,52 @@ class AddToCampaignModal extends SilverStripeComponent {
     return <FormBuilder schemaUrl={schemaUrl} handleSubmit={this.handleSubmit} />;
   }
 
+  getResponse() {
+    if (!this.state.response) {
+      return null;
+    }
+
+    let className = 'add-to-campaign__response';
+
+    if (this.state.error) {
+      className += ' add-to-campaign__response--error';
+    } else {
+      className += ' add-to-campaign__response--good';
+    }
+
+    return (
+      <div className={className}>
+        <span>{this.state.response}</span>
+      </div>
+    );
+  }
+
+  clearResponse() {
+    // TODO to be used with "Try again" and other options later
+    this.setState({
+      response: null,
+    });
+  }
+
   render() {
     const body = this.getBody();
+    const response = this.getResponse();
 
-    return <Modal show={this.props.show} onHide={this.props.handleHide} container={document.getElementsByClassName('cms-container')[0]}>
+    return (
+      <Modal
+        show={this.props.show}
+        onHide={this.props.handleHide}
+        container={document.getElementsByClassName('cms-container')[0]}
+      >
         <Modal.Header closeButton>
-        <Modal.Title>{this.props.title + ' - Test'}</Modal.Title>
+          <Modal.Title>{this.props.title}</Modal.Title>
         </Modal.Header>
         <Modal.Body>
           {body}
+          {response}
         </Modal.Body>
-    </Modal>;
+      </Modal>
+    );
   }
 }
 

admin/client/src/components/AddToCampaignModal/tests/AddToCampaign-test.js

@@ -0,0 +1,63 @@
+/* global jest, describe, beforeEach, it, expect */
+
+jest.unmock('react');
+jest.unmock('react-addons-test-utils');
+jest.unmock('../AddToCampaignModal');
+
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+import AddToCampaignModal from '../AddToCampaignModal';
+
+describe('AddToCampaignModal', () => {
+  let props;
+
+  beforeEach(() => {
+    props = {
+      title: '',
+      show: false,
+      handleHide: jest.genMockFunction(),
+    };
+  });
+
+  describe('getResponse()', () => {
+    let addToCampaignModal;
+    let response;
+    let message;
+
+    beforeEach(() => {
+      addToCampaignModal = ReactTestUtils.renderIntoDocument(
+        <AddToCampaignModal {...props} />
+      );
+      response = addToCampaignModal.getResponse();
+      message = 'My message';
+    });
+
+    it('should show no response initially', () => {
+      expect(response).toBeNull();
+    });
+
+    it('should show error message', () => {
+      message = 'This is an error';
+
+      addToCampaignModal.state = {
+        response: message,
+        error: true,
+      };
+      const responseDom = ReactTestUtils.renderIntoDocument(addToCampaignModal.getResponse());
+      expect(responseDom.classList.contains('add-to-campaign__response--error')).toBe(true);
+      expect(responseDom.textContent).toBe(message);
+    });
+
+    it('should show success message', () => {
+      message = 'This is a success';
+
+      addToCampaignModal.state = {
+        response: message,
+        error: false,
+      };
+      const responseDom = ReactTestUtils.renderIntoDocument(addToCampaignModal.getResponse());
+      expect(responseDom.classList.contains('add-to-campaign__response--good')).toBe(true);
+      expect(responseDom.textContent).toBe(message);
+    });
+  });
+});

admin/client/src/components/FormAction/FormAction.js

@@ -44,9 +44,9 @@ class FormAction extends SilverStripeComponent {
     const buttonClasses = ['btn'];
 
     // Add 'type' class
-    const bootstrapStyle = this.getBootstrapButtonStyle();
+    const style = this.getButtonStyle();
-    if (bootstrapStyle) {
+    if (style) {
-      buttonClasses.push(`btn-${bootstrapStyle}`);
+      buttonClasses.push(`btn-${style}`);
     }
 
     // If there is no text
@@ -82,13 +82,22 @@ class FormAction extends SilverStripeComponent {
    *
    * @return {String}
    */
-  getBootstrapButtonStyle() {
+  getButtonStyle() {
     // Add 'type' class
-    if (typeof this.props.bootstrapButtonStyle !== 'undefined') {
+    if (typeof this.props.data.buttonStyle !== 'undefined') {
-      return this.props.bootstrapButtonStyle;
+      return this.props.data.buttonStyle;
     }
 
-    if (this.props.name === 'action_save') {
+    const extraClasses = this.props.extraClass.split(' ');
+
+    // defined their own `btn-${something}` class
+    if (extraClasses.find((className) => className.indexOf('btn-') > -1)) {
+      return null;
+    }
+
+    if (this.props.name === 'action_save' ||
+        extraClasses.find((className) => className === 'ss-ui-action-constructive')
+    ) {
       return 'primary';
     }
 
@@ -134,9 +143,7 @@ class FormAction extends SilverStripeComponent {
     if (typeof this.props.handleClick === 'function') {
       this.props.handleClick(event, this.props.name || this.props.id);
     }
-
   }
-
 }
 
 FormAction.propTypes = {
@@ -148,7 +155,12 @@ FormAction.propTypes = {
   loading: React.PropTypes.bool,
   icon: React.PropTypes.string,
   disabled: React.PropTypes.bool,
-  bootstrapButtonStyle: React.PropTypes.string,
+  data: React.PropTypes.oneOfType([
+    React.PropTypes.array,
+    React.PropTypes.shape({
+      buttonStyle: React.PropTypes.string,
+    }),
+  ]),
   extraClass: React.PropTypes.string,
   attributes: React.PropTypes.object,
 };
@@ -156,6 +168,7 @@ FormAction.propTypes = {
 FormAction.defaultProps = {
   title: '',
   icon: '',
+  extraClass: '',
   attributes: {},
   data: {},
   disabled: false,

admin/client/src/components/FormBuilder/FormBuilder.js

@@ -172,9 +172,10 @@ export class FormBuilderComponent extends SilverStripeComponent {
     }
   }
 
-  handleAction(event, name) {
+  handleAction(event, submitAction) {
+    this.props.formActions.setSubmitAction(this.getFormId(), submitAction);
     if (typeof this.props.handleAction === 'function') {
-      this.props.handleAction(event, name);
+      this.props.handleAction(event, submitAction);
     }
   }
 
@@ -227,12 +228,11 @@ export class FormBuilderComponent extends SilverStripeComponent {
     );
 
     if (typeof this.props.handleSubmit !== 'undefined') {
-      this.props.handleSubmit(event, fieldValues, submitFn);
+      return this.props.handleSubmit(event, fieldValues, submitFn);
-      return;
     }
 
     event.preventDefault();
-    submitFn();
+    return submitFn();
   }
 
   buildComponent(field, extraProps = {}) {
@@ -288,9 +288,16 @@ export class FormBuilderComponent extends SilverStripeComponent {
    * @return {Array}
    */
   mapActionsToComponents(actions) {
+    const form = this.props.form[this.getFormId()];
+
     return actions.map((action) => {
+      const loading = (form && form.submitting && form.submitAction === action.name);
       // Events
-      const extraProps = { handleClick: this.handleAction };
+      const extraProps = {
+        handleClick: this.handleAction,
+        loading,
+        disabled: loading || action.disabled,
+      };
 
       // Build child nodes
       if (action.children) {

admin/client/src/components/SingleSelectField/README.md

@@ -4,10 +4,6 @@ Generates a `<select><option></option></select>`
 
 ## Props
 
-### leftTitle
-
-The label text to display with the field.
-
 ### extraClass
 
 Addition CSS classes to apply to the `<select>` element.
@@ -22,20 +18,32 @@ Handler function called when the field's value changes.
 
 ### value
 
-The field's value.
+The field's selected value.
 
 ### source (required)
 
 The list of possible values that could be selected
 
-### disabled
+#### value
 
-A list of values within `source` that can be seen but not selected
+The value for this option.
 
-### hasEmptyDefault
+#### title
+
+The title or label displayed for users.
+
+#### disabled
+
+This option is shown but disabled from being selected.
+
+### data
+
+Additional field specific data
+
+#### hasEmptyDefault
 
 If true, create an empty value option first
 
-### emptyString
+#### emptyString
 
 When `hasEmptyDefault` is true, this sets the label for the option

admin/client/src/components/SingleSelectField/SingleSelectField.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import SilverStripeComponent from 'lib/SilverStripeComponent';
+//import fieldHolder from 'components/FieldHolder/FieldHolder';
+import i18n from 'i18n';
 
 class SingleSelectField extends SilverStripeComponent {
 
@@ -10,10 +12,6 @@ class SingleSelectField extends SilverStripeComponent {
   }
 
   render() {
-    const labelText = this.props.leftTitle !== null
-      ? this.props.leftTitle
-      : this.props.title;
-
     let field = null;
     if (this.props.readOnly) {
       field = this.getReadonlyField;
@@ -21,22 +19,7 @@ class SingleSelectField extends SilverStripeComponent {
       field = this.getSelectField();
     }
 
-    // The extraClass property is defined on both the holder and element
+    return field;
-    // for legacy reasons (same behaviour as PHP rendering)
-    const classNames = ['form-group', this.props.extraClass].join(' ');
-
-    return (
-      <div className={classNames}>
-        {labelText &&
-        <label className="form__field-label" htmlFor={`gallery_${this.props.name}`}>
-          {labelText}
-        </label>
-        }
-        <div className="form__field-holder">
-          {field}
-        </div>
-      </div>
-    );
   }
 
   /**
@@ -45,9 +28,9 @@ class SingleSelectField extends SilverStripeComponent {
    * @returns ReactComponent
    */
   getReadonlyField() {
-    let label = this.props.source[this.props.value];
+    let label = this.props.source.find((item) => item.value === this.props.value);
 
-    label = label !== null
+    label = label !== undefined
       ? label
       : this.props.value;
 
@@ -65,16 +48,23 @@ class SingleSelectField extends SilverStripeComponent {
     if (this.props.hasEmptyDefault) {
       options.unshift({
         value: '',
-        title: this.props.emptyString
+        title: this.props.emptyString,
+        disabled: false,
       });
     }
-    return <select {...this.getInputProps()}>
+    return (
+      <select {...this.getInputProps()}>
         { options.map((item) => {
           const key = `${this.props.name}-${item.value || 'null'}`;
 
-        return <option key={key} value={item.value} disabled={item.disabled}>{item.title}</option>;
+          return (
+            <option key={key} value={item.value} disabled={item.disabled}>
+              {item.title}
+            </option>
+          );
         }) }
-    </select>;
+      </select>
+    );
   }
 
   /**
@@ -109,8 +99,6 @@ class SingleSelectField extends SilverStripeComponent {
 }
 
 SingleSelectField.propTypes = {
-  leftTitle:       React.PropTypes.string,
-  extraClass:      React.PropTypes.string,
   id: React.PropTypes.string,
   name: React.PropTypes.string.isRequired,
   onChange: React.PropTypes.func,

admin/client/src/components/TextField/TextField.js

@@ -28,7 +28,7 @@ class TextField extends SilverStripeComponent {
    * @returns Object properties
    */
   getInputProps() {
-    // @todo Merge with 'attributes' from formfield schema
+    // TODO Merge with 'attributes' from formfield schema
     return {
       // The extraClass property is defined on both the holder and element
       // for legacy reasons (same behaviour as PHP rendering)
@@ -56,8 +56,6 @@ class TextField extends SilverStripeComponent {
 }
 
 TextField.propTypes = {
-  leftTitle: React.PropTypes.string,
-  title: React.PropTypes.string,
   extraClass: React.PropTypes.string,
   id: React.PropTypes.string,
   name: React.PropTypes.string.isRequired,

admin/client/src/legacy/AddToCampaignForm.js

@@ -1,7 +1,9 @@
 import jQuery from 'jQuery';
 
 jQuery.entwine('ss', ($) => {
-  $('#add-to-campaign__dialog .add-to-campaign-action, .cms-content-actions .add-to-campaign-action, #add-to-campaign__action').entwine({
+  $('#add-to-campaign__dialog .add-to-campaign-action,' +
+    '.cms-content-actions .add-to-campaign-action,' +
+    '#add-to-campaign__action').entwine({
       onclick() {
         let dialog = $('#add-to-campaign__dialog');
 

admin/client/src/state/form/FormActionTypes.js

@@ -5,4 +5,5 @@ export const ACTION_TYPES = {
   SUBMIT_FORM_REQUEST: 'SUBMIT_FORM_REQUEST',
   SUBMIT_FORM_SUCCESS: 'SUBMIT_FORM_SUCCESS',
   UPDATE_FIELD: 'UPDATE_FIELD',
+  SET_SUBMIT_ACTION: 'SET_SUBMIT_ACTION',
 };

admin/client/src/state/form/FormActions.js

@@ -83,3 +83,12 @@ export function submitForm(submitApi, formId, fieldValues) {
       });
   };
 }
+
+export function setSubmitAction(formId, submitAction) {
+  return (dispatch) => {
+    dispatch({
+      type: ACTION_TYPES.SET_SUBMIT_ACTION,
+      payload: { formId, submitAction },
+    });
+  };
+}

admin/client/src/state/form/FormReducer.js

@@ -64,6 +64,11 @@ function formReducer(state = initialState, action) {
         submitting: false,
       }));
 
+    case ACTION_TYPES.SET_SUBMIT_ACTION:
+      return deepFreeze(updateForm(action.payload.formId, {
+        submitAction: action.payload.submitAction,
+      }));
+
     default:
       return state;
 

admin/code/AddToCampaignHandler_FormAction.php

@@ -21,7 +21,9 @@ class AddToCampaignHandler_FormAction extends FormAction
 	function __construct()
 	{
 		parent::__construct('addtocampaign', _t('CAMPAIGNS.ADDTOCAMPAIGN', 'Add to campaign'));
+		$this->setUseButtonTag(false);
 		$this->addExtraClass('add-to-campaign-action');
 		$this->setValidationExempt(true);
+		$this->addExtraClass('btn-primary');
 	}
 }

forms/FormAction.php

@@ -45,7 +45,7 @@ class FormAction extends FormField {
 
 	/**
 	 * Enables the use of <button> instead of <input>
-	 * in {@link Field()} - for more customizeable styling.
+	 * in {@link Field()} - for more customisable styling.
 	 *
 	 * @var boolean
 	 */