Merge branch '356578-upgrade-apollo-client-to-3-5-x' into 'master'

Resolve "Upgrade Apollo Client to 3.5.x"

See merge request gitlab-org/gitlab!83438

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: {