Implement corpus delete logic

* Use graphQL mutation
* Add vue and apollo unit tests

ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_management.vue

@@ -4,6 +4,7 @@ import CorpusTable from 'ee/security_configuration/corpus_management/components/
 import CorpusUpload from 'ee/security_configuration/corpus_management/components/corpus_upload.vue';
 import { s__, __ } from '~/locale';
 import getCorpusesQuery from '../graphql/queries/get_corpuses.query.graphql';
+import deleteCorpusMutation from '../graphql/mutations/delete_corpus.mutation.graphql';
 
 export default {
   components: {
@@ -79,6 +80,20 @@ export default {
       };
       this.$apollo.queries.states.refetch();
     },
+    onDelete(id) {
+      return this.$apollo
+        .mutate({
+          mutation: deleteCorpusMutation,
+          variables: {
+            input: {
+              id,
+            },
+          },
+        })
+        .then(() => {
+          this.$apollo.queries.states.refetch();
+        });
+    },
     nextPage() {
       this.pagination = {
         firstPageSize: this.$options.pageSize,
@@ -113,7 +128,7 @@ export default {
 
     <gl-loading-icon v-if="isLoading" size="lg" class="gl-py-13" />
     <template v-else>
-      <corpus-table :corpuses="corpuses" />
+      <corpus-table :corpuses="corpuses" @delete="onDelete" />
     </template>
 
     <div v-if="hasPagination" class="gl-display-flex gl-justify-content-center gl-mt-5">

ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_table.vue

@@ -6,7 +6,6 @@ import Target from 'ee/security_configuration/corpus_management/components/colum
 import { s__ } from '~/locale';
 import UserDate from '~/vue_shared/components/user_date.vue';
 import { ISO_SHORT_FORMAT } from '~/vue_shared/constants';
-import deleteCorpusMutation from '../graphql/mutations/delete_corpus.mutation.graphql';
 
 const thClass = 'gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!';
 
@@ -56,11 +55,8 @@ export default {
     emptyTable: s__('CorpusManagement|Currently, there are no uploaded or generated corpuses.'),
   },
   methods: {
-    onDelete({ name }) {
-      this.$apollo.mutate({
-        mutation: deleteCorpusMutation,
-        variables: { name, projectPath: this.projectFullPath },
-      });
+    onDelete({ package: { id } }) {
+      this.$emit('delete', id);
     },
     target(corpus) {
       return corpus.package.pipelines.nodes[0]?.ref;

ee/app/assets/javascripts/security_configuration/corpus_management/graphql/mutations/delete_corpus.mutation.graphql

-mutation deleteCorpus($projectPath: ID!, $name: String!) {
-  deleteCorpus(projectPath: $projectPath, name: $name) @client {
+mutation deleteCorpus($input: DestroyPackageInput!) {
+  destroyPackage(input: $input) {
     errors
   }
 }

ee/app/assets/javascripts/security_configuration/corpus_management/graphql/resolvers/resolvers.js

@@ -44,9 +44,6 @@ export default {
         },
       });
     },
-    deleteCorpus: () => {
-      // NO-OP
-    },
     uploadCorpus: (_, { projectPath, name, files }, { cache, client }) => {
       const onUploadProgress = (e) => {
         client.mutate({

ee/spec/frontend/security_configuration/corpus_management/corpus_management_spec.js

@@ -8,11 +8,12 @@ import CorpusManagement from 'ee/security_configuration/corpus_management/compon
 import CorpusTable from 'ee/security_configuration/corpus_management/components/corpus_table.vue';
 import CorpusUpload from 'ee/security_configuration/corpus_management/components/corpus_upload.vue';
 import getCorpusesQuery from 'ee/security_configuration/corpus_management/graphql/queries/get_corpuses.query.graphql';
+import deleteCorpusMutation from 'ee/security_configuration/corpus_management/graphql/mutations/delete_corpus.mutation.graphql';
 
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
-import { getCorpusesQueryResponse } from './mock_data';
+import { getCorpusesQueryResponse, deleteCorpusMutationResponse } from './mock_data';
 
 const TEST_PROJECT_FULL_PATH = '/namespace/project';
 const TEST_CORPUS_HELP_PATH = '/docs/corpus-management';
@@ -22,10 +23,14 @@ describe('EE - CorpusManagement', () => {
 
   const createMockApolloProvider = ({
     getCorpusesQueryRequestHandler = jest.fn().mockResolvedValue(getCorpusesQueryResponse),
+    deleteCorpusMutationHandler = jest.fn().mockResolvedValue(deleteCorpusMutationResponse),
   } = {}) => {
     Vue.use(VueApollo);
 
-    const requestHandlers = [[getCorpusesQuery, getCorpusesQueryRequestHandler]];
+    const requestHandlers = [
+      [getCorpusesQuery, getCorpusesQueryRequestHandler],
+      [deleteCorpusMutation, deleteCorpusMutationHandler],
+    ];
 
     const mockResolvers = {
       Query: {
@@ -178,6 +183,33 @@ describe('EE - CorpusManagement', () => {
           });
         });
       });
+
+      describe('corpus deletion', () => {
+        it('deletes the corpus', async () => {
+          const mutationVars = { input: { id: 1 } };
+
+          const getCorpusesQueryRequestHandler = jest
+            .fn()
+            .mockResolvedValue(getCorpusesQueryResponse);
+          const deleteCorpusMutationHandler = jest
+            .fn()
+            .mockResolvedValue(deleteCorpusMutationResponse);
+
+          createComponent({
+            apolloProvider: createMockApolloProvider({
+              getCorpusesQueryRequestHandler,
+              deleteCorpusMutationHandler,
+            }),
+          });
+          await waitForPromises();
+
+          const corpusTable = wrapper.findComponent(CorpusTable);
+          corpusTable.vm.$emit('delete', mutationVars.input.id);
+          await waitForPromises();
+
+          expect(deleteCorpusMutationHandler).toHaveBeenCalledWith(mutationVars);
+        });
+      });
     });
 
     describe('when loading', () => {

ee/spec/frontend/security_configuration/corpus_management/corpus_table_spec.js

@@ -5,6 +5,12 @@ import { corpuses } from './mock_data';
 
 const TEST_PROJECT_FULL_PATH = '/namespace/project';
 
+const CORPUS = {
+  package: {
+    id: 1,
+  },
+};
+
 describe('Corpus table', () => {
   let wrapper;
 
@@ -13,18 +19,11 @@ describe('Corpus table', () => {
       corpuses,
     };
 
-    const defaultMocks = {
-      $apollo: {
-        mutate: jest.fn().mockResolvedValue(),
-      },
-    };
-
     wrapper = mount(CorpusTable, {
       propsData: defaultProps,
       provide: {
         projectFullPath: TEST_PROJECT_FULL_PATH,
       },
-      mocks: defaultMocks,
       ...options,
     });
   };
@@ -49,16 +48,11 @@ describe('Corpus table', () => {
       expect(columnHeaders.element).toMatchSnapshot();
     });
 
-    it('triggers the corpus deletion mutation', () => {
-      const {
-        $apollo: { mutate },
-      } = wrapper.vm;
-
+    it('emits the delete event', () => {
       const actionComponent = wrapper.findComponent(Actions);
-
-      expect(mutate).not.toHaveBeenCalled();
-      actionComponent.vm.$emit('delete', 'corpus-name');
-      expect(mutate).toHaveBeenCalledTimes(1);
+      actionComponent.vm.$emit('delete', CORPUS);
+      expect(wrapper.emitted('delete')).toBeTruthy();
+      expect(wrapper.emitted('delete')[0][0]).toEqual(CORPUS.package.id);
     });
 
     describe('with no corpuses', () => {

ee/spec/frontend/security_configuration/corpus_management/mock_data.js

@@ -113,3 +113,11 @@ export const getCorpusesQueryResponse = {
     },
   },
 };
+
+export const deleteCorpusMutationResponse = {
+  data: {
+    destroyPackage: {
+      errors: {},
+    },
+  },
+};