IssueNotesRefactor: Move quick actions logic to Store.

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

 <script>
 /* global Flash */
 
-import AjaxCache from '~/lib/utils/ajax_cache';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import MarkdownField from '../../vue_shared/components/markdown/field.vue';
 import IssueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
 import eventHub from '../event_hub';
 
-const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
 export default {
   data() {
     const { create_note_path, state } = window.gl.issueData;
@@ -51,9 +49,10 @@ export default {
   methods: {
     handleSave(withIssueAction) {
       if (this.note.length) {
-        const data = {
+        const noteData = {
           endpoint: this.endpoint,
-          noteData: {
+          flashContainer: this.$el,
+          data: {
             full_data: true,
             note: {
               noteable_type: 'Issue',
@@ -64,42 +63,13 @@ export default {
         };
 
         if (this.noteType === 'discussion') {
-          data.noteData.note.type = 'DiscussionNote';
+          noteData.data.note.type = 'DiscussionNote';
         }
 
-        let placeholderText = this.note;
-        const hasQuickActions = this.hasQuickActions();
-
-        if (hasQuickActions) {
-          placeholderText = this.stripQuickActions();
-        }
-
-        if (placeholderText.length) {
-          this.$store.commit('showPlaceholderNote', {
-            noteBody: placeholderText,
-          });
-        }
-
-        if (hasQuickActions) {
-          this.$store.commit('showPlaceholderNote', {
-            isSystemNote: true,
-            noteBody: this.getQuickActionText(),
-          });
-        }
-
-        this.$store.dispatch('createNewNote', data)
+        this.$store.dispatch('saveNote', noteData)
           .then((res) => {
-            const { errors } = res;
-
-            if (hasQuickActions) {
-              this.$store.dispatch('poll');
-              $(this.$refs.textarea).trigger('clear-commands-cache.atwho');
-              new Flash('Commands applied', 'notice', $(this.$el)); // eslint-disable-line
-            }
-
-            if (errors) {
-              if (errors.commands_only) {
-                new Flash(errors.commands_only, 'notice', $(this.$el)); // eslint-disable-line
+            if (res.errors) {
+              if (res.errors.commands_only) {
                 this.discard();
               } else {
                 this.handleError();
@@ -107,8 +77,6 @@ export default {
             } else {
               this.discard();
             }
-
-            this.$store.commit('removePlaceholderNotes');
           })
           .catch(this.handleError);
       }
@@ -153,33 +121,6 @@ export default {
         }
       }
     },
-    getQuickActionText() {
-      let text = 'Applying command';
-      const quickActions = AjaxCache.get(gl.GfmAutoComplete.dataSources.commands);
-      const { note } = this;
-
-      const executedCommands = quickActions.filter((command) => {
-        const commandRegex = new RegExp(`/${command.name}`);
-        return commandRegex.test(note);
-      });
-
-      if (executedCommands && executedCommands.length) {
-        if (executedCommands.length > 1) {
-          text = 'Applying multiple commands';
-        } else {
-          const commandDescription = executedCommands[0].description.toLowerCase();
-          text = `Applying command to ${commandDescription}`;
-        }
-      }
-
-      return text;
-    },
-    hasQuickActions() {
-      return REGEX_QUICK_ACTIONS.test(this.note);
-    },
-    stripQuickActions() {
-      return this.note.replace(REGEX_QUICK_ACTIONS, '').trim();
-    },
   },
   mounted() {
     const issuableDataEl = document.getElementById('js-issuable-app-initial-data');

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

@@ -63,9 +63,9 @@ export default {
       this.isReplying = false;
     },
     saveReply({ note }) {
-      const data = {
+      const replyData = {
         endpoint: this.newNotePath,
-        reply: {
+        data: {
           in_reply_to_discussion_id: this.note.reply_id,
           target_type: 'issue',
           target_id: this.discussion.noteable_id,
@@ -74,7 +74,7 @@ export default {
         },
       };
 
-      this.$store.dispatch('replyToDiscussion', data)
+      this.$store.dispatch('saveNote', replyData)
         .then(() => {
           this.isReplying = false;
         })

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

 /* eslint-disable no-param-reassign */
 
 import service from '../services/issue_notes_service';
+import utils from './issue_notes_utils';
 
 const findNoteObjectById = (notes, id) => notes.filter(n => n.id === id)[0];
 
@@ -147,31 +148,31 @@ const actions = {
         context.commit('deleteNote', note);
       });
   },
-  replyToDiscussion(context, data) {
-    const { endpoint, reply } = data;
+  updateNote(context, data) {
+    const { endpoint, note } = data;
 
     return service
-      .replyToDiscussion(endpoint, reply)
+      .updateNote(endpoint, note)
       .then(res => res.json())
       .then((res) => {
-        context.commit('addNewReplyToDiscussion', res);
+        context.commit('updateNote', res);
       });
   },
-  updateNote(context, data) {
-    const { endpoint, note } = data;
+  replyToDiscussion(context, noteData) {
+    const { endpoint, data } = noteData;
 
     return service
-      .updateNote(endpoint, note)
+      .replyToDiscussion(endpoint, data)
       .then(res => res.json())
       .then((res) => {
-        context.commit('updateNote', res);
+        context.commit('addNewReplyToDiscussion', res);
       });
   },
-  createNewNote(context, data) {
-    const { endpoint, noteData } = data;
+  createNewNote(context, noteData) {
+    const { endpoint, data } = noteData;
 
     return service
-      .createNewNote(endpoint, noteData)
+      .createNewNote(endpoint, data)
       .then(res => res.json())
       .then((res) => {
         if (!res.errors) {
@@ -180,6 +181,49 @@ const actions = {
         return res;
       });
   },
+  saveNote(context, noteData) {
+    const { note } = noteData.data.note;
+    let placeholderText = note;
+    const hasQuickActions = utils.hasQuickActions(placeholderText);
+
+    if (hasQuickActions) {
+      placeholderText = utils.stripQuickActions(placeholderText);
+    }
+
+    if (placeholderText.length) {
+      context.commit('showPlaceholderNote', {
+        noteBody: placeholderText,
+      });
+    }
+
+    if (hasQuickActions) {
+      context.commit('showPlaceholderNote', {
+        isSystemNote: true,
+        noteBody: utils.getQuickActionText(note),
+      });
+    }
+
+    const hasReplyId = noteData.data.in_reply_to_discussion_id;
+    const methodToDispatch = hasReplyId ? 'replyToDiscussion' : 'createNewNote';
+
+    return context.dispatch(methodToDispatch, noteData)
+      .then((res) => {
+        const { errors } = res;
+
+        if (hasQuickActions) {
+          context.dispatch('poll');
+          $('.js-gfm-input').trigger('clear-commands-cache.atwho');
+          new Flash('Commands applied', 'notice', $(noteData.flashContainer)); // eslint-disable-line
+        }
+
+        if (errors && errors.commands_only) {
+          new Flash(errors.commands_only, 'notice', $(noteData.flashContainer)); // eslint-disable-line
+        }
+        context.commit('removePlaceholderNotes');
+
+        return res;
+      });
+  },
   poll(context) {
     const { notesPath } = $('.js-notes-wrapper')[0].dataset;
 

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

+import AjaxCache from '~/lib/utils/ajax_cache';
+
+const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
+
+export default {
+  getQuickActionText(note) {
+    let text = 'Applying command';
+    const quickActions = AjaxCache.get(gl.GfmAutoComplete.dataSources.commands);
+
+    const executedCommands = quickActions.filter((command) => {
+      const commandRegex = new RegExp(`/${command.name}`);
+      return commandRegex.test(note);
+    });
+
+    if (executedCommands && executedCommands.length) {
+      if (executedCommands.length > 1) {
+        text = 'Applying multiple commands';
+      } else {
+        const commandDescription = executedCommands[0].description.toLowerCase();
+        text = `Applying command to ${commandDescription}`;
+      }
+    }
+
+    return text;
+  },
+  hasQuickActions(note) {
+    return REGEX_QUICK_ACTIONS.test(note);
+  },
+  stripQuickActions(note) {
+    return note.replace(REGEX_QUICK_ACTIONS, '').trim();
+  },
+}