Merge branch '326362-corpus-upload' into 'master'

Change corpus upload modal to use prop instead of graphQL

See merge request gitlab-org/gitlab!73043

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

@@ -22,14 +22,13 @@ export default {
     newUpload: s__('CorpusManagement|New upload'),
     newCorpus: s__('CorpusMnagement|New corpus'),
   },
-  inject: ['projectFullPath', 'corpusHelpPath'],
+  inject: ['projectFullPath'],
   apollo: {
     states: {
       query: getCorpusesQuery,
       variables() {
         return {
           projectPath: this.projectFullPath,
-          ...this.cursor,
         };
       },
       update(data) {
@@ -99,7 +98,7 @@ export default {
     </div>
 
     <gl-button v-gl-modal-directive="$options.modal.modalId" class="gl-mr-5" variant="confirm">
-      {{ this.$options.i18n.newCorpus }}
+      {{ $options.i18n.newCorpus }}
     </gl-button>
 
     <gl-modal
@@ -111,7 +110,7 @@ export default {
       @primary="addCorpus"
       @canceled="resetCorpus"
     >
-      <corpus-upload-form />
+      <corpus-upload-form :states="states" />
     </gl-modal>
   </div>
 </template>

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

@@ -11,7 +11,6 @@ import { s__, __, sprintf } from '~/locale';
 import { VALID_CORPUS_MIMETYPE } from '../constants';
 import resetCorpus from '../graphql/mutations/reset_corpus.mutation.graphql';
 import uploadCorpus from '../graphql/mutations/upload_corpus.mutation.graphql';
-import getCorpusesQuery from '../graphql/queries/get_corpuses.query.graphql';
 
 export default {
   components: {
@@ -23,6 +22,12 @@ export default {
     GlButton,
   },
   inject: ['projectFullPath'],
+  props: {
+    states: {
+      type: Object,
+      required: true,
+    },
+  },
   i18n: {
     corpusName: s__('CorpusManagement|Corpus name'),
     uploadButtonText: __('Choose File...'),
@@ -30,22 +35,6 @@ export default {
       'CorpusManagement|New corpus needs to be a upload in *.zip format. Maximum 10GB',
     ),
   },
-  apollo: {
-    states: {
-      query: getCorpusesQuery,
-      variables() {
-        return {
-          projectPath: this.projectFullPath,
-        };
-      },
-      update(data) {
-        return data;
-      },
-      error() {
-        this.states = null;
-      },
-    },
-  },
   data() {
     return {
       attachmentName: '',
@@ -68,7 +57,7 @@ export default {
       return this.states?.uploadState.isUploading;
     },
     isUploaded() {
-      return this.states?.uploadState.progress === 100;
+      return this.progress === 100;
     },
     showUploadButton() {
       return this.hasAttachment && !this.isUploading && !this.isUploaded;
@@ -107,7 +96,6 @@ export default {
       this.$refs.fileUpload.click();
     },
     beginFileUpload() {
-      // const component = this;
       // Simulate incrementing file upload progress
       return this.$apollo
         .mutate({
@@ -162,7 +150,7 @@ export default {
         :disabled="isUploading"
         @click="openFileUpload"
       >
-        {{ this.$options.i18n.uploadButtonText }}
+        {{ $options.i18n.uploadButtonText }}
       </gl-button>
 
       <span v-if="isShowingAttachmentName" class="gl-ml-3">
@@ -186,7 +174,7 @@ export default {
       />
     </gl-form-group>
 
-    <span>{{ this.$options.i18n.uploadMessage }}</span>
+    <span>{{ $options.i18n.uploadMessage }}</span>
 
     <gl-button
       v-if="showUploadButton"

ee/spec/frontend/security_configuration/corpus_management/components/__snapshots__/corpus_upload_spec.js.snap

@@ -37,7 +37,9 @@ exports[`Corpus Upload component renders header 1`] = `
     title="New corpus"
     titletag="h4"
   >
-    <corpus-upload-form-stub />
+    <corpus-upload-form-stub
+      states="[object Object]"
+    />
   </gl-modal-stub>
 </div>
 `;

ee/spec/frontend/security_configuration/corpus_management/components/corpus_upload_form_spec.js

@@ -2,39 +2,12 @@ import { createLocalVue, mount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import CorpusUploadForm from 'ee/security_configuration/corpus_management/components/corpus_upload_form.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import waitForPromises from 'helpers/wait_for_promises';
 
 const TEST_PROJECT_FULL_PATH = '/namespace/project';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-let mockTotalSize;
-let mockData;
-let mockIsUploading;
-let mockProgress;
-
-const mockResolver = {
-  Query: {
-    /* eslint-disable no-unused-vars */
-    mockedPackages(_, { projectPath }) {
-      return {
-        totalSize: mockTotalSize(),
-        data: mockData(),
-        __typename: 'MockedPackages',
-      };
-    },
-    /* eslint-disable no-unused-vars */
-    uploadState(_, { projectPath }) {
-      return {
-        isUploading: mockIsUploading(),
-        progress: mockProgress(),
-        __typename: 'UploadState',
-      };
-    },
-  },
-};
-
 describe('Corpus upload modal', () => {
   let wrapper;
 
@@ -43,14 +16,11 @@ describe('Corpus upload modal', () => {
   const findUploadCorpus = () => wrapper.find('[data-testid="upload-corpus"]');
   const findUploadStatus = () => wrapper.find('[data-testid="upload-status"]');
 
-  const createMockApolloProvider = (resolverMock) => {
-    return createMockApollo([], resolverMock);
-  };
-
-  const createComponent = (resolverMock, options = {}) => {
+  const createComponent = (propsData, options = {}) => {
     wrapper = mount(CorpusUploadForm, {
       localVue,
-      apolloProvider: createMockApolloProvider(resolverMock),
+      propsData,
+      apolloProvider: createMockApollo(),
       provide: {
         projectFullPath: TEST_PROJECT_FULL_PATH,
       },
@@ -58,13 +28,6 @@ describe('Corpus upload modal', () => {
     });
   };
 
-  beforeEach(() => {
-    mockTotalSize = jest.fn();
-    mockData = jest.fn();
-    mockIsUploading = jest.fn();
-    mockProgress = jest.fn();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
@@ -81,12 +44,20 @@ describe('Corpus upload modal', () => {
           };
         };
 
-        mockTotalSize.mockResolvedValue(0);
-        mockData.mockResolvedValue([]);
-        mockIsUploading.mockResolvedValue(false);
-        mockProgress.mockResolvedValue(0);
+        const props = {
+          states: {
+            mockedPackages: {
+              totalSize: 0,
+              data: [],
+            },
+            uploadState: {
+              isUploading: false,
+              progress: 0,
+            },
+          },
+        };
 
-        createComponent(mockResolver, { data });
+        createComponent(props, { data });
       });
 
       it('shows empty name field', () => {
@@ -120,12 +91,20 @@ describe('Corpus upload modal', () => {
           };
         };
 
-        mockTotalSize.mockResolvedValue(0);
-        mockData.mockResolvedValue([]);
-        mockIsUploading.mockResolvedValue(false);
-        mockProgress.mockResolvedValue(0);
+        const props = {
+          states: {
+            mockedPackages: {
+              totalSize: 0,
+              data: [],
+            },
+            uploadState: {
+              isUploading: false,
+              progress: 0,
+            },
+          },
+        };
 
-        createComponent(mockResolver, { data });
+        createComponent(props, { data });
       });
 
       it('shows name field', () => {
@@ -149,7 +128,7 @@ describe('Corpus upload modal', () => {
       const attachmentName = 'corpus.zip';
       const corpusName = 'User entered name';
 
-      beforeEach(async () => {
+      beforeEach(() => {
         const data = () => {
           return {
             attachmentName,
@@ -159,14 +138,20 @@ describe('Corpus upload modal', () => {
           };
         };
 
-        mockTotalSize.mockResolvedValue(0);
-        mockData.mockResolvedValue([]);
-        mockIsUploading.mockResolvedValue(true);
-        mockProgress.mockResolvedValue(25);
-
-        createComponent(mockResolver, { data });
+        const props = {
+          states: {
+            mockedPackages: {
+              totalSize: 0,
+              data: [],
+            },
+            uploadState: {
+              isUploading: true,
+              progress: 25,
+            },
+          },
+        };
 
-        await waitForPromises();
+        createComponent(props, { data });
       });
 
       it('shows name field', () => {
@@ -192,7 +177,7 @@ describe('Corpus upload modal', () => {
       const attachmentName = 'corpus.zip';
       const corpusName = 'User entered name';
 
-      beforeEach(async () => {
+      beforeEach(() => {
         const data = () => {
           return {
             attachmentName,
@@ -202,14 +187,20 @@ describe('Corpus upload modal', () => {
           };
         };
 
-        mockTotalSize.mockResolvedValue(0);
-        mockData.mockResolvedValue([]);
-        mockIsUploading.mockResolvedValue(false);
-        mockProgress.mockResolvedValue(100);
-
-        createComponent(mockResolver, { data });
+        const props = {
+          states: {
+            mockedPackages: {
+              totalSize: 0,
+              data: [],
+            },
+            uploadState: {
+              isUploading: false,
+              progress: 100,
+            },
+          },
+        };
 
-        await waitForPromises();
+        createComponent(props, { data });
       });
 
       it('shows name field', () => {

ee/spec/frontend/security_configuration/corpus_management/components/corpus_upload_spec.js

@@ -3,7 +3,6 @@ import { shallowMount } from '@vue/test-utils';
 import CorpusUpload from 'ee/security_configuration/corpus_management/components/corpus_upload.vue';
 
 const TEST_PROJECT_FULL_PATH = '/namespace/project';
-const TEST_CORPUS_HELP_PATH = '/docs/corpus-management';
 
 describe('Corpus Upload', () => {
   let wrapper;
@@ -12,9 +11,15 @@ describe('Corpus Upload', () => {
     const defaultProps = { totalSize: 4e8 };
     wrapper = mountFn(CorpusUpload, {
       propsData: defaultProps,
+      mocks: {
+        states: {
+          uploadState: {
+            progress: 0,
+          },
+        },
+      },
       provide: {
         projectFullPath: TEST_PROJECT_FULL_PATH,
-        corpusHelpPath: TEST_CORPUS_HELP_PATH,
       },
       ...options,
     });