Merge branch '271247-fe-devops-report-segment-modal' into 'master'

Update client cache after adding segment

See merge request gitlab-org/gitlab!49103

ee/app/assets/javascripts/admin/dev_ops_report/components/devops_adoption_segment_modal.vue

@@ -11,6 +11,7 @@ import { convertToGraphQLIds, TYPE_GROUP } from '~/graphql_shared/utils';
 import * as Sentry from '~/sentry/wrapper';
 import createDevopsAdoptionSegmentMutation from '../graphql/mutations/create_devops_adoption_segment.mutation.graphql';
 import { DEVOPS_ADOPTION_STRINGS, DEVOPS_ADOPTION_SEGMENT_MODAL_ID } from '../constants';
+import { addSegmentToCache } from '../utils/cache_updates';
 
 export default {
   name: 'DevopsAdoptionSegmentModal',
@@ -85,6 +86,13 @@ export default {
             name: this.name,
             groupIds: convertToGraphQLIds(TYPE_GROUP, this.checkboxValues),
           },
+          update: (store, { data }) => {
+            const {
+              createDevopsAdoptionSegment: { segment, errors: requestErrors },
+            } = data;
+
+            if (!requestErrors.length) addSegmentToCache(store, segment);
+          },
         });
 
         if (errors.length) {

ee/app/assets/javascripts/admin/dev_ops_report/graphql/mutations/create_devops_adoption_segment.mutation.graphql

@@ -6,6 +6,16 @@ mutation($name: String!, $groupIds: [GroupID!]!) {
       groups {
         id
       }
+      latestSnapshot {
+        issueOpened
+        mergeRequestOpened
+        mergeRequestApproved
+        runnerConfigured
+        pipelineSucceeded
+        deploySucceeded
+        securityScanSucceeded
+        recordedAt
+      }
     }
     errors
   }

ee/app/assets/javascripts/admin/dev_ops_report/utils/cache_updates.js

+import produce from 'immer';
+import devopsAdoptionSegmentsQuery from '../graphql/queries/devops_adoption_segments.query.graphql';
+
+export const addSegmentToCache = (store, segment) => {
+  const sourceData = store.readQuery({
+    query: devopsAdoptionSegmentsQuery,
+  });
+
+  const data = produce(sourceData, draftData => {
+    // eslint-disable-next-line no-param-reassign
+    draftData.devopsAdoptionSegments.nodes = [...draftData.devopsAdoptionSegments.nodes, segment];
+  });
+
+  store.writeQuery({
+    query: devopsAdoptionSegmentsQuery,
+    data,
+  });
+};
+
+export const deleteSegmentFromCache = (store, segmentId) => {
+  const sourceData = store.readQuery({
+    query: devopsAdoptionSegmentsQuery,
+  });
+
+  const updatedData = produce(sourceData, draftData => {
+    // eslint-disable-next-line no-param-reassign
+    draftData.devopsAdoptionSegments.nodes = draftData.devopsAdoptionSegments.nodes.filter(
+      ({ id }) => id !== segmentId,
+    );
+  });
+
+  store.writeQuery({
+    query: devopsAdoptionSegmentsQuery,
+    data: updatedData,
+  });
+};

ee/spec/frontend/admin/dev_ops_report/utils/cache_updates_spec.js

+import {
+  deleteSegmentFromCache,
+  addSegmentToCache,
+} from 'ee/admin/dev_ops_report/utils/cache_updates';
+import { devopsAdoptionSegmentsData } from '../mock_data';
+
+describe('addSegmentToCache', () => {
+  const store = {
+    readQuery: jest.fn(() => ({ devopsAdoptionSegments: { nodes: [] } })),
+    writeQuery: jest.fn(),
+  };
+
+  it('calls writeQuery with the correct response', () => {
+    addSegmentToCache(store, devopsAdoptionSegmentsData.nodes[0]);
+
+    expect(store.writeQuery).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: {
+          devopsAdoptionSegments: {
+            nodes: devopsAdoptionSegmentsData.nodes,
+          },
+        },
+      }),
+    );
+  });
+});
+
+describe('deleteSegmentFromCache', () => {
+  const store = {
+    readQuery: jest.fn(() => ({ devopsAdoptionSegments: devopsAdoptionSegmentsData })),
+    writeQuery: jest.fn(),
+  };
+
+  it('calls writeQuery with the correct response', () => {
+    // Remove the item at the first index
+    deleteSegmentFromCache(store, devopsAdoptionSegmentsData.nodes[0].id);
+
+    expect(store.writeQuery).toHaveBeenCalledWith(
+      expect.not.objectContaining({
+        data: {
+          devopsAdoptionSegments: {
+            __typename: 'devopsAdoptionSegments',
+            nodes: devopsAdoptionSegmentsData.nodes,
+          },
+        },
+      }),
+    );
+    expect(store.writeQuery).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: {
+          devopsAdoptionSegments: {
+            __typename: 'devopsAdoptionSegments',
+            // Remove the item at the first index
+            nodes: devopsAdoptionSegmentsData.nodes.slice(1),
+          },
+        },
+      }),
+    );
+  });
+});