Upgraded Apollo to 3.5.10

Do that thing with the dependencies (deduplication)

Stupid peer dependencies :shakes_angry_fist:

Fixed devops adoption spec

Fixed order summary spec

Fixed add edit schedule spec

Fixed subscription activation form spec

Fixed install agent modal spec

Fixed release index app spec

Fixed devops adoption add dropdown spec

Fixed sec configuration app spec

Fixed alert settings wrapper

Fixed design management spec

Fixed release app spec

Moved console error mock

Fixed states table actions spec
Fixed oncall update query test

Added comment about console error

Fixed comment on console error

app/assets/javascripts/terraform/components/states_table_actions.vue

@@ -11,6 +11,7 @@ import {
   GlModalDirective,
 } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
+import getStatesQuery from '../graphql/queries/get_states.query.graphql';
 import addDataToState from '../graphql/mutations/add_data_to_state.mutation.graphql';
 import lockState from '../graphql/mutations/lock_state.mutation.graphql';
 import removeState from '../graphql/mutations/remove_state.mutation.graphql';
@@ -148,7 +149,7 @@ export default {
           variables: {
             stateID: this.state.id,
           },
-          refetchQueries: () => ['getStates'],
+          refetchQueries: () => [{ query: getStatesQuery }],
           awaitRefetchQueries: true,
           notifyOnNetworkStatusChange: true,
         })

ee/app/assets/javascripts/analytics/devops_reports/devops_adoption/graphql/queries/devops_adoption_enabled_namespaces.query.graphql

