Merge branch 'notification-dot-on-user-dropdown-ui-components' into 'master'

Add notification dot on user avatar

See merge request gitlab-org/gitlab!27626

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -68,6 +68,23 @@
             .header-user-avatar {
               border-color: $search-and-nav-links;
             }
+
+            .header-user-notification-dot {
+              border: 2px solid $nav-svg-color;
+            }
+          }
+
+          &:focus:hover,
+          &:focus {
+            &.header-user-dropdown-toggle .header-user-notification-dot {
+              border-color: $white-light;
+            }
+          }
+
+          &:hover {
+            &.header-user-dropdown-toggle .header-user-notification-dot {
+              border-color: $nav-svg-color + 33;
+            }
           }
 
           &:hover,

app/assets/stylesheets/framework/header.scss

@@ -567,6 +567,14 @@
   border: 1px solid $gray-normal;
 }
 
+.header-user-notification-dot {
+  background-color: $orange-500;
+  height: 10px;
+  width: 10px;
+  right: 8px;
+  top: -8px;
+}
+
 .with-performance-bar .navbar-gitlab {
   top: $performance-bar-height;
 }

app/helpers/nav_helper.rb

@@ -65,6 +65,10 @@ module NavHelper
     %w(groups#issues labels#index milestones#index boards#index boards#show)
   end
 
+  def show_user_notification_dot?
+    experiment_enabled?(:ci_notification_dot)
+  end
+
   private
 
   def get_header_links

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

@@ -68,6 +68,8 @@
             %li.nav-item.header-user.dropdown{ data: { track_label: "profile_dropdown", track_event: "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
                 = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar qa-user-avatar"
+                -  if show_user_notification_dot?
+                  %span.header-user-notification-dot.rounded-circle.position-relative
                 = sprite_icon('angle-down', css_class: 'caret-down')
               .dropdown-menu.dropdown-menu-right
                 = render 'layouts/header/current_user_dropdown'

lib/gitlab/experimentation.rb

@@ -28,6 +28,12 @@ module Gitlab
         environment: ::Gitlab.dev_env_or_com?,
         enabled_ratio: 0.1,
         tracking_category: 'Growth::Expansion::Experiment::SuggestPipeline'
+      },
+      ci_notification_dot: {
+        feature_toggle: :ci_notification_dot,
+        environment: ::Gitlab.dev_env_or_com?,
+        enabled_ratio: 0.1,
+        tracking_category: 'Growth::Expansion::Experiment::CiNotificationDot'
       }
     }.freeze
 

spec/helpers/nav_helper_spec.rb

@@ -117,4 +117,24 @@ describe NavHelper, :do_not_mock_admin_mode do
 
     it { is_expected.to all(be_a(String)) }
   end
+
+  describe '.show_user_notification_dot?' do
+    subject { helper.show_user_notification_dot? }
+
+    context 'when experiment is disabled' do
+      before do
+        allow(helper).to receive(:experiment_enabled?).with(:ci_notification_dot).and_return(false)
+      end
+
+      it { is_expected.to be_falsey }
+    end
+
+    context 'when experiment is enabled' do
+      before do
+        allow(helper).to receive(:experiment_enabled?).with(:ci_notification_dot).and_return(true)
+      end
+
+      it { is_expected.to be_truthy }
+    end
+  end
 end

spec/support/helpers/stub_experiments.rb

@@ -8,6 +8,8 @@ module StubExperiments
   # Examples
   # - `stub_experiment(signup_flow: false)` ... Disable `signup_flow` experiment globally.
   def stub_experiment(experiments)
+    allow(Gitlab::Experimentation).to receive(:enabled?).and_call_original
+
     experiments.each do |experiment_key, enabled|
       allow(Gitlab::Experimentation).to receive(:enabled?).with(experiment_key) { enabled }
     end
@@ -20,6 +22,8 @@ module StubExperiments
   # Examples
   # - `stub_experiment_for_user(signup_flow: false)` ... Disable `signup_flow` experiment for user.
   def stub_experiment_for_user(experiments)
+    allow(Gitlab::Experimentation).to receive(:enabled_for_user?).and_call_original
+
     experiments.each do |experiment_key, enabled|
       allow(Gitlab::Experimentation).to receive(:enabled_for_user?).with(experiment_key, anything) { enabled }
     end