Show account verification warning on merge request details page

app/views/projects/merge_requests/_page.html.haml

@@ -12,6 +12,7 @@
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/reports'
 - add_page_specific_style 'page_bundles/ci_status'
+- identity_verification_required = false
 
 - add_page_startup_api_call @endpoint_metadata_url
 - add_page_startup_api_call @pinned_file_url if @pinned_file_url
@@ -67,6 +68,8 @@
                 .detail-page-description.gl-pb-0
                   = render "projects/merge_requests/description"
               = render "projects/merge_requests/awards_block"
+              - if identity_verification_required
+                .js-verification-alert{ data: { identity_verification_path: '#' } }
               = render "projects/merge_requests/widget"
               - if mr_action === "show"
                 - add_page_startup_api_call discussions_path(@merge_request, per_page: 20)

ee/app/assets/javascripts/pages/projects/merge_requests/show/index.js

+import '~/pages/projects/merge_requests/show';
+import Vue from 'vue';
+import ConcurrentPipelinesVerificationAlert from 'ee/vue_shared/components/identity_verification/concurrent_pipelines_verification_alert.vue';
+
+const initVerificationAlert = (el) => {
+  return new Vue({
+    el,
+    name: 'ConcurrentPipelinesVerificationAlertRoot',
+    provide: { identityVerificationPath: el.dataset.identityVerificationPath },
+    render(createElement) {
+      return createElement(ConcurrentPipelinesVerificationAlert, { class: 'gl-mt-3' });
+    },
+  });
+};
+
+const el = document.querySelector('.js-verification-alert');
+if (el) {
+  initVerificationAlert(el);
+}

ee/app/assets/javascripts/vue_shared/components/identity_verification/concurrent_pipelines_verification_alert.vue

+<script>
+import { GlAlert } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: { GlAlert },
+  i18n: {
+    title: s__(
+      'IdentityVerification|Before you can run concurrent pipelines, we need to verify your account.',
+    ),
+    description: s__(
+      `IdentityVerification|We won't ask you for this information again. It will never be used for marketing purposes.`,
+    ),
+    buttonText: s__('IdentityVerification|Verify my account'),
+  },
+  inject: ['identityVerificationPath'],
+  data() {
+    return {
+      isVisible: true,
+    };
+  },
+  methods: {
+    dismissAlert() {
+      this.isVisible = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    v-if="isVisible"
+    :title="$options.i18n.title"
+    :primary-button-text="$options.i18n.buttonText"
+    :primary-button-link="identityVerificationPath"
+    variant="warning"
+    @dismiss="dismissAlert"
+  >
+    {{ $options.i18n.description }}
+  </gl-alert>
+</template>

ee/spec/frontend/vue_shared/components/identity_verification/concurrent_pipelines_verification_alert_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import ConcurrentPipelinesVerificationAlert from 'ee/vue_shared/components/identity_verification/concurrent_pipelines_verification_alert.vue';
+
+describe('Concurrent pipelines verification alert', () => {
+  let wrapper;
+
+  const createWrapper = () => {
+    wrapper = shallowMount(ConcurrentPipelinesVerificationAlert, {
+      provide: {
+        identityVerificationPath: 'identity/verification/path',
+      },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  it('shows alert with expected props', () => {
+    expect(findAlert().props()).toMatchObject({
+      title: 'Before you can run concurrent pipelines, we need to verify your account.',
+      primaryButtonText: 'Verify my account',
+      primaryButtonLink: 'identity/verification/path',
+      variant: 'warning',
+    });
+  });
+
+  it('shows alert with expected description', () => {
+    expect(findAlert().text()).toBe(
+      `We won't ask you for this information again. It will never be used for marketing purposes.`,
+    );
+  });
+
+  it(`hides the alert when it's dismissed`, async () => {
+    findAlert().vm.$emit('dismiss');
+    await nextTick();
+
+    expect(findAlert().exists()).toBe(false);
+  });
+});

locale/gitlab.pot

@@ -26054,6 +26054,9 @@ msgstr ""
 msgid "IdentityVerification|A new code has been sent."
 msgstr ""
+msgid "IdentityVerification|Before you can run concurrent pipelines, we need to verify your account."
+msgstr ""
+
 msgid "IdentityVerification|Before you finish creating your account, we need to verify your identity. On the verification page, enter the following code."
 msgstr ""
@@ -26192,6 +26195,9 @@ msgstr ""
 msgid "IdentityVerification|Verify email address"
 msgstr ""
+msgid "IdentityVerification|Verify my account"
+msgstr ""
+
 msgid "IdentityVerification|Verify payment method"
 msgstr ""
@@ -26210,6 +26216,9 @@ msgstr ""
 msgid "IdentityVerification|We sent a new code to +%{phoneNumber}"
 msgstr ""
+msgid "IdentityVerification|We won't ask you for this information again. It will never be used for marketing purposes."
+msgstr ""
+
 msgid "IdentityVerification|We've sent a verification code to %{email}"
 msgstr ""