Merge branch 'activity-remove-avatars' into 'master'

Remove avatars from user profile activity

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/135038



Merged-by: Dheeraj Joshi <djoshi@gitlab.com>
Approved-by: Minahil Nichols <minahilnichols@gitlab.com>
Approved-by: Sascha Eggenberger <seggenberger@gitlab.com>
Approved-by: Dheeraj Joshi <djoshi@gitlab.com>
Reviewed-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Reviewed-by: Doug Stull <dstull@gitlab.com>
Reviewed-by: Dheeraj Joshi <djoshi@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Co-authored-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>

app/assets/javascripts/pages/users/user_tabs.js

@@ -194,7 +194,7 @@ export default class UserTabs {
     this.loadActivityCalendar();
 
     UserTabs.renderMostRecentBlocks('#js-overview .activities-block', {
-      requestParams: { limit: 10 },
+      requestParams: { limit: 15 },
     });
     UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
       requestParams: { limit: 10, skip_pagination: true, skip_namespace: true, compact_mode: true },

app/assets/stylesheets/pages/notes.scss

@@ -10,16 +10,13 @@ $icon-size-diff: $avatar-icon-size - $system-note-icon-size;
 $system-note-icon-m-top: $avatar-m-top + $icon-size-diff - 1.3rem;
 $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
-@mixin vertical-line($left) {
-  &::before {
-    content: '';
-    border-left: 2px solid var(--gray-50, $gray-50);
-    position: absolute;
-    top: 16px;
-    bottom: 0;
-    left: calc(#{$left} - 1px);
-    height: calc(100% + 20px);
-  }
+@mixin vertical-line($top, $left) {
+  content: '';
+  position: absolute;
+  width: 2px;
+  left: $left;
+  top: $top;
+  height: calc(100% - #{$top});
 }
 
 @mixin outline-comment() {
@@ -32,12 +29,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 .limited-width-notes {
   .main-notes-list::before,
   .timeline-entry:last-child::before {
-    content: '';
-    position: absolute;
-    width: 2px;
-    left: 15px;
-    top: 15px;
-    height: calc(100% - 15px);
+    @include vertical-line(15px, 15px);
   }
 
   .main-notes-list::before {
@@ -1143,6 +1135,24 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
   }
 }
 
+.user-activity-content {
+  &::before {
+    @include vertical-line(80px, 25px);
+    background: var(--gray-50, $gray-50);
+  }
+
+  .system-note-image {
+    @include gl--flex-center;
+    top: 14px;
+    width: 22px;
+    height: 22px;
+
+    svg {
+      fill: $gray-600 !important;
+    }
+  }
+}
+
 //This needs to be deleted when Snippet/Commit comments are convered to Vue
 // See https://gitlab.com/gitlab-org/gitlab-foss/issues/53918#note_117038785
 .unstyled-comments {

app/helpers/events_helper.rb

@@ -13,7 +13,10 @@ module EventsHelper
     'deleted' => 'remove',
     'destroyed' => 'remove',
     'imported' => 'import',
-    'joined' => 'users'
+    'joined' => 'users',
+    'approved' => 'check',
+    'added' => 'upload',
+    'removed' => 'remove'
   }.freeze
 
   def localized_action_name_map
@@ -242,7 +245,7 @@ def event_note_target_url(event)
 
   def event_wiki_title_html(event)
     capture do
-      concat content_tag(:span, _('wiki page'), class: "event-target-type gl-mr-2")
+      concat content_tag(:span, _('wiki page'), class: "event-target-type gl-mr-2 #{user_profile_activity_classes}")
       concat link_to(
         event.target_title,
         event_wiki_page_target_url(event),
@@ -254,7 +257,7 @@ def event_wiki_title_html(event)
 
   def event_design_title_html(event)
     capture do
-      concat content_tag(:span, _('design'), class: "event-target-type gl-mr-2")
+      concat content_tag(:span, _('design'), class: "event-target-type gl-mr-2 #{user_profile_activity_classes}")
       concat link_to(
         event.design.reference_link_text,
         design_url(event.design),
@@ -271,7 +274,7 @@ def event_wiki_page_target_url(event)
   def event_note_title_html(event)
     if event.note_target
       capture do
-        concat content_tag(:span, event.note_target_type_name, class: "event-target-type gl-mr-2")
+        concat content_tag(:span, event.note_target_type_name, class: "event-target-type gl-mr-2 #{user_profile_activity_classes}")
         concat link_to(event.note_target_reference, event_note_target_url(event), title: event.target_title, class: 'has-tooltip event-target-link gl-mr-2')
       end
     else
@@ -303,19 +306,16 @@ def design_event_icon(action, size: 24)
   end
 
   def icon_for_profile_event(event)
-    if current_path?('users#show')
-      content_tag :div, class: "system-note-image #{event.action_name.parameterize}-icon" do
-        icon_for_event(event.action_name)
-      end
-    else
-      content_tag :div, class: 'system-note-image user-avatar' do
-        author_avatar(event, size: 32)
-      end
-    end
+    base_class = 'system-note-image'
+
+    classes = current_path?('users#activity') ? "#{event.action_name.parameterize}-icon gl-rounded-full gl-bg-gray-50 gl-line-height-0" : "user-avatar"
+    content = current_path?('users#activity') ? icon_for_event(event.action_name, size: 14) : author_avatar(event, size: 32)
+
+    tag.div(class: "#{base_class} #{classes}") { content }
   end
 
   def inline_event_icon(event)
-    unless current_path?('users#show')
+    unless current_path?('users#activity')
       content_tag :span, class: "system-note-image-inline d-none d-sm-flex gl-mr-2 #{event.action_name.parameterize}-icon align-self-center" do
         next design_event_icon(event.action, size: 14) if event.design?
 
@@ -325,13 +325,19 @@ def inline_event_icon(event)
   end
 
   def event_user_info(event)
-    content_tag(:div, class: "event-user-info") do
-      concat content_tag(:span, link_to_author(event), class: "author-name")
-      concat " ".html_safe
-      concat content_tag(:span, event.author.to_reference, class: "username")
+    return if current_path?('users#activity')
+
+    tag.div(class: 'event-user-info') do
+      concat tag.span(link_to_author(event), class: 'author-name')
+      concat ' '.html_safe
+      concat tag.span(event.author.to_reference, class: 'username')
     end
   end
 
+  def user_profile_activity_classes
+    current_path?('users#activity') ? ' gl-font-weight-semibold gl-text-black-normal' : ''
+  end
+
   private
 
   def design_url(design, opts = {})

app/views/events/_event.html.haml

 - event = event.present
 
 - if event.visible_to_user?(current_user)
-  .event-item
+  .event-item{ class: current_path?('users#activity') ? 'user-profile-activity gl-border-bottom-0 gl-pl-7! gl-pb-3' : '' }
     .event-item-timestamp.gl-font-sm
       #{time_ago_with_tooltip(event.created_at)}
 

app/views/events/event/_common.html.haml

@@ -5,9 +5,9 @@
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
   - if event.target
-    %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
+    %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name + user_profile_activity_classes }
       = localized_action_name(event)
-    %span.event-target-type.gl-mr-2= event.target_type_name
+    %span.event-target-type.gl-mr-2{ class: user_profile_activity_classes }= event.target_type_name
     = link_to event_target_path(event), class: 'has-tooltip event-target-link gl-mr-2', title: event.target_title do
       = event.target.reference_link_text
     - unless event.milestone?

app/views/events/event/_design.html.haml

@@ -4,7 +4,7 @@
 
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
-  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
+  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name + user_profile_activity_classes }
     = event.action_name
   = event_design_title_html(event)
   = render "events/event_scope", event: event

app/views/events/event/_note.html.haml

@@ -6,7 +6,7 @@
 
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
-  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
+  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name + user_profile_activity_classes }
     = event.action_name
   = event_note_title_html(event)
   - title = note_target_title(event.target)

app/views/events/event/_wiki.html.haml

@@ -4,7 +4,7 @@
 
 .event-title.d-flex.flex-wrap
   = inline_event_icon(event)
-  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name }
+  %span.event-type.d-inline-block.gl-mr-2{ class: event.action_name + user_profile_activity_classes }
     = event.action_name
   = event_wiki_title_html(event)
   = render "events/event_scope", event: event

app/views/users/_overview.html.haml

-- activity_pane_class = Feature.enabled?(:security_auto_fix) && @user.bot? ? "col-12" : "col-md-12 col-lg-6"
+- activity_pane_class = Feature.enabled?(:security_auto_fix) && @user.bot? ? "col-12" : "col-md-12 col-lg-6 gl-align-self-start"
 
 .row.d-none.d-sm-flex
   .col-12.calendar-block.gl-my-3
@@ -33,7 +33,7 @@
             %h4.gl-flex-grow-1
               = Feature.enabled?(:security_auto_fix) && @user.bot? ? s_('UserProfile|Bot activity') : s_('UserProfile|Activity')
             = link_to s_('UserProfile|View all'), user_activity_path, class: "hide js-view-all"
-          .overview-content-list{ data: { href: user_activity_path, testid: 'user-activity-content' } }
+          .overview-content-list.user-activity-content{ data: { href: user_activity_path, testid: 'user-activity-content' } }
             = gl_loading_icon(size: 'md', css_class: 'loading')
 
   - unless Feature.enabled?(:security_auto_fix) && @user.bot?

app/views/users/show.html.haml

@@ -171,13 +171,15 @@
 
         - if profile_tab?(:activity)
           #activity.tab-pane
-            .flash-container
-            - if can?(current_user, :read_cross_project)
-              %h4.prepend-top-20
-                = s_('UserProfile|Most Recent Activity')
-              .content_list{ data: { href: user_activity_path } }
-              .loading
-                = gl_loading_icon(size: 'md')
+            .row
+              .col-12
+                .flash-container
+                - if can?(current_user, :read_cross_project)
+                  %h4.prepend-top-20
+                    = s_('UserProfile|Most Recent Activity')
+                  .content_list.user-activity-content{ data: { href: user_activity_path } }
+                  .loading
+                    = gl_loading_icon(size: 'md')
         - unless @user.bot?
           - if profile_tab?(:groups)
             #groups.tab-pane

spec/features/users/overview_spec.rb

@@ -60,15 +60,15 @@ def push_code_contribution
       end
     end
 
-    describe 'user has 11 activities' do
+    describe 'user has 15 activities' do
       before do
-        11.times { push_code_contribution }
+        16.times { push_code_contribution }
       end
 
       include_context 'visit overview tab'
 
-      it 'displays 10 entries in the list of activities' do
-        expect(find('#js-overview')).to have_selector('.event-item', count: 10)
+      it 'displays 15 entries in the list of activities' do
+        expect(find('#js-overview')).to have_selector('.event-item', count: 15)
       end
 
       it 'shows a link to the activity list' do

spec/helpers/events_helper_spec.rb

@@ -41,6 +41,69 @@
     end
   end
 
+  describe '#icon_for_profile_event' do
+    let(:event) { build(:event, :joined) }
+    let(:users_activity_page?) { true }
+
+    before do
+      allow(helper).to receive(:current_path?).and_call_original
+      allow(helper).to receive(:current_path?).with('users#activity').and_return(users_activity_page?)
+    end
+
+    context 'when on users activity page' do
+      it 'gives an icon with specialized classes' do
+        result = helper.icon_for_profile_event(event)
+
+        expect(result).to include('joined-icon')
+        expect(result).to include('<svg')
+      end
+
+      context 'with an unsupported event action_name' do
+        let(:event) { build(:event, :expired) }
+
+        it 'does not have an icon' do
+          result = helper.icon_for_profile_event(event)
+
+          expect(result).not_to include('<svg')
+        end
+      end
+    end
+
+    context 'when not on users activity page' do
+      let(:users_activity_page?) { false }
+
+      it 'gives an icon with specialized classes' do
+        result = helper.icon_for_profile_event(event)
+
+        expect(result).not_to include('joined-icon')
+        expect(result).not_to include('<svg')
+        expect(result).to include('<img')
+      end
+    end
+  end
+
+  describe '#event_user_info' do
+    let(:event) { build(:event) }
+    let(:users_activity_page?) { true }
+
+    before do
+      allow(helper).to receive(:current_path?).and_call_original
+      allow(helper).to receive(:current_path?).with('users#activity').and_return(users_activity_page?)
+    end
+
+    subject { helper.event_user_info(event) }
+
+    context 'when on users activity page' do
+      it { is_expected.to be_nil }
+    end
+
+    context 'when not on users activity page' do
+      let(:users_activity_page?) { false }
+
+      it { is_expected.to include('<div') }
+    end
+  end
+
   describe '#event_target_path' do
     subject { helper.event_target_path(event.present) }
 
@@ -270,12 +333,26 @@
 
   describe '#event_wiki_title_html' do
     let(:event) { create(:wiki_page_event) }
+    let(:url) { helper.event_wiki_page_target_url(event) }
+    let(:title) { event.target_title }
 
     it 'produces a suitable title chunk' do
-      url = helper.event_wiki_page_target_url(event)
-      title = event.target_title
       html = [
-        "<span class=\"event-target-type gl-mr-2\">wiki page</span>",
+        "<span class=\"event-target-type gl-mr-2 \">wiki page</span>",
+        "<a title=\"#{title}\" class=\"has-tooltip event-target-link gl-mr-2\" href=\"#{url}\">",
+        title,
+        "</a>"
+      ].join
+
+      expect(helper.event_wiki_title_html(event)).to eq(html)
+    end
+
+    it 'produces a suitable title chunk on the user profile' do
+      allow(helper).to receive(:user_profile_activity_classes).and_return(
+        'gl-font-weight-semibold gl-text-black-normal')
+
+      html = [
+        "<span class=\"event-target-type gl-mr-2 gl-font-weight-semibold gl-text-black-normal\">wiki page</span>",
         "<a title=\"#{title}\" class=\"has-tooltip event-target-link gl-mr-2\" href=\"#{url}\">",
         title,
         "</a>"
@@ -443,5 +520,28 @@ def can_read_design_activity(object, ability)
       end
     end
   end
+
+  describe '#user_profile_activity_classes' do
+    let(:users_activity_page?) { true }
+
+    before do
+      allow(helper).to receive(:current_path?).and_call_original
+      allow(helper).to receive(:current_path?).with('users#activity').and_return(users_activity_page?)
+    end
+
+    context 'when on the user activity page' do
+      it 'returns the expected class names' do
+        expect(helper.user_profile_activity_classes).to eq(' gl-font-weight-semibold gl-text-black-normal')
+      end
+    end
+
+    context 'when not on the user activity page' do
+      let(:users_activity_page?) { false }
+
+      it 'returns an empty string' do
+        expect(helper.user_profile_activity_classes).to eq('')
+      end
+    end
+  end
 end
 # rubocop:enable RSpec/FactoryBot/AvoidCreate