add cancel buttons to template folder flow

when cancelled, clears any data inputted into the sub-form action, and
then uses an icky hack to go back to the buttons, by changing the
state to "nothingSelectedButtons", and then pretending a checkbox was
clicked so it works out which actions to show and re-renders.

app/assets/javascripts/templateFolderForm.js

@@ -24,6 +24,12 @@
 
       };
 
+      // cancel buttons only relevant if JS enabled, so
+      this.addCancelButton(this.states.moveToFolderRadios);
+      this.addCancelButton(this.states.moveToNewFolderForm);
+      this.addCancelButton(this.states.addNewFolderForm);
+      this.addCancelButton(this.states.addNewTemplateForm);
+
       // first off show the new template / new folder buttons
       this.currentState = 'nothingSelectedButtons';
 
@@ -33,6 +39,26 @@
       this.render();
     };
 
+    this.addCancelButton = function($el) {
+      let $cancel =  $('<a></a>')
+          // .addClass('api-key')
+          // .css('min-height', $component.height())
+          .html('Cancel')
+          .click((event) => {
+            event.preventDefault();
+            // clear existing data
+            $el.find('input:radio').prop('checked', false);
+            $el.find('input:text').val('');
+
+            // gross hack - pretend we're in the choose actions state, then pretend a checkbox was clicked to work out
+            // whether to show zero or non-zero options. This calls a render at the end
+            this.currentState = 'nothingSelectedButtons';
+            this.templateFolderCheckboxChanged();
+          });
+
+      $el.append($cancel);
+    };
+
     this.actionButtonClicked = function(event) {
       event.preventDefault();
       this.currentState = $(event.currentTarget).val();