Introduce experimental updates to header

Make it taller, separate sign up and sign in buttons, add marketing
links and update arrangement (menu button to the right, etc).

app/assets/stylesheets/framework/layout.scss

@@ -201,3 +201,9 @@ body {
     padding-right: 0;
   }
 }
+
+@include media-breakpoint-up(sm) {
+  .logged-out-marketing-header-candidate {
+    --header-height: 72px;
+  }
+}

app/helpers/application_helper.rb

@@ -285,6 +285,7 @@ module ApplicationHelper
     class_names << 'environment-logs-page' if current_controller?(:logs)
     class_names << 'with-performance-bar' if performance_bar_enabled?
     class_names << system_message_class
+    class_names << marketing_header_experiment_class
     class_names
   end
 
@@ -420,6 +421,16 @@ module ApplicationHelper
   def appearance
     ::Appearance.current
   end
+
+  def marketing_header_experiment_class
+    return if current_user
+
+    experiment(:logged_out_marketing_header, actor: nil) do |e|
+      e.candidate { 'logged-out-marketing-header-candidate' }
+      e.control {}
+      e.run
+    end
+  end
 end
 
 ApplicationHelper.prepend_mod

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

@@ -19,6 +19,14 @@
               %span.gl-badge.gl-bg-green-500.gl-text-white.gl-rounded-pill.gl-font-weight-bold.gl-py-1
                 = _('Next')
 
+        - if current_user
+          .gl-display-none.gl-sm-display-block
+            = render "layouts/nav/top_nav"
+        - else
+          - experiment(:logged_out_marketing_header, actor: nil) do |e|
+            - e.candidate do
+              = render 'layouts/header/marketing_links'
+            - e.control do
               .gl-display-none.gl-sm-display-block
                 = render "layouts/nav/top_nav"
 
@@ -104,6 +112,12 @@
               = sprite_icon('chevron-down', css_class: 'caret-down')
             .dropdown-menu.dropdown-menu-right
               = render 'layouts/header/help_dropdown'
+          - unless current_user
+            - experiment(:logged_out_marketing_header, actor: nil) do |e|
+              - e.candidate do
+                %li.nav-item.gl-display-none.gl-sm-display-block
+                  = render "layouts/nav/top_nav"
+              - e.control {}
           - if header_link?(:user_dropdown)
             %li.nav-item.header-user.js-nav-user-dropdown.dropdown{ data: { track_label: "profile_dropdown", track_action: "click_dropdown", track_value: "", qa_selector: 'user_menu' }, class: ('mr-0' if has_impersonation_link) }
               = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
@@ -117,10 +131,15 @@
               = link_to admin_impersonation_path, class: 'nav-link impersonation-btn', method: :delete, title: _('Stop impersonation'), aria: { label: _('Stop impersonation') }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body', qa_selector: 'stop_impersonation_link' } do
                 = sprite_icon('incognito', size: 18)
           - if header_link?(:sign_in)
-            %li.nav-item
-              %div
-                - sign_in_text = allow_signup? ? _('Sign in / Register') : _('Sign in')
-                = link_to sign_in_text, new_session_path(:user, redirect_to_referer: 'yes'), class: 'gl-button btn btn-default btn-sign-in'
+            - experiment(:logged_out_marketing_header, actor: nil) do |e|
+              - e.candidate do
+                %li.nav-item.gl-display-none.gl-sm-display-block
+                  = link_to _('Sign up now'), new_user_registration_path, class: 'gl-button btn btn-default btn-sign-in'
+                %li.nav-item.gl-display-none.gl-sm-display-block
+                  = link_to _('Login'), new_session_path(:user, redirect_to_referer: 'yes')
+                = render 'layouts/header/sign_in_register_button', class: 'gl-sm-display-none'
+              - e.control do
+                = render 'layouts/header/sign_in_register_button'
 
       %button.navbar-toggler.d-block.d-sm-none{ type: 'button', class: 'gl-border-none!', data: { testid: 'top-nav-responsive-toggle', qa_selector: 'mobile_navbar_button' } }
         %span.sr-only= _('Toggle navigation')

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

+%ul.nav.navbar-sub-nav.gl-display-none.gl-lg-display-flex.gl-align-items-center
+  %li.dropdown.gl-mr-3
+    %button{ type: "button", data: { toggle: "dropdown" } }
+      = s_('LoggedOutMarketingHeader|About GitLab')
+      = sprite_icon('chevron-down', css_class: 'caret-down')
+    .dropdown-menu
+      %ul
+        %li
+          = link_to 'https://about.gitlab.com/stages-devops-lifecycle/' do
+            = s_('LoggedOutMarketingHeader|GitLab: the DevOps platform')
+        %li
+          = link_to explore_root_path do
+            = s_('LoggedOutMarketingHeader|Explore GitLab')
+        %li
+          = link_to 'https://about.gitlab.com/install/' do
+            = s_('LoggedOutMarketingHeader|Install GitLab')
+        %li
+          = link_to 'https://about.gitlab.com/is-it-any-good/' do
+            = s_('LoggedOutMarketingHeader|How GitLab compares')
+        %li
+          = link_to 'https://about.gitlab.com/get-started/' do
+            = s_('LoggedOutMarketingHeader|Get started')
+        %li
+          = link_to 'https://docs.gitlab.com/' do
+            = s_('LoggedOutMarketingHeader|GitLab docs')
+        %li
+          = link_to 'https://about.gitlab.com/learn/' do
+            = s_('LoggedOutMarketingHeader|GitLab Learn')
+  %li.gl-mr-3
+    = link_to 'https://about.gitlab.com/pricing/' do
+      = s_('LoggedOutMarketingHeader|Pricing')
+  %li.gl-mr-3
+    = link_to 'https://about.gitlab.com/sales/' do
+      = s_('LoggedOutMarketingHeader|Talk to an expert')

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

