feat(feed): add cancel buttons to create project/feed forms

Author: evansiroky

i18n/english.yml

@@ -456,6 +456,7 @@ components:
     save: Save
     title: Settings
   ProjectSettingsForm:
+    cancel: Cancel
     confirmDelete: Are you sure you want to delete this project? This action cannot be undone and all feed sources and their versions will be permanently deleted.
     deleteProject: Delete Project?
     fields:

i18n/espanol.yml

@@ -452,6 +452,7 @@ components:
     save: Save
     title: Settings
   ProjectSettingsForm:
+    cancel: Cancel
     confirmDelete: Are you sure you want to delete this project? This action cannot be undone and all feed sources and their versions will be permanently deleted.
     deleteProject: Delete Project?
     fields:

i18n/francais.yml

@@ -451,6 +451,7 @@ components:
     save: Save
     title: Settings
   ProjectSettingsForm:
+    cancel: Cancel
     confirmDelete: Are you sure you want to delete this project? This action cannot be undone and all feed sources and their versions will be permanently deleted.
     deleteProject: Delete Project?
     fields:

lib/manager/components/CreateFeedSource.js

@@ -182,6 +182,12 @@ export default class CreateFeedSource extends Component<Props, State> {
           </Panel>
         </Col>
         <Col xs={12}>
+          <Button
+            onClick={this.props.onCancel}
+            style={{marginRight: 10}}
+          >
+            Cancel
+          </Button>
           <Button
             bsStyle='primary'
             data-test-id='create-feed-source-button'
@@ -190,13 +196,6 @@ export default class CreateFeedSource extends Component<Props, State> {
           >
             Save
           </Button>
-          <Button
-            bsStyle='warning'
-            onClick={this.props.onCancel}
-            style={{marginLeft: 10}}
-          >
-            Cancel
-          </Button>
         </Col>
       </Row>
     )

lib/manager/components/CreateProject.js

@@ -29,6 +29,7 @@ export default class CreateProject extends Component<Props> {
             <Col xs={12} sm={8}>
               <h2>Create New Project</h2>
               <ProjectSettingsForm
+                onCancelUrl='/project'
                 project={{ name: '' }}
                 updateProject={this._saveProject}
               />

lib/manager/components/ProjectSettings.js

@@ -39,6 +39,7 @@ export default class ProjectSettings extends MessageComponent<Props> {
       ? <ProjectSettingsForm
         deleteProject={deleteProject}
         editDisabled={projectEditDisabled}
+        onCancelUrl={`project/${project.id}/`}
         project={project}
         updateProject={updateProject}
         showDangerZone

lib/manager/components/ProjectSettingsForm.js

@@ -23,6 +23,7 @@ import {
 import DateTimeField from 'react-bootstrap-datetimepicker'
 import ReactDOM from 'react-dom'
 import {shallowEqual} from 'react-pure-render'
+import {browserHistory} from 'react-router'
 
 import {deleteProject, updateProject} from '../actions/projects'
 import MapModal from '../../common/components/MapModal.js'
@@ -50,6 +51,7 @@ type ProjectModel = {
 type Props = {
   deleteProject?: typeof deleteProject,
   editDisabled?: boolean,
+  onCancelUrl: string,
   project: Project | ProjectModel,
   showDangerZone?: boolean,
   updateProject: typeof updateProject
@@ -94,6 +96,10 @@ export default class ProjectSettingsForm extends MessageComponent<Props, State>
     this.setState({ model })
   }
 
+  _onCancel = () => {
+    browserHistory.push(this.props.onCancelUrl)
+  }
+
   _onDeleteProject = () => {
     const {deleteProject, project} = this.props
     if (!deleteProject) {
@@ -463,6 +469,13 @@ export default class ProjectSettingsForm extends MessageComponent<Props, State>
         }
         <Row>
           <Col xs={12}>
+            {/* Cancel button */}
+            <Button
+              onClick={this._onCancel}
+              style={{marginRight: 10}}
+            >
+              {this.messages('cancel')}
+            </Button>
             {/* Save button */}
             <Button
               bsStyle='primary'