Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

10 files changed, 216 insertions, 150 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index a25b4ab54e5..684386883c8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -2,21 +2,20 @@
 import {
   GlButton,
   GlLoadingIcon,
-  GlLink,
-  GlBadge,
   GlSafeHtmlDirective,
   GlTooltipDirective,
   GlIntersectionObserver,
 } from '@gitlab/ui';
 import { once } from 'lodash';
 import * as Sentry from '@sentry/browser';
+import { DynamicScroller, DynamicScrollerItem } from 'vendor/vue-virtual-scroller';
 import api from '~/api';
 import { sprintf, s__, __ } from '~/locale';
-import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import Poll from '~/lib/utils/poll';
 import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants';
 import StatusIcon from './status_icon.vue';
 import Actions from './actions.vue';
+import ChildContent from './child_content.vue';
 import { generateText } from './utils';
 
 export const LOADING_STATES = {
@@ -30,12 +29,12 @@ export default {
   components: {
     GlButton,
     GlLoadingIcon,
-    GlLink,
-    GlBadge,
     GlIntersectionObserver,
-    SmartVirtualList,
     StatusIcon,
     Actions,
+    ChildContent,
+    DynamicScroller,
+    DynamicScrollerItem,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -188,7 +187,7 @@ export default {
       this.fetchFullData(this.$props)
         .then((data) => {
           this.loadingState = null;
-          this.fullData = data;
+          this.fullData = data.map((x, i) => ({ id: i, ...x }));
         })
         .catch((e) => {
           this.loadingState = LOADING_STATES.expandedError;
@@ -196,9 +195,6 @@ export default {
           Sentry.captureException(e);
         });
     },
-    isArray(arr) {
-      return Array.isArray(arr);
-    },
     appear(index) {
       if (index === this.fullData.length - 1) {
         this.showFade = false;
@@ -281,80 +277,33 @@ export default {
       <div v-if="isLoadingExpanded" class="report-block-container">
         <gl-loading-icon size="sm" inline /> {{ __('Loading...') }}
       </div>
-      <smart-virtual-list
+      <dynamic-scroller
         v-else-if="hasFullData"
-        :length="fullData.length"
-        :remain="20"
-        :size="32"
-        wtag="ul"
-        wclass="report-block-list"
+        :items="fullData"
+        :min-item-size="32"
         class="report-block-container gl-px-5 gl-py-0"
       >
-        <li
-          v-for="(data, index) in fullData"
-          :key="data.id"
-          :class="{
-            'gl-border-b-solid gl-border-b-1 gl-border-gray-100': index !== fullData.length - 1,
-          }"
-          class="gl-py-3 gl-pl-7"
-          data-testid="extension-list-item"
-        >
-          <div class="gl-w-full">
-            <div v-if="data.header" class="gl-mb-2">
-              <template v-if="isArray(data.header)">
-                <component
-                  :is="headerI === 0 ? 'strong' : 'span'"
-                  v-for="(header, headerI) in data.header"
-                  :key="headerI"
-                  v-safe-html="generateText(header)"
-                  class="gl-display-block"
-                />
-              </template>
-              <strong v-else v-safe-html="generateText(data.header)"></strong>
-            </div>
-            <div class="gl-display-flex">
-              <status-icon
-                v-if="data.icon"
-                :icon-name="data.icon.name"
-                :size="12"
-                class="gl-pl-0"
-              />
+        <template #default="{ item, index, active }">
+          <dynamic-scroller-item :item="item" :active="active" :class="{ active }">
+            <div
+              :class="{
+                'gl-border-b-solid gl-border-b-1 gl-border-gray-100': index !== fullData.length - 1,
+              }"
+              class="gl-py-3 gl-pl-7"
+              data-testid="extension-list-item"
+            >
               <gl-intersection-observer
                 :options="{ rootMargin: '100px', thresholds: 0.1 }"
                 class="gl-w-full"
                 @appear="appear(index)"
                 @disappear="disappear(index)"
               >
-                <div class="gl-flex-wrap gl-display-flex gl-w-full">
-                  <div class="gl-mr-4 gl-display-flex gl-align-items-center">
-                    <p v-safe-html="generateText(data.text)" class="gl-m-0"></p>
-                  </div>
-                  <div v-if="data.link">
-                    <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
-                  </div>
-                  <div v-if="data.supportingText">
-                    <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
-                  </div>
-                  <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
-                    {{ data.badge.text }}
-                  </gl-badge>
-
-                  <actions
-                    :widget="$options.label || $options.name"
-                    :tertiary-buttons="data.actions"
-                    class="gl-ml-auto"
-                  />
-                </div>
-                <p
-                  v-if="data.subtext"
-                  v-safe-html="generateText(data.subtext)"
-                  class="gl-m-0 gl-font-sm"
-                ></p>
+                <child-content :data="item" :widget-label="widgetLabel" :level="2" />
               </gl-intersection-observer>
             </div>
-          </div>
-        </li>
-      </smart-virtual-list>
+          </dynamic-scroller-item>
+        </template>
+      </dynamic-scroller>
       <div
         :class="{ show: showFade }"
         class="fade mr-extenson-scrim gl-absolute gl-left-0 gl-bottom-0 gl-w-full gl-h-7 gl-pointer-events-none"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
new file mode 100644
index 00000000000..5f42c6c7acb
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
@@ -0,0 +1,95 @@
+<script>
+import { GlBadge, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import StatusIcon from './status_icon.vue';
+import Actions from './actions.vue';
+import { generateText } from './utils';
+
+export default {
+  name: 'ChildContent',
+  components: {
+    GlBadge,
+    GlLink,
+    StatusIcon,
+    Actions,
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    widgetLabel: {
+      type: String,
+      required: true,
+    },
+    level: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+    isArray(arr) {
+      return Array.isArray(arr);
+    },
+    generateText,
+  },
+};
+</script>
+
+<template>
+  <div :class="{ 'gl-pl-6': level === 3 }" class="gl-w-full">
+    <div v-if="data.header" class="gl-mb-2">
+      <template v-if="isArray(data.header)">
+        <component
+          :is="headerI === 0 ? 'strong' : 'span'"
+          v-for="(header, headerI) in data.header"
+          :key="headerI"
+          v-safe-html="generateText(header)"
+          class="gl-display-block"
+        />
+      </template>
+      <strong v-else v-safe-html="generateText(data.header)"></strong>
+    </div>
+    <div class="gl-display-flex">
+      <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" class="gl-pl-0" />
+      <div class="gl-w-full">
+        <div class="gl-flex-wrap gl-display-flex gl-w-full">
+          <div class="gl-mr-4 gl-display-flex gl-align-items-center">
+            <p v-safe-html="generateText(data.text)" class="gl-m-0"></p>
+          </div>
+          <div v-if="data.link">
+            <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
+          </div>
+          <div v-if="data.supportingText">
+            <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
+          </div>
+          <gl-badge v-if="data.badge" :variant="data.badge.variant || 'info'">
+            {{ data.badge.text }}
+          </gl-badge>
+          <actions :widget="widgetLabel" :tertiary-buttons="data.actions" class="gl-ml-auto" />
+        </div>
+        <p
+          v-if="data.subtext"
+          v-safe-html="generateText(data.subtext)"
+          class="gl-m-0 gl-font-sm"
+        ></p>
+      </div>
+    </div>
+    <template v-if="data.children && level === 2">
+      <ul class="gl-m-0 gl-p-0 gl-list-style-none">
+        <li>
+          <child-content
+            v-for="childData in data.children"
+            :key="childData.id"
+            :data="childData"
+            :widget-label="widgetLabel"
+            :level="3"
+            data-testid="child-content"
+          />
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
index b75f2dce54e..f5667aee15b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
@@ -70,7 +70,9 @@ export default {
         <template v-if="isCollapsed">
           <slot name="header"></slot>
           <gl-button
-            variant="link"
+            category="tertiary"
+            variant="confirm"
+            size="small"
             data-testid="mr-collapsible-title"
             :disabled="isLoading"
             :class="{ 'border-0': isLoading }"
@@ -81,7 +83,9 @@ export default {
         </template>
         <gl-button
           v-else
-          variant="link"
+          category="tertiary"
+          variant="confirm"
+          size="small"
           data-testid="mr-collapsible-title"
           :disabled="isLoading"
           :class="{ 'border-0': isLoading }"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue
index 68cff1368af..b062833cdf8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue
@@ -1,6 +1,7 @@
 <script>
 /* eslint-disable @gitlab/require-i18n-strings */
 import { GlModal, GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { escapeShellString } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -10,24 +11,26 @@ export default {
     steps: {
       step1: {
         label: __('Step 1.'),
-        help: __('Fetch and check out the branch for this merge request'),
+        help: __("Fetch and check out this merge request's feature branch:"),
       },
       step2: {
         label: __('Step 2.'),
-        help: __('Review the changes locally'),
+        help: __('Review the changes locally.'),
       },
       step3: {
         label: __('Step 3.'),
-        help: __('Merge the branch and fix any conflicts that come up'),
+        help: __(
+          'Merge the feature branch into the target branch and fix any conflicts. %{linkStart}How do I fix them?%{linkEnd}',
+        ),
       },
       step4: {
         label: __('Step 4.'),
-        help: __('Push the result of the merge to GitLab'),
+        help: __('Push the target branch up to GitLab.'),
       },
     },
     copyCommands: __('Copy commands'),
     tip: __(
-      '%{strongStart}Tip:%{strongEnd} You can also checkout merge requests locally by %{linkStart}following these guidelines%{linkEnd}',
+      '%{strongStart}Tip:%{strongEnd} You can also check out merge requests locally. %{linkStart}Learn more.%{linkEnd}',
     ),
     title: __('Check out, review, and merge locally'),
   },
@@ -74,6 +77,13 @@ export default {
       default: null,
     },
   },
+  data() {
+    return {
+      resolveConflictsFromCli: helpPagePath('ee/user/project/merge_requests/conflicts.html', {
+        anchor: 'resolve-conflicts-from-the-command-line',
+      }),
+    };
+  },
   computed: {
     mergeInfo1() {
       const escapedOriginBranch = escapeShellString(`origin/${this.sourceBranch}`);
@@ -138,7 +148,13 @@ export default {
       <strong>
         {{ $options.i18n.steps.step3.label }}
       </strong>
-      {{ $options.i18n.steps.step3.help }}
+      <gl-sprintf :message="$options.i18n.steps.step3.help">
+        <template #link="{ content }">
+          <gl-link class="gl-display-inline-block" :href="resolveConflictsFromCli">
+            {{ content }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
     </p>
     <div class="gl-display-flex">
       <pre class="gl-w-full" data-testid="how-to-merge-instructions">{{ mergeInfo2 }}</pre>
@@ -163,7 +179,7 @@ export default {
       />
     </div>
     <p v-if="reviewingDocsPath">
-      <gl-sprintf :message="$options.i18n.tip">
+      <gl-sprintf data-testid="docs-tip" :message="$options.i18n.tip">
         <template #strong="{ content }">
           <strong>{{ content }}</strong>
         </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 730d11b1208..2cef37d5c2e 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
@@ -1,5 +1,5 @@
 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlSafeHtmlDirective as SafeHtml, GlLink } from '@gitlab/ui';
 import { s__, n__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -8,6 +8,9 @@ export default {
   directives: {
     SafeHtml,
   },
+  components: {
+    GlLink,
+  },
   mixins: [glFeatureFlagMixin()],
   props: {
     relatedLinks: {
@@ -37,6 +40,17 @@ export default {
 
       return n__('mrWidget|Closes issue', 'mrWidget|Closes issues', this.relatedLinks.closingCount);
     },
+    assignIssueText() {
+      if (this.relatedLinks.unassignedCount > 1) {
+        return s__('mrWidget|Assign yourself to these issues');
+      }
+      return s__('mrWidget|Assign yourself to this issue');
+    },
+    shouldShowAssignToMeLink() {
+      return (
+        this.relatedLinks.unassignedCount && this.relatedLinks.assignToMe && this.showAssignToMe
+      );
+    },
   },
 };
 </script>
@@ -44,23 +58,28 @@ export default {
   <section>
     <p
       v-if="relatedLinks.closing"
-      :class="{ 'gl-display-line gl-m-0': glFeatures.restructuredMrWidget }"
+      :class="{ 'gl-display-inline gl-m-0': glFeatures.restructuredMrWidget }"
     >
       {{ closesText }}
       <span v-safe-html="relatedLinks.closing"></span>
     </p>
     <p
       v-if="relatedLinks.mentioned"
-      :class="{ 'gl-display-line gl-m-0': glFeatures.restructuredMrWidget }"
+      :class="{ 'gl-display-inline gl-m-0': glFeatures.restructuredMrWidget }"
     >
+      <span v-if="relatedLinks.closing && glFeatures.restructuredMrWidget">&middot;</span>
       {{ n__('mrWidget|Mentions issue', 'mrWidget|Mentions issues', relatedLinks.mentionedCount) }}
       <span v-safe-html="relatedLinks.mentioned"></span>
     </p>
     <p
-      v-if="relatedLinks.assignToMe && showAssignToMe"
-      :class="{ 'gl-display-line gl-m-0': glFeatures.restructuredMrWidget }"
+      v-if="shouldShowAssignToMeLink"
+      :class="{ 'gl-display-inline gl-m-0': glFeatures.restructuredMrWidget }"
     >
-      <span v-html="relatedLinks.assignToMe /* eslint-disable-line vue/no-v-html */"></span>
+      <span>
+        <gl-link rel="nofollow" data-method="post" :href="relatedLinks.assignToMe">{{
+          assignIssueText
+        }}</gl-link>
+      </span>
     </p>
   </section>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue
index 73d75352cb5..5baeb309f79 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue
@@ -21,7 +21,9 @@ export default {
     <gl-dropdown
       right
       text="Use an existing commit message"
-      variant="link"
+      category="tertiary"
+      variant="confirm"
+      size="small"
       class="mr-commit-dropdown"
     >
       <gl-dropdown-item
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 5c4a526bcc3..400759aa086 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
@@ -77,7 +77,7 @@ export default {
             :target-branch="targetBranch"
           />
         </span>
-        <gl-button variant="link" class="modify-message-button">
+        <gl-button category="tertiary" variant="confirm" size="small" class="modify-message-button">
           {{ modifyLinkMessage }}
         </gl-button>
       </span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index a2c9cfe53cc..7435f578852 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -82,17 +82,8 @@ export default {
 
       return this.mr.shouldBeRebased;
     },
-    sourceBranchProtected() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.stateData.sourceBranchProtected;
-      }
-
-      return this.mr.sourceBranchProtected;
-    },
     showResolveButton() {
-      return (
-        this.mr.conflictResolutionPath && this.canPushToSourceBranch && !this.sourceBranchProtected
-      );
+      return this.mr.conflictResolutionPath && this.canPushToSourceBranch;
     },
   },
 };
@@ -144,7 +135,7 @@ export default {
           :size="glFeatures.restructuredMrWidget ? 'small' : 'medium'"
           data-testid="merge-locally-button"
         >
-          {{ s__('mrWidget|Merge locally') }}
+          {{ s__('mrWidget|Resolve locally') }}
         </gl-button>
       </template>
     </div>
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 bb0fb410d3e..ebdc8309cd5 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
@@ -3,13 +3,11 @@ import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import ActionsButton from '~/vue_shared/components/actions_button.vue';
 import simplePoll from '../../../lib/utils/simple_poll';
 import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import rebaseQuery from '../../queries/states/rebase.query.graphql';
 import statusIcon from '../mr_widget_status_icon.vue';
-import { REBASE_BUTTON_KEY, REBASE_WITHOUT_CI_BUTTON_KEY } from '../../constants';
 
 export default {
   name: 'MRWidgetRebase',
@@ -28,7 +26,6 @@ export default {
   components: {
     statusIcon,
     GlSkeletonLoader,
-    ActionsButton,
     GlButton,
   },
   mixins: [glFeatureFlagMixin(), mergeRequestQueryVariablesMixin],
@@ -47,7 +44,6 @@ export default {
       state: {},
       isMakingRequest: false,
       rebasingError: null,
-      selectedRebaseAction: REBASE_BUTTON_KEY,
     };
   },
   computed: {
@@ -93,28 +89,6 @@ export default {
     fastForwardMergeText() {
       return __('Merge blocked: the source branch must be rebased onto the target branch.');
     },
-    actions() {
-      return [this.rebaseAction, this.rebaseWithoutCiAction].filter((action) => action);
-    },
-    rebaseAction() {
-      return {
-        key: REBASE_BUTTON_KEY,
-        text: __('Rebase'),
-        secondaryText: __('Rebases and triggers a pipeline'),
-        attrs: {
-          'data-qa-selector': 'mr_rebase_button',
-        },
-        handle: () => this.rebase(),
-      };
-    },
-    rebaseWithoutCiAction() {
-      return {
-        key: REBASE_WITHOUT_CI_BUTTON_KEY,
-        text: __('Rebase without CI'),
-        secondaryText: __('Performs a rebase but skips triggering a new pipeline'),
-        handle: () => this.rebase({ skipCi: true }),
-      };
-    },
   },
   methods: {
     rebase({ skipCi = false } = {}) {
@@ -138,8 +112,8 @@ export default {
           }
         });
     },
-    selectRebaseAction(key) {
-      this.selectedRebaseAction = key;
+    rebaseWithoutCi() {
+      return this.rebase({ skipCi: true });
     },
     checkRebaseStatus(continuePolling, stopPolling) {
       this.service
@@ -198,10 +172,10 @@ export default {
         >
         <div
           v-if="!rebaseInProgress && canPushToSourceBranch && !isMakingRequest"
-          class="accept-merge-holder clearfix js-toggle-container accept-action media space-children"
+          class="accept-merge-holder clearfix js-toggle-container accept-action media space-children gl-align-items-center"
         >
           <gl-button
-            v-if="!glFeatures.restructuredMrWidget && !showRebaseWithoutCi"
+            v-if="!glFeatures.restructuredMrWidget"
             :loading="isMakingRequest"
             variant="confirm"
             data-qa-selector="mr_rebase_button"
@@ -210,14 +184,16 @@ export default {
           >
             {{ __('Rebase') }}
           </gl-button>
-          <actions-button
+          <gl-button
             v-if="!glFeatures.restructuredMrWidget && showRebaseWithoutCi"
-            :actions="actions"
-            :selected-key="selectedRebaseAction"
+            :loading="isMakingRequest"
             variant="confirm"
-            category="primary"
-            @select="selectRebaseAction"
-          />
+            category="secondary"
+            data-testid="rebase-without-ci-button"
+            @click="rebaseWithoutCi"
+          >
+            {{ __('Rebase without pipeline') }}
+          </gl-button>
           <span
             v-if="!rebasingError"
             :class="{ 'gl-ml-0! gl-text-body!': glFeatures.restructuredMrWidget }"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index bc094501e89..4f8faeb877f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -82,6 +82,13 @@ export default {
         };
         this.loading = false;
 
+        if (!this.commitMessageIsTouched) {
+          this.commitMessage = this.state.defaultMergeCommitMessage;
+        }
+        if (!this.squashCommitMessageIsTouched) {
+          this.squashCommitMessage = this.state.defaultSquashCommitMessage;
+        }
+
         if (this.state.mergeTrainsCount !== null && this.state.mergeTrainsCount !== undefined) {
           this.initPolling();
         }
@@ -133,9 +140,11 @@ export default {
       isMakingRequest: false,
       isMergingImmediately: false,
       commitMessage: this.mr.commitMessage,
+      commitMessageIsTouched: false,
       squashBeforeMerge: this.mr.squashIsSelected,
       isSquashReadOnly: this.mr.squashIsReadonly,
       squashCommitMessage: this.mr.squashCommitMessage,
+      squashCommitMessageIsTouched: false,
       isPipelineFailedModalVisibleMergeTrain: false,
       isPipelineFailedModalVisibleNormalMerge: false,
       editCommitMessage: false,
@@ -295,13 +304,6 @@ export default {
 
       return enableSquashBeforeMerge;
     },
-    shouldShowMergeControls() {
-      if (this.glFeatures.restructuredMrWidget) {
-        return this.restructuredWidgetShowMergeButtons;
-      }
-
-      return this.isMergeAllowed || this.isAutoMergeAvailable;
-    },
     shouldShowSquashEdit() {
       return this.squashBeforeMerge && this.shouldShowSquashBeforeMerge;
     },
@@ -472,6 +474,14 @@ export default {
           });
         });
     },
+    setCommitMessage(val) {
+      this.commitMessage = val;
+      this.commitMessageIsTouched = true;
+    },
+    setSquashCommitMessage(val) {
+      this.squashCommitMessage = val;
+      this.squashCommitMessageIsTouched = true;
+    },
   },
   i18n: {
     mergeCommitTemplateHintText: s__(
@@ -637,21 +647,23 @@ export default {
                 >
                   <commit-edit
                     v-if="shouldShowSquashEdit"
-                    v-model="squashCommitMessage"
+                    :value="squashCommitMessage"
                     :label="__('Squash commit message')"
                     input-id="squash-message-edit"
                     class="gl-m-0! gl-p-0!"
+                    @input="setSquashCommitMessage"
                   >
                     <template #header>
-                      <commit-message-dropdown v-model="squashCommitMessage" :commits="commits" />
+                      <commit-message-dropdown :commits="commits" @input="setSquashCommitMessage" />
                     </template>
                   </commit-edit>
                   <commit-edit
                     v-if="shouldShowMergeEdit"
-                    v-model="commitMessage"
+                    :value="commitMessage"
                     :label="__('Merge commit message')"
                     input-id="merge-message-edit"
                     class="gl-m-0! gl-p-0!"
+                    @input="setCommitMessage"
                   />
                   <li class="gl-m-0! gl-p-0!">
                     <p class="form-text text-muted">
@@ -755,20 +767,22 @@ export default {
           <ul class="border-top content-list commits-list flex-list">
             <commit-edit
               v-if="shouldShowSquashEdit"
-              v-model="squashCommitMessage"
+              :value="squashCommitMessage"
               :label="__('Squash commit message')"
               input-id="squash-message-edit"
               squash
+              @input="setSquashCommitMessage"
             >
               <template #header>
-                <commit-message-dropdown v-model="squashCommitMessage" :commits="commits" />
+                <commit-message-dropdown :commits="commits" @input="setSquashCommitMessage" />
               </template>
             </commit-edit>
             <commit-edit
               v-if="shouldShowMergeEdit"
-              v-model="commitMessage"
+              :value="commitMessage"
               :label="__('Merge commit message')"
               input-id="merge-message-edit"
+              @input="setCommitMessage"
             />
             <li>
               <p class="form-text text-muted">