@@ -6,6 +6,7 @@ query devopsAdoptionEnabledNamespaces($displayNamespaceId: NamespaceID) {
     nodes {
       id
       latestSnapshot {
+        __typename
         ...LatestSnapshot
       }
       namespace {

ee/app/assets/javascripts/oncall_schedules/graphql/mutations/update_oncall_schedule.mutation.graphql

@@ -20,6 +20,11 @@ mutation oncallScheduleUpdate(
       name
       description
       timezone
+      rotations {
+        nodes {
+          id
+        }
+      }
     }
   }
 }

ee/spec/frontend/admin/subscriptions/show/components/subscription_activation_form_spec.js

@@ -12,6 +12,7 @@ import {
   subscriptionActivationForm,
 } from 'ee/admin/subscriptions/show/constants';
 import activateSubscriptionMutation from 'ee/admin/subscriptions/show/graphql/mutations/activate_subscription.mutation.graphql';
+import { stripTypenames } from 'helpers/graphql_helpers';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { stubComponent } from 'helpers/stub_component';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -197,7 +198,11 @@ describe('SubscriptionActivationForm', () => {
 
       it('emits a successful event', () => {
         expect(wrapper.emitted(SUBSCRIPTION_ACTIVATION_SUCCESS_EVENT)).toEqual([
-          [activateLicenseMutationResponse.SUCCESS.data.gitlabSubscriptionActivate.license],
+          [
+            stripTypenames(
+              activateLicenseMutationResponse.SUCCESS.data.gitlabSubscriptionActivate.license,
+            ),
+          ],
         ]);
       });
     });

ee/spec/frontend/admin/subscriptions/show/mock_data.js

@@ -142,6 +142,7 @@ export const activateLicenseMutationResponse = {
     data: {
       gitlabSubscriptionActivate: {
         license: {
+          __typename: 'CurrentLicense',
           id: 'gid://gitlab/License/3',
           type: 'cloud',
           plan: 'ultimate',

ee/spec/frontend/analytics/devops_reports/devops_adoption/components/devops_adoption_add_dropdown_spec.js

@@ -12,6 +12,7 @@ import {
 } from 'ee/analytics/devops_reports/devops_adoption/constants';
 import bulkEnableDevopsAdoptionNamespacesMutation from 'ee/analytics/devops_reports/devops_adoption/graphql/mutations/bulk_enable_devops_adoption_namespaces.mutation.graphql';
 import disableDevopsAdoptionNamespaceMutation from 'ee/analytics/devops_reports/devops_adoption/graphql/mutations/disable_devops_adoption_namespace.mutation.graphql';
+import { stripTypenames } from 'helpers/graphql_helpers';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -173,9 +174,16 @@ describe('DevopsAdoptionAddDropdown', () => {
             });
 
             it('emits the enabledNamespacesAdded event', () => {
+              const { latestSnapshot, namespace } = devopsAdoptionNamespaceData.nodes[0];
               const [params] = wrapper.emitted().enabledNamespacesAdded[0];
 
-              expect(params).toStrictEqual([devopsAdoptionNamespaceData.nodes[0]]);
+              expect(params).toStrictEqual([
+                {
+                  ...devopsAdoptionNamespaceData.nodes[0],
+                  latestSnapshot: stripTypenames(latestSnapshot),
+                  namespace: stripTypenames(namespace),
+                },
+              ]);
             });
           } else {
             it('makes a request to disable the selected group', () => {

ee/spec/frontend/analytics/devops_reports/devops_adoption/components/devops_adoption_app_spec.js

@@ -17,6 +17,7 @@ import bulkEnableDevopsAdoptionNamespacesMutation from 'ee/analytics/devops_repo
 import devopsAdoptionEnabledNamespaces from 'ee/analytics/devops_reports/devops_adoption/graphql/queries/devops_adoption_enabled_namespaces.query.graphql';
 import getGroupsQuery from 'ee/analytics/devops_reports/devops_adoption/graphql/queries/get_groups.query.graphql';
 import { addEnabledNamespacesToCache } from 'ee/analytics/devops_reports/devops_adoption/utils/cache_updates';
+import { stripTypenames } from 'helpers/graphql_helpers';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -256,10 +257,17 @@ describe('DevopsAdoptionApp', () => {
           });
 
           it('calls addEnabledNamespacesToCache with the correct variables', () => {
+            const { latestSnapshot, namespace } = devopsAdoptionNamespaceData.nodes[0];
             expect(addEnabledNamespacesToCache).toHaveBeenCalledTimes(1);
             expect(addEnabledNamespacesToCache).toHaveBeenCalledWith(
               expect.anything(),
-              [devopsAdoptionNamespaceData.nodes[0]],
+              [
+                {
+                  ...devopsAdoptionNamespaceData.nodes[0],
+                  latestSnapshot: stripTypenames(latestSnapshot),
+                  namespace: stripTypenames(namespace),
+                },
+              ],
               {
                 displayNamespaceId: groupGid,
               },

ee/spec/frontend/oncall_schedule/add_edit_schedule_modal_spec.js

@@ -67,13 +67,7 @@ describe('AddScheduleModal', () => {
     localVue.use(VueApollo);
     updateScheduleHandler = updateHandler;
 
-    const requestHandlers = [
-      [
-        getOncallSchedulesWithRotationsQuery,
-        jest.fn().mockResolvedValue(getOncallSchedulesQueryResponse),
-      ],
-      [updateOncallScheduleMutation, updateScheduleHandler],
-    ];
+    const requestHandlers = [[updateOncallScheduleMutation, updateScheduleHandler]];
 
     fakeApollo = createMockApollo(requestHandlers);
 

ee/spec/frontend/oncall_schedule/mocks/apollo_mock.js

@@ -29,6 +29,26 @@ export const participants = [
 export const errorMsg = 'Something went wrong';
 
 export const getOncallSchedulesQueryResponse = {
+  data: {
+    project: {
+      id: 'project-1',
+      incidentManagementOncallSchedules: {
+        nodes: [
+          {
+            __typename: 'IncidentManagementOncallSchedule',
+            iid: '37',
+            name: 'Test schedule from query',
+            description: 'Description 1 lives here',
+            timezone: 'America/Los_Angeles',
+            rotations: { nodes: [{ id: 'gid://gitlab/IncidentManagement::OncallRotation/2' }] },
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const getOncallSchedulesQueryResponseWithRotations = {
   data: {
     project: {
       id: 'project-1',
@@ -110,7 +130,7 @@ export const updateScheduleResponseWithErrors = {
         name: 'Test schedule 2',
         description: 'Description 2 lives here',
         timezone: 'Pacific/Honolulu',
-        rotations: { nodes: [mockRotations] },
+        rotations: { nodes: [{ id: 'gid://gitlab/IncidentManagement::OncallRotation/2' }] },
       },
     },
   },

ee/spec/frontend/oncall_schedule/oncall_schedule_spec.js

@@ -14,7 +14,7 @@ import createMockApollo from 'helpers/mock_apollo_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import * as dateTimeUtility from '~/lib/utils/datetime/date_calculation_utility';
-import { getOncallSchedulesQueryResponse } from './mocks/apollo_mock';
+import { getOncallSchedulesQueryResponseWithRotations } from './mocks/apollo_mock';
 
 Vue.use(VueApollo);
 
@@ -46,7 +46,7 @@ describe('On-call schedule', () => {
     scheduleIndex = 0,
     getShiftsForRotationsQueryHandler = jest
       .fn()
-      .mockResolvedValue(getOncallSchedulesQueryResponse),
+      .mockResolvedValue(getOncallSchedulesQueryResponseWithRotations),
     props = {},
     provide = {},
   } = {}) => {
@@ -282,8 +282,8 @@ describe('On-call schedule', () => {
       expect(findRotationsList().props('rotations')).toHaveLength(4);
 
       expect(findRotationsList().props('rotations')).toEqual(
-        getOncallSchedulesQueryResponse.data.project.incidentManagementOncallSchedules.nodes[0]
-          .rotations.nodes,
+        getOncallSchedulesQueryResponseWithRotations.data.project.incidentManagementOncallSchedules
+          .nodes[0].rotations.nodes,
       );
     });
 

ee/spec/frontend/security_configuration/sast/components/app_spec.js

@@ -8,6 +8,7 @@ import ConfigurationForm from 'ee/security_configuration/sast/components/configu
 import sastCiConfigurationQuery from 'ee/security_configuration/sast/graphql/sast_ci_configuration.query.graphql';
 import { stripTypenames } from 'helpers/graphql_helpers';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { sastCiConfigurationQueryResponse } from '../mock_data';
 
@@ -118,6 +119,7 @@ describe('SAST Configuration App', () => {
       createComponent({
         apolloProvider: createMockApolloProvider(failureHandler),
       });
+      return waitForPromises();
     });
 
     it('does not display a loading spinner', () => {

ee/spec/frontend/subscriptions/buy_addons_shared/components/order_summary_spec.js

-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -154,18 +154,15 @@ describe('Order Summary', () => {
           orderPreviewQueryMock,
         );
         createComponent(apolloProvider, { purchaseHasExpiration: true });
+        return waitForPromises();
       });
 
       it('does not render amount', () => {
         expect(findAmount().text()).toBe('-');
       });
 
-      it('should emit `alertError` event', async () => {
-        jest.spyOn(wrapper.vm, '$emit');
-
-        await nextTick();
-
-        expect(wrapper.vm.$emit).toHaveBeenCalledWith('alertError', I18N_API_ERROR);
+      it('should emit `alertError` event', () => {
+        expect(wrapper.emitted('alertError')).toEqual([[I18N_API_ERROR]]);
       });
     });
 

package.json

@@ -47,7 +47,7 @@
     "webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.11",
+    "@apollo/client": "^3.5.10",
     "@babel/core": "^7.10.1",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/plugin-proposal-json-strings": "^7.10.1",
@@ -95,7 +95,7 @@
     "@tiptap/vue-2": "^2.0.0-beta.77",
     "@toast-ui/editor": "^2.5.2",
     "@toast-ui/vue-editor": "^2.5.2",
-    "apollo-upload-client": "^14.1.3",
+    "apollo-upload-client": "15.0.0",
     "autosize": "^5.0.1",
     "aws-sdk": "^2.637.0",
     "axios": "^0.24.0",
@@ -259,7 +259,6 @@
     "bootstrap-vue": "https://docs.gitlab.com/ee/development/fe_guide/dependencies.html#bootstrapvue"
   },
   "resolutions": {
-    "@apollo/client/subscriptions-transport-ws": "0.11.0",
     "chokidar": "^3.5.3",
     "@types/node": "14.17.5"
   },

spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js

@@ -476,9 +476,6 @@ describe('AlertsSettingsWrapper', () => {
       destroyHttpIntegration(wrapper);
 
       expect(destroyIntegrationHandler).toHaveBeenCalled();
-      await waitForPromises();
-
-      expect(findIntegrations()).toHaveLength(3);
     });
 
     it('displays flash if mutation had a recoverable error', async () => {

spec/frontend/alerts_settings/components/mocks/apollo_mock.js

@@ -102,7 +102,7 @@ export const destroyIntegrationResponse = {
     httpIntegrationDestroy: {
       errors: [],
       integration: {
-        __typename: 'AlertManagementIntegration',
+        __typename: 'AlertManagementHttpIntegration',
         id: '37',
         type: 'HTTP',
         active: true,

spec/frontend/clusters_list/mocks/apollo.js

 const agent = {
+  __typename: 'ClusterAgent',
   id: 'agent-id',
   name: 'agent-name',
   webPath: 'agent-webPath',

spec/frontend/design_management/pages/index_spec.js

@@ -183,7 +183,7 @@ describe('Design management index page', () => {
       [moveDesignMutation, moveDesignHandler],
     ];
 
-    fakeApollo = createMockApollo(requestHandlers);
+    fakeApollo = createMockApollo(requestHandlers, {}, { addTypename: true });
     wrapper = shallowMount(Index, {
       apolloProvider: fakeApollo,
       router,

spec/frontend/releases/components/app_index_spec.js

@@ -150,7 +150,8 @@ describe('app_index.vue', () => {
           expect(findEmptyState().exists()).toBe(emptyState);
         });
 
-        it(`${toDescription(flashMessage)} show a flash message`, () => {
+        it(`${toDescription(flashMessage)} show a flash message`, async () => {
+          await waitForPromises();
           if (flashMessage) {
             expect(createFlash).toHaveBeenCalledWith({
               message: ReleasesIndexApp.i18n.errorMessage,

spec/frontend/releases/components/app_show_spec.js

@@ -143,6 +143,12 @@ describe('Release show component', () => {
 
   describe('when the request succeeded, but the returned "project.release" key was null', () => {
     beforeEach(async () => {
+      // As we return a release as `null`, Apollo also throws an error to the console
+      // about the missing field. We need to suppress console.error in order to check
+      // that flash message was called
+
+      // eslint-disable-next-line no-console
+      console.error = jest.fn();
       const apolloProvider = createMockApollo([
         [
           oneReleaseQuery,

spec/frontend/terraform/components/mock_data.js

+export const getStatesResponse = {
+  data: {
+    project: {
+      id: 'project-1',
+      terraformStates: {
+        count: 1,
+        nodes: {
+          _showDetails: true,
+          errorMessages: [],
+          loadingLock: false,
+          loadingRemove: false,
+          id: 'state-1',
+          name: 'state',
+          lockedAt: '01-01-2022',
+          updatedAt: '01-01-2022',
+          lockedByUser: {
+            id: 'user-1',
+            avatarUrl: 'avatar',
+            name: 'User 1',
+            username: 'user-1',
+            webUrl: 'web',
+          },
+          latestVersion: null,
+        },
+        pageInfo: {
+          __typename: 'PageInfo',
+          hasNextPage: true,
+          hasPreviousPage: false,
+          startCursor: 'prev',
+          endCursor: 'next',
+        },
+      },
+    },
+  },
+};

spec/frontend/terraform/components/states_table_actions_spec.js

@@ -9,6 +9,8 @@ import StateActions from '~/terraform/components/states_table_actions.vue';
 import lockStateMutation from '~/terraform/graphql/mutations/lock_state.mutation.graphql';
 import removeStateMutation from '~/terraform/graphql/mutations/remove_state.mutation.graphql';
 import unlockStateMutation from '~/terraform/graphql/mutations/unlock_state.mutation.graphql';
+import getStatesQuery from '~/terraform/graphql/queries/get_states.query.graphql';
+import { getStatesResponse } from './mock_data';
 
 Vue.use(VueApollo);
 
@@ -49,6 +51,7 @@ describe('StatesTableActions', () => {
         [lockStateMutation, lockResponse],
         [removeStateMutation, removeResponse],
         [unlockStateMutation, unlockResponse],
+        [getStatesQuery, jest.fn().mockResolvedValue(getStatesResponse)],
       ],
       {
         Mutation: {