Merge branch '35408-group-auto-avatars' into 'master'

Show auto-generated avatars in Groups dashboard tree for Groups without avatars

See merge request !13188

3 files changed, 62 insertions, 0 deletions

diff --git a/app/assets/javascripts/groups/components/group_identicon.vue b/app/assets/javascripts/groups/components/group_identicon.vue
new file mode 100644
index 00000000000..0edd820743f
--- /dev/null
+++ b/app/assets/javascripts/groups/components/group_identicon.vue
@@ -0,0 +1,45 @@
+<script>
+export default {
+  props: {
+    entityId: {
+      type: Number,
+      required: true,
+    },
+    entityName: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    /**
+     * This method is based on app/helpers/application_helper.rb#project_identicon
+     */
+    identiconStyles() {
+      const allowedColors = [
+        '#FFEBEE',
+        '#F3E5F5',
+        '#E8EAF6',
+        '#E3F2FD',
+        '#E0F2F1',
+        '#FBE9E7',
+        '#EEEEEE',
+      ];
+
+      const backgroundColor = allowedColors[this.entityId % 7];
+
+      return `background-color: ${backgroundColor}; color: #555;`;
+    },
+    identiconTitle() {
+      return this.entityName.charAt(0).toUpperCase();
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="avatar s40 identicon"
+    :style="identiconStyles">
+    {{identiconTitle}}
+  </div>
+</template>
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index b1db34b9c50..cb133cf7535 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -1,7 +1,11 @@
 <script>
 import eventHub from '../event_hub';
+import groupIdenticon from './group_identicon.vue';
 
 export default {
+  components: {
+    groupIdenticon,
+  },
   props: {
     group: {
       type: Object,
@@ -92,6 +96,9 @@ export default {
     hasGroups() {
       return Object.keys(this.group.subGroups).length > 0;
     },
+    hasAvatar() {
+      return this.group.avatarUrl && this.group.avatarUrl.indexOf('/assets/no_group_avatar') === -1;
+    },
   },
 };
 </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
+            :entity-id=group.id
+            :entity-name="group.name"
+          />
         </a>
       </div>
       <div
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 868e65a8f46..ab754f4a492 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -369,6 +369,10 @@ ul.indent-list {
       background-color: $row-hover;
       cursor: pointer;
     }
+
+    .avatar-container > a {
+      width: 100%;
+    }
   }
 }