Add 'Cancel' button to Campaign creation form

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

@@ -295,17 +295,28 @@ export class FormBuilderComponent extends SilverStripeComponent {
     return actions.map((action, i) => {
       let props = deepFreeze(action);
 
-      if (typeof createFn === 'function') {
-        return createFn(FormActionComponent, props);
-      }
-
       // Add sensible defaults for common actions.
-      if (props.name === 'action_save') {
+      switch (props.name) {
+        case 'action_save':
           props = deepFreeze(Object.assign({}, props, {
             type: 'submit',
             label: props.title,
             icon: 'save',
           }));
+          break;
+        case 'action_cancel':
+          props = deepFreeze(Object.assign({}, props, {
+            type: 'button',
+            label: props.title,
+            icon: 'cancel',
+          }));
+          break;
+        default:
+          break;
+      }
+
+      if (typeof createFn === 'function') {
+        return createFn(FormActionComponent, props);
       }
 
       return <FormActionComponent key={i} {...props} />;

admin/client/src/containers/CampaignAdmin/CampaignAdmin.js

@@ -25,6 +25,7 @@ class CampaignAdmin extends SilverStripeComponent {
       },
     });
     this.campaignListCreateFn = this.campaignListCreateFn.bind(this);
+    this.campaignCreationView = this.campaignCreationView.bind(this);
   }
 
   componentDidMount() {
@@ -164,6 +165,7 @@ class CampaignAdmin extends SilverStripeComponent {
   renderCreateView() {
     const baseSchemaUrl = this.props.sectionConfig.forms.CreateEditForm.schemaUrl;
     const formBuilderProps = {
+      createFn: this.campaignCreationView,
       formId: 'CreateEditForm',
       schemaUrl: `${baseSchemaUrl}/ChangeSet`,
     };
@@ -182,6 +184,32 @@ class CampaignAdmin extends SilverStripeComponent {
     );
   }
 
+  /**
+   * Hook to allow customisation of components being constructed
+   * by the Campaign creation FormBuilder.
+   *
+   * @param {Object} Component - Component constructor.
+   * @param {Object} props - Props passed from FormBuilder.
+   *
+   * @return {Object} - Instanciated React component
+   */
+  campaignCreationView(Component, props) {
+    const indexRoute = this.props.sectionConfig.route;
+
+    // Route to the Campaigns index view when 'Cancel' is clicked.
+    if (props.name === 'action_cancel') {
+      const extendedProps = Object.assign({}, props, {
+        handleClick: () => {
+          window.ss.router.show(indexRoute);
+        },
+      });
+
+      return <Component key={props.name} {...extendedProps} />;
+    }
+
+    return <Component key={props.name} {...props} />;
+  }
+
   /**
    * Hook to allow customisation of components being constructed
    * by the Campaign list FormBuilder.

admin/code/CampaignAdmin.php

@@ -486,7 +486,8 @@ JSON;
 			'CreateEditForm',
 			ChangeSet::singleton()->getCMSFields(),
 			FieldList::create(
-				FormAction::create('save', 'Save')
+				FormAction::create('save', 'Save'),
+				FormAction::create('cancel', 'Cancel')
 			)
 		);
 	}