Resolve discussion when suggestion is applied

- Adds color and a tooltip to describe this new behavior
- Does not resolve if discussion is already resolved
- Adds an action `resolveDiscussion` to simplify `toggleResolveNote`
- Updates docs

https://gitlab.com/gitlab-org/gitlab-ce/issues/54405

1 files changed, 13 insertions, 7 deletions

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>