Merge branch '294444-apollo-management-table-part-3' into 'master'

Render Corpus Management Table - Part 2

See merge request gitlab-org/gitlab!57435

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

+<script>
+import { GlButton, GlSprintf } from '@gitlab/ui';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+    GlSprintf,
+  },
+  props: {
+    totalSize: {
+      type: Number,
+      required: true,
+    },
+  },
+  i18n: {
+    totalSize: s__('CorpusManagement|Total Size: %{totalSize}'),
+    newCorpus: s__('CorpusManagement|New corpus'),
+  },
+  computed: {
+    formattedFileSize() {
+      return numberToHumanSize(this.totalSize);
+    },
+  },
+  methods: {
+    newCorpus() {
+      this.$emit('newcorpus');
+    },
+  },
+};
+</script>
+<template>
+  <div
+    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">
+      <gl-sprintf :message="$options.i18n.totalSize">
+        <template #totalSize>
+          <span class="gl-font-weight-bold">{{ formattedFileSize }}</span>
+        </template>
+      </gl-sprintf>
+    </div>
+
+    <gl-button class="gl-mr-5" category="primary" variant="confirm" @click="newCorpus">
+      {{ this.$options.i18n.newCorpus }}
+    </gl-button>
+  </div>
+</template>

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Corpus Upload component renders header 1`] = `
+<div
+  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"
+  >
+    <gl-sprintf-stub
+      message="Total Size: %{totalSize}"
+    />
+  </div>
+   
+  <gl-button-stub
+    buttontextclasses=""
+    category="primary"
+    class="gl-mr-5"
+    icon=""
+    size="medium"
+    variant="confirm"
+  >
+    
+    New corpus
+  
+  </gl-button-stub>
+</div>
+`;

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

+import { GlButton } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import CorpusUpload from 'ee/security_configuration/corpus_management/components/corpus_upload.vue';
+
+describe('Corpus Upload', () => {
+  let wrapper;
+
+  const createComponentFactory = (mountFn = shallowMount) => (options = {}) => {
+    const defaultProps = { totalSize: 4e8 };
+    wrapper = mountFn(CorpusUpload, {
+      propsData: defaultProps,
+      ...options,
+    });
+  };
+
+  const createComponent = createComponentFactory();
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('component', () => {
+    it('renders header', () => {
+      createComponent();
+      expect(wrapper.findComponent(GlButton).exists()).toBe(true);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('calls the `uploadCorpus` callback on `new corpus` button click', async () => {
+      createComponent({ stubs: { GlButton } });
+      await wrapper.findComponent(GlButton).trigger('click');
+
+      expect(wrapper.emitted().newcorpus).toEqual([[]]);
+    });
+  });
+});

locale/gitlab.pot

@@ -8645,6 +8645,12 @@ msgstr ""
 msgid "CorpusManagement|Fuzz testing corpus management"
 msgstr ""
 
+msgid "CorpusManagement|New corpus"
+msgstr ""
+
+msgid "CorpusManagement|Total Size: %{totalSize}"
+msgstr ""
+
 msgid "Could not add admins as members"
 msgstr ""