Use GroupIdenticon for missing avatars

2 files changed, 15 insertions, 0 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index b1db34b9c50..c704aa65df2 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -92,6 +92,13 @@ export default {
     hasGroups() {
       return Object.keys(this.group.subGroups).length > 0;
     },
+    hasAvatar() {
+      if (this.group.avatarUrl) {
+        return this.group.avatarUrl.indexOf('/assets/no_group_avatar') === -1;
+      } else {
+        return false;
+      }
+    },
   },
 };
 </script>
@@ -194,9 +201,15 @@ export default {
         <a
           :href="group.groupPath">
           <img
+            v-if="hasAvatar"
             class="avatar s40"
             :src="group.avatarUrl"
           />
+          <group-identicon
+            v-else
+            :id=group.id
+            :name="group.name"
+          />
         </a>
       </div>
       <div
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index 00e1bd94c9c..3b500bfc237 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -5,6 +5,7 @@ import GroupFilterableList from './groups_filterable_list';
 import GroupsComponent from './components/groups.vue';
 import GroupFolder from './components/group_folder.vue';
 import GroupItem from './components/group_item.vue';
+import GroupIdenticon from './components/group_identicon.vue';
 import GroupsStore from './stores/groups_store';
 import GroupsService from './services/groups_service';
 import eventHub from './event_hub';
@@ -21,6 +22,7 @@ document.addEventListener('DOMContentLoaded', () => {
   Vue.component('groups-component', GroupsComponent);
   Vue.component('group-folder', GroupFolder);
   Vue.component('group-item', GroupItem);
+  Vue.component('group-identicon', GroupIdenticon);
 
   // eslint-disable-next-line no-new
   new Vue({