IssueNotesRefactor: Implement close/reopen issue actions.

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

@@ -28,18 +28,22 @@ 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() {
+    handleSave(withIssueAction) {
+      if (this.note.length) {
         const data = {
           endpoint: this.endpoint,
           noteData: {
@@ -48,7 +52,7 @@ export default {
               noteable_type: 'Issue',
               noteable_id: window.gl.issueData.id,
               note: this.note,
-          }
+            },
           },
         };
 
@@ -59,12 +63,28 @@ export default {
         this.$store.dispatch('createNewNote', data)
           .then((res) => {
             if (res.errors) {
-            return this.handleError();
-          }
-
+              this.handleError();
+            } else {
               this.discard();
+            }
           })
           .catch(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 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

@@ -1,8 +1,8 @@
 <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