Adds a new ready to merge widget state component

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

+<script>
+import mergeRequestQueryVariablesMixin from '../../mixins/merge_request_query_variables';
+import readyToMergeQuery from '../../queries/states/new_ready_to_merge.query.graphql';
+import StatusIcon from '../mr_widget_status_icon.vue';
+
+export default {
+  apollo: {
+    canMerge: {
+      query: readyToMergeQuery,
+      skip() {
+        return !this.mr || !window.gon?.features?.mergeRequestWidgetGraphql;
+      },
+      variables() {
+        return this.mergeRequestQueryVariables;
+      },
+      update: (data) => data?.project?.mergeRequest?.userPermissions?.canMerge,
+    },
+  },
+  components: {
+    StatusIcon,
+  },
+  mixins: [mergeRequestQueryVariablesMixin],
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      canMerge: null,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-body media">
+    <status-icon status="success" />
+    <p class="media-body gl-m-0! gl-font-weight-bold">
+      <template v-if="canMerge">
+        {{ __('Ready to merge!') }}
+      </template>
+      <template v-else>
+        {{ __('Ready to merge by members who can write to the target branch.') }}
+      </template>
+    </p>
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -72,7 +72,9 @@ export default {
     'mr-widget-nothing-to-merge': NothingToMergeState,
     'mr-widget-not-allowed': NotAllowedState,
     'mr-widget-missing-branch': MissingBranchState,
-    'mr-widget-ready-to-merge': ReadyToMergeState,
+    'mr-widget-ready-to-merge': window.gon?.features?.restructuredMrWidget
+      ? () => import('./components/states/new_ready_to_merge.vue')
+      : ReadyToMergeState,
     'sha-mismatch': ShaMismatch,
     'mr-widget-checking': CheckingState,
     'mr-widget-unresolved-discussions': UnresolvedDiscussionsState,

app/assets/javascripts/vue_merge_request_widget/queries/states/new_ready_to_merge.query.graphql

+query readyToMergeQuery($projectPath: ID!, $iid: String!) {
+  project(fullPath: $projectPath) {
+    mergeRequest(iid: $iid) {
+      userPermissions {
+        canMerge
+      }
+    }
+  }
+}

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

@@ -25,7 +25,7 @@ export default function deviseState() {
     return stateKey.shaMismatch;
   } else if (this.autoMergeEnabled && !this.mergeError) {
     return stateKey.autoMergeEnabled;
-  } else if (!this.canMerge) {
+  } else if (!this.canMerge && !window.gon?.features?.restructuredMrWidget) {
     return stateKey.notAllowedToMerge;
   } else if (this.canBeMerged) {
     return stateKey.readyToMerge;

app/controllers/projects/merge_requests_controller.rb

@@ -41,6 +41,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:usage_data_i_testing_summary_widget_total, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:improved_emoji_picker, project, default_enabled: :yaml)
     push_frontend_feature_flag(:diffs_virtual_scrolling, project, default_enabled: :yaml)
+    push_frontend_feature_flag(:restructured_mr_widget, project, default_enabled: :yaml)
 
     # Usage data feature flags
     push_frontend_feature_flag(:users_expanding_widgets_usage_data, @project, default_enabled: :yaml)

config/feature_flags/development/restructured_mr_widget.yml

+---
+name: restructured_mr_widget
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/68565
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/339181
+milestone: '14.3'
+type: development
+group: group::code review
+default_enabled: false

locale/gitlab.pot

@@ -27483,6 +27483,12 @@ msgstr ""
 msgid "Ready to get started with GitLab? Follow these steps to set up your workspace, plan and commit changes, and deploy your project."
 msgstr ""
 
+msgid "Ready to merge by members who can write to the target branch."
+msgstr ""
+
+msgid "Ready to merge!"
+msgstr ""
+
 msgid "Reauthenticating with SAML provider."
 msgstr ""
 

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`New ready to merge state component renders permission text if canMerge (false) is false 1`] = `
+<div
+  class="mr-widget-body media"
+>
+  <status-icon-stub
+    status="success"
+  />
+   
+  <p
+    class="media-body gl-m-0! gl-font-weight-bold"
+  >
+    
+      Ready to merge by members who can write to the target branch.
+    
+  </p>
+</div>
+`;
+
+exports[`New ready to merge state component renders permission text if canMerge (true) is false 1`] = `
+<div
+  class="mr-widget-body media"
+>
+  <status-icon-stub
+    status="success"
+  />
+   
+  <p
+    class="media-body gl-m-0! gl-font-weight-bold"
+  >
+    
+      Ready to merge!
+    
+  </p>
+</div>
+`;

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

+import { shallowMount } from '@vue/test-utils';
+import ReadyToMerge from '~/vue_merge_request_widget/components/states/new_ready_to_merge.vue';
+
+let wrapper;
+
+function factory({ canMerge }) {
+  wrapper = shallowMount(ReadyToMerge, {
+    propsData: {
+      mr: {},
+    },
+    data() {
+      return { canMerge };
+    },
+  });
+}
+
+describe('New ready to merge state component', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each`
+    canMerge
+    ${true}
+    ${false}
+  `('renders permission text if canMerge ($canMerge) is false', ({ canMerge }) => {
+    factory({ canMerge });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

spec/spec_helper.rb

@@ -260,6 +260,9 @@ RSpec.configure do |config|
       # tests, until we introduce it in user settings
       stub_feature_flags(forti_token_cloud: false)
 
+      # Disable for now whilst we add more states
+      stub_feature_flags(restructured_mr_widget: false)
+
       # These feature flag are by default disabled and used in disaster recovery mode
       stub_feature_flags(ci_queueing_disaster_recovery_disable_fair_scheduling: false)
       stub_feature_flags(ci_queueing_disaster_recovery_disable_quota: false)