Add ability to cancel editing of the queue message (#197)

* Cancel queue message edit

* CHANGELOG

CHANGELOG.md

@@ -10,6 +10,7 @@ with the current date and the next changes should go under a **[Next]** header.
 * Allow user to select queues by tabbing through the main page. ([@shwavedefapp](https://github.com/shwavedefapp) in [#192](https://github.com/illinois/queue/pull/192))
 * Make improvements to staff message experience. ([@nwalters512](https://github.com/nwalters512) in [#194](https://github.com/illinois/queue/pull/194))
 * Add markdown previews to the queue message editor. ([@shwavedefapp](https://github.com/shwavedefapp) in [#193](https://github.com/illinois/queue/pull/193))
+* Add ability to cancel editing of the queue message. ([@shwavedefapp](https://github.com/shwavedefapp) in [#197](https://github.com/illinois/queue/pull/197))
 
 ## 26 January 2019
 

src/components/QueueMessage.js

@@ -30,6 +30,7 @@ class QueueMessage extends React.Component {
 
     this.onMessageChanged = this.onMessageChanged.bind(this)
     this.onStartEdit = this.onStartEdit.bind(this)
+    this.onCancelEdit = this.onCancelEdit.bind(this)
     this.onFinishEdit = this.onFinishEdit.bind(this)
     this.onChangeTab = this.onChangeTab.bind(this)
 
@@ -60,6 +61,12 @@ class QueueMessage extends React.Component {
     })
   }
 
+  onCancelEdit() {
+    this.setState({
+      editing: false,
+    })
+  }
+
   onFinishEdit() {
     const attributes = {
       message: this.state.editedMessage,
@@ -162,9 +169,14 @@ class QueueMessage extends React.Component {
         </Card>
       )
       button = (
-        <Button color="primary" onClick={this.onFinishEdit}>
-          Save
-        </Button>
+        <>
+          <Button color="primary" onClick={this.onFinishEdit}>
+            Save
+          </Button>
+          <Button color="danger" className="ml-1" onClick={this.onCancelEdit}>
+            Cancel
+          </Button>
+        </>
       )
     } else {
       content = <ReactMarkdown source={message} />