Merge branch '34366-issue-sidebar-don-t-render-participants-in-collapsed-state' into 'master'

Resolve "Issue Sidebar : Don't render participants in collapsed state"

Closes #34366

See merge request gitlab-org/gitlab-ce!14270

app/assets/javascripts/issuable_context.js

@@ -67,10 +67,13 @@ const PARTICIPANTS_ROW_COUNT = 7;
       originalText = $(this).data("original-text");
       if (currentText === originalText) {
         $(this).text(lessText);
+
+        if (gl.lazyLoader) gl.lazyLoader.loadCheck();
       } else {
         $(this).text(originalText);
       }
-      return $(".js-participants-hidden").toggle();
+
+      $(".js-participants-hidden").toggle();
     };
 
     return IssuableContext;

app/assets/javascripts/right_sidebar.js

@@ -29,7 +29,11 @@ import Cookies from 'js-cookie';
       $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
       $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
 
-      $document.on('click', '.js-sidebar-toggle', function(e, triggered) {
+      $document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
+      return $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo);
+    };
+
+    Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
       var $allGutterToggleIcons, $this, $thisIcon;
       e.preventDefault();
       $this = $(this);
@@ -47,10 +51,8 @@ import Cookies from 'js-cookie';
         if (gl.lazyLoader) gl.lazyLoader.loadCheck();
       }
       if (!triggered) {
-          return Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
+        Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
       }
-      });
-      return $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo);
     };
 
     Sidebar.prototype.toggleTodo = function(e) {

app/helpers/projects_helper.rb

@@ -21,11 +21,14 @@ module ProjectsHelper
     classes = %W[avatar avatar-inline s#{opts[:size]}]
     classes << opts[:avatar_class] if opts[:avatar_class]
 
-    image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: classes, alt: '')
+    avatar = avatar_icon(author, opts[:size])
+    src = opts[:lazy_load] ? nil : avatar
+
+    image_tag(src, width: opts[:size], class: classes, alt: '', "data-src" => avatar)
   end
 
   def link_to_member(project, author, opts = {}, &block)
-    default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name", tooltip: false }
+    default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name", tooltip: false, lazy_load: false }
     opts = default_opts.merge(opts)
 
     return "(deleted)" unless author

app/views/shared/issuable/_participants.html.haml

@@ -11,7 +11,7 @@
   .hide-collapsed.participants-list
     - participants.each do |participant|
       .participants-author.js-participants-author
-        = link_to_member(@project, participant, name: false, size: 24)
+        = link_to_member(@project, participant, name: false, size: 24, lazy_load: true)
   - if participants_extra > 0
     .hide-collapsed.participants-more
       %a.js-participants-more{ href: "#", data: { original_text: "+ #{participants_size - 7} more", less_text: "- show less" } }

changelogs/unreleased/34366-issue-sidebar-don-t-render-participants-in-collapsed-state.yml

+---
+title: Load sidebar participants avatars only when visible
+merge_request: 14270
+author:
+type: other

spec/helpers/projects_helper_spec.rb

@@ -200,13 +200,13 @@ describe ProjectsHelper do
     end
 
     it 'returns image tag for member avatar' do
-      expect(helper).to receive(:image_tag).with(expected, { width: 16, class: ["avatar", "avatar-inline", "s16"], alt: "" })
+      expect(helper).to receive(:image_tag).with(expected, { width: 16, class: ["avatar", "avatar-inline", "s16"], alt: "", "data-src" => anything })
 
       helper.link_to_member_avatar(user)
     end
 
     it 'returns image tag with avatar class' do
-      expect(helper).to receive(:image_tag).with(expected, { width: 16, class: ["avatar", "avatar-inline", "s16", "any-avatar-class"], alt: "" })
+      expect(helper).to receive(:image_tag).with(expected, { width: 16, class: ["avatar", "avatar-inline", "s16", "any-avatar-class"], alt: "", "data-src" => anything })
 
       helper.link_to_member_avatar(user, avatar_class: "any-avatar-class")
     end

spec/javascripts/issuable_context_spec.js

+/* global IssuableContext */
+import '~/issuable_context';
+import $ from 'jquery';
+
+describe('IssuableContext', () => {
+  describe('toggleHiddenParticipants', () => {
+    const event = jasmine.createSpyObj('event', ['preventDefault']);
+
+    beforeEach(() => {
+      spyOn($.fn, 'data').and.returnValue('data');
+      spyOn($.fn, 'text').and.returnValue('data');
+    });
+
+    afterEach(() => {
+      gl.lazyLoader = undefined;
+    });
+
+    it('calls loadCheck if lazyLoader is set', () => {
+      gl.lazyLoader = jasmine.createSpyObj('lazyLoader', ['loadCheck']);
+
+      IssuableContext.prototype.toggleHiddenParticipants(event);
+
+      expect(gl.lazyLoader.loadCheck).toHaveBeenCalled();
+    });
+
+    it('does not throw if lazyLoader is not defined', () => {
+      gl.lazyLoader = undefined;
+
+      const toggle = IssuableContext.prototype.toggleHiddenParticipants.bind(null, event);
+
+      expect(toggle).not.toThrow();
+    });
+  });
+});

spec/javascripts/right_sidebar_spec.js

@@ -32,6 +32,7 @@ import '~/right_sidebar';
   };
 
   describe('RightSidebar', function() {
+    describe('fixture tests', () => {
       var fixtureName = 'issues/open-issue.html.raw';
       preloadFixtures(fixtureName);
       loadJSONFixtures('todos/todos.json');
@@ -85,4 +86,33 @@ import '~/right_sidebar';
         });
       });
     });
+
+    describe('sidebarToggleClicked', () => {
+      const event = jasmine.createSpyObj('event', ['preventDefault']);
+
+      beforeEach(() => {
+        spyOn($.fn, 'hasClass').and.returnValue(false);
+      });
+
+      afterEach(() => {
+        gl.lazyLoader = undefined;
+      });
+
+      it('calls loadCheck if lazyLoader is set', () => {
+        gl.lazyLoader = jasmine.createSpyObj('lazyLoader', ['loadCheck']);
+
+        Sidebar.prototype.sidebarToggleClicked(event);
+
+        expect(gl.lazyLoader.loadCheck).toHaveBeenCalled();
+      });
+
+      it('does not throw if lazyLoader is not defined', () => {
+        gl.lazyLoader = undefined;
+
+        const toggle = Sidebar.prototype.sidebarToggleClicked.bind(null, event);
+
+        expect(toggle).not.toThrow();
+      });
+    });
+  });
 }).call(window);

spec/views/shared/issuable/_participants.html.haml.rb

+require 'spec_helper'
+require 'nokogiri'
+
+describe 'shared/issuable/_participants.html.haml' do
+  let(:project) { create(:project) }
+  let(:participants)  { create_list(:user, 100) }
+
+  before do
+    allow(view).to receive_messages(project: project,
+                                    participants: participants)
+  end
+
+  it 'renders lazy loaded avatars' do
+    render 'shared/issuable/participants'
+
+    html = Nokogiri::HTML(rendered)
+
+    avatars = html.css('.participants-author img')
+
+    avatars.each do |avatar|
+      expect(avatar[:class]).to include('lazy')
+      expect(avatar[:src]).to eql(LazyImageTagHelper.placeholder_image)
+      expect(avatar[:"data-src"]).to match('http://www.gravatar.com/avatar/')
+    end
+  end
+end