3 files changed, 39 insertions, 18 deletions
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 8ddd5b8514a..88454c3fb4c 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -83,10 +83,12 @@ export default {
     formCancelHandler(shouldConfirm, isDirty) {
       this.$emit('cancelForm', shouldConfirm, isDirty);
     },
-    applySuggestion({ suggestionId, flashContainer, callback }) {
+    applySuggestion({ suggestionId, flashContainer, callback = () => {} }) {
       const { discussion_id: discussionId, id: noteId } = this.note;
 
-      this.submitSuggestion({ discussionId, noteId, suggestionId, flashContainer, callback });
+      return this.submitSuggestion({ discussionId, noteId, suggestionId, flashContainer }).then(
+        callback,
+      );
     },
   },
 };
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 970e6551092..bac124be34c 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -142,6 +142,23 @@ export const createNewNote = ({ commit, dispatch }, { endpoint, data }) =>
 
 export const removePlaceholderNotes = ({ commit }) => commit(types.REMOVE_PLACEHOLDER_NOTES);
 
+export const resolveDiscussion = ({ state, dispatch, getters }, { discussionId }) => {
+  const discussion = utils.findNoteObjectById(state.discussions, discussionId);
+  const isResolved = getters.isDiscussionResolved(discussionId);
+
+  if (!discussion) {
+    return Promise.reject();
+  } else if (isResolved) {
+    return Promise.resolve();
+  }
+
+  return dispatch('toggleResolveNote', {
+    endpoint: discussion.resolve_path,
+    isResolved,
+    discussion: true,
+  });
+};
+
 export const toggleResolveNote = ({ commit, dispatch }, { endpoint, isResolved, discussion }) =>
   service
     .toggleResolveNote(endpoint, isResolved)
@@ -420,15 +437,13 @@ export const updateResolvableDiscussonsCounts = ({ commit }) =>
   commit(types.UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS);
 
 export const submitSuggestion = (
-  { commit },
-  { discussionId, noteId, suggestionId, flashContainer, callback },
-) => {
+  { commit, dispatch },
+  { discussionId, noteId, suggestionId, flashContainer },
+) =>
   service
     .applySuggestion(suggestionId)
-    .then(() => {
-      commit(types.APPLY_SUGGESTION, { discussionId, noteId, suggestionId });
-      callback();
-    })
+    .then(() => commit(types.APPLY_SUGGESTION, { discussionId, noteId, suggestionId }))
+    .then(() => dispatch('resolveDiscussion', { discussionId }).catch(() => {}))
     .catch(err => {
       const defaultMessage = __(
         'Something went wrong while applying the suggestion. Please try again.',
@@ -436,9 +451,7 @@ export const submitSuggestion = (
       const flashMessage = err.response.data ? `${err.response.data.message}.` : defaultMessage;
 
       Flash(__(flashMessage), 'alert', flashContainer);
-      callback();
     });
-};
 
 export const convertToDiscussion = ({ commit }, noteId) =>
   commit(types.CONVERT_TO_DISCUSSION, noteId);
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index c5a2aa1f2af..32783b85df4 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -1,8 +1,10 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
+import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
-  components: { Icon },
+  components: { Icon, GlButton, GlLoadingIcon },
+  directives: { 'gl-tooltip': GlTooltipDirective },
   props: {
     canApply: {
       type: Boolean,
@@ -21,7 +23,6 @@ export default {
   },
   data() {
     return {
-      isAppliedSuccessfully: false,
       isApplying: false,
     };
   },
@@ -47,14 +48,19 @@ export default {
       </a>
     </div>
     <span v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</span>
-    <button
-      v-if="canApply"
-      type="button"
-      class="btn qa-apply-btn"
+    <div v-if="isApplying" class="d-flex align-items-center text-secondary">
+      <gl-loading-icon class="d-flex-center mr-2" />
+      <span>{{ __('Applying suggestion') }}</span>
+    </div>
+    <gl-button
+      v-else-if="canApply"
+      v-gl-tooltip.viewport="__('This also resolves the discussion')"
+      class="btn-inverted qa-apply-btn"
       :disabled="isApplying"
+      variant="success"
       @click="applySuggestion"
     >
       {{ __('Apply suggestion') }}
-    </button>
+    </gl-button>
   </div>
 </template>