+- top_class = local_assigns.fetch(:class, nil)
+
+%li.nav-item{ class: top_class }
+  %div
+    - sign_in_text = allow_signup? ? _('Sign in / Register') : _('Sign in')
+    = link_to sign_in_text, new_session_path(:user, redirect_to_referer: 'yes'), class: 'gl-button btn btn-default btn-sign-in'

config/feature_flags/experiment/logged_out_marketing_header.yml

+---
+name: logged_out_marketing_header
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/76076
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/348525
+milestone: '14.7'
+type: experiment
+group: group::activation
+default_enabled: false

locale/gitlab.pot

@@ -21426,6 +21426,39 @@ msgstr ""
 msgid "Locks the discussion."
 msgstr ""
 
+msgid "LoggedOutMarketingHeader|About GitLab"
+msgstr ""
+
+msgid "LoggedOutMarketingHeader|Explore GitLab"
+msgstr ""
+
+msgid "LoggedOutMarketingHeader|Get started"
+msgstr ""
+
+msgid "LoggedOutMarketingHeader|GitLab Learn"
+msgstr ""
+
+msgid "LoggedOutMarketingHeader|GitLab docs"
+msgstr ""
+
+msgid "LoggedOutMarketingHeader|GitLab: the DevOps platform"
+msgstr ""
+
+msgid "LoggedOutMarketingHeader|How GitLab compares"
+msgstr ""
+
+msgid "LoggedOutMarketingHeader|Install GitLab"
+msgstr ""
+
+msgid "LoggedOutMarketingHeader|Pricing"
+msgstr ""
+
+msgid "LoggedOutMarketingHeader|Talk to an expert"
+msgstr ""
+
+msgid "Login"
+msgstr ""
+
 msgid "Login with smartcard"
 msgstr ""
 
@@ -32824,6 +32857,9 @@ msgstr ""
 msgid "Sign up"
 msgstr ""
 
+msgid "Sign up now"
+msgstr ""
+
 msgid "Sign up was successful! Please confirm your email to sign in."
 msgstr ""
 

spec/features/user_sees_marketing_header_spec.rb

+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe 'User sees experimental lmarketing header' do
+  let_it_be(:project) { create(:project, :public) }
+
+  context 'when not logged in' do
+    context 'when experiment candidate' do
+      it 'shows marketing header links', :aggregate_failures do
+        stub_experiments(logged_out_marketing_header: :candidate)
+
+        visit project_path(project)
+
+        expect(page).to have_text "About GitLab"
+        expect(page).to have_text "Pricing"
+        expect(page).to have_text "Talk to an expert"
+        expect(page).to have_text "Sign up now"
+        expect(page).to have_text "Login"
+      end
+    end
+
+    context 'when experiment control' do
+      it 'does not show marketing header links', :aggregate_failures do
+        stub_experiments(logged_out_marketing_header: :control)
+
+        visit project_path(project)
+
+        expect(page).not_to have_text "About GitLab"
+        expect(page).not_to have_text "Pricing"
+        expect(page).not_to have_text "Talk to an expert"
+        expect(page).not_to have_text "Sign up now"
+        expect(page).not_to have_text "Login"
+        expect(page).to have_text "Sign in / Register"
+      end
+    end
+  end
+
+  context 'when logged in' do
+    it 'does not show marketing header links', :aggregate_failures do
+      sign_in(create(:user))
+
+      stub_experiments(logged_out_marketing_header: :candidate)
+
+      visit project_path(project)
+
+      expect(page).not_to have_text "About GitLab"
+      expect(page).not_to have_text "Pricing"
+      expect(page).not_to have_text "Talk to an expert"
+    end
+  end
+end

spec/helpers/application_helper_spec.rb

@@ -477,4 +477,38 @@ RSpec.describe ApplicationHelper do
       expect(helper).to have_received(:form_for).with(user, expected_options)
     end
   end
+
+  describe '#page_class' do
+    context 'when logged_out_marketing_header experiment is enabled' do
+      let_it_be(:expected_class) { 'logged-out-marketing-header-candidate' }
+
+      let(:current_user) { nil }
+      let(:variant) { :candidate }
+
+      subject do
+        helper.page_class.flatten
+      end
+
+      before do
+        stub_experiments(logged_out_marketing_header: variant)
+        allow(helper).to receive(:current_user) { current_user }
+      end
+
+      context 'when candidate' do
+        it { is_expected.to include(expected_class) }
+      end
+
+      context 'when control' do
+        let(:variant) { :control }
+
+        it { is_expected.not_to include(expected_class) }
+      end
+
+      context 'when a user is logged in' do
+        let(:current_user) { create(:user) }
+
+        it { is_expected.not_to include(expected_class) }
+      end
+    end
+  end
 end