Add latest changes from gitlab-org/gitlab@master

33 files changed, 126 insertions, 262 deletions

diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index e0b9643f509..0a3db8ad3a6 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -442,10 +442,10 @@ const Api = {
     });
   },
 
-  applySuggestion(id) {
+  applySuggestion(id, message) {
     const url = Api.buildUrl(Api.applySuggestionPath).replace(':id', encodeURIComponent(id));
 
-    return axios.put(url);
+    return axios.put(url, { commit_message: message });
   },
 
   applySuggestionBatch(ids) {
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 5c777fc6cb6..32822fe1fe8 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -124,6 +124,11 @@ export default {
       required: false,
       default: false,
     },
+    defaultSuggestionCommitMessage: {
+      type: String,
+      required: false,
+      default: '',
+    },
     mrReviews: {
       type: Object,
       required: false,
@@ -268,6 +273,7 @@ export default {
       dismissEndpoint: this.dismissEndpoint,
       showSuggestPopover: this.showSuggestPopover,
       viewDiffsFileByFile: fileByFile(this.fileByFileUserPreference),
+      defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage,
       mrReviews: this.mrReviews || {},
     });
 
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 35ba937c1e2..4e0720c645a 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -83,6 +83,7 @@ export default function initDiffsApp(store) {
         showSuggestPopover: parseBoolean(dataset.showSuggestPopover),
         showWhitespaceDefault: parseBoolean(dataset.showWhitespaceDefault),
         viewDiffsFileByFile: parseBoolean(dataset.fileByFileDefault),
+        defaultSuggestionCommitMessage: dataset.defaultSuggestionCommitMessage,
       };
     },
     computed: {
@@ -123,6 +124,7 @@ export default function initDiffsApp(store) {
           dismissEndpoint: this.dismissEndpoint,
           showSuggestPopover: this.showSuggestPopover,
           fileByFileUserPreference: this.viewDiffsFileByFile,
+          defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage,
           mrReviews: getReviewsForMergeRequest(mrPath),
         },
       });
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index ac34684bb16..e95e9ac3ee4 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -62,6 +62,7 @@ export const setBaseConfig = ({ commit }, options) => {
     projectPath,
     dismissEndpoint,
     showSuggestPopover,
+    defaultSuggestionCommitMessage,
     viewDiffsFileByFile,
     mrReviews,
   } = options;
@@ -73,6 +74,7 @@ export const setBaseConfig = ({ commit }, options) => {
     projectPath,
     dismissEndpoint,
     showSuggestPopover,
+    defaultSuggestionCommitMessage,
     viewDiffsFileByFile,
     mrReviews,
   });
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index 2aa971374ec..aa89c74cef0 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -45,5 +45,6 @@ export default () => ({
   fileFinderVisible: false,
   dismissEndpoint: '',
   showSuggestPopover: true,
+  defaultSuggestionCommitMessage: '',
   mrReviews: {},
 });
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index 4e772d17c29..06f0f2c3dfb 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -36,6 +36,7 @@ export default {
       projectPath,
       dismissEndpoint,
       showSuggestPopover,
+      defaultSuggestionCommitMessage,
       viewDiffsFileByFile,
       mrReviews,
     } = options;
