From 79d50538c4c633dd35b6182ba4d08d4eba7576fc Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 28 Apr 2017 11:27:52 +0100 Subject: Fixed avatar not displaying in issue boards This happens when Gravatar is disabled in the admin settings, the avatar is returned as null & then frontend didn't do anything about it. Closes #31428 --- app/assets/javascripts/boards/models/user.js | 3 ++- app/assets/javascripts/boards/utils/default_avatar.js | 1 + app/helpers/boards_helper.rb | 1 + changelogs/unreleased/issue-boards-no-avatar.yml | 4 ++++ 4 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/boards/utils/default_avatar.js create mode 100644 changelogs/unreleased/issue-boards-no-avatar.yml diff --git a/app/assets/javascripts/boards/models/user.js b/app/assets/javascripts/boards/models/user.js index 8e9de4d4cbb..875c21a37d3 100644 --- a/app/assets/javascripts/boards/models/user.js +++ b/app/assets/javascripts/boards/models/user.js @@ -1,11 +1,12 @@ /* eslint-disable no-unused-vars */ +import defaultAvatar from '../utils/default_avatar'; class ListUser { constructor(user) { 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/utils/default_avatar.js b/app/assets/javascripts/boards/utils/default_avatar.js new file mode 100644 index 00000000000..062ffec6dce --- /dev/null +++ b/app/assets/javascripts/boards/utils/default_avatar.js @@ -0,0 +1 @@ +export default () => document.getElementById('board-app').dataset.defaultAvatar; 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: -- cgit v1.2.1 From dd146a59c32de94a01dafb82279199310337ced8 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 4 May 2017 16:33:25 +0100 Subject: Changed how the default avatar is set --- app/assets/javascripts/boards/boards_bundle.js | 5 +++-- app/assets/javascripts/boards/models/issue.js | 4 ++-- app/assets/javascripts/boards/models/list.js | 5 +++-- app/assets/javascripts/boards/models/user.js | 7 ++----- .../javascripts/boards/stores/boards_store.js | 4 ++-- .../javascripts/boards/utils/default_avatar.js | 1 - spec/javascripts/boards/issue_card_spec.js | 21 +++++++++++++++++++++ 7 files changed, 33 insertions(+), 14 deletions(-) delete mode 100644 app/assets/javascripts/boards/utils/default_avatar.js 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 875c21a37d3..2af583c3279 100644 --- a/app/assets/javascripts/boards/models/user.js +++ b/app/assets/javascripts/boards/models/user.js @@ -1,12 +1,9 @@ -/* eslint-disable no-unused-vars */ -import defaultAvatar from '../utils/default_avatar'; - class ListUser { - constructor(user) { + constructor(user, defaultAvatar) { this.id = user.id; this.name = user.name; this.username = user.username; - this.avatar = user.avatar_url || defaultAvatar(); + 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/assets/javascripts/boards/utils/default_avatar.js b/app/assets/javascripts/boards/utils/default_avatar.js deleted file mode 100644 index 062ffec6dce..00000000000 --- a/app/assets/javascripts/boards/utils/default_avatar.js +++ /dev/null @@ -1 +0,0 @@ -export default () => document.getElementById('board-app').dataset.defaultAvatar; 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', () => { -- cgit v1.2.1