Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

7 files changed, 75 insertions, 37 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 b9729a3dc5c..10887aee689 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
 
 export default {
   components: { GlDropdown, GlDropdownForm, GlFormTextarea, GlButton },
@@ -10,7 +9,7 @@ export default {
       required: false,
       default: false,
     },
-    fileName: {
+    defaultCommitMessage: {
       type: String,
       required: true,
     },
@@ -18,18 +17,11 @@ export default {
   data() {
     return {
       message: null,
-      buttonText: __('Apply suggestion'),
-      headerText: __('Apply suggestion commit message'),
     };
   },
-  computed: {
-    placeholderText() {
-      return sprintf(__('Apply suggestion on %{fileName}'), { fileName: this.fileName });
-    },
-  },
   methods: {
     onApply() {
-      this.$emit('apply', this.message || this.placeholderText);
+      this.$emit('apply', this.message);
     },
   },
 };
@@ -37,18 +29,26 @@ export default {
 
 <template>
   <gl-dropdown
-    :text="buttonText"
-    :header-text="headerText"
+    :text="__('Apply suggestion')"
     :disabled="disabled"
     boundary="window"
     right
-    menu-class="gl-w-full! gl-pb-0!"
+    menu-class="gl-w-full!"
+    @shown="$refs.commitMessage.$el.focus()"
   >
-    <gl-dropdown-form class="gl-m-3!">
-      <gl-form-textarea v-model="message" :placeholder="placeholderText" />
+    <gl-dropdown-form class="gl-px-4! gl-m-0!">
+      <label for="commit-message">{{ __('Commit message') }}</label>
+      <gl-form-textarea
+        id="commit-message"
+        ref="commitMessage"
+        v-model="message"
+        :placeholder="defaultCommitMessage"
+        submit-on-enter
+        @submit="onApply"
+      />
       <gl-button
-        class="gl-w-quarter! gl-mt-3 gl-text-center! float-right"
-        category="secondary"
+        class="gl-w-auto! gl-mt-3 gl-text-center! gl-hover-text-white! gl-transition-medium! float-right"
+        category="primary"
         variant="success"
         @click="onApply"
       >
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 232a3054cd0..b6e167524aa 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -158,7 +158,7 @@ export default {
       const mediaInPreview = this.$refs['markdown-preview'].querySelectorAll('video, audio');
 
       if (mediaInPreview) {
-        mediaInPreview.forEach(media => {
+        mediaInPreview.forEach((media) => {
           media.pause();
         });
       }
@@ -169,7 +169,7 @@ export default {
     return new GLForm(
       $(this.$refs['gl-form']),
       {
-        emojis: this.enableAutocomplete,
+        emojis: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         members: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         mergeRequests: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
@@ -199,7 +199,7 @@ export default {
         this.markdownPreview = __('Loading…');
         axios
           .post(this.markdownPreviewPath, { text: this.textareaValue })
-          .then(response => this.renderMarkdown(response.data))
+          .then((response) => this.renderMarkdown(response.data))
           .catch(() => new Flash(__('Error loading markdown preview')));
       } else {
         this.renderMarkdown();
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index d0a0560846a..173d192dab0 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -110,7 +110,7 @@ export default {
       const area = this.$el.parentNode.querySelector('textarea');
 
       CopyAsGFM.nodeToGFM(transformed)
-        .then(gfm => {
+        .then((gfm) => {
           CopyAsGFM.insertPastedText(area, documentFragment.textContent, CopyAsGFM.quoted(gfm));
         })
         .catch(() => {});
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 13ec7a6ada9..93a270b8a97 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue
@@ -27,6 +27,10 @@ export default {
       type: String,
       required: true,
     },
+    defaultCommitMessage: {
+      type: String,
+      required: true,
+    },
     suggestionsCount: {
       type: Number,
       required: false,
@@ -47,8 +51,8 @@ export default {
     },
   },
   methods: {
-    applySuggestion(callback) {
-      this.$emit('apply', { suggestionId: this.suggestion.id, callback });
+    applySuggestion(callback, message) {
+      this.$emit('apply', { suggestionId: this.suggestion.id, callback, message });
     },
     applySuggestionBatch() {
       this.$emit('applyBatch');
@@ -74,6 +78,7 @@ export default {
       :is-applying-batch="suggestion.is_applying_batch"
       :batch-suggestions-count="batchSuggestionsCount"
       :help-page-path="helpPagePath"
+      :default-commit-message="defaultCommitMessage"
       :inapplicable-reason="suggestion.inapplicable_reason"
       @apply="applySuggestion"
       @applyBatch="applySuggestionBatch"
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 fb51840b689..63341b433e0 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
@@ -2,9 +2,10 @@
 import { GlButton, GlLoadingIcon, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import ApplySuggestion from './apply_suggestion.vue';
 
 export default {
-  components: { GlIcon, GlButton, GlLoadingIcon },
+  components: { GlIcon, GlButton, GlLoadingIcon, ApplySuggestion },
   directives: { 'gl-tooltip': GlTooltipDirective },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -37,6 +38,10 @@ export default {
       type: String,
       required: true,
     },
+    defaultCommitMessage: {
+      type: String,
+      required: true,
+    },
     inapplicableReason: {
       type: String,
       required: false,
@@ -57,6 +62,9 @@ export default {
     canBeBatched() {
       return Boolean(this.glFeatures.batchSuggestions);
     },
+    canAddCustomCommitMessage() {
+      return this.glFeatures.suggestionsCustomCommit;
+    },
     isApplying() {
       return this.isApplyingSingle || this.isApplyingBatch;
     },
@@ -77,10 +85,10 @@ export default {
     },
   },
   methods: {
-    applySuggestion() {
+    applySuggestion(message) {
       if (!this.canApply) return;
       this.isApplyingSingle = true;
-      this.$emit('apply', this.applySuggestionCallback);
+      this.$emit('apply', this.applySuggestionCallback, message);
     },
     applySuggestionCallback() {
       this.isApplyingSingle = false;
@@ -142,7 +150,14 @@ export default {
       >
         {{ __('Add suggestion to batch') }}
       </gl-button>
-      <span v-gl-tooltip.viewport="tooltipMessage" tabindex="0">
+      <apply-suggestion
+        v-if="canAddCustomCommitMessage"
+        :disabled="isDisableButton"
+        :default-commit-message="defaultCommitMessage"
+        class="gl-ml-3"
+        @apply="applySuggestion"
+      />
+      <span v-else v-gl-tooltip.viewport="tooltipMessage" tabindex="0">
         <gl-button
           v-if="isLoggedIn"
           class="btn-inverted js-apply-btn btn-grouped"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
index 927a93487e6..5ee51764555 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
@@ -38,6 +38,10 @@ export default {
       type: String,
       required: true,
     },
+    defaultCommitMessage: {
+      type: String,
+      required: true,
+    },
     suggestionsCount: {
       type: Number,
       required: false,
@@ -82,27 +86,41 @@ export default {
       this.isRendered = true;
     },
     generateDiff(suggestionIndex) {
-      const { suggestions, disabled, batchSuggestionsInfo, helpPagePath, suggestionsCount } = this;
+      const {
+        suggestions,
+        disabled,
+        batchSuggestionsInfo,
+        helpPagePath,
+        defaultCommitMessage,
+        suggestionsCount,
+      } = this;
       const suggestion =
         suggestions && suggestions[suggestionIndex] ? suggestions[suggestionIndex] : {};
       const SuggestionDiffComponent = Vue.extend(SuggestionDiff);
       const suggestionDiff = new SuggestionDiffComponent({
-        propsData: { disabled, suggestion, batchSuggestionsInfo, helpPagePath, suggestionsCount },
+        propsData: {
+          disabled,
+          suggestion,
+          batchSuggestionsInfo,
+          helpPagePath,
+          defaultCommitMessage,
+          suggestionsCount,
+        },
       });
 
-      suggestionDiff.$on('apply', ({ suggestionId, callback }) => {
-        this.$emit('apply', { suggestionId, callback, flashContainer: this.$el });
+      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('addToBatch', suggestionId => {
+      suggestionDiff.$on('addToBatch', (suggestionId) => {
         this.$emit('addToBatch', suggestionId);
       });
 
-      suggestionDiff.$on('removeFromBatch', suggestionId => {
+      suggestionDiff.$on('removeFromBatch', (suggestionId) => {
         this.$emit('removeFromBatch', suggestionId);
       });
 
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 5824cb9438f..15c5b9d6733 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -49,10 +49,10 @@ export default {
             )
           "
         >
-          <template #markdownDocsLink="{content}">
+          <template #markdownDocsLink="{ content }">
             <gl-link :href="markdownDocsPath" target="_blank">{{ content }}</gl-link>
           </template>
-          <template #quickActionsDocsLink="{content}">
+          <template #quickActionsDocsLink="{ content }">
             <gl-link :href="quickActionsDocsPath" target="_blank">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
@@ -81,7 +81,7 @@ export default {
             )
           "
         >
-          <template #retryButton="{content}">
+          <template #retryButton="{ content }">
             <gl-button
               variant="link"
               category="primary"
@@ -90,7 +90,7 @@ export default {
               {{ content }}
             </gl-button>
           </template>
-          <template #newFileButton="{content}">
+          <template #newFileButton="{ content }">
             <gl-button
               variant="link"
               category="primary"