Merge branch 'issue-boards-no-avatar' into 'master'

Fixed avatar not displaying in issue boards

Closes #31428

See merge request !10977

app/assets/javascripts/boards/boards_bundle.js

@@ -59,7 +59,8 @@ $(() => {
       issueLinkBase: $boardApp.dataset.issueLinkBase,
       rootPath: $boardApp.dataset.rootPath,
       bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
-      detailIssue: Store.detail
+      detailIssue: Store.detail,
+      defaultAvatar: $boardApp.dataset.defaultAvatar,
     },
     computed: {
       detailIssueVisible () {
@@ -82,7 +83,7 @@ $(() => {
       gl.boardService.all()
         .then((resp) => {
           resp.json().forEach((board) => {
-            const list = Store.addList(board);
+            const list = Store.addList(board, this.defaultAvatar);
             if (list.type === 'closed') {
               list.position = Infinity;

app/assets/javascripts/boards/models/issue.js

@@ -6,7 +6,7 @@
 import Vue from 'vue';
 class ListIssue {
-  constructor (obj) {
+  constructor (obj, defaultAvatar) {
     this.globalId = obj.id;
     this.id = obj.iid;
     this.title = obj.title;
@@ -19,7 +19,7 @@ class ListIssue {
     this.position = obj.relative_position || Infinity;
     if (obj.assignee) {
-      this.assignee = new ListUser(obj.assignee);
+      this.assignee = new ListUser(obj.assignee, defaultAvatar);
     }
     if (obj.milestone) {

app/assets/javascripts/boards/models/list.js

@@ -6,7 +6,7 @@ import queryData from '../utils/query_data';
 const PER_PAGE = 20;
 class List {
-  constructor (obj) {
+  constructor (obj, defaultAvatar) {
     this.id = obj.id;
     this._uid = this.guid();
     this.position = obj.position;
@@ -18,6 +18,7 @@ class List {
     this.loadingMore = false;
     this.issues = [];
     this.issuesSize = 0;
+    this.defaultAvatar = defaultAvatar;
     if (obj.label) {
       this.label = new ListLabel(obj.label);
@@ -106,7 +107,7 @@ class List {
   createIssues (data) {
     data.forEach((issueObj) => {
-      this.addIssue(new ListIssue(issueObj));
+      this.addIssue(new ListIssue(issueObj, this.defaultAvatar));
     });
   }

app/assets/javascripts/boards/models/user.js

-/* eslint-disable no-unused-vars */
-
 class ListUser {
-  constructor(user) {
+  constructor(user, defaultAvatar) {
     this.id = user.id;
     this.name = user.name;
     this.username = user.username;
-    this.avatar = user.avatar_url;
+    this.avatar = user.avatar_url || defaultAvatar;
   }
 }

app/assets/javascripts/boards/stores/boards_store.js

@@ -23,8 +23,8 @@ gl.issueBoards.BoardsStore = {
     this.state.lists = [];
     this.filter.path = gl.utils.getUrlParamsArray().join('&');
   },
-  addList (listObj) {
-    const list = new List(listObj);
+  addList (listObj, defaultAvatar) {
+    const list = new List(listObj, defaultAvatar);
     this.state.lists.push(list);
     return list;

app/helpers/boards_helper.rb

@@ -9,6 +9,7 @@ module BoardsHelper
       issue_link_base: namespace_project_issues_path(@project.namespace, @project),
       root_path: root_path,
       bulk_update_path: bulk_update_namespace_project_issues_path(@project.namespace, @project),
+      default_avatar: image_path(default_avatar)
     }
   end
 end

changelogs/unreleased/issue-boards-no-avatar.yml

+---
+title: Fixed avatar not display on issue boards when Gravatar is disabled
+merge_request:
+author:

spec/javascripts/boards/issue_card_spec.js

@@ -146,6 +146,27 @@ describe('Issue card component', () => {
         ).not.toBeNull();
       });
     });
+
+    describe('assignee default avatar', () => {
+      beforeEach((done) => {
+        component.issue.assignee = new ListUser({
+          id: 1,
+          name: 'testing 123',
+          username: 'test',
+        }, 'default_avatar');
+
+        Vue.nextTick(done);
+      });
+
+      it('displays defaults avatar if users avatar is null', () => {
+        expect(
+          component.$el.querySelector('.card-assignee img'),
+        ).not.toBeNull();
+        expect(
+          component.$el.querySelector('.card-assignee img').getAttribute('src'),
+        ).toBe('default_avatar');
+      });
+    });
   });
   describe('labels', () => {