Update avatar_helper to accept GraphQL id

- with the company being GraphQL-first, there is a rise of
  using the GraphQL ids, which is formatted differently than
  the database ids (e.g. "gid://gitlab/Project/8" vs 8)
- update the avatar_helper to accept a GraphQL id
- update the identicon component to accept GraphQL ids
- add tests

app/assets/javascripts/helpers/avatar_helper.js

 import { escape } from 'lodash';
 import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
 export const DEFAULT_SIZE_CLASS = 's40';
 export const IDENTICON_BG_COUNT = 7;
 
 export function getIdenticonBackgroundClass(entityId) {
-  const type = (entityId % IDENTICON_BG_COUNT) + 1;
+  // If a GraphQL string id is passed in, convert it to the entity number
+  const id = typeof entityId === 'string' ? getIdFromGraphQLId(entityId) : entityId;
+  const type = (id % IDENTICON_BG_COUNT) + 1;
   return `bg${type}`;
 }
 

app/assets/javascripts/vue_shared/components/identicon.vue

@@ -4,7 +4,7 @@ import { getIdenticonBackgroundClass, getIdenticonTitle } from '~/helpers/avatar
 export default {
   props: {
     entityId: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     entityName: {

changelogs/unreleased/update-avatar-helper-for-graphql.yml

+---
+title: Update avatar helper to accept GraphQL id as well as database id
+merge_request: 32261
+author:
+type: added

spec/frontend/avatar_helper_spec.js

@@ -15,10 +15,18 @@ function matchAll(str) {
 
 describe('avatar_helper', () => {
   describe('getIdenticonBackgroundClass', () => {
-    it('returns identicon bg class from id', () => {
+    it('returns identicon bg class from id that is a number', () => {
       expect(getIdenticonBackgroundClass(1)).toEqual('bg2');
     });
 
+    it('returns identicon bg class from id that is a string', () => {
+      expect(getIdenticonBackgroundClass('1')).toEqual('bg2');
+    });
+
+    it('returns identicon bg class from id that is a GraphQL string id', () => {
+      expect(getIdenticonBackgroundClass('gid://gitlab/Project/1')).toEqual('bg2');
+    });
+
     it(`wraps around if id is bigger than ${IDENTICON_BG_COUNT}`, () => {
       expect(getIdenticonBackgroundClass(IDENTICON_BG_COUNT + 4)).toEqual('bg5');
       expect(getIdenticonBackgroundClass(IDENTICON_BG_COUNT * 5 + 6)).toEqual('bg7');

spec/frontend/vue_shared/components/__snapshots__/identicon_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Identicon matches snapshot 1`] = `
+exports[`Identicon entity id is a GraphQL id matches snapshot 1`] = `
+<div
+  class="avatar identicon s40 bg2"
+>
+  
+  E
+
+</div>
+`;
+
+exports[`Identicon entity id is a number matches snapshot 1`] = `
 <div
   class="avatar identicon s40 bg2"
 >

spec/frontend/vue_shared/components/identicon_spec.js

@@ -4,12 +4,17 @@ import IdenticonComponent from '~/vue_shared/components/identicon.vue';
 describe('Identicon', () => {
   let wrapper;
 
-  const createComponent = () => {
-    wrapper = shallowMount(IdenticonComponent, {
-      propsData: {
+  const defaultProps = {
     entityId: 1,
     entityName: 'entity-name',
     sizeClass: 's40',
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(IdenticonComponent, {
+      propsData: {
+        ...defaultProps,
+        ...props,
       },
     });
   };
@@ -19,15 +24,27 @@ describe('Identicon', () => {
     wrapper = null;
   });
 
-  it('matches snapshot', () => {
-    createComponent();
+  describe('entity id is a number', () => {
+    beforeEach(createComponent);
 
+    it('matches snapshot', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
     it('adds a correct class to identicon', () => {
-    createComponent();
+      expect(wrapper.find({ ref: 'identicon' }).classes()).toContain('bg2');
+    });
+  });
+
+  describe('entity id is a GraphQL id', () => {
+    beforeEach(() => createComponent({ entityId: 'gid://gitlab/Project/8' }));
 
+    it('matches snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('adds a correct class to identicon', () => {
       expect(wrapper.find({ ref: 'identicon' }).classes()).toContain('bg2');
     });
+  });
 });