Group-level "DevOps Adoption" - Sync graphql variables

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_app.vue

@@ -22,7 +22,7 @@ import {
 import bulkFindOrCreateDevopsAdoptionSegmentsMutation from '../graphql/mutations/bulk_find_or_create_devops_adoption_segments.mutation.graphql';
 import devopsAdoptionSegmentsQuery from '../graphql/queries/devops_adoption_segments.query.graphql';
 import getGroupsQuery from '../graphql/queries/get_groups.query.graphql';
-import { addSegmentsToCache } from '../utils/cache_updates';
+import { addSegmentsToCache, deleteSegmentsFromCache } from '../utils/cache_updates';
 import { shouldPollTableData } from '../utils/helpers';
 import DevopsAdoptionEmptyState from './devops_adoption_empty_state.vue';
 import DevopsAdoptionSegmentModal from './devops_adoption_segment_modal.vue';
@@ -74,7 +74,7 @@ export default {
         pageInfo: null,
       },
       pollingTableData: null,
-      variables: this.isGroup
+      segmentsQueryVariables: this.isGroup
         ? {
             parentNamespaceId: this.groupGid,
             directDescendantsOnly: false,
@@ -86,7 +86,7 @@ export default {
     devopsAdoptionSegments: {
       query: devopsAdoptionSegmentsQuery,
       variables() {
-        return this.variables;
+        return this.segmentsQueryVariables;
       },
       result({ data }) {
         if (this.isGroup) {
@@ -166,7 +166,7 @@ export default {
             if (errors.length) {
               this.handleError(DEVOPS_ADOPTION_ERROR_KEYS.addSegment, errors);
             } else {
-              addSegmentsToCache(store, segments, this.variables);
+              this.addSegmentsToCache(segments);
             }
           },
         })
@@ -232,6 +232,16 @@ export default {
     clearSelectedSegment() {
       this.selectedSegment = null;
     },
+    addSegmentsToCache(segments) {
+      const { cache } = this.$apollo.getClient();
+
+      addSegmentsToCache(cache, segments, this.segmentsQueryVariables);
+    },
+    deleteSegmentsFromCache(ids) {
+      const { cache } = this.$apollo.getClient();
+
+      deleteSegmentsFromCache(cache, ids, this.segmentsQueryVariables);
+    },
   },
 };
 </script>
@@ -250,6 +260,8 @@ export default {
       :key="modalKey"
       :groups="groups.nodes"
       :enabled-groups="devopsAdoptionSegments.nodes"
+      @segmentsAdded="addSegmentsToCache"
+      @segmentsRemoved="deleteSegmentsFromCache"
       @trackModalOpenState="trackModalOpenState"
     />
     <div v-if="hasSegmentsData" class="gl-mt-3">
@@ -279,6 +291,7 @@ export default {
         :segments="devopsAdoptionSegments.nodes"
         :selected-segment="selectedSegment"
         @set-selected-segment="setSelectedSegment"
+        @segmentsRemoved="deleteSegmentsFromCache"
         @trackModalOpenState="trackModalOpenState"
       />
     </div>

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_delete_modal.vue

@@ -3,7 +3,6 @@ import { GlModal, GlSprintf, GlAlert } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { DEVOPS_ADOPTION_STRINGS, DEVOPS_ADOPTION_SEGMENT_DELETE_MODAL_ID } from '../constants';
 import deleteDevopsAdoptionSegmentMutation from '../graphql/mutations/delete_devops_adoption_segment.mutation.graphql';
-import { deleteSegmentsFromCache } from '../utils/cache_updates';
 
 export default {
   name: 'DevopsAdoptionDeleteModal',
@@ -65,8 +64,8 @@ export default {
           variables: {
             id: [id],
           },
-          update(store) {
-            deleteSegmentsFromCache(store, [id]);
+          update: () => {
+            this.$emit('segmentsRemoved', [id]);
           },
         });
 

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_segment_modal.vue

@@ -10,7 +10,6 @@ import {
 } from '../constants';
 import bulkFindOrCreateDevopsAdoptionSegmentsMutation from '../graphql/mutations/bulk_find_or_create_devops_adoption_segments.mutation.graphql';
 import deleteDevopsAdoptionSegmentMutation from '../graphql/mutations/delete_devops_adoption_segment.mutation.graphql';
-import { addSegmentsToCache, deleteSegmentsFromCache } from '../utils/cache_updates';
 
 export default {
   name: 'DevopsAdoptionSegmentModal',
@@ -26,6 +25,9 @@ export default {
     isGroup: {
       default: false,
     },
+    groupGid: {
+      default: null,
+    },
   },
   props: {
     groups: {
@@ -139,7 +141,7 @@ export default {
                 bulkFindOrCreateDevopsAdoptionSegments: { segments, errors: requestErrors },
               } = data;
 
-              if (!requestErrors.length) addSegmentsToCache(store, segments);
+              if (!requestErrors.length) this.$emit('segmentsAdded', segments);
             },
           });
 
@@ -157,7 +159,11 @@ export default {
     async deleteMissingGroups() {
       try {
         const removedGroupGids = this.enabledGroups
-          .filter((group) => !this.checkboxValues.includes(getIdFromGraphQLId(group.namespace.id)))
+          .filter(
+            (group) =>
+              !this.checkboxValues.includes(getIdFromGraphQLId(group.namespace.id)) &&
+              group.namespace.id !== this.groupGid,
+          )
           .map((group) => group.id);
 
         if (removedGroupGids.length) {
@@ -177,7 +183,7 @@ export default {
                 deleteDevopsAdoptionSegment: { errors: requestErrors },
               } = data;
 
-              if (!requestErrors.length) deleteSegmentsFromCache(store, removedGroupGids);
+              if (!requestErrors.length) this.$emit('segmentsRemoved', removedGroupGids);
             },
           });
 
@@ -199,7 +205,6 @@ export default {
       this.$refs.modal.hide();
     },
     resetForm() {
-      this.checkboxValues = [];
       this.filter = '';
       this.$emit('trackModalOpenState', false);
     },

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_table.vue

@@ -253,6 +253,7 @@ export default {
     <devops-adoption-delete-modal
       v-if="selectedSegment"
       :segment="selectedSegment"
+      @segmentsRemoved="$emit('segmentsRemoved', $event)"
       @trackModalOpenState="$emit('trackModalOpenState', $event)"
     />
   </div>

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/graphql/queries/devops_adoption_segments.query.graphql

-query($parentNamespaceId: NamespaceID, $directDescendantsOnly: Boolean) {
+query devopsAdoptionSegments($parentNamespaceId: NamespaceID, $directDescendantsOnly: Boolean) {
   devopsAdoptionSegments(
     parentNamespaceId: $parentNamespaceId
     directDescendantsOnly: $directDescendantsOnly

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/utils/cache_updates.js

@@ -21,9 +21,10 @@ export const addSegmentsToCache = (store, segments, variables) => {
   });
 };
 
-export const deleteSegmentsFromCache = (store, segmentIds) => {
+export const deleteSegmentsFromCache = (store, segmentIds, variables) => {
   const sourceData = store.readQuery({
     query: devopsAdoptionSegmentsQuery,
+    variables,
   });
 
   const updatedData = produce(sourceData, (draftData) => {
@@ -34,6 +35,7 @@ export const deleteSegmentsFromCache = (store, segmentIds) => {
 
   store.writeQuery({
     query: devopsAdoptionSegmentsQuery,
+    variables,
     data: updatedData,
   });
 };

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

@@ -515,7 +515,18 @@ describe('DevopsAdoptionApp', () => {
                 namespaceIds: [groupGid],
               }),
             );
+          });
+
+          it('calls addSegmentsToCache with the correct variables', () => {
             expect(addSegmentsToCache).toHaveBeenCalledTimes(1);
+            expect(addSegmentsToCache).toHaveBeenCalledWith(
+              expect.anything(),
+              [devopsAdoptionSegmentsData.nodes[0]],
+              {
+                parentNamespaceId: groupGid,
+                directDescendantsOnly: false,
+              },
+            );
           });
 
           describe('error handling', () => {

ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_delete_modal_spec.js

 import { GlModal, GlSprintf, GlAlert } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
-import { shallowMount } from '@vue/test-utils';
-import { ApolloMutation } from 'vue-apollo';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import DevopsAdoptionDeleteModal from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_delete_modal.vue';
 import { DEVOPS_ADOPTION_SEGMENT_DELETE_MODAL_ID } from 'ee/analytics/devops_report/devops_adoption/constants';
+import deleteDevopsAdoptionSegmentMutation from 'ee/analytics/devops_report/devops_adoption/graphql/mutations/delete_devops_adoption_segment.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
   genericDeleteErrorMessage,
@@ -11,6 +14,9 @@ import {
   devopsAdoptionSegmentsData,
 } from '../mock_data';
 
+const localVue = createLocalVue();
+Vue.use(VueApollo);
+
 const mockEvent = { preventDefault: jest.fn() };
 const mutate = jest.fn().mockResolvedValue({
   data: {
@@ -32,21 +38,18 @@ const mutateWithErrors = jest.fn().mockRejectedValue(genericDeleteErrorMessage);
 describe('DevopsAdoptionDeleteModal', () => {
   let wrapper;
 
-  const createComponent = ({ mutationMock = mutate } = {}) => {
-    const $apollo = {
-      mutate: mutationMock,
-    };
+  const createComponent = ({ deleteSegmentsSpy = mutate, props = {} } = {}) => {
+    const mockApollo = createMockApollo([[deleteDevopsAdoptionSegmentMutation, deleteSegmentsSpy]]);
 
     wrapper = shallowMount(DevopsAdoptionDeleteModal, {
+      localVue,
+      apolloProvider: mockApollo,
       propsData: {
         segment: devopsAdoptionSegmentsData.nodes[0],
+        ...props,
       },
       stubs: {
         GlSprintf,
-        ApolloMutation,
-      },
-      mocks: {
-        $apollo,
       },
     });
   };
@@ -99,7 +102,7 @@ describe('DevopsAdoptionDeleteModal', () => {
 
   describe('submitting the form', () => {
     describe('while waiting for the mutation', () => {
-      beforeEach(() => createComponent({ mutationMock: mutateLoading }));
+      beforeEach(() => createComponent({ deleteSegmentsSpy: mutateLoading }));
 
       it('disables the cancel button', async () => {
         expect(cancelButtonDisabledState()).toBe(false);
@@ -132,13 +135,15 @@ describe('DevopsAdoptionDeleteModal', () => {
       });
 
       it('submits the correct request variables', () => {
-        expect(mutate).toHaveBeenCalledWith(
-          expect.objectContaining({
-            variables: {
-              id: [devopsAdoptionSegmentsData.nodes[0].id],
-            },
-          }),
-        );
+        expect(mutate).toHaveBeenCalledWith({
+          id: [devopsAdoptionSegmentsData.nodes[0].id],
+        });
+      });
+
+      it('emits segmentsRemoved with the correct variables', () => {
+        const [params] = wrapper.emitted().segmentsRemoved[0];
+
+        expect(params).toStrictEqual([devopsAdoptionSegmentsData.nodes[0].id]);
       });
 
       it('closes the modal after a successful mutation', () => {
@@ -154,7 +159,7 @@ describe('DevopsAdoptionDeleteModal', () => {
       `(
         'displays a $errorType error if the mutation has a $errorLocation error',
         async ({ mutationSpy, message }) => {
-          createComponent({ mutationMock: mutationSpy });
+          createComponent({ deleteSegmentsSpy: mutationSpy });
 
           findModal().vm.$emit('primary', mockEvent);
 
@@ -171,13 +176,15 @@ describe('DevopsAdoptionDeleteModal', () => {
       it('calls sentry on top level error', async () => {
         jest.spyOn(Sentry, 'captureException');
 
-        createComponent({ mutationMock: mutateWithErrors });
+        createComponent({ deleteSegmentsSpy: mutateWithErrors });
 
         findModal().vm.$emit('primary', mockEvent);
 
         await waitForPromises();
 
-        expect(Sentry.captureException.mock.calls[0][0]).toBe(genericDeleteErrorMessage);
+        expect(Sentry.captureException.mock.calls[0][0].networkError).toBe(
+          genericDeleteErrorMessage,
+        );
       });
     });
   });

ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_segment_modal_spec.js

 import { GlModal, GlFormInput, GlSprintf, GlAlert, GlIcon } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { ApolloMutation } from 'vue-apollo';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
 import DevopsAdoptionSegmentModal from 'ee/analytics/devops_report/devops_adoption/components/devops_adoption_segment_modal.vue';
 import { DEVOPS_ADOPTION_SEGMENT_MODAL_ID } from 'ee/analytics/devops_report/devops_adoption/constants';
+import bulkFindOrCreateDevopsAdoptionSegmentsMutation from 'ee/analytics/devops_report/devops_adoption/graphql/mutations/bulk_find_or_create_devops_adoption_segments.mutation.graphql';
+import deleteDevopsAdoptionSegmentMutation from 'ee/analytics/devops_report/devops_adoption/graphql/mutations/delete_devops_adoption_segment.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
   groupNodes,
@@ -16,13 +19,18 @@ import {
   devopsAdoptionSegmentsData,
 } from '../mock_data';
 
+const localVue = createLocalVue();
+Vue.use(VueApollo);
+
 const mockEvent = { preventDefault: jest.fn() };
 const mutate = jest.fn().mockResolvedValue({
   data: {
     bulkFindOrCreateDevopsAdoptionSegments: {
+      segments: [devopsAdoptionSegmentsData.nodes[0]],
       errors: [],
     },
     deleteDevopsAdoptionSegment: {
+      segments: [devopsAdoptionSegmentsData.nodes[0]],
       errors: [],
     },
   },
@@ -31,9 +39,11 @@ const mutateWithDataErrors = jest.fn().mockResolvedValue({
   data: {
     bulkFindOrCreateDevopsAdoptionSegments: {
       errors: [dataErrorMessage],
+      segments: [],
     },
     deleteDevopsAdoptionSegment: {
-      errors: [],
+      errors: [dataErrorMessage],
+      segments: [],
     },
   },
 });
@@ -43,12 +53,20 @@ const mutateWithErrors = jest.fn().mockRejectedValue(genericErrorMessage);
 describe('DevopsAdoptionSegmentModal', () => {
   let wrapper;
 
-  const createComponent = ({ mutationMock = mutate, props = {}, provide = {} } = {}) => {
-    const $apollo = {
-      mutate: mutationMock,
-    };
+  const createComponent = ({
+    deleteSegmentsSpy = mutate,
+    addSegmentsSpy = mutate,
+    props = {},
+    provide = {},
+  } = {}) => {
+    const mockApollo = createMockApollo([
+      [deleteDevopsAdoptionSegmentMutation, deleteSegmentsSpy],
+      [bulkFindOrCreateDevopsAdoptionSegmentsMutation, addSegmentsSpy],
+    ]);
 
     wrapper = shallowMount(DevopsAdoptionSegmentModal, {
+      localVue,
+      apolloProvider: mockApollo,
       propsData: {
         groups: groupNodes,
         ...props,
@@ -56,12 +74,10 @@ describe('DevopsAdoptionSegmentModal', () => {
       provide,
       stubs: {
         GlSprintf,
-        ApolloMutation,
-      },
-      mocks: {
-        $apollo,
       },
     });
+
+    wrapper.vm.$refs.modal.hide = jest.fn();
   };
 
   const findModal = () => wrapper.find(GlModal);
@@ -274,49 +290,48 @@ describe('DevopsAdoptionSegmentModal', () => {
       `(
         '$action groups',
         ({ enabledGroups, newGroups, expectedAddGroupGids, expectedDeleteIds }) => {
-          describe('successful submission', () => {
-            beforeEach(async () => {
-              createComponent({ props: { enabledGroups } });
+          beforeEach(async () => {
+            createComponent({ props: { enabledGroups } });
 
-              wrapper.setData(newGroups);
+            wrapper.setData(newGroups);
 
-              wrapper.vm.$refs.modal.hide = jest.fn();
+            findModal().vm.$emit('primary', mockEvent);
 
-              findModal().vm.$emit('primary', mockEvent);
+            await waitForPromises();
+          });
 
-              await waitForPromises();
+          if (expectedAddGroupGids.length) {
+            it('submits the correct add request variables', () => {
+              expect(mutate).toHaveBeenCalledWith({ namespaceIds: expectedAddGroupGids });
             });
 
-            if (expectedAddGroupGids.length) {
-              it('submits the correct add request variables', () => {
-                expect(mutate).toHaveBeenCalledWith(
-                  expect.objectContaining({
-                    variables: { namespaceIds: expectedAddGroupGids },
-                  }),
-                );
-              });
-            }
-
-            if (expectedDeleteIds.length) {
-              it('submits the correct delete request variables', () => {
-                expect(mutate).toHaveBeenCalledWith(
-                  expect.objectContaining({
-                    variables: { id: expectedDeleteIds },
-                  }),
-                );
-              });
-            }
-
-            it('closes the modal after a successful mutation', () => {
-              expect(wrapper.vm.$refs.modal.hide).toHaveBeenCalled();
+            it('emits segmentsAdded with the correct variables', () => {
+              const [params] = wrapper.emitted().segmentsAdded[0];
+
+              expect(params).toStrictEqual([devopsAdoptionSegmentsData.nodes[0]]);
+            });
+          }
+
+          if (expectedDeleteIds.length) {
+            it('submits the correct delete request variables', () => {
+              expect(mutate).toHaveBeenCalledWith({ id: expectedDeleteIds });
             });
 
-            it('resets the form fields', () => {
-              findModal().vm.$emit('hidden');
+            it('emits segmentsRemoved with the correct variables', () => {
+              const [params] = wrapper.emitted().segmentsRemoved[0];
 
-              expect(wrapper.vm.checkboxValues).toEqual([]);
-              expect(wrapper.vm.filter).toBe('');
+              expect(params).toStrictEqual(firstGroupId);
             });
+          }
+
+          it('closes the modal after a successful mutation', () => {
+            expect(wrapper.vm.$refs.modal.hide).toHaveBeenCalled();
+          });
+
+          it('resets the filter', () => {
+            findModal().vm.$emit('hidden');
+
+            expect(wrapper.vm.filter).toBe('');
           });
         },
       );
@@ -329,7 +344,7 @@ describe('DevopsAdoptionSegmentModal', () => {
         `(
           'displays a $errorType error if the mutation has a $errorLocation error',
           async ({ mutationSpy, message }) => {
-            createComponent({ mutationMock: mutationSpy });
+            createComponent({ addSegmentsSpy: mutationSpy, deleteSegmentsSpy: mutationSpy });
 
             wrapper.setData(enableFirstGroup);
 
@@ -348,7 +363,10 @@ describe('DevopsAdoptionSegmentModal', () => {
         it('calls sentry on top level error', async () => {
           const captureException = jest.spyOn(Sentry, 'captureException');
 
-          createComponent({ mutationMock: mutateWithErrors });
+          createComponent({
+            addSegmentsSpy: mutateWithErrors,
+            deleteSegmentsSpy: mutateWithErrors,
+          });
 
           wrapper.setData(enableFirstGroup);
 
@@ -356,7 +374,7 @@ describe('DevopsAdoptionSegmentModal', () => {
 
           await waitForPromises();
 
-          expect(captureException).toHaveBeenCalledWith(genericErrorMessage);
+          expect(captureException.mock.calls[0][0].networkError).toBe(genericErrorMessage);
         });
       });
     });