Merge pull request #121 from nrotstan/add-cancel-controls-to-forms

Add cancel controls to admin forms.

src/components/AdminPane/Manage/ManageChallenges/EditChallenge/EditChallenge.js

@@ -10,7 +10,8 @@ import _get from 'lodash/get'
 import { FormattedMessage, injectIntl } from 'react-intl'
 import { Link } from 'react-router-dom'
 import Steps from '../../../../Bulma/Steps'
-import StepNavigation from '../../../../Bulma/StepNavigation'
+import StepNavigation
+       from '../../../../Bulma/StepNavigation/StepNavigation'
 import { CustomFieldTemplate,
          MarkdownDescriptionField }
        from '../../../../Bulma/RJSFFormFieldAdapter/RJSFFormFieldAdapter'
@@ -141,6 +142,13 @@ export class EditChallenge extends Component {
     }
   }
 
+  cancel = () => {
+    _isObject(this.props.challenge) ?
+      this.props.history.push(
+        `/admin/project/${this.props.project.id}/challenge/${this.props.challenge.id}`) :
+      this.props.history.push(`/admin/project/${this.props.project.id}`)
+  }
+
   /** Receive updates to the form data, along with any validation errors */
   changeHandler = ({formData, errors}) => {
     this.setState({
@@ -292,7 +300,7 @@ export class EditChallenge extends Component {
         <StepNavigation steps={challengeSteps} activeStep={this.state.activeStep}
                         canPrev={this.canPrev} prevStep={this.prevStep}
                         canNext={this.canNext} nextStep={this.nextStep}
-                        finish={this.finish} />
+                        finish={this.finish} cancel={this.cancel} />
       </div>
     )
   }

src/components/AdminPane/Manage/ManageProjects/EditProject/EditProject.js

@@ -46,6 +46,12 @@ export class EditProject extends Component {
     }
   }
 
+  cancel = () => {
+    _isObject(this.props.project) ?
+      this.props.history.push(`/admin/project/${this.props.project.id}`) :
+      this.props.history.push('/admin/manage')
+  }
+
   render() {
     const projectData = _merge({}, this.props.project, this.state.formData)
 
@@ -86,6 +92,12 @@ export class EditProject extends Component {
               onChange={this.changeHandler}
               onSubmit={this.finish}>
           <div className="form-controls">
+            <button className="button is-secondary is-outlined"
+                    disabled={this.state.isSaving}
+                    onClick={this.cancel}>
+              <FormattedMessage {...messages.cancel} />
+            </button>
+
             <button className={classNames("button is-primary is-outlined has-svg-icon",
                                           {"is-loading": this.state.isSaving})}
                     onClick={this.props.finish}>

src/components/AdminPane/Manage/ManageProjects/EditProject/Messages.js

@@ -19,6 +19,11 @@ export default defineMessages({
     defaultMessage: "Save",
   },
 
+  cancel: {
+    id: 'EditProject.cancel',
+    defaultMessage: "Cancel",
+  },
+
   nameLabel: {
     id: 'EditProject.form.name.label',
     defaultMessage: "Name",

src/components/AdminPane/Manage/ManageTasks/EditTask/EditTask.js

@@ -47,6 +47,11 @@ export class EditTask extends Component {
     }
   }
 
+  cancel = () => {
+    this.props.history.push(
+      `/admin/project/${this.props.projectId}/challenge/${this.props.challengeId}`)
+  }
+
   render() {
     const taskData = _merge({}, this.props.task, this.state.formData)
 
@@ -102,6 +107,12 @@ export class EditTask extends Component {
               onChange={this.changeHandler}
               onSubmit={this.finish}>
           <div className="form-controls">
+            <button className="button is-secondary is-outlined"
+                    disabled={this.state.isSaving}
+                    onClick={this.props.cancel}>
+              <FormattedMessage {...messages.cancel} />
+            </button>
+
             <button className={classNames("button is-primary is-outlined has-svg-icon",
                                           {"is-loading": this.state.isSaving})}
                     onClick={this.props.finish}>

src/components/AdminPane/Manage/ManageTasks/EditTask/Messages.js

@@ -24,6 +24,11 @@ export default defineMessages({
     defaultMessage: "Save",
   },
 
+  cancel: {
+    id: 'EditTask.cancel',
+    defaultMessage: "Cancel",
+  },
+
   nameLabel: {
     id: 'EditTask.form.name.label',
     defaultMessage: "Name",

src/components/Bulma/RJSFFormFieldAdapter/RJSFFormFieldAdapter.scss

@@ -50,7 +50,7 @@ form.rjsf {
 
   .form-controls {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
   }
 
   label .required {

src/components/Bulma/StepNavigation/Messages.js

@@ -0,0 +1,27 @@
+import { defineMessages } from 'react-intl'
+
+/**
+ * Internationalized messages for use with StepNavigation
+ */
+export default defineMessages({
+  cancel: {
+    id: "StepNavigation.controls.cancel.label",
+    defaultMessage: "Cancel",
+  },
+
+  next: {
+    id: "StepNavigation.controls.next.label",
+    defaultMessage: "Next",
+  },
+
+  prev: {
+    id: "StepNavigation.controls.prev.label",
+    defaultMessage: "Prev",
+  },
+
+  finish: {
+    id: "StepNavigation.controls.finish.label",
+    defaultMessage: "Finish",
+  },
+})
+

src/components/Bulma/StepNavigation.js → src/components/Bulma/StepNavigation/StepNavigation.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import SvgSymbol from '../SvgSymbol/SvgSymbol'
+import { FormattedMessage } from 'react-intl'
+import SvgSymbol from '../../SvgSymbol/SvgSymbol'
+import messages from './Messages'
 import './StepNavigation.css'
 
 /**
- * Steps renders a Bulma Steps (extension) component with the given steps.  It
+ * Steps renders a Bulma Steps (extension) component with the given steps. It
  * numbers the steps from 1 based off the index of each step. An optional name
  * can be given for each step, in which case it'll be displayed as well.
  *
@@ -16,38 +18,39 @@ export default class Steps extends Component {
   render() {
     return (
       <div className="step-navigation" key={`step-${this.props.activeStep}`}>
-        {this.props.activeStep > 0 &&
-          <p className="control">
+        <button className="button is-secondary is-outlined"
+                onClick={this.props.cancel}>
+          <FormattedMessage {...messages.cancel} />
+        </button>
+
+        <div className="button-group">
+          {this.props.activeStep > 0 &&
             <button className="button is-secondary is-outlined has-svg-icon"
                     disabled={!this.props.canPrev()}
                     onClick={this.props.prevStep}>
               <SvgSymbol viewBox='0 0 20 20' sym="arrow-left-icon" />
-              <span>Prev</span>
+              <FormattedMessage {...messages.prev} />
             </button>
-          </p>
-        }
+          }
 
-        {this.props.activeStep < this.props.steps.length - 1 &&
-          <p className="control">
+          {this.props.activeStep < this.props.steps.length - 1 &&
             <button className="button is-primary is-outlined has-svg-icon"
                     disabled={!this.props.canNext()}
                     onClick={this.props.nextStep}>
-              <span>Next</span>
+              <FormattedMessage {...messages.next} />
               <SvgSymbol viewBox='0 0 20 20' sym="arrow-right-icon" />
             </button>
-          </p>
-        }
+          }
 
-        {this.props.activeStep === this.props.steps.length - 1 &&
-          <p className="control">
+          {this.props.activeStep === this.props.steps.length - 1 &&
             <button className="button is-primary is-outlined has-svg-icon"
                     disabled={!this.props.canNext()}
                     onClick={this.props.finish}>
               <SvgSymbol viewBox='0 0 20 20' sym="check-icon" />
-              <span>Finish</span>
+              <FormattedMessage {...messages.finish} />
             </button>
-          </p>
-        }
+          }
+        </div>
       </div>
     )
   }
@@ -68,6 +71,8 @@ Steps.propTypes = {
   nextStep: PropTypes.func.isRequired,
   /** Invoked when user clicks the finish button on the final step */
   finish: PropTypes.func.isRequired,
+  /** Invoked when the user clicks the cancel button */
+  cancel: PropTypes.func.isRequired,
 }
 
 Steps.defaultProps = {

src/components/Bulma/StepNavigation/StepNavigation.scss

@@ -0,0 +1,6 @@
+@import 'variables.scss';
+
+.step-navigation {
+  display: flex;
+  justify-content: space-between;
+}

src/theme.scss

@@ -208,6 +208,16 @@ button.is-primary.is-loading {
   }
 }
 
+.button-group {
+  button.button {
+    margin-right: 10px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
 .full-width {
   width: 100%;
 }