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

Fixed avatar not displaying in issue boards

Closes #31428

See merge request !10977

8 files changed, 38 insertions, 12 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index b6dee8177d2..8c08b2d4db3 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/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;
diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js
index d6175069e37..db783467f87 100644
--- a/app/assets/javascripts/boards/models/issue.js
+++ b/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) {
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index f2b79a88a4a..bd2f62bcc1a 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/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));
     });
   }
 
diff --git a/app/assets/javascripts/boards/models/user.js b/app/assets/javascripts/boards/models/user.js
index 8e9de4d4cbb..2af583c3279 100644
--- a/app/assets/javascripts/boards/models/user.js
+++ b/app/assets/javascripts/boards/models/user.js
@@ -1,11 +1,9 @@
-/* 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;
   }
 }
 
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index ccb00099215..ad9997ac334 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/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;
diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb
index f43827da446..e2df52e3833 100644
--- a/app/helpers/boards_helper.rb
+++ b/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
diff --git a/changelogs/unreleased/issue-boards-no-avatar.yml b/changelogs/unreleased/issue-boards-no-avatar.yml
new file mode 100644
index 00000000000..a2dd53b3f2f
--- /dev/null
+++ b/changelogs/unreleased/issue-boards-no-avatar.yml
@@ -0,0 +1,4 @@
+---
+title: Fixed avatar not display on issue boards when Gravatar is disabled
+merge_request:
+author:
diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js
index 1a5e9e9fd07..ef567635d48 100644
--- a/spec/javascripts/boards/issue_card_spec.js
+++ b/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', () => {