1 files changed, 103 insertions, 16 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 af438ce5619..e26ff51e01e 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,11 +1,19 @@
 <script>
 import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
+import { __ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: { Icon, GlDeprecatedButton, GlLoadingIcon },
   directives: { 'gl-tooltip': GlTooltipDirective },
+  mixins: [glFeatureFlagsMixin()],
   props: {
+    batchSuggestionsCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
     canApply: {
       type: Boolean,
       required: false,
@@ -16,6 +24,16 @@ export default {
       required: true,
       default: false,
     },
+    isBatched: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isApplyingBatch: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     helpPagePath: {
       type: String,
       required: true,
@@ -23,17 +41,54 @@ export default {
   },
   data() {
     return {
-      isApplying: false,
+      isApplyingSingle: false,
     };
   },
+  computed: {
+    canBeBatched() {
+      return Boolean(this.glFeatures.batchSuggestions);
+    },
+    isApplying() {
+      return this.isApplyingSingle || this.isApplyingBatch;
+    },
+    tooltipMessage() {
+      return this.canApply
+        ? __('This also resolves the discussion')
+        : __("Can't apply as this line has changed or the suggestion already matches its content.");
+    },
+    tooltipMessageBatch() {
+      return !this.canBeBatched
+        ? __("Suggestions that change line count can't be added to batches, yet.")
+        : this.tooltipMessage;
+    },
+    isDisableButton() {
+      return this.isApplying || !this.canApply;
+    },
+    applyingSuggestionsMessage() {
+      if (this.isApplyingSingle || this.batchSuggestionsCount < 2) {
+        return __('Applying suggestion...');
+      }
+      return __('Applying suggestions...');
+    },
+  },
   methods: {
     applySuggestion() {
       if (!this.canApply) return;
-      this.isApplying = true;
+      this.isApplyingSingle = true;
       this.$emit('apply', this.applySuggestionCallback);
     },
     applySuggestionCallback() {
-      this.isApplying = false;
+      this.isApplyingSingle = false;
+    },
+    applySuggestionBatch() {
+      if (!this.canApply) return;
+      this.$emit('applyBatch');
+    },
+    addSuggestionToBatch() {
+      this.$emit('addToBatch');
+    },
+    removeSuggestionFromBatch() {
+      this.$emit('removeFromBatch');
     },
   },
 };
@@ -47,20 +102,52 @@ export default {
         <icon name="question-o" css-classes="link-highlight" />
       </a>
     </div>
-    <span v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</span>
-    <div v-if="isApplying" class="d-flex align-items-center text-secondary">
+    <div v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</div>
+    <div v-else-if="isApplying" class="d-flex align-items-center text-secondary">
       <gl-loading-icon class="d-flex-center mr-2" />
-      <span>{{ __('Applying suggestion') }}</span>
+      <span>{{ applyingSuggestionsMessage }}</span>
+    </div>
+    <div v-else-if="canApply && canBeBatched && isBatched" class="d-flex align-items-center">
+      <gl-deprecated-button
+        class="btn-inverted js-remove-from-batch-btn btn-grouped"
+        :disabled="isApplying"
+        @click="removeSuggestionFromBatch"
+      >
+        {{ __('Remove from batch') }}
+      </gl-deprecated-button>
+      <gl-deprecated-button
+        v-gl-tooltip.viewport="__('This also resolves all related threads')"
+        class="btn-inverted js-apply-batch-btn btn-grouped"
+        :disabled="isApplying"
+        variant="success"
+        @click="applySuggestionBatch"
+      >
+        {{ __('Apply suggestions') }}
+        <span class="badge badge-pill badge-pill-success">
+          {{ batchSuggestionsCount }}
+        </span>
+      </gl-deprecated-button>
+    </div>
+    <div v-else class="d-flex align-items-center">
+      <span v-if="canBeBatched" v-gl-tooltip.viewport="tooltipMessageBatch" tabindex="0">
+        <gl-deprecated-button
+          class="btn-inverted js-add-to-batch-btn btn-grouped"
+          :disabled="isDisableButton"
+          @click="addSuggestionToBatch"
+        >
+          {{ __('Add suggestion to batch') }}
+        </gl-deprecated-button>
+      </span>
+      <span v-gl-tooltip.viewport="tooltipMessage" tabindex="0">
+        <gl-deprecated-button
+          class="btn-inverted js-apply-btn btn-grouped"
+          :disabled="isDisableButton"
+          variant="success"
+          @click="applySuggestion"
+        >
+          {{ __('Apply suggestion') }}
+        </gl-deprecated-button>
+      </span>
     </div>
-    <gl-deprecated-button
-      v-else-if="canApply"
-      v-gl-tooltip.viewport="__('This also resolves the discussion')"
-      class="btn-inverted js-apply-btn"
-      :disabled="isApplying"
-      variant="success"
-      @click="applySuggestion"
-    >
-      {{ __('Apply suggestion') }}
-    </gl-deprecated-button>
   </div>
 </template>