Merge branch 'cngo-remove-work-item-local-typedefs' into 'master'

Remove work item local typedefs and resolvers

See merge request gitlab-org/gitlab!83528

app/assets/javascripts/sidebar/graphql.js

 import produce from 'immer';
 import VueApollo from 'vue-apollo';
 import getIssueStateQuery from '~/issues/show/queries/get_issue_state.query.graphql';
-import { resolvers as workItemResolvers } from '~/work_items/graphql/resolvers';
 import createDefaultClient from '~/lib/graphql';
 
 const resolvers = {
-  ...workItemResolvers,
   Mutation: {
     updateIssueState: (_, { issueType = undefined, isDirty = false }, { cache }) => {
       const sourceData = cache.readQuery({ query: getIssueStateQuery });
@@ -14,7 +12,6 @@ const resolvers = {
       });
       cache.writeQuery({ query: getIssueStateQuery, data });
     },
-    ...workItemResolvers.Mutation,
   },
 };
 

app/assets/javascripts/work_items/constants.js

@@ -4,7 +4,3 @@ export const i18n = {
   fetchError: s__('WorkItem|Something went wrong when fetching the work item. Please try again.'),
   updateError: s__('WorkItem|Something went wrong while updating the work item. Please try again.'),
 };
-
-export const widgetTypes = {
-  title: 'TITLE',
-};

app/assets/javascripts/work_items/graphql/provider.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import workItemQuery from './work_item.query.graphql';
-import { resolvers } from './resolvers';
-import typeDefs from './typedefs.graphql';
 
 export function createApolloProvider() {
   Vue.use(VueApollo);
 
-  const defaultClient = createDefaultClient(resolvers, {
-    typeDefs,
-    cacheConfig: {
-      possibleTypes: {
-        LocalWorkItemWidget: ['LocalTitleWidget'],
-      },
-    },
-  });
-
-  defaultClient.cache.writeQuery({
-    query: workItemQuery,
-    variables: {
-      id: 'gid://gitlab/WorkItem/1',
-    },
-    data: {
-      workItem: {
-        __typename: 'WorkItem',
-        id: 'gid://gitlab/WorkItem/1',
-        // eslint-disable-next-line @gitlab/require-i18n-strings
-        title: 'Test Work Item',
-        workItemType: {
-          __typename: 'WorkItemType',
-          id: 'work-item-type-1',
-          name: 'Type', // eslint-disable-line @gitlab/require-i18n-strings
-        },
-        widgets: {
-          __typename: 'LocalWorkItemWidgetConnection',
-          nodes: [],
-        },
-      },
-    },
-  });
+  const defaultClient = createDefaultClient();
 
   return new VueApollo({
     defaultClient,

app/assets/javascripts/work_items/graphql/resolvers.js

-import workItemQuery from './work_item.query.graphql';
-
-export const resolvers = {
-  Mutation: {
-    localUpdateWorkItem(_, { input }, { cache }) {
-      const workItem = {
-        __typename: 'LocalWorkItem',
-        type: 'FEATURE',
-        id: input.id,
-        title: input.title,
-        widgets: {
-          __typename: 'LocalWorkItemWidgetConnection',
-          nodes: [],
-        },
-      };
-
-      cache.writeQuery({
-        query: workItemQuery,
-        variables: { id: input.id },
-        data: { localWorkItem: workItem },
-      });
-
-      return {
-        __typename: 'LocalUpdateWorkItemPayload',
-        workItem,
-      };
-    },
-  },
-};

app/assets/javascripts/work_items/graphql/typedefs.graphql

-enum LocalWorkItemType {
-  FEATURE
-}
-
-enum LocalWidgetType {
-  TITLE
-}
-
-interface LocalWorkItemWidget {
-  type: LocalWidgetType!
-}
-
-# Replicating Relay connection type for client schema
-type LocalWorkItemWidgetEdge {
-  cursor: String!
-  node: LocalWorkItemWidget
-}
-
-type LocalWorkItemWidgetConnection {
-  edges: [LocalWorkItemWidgetEdge]
-  nodes: [LocalWorkItemWidget]
-  pageInfo: PageInfo!
-}
-
-type LocalWorkItem {
-  id: ID!
-  type: LocalWorkItemType!
-  title: String!
-  widgets: [LocalWorkItemWidgetConnection]
-}
-
-input LocalCreateWorkItemInput {
-  title: String!
-}
-
-input LocalUpdateWorkItemInput {
-  id: ID!
-  title: String
-}
-
-type LocalCreateWorkItemPayload {
-  workItem: LocalWorkItem!
-}
-
-type LocalUpdateWorkItemPayload {
-  workItem: LocalWorkItem!
-}
-
-extend type Query {
-  localWorkItem(id: ID!): LocalWorkItem!
-}
-
-extend type Mutation {
-  localCreateWorkItem(input: LocalCreateWorkItemInput!): LocalCreateWorkItemPayload!
-  localUpdateWorkItem(input: LocalUpdateWorkItemInput!): LocalUpdateWorkItemPayload!
-}

app/assets/javascripts/work_items/graphql/widget.fragment.graphql

-fragment WidgetBase on LocalWorkItemWidget {
-  type
-}

app/assets/javascripts/work_items/pages/create_work_item.vue

@@ -128,10 +128,6 @@ export default {
                   id,
                   title,
                   workItemType,
-                  widgets: {
-                    __typename: 'LocalWorkItemWidgetConnection',
-                    nodes: [],
-                  },
                 },
               },
             });

