Merge branch...

Merge branch '217715-refactor-design-management-queries-and-mutations-to-stop-using-edges' into 'master'

Refactor Design Management queries and mutations to stop using 'edges'

Closes #217715

See merge request gitlab-org/gitlab!38166

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -48,7 +48,7 @@ export default {
       };
     },
     discussionParticipants() {
-      return extractParticipants(this.issue.participants);
+      return extractParticipants(this.issue.participants.nodes);
     },
     resolvedDiscussions() {
       return this.discussions.filter(discussion => discussion.resolved);

app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue

@@ -18,7 +18,7 @@ export default {
       if (!this.queryVersion) return 0;
 
       const idx = this.allVersions.findIndex(
-        version => this.findVersionId(version.node.id) === this.queryVersion,
+        version => this.findVersionId(version.id) === this.queryVersion,
       );
 
       // if the currentVersionId isn't a valid version (i.e. not in allVersions)
@@ -29,7 +29,7 @@ export default {
       if (this.queryVersion) return this.queryVersion;
 
       const currentVersion = this.allVersions[this.currentVersionIdx];
-      return this.findVersionId(currentVersion.node.id);
+      return this.findVersionId(currentVersion.id);
     },
     dropdownText() {
       if (this.isLatestVersion) {
@@ -51,23 +51,21 @@ export default {
 
 <template>
   <gl-new-dropdown :text="dropdownText" size="small" class="design-version-dropdown">
-    <gl-new-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
+    <gl-new-dropdown-item v-for="(version, index) in allVersions" :key="version.id">
       <router-link
         class="d-flex js-version-link"
-        :to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }"
+        :to="{ path: $route.path, query: { version: findVersionId(version.id) } }"
       >
         <div class="flex-grow-1 ml-2">
           <div>
             <strong
               >{{ __('Version') }} {{ allVersions.length - index }}
-              <span v-if="findVersionId(version.node.id) === latestVersionId"
-                >({{ __('latest') }})</span
-              >
+              <span v-if="findVersionId(version.id) === latestVersionId">({{ __('latest') }})</span>
             </strong>
           </div>
         </div>
         <i
-          v-if="findVersionId(version.node.id) === currentVersionId"
+          v-if="findVersionId(version.id) === currentVersionId"
           class="fa fa-check float-right gl-mr-2"
         ></i>
       </router-link>

app/assets/javascripts/design_management/graphql/mutations/create_image_diff_note.mutation.graphql

@@ -8,14 +8,12 @@ mutation createImageDiffNote($input: CreateImageDiffNoteInput!) {
         id
         replyId
         notes {
-          edges {
-            node {
+          nodes {
             ...DesignNote
           }
         }
       }
     }
-    }
     errors
   }
 }

app/assets/javascripts/design_management/graphql/mutations/upload_design.mutation.graphql

@@ -5,14 +5,12 @@ mutation uploadDesign($files: [Upload!]!, $projectPath: ID!, $iid: ID!) {
     designs {
       ...DesignItem
       versions {
-        edges {
-          node {
+        nodes {
           id
           sha
         }
       }
     }
-    }
     skippedDesigns {
       filename
     }

app/assets/javascripts/design_management/graphql/queries/get_design.query.graphql

@@ -7,16 +7,14 @@ query getDesign($fullPath: ID!, $iid: String!, $atVersion: ID, $filenames: [Stri
     issue(iid: $iid) {
       designCollection {
         designs(atVersion: $atVersion, filenames: $filenames) {
-          edges {
-            node {
+          nodes {
             ...DesignItem
             issue {
               title
               webPath
               webUrl
               participants {
-                  edges {
-                    node {
+                nodes {
                   ...Author
                 }
               }
@@ -26,6 +24,4 @@ query getDesign($fullPath: ID!, $iid: String!, $atVersion: ID, $filenames: [Stri
       }
     }
   }
-    }
-  }
 }

app/assets/javascripts/design_management/graphql/queries/get_design_list.query.graphql

@@ -7,20 +7,16 @@ query getDesignList($fullPath: ID!, $iid: String!, $atVersion: ID) {
     issue(iid: $iid) {
       designCollection {
         designs(atVersion: $atVersion) {
-          edges {
-            node {
+          nodes {
             ...DesignListItem
           }
         }
-        }
         versions {
-          edges {
-            node {
+          nodes {
             ...VersionListItem
           }
         }
       }
     }
   }
-  }
 }

app/assets/javascripts/design_management/mixins/all_designs.js

@@ -2,7 +2,6 @@ import { propertyOf } from 'lodash';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
-import { extractNodes } from '../utils/design_management_utils';
 import allVersionsMixin from './all_versions';
 import { DESIGNS_ROUTE_NAME } from '../router/constants';
 
@@ -19,9 +18,15 @@ export default {
         };
       },
       update: data => {
-        const designEdges = propertyOf(data)(['project', 'issue', 'designCollection', 'designs']);
-        if (designEdges) {
-          return extractNodes(designEdges);
+        const designNodes = propertyOf(data)([
+          'project',
+          'issue',
+          'designCollection',
+          'designs',
+          'nodes',
+        ]);
+        if (designNodes) {
+          return designNodes;
         }
         return [];
       },

app/assets/javascripts/design_management/mixins/all_versions.js

@@ -12,7 +12,7 @@ export default {
           atVersion: null,
         };
       },
-      update: data => data.project.issue.designCollection.versions.edges,
+      update: data => data.project.issue.designCollection.versions.nodes,
     },
   },
   inject: {
@@ -28,7 +28,7 @@ export default {
       return (
         this.$route.query.version &&
         this.allVersions &&
-        this.allVersions.some(version => version.node.id.endsWith(this.$route.query.version))
+        this.allVersions.some(version => version.id.endsWith(this.$route.query.version))
       );
     },
     designsVersion() {
@@ -38,7 +38,7 @@ export default {
     },
     latestVersionId() {
       const latestVersion = this.allVersions[0];
-      return latestVersion && findVersionId(latestVersion.node.id);
+      return latestVersion && findVersionId(latestVersion.id);
     },
     isLatestVersion() {
       if (this.allVersions.length > 0) {

app/assets/javascripts/design_management/utils/cache_update.js

@@ -12,10 +12,10 @@ import {
 const deleteDesignsFromStore = (store, query, selectedDesigns) => {
   const data = store.readQuery(query);
 
-  const changedDesigns = data.project.issue.designCollection.designs.edges.filter(
-    ({ node }) => !selectedDesigns.includes(node.filename),
+  const changedDesigns = data.project.issue.designCollection.designs.nodes.filter(
+    node => !selectedDesigns.includes(node.filename),
   );
-  data.project.issue.designCollection.designs.edges = [...changedDesigns];
+  data.project.issue.designCollection.designs.nodes = [...changedDesigns];
 
   store.writeQuery({
     ...query,
@@ -34,11 +34,10 @@ const addNewVersionToStore = (store, query, version) => {
   if (!version) return;
 
   const data = store.readQuery(query);
-  const newEdge = { node: version, __typename: 'DesignVersionEdge' };
 
-  data.project.issue.designCollection.versions.edges = [
-    newEdge,
-    ...data.project.issue.designCollection.versions.edges,
+  data.project.issue.designCollection.versions.nodes = [
+    version,
+    ...data.project.issue.designCollection.versions.nodes,
   ];
 
   store.writeQuery({
@@ -59,19 +58,16 @@ const addDiscussionCommentToStore = (store, createNote, query, queryVariables, d
 
   design.notesCount += 1;
   if (
-    !design.issue.participants.edges.some(
-      participant => participant.node.username === createNote.note.author.username,
+    !design.issue.participants.nodes.some(
+      participant => participant.username === createNote.note.author.username,
     )
   ) {
-    design.issue.participants.edges = [
-      ...design.issue.participants.edges,
+    design.issue.participants.nodes = [
+      ...design.issue.participants.nodes,
       {
-        __typename: 'UserEdge',
-        node: {
         __typename: 'User',
         ...createNote.note.author,
       },
-      },
     ];
   }
   store.writeQuery({
@@ -108,19 +104,16 @@ const addImageDiffNoteToStore = (store, createImageDiffNote, query, variables) =
   const notesCount = design.notesCount + 1;
   design.discussions.nodes = [...design.discussions.nodes, newDiscussion];
   if (
-    !design.issue.participants.edges.some(
-      participant => participant.node.username === createImageDiffNote.note.author.username,
+    !design.issue.participants.nodes.some(
+      participant => participant.username === createImageDiffNote.note.author.username,
     )
   ) {
-    design.issue.participants.edges = [
-      ...design.issue.participants.edges,
+    design.issue.participants.nodes = [
+      ...design.issue.participants.nodes,
       {
-        __typename: 'UserEdge',
-        node: {
         __typename: 'User',
         ...createImageDiffNote.note.author,
       },
-      },
     ];
   }
   store.writeQuery({
@@ -166,9 +159,9 @@ const updateImageDiffNoteInStore = (store, updateImageDiffNote, query, variables
 const addNewDesignToStore = (store, designManagementUpload, query) => {
   const data = store.readQuery(query);
 
-  const newDesigns = data.project.issue.designCollection.designs.edges.reduce((acc, design) => {
-    if (!acc.find(d => d.filename === design.node.filename)) {
-      acc.push(design.node);
+  const newDesigns = data.project.issue.designCollection.designs.nodes.reduce((acc, design) => {
+    if (!acc.find(d => d.filename === design.filename)) {
+      acc.push(design);
     }
 
     return acc;
@@ -178,30 +171,27 @@ const addNewDesignToStore = (store, designManagementUpload, query) => {
   const findNewVersions = designManagementUpload.designs.find(design => design.versions);
 
   if (findNewVersions) {
-    const findNewVersionsEdges = findNewVersions.versions.edges;
+    const findNewVersionsNodes = findNewVersions.versions.nodes;
 
-    if (findNewVersionsEdges && findNewVersionsEdges.length) {
-      newVersionNode = [findNewVersionsEdges[0]];
+    if (findNewVersionsNodes && findNewVersionsNodes.length) {
+      newVersionNode = [findNewVersionsNodes[0]];
     }
   }
 
   const newVersions = [
     ...(newVersionNode || []),
-    ...data.project.issue.designCollection.versions.edges,
+    ...data.project.issue.designCollection.versions.nodes,
   ];
 
   const updatedDesigns = {
     __typename: 'DesignCollection',
     designs: {
       __typename: 'DesignConnection',
-      edges: newDesigns.map(design => ({
-        __typename: 'DesignEdge',
-        node: design,
-      })),
+      nodes: newDesigns,
     },
     versions: {
       __typename: 'DesignVersionConnection',
-      edges: newVersions,
+      nodes: newVersions,
     },
   };
 

app/assets/javascripts/design_management/utils/design_management_utils.js

@@ -5,17 +5,7 @@ export const isValidDesignFile = ({ type }) =>
   (type.match(VALID_DESIGN_FILE_MIMETYPE.regex) || []).length > 0;
 
 /**
- * Returns formatted array that doesn't contain
- * `edges`->`node` nesting
- *
- * @param {Array} elements
- */
-
-export const extractNodes = elements => elements.edges.map(({ node }) => node);
-
-/**
- * Returns formatted array of discussions that doesn't contain
- * `edges`->`node` nesting for child notes
+ * Returns formatted array of discussions
  *
  * @param {Array} discussions
  */
@@ -40,9 +30,9 @@ export const findVersionId = id => (id.match('::Version/(.+$)') || [])[1];
 
 export const findNoteId = id => (id.match('DiffNote/(.+$)') || [])[1];
 
-export const extractDesigns = data => data.project.issue.designCollection.designs.edges;
+export const extractDesigns = data => data.project.issue.designCollection.designs.nodes;
 
-export const extractDesign = data => (extractDesigns(data) || [])[0]?.node;
+export const extractDesign = data => (extractDesigns(data) || [])[0];
 
 /**
  * Generates optimistic response for a design upload mutation
@@ -72,15 +62,12 @@ export const designUploadOptimisticResponse = files => {
     },
     versions: {
       __typename: 'DesignVersionConnection',
-      edges: {
-        __typename: 'DesignVersionEdge',
-        node: {
+      nodes: {
         __typename: 'DesignVersion',
         id: -uniqueId(),
         sha: -uniqueId(),
       },
     },
-    },
   }));
 
   return {
@@ -123,6 +110,6 @@ const normalizeAuthor = author => ({
   avatar_url: author.avatarUrl,
 });
 
-export const extractParticipants = users => users.edges.map(({ node }) => normalizeAuthor(node));
+export const extractParticipants = users => users.map(node => normalizeAuthor(node));
 
 export const getPageLayoutElement = () => document.querySelector('.layout-page');

spec/frontend/design_management/components/upload/mock_data/all_versions.js

 export default [
   {
-    node: {
     id: 'gid://gitlab/DesignManagement::Version/3',
     sha: '0945756378e0b1588b9dd40d5a6b99e8b7198f55',
   },
-  },
   {
-    node: {
     id: 'gid://gitlab/DesignManagement::Version/2',
     sha: '5b063fef0cd7213b312db65b30e24f057df21b20',
   },
-  },
 ];

spec/frontend/design_management/mock_data/all_versions.js

 export default [
   {
-    node: {
     id: 'gid://gitlab/DesignManagement::Version/1',
     sha: 'b389071a06c153509e11da1f582005b316667001',
   },
-  },
 ];

spec/frontend/design_management/mock_data/design.js

@@ -12,15 +12,13 @@ export default {
     webPath: 'full-issue-path',
     webUrl: 'full-issue-url',
     participants: {
-      edges: [
+      nodes: [
         {
-          node: {
           name: 'Administrator',
           username: 'root',
           webUrl: 'link-to-author',
           avatarUrl: 'link-to-avatar',
         },
-        },
       ],
     },
   },

spec/frontend/design_management/mock_data/designs.js

@@ -5,11 +5,7 @@ export default {
     issue: {
       designCollection: {
         designs: {
-          edges: [
-            {
-              node: design,
-            },
-          ],
+          nodes: [design],
         },
       },
     },

spec/frontend/design_management/mock_data/no_designs.js

@@ -3,7 +3,7 @@ export default {
     issue: {
       designCollection: {
         designs: {
-          edges: [],
+          nodes: [],
         },
       },
     },

spec/frontend/design_management/pages/index_spec.js

@@ -57,9 +57,7 @@ const mockDesigns = [
 ];
 
 const mockVersion = {
-  node: {
   id: 'gid://gitlab/DesignManagement::Version/1',
-  },
 };
 
 describe('Design management index page', () => {
@@ -240,16 +238,13 @@ describe('Design management index page', () => {
                 },
                 versions: {
                   __typename: 'DesignVersionConnection',
-                  edges: {
-                    __typename: 'DesignVersionEdge',
-                    node: {
+                  nodes: {
                     __typename: 'DesignVersion',
                     id: expect.anything(),
                     sha: expect.anything(),
                   },
                 },
               },
-              },
             ],
             skippedDesigns: [],
             errors: [],

spec/frontend/design_management/utils/design_management_utils_spec.js

@@ -51,7 +51,7 @@ describe('extractDiscussions', () => {
     };
   });
 
-  it('discards the edges.node artifacts of GraphQL', () => {
+  it('discards the node artifacts of GraphQL', () => {
     expect(extractDiscussions(discussions)).toEqual([
       { id: 1, notes: ['a'], index: 1 },
       { id: 2, notes: ['b'], index: 2 },
@@ -96,10 +96,7 @@ describe('optimistic responses', () => {
             discussions: { __typename: 'DesignDiscussion', nodes: [] },
             versions: {
               __typename: 'DesignVersionConnection',
-              edges: {
-                __typename: 'DesignVersionEdge',
-                node: { __typename: 'DesignVersion', id: -1, sha: -1 },
-              },
+              nodes: { __typename: 'DesignVersion', id: -1, sha: -1 },
             },
           },
         ],