Address maintainer feedback

* Run linters and prettify code

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

 <script>
-import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
-import CorpusUploadForm from 'ee/security_configuration/corpus_management/components/corpus_upload_form.vue';
+import { GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
 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';
+import CorpusUploadForm from './corpus_upload_form.vue';
 
 export default {
   components: {
+    GlSprintf,
     GlButton,
     GlModal,
     CorpusUploadForm,
@@ -17,7 +18,7 @@ export default {
     GlModalDirective,
   },
   i18n: {
-    totalSize: s__('CorpusManagement|Total Size:'),
+    totalSize: s__('CorpusManagement|Total Size: %{totalSize}'),
     newUpload: s__('CorpusManagement|New upload'),
     newCorpus: s__('CorpusMnagement|New corpus'),
   },
@@ -31,14 +32,14 @@ export default {
           ...this.cursor,
         };
       },
-      update: (data) => {
+      update(data) {
         return data;
       },
     },
   },
   modal: {
     actionCancel: {
-      text: s__('Cancel'),
+      text: __('Cancel'),
     },
     modalId: 'corpus-upload-modal',
   },
@@ -60,7 +61,7 @@ export default {
     },
     actionPrimaryProps() {
       return {
-        text: s__('Add'),
+        text: __('Add'),
         attributes: {
           'data-testid': 'modal-confirm',
           disabled: !this.isUploaded,
@@ -90,8 +91,11 @@ export default {
     class="gl-h-11 gl-bg-gray-10 gl-display-flex gl-justify-content-space-between gl-align-items-center"
   >
     <div class="gl-ml-5">
-      {{ s__('CorpusManagement|Total Size:') }}
+      <gl-sprintf :message="$options.i18n.totalSize">
+        <template #totalSize>
           <span class="gl-font-weight-bold">{{ formattedFileSize }}</span>
+        </template>
+      </gl-sprintf>
     </div>
 
     <gl-button v-gl-modal-directive="$options.modal.modalId" class="gl-mr-5" variant="confirm">

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

@@ -7,7 +7,7 @@ import {
   GlLoadingIcon,
   GlFormGroup,
 } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
+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';
@@ -38,7 +38,7 @@ export default {
           projectPath: this.projectFullPath,
         };
       },
-      update: (data) => {
+      update(data) {
         return data;
       },
       error() {
@@ -79,6 +79,9 @@ export default {
     progress() {
       return this.states?.uploadState.progress;
     },
+    progressText() {
+      return sprintf(__('Attaching File - %{progress}'), { progress: `${this.progress}%` });
+    },
   },
   beforeDestroy() {
     this.resetAttachment();
@@ -104,8 +107,7 @@ export default {
       this.$refs.fileUpload.click();
     },
     beginFileUpload() {
-      const uploadCallback = this.beginFileUpload;
-      const component = this;
+      // const component = this;
       // Simulate incrementing file upload progress
       return this.$apollo
         .mutate({
@@ -114,8 +116,8 @@ export default {
         })
         .then(({ data }) => {
           if (data.uploadCorpus < 100) {
-            component.uploadTimeout = setTimeout(() => {
-              uploadCallback();
+            this.uploadTimeout = setTimeout(() => {
+              this.beginFileUpload();
             }, 500);
           }
         });
@@ -198,7 +200,7 @@ export default {
 
     <div v-if="isUploading" data-testid="upload-status" class="gl-mt-2">
       <gl-loading-icon inline size="sm" />
-      {{ sprintf(__('Attaching File - %{progress}%'), { progress }) }}
+      {{ progressText }}
       <gl-button size="small" @click="cancelUpload"> {{ __('Cancel') }} </gl-button>
     </div>
   </gl-form>

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

@@ -19,7 +19,6 @@ const mockResolver = {
     /* eslint-disable no-unused-vars */
     mockedPackages(_, { projectPath }) {
       return {
-        // Mocked data goes here
         totalSize: mockTotalSize(),
         data: mockData(),
         __typename: 'MockedPackages',
@@ -44,11 +43,9 @@ describe('Corpus upload modal', () => {
   const findUploadCorpus = () => wrapper.find('[data-testid="upload-corpus"]');
   const findUploadStatus = () => wrapper.find('[data-testid="upload-status"]');
 
-  function createMockApolloProvider(resolverMock) {
-    localVue.use(VueApollo);
-
+  const createMockApolloProvider = (resolverMock) => {
     return createMockApollo([], resolverMock);
-  }
+  };
 
   const createComponent = (resolverMock, options = {}) => {
     wrapper = mount(CorpusUploadForm, {

locale/gitlab.pot

@@ -4352,7 +4352,7 @@ msgstr ""
 msgid "Attach a file by drag & drop or %{upload_link}"
 msgstr ""
 
-msgid "Attaching File - %{progress}%"
+msgid "Attaching File - %{progress}"
 msgstr ""
 
 msgid "Attaching a file"
@@ -8843,7 +8843,7 @@ msgstr ""
 msgid "CorpusManagement|Target"
 msgstr ""
 
-msgid "CorpusManagement|Total Size:"
+msgid "CorpusManagement|Total Size: %{totalSize}"
 msgstr ""
 
 msgid "CorpusMnagement|New corpus"