Updates ready to merge state to always be visible

Moves the ready to merge component out of the state
checker and made visible below the state components.

Updates the design and spacing to match the desired
designs.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/324162/

app/assets/javascripts/vue_merge_request_widget/components/added_commit_message.vue

+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { escape } from 'lodash';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { n__, s__ } from '~/locale';
+
+const mergeCommitCount = s__('mrWidgetCommitsAdded|1 merge commit');
+
+export default {
+  components: {
+    GlSprintf,
+  },
+  mixins: [glFeatureFlagMixin()],
+  props: {
+    isSquashEnabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isFastForwardEnabled: {
+      type: Boolean,
+      required: true,
+    },
+    commitsCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    targetBranch: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    targetBranchEscaped() {
+      return escape(this.targetBranch);
+    },
+    commitsCountMessage() {
+      return n__('%d commit', '%d commits', this.isSquashEnabled ? 1 : this.commitsCount);
+    },
+    message() {
+      return this.isFastForwardEnabled
+        ? s__('mrWidgetCommitsAdded|%{commitCount} will be added to %{targetBranch}.')
+        : s__(
+            'mrWidgetCommitsAdded|%{commitCount} and %{mergeCommitCount} will be added to %{targetBranch}%{squashedCommits}.',
+          );
+    },
+    textDecorativeComponent() {
+      return this.glFeatures.restructuredMrWidget ? 'span' : 'strong';
+    },
+  },
+  mergeCommitCount,
+};
+</script>
+
+<template>
+  <span>
+    <gl-sprintf :message="message">
+      <template #commitCount>
+        <component :is="textDecorativeComponent" class="commits-count-message">{{
+          commitsCountMessage
+        }}</component>
+      </template>
+      <template #mergeCommitCount>
+        <component :is="textDecorativeComponent">{{ $options.mergeCommitCount }}</component>
+      </template>
+      <template #targetBranch>
+        <span class="label-branch">{{ targetBranchEscaped }}</span>
+      </template>
+      <template v-if="glFeatures.restructuredMrWidget" #squashedCommits>
+        <template v-if="isSquashEnabled">
+          {{ __('(commits will be squashed)') }}</template
+        ></template
+      >
+    </gl-sprintf>
+  </span>
+</template>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue

 <script>
 import { s__, n__ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'MRWidgetRelatedLinks',
+  mixins: [glFeatureFlagMixin()],
   props: {
     relatedLinks: {
       type: Object,
@@ -14,6 +16,11 @@ export default {
       required: false,
       default: '',
     },
+    showAssignToMe: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     closesText() {
@@ -30,16 +37,25 @@ export default {
 };
 </script>
 <template>
-  <section class="mr-info-list gl-ml-7 gl-pb-5">
-    <p v-if="relatedLinks.closing">
+  <section>
+    <p
+      v-if="relatedLinks.closing"
+      :class="{ 'gl-display-line gl-m-0': glFeatures.restructuredMrWidget }"
+    >
       {{ closesText }}
       <span v-html="relatedLinks.closing /* eslint-disable-line vue/no-v-html */"></span>
     </p>
-    <p v-if="relatedLinks.mentioned">
+    <p
+      v-if="relatedLinks.mentioned"
+      :class="{ 'gl-display-line gl-m-0': glFeatures.restructuredMrWidget }"
+    >
       {{ n__('mrWidget|Mentions issue', 'mrWidget|Mentions issues', relatedLinks.mentionedCount) }}
       <span v-html="relatedLinks.mentioned /* eslint-disable-line vue/no-v-html */"></span>
     </p>
-    <p v-if="relatedLinks.assignToMe">
+    <p
+      v-if="relatedLinks.assignToMe && showAssignToMe"
+      :class="{ 'gl-display-line gl-m-0': glFeatures.restructuredMrWidget }"
+    >
       <span v-html="relatedLinks.assignToMe /* eslint-disable-line vue/no-v-html */"></span>
     </p>
   </section>

app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue

 <script>
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
 export default {
+  mixins: [glFeatureFlagMixin()],
   props: {
     value: {
       type: String,
@@ -20,7 +23,10 @@ export default {
 <template>
   <li>
     <div class="commit-message-editor">
-      <div class="d-flex flex-wrap align-items-center justify-content-between">
+      <div
+        :class="{ 'gl-mb-3': glFeatures.restructuredMrWidget }"
+        class="d-flex flex-wrap align-items-center justify-content-between"
+      >
         <label class="col-form-label" :for="inputId">
           <strong>{{ label }}</strong>
         </label>

app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue

 <script>
-import { GlButton, GlSprintf } from '@gitlab/ui';
-import { escape } from 'lodash';
-import { __, n__, s__ } from '~/locale';
-
-const mergeCommitCount = s__('mrWidgetCommitsAdded|1 merge commit');
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+import AddedCommitMessage from '../added_commit_message.vue';
 
 export default {
-  mergeCommitCount,
   components: {
     GlButton,
-    GlSprintf,
+    AddedCommitMessage,
   },
   props: {
     isSquashEnabled: {
@@ -39,9 +36,6 @@ export default {
     collapseIcon() {
       return this.expanded ? 'chevron-down' : 'chevron-right';
     },
-    commitsCountMessage() {
-      return n__('%d commit', '%d commits', this.isSquashEnabled ? 1 : this.commitsCount);
-    },
     modifyLinkMessage() {
       if (this.isFastForwardEnabled) return __('Modify commit message');
       else if (this.isSquashEnabled) return __('Modify commit messages');
@@ -50,16 +44,6 @@ export default {
     ariaLabel() {
       return this.expanded ? __('Collapse') : __('Expand');
     },
-    targetBranchEscaped() {
-      return escape(this.targetBranch);
-    },
-    message() {
-      return this.isFastForwardEnabled
-        ? s__('mrWidgetCommitsAdded|%{commitCount} will be added to %{targetBranch}.')
-        : s__(
-            'mrWidgetCommitsAdded|%{commitCount} and %{mergeCommitCount} will be added to %{targetBranch}.',
-          );
-    },
   },
   methods: {
     toggle() {
@@ -86,17 +70,12 @@ export default {
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>
         <span class="vertical-align-middle">
-          <gl-sprintf :message="message">
-            <template #commitCount>
-              <strong class="commits-count-message">{{ commitsCountMessage }}</strong>
-            </template>
-            <template #mergeCommitCount>
-              <strong>{{ $options.mergeCommitCount }}</strong>
-            </template>
-            <template #targetBranch>
-              <span class="label-branch">{{ targetBranchEscaped }}</span>
-            </template>
-          </gl-sprintf>
+          <added-commit-message
+            :is-squash-enabled="isSquashEnabled"
+            :is-fast-forward-enabled="isFastForwardEnabled"
+            :commits-count="commitsCount"
+            :target-branch="targetBranch"
+          />
         </span>
         <gl-button variant="link" class="modify-message-button">
           {{ modifyLinkMessage }}

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue

 <script>
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
@@ -6,11 +7,12 @@ export default {
   components: {
     statusIcon,
   },
+  mixins: [glFeatureFlagMixin()],
 };
 </script>
 <template>
   <div class="mr-widget-body media">
-    <status-icon :show-disabled-button="true" status="loading" />
+    <status-icon :show-disabled-button="!glFeatures.restructuredMrWidget" status="loading" />
     <div class="media-body space-children">
       <span class="bold"> {{ s__('mrWidget|Checking if merge request can be merged…') }} </span>
     </div>

app/assets/javascripts/vue_merge_request_widget/components/states/new_ready_to_merge.vue

@@ -37,7 +37,7 @@ export default {
 <template>
   <div class="mr-widget-body media">
     <status-icon status="success" />
-    <p class="media-body gl-m-0! gl-font-weight-bold">
+    <p class="media-body gl-m-0! gl-font-weight-bold gl-text-gray-900!">
       <template v-if="canMerge">
         {{ __('Ready to merge!') }}
       </template>

app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue

@@ -35,6 +35,8 @@ import eventHub from '../../event_hub';
 import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
 import MergeRequestStore from '../../stores/mr_widget_store';
 import statusIcon from '../mr_widget_status_icon.vue';
+import AddedCommitMessage from '../added_commit_message.vue';
+import RelatedLinks from '../mr_widget_related_links.vue';
 import CommitEdit from './commit_edit.vue';
 import CommitMessageDropdown from './commit_message_dropdown.vue';
 import CommitsHeader from './commits_header.vue';
@@ -113,6 +115,8 @@ export default {
       import(
         'ee_component/vue_merge_request_widget/components/merge_train_failed_pipeline_confirmation_dialog.vue'
       ),
+    AddedCommitMessage,
+    RelatedLinks,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -134,6 +138,7 @@ export default {
       isSquashReadOnly: this.mr.squashIsReadonly,
       squashCommitMessage: this.mr.squashCommitMessage,
       isPipelineFailedModalVisible: false,
+      editCommitMessage: false,
     };
   },
   computed: {
@@ -162,7 +167,7 @@ export default {
     },
     isMergeAllowed() {
       if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.state.mergeable || false;
+        return this.state.mergeable;
       }
 
       return this.mr.isMergeAllowed;
@@ -279,6 +284,10 @@ export default {
       return enableSquashBeforeMerge && this.commitsCount > 1;
     },
     shouldShowMergeControls() {
+      if (this.glFeatures.restructuredMrWidget) {
+        return this.restructuredWidgetShowMergeButtons;
+      }
+
       return this.isMergeAllowed || this.isAutoMergeAvailable;
     },
     shouldShowSquashEdit() {
@@ -297,15 +306,26 @@ export default {
     showDangerMessageForMergeTrain() {
       return this.preferredAutoMergeStrategy === MT_MERGE_STRATEGY && this.isPipelineFailed;
     },
+    restructuredWidgetShowMergeButtons() {
+      if (this.glFeatures.restructuredMrWidget) {
+        return this.isMergeAllowed && this.state.userPermissions.canMerge;
+      }
+
+      return true;
+    },
   },
   mounted() {
     if (this.glFeatures.mergeRequestWidgetGraphql) {
       eventHub.$on('ApprovalUpdated', this.updateGraphqlState);
+      eventHub.$on('MRWidgetUpdateRequested', this.updateGraphqlState);
+      eventHub.$on('mr.discussion.updated', this.updateGraphqlState);
     }
   },
   beforeDestroy() {
     if (this.glFeatures.mergeRequestWidgetGraphql) {
       eventHub.$off('ApprovalUpdated', this.updateGraphqlState);
+      eventHub.$off('MRWidgetUpdateRequested', this.updateGraphqlState);
+      eventHub.$off('mr.discussion.updated', this.updateGraphqlState);
     }
 
     if (this.pollingInterval) {
@@ -492,7 +512,12 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div
+    :class="{
+      'gl-border-t-1 gl-border-t-solid gl-border-gray-100 gl-bg-gray-10 gl-pl-7':
+        glFeatures.restructuredMrWidget,
+    }"
+  >
     <div v-if="loading" class="mr-widget-body">
       <div class="gl-w-full mr-ready-to-merge-loader">
         <gl-skeleton-loader :width="418" :height="30">
@@ -504,11 +529,16 @@ export default {
       </div>
     </div>
     <template v-else>
-      <div class="mr-widget-body media">
-        <status-icon :status="iconClass" />
+      <div
+        class="mr-widget-body media"
+        :class="{
+          'mr-widget-body-line-height-1': glFeatures.restructuredMrWidget,
+        }"
+      >
+        <status-icon v-if="!glFeatures.restructuredMrWidget" :status="iconClass" />
         <div class="media-body">
-          <div class="mr-widget-body-controls gl-display-flex gl-align-items-center">
-            <gl-button-group class="gl-align-self-start">
+          <div class="mr-widget-body-controls gl-display-flex gl-align-items-center gl-flex-wrap">
+            <gl-button-group v-if="restructuredWidgetShowMergeButtons" class="gl-align-self-start">
               <gl-button
                 size="medium"
                 category="primary"
@@ -555,6 +585,7 @@ export default {
             </gl-button-group>
             <div
               v-if="shouldShowMergeControls"
+              :class="{ 'gl-w-full gl-order-n1 gl-mb-5': glFeatures.restructuredMrWidget }"
               class="gl-display-flex gl-align-items-center gl-flex-wrap"
             >
               <merge-train-helper-icon
@@ -570,7 +601,11 @@ export default {
                 id="remove-source-branch-input"
                 v-model="removeSourceBranch"
                 :disabled="isRemoveSourceBranchButtonDisabled"
-                class="js-remove-source-branch-checkbox gl-mx-3 gl-display-flex gl-align-items-center"
+                :class="{
+                  'gl-mx-3': !glFeatures.restructuredMrWidget,
+                  'gl-mr-5': glFeatures.restructuredMrWidget,
+                }"
+                class="js-remove-source-branch-checkbox gl-display-flex gl-align-items-center"
               >
                 {{ __('Delete source branch') }}
               </gl-form-checkbox>
@@ -581,11 +616,26 @@ export default {
                 v-model="squashBeforeMerge"
                 :help-path="mr.squashBeforeMergeHelpPath"
                 :is-disabled="isSquashReadOnly"
-                class="gl-mx-3"
+                :class="{
+                  'gl-mx-3': !glFeatures.restructuredMrWidget,
+                  'gl-mr-5': glFeatures.restructuredMrWidget,
+                }"
               />
+
+              <gl-form-checkbox
+                v-if="
+                  glFeatures.restructuredMrWidget && (shouldShowSquashEdit || shouldShowMergeEdit)
+                "
+                v-model="editCommitMessage"
+                class="gl-display-flex gl-align-items-center"
+              >
+                {{ __('Edit commit message') }}
+              </gl-form-checkbox>
             </div>
-            <template v-else>
-              <div class="bold js-resolve-mr-widget-items-message gl-ml-3">
+            <div
+              v-else-if="!glFeatures.restructuredMrWidget"
+              class="bold js-resolve-mr-widget-items-message gl-ml-3"
+            >
               <div
                 v-if="hasPipelineMustSucceedConflict"
                 class="gl-display-flex gl-align-items-center"
@@ -602,10 +652,105 @@ export default {
               </div>
               <gl-sprintf v-else :message="mergeDisabledText" />
             </div>
+            <template v-if="glFeatures.restructuredMrWidget">
+              <div v-show="editCommitMessage" class="gl-w-full gl-order-n1">
+                <ul
+                  :class="{
+                    'content-list': !glFeatures.restructuredMrWidget,
+                    'gl-list-style-none gl-p-0 gl-pt-4': glFeatures.restructuredMrWidget,
+                  }"
+                  class="border-top commits-list flex-list"
+                >
+                  <commit-edit
+                    v-if="shouldShowSquashEdit"
+                    v-model="squashCommitMessage"
+                    :label="__('Squash commit message')"
+                    input-id="squash-message-edit"
+                    class="gl-m-0! gl-p-0!"
+                  >
+                    <template #header>
+                      <commit-message-dropdown v-model="squashCommitMessage" :commits="commits" />
+                    </template>
+                  </commit-edit>
+                  <commit-edit
+                    v-if="shouldShowMergeEdit"
+                    v-model="commitMessage"
+                    :label="__('Merge commit message')"
+                    input-id="merge-message-edit"
+                    class="gl-m-0! gl-p-0!"
+                  >
+                    <template #checkbox>
+                      <label>
+                        <input
+                          id="include-description"
+                          type="checkbox"
+                          @change="updateMergeCommitMessage($event.target.checked)"
+                        />
+                        {{ __('Include merge request description') }}
+                      </label>
+                    </template>
+                  </commit-edit>
+                </ul>
+              </div>
+              <div
+                v-if="!restructuredWidgetShowMergeButtons"
+                class="gl-w-full gl-order-n1 gl-text-gray-500"
+              >
+                <strong>
+                  {{ __('Merge details') }}
+                </strong>
+                <ul class="gl-pl-4 gl-m-0">
+                  <li class="gl-line-height-normal">
+                    <added-commit-message
+                      :is-squash-enabled="squashBeforeMerge"
+                      :is-fast-forward-enabled="!shouldShowMergeEdit"
+                      :commits-count="commitsCount"
+                      :target-branch="stateData.targetBranch"
+                    />
+                  </li>
+                  <li class="gl-line-height-normal">
+                    <template v-if="removeSourceBranch">
+                      {{ __('Source branch will be deleted.') }}
+                    </template>
+                    <template v-else>
+                      {{ __('Source branch will not be deleted.') }}
+                    </template>
+                  </li>
+                  <li v-if="mr.relatedLinks" class="gl-line-height-normal">
+                    <related-links
+                      :state="mr.state"
+                      :related-links="mr.relatedLinks"
+                      :show-assign-to-me="false"
+                      class="mr-ready-merge-related-links gl-display-inline"
+                    />
+                  </li>
+                </ul>
+              </div>
+              <div
+                v-else
+                :class="{ 'gl-mb-5': restructuredWidgetShowMergeButtons }"
+                class="gl-w-full gl-order-n1 gl-text-gray-500"
+              >
+                <added-commit-message
+                  :is-squash-enabled="squashBeforeMerge"
+                  :is-fast-forward-enabled="!shouldShowMergeEdit"
+                  :commits-count="commitsCount"
+                  :target-branch="stateData.targetBranch"
+                />
+                <template v-if="mr.relatedLinks">
+                  &middot;
+                  <related-links
+                    :state="mr.state"
+                    :related-links="mr.relatedLinks"
+                    :show-assign-to-me="false"
+                    class="mr-ready-merge-related-links gl-display-inline"
+                  />
+                </template>
+              </div>
             </template>
           </div>
           <div
-            v-if="showDangerMessageForMergeTrain"
+            v-if="showDangerMessageForMergeTrain && !glFeatures.restructuredMrWidget"
             class="gl-mt-5 gl-text-gray-500"
             data-testid="failed-pipeline-merge-train-text"
           >
@@ -613,7 +758,7 @@ export default {
           </div>
         </div>
       </div>
-      <template v-if="shouldShowMergeControls">
+      <template v-if="shouldShowMergeControls && !glFeatures.restructuredMrWidget">
         <div
           v-if="!shouldShowMergeEdit"
           class="mr-fast-forward-message"
@@ -622,7 +767,7 @@ export default {
           {{ __('Fast-forward merge without a merge commit') }}
         </div>
         <commits-header
-          v-if="shouldShowSquashEdit || shouldShowMergeEdit"
+          v-if="!glFeatures.restructuredMrWidget && (shouldShowSquashEdit || shouldShowMergeEdit)"
           :is-squash-enabled="squashBeforeMerge"
           :commits-count="commitsCount"
           :target-branch="stateData.targetBranch"

app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue

 <script>
-import { GlIcon, GlTooltipDirective, GlFormCheckbox } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective, GlFormCheckbox, GlLink } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { SQUASH_BEFORE_MERGE } from '../../i18n';
 
 export default {
   components: {
     GlIcon,
     GlFormCheckbox,
+    GlLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   i18n: {
     ...SQUASH_BEFORE_MERGE,
   },
@@ -33,6 +36,9 @@ export default {
     tooltipTitle() {
       return this.isDisabled ? this.$options.i18n.tooltipTitle : null;
     },
+    helpIconName() {
+      return this.glFeatures.restructuredMrWidget ? 'question-o' : 'question';
+    },
   },
 };
 </script>
@@ -51,18 +57,18 @@ export default {
     >
       {{ $options.i18n.checkboxLabel }}
     </gl-form-checkbox>
-    <a
+    <gl-link
       v-if="helpPath"
       v-gl-tooltip
       :href="helpPath"
       :title="$options.i18n.helpLabel"
+      :class="{ 'gl-text-blue-600': glFeatures.restructuredMrWidget }"
       target="_blank"
-      rel="noopener noreferrer nofollow"
     >
-      <gl-icon name="question" />
+      <gl-icon :name="helpIconName" />
       <span class="sr-only">
         {{ $options.i18n.helpLabel }}
       </span>
-    </a>
+    </gl-link>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -91,6 +91,7 @@ export default {
     MrWidgetApprovals,
     SecurityReportsApp: () => import('~/vue_shared/security_reports/security_reports_app.vue'),
     MergeChecksFailed: () => import('./components/states/merge_checks_failed.vue'),
+    ReadyToMerge: ReadyToMergeState,
   },
   apollo: {
     state: {
@@ -213,6 +214,9 @@ export default {
         window.gon?.features?.refactorMrWidgetsExtensionsUser
       );
     },
+    isRestructuredMrWidgetEnabled() {
+      return window.gon?.features?.restructuredMrWidget;
+    },
   },
   watch: {
     'mr.machineValue': {
@@ -547,12 +551,17 @@ export default {
 
       <div class="mr-widget-section">
         <component :is="componentName" :mr="mr" :service="service" />
-
-        <div class="mr-widget-info">
+        <ready-to-merge
+          v-if="isRestructuredMrWidgetEnabled && mr.commitsCount"
+          :mr="mr"
+          :service="service"
+        />
+        <div v-else class="mr-widget-info">
           <mr-widget-related-links
             v-if="shouldRenderRelatedLinks"
             :state="mr.state"
             :related-links="mr.relatedLinks"
+            class="mr-info-list gl-ml-7 gl-pb-5"
           />
 
           <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />

app/assets/javascripts/vue_merge_request_widget/queries/states/ready_to_merge.fragment.graphql

@@ -18,7 +18,9 @@ fragment ReadyToMerge on Project {
     commitCount
     diffHeadSha
     userPermissions {
+      canMerge
       removeSourceBranch
+      updateMergeRequest
     }
     targetBranch
     mergeError

app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js

 import { stateKey } from './state_maps';
 
 export default function deviseState() {
-  if (this.hasMergeChecksFailed) {
+  if (!this.commitsCount) {
+    return stateKey.nothingToMerge;
+  } else if (this.hasMergeChecksFailed && !this.autoMergeEnabled) {
     return stateKey.mergeChecksFailed;
   } else if (this.projectArchived) {
     return stateKey.archived;
   } else if (this.branchMissing) {
     return stateKey.missingBranch;
-  } else if (!this.commitsCount) {
-    return stateKey.nothingToMerge;
   } else if (this.mergeStatus === 'unchecked' || this.mergeStatus === 'checking') {
     return stateKey.checking;
   } else if (this.hasConflicts) {

app/assets/stylesheets/pages/merge_requests.scss

@@ -269,7 +269,9 @@ $tabs-holder-z-index: 250;
   }
 
   .mr-widget-body {
+    &:not(.mr-widget-body-line-height-1) {
       line-height: 28px;
+    }
 
     @include clearfix;
 

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -469,11 +469,17 @@ export default {
 
       <div class="mr-widget-section">
         <component :is="componentName" :mr="mr" :service="service" />
-        <div class="mr-widget-info">
+        <ready-to-merge
+          v-if="isRestructuredMrWidgetEnabled && mr.commitsCount"
+          :mr="mr"
+          :service="service"
+        />
+        <div v-else class="mr-widget-info">
           <mr-widget-related-links
             v-if="shouldRenderRelatedLinks"
             :state="mr.state"
             :related-links="mr.relatedLinks"
+            class="mr-info-list gl-ml-7 gl-pb-5"
           />
 
           <source-branch-removal-status v-if="shouldRenderSourceBranchRemovalStatus" />

ee/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js

@@ -92,7 +92,7 @@ export default class MergeRequestStore extends CEMergeRequestStore {
   get hasMergeChecksFailed() {
     if (!window.gon?.features?.restructuredMrWidget) return false;
 
-    if (this.hasApprovalsAvailable) return !this.isApproved;
+    if (this.hasApprovalsAvailable && this.approvals && this.approvalsLeft) return !this.isApproved;
 
     return super.hasMergeChecksFailed;
   }

locale/gitlab.pot

@@ -1110,6 +1110,9 @@ msgstr ""
 msgid "(check progress)"
 msgstr ""
 
+msgid "(commits will be squashed)"
+msgstr ""
+
 msgid "(deleted)"
 msgstr ""
 
@@ -12424,6 +12427,9 @@ msgstr ""
 msgid "Edit comment"
 msgstr ""
 
+msgid "Edit commit message"
+msgstr ""
+
 msgid "Edit deploy freeze"
 msgstr ""
 
@@ -21588,6 +21594,9 @@ msgstr ""
 msgid "Merge commit message"
 msgstr ""
 
+msgid "Merge details"
+msgstr ""
+
 msgid "Merge events"
 msgstr ""
 
@@ -32449,6 +32458,12 @@ msgstr ""
 msgid "Source branch"
 msgstr ""
 
+msgid "Source branch will be deleted."
+msgstr ""
+
+msgid "Source branch will not be deleted."
+msgstr ""
+
 msgid "Source branch: %{source_branch_open}%{source_branch}%{source_branch_close}"
 msgstr ""
 
@@ -40956,7 +40971,7 @@ msgstr ""
 msgid "most recent deployment"
 msgstr ""
 
-msgid "mrWidgetCommitsAdded|%{commitCount} and %{mergeCommitCount} will be added to %{targetBranch}."
+msgid "mrWidgetCommitsAdded|%{commitCount} and %{mergeCommitCount} will be added to %{targetBranch}%{squashedCommits}."
 msgstr ""
 
 msgid "mrWidgetCommitsAdded|%{commitCount} will be added to %{targetBranch}."

spec/frontend/vue_mr_widget/components/states/__snapshots__/new_ready_to_merge_spec.js.snap

@@ -9,7 +9,7 @@ exports[`New ready to merge state component renders permission text if canMerge
   />
    
   <p
-    class="media-body gl-m-0! gl-font-weight-bold"
+    class="media-body gl-m-0! gl-font-weight-bold gl-text-gray-900!"
   >
     
       Ready to merge by members who can write to the target branch.
@@ -27,7 +27,7 @@ exports[`New ready to merge state component renders permission text if canMerge
   />
    
   <p
-    class="media-body gl-m-0! gl-font-weight-bold"
+    class="media-body gl-m-0! gl-font-weight-bold gl-text-gray-900!"
   >
     
       Ready to merge!

spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { GlSprintf } from '@gitlab/ui';
 import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
 
@@ -6,7 +6,7 @@ describe('Commits header component', () => {
   let wrapper;
 
   const createComponent = (props) => {
-    wrapper = shallowMount(CommitsHeader, {
+    wrapper = mount(CommitsHeader, {
       stubs: {
         GlSprintf,
       },

spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js

-import { GlFormCheckbox } from '@gitlab/ui';
+import { GlFormCheckbox, GlLink } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue';
 import { SQUASH_BEFORE_MERGE } from '~/vue_merge_request_widget/i18n';
@@ -77,7 +77,7 @@ describe('Squash before merge component', () => {
         value: false,
       });
 
-      const aboutLink = wrapper.find('a');
+      const aboutLink = wrapper.findComponent(GlLink);
 
       expect(aboutLink.exists()).toBe(false);
     });
@@ -88,7 +88,7 @@ describe('Squash before merge component', () => {
         helpPath: 'test-path',
       });
 
-      const aboutLink = wrapper.find('a');
+      const aboutLink = wrapper.findComponent(GlLink);
 
       expect(aboutLink.exists()).toBe(true);
     });
@@ -99,7 +99,7 @@ describe('Squash before merge component', () => {
         helpPath: 'test-path',
       });
 
-      const aboutLink = wrapper.find('a');
+      const aboutLink = wrapper.findComponent(GlLink);
 
       expect(aboutLink.attributes('href')).toEqual('test-path');
     });

spec/frontend/vue_mr_widget/stores/get_state_key_spec.js

@@ -74,6 +74,7 @@ describe('getStateKey', () => {
 
     expect(bound()).toEqual('nothingToMerge');
 
+    context.commitsCount = 1;
     context.branchMissing = true;
 
     expect(bound()).toEqual('missingBranch');