Merge branch 'ph/324162/updatedReadyToMergeState' into 'master'

Updates ready to merge state to always be visible

See merge request gitlab-org/gitlab!71721

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/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');