Add latest changes from gitlab-org/gitlab@14-4-stable-eev14.4.0-rc42

5 files changed, 80 insertions, 43 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
index d6a20984ad1..ce7cbafb97d 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton } from '@gitlab/ui';
+import { __, n__ } from '~/locale';
 
 export default {
   components: { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton },
@@ -13,12 +14,26 @@ export default {
       type: String,
       required: true,
     },
+    batchSuggestionsCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   data() {
     return {
       message: null,
     };
   },
+  computed: {
+    dropdownText() {
+      if (this.batchSuggestionsCount <= 1) {
+        return __('Apply suggestion');
+      }
+
+      return n__('Apply %d suggestion', 'Apply %d suggestions', this.batchSuggestionsCount);
+    },
+  },
   methods: {
     onApply() {
       this.$emit('apply', this.message);
@@ -29,10 +44,11 @@ export default {
 
 <template>
   <gl-dropdown
-    :text="__('Apply suggestion')"
+    :text="dropdownText"
     :disabled="disabled"
     boundary="window"
     right
+    lazy
     menu-class="gl-w-full!"
     data-qa-selector="apply_suggestion_dropdown"
     @shown="$refs.commitMessage.$el.focus()"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 77730ada9bb..86f04c78ebe 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -254,7 +254,7 @@ export default {
         .then(() => $(this.$refs['markdown-preview']).renderGFM())
         .catch(() =>
           createFlash({
-            message: __('Error rendering markdown preview'),
+            message: __('Error rendering Markdown preview'),
           }),
         );
     },
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
index 9c954fce322..7d8d8c0b90e 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
@@ -54,8 +54,8 @@ export default {
     applySuggestion(callback, message) {
       this.$emit('apply', { suggestionId: this.suggestion.id, callback, message });
     },
-    applySuggestionBatch() {
-      this.$emit('applyBatch');
+    applySuggestionBatch(message) {
+      this.$emit('applyBatch', message);
     },
     addSuggestionToBatch() {
       this.$emit('addToBatch', this.suggestion.id);
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 5fdef0b1a23..f9ae59567b2 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
@@ -58,12 +58,19 @@ export default {
       isApplyingSingle: false,
     };
   },
+
   computed: {
     isApplying() {
       return this.isApplyingSingle || this.isApplyingBatch;
     },
     tooltipMessage() {
-      return this.canApply ? __('This also resolves this thread') : this.inapplicableReason;
+      if (!this.canApply) {
+        return this.inapplicableReason;
+      }
+
+      return this.batchSuggestionsCount > 1
+        ? __('This also resolves all related threads')
+        : __('This also resolves this thread');
     },
     isDisableButton() {
       return this.isApplying || !this.canApply;
@@ -72,13 +79,30 @@ export default {
       if (this.isApplyingSingle || this.batchSuggestionsCount < 2) {
         return __('Applying suggestion...');
       }
+
       return __('Applying suggestions...');
     },
     isLoggedIn() {
       return isLoggedIn();
     },
+    showApplySuggestion() {
+      if (!this.isLoggedIn) return false;
+
+      if (this.batchSuggestionsCount >= 1 && !this.isBatched) {
+        return false;
+      }
+
+      return true;
+    },
   },
   methods: {
+    apply(message) {
+      if (this.batchSuggestionsCount > 1) {
+        this.applySuggestionBatch(message);
+      } else {
+        this.applySuggestion(message);
+      }
+    },
     applySuggestion(message) {
       if (!this.canApply) return;
       this.isApplyingSingle = true;
@@ -88,9 +112,9 @@ export default {
     applySuggestionCallback() {
       this.isApplyingSingle = false;
     },
-    applySuggestionBatch() {
+    applySuggestionBatch(message) {
       if (!this.canApply) return;
-      this.$emit('applyBatch');
+      this.$emit('applyBatch', message);
     },
     addSuggestionToBatch() {
       this.$emit('addToBatch');
@@ -115,45 +139,34 @@ export default {
       <gl-loading-icon size="sm" class="d-flex-center mr-2" />
       <span>{{ applyingSuggestionsMessage }}</span>
     </div>
-    <div v-else-if="canApply && isBatched" class="d-flex align-items-center">
-      <gl-button
-        class="btn-inverted js-remove-from-batch-btn btn-grouped"
-        :disabled="isApplying"
-        @click="removeSuggestionFromBatch"
-      >
-        {{ __('Remove from batch') }}
-      </gl-button>
-      <gl-button
-        v-gl-tooltip.viewport="__('This also resolves all related threads')"
-        class="btn-inverted js-apply-batch-btn btn-grouped"
-        data-qa-selector="apply_suggestions_batch_button"
-        :disabled="isApplying"
-        variant="success"
-        @click="applySuggestionBatch"
-      >
-        {{ __('Apply suggestions') }}
-        <span class="badge badge-pill badge-pill-success">
-          {{ batchSuggestionsCount }}
-        </span>
-      </gl-button>
-    </div>
-    <div v-else class="d-flex align-items-center">
-      <gl-button
-        v-if="suggestionsCount > 1 && !isDisableButton"
-        class="btn-inverted js-add-to-batch-btn btn-grouped"
-        data-qa-selector="add_suggestion_batch_button"
-        :disabled="isDisableButton"
-        @click="addSuggestionToBatch"
-      >
-        {{ __('Add suggestion to batch') }}
-      </gl-button>
+    <div v-else-if="isLoggedIn" class="d-flex align-items-center">
+      <div v-if="isBatched">
+        <gl-button
+          class="btn-inverted js-remove-from-batch-btn btn-grouped"
+          :disabled="isApplying"
+          @click="removeSuggestionFromBatch"
+        >
+          {{ __('Remove from batch') }}
+        </gl-button>
+      </div>
+      <div v-else-if="!isDisableButton && suggestionsCount > 1">
+        <gl-button
+          class="btn-inverted js-add-to-batch-btn btn-grouped"
+          data-qa-selector="add_suggestion_batch_button"
+          :disabled="isDisableButton"
+          @click="addSuggestionToBatch"
+        >
+          {{ __('Add suggestion to batch') }}
+        </gl-button>
+      </div>
       <apply-suggestion
-        v-if="isLoggedIn"
+        v-if="showApplySuggestion"
         v-gl-tooltip.viewport="tooltipMessage"
         :disabled="isDisableButton"
         :default-commit-message="defaultCommitMessage"
+        :batch-suggestions-count="batchSuggestionsCount"
         class="gl-ml-3"
-        @apply="applySuggestion"
+        @apply="apply"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
index 63774c6c498..e36cfb3b275 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
@@ -68,6 +68,10 @@ export default {
     if (this.suggestionsWatch) {
       this.suggestionsWatch();
     }
+
+    if (this.defaultCommitMessageWatch) {
+      this.defaultCommitMessageWatch();
+    }
   },
   methods: {
     renderSuggestions() {
@@ -123,12 +127,16 @@ export default {
         suggestionDiff.suggestionsCount = this.suggestionsCount;
       });
 
+      this.defaultCommitMessageWatch = this.$watch('defaultCommitMessage', () => {
+        suggestionDiff.defaultCommitMessage = this.defaultCommitMessage;
+      });
+
       suggestionDiff.$on('apply', ({ suggestionId, callback, message }) => {
         this.$emit('apply', { suggestionId, callback, flashContainer: this.$el, message });
       });
 
-      suggestionDiff.$on('applyBatch', () => {
-        this.$emit('applyBatch', { flashContainer: this.$el });
+      suggestionDiff.$on('applyBatch', (message) => {
+        this.$emit('applyBatch', { message, flashContainer: this.$el });
       });
 
       suggestionDiff.$on('addToBatch', (suggestionId) => {