Experiment: Add Upgrade option to user dropdown

Adds Upgrade option to the User Dropdown menu as part of a Growth
Experiment

app/assets/javascripts/header.js

@@ -74,20 +74,27 @@ function initStatusTriggers() {
   }
 }
 
-export function initNavUserDropdownTracking() {
-  const el = document.querySelector('.js-nav-user-dropdown');
-  const buyEl = document.querySelector('.js-buy-ci-minutes-link');
-
-  if (el && buyEl) {
-    const { trackLabel, trackProperty } = buyEl.dataset;
-    const trackEvent = 'show_buy_ci_minutes';
+function trackShowUserDropdownLink(trackEvent, elToTrack, el) {
+  const { trackLabel, trackProperty } = elToTrack.dataset;
 
   $(el).on('shown.bs.dropdown', () => {
-      Tracking.event(undefined, trackEvent, {
+    Tracking.event(document.body.dataset.page, trackEvent, {
       label: trackLabel,
       property: trackProperty,
     });
   });
+}
+export function initNavUserDropdownTracking() {
+  const el = document.querySelector('.js-nav-user-dropdown');
+  const buyEl = document.querySelector('.js-buy-ci-minutes-link');
+  const upgradeEl = document.querySelector('.js-upgrade-plan-link');
+
+  if (el && buyEl) {
+    trackShowUserDropdownLink('show_buy_ci_minutes', buyEl, el);
+  }
+
+  if (el && upgradeEl) {
+    trackShowUserDropdownLink('show_upgrade_link', upgradeEl, el);
   }
 }
 

app/assets/stylesheets/framework/header.scss

@@ -553,6 +553,7 @@
       vertical-align: text-top;
     }
 
+    a.upgrade-plan-link gl-emoji,
     a.ci-minutes-emoji gl-emoji,
     a.trial-link gl-emoji {
       font-size: $gl-font-size;

app/views/layouts/header/_current_user_dropdown.html.haml

@@ -27,6 +27,7 @@
     %li
       = link_to s_("CurrentUser|Settings"), profile_path, data: { qa_selector: 'settings_link' }
   = render_if_exists 'layouts/header/buy_ci_minutes', project: @project, namespace: @group
+  = render_if_exists 'layouts/header/upgrade'
 
   - if current_user_menu?(:help)
     %li.divider.d-md-none

ee/app/helpers/ee/users_helper.rb

@@ -20,6 +20,16 @@ module EE
       end
     end
 
+    def show_upgrade_link?(user)
+      return unless user
+      return unless ::Gitlab.com?
+      return unless experiment_enabled?(:upgrade_link_in_user_menu_a)
+
+      Rails.cache.fetch(['users', user.id, 'show_upgrade_link?'], expires_in: 10.minutes) do
+        user.owns_upgradeable_namespace?
+      end
+    end
+
     private
 
     def trials_allowed?(user)

ee/app/models/ee/user.rb

@@ -243,17 +243,17 @@ module EE
       ::Namespace
         .from("(#{namespace_union_for_reporter_developer_maintainer_owned}) #{::Namespace.table_name}")
         .include_gitlab_subscription
-        .where(gitlab_subscriptions: { hosted_plan: ::Plan.where(name: Plan::PAID_HOSTED_PLANS) })
+        .where(gitlab_subscriptions: { hosted_plan: ::Plan.where(name: ::Plan::PAID_HOSTED_PLANS) })
         .any?
     end
 
     # Returns true if the user is an Owner on any namespace currently on
     # a paid plan
-    def owns_paid_namespace?
+    def owns_paid_namespace?(plans: ::Plan::PAID_HOSTED_PLANS)
       ::Namespace
         .from("(#{namespace_union_for_owned}) #{::Namespace.table_name}")
         .include_gitlab_subscription
-        .where(gitlab_subscriptions: { hosted_plan: ::Plan.where(name: Plan::PAID_HOSTED_PLANS) })
+        .where(gitlab_subscriptions: { hosted_plan: ::Plan.where(name: plans) })
         .any?
     end
 
@@ -363,6 +363,11 @@ module EE
       InstanceSecurityDashboard.new(self)
     end
 
+    def owns_upgradeable_namespace?
+      !owns_paid_namespace?(plans: [::Plan::GOLD]) &&
+        owns_paid_namespace?(plans: [::Plan::BRONZE, ::Plan::SILVER])
+    end
+
     protected
 
     override :password_required?

ee/app/views/layouts/header/_upgrade.html.haml

+- if show_upgrade_link?(current_user)
+  %li
+    = link_to EE::SUBSCRIPTIONS_PLANS_URL,
+      class: 'upgrade-plan-link js-upgrade-plan-link',
+      data: { 'track-event': 'click_upgrade_link', 'track-label': current_user.namespace.actual_plan_name, 'track-property': 'user_dropdown' } do
+      = s_("CurrentUser|Upgrade")
+      = emoji_icon('rocket', 'aria-hidden': true)

ee/spec/models/user_spec.rb

@@ -1204,4 +1204,49 @@ describe User do
       expect(security_dashboard).to be_a(InstanceSecurityDashboard)
     end
   end
+
+  describe '#owns_upgradeable_namespace?' do
+    let_it_be(:user) { create(:user) }
+
+    subject { user.owns_upgradeable_namespace? }
+
+    using RSpec::Parameterized::TableSyntax
+
+    where(:hosted_plan, :result) do
+      :bronze_plan    | true
+      :silver_plan    | true
+      :gold_plan      | false
+      :free_plan      | false
+      :default_plan   | false
+    end
+
+    with_them do
+      it 'returns the correct result for each plan on a personal namespace' do
+        plan = create(hosted_plan)
+        create(:gitlab_subscription, namespace: user.namespace, hosted_plan: plan)
+
+        expect(subject).to be result
+      end
+
+      it 'returns the correct result for each plan on a group owned by the user' do
+        create(:group_with_plan, plan: hosted_plan).add_owner(user)
+
+        expect(subject).to be result
+      end
+    end
+
+    it 'returns false when there is no subscription for the personal namespace' do
+      expect(subject).to be false
+    end
+
+    it 'returns false when the user has multiple groups and any group has gold' do
+      create(:group_with_plan, plan: :bronze_plan).add_owner(user)
+      create(:group_with_plan, plan: :silver_plan).add_owner(user)
+      create(:group_with_plan, plan: :gold_plan).add_owner(user)
+
+      user.namespace.plans.reload
+
+      expect(subject).to be false
+    end
+  end
 end

ee/spec/views/layouts/header/_current_user_dropdown.html.haml_spec.rb

@@ -4,10 +4,13 @@ require 'spec_helper'
 
 describe 'layouts/header/_current_user_dropdown' do
   let_it_be(:user) { create(:user) }
+
+  describe 'Buy CI Minutes link in user dropdown' do
     let(:need_minutes) { true }
 
     before do
       allow(view).to receive(:current_user).and_return(user)
+      allow(view).to receive(:show_upgrade_link?).and_return(false)
       allow(view).to receive(:show_buy_ci_minutes?).and_return(need_minutes)
 
       render
@@ -31,4 +34,33 @@ describe 'layouts/header/_current_user_dropdown' do
         expect(subject).not_to have_link('Buy CI minutes')
       end
     end
+  end
+
+  describe 'Upgrade link in user dropdown' do
+    let(:on_upgradeable_plan) { true }
+
+    before do
+      allow(view).to receive(:current_user).and_return(user)
+      allow(view).to receive(:show_buy_ci_minutes?).and_return(false)
+      allow(view).to receive(:show_upgrade_link?).and_return(on_upgradeable_plan)
+
+      render
+    end
+
+    subject { rendered }
+
+    context 'when user is on an upgradeable plan' do
+      it 'displays the Upgrade link' do
+        expect(subject).to have_link('Upgrade')
+      end
+    end
+
+    context 'when user is not on an upgradeable plan' do
+      let(:on_upgradeable_plan) { false }
+
+      it 'does not display the Upgrade link' do
+        expect(subject).not_to have_link('Upgrade')
+      end
+    end
+  end
 end

lib/gitlab/experimentation.rb

@@ -42,6 +42,9 @@ module Gitlab
       },
       buy_ci_minutes_version_a: {
         tracking_category: 'Growth::Expansion::Experiment::BuyCiMinutesVersionA'
+      },
+      upgrade_link_in_user_menu_a: {
+        tracking_category: 'Growth::Expansion::Experiment::UpgradeLinkInUserMenuA'
       }
     }.freeze
 

locale/gitlab.pot

@@ -6474,6 +6474,9 @@ msgstr ""
 msgid "CurrentUser|Start a Gold trial"
 msgstr ""
 
+msgid "CurrentUser|Upgrade"
+msgstr ""
+
 msgid "Custom CI configuration path"
 msgstr ""
 

spec/frontend/header_spec.js

@@ -60,8 +60,8 @@ describe('Header', () => {
     beforeEach(() => {
       setFixtures(`
       <li class="js-nav-user-dropdown">
-        <a class="js-buy-ci-minutes-link" data-track-event="click_buy_ci_minutes" data-track-label="free" data-track-property="user_dropdown">Buy CI minutes
-        </a>
+        <a class="js-buy-ci-minutes-link" data-track-event="click_buy_ci_minutes" data-track-label="free" data-track-property="user_dropdown">Buy CI minutes</a>
+        <a class="js-upgrade-plan-link" data-track-event="click_upgrade_link" data-track-label="free" data-track-property="user_dropdown">Upgrade</a>
       </li>`);
 
       trackingSpy = mockTracking('_category_', $('.js-nav-user-dropdown').element, jest.spyOn);
@@ -77,8 +77,16 @@ describe('Header', () => {
     it('sends a tracking event when the dropdown is opened and contains Buy CI minutes link', () => {
       $('.js-nav-user-dropdown').trigger('shown.bs.dropdown');
 
-      expect(trackingSpy).toHaveBeenCalledTimes(1);
-      expect(trackingSpy).toHaveBeenCalledWith(undefined, 'show_buy_ci_minutes', {
+      expect(trackingSpy).toHaveBeenCalledWith('some:page', 'show_buy_ci_minutes', {
+        label: 'free',
+        property: 'user_dropdown',
+      });
+    });
+
+    it('sends a tracking event when the dropdown is opened and contains Upgrade link', () => {
+      $('.js-nav-user-dropdown').trigger('shown.bs.dropdown');
+
+      expect(trackingSpy).toHaveBeenCalledWith('some:page', 'show_upgrade_link', {
         label: 'free',
         property: 'user_dropdown',
       });