Update compliance framework list deleting

This updates the compliance framework list to show loading
on multiple list items when they are being deleted.

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/delete_modal.vue

@@ -37,13 +37,14 @@ export default {
       this.reportDeleting();
 
       try {
+        const { id } = this;
         const {
           data: { destroyComplianceFramework },
         } = await this.$apollo.mutate({
           mutation: deleteComplianceFrameworkMutation,
           variables: {
             input: {
-              id: this.id,
+              id,
             },
           },
           awaitRefetchQueries: true,
@@ -62,7 +63,7 @@ export default {
         if (error) {
           this.reportError(new Error(error));
         } else {
-          this.reportSuccess();
+          this.reportSuccess(id);
         }
       } catch (error) {
         this.reportError(error);
@@ -75,8 +76,8 @@ export default {
       Sentry.captureException(error);
       this.$emit('error');
     },
-    reportSuccess() {
-      this.$emit('delete');
+    reportSuccess(id) {
+      this.$emit('delete', id);
     },
     show() {
       this.$refs.modal.show();

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/list.vue

@@ -39,7 +39,7 @@ export default {
   data() {
     return {
       markedForDeletion: {},
-      deletingFramework: null,
+      deletingFrameworksIds: [],
       complianceFrameworks: [],
       error: '',
       message: '',
@@ -70,7 +70,7 @@ export default {
   },
   computed: {
     isLoading() {
-      return this.$apollo.loading && !this.deletingFramework;
+      return this.$apollo.loading && this.deletingFrameworksIds.length === 0;
     },
     hasLoaded() {
       return !this.isLoading && !this.error;
@@ -105,15 +105,18 @@ export default {
     onError() {
       this.error = this.$options.i18n.deleteError;
     },
-    onDelete() {
+    onDelete(id) {
       this.message = this.$options.i18n.deleteMessage;
-      this.deletingFramework = null;
+      const idx = this.deletingFrameworksIds.indexOf(id);
+      if (idx > -1) {
+        this.deletingFrameworksIds.splice(idx, 1);
+      }
     },
     onDeleting() {
-      this.deletingFramework = this.markedForDeletion;
+      this.deletingFrameworksIds.push(this.markedForDeletion.id);
     },
-    isDeleting(framework) {
-      return this.deletingFramework === framework;
+    isDeleting(id) {
+      return this.deletingFrameworksIds.includes(id);
     },
   },
   i18n: {
@@ -153,7 +156,7 @@ export default {
           v-for="framework in complianceFrameworks"
           :key="framework.parsedId"
           :framework="framework"
-          :loading="isDeleting(framework)"
+          :loading="isDeleting(framework.id)"
           @delete="markForDeletion"
         />
       </gl-tab>

ee/spec/frontend/groups/settings/compliance_frameworks/components/delete_modal_spec.js

@@ -117,7 +117,7 @@ describe('DeleteModal', () => {
 
       await waitForPromises();
 
-      expect(wrapper.emitted('delete')).toHaveLength(1);
+      expect(wrapper.emitted('delete')[0]).toEqual([frameworkFoundResponse.id]);
     });
 
     it('emits "error" event and reports to Sentry when there is a network error', async () => {

ee/spec/frontend/groups/settings/compliance_frameworks/components/list_spec.js

@@ -213,13 +213,18 @@ describe('List', () => {
         expect(findDeleteModal().vm.show).toHaveBeenCalled();
       });
 
-      describe('and the item is being deleted', () => {
+      describe('and multiple items are being deleted', () => {
         beforeEach(() => {
-          findDeleteModal().vm.$emit('deleting');
+          findListItems().wrappers.forEach((listItem) => {
+            listItem.vm.$emit('delete', listItem.props('framework'));
+            findDeleteModal().vm.$emit('deleting');
+          });
         });
 
-        it('sets "loading" to true on the marked list item', () => {
-          expect(findListItem().props('loading')).toBe(true);
+        it('sets "loading" to true on the deleting list items', () => {
+          expect(findListItems().wrappers.every((listItem) => listItem.props('loading'))).toBe(
+            true,
+          );
         });
 
         describe('and an error occurred', () => {
@@ -238,10 +243,14 @@ describe('List', () => {
 
         describe('and the item was successfully deleted', () => {
           beforeEach(async () => {
-            findDeleteModal().vm.$emit('delete');
+            findDeleteModal().vm.$emit('delete', framework.id);
             await waitForPromises();
           });
 
+          it('sets "loading" to false on the deleted list item', () => {
+            expect(findListItem().props('loading')).toBe(false);
+          });
+
           it('shows the alert for the success message', () => {
             expect(findAlert().props('dismissible')).toBe(true);
             expect(findAlert().props('variant')).toBe('info');