Add `convertFromGraphQLIds` GraphQL util

And refactor `projects_token_selector` component to use it

app/assets/javascripts/access_tokens/components/projects_token_selector.vue

@@ -8,7 +8,7 @@ import {
 } from '@gitlab/ui';
 import produce from 'immer';
 
-import { getIdFromGraphQLId, convertToGraphQLId } from '~/graphql_shared/utils';
+import { convertToGraphQLIds, convertNodeIdsFromGraphQLIds } from '~/graphql_shared/utils';
 
 import getProjectsQuery from '../graphql/queries/get_projects.query.graphql';
 
@@ -51,7 +51,7 @@ export default {
       },
       update({ projects }) {
         return {
-          list: this.formatProjectNodes(projects),
+          list: convertNodeIdsFromGraphQLIds(projects.nodes),
           pageInfo: projects.pageInfo,
         };
       },
@@ -64,7 +64,7 @@ export default {
       query: getProjectsQuery,
       variables() {
         return {
-          ids: this.initialProjectIds.map((id) => convertToGraphQLId(GRAPHQL_ENTITY_TYPE, id)),
+          ids: convertToGraphQLIds(GRAPHQL_ENTITY_TYPE, this.initialProjectIds),
         };
       },
       manual: true,
@@ -72,7 +72,7 @@ export default {
         return !this.initialProjectIds.length;
       },
       result({ data: { projects } }) {
-        this.$emit('input', this.formatProjectNodes(projects));
+        this.$emit('input', convertNodeIdsFromGraphQLIds(projects.nodes));
       },
     },
   },
@@ -88,12 +88,6 @@ export default {
     };
   },
   methods: {
-    formatProjectNodes(projects) {
-      return projects.nodes.map((project) => ({
-        ...project,
-        id: getIdFromGraphQLId(project.id),
-      }));
-    },
     handleSearch(query) {
       this.isSearching = true;
       this.searchQuery = query;

app/assets/javascripts/graphql_shared/utils.js

+import { isArray } from 'lodash';
+
 /**
  * Ids generated by GraphQL endpoints are usually in the format
  * gid://gitlab/Environments/123. This method extracts Id number
@@ -52,3 +54,35 @@ export const convertToGraphQLId = (type, id) => {
  * @returns {Array}
  */
 export const convertToGraphQLIds = (type, ids) => ids.map((id) => convertToGraphQLId(type, id));
+
+/**
+ * Ids generated by GraphQL endpoints are usually in the format
+ * gid://gitlab/Groups/123. This method takes an array of
+ * GraphQL Ids and converts them to a number.
+ *
+ * @param {Array} ids An array of GraphQL IDs
+ * @returns {Array}
+ */
+export const convertFromGraphQLIds = (ids) => {
+  if (!isArray(ids)) {
+    throw new TypeError(`ids must be an array; got ${typeof ids}`);
+  }
+
+  return ids.map((id) => getIdFromGraphQLId(id));
+};
+
+/**
+ * Ids generated by GraphQL endpoints are usually in the format
+ * gid://gitlab/Groups/123. This method takes an array of nodes
+ * and converts the `id` properties from a GraphQL Id to a number.
+ *
+ * @param {Array} nodes An array of nodes with an `id` property
+ * @returns {Array}
+ */
+export const convertNodeIdsFromGraphQLIds = (nodes) => {
+  if (!isArray(nodes)) {
+    throw new TypeError(`nodes must be an array; got ${typeof nodes}`);
+  }
+
+  return nodes.map((node) => (node.id ? { ...node, id: getIdFromGraphQLId(node.id) } : node));
+};

spec/frontend/graphql_shared/utils_spec.js

@@ -2,6 +2,8 @@ import {
   getIdFromGraphQLId,
   convertToGraphQLId,
   convertToGraphQLIds,
+  convertFromGraphQLIds,
+  convertNodeIdsFromGraphQLIds,
 } from '~/graphql_shared/utils';
 
 const mockType = 'Group';
@@ -81,3 +83,35 @@ describe('convertToGraphQLIds', () => {
     expect(() => convertToGraphQLIds(type, ids)).toThrow(new TypeError(message));
   });
 });
+
+describe('convertFromGraphQLIds', () => {
+  it.each`
+    ids                        | expected
+    ${[mockGid]}               | ${[mockId]}
+    ${[mockGid, 'invalid id']} | ${[mockId, null]}
+  `('converts $ids from GraphQL Ids', ({ ids, expected }) => {
+    expect(convertFromGraphQLIds(ids)).toEqual(expected);
+  });
+
+  it("throws TypeError if `ids` parameter isn't an array", () => {
+    expect(() => convertFromGraphQLIds('invalid')).toThrow(
+      new TypeError('ids must be an array; got string'),
+    );
+  });
+});
+
+describe('convertNodeIdsFromGraphQLIds', () => {
+  it.each`
+    nodes                                                               | expected
+    ${[{ id: mockGid, name: 'foo bar' }, { id: mockGid, name: 'baz' }]} | ${[{ id: mockId, name: 'foo bar' }, { id: mockId, name: 'baz' }]}
+    ${[{ name: 'foo bar' }]}                                            | ${[{ name: 'foo bar' }]}
+  `('converts `id` properties in $nodes from GraphQL Id', ({ nodes, expected }) => {
+    expect(convertNodeIdsFromGraphQLIds(nodes)).toEqual(expected);
+  });
+
+  it("throws TypeError if `nodes` parameter isn't an array", () => {
+    expect(() => convertNodeIdsFromGraphQLIds('invalid')).toThrow(
+      new TypeError('nodes must be an array; got string'),
+    );
+  });
+});