Experiment with three CTA PQL

config/feature_flags/experiment/pql_three_cta_test.yml

+---
+name: pql_three_cta_test
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/74054
+rollout_issue_url: 
+milestone: '14.7'
+type: experiment
+group: group::conversion
+default_enabled: false

ee/app/assets/javascripts/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue

@@ -186,12 +186,7 @@ export default {
 
 <template>
   <div>
-    <gl-button
-      v-gl-modal.hand-raise-lead
-      :loading="isLoading"
-      category="secondary"
-      variant="success"
-    >
+    <gl-button v-gl-modal.hand-raise-lead :loading="isLoading">
       {{ $options.i18n.buttonText }}
     </gl-button>
     <gl-modal

ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue

@@ -12,6 +12,8 @@ import securityDependencyImageUrl from 'ee_images/promotions/security-dependenci
 import securityScanningImageUrl from 'ee_images/promotions/security-scanning.png';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
+import GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue';
+import HandRaiseLeadButton from 'ee/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue';
 
 export default {
   directives: {
@@ -23,6 +25,8 @@ export default {
     GlCarouselSlide,
     GlSprintf,
     GlLink,
+    HandRaiseLeadButton,
+    GitlabExperiment,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -159,8 +163,13 @@ export default {
     <div
       class="discover-buttons gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-mx-auto"
     >
+      <gitlab-experiment name="pql_three_cta_test">
+        <template #candidate>
+          <hand-raise-lead-button />
+        </template>
+      </gitlab-experiment>
       <gl-button
-        class="discover-button-upgrade"
+        class="discover-button-upgrade gl-ml-3"
         v-bind="discoverButtonProps"
         category="secondary"
         data-track-label="security-discover-upgrade-cta"
@@ -170,7 +179,7 @@ export default {
         {{ $options.i18n.discoverUpgradeLabel }}
       </gl-button>
       <gl-button
-        class="discover-button-trial"
+        class="discover-button-trial gl-ml-3"
         v-bind="discoverButtonProps"
         category="primary"
         data-track-label="security-discover-trial-cta"

ee/app/assets/javascripts/vue_shared/discover/card_security_discover_bundle.js

 import Vue from 'vue';
 import SecurityDiscoverApp from 'ee/vue_shared/discover/card_security_discover_app.vue';
+import apolloProvider from 'ee/subscriptions/buy_addons_shared/graphql';
 
 export default () => {
   const securityTab = document.getElementById('js-security-discover-app');
@@ -11,6 +12,11 @@ export default () => {
     linkMain,
     linkSecondary,
     linkFeedback,
+    namespaceId,
+    userName,
+    firstName,
+    lastName,
+    companyName,
   } = securityTab.dataset;
 
   const props = {
@@ -29,9 +35,19 @@ export default () => {
 
   return new Vue({
     el: securityTab,
+    apolloProvider,
     components: {
       SecurityDiscoverApp,
     },
+    provide: {
+      user: {
+        namespaceId,
+        userName,
+        firstName,
+        lastName,
+        companyName,
+      },
+    },
     render(createElement) {
       return createElement('security-discover-app', {
         props,

ee/app/helpers/projects/security/discover_helper.rb

+# frozen_string_literal: true
+
+module Projects::Security::DiscoverHelper
+  def pql_three_cta_test_experiment_candidate?(namespace)
+    experiment(:pql_three_cta_test, namespace: namespace) do |e|
+      e.use { false }
+      e.try { true }
+    end.run
+  end
+end

ee/app/views/groups/security/discover/show.html.haml

@@ -2,7 +2,9 @@
 - page_title _("Security")
 - add_page_specific_style 'page_bundles/security_discover'
 - linkFeedback = 'https://gitlab.com/gitlab-org/growth/ui-ux/issues/25'
-- content = 'discover-group-security'
+- content = pql_three_cta_test_experiment_candidate?(@group.root_ancestor) ? 'discover-group-security-pqltest' : 'discover-group-security'
 - linkUpgrade = group_billings_path(@group.root_ancestor, source: content)
+- data = { group: { id: @group.id, name: @group.name }, link: { main: new_trial_registration_path(glm_source: 'gitlab.com', glm_content: content), secondary: linkUpgrade, feedback: linkFeedback } }
+- data.merge!(hand_raise_props(@group.root_ancestor))
 
-#js-security-discover-app{ data: { group: { id: @group.id, name: @group.name }, link: { main: new_trial_registration_path(glm_source: 'gitlab.com', glm_content: content), secondary: linkUpgrade, feedback: linkFeedback } } }
+#js-security-discover-app{ data: data }

ee/app/views/projects/security/discover/show.html.haml

@@ -2,7 +2,9 @@
 - page_title _("Security Dashboard")
 - add_page_specific_style 'page_bundles/security_discover'
 - linkFeedback = 'https://gitlab.com/gitlab-org/growth/ui-ux/issues/25'
-- content = 'discover-project-security'
+- content = pql_three_cta_test_experiment_candidate?(@project.root_ancestor) ? 'discover-project-security-pqltest' : 'discover-project-security'
 - linkUpgrade = @project.personal? ? profile_billings_path(@project.group, source: content) : group_billings_path(@project.root_ancestor, source: content)
+- data = { project: { id: @project.id, name: @project.name }, link: { main: new_trial_registration_path(glm_source: 'gitlab.com', glm_content: content), secondary: linkUpgrade, feedback: linkFeedback } }
+- data.merge!(hand_raise_props(@project.root_ancestor))
 
-#js-security-discover-app{ data: { project: { id: @project.id, name: @project.name }, link: { main: new_trial_registration_path(glm_source: 'gitlab.com', glm_content: content), secondary: linkUpgrade, feedback: linkFeedback } } }
+#js-security-discover-app{ data: data }

ee/spec/frontend/vue_shared/discover/card_security_discover_app_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import { stubExperiments } from 'helpers/experimentation_helper';
+
+import { getExperimentData } from '~/experimentation/utils';
 import CardSecurityDiscoverApp from 'ee/vue_shared/discover/card_security_discover_app.vue';
+import HandRaiseLeadButton from 'ee/hand_raise_leads/hand_raise_lead/components/hand_raise_lead_button.vue';
 import { mockTracking } from 'helpers/tracking_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
 
 describe('Card security discover app', () => {
   let wrapper;
 
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(CardSecurityDiscoverApp, {
+  const createComponent = ({ mountFn = shallowMount } = {}) => {
+    const propsData = {
+      project: {
+        id: 1,
+        name: 'Awesome Project',
+      },
+      linkMain: '/link/main',
+      linkSecondary: '/link/secondary',
+      linkFeedback: 'link/feedback',
+    };
+    wrapper = mountFn(CardSecurityDiscoverApp, {
+      localVue,
       propsData,
+      apolloProvider: createMockApollo([], {}),
+      provide: {
+        user: {
+          namespaceId: '1',
+          userName: 'joe',
+          firstName: 'Joe',
+          lastName: 'Doe',
+          companyName: 'ACME',
+        },
+      },
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Project discover carousel', () => {
     beforeEach(() => {
-      const propsData = {
-        project: {
-          id: 1,
-          name: 'Awesome Project',
-        },
-        linkMain: '/link/main',
-        linkSecondary: '/link/secondary',
-        linkFeedback: 'link/feedback',
-      };
-      createComponent(propsData);
+      createComponent();
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
     });
 
     it('renders component properly', () => {
@@ -98,4 +118,36 @@ describe('Card security discover app', () => {
       });
     });
   });
+  describe('Experiment pql_three_cta_test', () => {
+    const originalObjects = [];
+
+    beforeEach(() => {
+      originalObjects.push(window.gon, window.gl);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+      [window.gon, window.gl] = originalObjects;
+    });
+
+    it('for control sets control and not show hand raise lead', () => {
+      stubExperiments({ pql_three_cta_test: 'control' });
+      createComponent({ mountFn: mount });
+      expect(getExperimentData('pql_three_cta_test')).toEqual({
+        experiment: 'pql_three_cta_test',
+        variant: 'control',
+      });
+      expect(wrapper.findComponent(HandRaiseLeadButton).exists()).toBe(false);
+    });
+
+    it('for candidate shows hand raise leads', () => {
+      stubExperiments({ pql_three_cta_test: 'candidate' });
+      createComponent({ mountFn: mount });
+      expect(getExperimentData('pql_three_cta_test')).toEqual({
+        experiment: 'pql_three_cta_test',
+        variant: 'candidate',
+      });
+      expect(wrapper.findComponent(HandRaiseLeadButton).exists()).toBe(true);
+    });
+  });
 });

ee/spec/views/groups/security/discover/show.html.haml_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe "groups/security/discover/show", type: :view do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group) }
+
+  let(:variant) { :control }
+
+  before do
+    stub_experiments(pql_three_cta_test: variant)
+    allow(view).to receive(:current_user).and_return(user)
+    assign(:group, group)
+    render
+  end
+
+  it 'renders vue app root with correct link' do
+    expect(rendered).to have_selector('#js-security-discover-app[data-link-main="/-/trial_registrations/new?glm_content=discover-group-security&glm_source=gitlab.com"]')
+  end
+
+  context 'candidate for pql_three_cta_test' do
+    let(:variant) { :candidate }
+
+    it 'renders vue app root with candidate url' do
+      expect(rendered).to have_selector('#js-security-discover-app[data-link-main="/-/trial_registrations/new?glm_content=discover-group-security-pqltest&glm_source=gitlab.com"]')
+    end
+  end
+end

ee/spec/views/projects/security/discover/show.html.haml_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe "projects/security/discover/show", type: :view do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:project) { create(:project) }
+
+  let(:variant) { :control }
+
+  before do
+    stub_experiments(pql_three_cta_test: variant)
+    allow(view).to receive(:current_user).and_return(user)
+    assign(:project, project)
+    render
+  end
+
+  it 'renders vue app root with correct link' do
+    expect(rendered).to have_selector('#js-security-discover-app[data-link-main="/-/trial_registrations/new?glm_content=discover-project-security&glm_source=gitlab.com"]')
+  end
+
+  context 'candidate for pql_three_cta_test' do
+    let(:variant) { :candidate }
+
+    it 'renders vue app root with candidate url' do
+      expect(rendered).to have_selector('#js-security-discover-app[data-link-main="/-/trial_registrations/new?glm_content=discover-project-security-pqltest&glm_source=gitlab.com"]')
+    end
+  end
+end