Feat(oncallschedule): allow for Oncall rotation deletion

Hook the frontend for oncall deletions up
to the backend and activating the Apollo cache
allowing users to delete rotations

config/known_invalid_graphql_queries.yml

@@ -2,4 +2,3 @@
 filenames:
   - ee/app/assets/javascripts/on_demand_scans/graphql/dast_scan_create.mutation.graphql
   - ee/app/assets/javascripts/oncall_schedules/graphql/mutations/update_oncall_schedule_rotation.mutation.graphql
-  - ee/app/assets/javascripts/oncall_schedules/graphql/mutations/destroy_oncall_rotation.mutation.graphql

ee/app/assets/javascripts/oncall_schedules/components/oncall_schedule.vue

@@ -173,6 +173,7 @@ export default {
             :preset-type="presetType"
             :rotations="rotations"
             :timeframe="timeframe"
+            :schedule-iid="schedule.iid"
           />
         </div>
       </gl-card>

ee/app/assets/javascripts/oncall_schedules/components/rotations/components/delete_rotation_modal.vue

@@ -29,6 +29,10 @@ export default {
       validator: (rotation) =>
         isEmpty(rotation) || [rotation.id, rotation.name, rotation.startsAt].every(Boolean),
     },
+    scheduleIid: {
+      type: String,
+      required: true,
+    },
     modalId: {
       type: String,
       required: true,
@@ -61,6 +65,7 @@ export default {
       const {
         projectPath,
         rotation: { id },
+        scheduleIid,
       } = this;
 
       this.loading = true;
@@ -68,11 +73,19 @@ export default {
         .mutate({
           mutation: destroyOncallRotationMutation,
           variables: {
-            iid: id,
+            id,
+            scheduleIid,
             projectPath,
           },
           update(store, { data }) {
-            updateStoreAfterRotationDelete(store, getOncallSchedulesQuery, data, { projectPath });
+            updateStoreAfterRotationDelete(
+              store,
+              getOncallSchedulesQuery,
+              { ...data, scheduleIid },
+              {
+                projectPath,
+              },
+            );
           },
         })
         .then(({ data: { oncallRotationDestroy } = {} } = {}) => {

ee/app/assets/javascripts/oncall_schedules/components/schedule/components/rotations_list_section.vue

@@ -44,6 +44,10 @@ export default {
       type: Array,
       required: true,
     },
+    scheduleIid: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -131,6 +135,7 @@ export default {
     <delete-rotation-modal
       :rotation="rotationToUpdate"
       :modal-id="$options.deleteRotationModalId"
+      :schedule-iid="scheduleIid"
       @set-rotation-to-update="setRotationToUpdate"
     />
   </div>

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

 #import "../fragments/oncall_schedule_rotation.fragment.graphql"
 
-mutation oncallRotationDestroy($iid: String!, $projectPath: ID!) {
-  oncallRotationDestroy(input: { iid: $iid, projectPath: $projectPath }) {
+mutation oncallRotationDestroy(
+  $id: IncidentManagementOncallRotationID!
+  $scheduleIid: String!
+  $projectPath: ID!
+) {
+  oncallRotationDestroy(input: { id: $id, scheduleIid: $scheduleIid, projectPath: $projectPath }) {
     errors
     oncallRotation {
       ...OnCallRotation

ee/app/assets/javascripts/oncall_schedules/utils/cache_updates.js

@@ -139,7 +139,12 @@ const updateRotationFromStore = (store, query, { oncallRotationUpdate }, schedul
   });
 };
 
-const deleteRotationFromStore = (store, query, { oncallRotationDestroy }, variables) => {
+const deleteRotationFromStore = (
+  store,
+  query,
+  { oncallRotationDestroy, scheduleIid },
+  variables,
+) => {
   const rotation = oncallRotationDestroy?.oncallRotation;
   if (!rotation) {
     return;
@@ -150,12 +155,16 @@ const deleteRotationFromStore = (store, query, { oncallRotationDestroy }, variab
     variables,
   });
 
-  // TODO: This needs the rotation backend to be fully integrated to work, for the moment we will place-hold it. https://gitlab.com/gitlab-org/gitlab/-/issues/262863
   const data = produce(sourceData, (draftData) => {
-    // eslint-disable-next-line no-param-reassign
-    draftData.project.incidentManagementOncallSchedules.nodes[0].rotations = [rotation].filter(
-      ({ id }) => id !== rotation.id,
+    const scheduleToUpdate = draftData.project.incidentManagementOncallSchedules.nodes.find(
+      ({ iid }) => iid === scheduleIid,
     );
+    const updatedRotations = scheduleToUpdate.rotations?.filter(({ id }) => id !== rotation.id);
+
+    // eslint-disable-next-line no-param-reassign
+    draftData.project.incidentManagementOncallSchedules.nodes.find(
+      ({ iid }) => iid === scheduleIid,
+    ).rotations = updatedRotations;
   });
 
   store.writeQuery({

ee/spec/frontend/oncall_schedule/__snapshots__/add_edit_schedule_form_spec.js.snap

@@ -14,7 +14,7 @@ exports[`AddEditScheduleForm renders modal layout 1`] = `
   >
     <gl-form-input-stub
       id="schedule-name"
-      value="Test schedule"
+      value="Test schedule from query"
     />
   </gl-form-group-stub>
    

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

 import mockRotations from './mock_rotation.json';
 
+export const scheduleIid = '37';
+
 export const participants = [
   {
     id: '1',
@@ -16,6 +18,7 @@ export const participants = [
     avatarUrl: '',
   },
 ];
+
 export const errorMsg = 'Something went wrong';
 
 export const getOncallSchedulesQueryResponse = {
@@ -26,11 +29,12 @@ export const getOncallSchedulesQueryResponse = {
           {
             __typename: 'IncidentManagementOncallSchedule',
             iid: '37',
-            name: 'Test schedule',
+            name: 'Test schedule from query',
             description: 'Description 1 lives here',
             timezone: {
               identifier: 'Pacific/Honolulu',
             },
+            rotations: mockRotations,
           },
         ],
       },

ee/spec/frontend/oncall_schedule/oncall_schedule_spec.js

@@ -90,6 +90,7 @@ describe('On-call schedule', () => {
       presetType: PRESET_TYPES.WEEKS,
       timeframe: mockWeeksTimeFrame,
       rotations: expect.any(Array),
+      scheduleIid: mockSchedule.iid,
     });
   });
 });

ee/spec/frontend/oncall_schedule/rotations/components/delete_rotation_modal_spec.js

@@ -13,6 +13,7 @@ import {
   getOncallSchedulesQueryResponse,
   destroyRotationResponse,
   destroyRotationResponseWithErrors,
+  scheduleIid,
 } from '../../mocks/apollo_mock';
 import mockRotations from '../../mocks/mock_rotation.json';
 
@@ -50,6 +51,7 @@ describe('DeleteRotationModal', () => {
       },
       propsData: {
         modalId: deleteRotationModalId,
+        scheduleIid,
         rotation,
         ...props,
       },
@@ -93,6 +95,7 @@ describe('DeleteRotationModal', () => {
       propsData: {
         rotation,
         modalId: deleteRotationModalId,
+        scheduleIid,
       },
       provide: {
         projectPath,
@@ -125,7 +128,7 @@ describe('DeleteRotationModal', () => {
       expect(mutate).toHaveBeenCalledWith({
         mutation: expect.any(Object),
         update: expect.anything(),
-        variables: { iid: rotation.id, projectPath },
+        variables: { id: rotation.id, projectPath, scheduleIid },
       });
     });
 

ee/spec/frontend/oncall_schedule/schedule/components/rotations_list_section_spec.js

@@ -6,6 +6,7 @@ import CurrentDayIndicator from 'ee/oncall_schedules/components/schedule/compone
 import RotationsAssignee from 'ee/oncall_schedules/components/rotations/components/rotation_assignee.vue';
 import { getTimeframeForWeeksView } from 'ee/oncall_schedules/components/schedule/utils';
 import { PRESET_TYPES } from 'ee/oncall_schedules/constants';
+import { scheduleIid } from '../../mocks/apollo_mock';
 import mockRotations from '../../mocks/mock_rotation.json';
 
 describe('RotationsListSectionComponent', () => {
@@ -22,6 +23,7 @@ describe('RotationsListSectionComponent', () => {
       propsData: {
         presetType,
         timeframe,
+        scheduleIid,
         rotations: [mockRotations[0]],
       },
       provide: {