Create avatar_helper for rendering avatar html in vanilla JS

2 files changed, 74 insertions, 0 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..4f58603fa93
--- /dev/null
+++ b/app/assets/javascripts/helpers/avatar_helper.js
@@ -0,0 +1,43 @@
+import _ from 'underscore';
+
+/**
+ * This method is based on app/helpers/avatars_helper.rb#project_identicon
+ */
+function getIdenticonStyles(entityId) {
+  const allowedColors = [
+    '#FFEBEE',
+    '#F3E5F5',
+    '#E8EAF6',
+    '#E3F2FD',
+    '#E0F2F1',
+    '#FBE9E7',
+    '#EEEEEE',
+  ];
+
+  const backgroundColor = allowedColors[entityId % allowedColors.length];
+
+  return `background-color: ${backgroundColor}; color: #555;`;
+}
+
+function getIdenticonTitle(entityName) {
+  return entityName.charAt(0).toUpperCase();
+}
+
+export function renderIdenticon(id, name, options = {}) {
+  const { sizeClass = 's32' } = options;
+
+  const styles = getIdenticonStyles(id);
+  const title = getIdenticonTitle(name);
+
+  return `<div style="${_.escape(styles)}" class="avatar identicon ${_.escape(sizeClass)}">${_.escape(title)}</div>`;
+}
+
+export function renderAvatar(entity, options = {}) {
+  const { sizeClass = 's32' } = options;
+
+  if (!entity.avatar_url) {
+    return renderIdenticon(entity.id, entity.name, options);
+  }
+
+  return `<img src="${_.escape(entity.avatar_url)}" class="avatar ${_.escape(sizeClass)}" />`;
+}
diff --git a/spec/javascripts/avatar_helper_spec.js b/spec/javascripts/avatar_helper_spec.js
new file mode 100644
index 00000000000..19e40436bca
--- /dev/null
+++ b/spec/javascripts/avatar_helper_spec.js
@@ -0,0 +1,31 @@
+import $ from 'jquery';
+import { renderAvatar } from '~/helpers/avatar_helper';
+
+describe('avatar_helper', () => {
+  describe('renderAvatar', () => {
+    it('renders an image with the avatarUrl', () => {
+      const avatarUrl = 'https://gitlab.com/not-real-assets/test.png';
+      const entity = {
+        avatar_url: avatarUrl,
+      };
+
+      const result = $(renderAvatar(entity));
+
+      expect(result).toEqual('img');
+      expect(result).toHaveAttr('src', avatarUrl);
+    });
+
+    it('renders an identicon if no avatarUrl', () => {
+      const entity = {
+        id: 5,
+        name: 'walrus',
+      };
+
+      const result = $(renderAvatar(entity, { sizeClass: 's16' }));
+
+      expect(result).toHaveClass('identicon');
+      expect(result).toHaveClass('s16');
+      expect(result.text().trim()).toEqual('W');
+    });
+  });
+});