Apply reviewer feedback

* Addres reviewer feedback

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

@@ -2,7 +2,7 @@
 import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import CorpusUploadModal from 'ee/security_configuration/corpus_management/components/corpus_upload_modal.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import { s__, __ } from '~/locale';
+import { s__ } from '~/locale';
 import addCorpusMutation from '../graphql/mutations/add_corpus.mutation.graphql';
 import resetCorpus from '../graphql/mutations/reset_corpus.mutation.graphql';
 import getCorpusesQuery from '../graphql/queries/get_corpuses.query.graphql';
@@ -16,6 +16,11 @@ export default {
   directives: {
     GlModalDirective,
   },
+  i18n: {
+    totalSize: s__('CorpusManagement|Total Size:'),
+    newUpload: s__('CorpusManagement|New upload'),
+    newCorpus: s__('CorpusMnagement|New corpus'),
+  },
   inject: ['projectFullPath', 'corpusHelpPath'],
   apollo: {
     states: {
@@ -29,15 +34,13 @@ export default {
       update: (data) => {
         return data;
       },
-      error() {
-        this.states = null;
-      },
     },
   },
   modal: {
     actionCancel: {
       text: s__('Cancel'),
     },
+    modalId: 'corpus-upload-modal',
   },
   props: {
     totalSize: {
@@ -70,7 +73,7 @@ export default {
     addCorpus() {
       this.$apollo.mutate({
         mutation: addCorpusMutation,
-        variables: { name: __('New Upload'), projectPath: this.projectFullPath },
+        variables: { name: this.$options.i18n.newCorpus, projectPath: this.projectFullPath },
       });
     },
     resetCorpus() {
@@ -91,13 +94,13 @@ export default {
       <span class="gl-font-weight-bold">{{ formattedFileSize }}</span>
     </div>
 
-    <gl-button v-gl-modal-directive="`corpus-upload-modal`" class="gl-mr-5" variant="confirm">
-      {{ s__('CorpusManagement|New corpus') }}
+    <gl-button v-gl-modal-directive="$options.modal.modalId" class="gl-mr-5" variant="confirm">
+      {{ this.$options.i18n.newCorpus }}
     </gl-button>
 
     <gl-modal
-      modal-id="corpus-upload-modal"
-      title="New corpus"
+      :modal-id="$options.modal.modalId"
+      :title="$options.i18n.newCorpus"
       size="sm"
       :action-primary="actionPrimaryProps"
       :action-cancel="$options.modal.actionCancel"

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

@@ -4,7 +4,6 @@ import {
   GlFormInput,
   GlFormInputGroup,
   GlButton,
-  GlIcon,
   GlLoadingIcon,
   GlFormGroup,
 } from '@gitlab/ui';
@@ -22,23 +21,21 @@ export default {
     GlLoadingIcon,
     GlFormInputGroup,
     GlButton,
-    GlIcon,
   },
   inject: ['projectFullPath'],
   i18n: {
+    corpusName: s__('CorpusManagement|Corpus name'),
     uploadButtonText: __('Choose File...'),
     uploadMessage: s__(
       'CorpusManagement|New corpus needs to be a upload in *.zip format. Maximum 10Gib',
     ),
   },
-  props: {},
   apollo: {
     states: {
       query: getCorpusesQuery,
       variables() {
         return {
           projectPath: this.projectFullPath,
-          ...this.cursor,
         };
       },
       update: (data) => {
@@ -61,10 +58,10 @@ export default {
     hasAttachment() {
       return Boolean(this.attachmentName);
     },
-    isShowingAttatchmentName() {
+    isShowingAttachmentName() {
       return this.hasAttachment && !this.isLoading;
     },
-    isShowingAttatchmentCancel() {
+    isShowingAttachmentCancel() {
       return !this.isUploaded && !this.isUploading;
     },
     isUploading() {
@@ -84,14 +81,14 @@ export default {
     },
   },
   beforeDestroy() {
-    this.resetAttatchment();
+    this.resetAttachment();
     this.cancelUpload();
   },
   methods: {
     clearName() {
       this.corpusName = '';
     },
-    resetAttatchment() {
+    resetAttachment() {
       this.$refs.fileUpload.value = null;
       this.attachmentName = '';
       this.files = [];
@@ -133,16 +130,14 @@ export default {
 </script>
 <template>
   <gl-form>
-    <gl-form-group label="Corpus name" label-size="sm" label-for="corpus-name">
-      <gl-form-input-group class="gl-corpus-name">
-        <slot name="input">
-          <gl-form-input
-            id="corpus-name"
-            ref="input"
-            v-model="corpusName"
-            data-testid="corpus-name"
-          />
-        </slot>
+    <gl-form-group :label="$options.i18n.corpusName" label-size="sm" label-for="corpus-name">
+      <gl-form-input-group>
+        <gl-form-input
+          id="corpus-name"
+          ref="input"
+          v-model="corpusName"
+          data-testid="corpus-name"
+        />
 
         <gl-button
           class="gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button"
@@ -158,31 +153,35 @@ export default {
       </gl-form-input-group>
     </gl-form-group>
 
-    <gl-form-group label="Corpus name" label-size="sm" label-for="corpus-file">
+    <gl-form-group :label="$options.i18n.corpusName" label-size="sm" label-for="corpus-file">
       <gl-button
         v-if="showFilePickerButton"
-        data-testid="upload-attatchment-button"
+        data-testid="upload-attachment-button"
         :disabled="isUploading"
         @click="openFileUpload"
       >
         {{ this.$options.i18n.uploadButtonText }}
       </gl-button>
 
-      <span v-if="isShowingAttatchmentName" class="gl-ml-3">
+      <span v-if="isShowingAttachmentName" class="gl-ml-3">
         {{ attachmentName }}
-        <gl-icon v-if="isShowingAttatchmentCancel" name="close" @click="resetAttatchment" />
+        <gl-button
+          v-if="isShowingAttachmentCancel"
+          size="small"
+          icon="close"
+          category="tertiary"
+          @click="resetAttachment"
+        />
       </span>
 
-      <gl-form-input-group id="corpus-file" class="gl-display-flex gl-align-items-center">
-        <input
-          ref="fileUpload"
-          type="file"
-          name="corpus_file"
-          :accept="$options.VALID_CORPUS_MIMETYPE.mimetype"
-          class="gl-display-none"
-          @change="onFileUploadChange"
-        />
-      </gl-form-input-group>
+      <input
+        ref="fileUpload"
+        type="file"
+        name="corpus_file"
+        :accept="$options.VALID_CORPUS_MIMETYPE.mimetype"
+        class="gl-display-none"
+        @change="onFileUploadChange"
+      />
     </gl-form-group>
 
     <span>{{ this.$options.i18n.uploadMessage }}</span>
@@ -199,7 +198,7 @@ export default {
 
     <div v-if="isUploading" data-testid="upload-status" class="gl-mt-2">
       <gl-loading-icon inline size="sm" />
-      {{ sprintf(__('Attatching File - %{progress}%'), { progress }) }}
+      {{ sprintf(__('Attaching File - %{progress}%'), { progress }) }}
       <gl-button size="small" @click="cancelUpload"> {{ __('Cancel') }} </gl-button>
     </div>
   </gl-form>

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

@@ -36,7 +36,6 @@ export default {
         draftState.mockedPackages.data = [
           ...draftState.mockedPackages.data,
           {
-            __typename: __('Corpus'),
             name,
             lastUpdated: new Date().toString(),
             lastUsed: new Date().toString(),
@@ -44,6 +43,7 @@ export default {
             target: '',
             downloadPath: 'farias-gl/go-fuzzing-example/-/jobs/959593462/artifacts/download',
             size: 4e8,
+            __typename: 'CorpusData',
           },
         ];
         draftState.mockedPackages.totalSize += 4e8;

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Corpus upload modal corpus modal uploading state does shows the upload progress 1`] = `
+exports[`Corpus upload modal corpus modal uploading state does show the upload progress 1`] = `
 <div
   class="gl-mt-2"
   data-testid="upload-status"
@@ -14,7 +14,7 @@ exports[`Corpus upload modal corpus modal uploading state does shows the upload
     />
   </span>
   
-    Attatching File - 25%
+    Attaching File - 25%
     
   <button
     class="btn btn-default btn-sm gl-button"

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

@@ -40,7 +40,7 @@ describe('Corpus upload modal', () => {
   let wrapper;
 
   const findCorpusName = () => wrapper.find('[data-testid="corpus-name"]');
-  const findUploadAttatchment = () => wrapper.find('[data-testid="upload-attatchment-button"]');
+  const findUploadAttachment = () => wrapper.find('[data-testid="upload-attachment-button"]');
   const findUploadCorpus = () => wrapper.find('[data-testid="upload-corpus"]');
   const findUploadStatus = () => wrapper.find('[data-testid="upload-status"]');
 
@@ -97,10 +97,10 @@ describe('Corpus upload modal', () => {
       });
 
       it('shows the choose file button', () => {
-        expect(findUploadAttatchment().exists()).toBe(true);
+        expect(findUploadAttachment().exists()).toBe(true);
       });
 
-      it('show the upload corpus button', () => {
+      it('does not show the upload corpus button', () => {
         expect(findUploadCorpus().exists()).toBe(false);
       });
 
@@ -136,7 +136,7 @@ describe('Corpus upload modal', () => {
       });
 
       it('shows the choose file button', () => {
-        expect(findUploadAttatchment().exists()).toBe(true);
+        expect(findUploadAttachment().exists()).toBe(true);
       });
 
       it('shows the upload corpus button', () => {
@@ -177,15 +177,15 @@ describe('Corpus upload modal', () => {
       });
 
       it('shows the choose file button as disabled', () => {
-        expect(findUploadAttatchment().exists()).toBe(true);
-        expect(findUploadAttatchment().attributes('disabled')).toBe('disabled');
+        expect(findUploadAttachment().exists()).toBe(true);
+        expect(findUploadAttachment().attributes('disabled')).toBe('disabled');
       });
 
       it('does not show the upload corpus button', () => {
         expect(findUploadCorpus().exists()).toBe(false);
       });
 
-      it('does shows the upload progress', () => {
+      it('does show the upload progress', () => {
         expect(findUploadStatus().exists()).toBe(true);
         expect(findUploadStatus().element).toMatchSnapshot();
       });
@@ -220,7 +220,7 @@ describe('Corpus upload modal', () => {
       });
 
       it('does not show the choose file button', () => {
-        expect(findUploadAttatchment().exists()).toBe(false);
+        expect(findUploadAttachment().exists()).toBe(false);
       });
 
       it('does not show the upload corpus button', () => {

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

@@ -16,7 +16,6 @@ describe('Corpus Upload', () => {
         projectFullPath: TEST_PROJECT_FULL_PATH,
         corpusHelpPath: TEST_CORPUS_HELP_PATH,
       },
-      mocks: {},
       ...options,
     });
   };

locale/gitlab.pot

@@ -4352,6 +4352,9 @@ msgstr ""
 msgid "Attach a file by drag & drop or %{upload_link}"
 msgstr ""
 
+msgid "Attaching File - %{progress}%"
+msgstr ""
+
 msgid "Attaching a file"
 msgid_plural "Attaching %d files"
 msgstr[0] ""
@@ -6126,6 +6129,9 @@ msgstr ""
 msgid "Chinese language support using"
 msgstr ""
 
+msgid "Choose File..."
+msgstr ""
+
 msgid "Choose a branch/tag (e.g. %{master}) or enter a commit (e.g. %{sha}) to see what's changed or to create a merge request."
 msgstr ""
 
@@ -8825,7 +8831,10 @@ msgstr ""
 msgid "CorpusManagement|Latest Job:"
 msgstr ""
 
-msgid "CorpusManagement|New corpus"
+msgid "CorpusManagement|New corpus needs to be a upload in *.zip format. Maximum 10Gib"
+msgstr ""
+
+msgid "CorpusManagement|New upload"
 msgstr ""
 
 msgid "CorpusManagement|Not Set"
@@ -8834,7 +8843,10 @@ msgstr ""
 msgid "CorpusManagement|Target"
 msgstr ""
 
-msgid "CorpusManagement|Total Size: %{totalSize}"
+msgid "CorpusManagement|Total Size:"
+msgstr ""
+
+msgid "CorpusMnagement|New corpus"
 msgstr ""
 
 msgid "Could not add admins as members"