@@ -47,6 +48,7 @@ export default {
       projectPath,
       dismissEndpoint,
       showSuggestPopover,
+      defaultSuggestionCommitMessage,
       viewDiffsFileByFile,
       mrReviews,
     });
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index 094ebe5316a..8855ceac3d5 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -54,6 +54,7 @@ export default {
     ...mapState({
       batchSuggestionsInfo: (state) => state.notes.batchSuggestionsInfo,
     }),
+    ...mapState('diffs', ['defaultSuggestionCommitMessage']),
     noteBody() {
       return this.note.note;
     },
@@ -98,12 +99,16 @@ export default {
     formCancelHandler(shouldConfirm, isDirty) {
       this.$emit('cancelForm', shouldConfirm, isDirty);
     },
-    applySuggestion({ suggestionId, flashContainer, callback = () => {} }) {
+    applySuggestion({ suggestionId, flashContainer, callback = () => {}, message }) {
       const { discussion_id: discussionId, id: noteId } = this.note;
 
-      return this.submitSuggestion({ discussionId, noteId, suggestionId, flashContainer }).then(
-        callback,
-      );
+      return this.submitSuggestion({
+        discussionId,
+        noteId,
+        suggestionId,
+        flashContainer,
+        message,
+      }).then(callback);
     },
     applySuggestionBatch({ flashContainer }) {
       return this.submitSuggestionBatch({ flashContainer });
@@ -130,6 +135,7 @@ export default {
       :note-html="note.note_html"
       :line-type="lineType"
       :help-page-path="helpPagePath"
+      :default-commit-message="defaultSuggestionCommitMessage"
       @apply="applySuggestion"
       @applyBatch="applySuggestionBatch"
       @addToBatch="addSuggestionToBatch"
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 0ab781c13d3..c6684efed4d 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -559,7 +559,7 @@ export const updateResolvableDiscussionsCounts = ({ commit }) =>
 
 export const submitSuggestion = (
   { commit, dispatch },
-  { discussionId, suggestionId, flashContainer },
+  { discussionId, suggestionId, flashContainer, message },
 ) => {
   const dispatchResolveDiscussion = () =>
     dispatch('resolveDiscussion', { discussionId }).catch(() => {});
@@ -567,7 +567,7 @@ export const submitSuggestion = (
   commit(types.SET_RESOLVING_DISCUSSION, true);
   dispatch('stopPolling');
 
-  return Api.applySuggestion(suggestionId)
+  return Api.applySuggestion(suggestionId, message)
     .then(dispatchResolveDiscussion)
     .catch((err) => {
       const defaultMessage = __(
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
index f440903d8f2..f596333237d 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -1,8 +1,8 @@
 <script>
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import { __ } from '~/locale';
 import { DEFAULT, LOAD_FAILURE } from '../../constants';
-import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql';
 import PipelineGraph from './graph_component.vue';
 import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
 
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
index 7b8551c32e5..40e6a01b88c 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
@@ -1,5 +1,5 @@
 <script>
-import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql';
+import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import LinkedPipeline from './linked_pipeline.vue';
 import { LOAD_FAILURE } from '../../constants';
 import { UPSTREAM } from './constants';
diff --git a/app/assets/javascripts/pipelines/graphql/fragments/linked_pipelines.fragment.graphql b/app/assets/javascripts/pipelines/graphql/fragments/linked_pipelines.fragment.graphql
deleted file mode 100644
index 3bf6d8dc9d8..00000000000
--- a/app/assets/javascripts/pipelines/graphql/fragments/linked_pipelines.fragment.graphql
+++ /dev/null
@@ -1,17 +0,0 @@
-fragment LinkedPipelineData on Pipeline {
-  id
-  iid
-  path
-  status: detailedStatus {
-    group
-    label
-    icon
-  }
-  sourceJob {
-    name
-  }
-  project {
-    name
-    fullPath
-  }
-}
diff --git a/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_details.query.graphql b/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_details.query.graphql
deleted file mode 100644
index 25aede49631..00000000000
--- a/app/assets/javascripts/pipelines/graphql/queries/get_pipeline_details.query.graphql
+++ /dev/null
@@ -1,65 +0,0 @@
-#import "../fragments/linked_pipelines.fragment.graphql"
-
-query getPipelineDetails($projectPath: ID!, $iid: ID!) {
-  project(fullPath: $projectPath) {
-    pipeline(iid: $iid) {
-      id
-      iid
-      downstream {
-        nodes {
-          ...LinkedPipelineData
-        }
-      }
-      upstream {
-        ...LinkedPipelineData
-      }
-      stages {
-        nodes {
-          name
-          status: detailedStatus {
-            action {
-              icon
-              path
-              title
-            }
-          }
-          groups {
-            nodes {
-              status: detailedStatus {
-                label
-                group
-                icon
-              }
-              name
-              size
-              jobs {
-                nodes {
-                  name
-                  scheduledAt
-                  needs {
-                    nodes {
-                      name
-                    }
-                  }
-                  status: detailedStatus {
-                    icon
-                    tooltip
-                    hasDetails
-                    detailsPath
-                    group
-                    action {
-                      buttonTitle
-                      icon
-                      path
-                      title
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
index 5be1ce66d60..560a68031ef 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_alert_message.vue
@@ -36,7 +36,7 @@ export default {
 </script>
 
 <template>
-  <div class="m-3 ml-7" :class="messageClass">
+  <div class="gl-m-3 gl-ml-7" :class="messageClass">
     <slot></slot>
     <gl-link v-if="helpPath" :href="helpPath" target="_blank">
       <gl-icon :size="16" name="question-o" class="align-middle" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
index 1727383ea2c..3cd003461b3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
@@ -30,7 +30,7 @@ export default {
 };
 </script>
 <template>
-  <section class="mr-widget-help font-italic">
+  <section class="gl-py-3 gl-pr-3 gl-pl-5 gl-ml-7 mr-widget-help gl-font-style-italic">
     <template v-if="missingBranch">
       {{ missingBranchInfo }}
     </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
index 56a50b55f9d..43317130b08 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -30,7 +30,7 @@ export default {
 };
 </script>
 <template>
-  <section class="mr-info-list mr-links">
+  <section class="mr-info-list gl-ml-7 gl-pb-5">
     <p v-if="relatedLinks.closing">{{ closesText }} <span v-html="relatedLinks.closing"></span></p>
     <p v-if="relatedLinks.mentioned">
       {{ s__('mrWidget|Mentions') }} <span v-html="relatedLinks.mentioned"></span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
index c917b69953f..d50d97e3570 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
@@ -18,7 +18,7 @@ export default {
 </script>
 
 <template>
-  <p v-once class="mr-info-list mr-links gl-mb-0">
+  <p v-once class="mr-info-list gl-ml-7 gl-pb-5 gl-mb-0">
     <span class="status-text">
       <gl-sprintf :message="$options.i18n.removesBranchText">
         <template #strong="{ content }">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
index bdcea9871ea..d331f1690f5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
@@ -83,6 +83,7 @@ export default {
         :aria-label="ariaLabel"
         category="tertiary"
         class="commit-edit-toggle gl-mr-3"
+        size="small"
         :icon="collapseIcon"
         @click.stop="toggle()"
       />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index a63094206a8..bf86e0d8b07 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -159,13 +159,13 @@ export default {
       <div class="rebase-state-find-class-convention media media-body space-children">
         <span
           v-if="rebaseInProgress || isMakingRequest"
-          class="gl-font-weight-bold"
+          class="gl-font-weight-bold gl-ml-0!"
           data-testid="rebase-message"
           >{{ __('Rebase in progress') }}</span
         >
         <span
           v-if="!rebaseInProgress && !canPushToSourceBranch"
-          class="gl-font-weight-bold"
+          class="gl-font-weight-bold gl-ml-0!"
           data-testid="rebase-message"
           v-html="fastForwardMergeText"
         ></span>
@@ -181,12 +181,17 @@ export default {
           >
             {{ __('Rebase') }}
           </gl-button>
-          <span v-if="!rebasingError" class="gl-font-weight-bold" data-testid="rebase-message">{{
-            __(
-              'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
-            )
-          }}</span>
-          <span v-else class="gl-font-weight-bold danger" data-testid="rebase-message">{{
+          <span
+            v-if="!rebasingError"
+            class="gl-font-weight-bold gl-ml-0!"
+            data-testid="rebase-message"
+            >{{
+              __(
+                'Fast-forward merge is not possible. Rebase the source branch onto the target branch.',
+              )
+            }}</span
+          >
+          <span v-else class="gl-font-weight-bold danger gl-ml-0!" data-testid="rebase-message">{{
             rebasingError
           }}</span>
         </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/index.js b/app/assets/javascripts/vue_merge_request_widget/index.js
index 8f2cca3309a..d512877a20d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/index.js
@@ -26,7 +26,11 @@ export default () => {
 
   registerExtension(issueExtension);
 
-  const vm = new Vue({ ...MrWidgetOptions, apolloProvider });
+  const vm = new Vue({
+    el: '#js-vue-mr-widget',
+    ...MrWidgetOptions,
+    apolloProvider,
+  });
 
   window.gl.mrWidget = {
     checkStatus: vm.checkStatus,
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 2653e1351ed..519576d9fe6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -48,7 +48,6 @@ import GroupedAccessibilityReportsApp from '../reports/accessibility_report/grou
 import getStateQuery from './queries/get_state.query.graphql';
 
 export default {
-  el: '#js-vue-mr-widget',
   // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
   // eslint-disable-next-line @gitlab/require-i18n-strings
   name: 'MRWidget',
diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue
deleted file mode 100644
index b856bbcdedd..00000000000
--- a/app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<script>
-import $ from 'jquery';
-import { GlButton } from '@gitlab/ui';
-
-const buttonVariants = ['danger', 'primary', 'success', 'warning'];
-const sizeVariants = ['sm', 'md', 'lg', 'xl'];
-
-export default {
-  name: 'DeprecatedModal2', // use GlModal instead
-
-  components: {
-    GlButton,
-  },
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    modalSize: {
-      type: String,
-      required: false,
-      default: 'md',
-      validator: (value) => sizeVariants.includes(value),
-    },
-    headerTitleText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    footerPrimaryButtonVariant: {
-      type: String,
-      required: false,
-      default: 'primary',
-      validator: (value) => buttonVariants.includes(value),
-    },
-    footerPrimaryButtonText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  computed: {
-    modalSizeClass() {
-      return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
-    },
-  },
-  mounted() {
-    $(this.$el).on('shown.bs.modal', this.opened).on('hidden.bs.modal', this.closed);
-  },
-  beforeDestroy() {
-    $(this.$el).off('shown.bs.modal', this.opened).off('hidden.bs.modal', this.closed);
-  },
-  methods: {
-    emitCancel(event) {
-      this.$emit('cancel', event);
-    },
-    emitSubmit(event) {
-      this.$emit('submit', event);
-    },
-    opened() {
-      this.$emit('open');
-    },
-    closed() {
-      this.$emit('closed');
-    },
-  },
-};
-</script>
-
-<template>
-  <div :id="id" class="modal fade" tabindex="-1" role="dialog">
-    <div :class="modalSizeClass" class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header gl-pr-4">
-          <slot name="header">
-            <h4 class="modal-title">
-              <slot name="title"> {{ headerTitleText }} </slot>
-            </h4>
-            <gl-button
-              :aria-label="s__('Modal|Close')"
-              variant="default"
-              category="tertiary"
-              size="small"
-              icon="close"
-              class="js-modal-close-action"
-              data-dismiss="modal"
-              @click="emitCancel($event)"
-            />
-          </slot>
-        </div>
-
-        <div class="modal-body"><slot></slot></div>
-
-        <div class="modal-footer">
-          <slot name="footer">
-            <gl-button
-              class="js-modal-cancel-action qa-modal-cancel-button"
-              data-dismiss="modal"
-              @click="emitCancel($event)"
-            >
-              {{ s__('Modal|Cancel') }}
-            </gl-button>
-            <gl-button
-              :class="`btn-${footerPrimaryButtonVariant}`"
-              class="js-modal-primary-action qa-modal-primary-button"
-              data-dismiss="modal"
-              @click="emitSubmit($event)"
-            >
-              {{ footerPrimaryButtonText }}
-            </gl-button>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
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/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 a1b3b9c2eba..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,16 +86,30 @@ 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', () => {
diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss
index 76bf7ac81e8..d769ea73101 100644
--- a/app/assets/stylesheets/components/batch_comments/review_bar.scss
+++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss
@@ -4,7 +4,7 @@
   left: 0;
   width: 100%;
   background: $white;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
   padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar
   border-top: 1px solid $border-color;
   padding-left: $contextual-sidebar-width;
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index d9ad4992458..a7623b65539 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -14,7 +14,7 @@
   top: 0;
   margin-top: 3px;
   padding: $gl-padding;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
   width: $award-emoji-width;
   font-size: 14px;
   background-color: $white;
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 745d469e3e8..c5467c304ec 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -471,7 +471,7 @@
       background-color: $black-transparent;
       height: 100%;
       width: 100%;
-      z-index: 300;
+      z-index: $zindex-dropdown-menu;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 41fc4d3dd4e..194c2f89e7d 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -216,7 +216,7 @@
   position: absolute;
   width: auto;
   top: 100%;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
   min-width: 240px;
   max-width: 500px;
   margin-top: $dropdown-vertical-offset;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index bef33bd2ef0..241aaad015e 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -75,7 +75,7 @@
 
 .right-sidebar-expanded {
   padding-right: 0;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
 
   @include media-breakpoint-only(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 674ba1a307b..ee0d76b0301 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -433,6 +433,7 @@ $browser-scrollbar-size: 10px;
  */
 $header-height: 40px;
 $header-zindex: 1000;
+$zindex-dropdown-menu: 300;
 $suggestion-header-height: 46px;
 $ide-statusbar-height: 25px;
 $fixed-layout-width: 1280px;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 7854da0989d..1a223ec0f73 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -124,7 +124,7 @@ $mr-widget-min-height: 69px;
       padding: $gl-padding;
 
       @include media-breakpoint-up(md) {
-        padding-left: $gl-padding-8 * 7;
+        margin-left: $gl-spacing-scale-7;
       }
     }
   }
@@ -221,7 +221,7 @@ $mr-widget-min-height: 69px;
 
   .mr-widget-pipeline-graph {
     .dropdown-menu {
-      z-index: 300;
+      z-index: $zindex-dropdown-menu;
     }
   }
 
@@ -396,10 +396,6 @@ $mr-widget-min-height: 69px;
     }
   }
 
-  .mr-widget-help {
-    padding: 10px 16px 10px ($gl-padding-8 * 7);
-  }
-
   .ci-coverage {
     float: right;
   }
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index ab330ed69c6..7178e7f0c78 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -110,7 +110,7 @@
 
 // This utility is used to force the z-index to match that of dropdown menu's
 .gl-z-dropdown-menu\! {
-  z-index: 300 !important;
+  z-index: $zindex-dropdown-menu !important;
 }
 
 .gl-flex-basis-quarter {