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();
+    });
+  });
+});