diff options
author | Phil Hughes <me@iamphill.com> | 2018-03-21 11:27:43 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-03-21 11:27:43 +0000 |
commit | 6202657ec722b3d3ec9edd9a1d3647050c1a561a (patch) | |
tree | 9b017f2d3d0a249c9426615b4e1860b1f3784d79 | |
parent | aa2a97b545243f528f60fe74ed1c0374b920f97f (diff) | |
download | gitlab-ce-6202657ec722b3d3ec9edd9a1d3647050c1a561a.tar.gz |
Changes empty project avatar to identicon in the IDE
Closes #44298
3 files changed, 62 insertions, 7 deletions
diff --git a/app/assets/javascripts/ide/components/ide_project_tree.vue b/app/assets/javascripts/ide/components/ide_project_tree.vue index 220db1abfb0..a6f40286ac1 100644 --- a/app/assets/javascripts/ide/components/ide_project_tree.vue +++ b/app/assets/javascripts/ide/components/ide_project_tree.vue @@ -1,13 +1,15 @@ <script> -import projectAvatarImage from '~/vue_shared/components/project_avatar/image.vue'; -import branchesTree from './ide_project_branches_tree.vue'; -import externalLinks from './ide_external_links.vue'; +import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue'; +import Identicon from '../../vue_shared/components/identicon.vue'; +import BranchesTree from './ide_project_branches_tree.vue'; +import ExternalLinks from './ide_external_links.vue'; export default { components: { - branchesTree, - externalLinks, - projectAvatarImage, + BranchesTree, + ExternalLinks, + ProjectAvatarImage, + Identicon, }, props: { project: { @@ -25,7 +27,10 @@ export default { :title="project.name" :href="project.web_url" > - <div class="avatar-container s40 project-avatar"> + <div + v-if="project.avatar_url" + class="avatar-container s40 project-avatar" + > <project-avatar-image class="avatar-container project-avatar" :link-href="project.path" @@ -34,6 +39,12 @@ export default { :img-size="40" /> </div> + <identicon + v-else + size-class="s40" + :entity-id="project.id" + :entity-name="project.name" + /> <div class="sidebar-context-title"> {{ project.name }} </div> diff --git a/changelogs/unreleased/ide-project-avatar-identicon.yml b/changelogs/unreleased/ide-project-avatar-identicon.yml new file mode 100644 index 00000000000..2b8b00018a8 --- /dev/null +++ b/changelogs/unreleased/ide-project-avatar-identicon.yml @@ -0,0 +1,5 @@ +--- +title: Make project avatar in IDE consistent with the rest of GitLab +merge_request: +author: +type: changed diff --git a/spec/javascripts/ide/components/ide_project_tree_spec.js b/spec/javascripts/ide/components/ide_project_tree_spec.js new file mode 100644 index 00000000000..657682cb39c --- /dev/null +++ b/spec/javascripts/ide/components/ide_project_tree_spec.js @@ -0,0 +1,39 @@ +import Vue from 'vue'; +import ProjectTree from '~/ide/components/ide_project_tree.vue'; +import createComponent from 'spec/helpers/vue_mount_component_helper'; + +describe('IDE project tree', () => { + const Component = Vue.extend(ProjectTree); + let vm; + + beforeEach(() => { + vm = createComponent(Component, { + project: { + id: 1, + name: 'test', + web_url: gl.TEST_HOST, + avatar_url: '', + branches: [], + }, + }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders identicon when projct has no avatar', () => { + expect(vm.$el.querySelector('.identicon')).not.toBeNull(); + }); + + it('renders avatar image if project has avatar', done => { + vm.project.avatar_url = gl.TEST_HOST; + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.identicon')).toBeNull(); + expect(vm.$el.querySelector('img.avatar')).not.toBeNull(); + + done(); + }); + }); +}); |