spec/frontend/work_items/components/work_item_title_spec.js

@@ -22,13 +22,14 @@ describe('WorkItemTitle component', () => {
   const findItemTitle = () => wrapper.findComponent(ItemTitle);
 
   const createComponent = ({ loading = false, mutationHandler = mutationSuccessHandler } = {}) => {
+    const { id, title, workItemType } = workItemQueryResponse.data.workItem;
     wrapper = shallowMount(WorkItemTitle, {
       apolloProvider: createMockApollo([[updateWorkItemMutation, mutationHandler]]),
       propsData: {
         loading,
-        workItemId: workItemQueryResponse.workItem.id,
-        workItemTitle: workItemQueryResponse.workItem.title,
-        workItemType: workItemQueryResponse.workItem.workItemType.name,
+        workItemId: id,
+        workItemTitle: title,
+        workItemType: workItemType.name,
       },
     });
   };
@@ -61,7 +62,7 @@ describe('WorkItemTitle component', () => {
     });
 
     it('renders title', () => {
-      expect(findItemTitle().props('title')).toBe(workItemQueryResponse.workItem.title);
+      expect(findItemTitle().props('title')).toBe(workItemQueryResponse.data.workItem.title);
     });
   });
 
@@ -73,13 +74,18 @@ describe('WorkItemTitle component', () => {
 
       findItemTitle().vm.$emit('title-changed', title);
 
-      expect(mutationSuccessHandler).toHaveBeenCalledWith({ input: { id: '1', title } });
+      expect(mutationSuccessHandler).toHaveBeenCalledWith({
+        input: {
+          id: workItemQueryResponse.data.workItem.id,
+          title,
+        },
+      });
     });
 
     it('does not call a mutation when the title has not changed', () => {
       createComponent();
 
-      findItemTitle().vm.$emit('title-changed', workItemQueryResponse.workItem.title);
+      findItemTitle().vm.$emit('title-changed', workItemQueryResponse.data.workItem.title);
 
       expect(mutationSuccessHandler).not.toHaveBeenCalled();
     });

