Resolve "Implement GraphQL Startup.js for Design Management app"

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

 <script>
 import { ApolloMutation } from 'vue-apollo';
-import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
+import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
 import destroyDesignMutation from '../graphql/mutations/destroy_design.mutation.graphql';
 import { updateStoreAfterDesignsDelete } from '../utils/cache_update';
 

app/assets/javascripts/design_management/components/toolbar/index.vue

 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
+import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import { __, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import DesignNavigation from './design_navigation.vue';
 import DeleteButton from '../delete_button.vue';
-import permissionsQuery from '../../graphql/queries/design_permissions.query.graphql';
 import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 
 export default {

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

 import { propertyOf } from 'lodash';
+import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import { s__ } from '~/locale';
-import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
 import allVersionsMixin from './all_versions';
 import { DESIGNS_ROUTE_NAME } from '../router/constants';
 

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

-import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
+import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
 import { findVersionId } from '../utils/design_management_utils';
 
 export default {

app/assets/javascripts/design_management/pages/index.vue

 <script>
 import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui';
 import VueDraggable from 'vuedraggable';
+import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
+import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import createFlash, { FLASH_TYPES } from '~/flash';
 import { s__, sprintf } from '~/locale';
 import { getFilename } from '~/lib/utils/file_upload';
@@ -12,8 +14,6 @@ import DesignVersionDropdown from '../components/upload/design_version_dropdown.
 import DesignDropzone from '../components/upload/design_dropzone.vue';
 import uploadDesignMutation from '../graphql/mutations/upload_design.mutation.graphql';
 import moveDesignMutation from '../graphql/mutations/move_design.mutation.graphql';
-import permissionsQuery from '../graphql/queries/design_permissions.query.graphql';
-import getDesignListQuery from '../graphql/queries/get_design_list.query.graphql';
 import allDesignsMixin from '../mixins/all_designs';
 import {
   UPLOAD_DESIGN_ERROR,

app/assets/javascripts/design_management/graphql/queries/design_permissions.query.graphql → app/graphql/queries/design_management/design_permissions.query.graphql

 query permissions($fullPath: ID!, $iid: String!) {
   project(fullPath: $fullPath) {
+    __typename
     id
     issue(iid: $iid) {
+      __typename
       userPermissions {
+        __typename
         createDesign
       }
     }

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

-#import "../fragments/design_list.fragment.graphql"
-#import "../fragments/version.fragment.graphql"
-
 query getDesignList($fullPath: ID!, $iid: String!, $atVersion: ID) {
   project(fullPath: $fullPath) {
+    __typename
     id
     issue(iid: $iid) {
+      __typename
       designCollection {
+        __typename
         copyState
         designs(atVersion: $atVersion) {
+          __typename
           nodes {
-            ...DesignListItem
+            __typename
+            id
+            event
+            filename
+            notesCount
+            image
+            imageV432x230
+            currentUserTodos(state: pending) {
+              __typename
+              nodes {
+                __typename
+                id
+              }
+            }
           }
         }
         versions {
+          __typename
           nodes {
-            ...VersionListItem
+            __typename
+            id
+            sha
           }
         }
       }

app/views/projects/issues/_design_management.html.haml

@@ -6,6 +6,8 @@
 - enable_lfs_message = s_("DesignManagement|To upload designs, you'll need to enable LFS and have admin enable hashed storage. %{requirements_link_start}More information%{requirements_link_end}").html_safe % { requirements_link_start: requirements_link_start, requirements_link_end: link_end }
 
 - if @project.design_management_enabled?
+  - add_page_startup_graphql_call('design_management/get_design_list', { fullPath: @project.full_path, iid: @issue.iid.to_s, atVersion: nil })
+  - add_page_startup_graphql_call('design_management/design_permissions', { fullPath: @project.full_path, iid: @issue.iid.to_s })
   .js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
 - else
   .gl-border-solid.gl-border-1.gl-border-gray-100.gl-rounded-base.gl-mt-5.gl-p-3.gl-text-center

changelogs/unreleased/263109-implement-graphql-startup-js-for-design-management-app.yml

+---
+title: Resolve Implement GraphQL Startup.js for Design Management app
+merge_request: 46660
+author:
+type: other

spec/frontend/design_management/mock_data/apollo_mock.js

 export const designListQueryResponse = {
   data: {
     project: {
+      __typename: 'Project',
       id: '1',
       issue: {
+        __typename: 'Issue',
         designCollection: {
+          __typename: 'DesignCollection',
           copyState: 'READY',
           designs: {
+            __typename: 'DesignConnection',
             nodes: [
               {
+                __typename: 'Design',
                 id: '1',
                 event: 'NONE',
                 filename: 'fox_1.jpg',
@@ -15,10 +20,12 @@ export const designListQueryResponse = {
                 image: 'image-1',
                 imageV432x230: 'image-1',
                 currentUserTodos: {
+                  __typename: 'ToDo',
                   nodes: [],
                 },
               },
               {
+                __typename: 'Design',
                 id: '2',
                 event: 'NONE',
                 filename: 'fox_2.jpg',
@@ -26,10 +33,12 @@ export const designListQueryResponse = {
                 image: 'image-2',
                 imageV432x230: 'image-2',
                 currentUserTodos: {
+                  __typename: 'ToDo',
                   nodes: [],
                 },
               },
               {
+                __typename: 'Design',
                 id: '3',
                 event: 'NONE',
                 filename: 'fox_3.jpg',
@@ -37,12 +46,14 @@ export const designListQueryResponse = {
                 image: 'image-3',
                 imageV432x230: 'image-3',
                 currentUserTodos: {
+                  __typename: 'ToDo',
                   nodes: [],
                 },
               },
             ],
           },
           versions: {
+            __typename: 'DesignVersion',
             nodes: [],
           },
         },
@@ -82,9 +93,11 @@ export const designUploadMutationUpdatedResponse = {
 export const permissionsQueryResponse = {
   data: {
     project: {
+      __typename: 'Project',
       id: '1',
       issue: {
-        userPermissions: { createDesign: true },
+        __typename: 'Issue',
+        userPermissions: { __typename: 'UserPermissions', createDesign: true },
       },
     },
   },
@@ -92,6 +105,7 @@ export const permissionsQueryResponse = {
 
 export const reorderedDesigns = [
   {
+    __typename: 'Design',
     id: '2',
     event: 'NONE',
     filename: 'fox_2.jpg',
@@ -99,10 +113,12 @@ export const reorderedDesigns = [
     image: 'image-2',
     imageV432x230: 'image-2',
     currentUserTodos: {
+      __typename: 'ToDo',
       nodes: [],
     },
   },
   {
+    __typename: 'Design',
     id: '1',
     event: 'NONE',
     filename: 'fox_1.jpg',
@@ -110,10 +126,12 @@ export const reorderedDesigns = [
     image: 'image-1',
     imageV432x230: 'image-1',
     currentUserTodos: {
+      __typename: 'ToDo',
       nodes: [],
     },
   },
   {
+    __typename: 'Design',
     id: '3',
     event: 'NONE',
     filename: 'fox_3.jpg',
@@ -121,6 +139,7 @@ export const reorderedDesigns = [
     image: 'image-3',
     imageV432x230: 'image-3',
     currentUserTodos: {
+      __typename: 'ToDo',
       nodes: [],
     },
   },
@@ -130,7 +149,9 @@ export const moveDesignMutationResponse = {
   data: {
     designManagementMove: {
       designCollection: {
+        __typename: 'DesignCollection',
         designs: {
+          __typename: 'DesignConnection',
           nodes: [...reorderedDesigns],
         },
       },

spec/frontend/design_management/pages/index_spec.js

@@ -5,6 +5,8 @@ import VueRouter from 'vue-router';
 import { GlEmptyState } from '@gitlab/ui';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
+import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
+import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql';
 import Index from '~/design_management/pages/index.vue';
 import uploadDesignQuery from '~/design_management/graphql/mutations/upload_design.mutation.graphql';
 import DesignDestroyer from '~/design_management/components/design_destroyer.vue';
@@ -28,8 +30,6 @@ import {
   reorderedDesigns,
   moveDesignMutationResponseWithErrors,
 } from '../mock_data/apollo_mock';
-import getDesignListQuery from '~/design_management/graphql/queries/get_design_list.query.graphql';
-import permissionsQuery from '~/design_management/graphql/queries/design_permissions.query.graphql';
 import moveDesignMutation from '~/design_management/graphql/mutations/move_design.mutation.graphql';
 import { DESIGN_TRACKING_PAGE_NAME } from '~/design_management/utils/tracking';