3 files changed, 53 insertions, 20 deletions
diff --git a/app/assets/javascripts/helpers/avatar_helper.js b/app/assets/javascripts/helpers/avatar_helper.js
new file mode 100644
index 00000000000..d3b1d0f11fd
--- /dev/null
+++ b/app/assets/javascripts/helpers/avatar_helper.js
@@ -0,0 +1,33 @@
+import _ from 'underscore';
+import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility';
+
+export const DEFAULT_SIZE_CLASS = 's40';
+export const IDENTICON_BG_COUNT = 7;
+
+export function getIdenticonBackgroundClass(entityId) {
+  const type = (entityId % IDENTICON_BG_COUNT) + 1;
+  return `bg${type}`;
+}
+
+export function getIdenticonTitle(entityName) {
+  return getFirstCharacterCapitalized(entityName) || ' ';
+}
+
+export function renderIdenticon(entity, options = {}) {
+  const { sizeClass = DEFAULT_SIZE_CLASS } = options;
+
+  const bgClass = getIdenticonBackgroundClass(entity.id);
+  const title = getIdenticonTitle(entity.name);
+
+  return `<div class="avatar identicon ${_.escape(sizeClass)} ${_.escape(bgClass)}">${_.escape(title)}</div>`;
+}
+
+export function renderAvatar(entity, options = {}) {
+  if (!entity.avatar_url) {
+    return renderIdenticon(entity, options);
+  }
+
+  const { sizeClass = DEFAULT_SIZE_CLASS } = options;
+
+  return `<img src="${_.escape(entity.avatar_url)}" class="avatar ${_.escape(sizeClass)}" />`;
+}
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 5f25c6ce1ae..2be3c97bd95 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -76,6 +76,20 @@ export function capitalizeFirstCharacter(text) {
 }
 
 /**
+ * Returns the first character capitalized
+ *
+ * If falsey, returns empty string.
+ *
+ * @param {String} text
+ * @return {String}
+ */
+export function getFirstCharacterCapitalized(text) {
+  return text
+    ? text.charAt(0).toUpperCase()
+    : '';
+}
+
+/**
  * Replaces all html tags from a string with the given replacement.
  *
  * @param {String} string
diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
index 4ffc811e714..0862f2c0cff 100644
--- a/app/assets/javascripts/vue_shared/components/identicon.vue
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -1,4 +1,6 @@
 <script>
+import { getIdenticonBackgroundClass, getIdenticonTitle } from '~/helpers/avatar_helper';
+
 export default {
   props: {
     entityId: {
@@ -16,26 +18,11 @@ export default {
     },
   },
   computed: {
-    /**
-     * This method is based on app/helpers/avatars_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;`;
+    identiconBackgroundClass() {
+      return getIdenticonBackgroundClass(this.entityId);
     },
     identiconTitle() {
-      return this.entityName.charAt(0).toUpperCase();
+      return getIdenticonTitle(this.entityName);
     },
   },
 };
@@ -43,8 +30,7 @@ export default {
 
 <template>
   <div
-    :class="sizeClass"
-    :style="identiconStyles"
+    :class="[sizeClass, identiconBackgroundClass]"
     class="avatar identicon">
     {{ identiconTitle }}
   </div>