spec/frontend/work_items/mock_data.js

 export const workItemQueryResponse = {
-  workItem: {
-    __typename: 'WorkItem',
-    id: '1',
-    title: 'Test',
-    workItemType: {
-      __typename: 'WorkItemType',
-      id: 'work-item-type-1',
-      name: 'Task',
-    },
-    widgets: {
-      __typename: 'LocalWorkItemWidgetConnection',
-      nodes: [
-        {
-          __typename: 'LocalTitleWidget',
-          type: 'TITLE',
-          contentText: 'Test',
-        },
-      ],
+  data: {
+    workItem: {
+      __typename: 'WorkItem',
+      id: 'gid://gitlab/WorkItem/1',
+      title: 'Test',
+      workItemType: {
+        __typename: 'WorkItemType',
+        id: 'gid://gitlab/WorkItems::Type/5',
+        name: 'Task',
+      },
     },
   },
 };
@@ -24,27 +16,16 @@ export const workItemQueryResponse = {
 export const updateWorkItemMutationResponse = {
   data: {
     workItemUpdate: {
-      __typename: 'LocalUpdateWorkItemPayload',
+      __typename: 'WorkItemUpdatePayload',
       workItem: {
-        __typename: 'LocalWorkItem',
-        id: '1',
+        __typename: 'WorkItem',
+        id: 'gid://gitlab/WorkItem/1',
         title: 'Updated title',
         workItemType: {
           __typename: 'WorkItemType',
-          id: 'work-item-type-1',
+          id: 'gid://gitlab/WorkItems::Type/5',
           name: 'Task',
         },
-        widgets: {
-          __typename: 'LocalWorkItemWidgetConnection',
-          nodes: [
-            {
-              __typename: 'LocalTitleWidget',
-              type: 'TITLE',
-              enabled: true,
-              contentText: 'Updated title',
-            },
-          ],
-        },
       },
     },
   },
@@ -53,11 +34,11 @@ export const updateWorkItemMutationResponse = {
 export const projectWorkItemTypesQueryResponse = {
   data: {
     workspace: {
-      id: '1',
+      id: 'gid://gitlab/WorkItem/1',
       workItemTypes: {
         nodes: [
-          { id: 'work-item-1', name: 'Issue' },
-          { id: 'work-item-2', name: 'Incident' },
+          { id: 'gid://gitlab/WorkItems::Type/1', name: 'Issue' },
+          { id: 'gid://gitlab/WorkItems::Type/2', name: 'Incident' },
         ],
       },
     },
@@ -70,11 +51,11 @@ export const createWorkItemMutationResponse = {
       __typename: 'WorkItemCreatePayload',
       workItem: {
         __typename: 'WorkItem',
-        id: '1',
+        id: 'gid://gitlab/WorkItem/1',
         title: 'Updated title',
         workItemType: {
           __typename: 'WorkItemType',
-          id: 'work-item-type-1',
+          id: 'gid://gitlab/WorkItems::Type/5',
           name: 'Task',
         },
       },

spec/frontend/work_items/pages/create_work_item_spec.js

@@ -6,7 +6,6 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
 import ItemTitle from '~/work_items/components/item_title.vue';
-import { resolvers } from '~/work_items/graphql/resolvers';
 import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
 import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
 import createWorkItemFromTaskMutation from '~/work_items/graphql/create_work_item_from_task.mutation.graphql';
@@ -46,14 +45,11 @@ describe('Create work item component', () => {
     queryHandler = querySuccessHandler,
     mutationHandler = createWorkItemSuccessHandler,
   } = {}) => {
-    fakeApollo = createMockApollo(
-      [
-        [projectWorkItemTypesQuery, queryHandler],
-        [createWorkItemMutation, mutationHandler],
-        [createWorkItemFromTaskMutation, mutationHandler],
-      ],
-      resolvers,
-    );
+    fakeApollo = createMockApollo([
+      [projectWorkItemTypesQuery, queryHandler],
+      [createWorkItemMutation, mutationHandler],
+      [createWorkItemFromTaskMutation, mutationHandler],
+    ]);
     wrapper = shallowMount(CreateWorkItem, {
       apolloProvider: fakeApollo,
       data() {

spec/frontend/work_items/pages/work_item_detail_spec.js

@@ -16,14 +16,14 @@ describe('WorkItemDetail component', () => {
 
   Vue.use(VueApollo);
 
-  const successHandler = jest.fn().mockResolvedValue({ data: workItemQueryResponse });
+  const successHandler = jest.fn().mockResolvedValue(workItemQueryResponse);
   const initialSubscriptionHandler = jest.fn().mockResolvedValue(workItemTitleSubscriptionResponse);
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findWorkItemTitle = () => wrapper.findComponent(WorkItemTitle);
 
   const createComponent = ({
-    workItemId = workItemQueryResponse.workItem.id,
+    workItemId = workItemQueryResponse.data.workItem.id,
     handler = successHandler,
     subscriptionHandler = initialSubscriptionHandler,
   } = {}) => {
@@ -93,7 +93,7 @@ describe('WorkItemDetail component', () => {
     createComponent();
 
     expect(initialSubscriptionHandler).toHaveBeenCalledWith({
-      issuableId: workItemQueryResponse.workItem.id,
+      issuableId: workItemQueryResponse.data.workItem.id,
     });
   });
 });

spec/frontend/work_items/router_spec.js

@@ -37,7 +37,7 @@ describe('Work items router', () => {
   it('renders work item on `/1` route', async () => {
     await createComponent('/1');
 
-    expect(wrapper.find(WorkItemsRoot).exists()).toBe(true);
+    expect(wrapper.findComponent(WorkItemsRoot).exists()).toBe(true);
   });
 
   it('renders create work item page on `/new` route', async () => {