IssueNotesRefactor: Implement close/reopen issue actions.

app/assets/javascripts/notes/components/issue_comment_form.vue

@@ -28,43 +28,63 @@ export default {
     commentButtonTitle() {
       return this.noteType === 'comment' ? 'Comment' : 'Start discussion';
     },
+    isIssueOpen() {
+      return this.issueState === 'opened' || this.issueState === 'reopened';
+    },
     issueActionButtonTitle() {
       if (this.note.length) {
-        const actionText = this.issueState === 'open' ? 'close' : 'reopen';
+        const actionText = this.isIssueOpen ? 'close' : 'reopen';
 
         return this.noteType === 'comment' ? `Comment & ${actionText} issue` : `Start discussion & ${actionText} issue`;
       }
 
-      return this.issueState === 'open' ? 'Close issue' : 'Reopen issue';
+      return this.isIssueOpen ? 'Close issue' : 'Reopen issue';
     },
   },
   methods: {
-    handleSave() {
-      const data = {
-        endpoint: this.endpoint,
-        noteData: {
-          full_data: true,
-          note: {
-            noteable_type: 'Issue',
-            noteable_id: window.gl.issueData.id,
-            note: this.note,
-          }
-        },
-      };
+    handleSave(withIssueAction) {
+      if (this.note.length) {
+        const data = {
+          endpoint: this.endpoint,
+          noteData: {
+            full_data: true,
+            note: {
+              noteable_type: 'Issue',
+              noteable_id: window.gl.issueData.id,
+              note: this.note,
+            },
+          },
+        };
 
-      if (this.noteType === 'discussion') {
-        data.noteData.note.type = 'DiscussionNote';
+        if (this.noteType === 'discussion') {
+          data.noteData.note.type = 'DiscussionNote';
+        }
+
+        this.$store.dispatch('createNewNote', data)
+          .then((res) => {
+            if (res.errors) {
+              this.handleError();
+            } else {
+              this.discard();
+            }
+          })
+          .catch(this.handleError);
       }
 
-      this.$store.dispatch('createNewNote', data)
-        .then((res) => {
-          if (res.errors) {
-            return this.handleError();
-          }
+      if (withIssueAction) {
+        if (this.isIssueOpen) {
+          gl.issueData.state = 'closed';
+          this.issueState = 'closed';
+        } else {
+          gl.issueData.state = 'reopened';
+          this.issueState = 'reopened';
+        }
+        this.isIssueOpen = !this.isIssueOpen;
 
-          this.discard();
-        })
-        .catch(this.handleError);
+        // This is out of scope for the Notes Vue component.
+        // It was the shortest path to update the issue state and relevant places.
+        $('.js-btn-issue-action:visible').trigger('click');
+      }
     },
     discard() {
       this.note = '';
@@ -171,6 +191,7 @@ export default {
             </ul>
           </div>
           <a
+            @click="handleSave(true)"
             :class="{'btn-reopen': issueState === 'closed', 'btn-close': issueState === 'open'}"
             class="btn btn-nr btn-comment">
             {{issueActionButtonTitle}}

app/assets/javascripts/notes/components/issue_note.vue

@@ -59,8 +59,9 @@ export default {
     },
     formUpdateHandler(note) {
       const data = {
-        endpoint: `${this.note.path}?full_data=1`,
+        endpoint: this.note.path,
         note: {
+          full_data: true,
           target_type: 'issue',
           target_id: this.note.noteable_id,
           note,

app/assets/javascripts/notes/components/issue_note_awards_list.vue

 <script>
-import * as Emoji from '../../emoji';
 import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
 import emojiSmile from 'icons/_emoji_smile.svg';
 import emojiSmiley from 'icons/_emoji_smiley.svg';
+import * as Emoji from '../../emoji';
 
 export default {
   props: {

app/assets/javascripts/notes/services/issue_notes_service.js

@@ -18,5 +18,5 @@ export default {
   },
   createNewNote(endpoint, data) {
     return Vue.http.post(endpoint, data, { emulateJSON: true });
-  }
+  },
 };

app/assets/javascripts/notes/stores/issue_notes_store.js

@@ -58,7 +58,7 @@ const mutations = {
       expanded: true,
       id: discussion_id,
       individual_note: !(type === 'DiscussionNote'),
-      notes: [ note ],
+      notes: [note],
       reply_id: discussion_id,
     };
 

app/views/projects/issues/show.html.haml

@@ -34,8 +34,8 @@
           - unless current_user == @issue.author
             %li= link_to 'Report abuse', new_abuse_report_path(user_id: @issue.author.id, ref_url: issue_url(@issue))
           - if can_update_issue
-            %li= link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, format: 'json'), class: "btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
-            %li= link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, format: 'json'), class: "btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+            %li= link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, format: 'json'), class: "btn-close js-btn-issue-action #{issue_button_visibility(@issue, true)}", title: 'Close issue'
+            %li= link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, format: 'json'), class: "btn-reopen js-btn-issue-action #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
           - if can_report_spam
             %li= link_to 'Submit as spam', mark_as_spam_project_issue_path(@project, @issue), method: :post, class: 'btn-spam', title: 'Submit as spam'
           - if can_update_issue || can_report_spam