Implement table columns for corpus management table

* Add unit tests and vue components

app/assets/javascripts/admin/users/components/users_table.vue

 <script>
 import { GlTable } from '@gitlab/ui';
 import { __ } from '~/locale';
+import UserDate from '~/vue_shared/components/user_date.vue';
 import UserActions from './user_actions.vue';
 import UserAvatar from './user_avatar.vue';
-import UserDate from './user_date.vue';
 
 const DEFAULT_TH_CLASSES =
   'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';

app/assets/javascripts/admin/users/constants.js

@@ -2,8 +2,6 @@ import { s__, __ } from '~/locale';
 
 export const USER_AVATAR_SIZE = 32;
 
-export const SHORT_DATE_FORMAT = 'd mmm, yyyy';
-
 export const LENGTH_OF_USER_NOTE_TOOLTIP = 100;
 
 export const I18N_USER_ACTIONS = {

app/assets/javascripts/vue_shared/constants.js

@@ -8,6 +8,8 @@ const INTERVALS = {
 
 export const FILE_SYMLINK_MODE = '120000';
 
+export const SHORT_DATE_FORMAT = 'd mmm, yyyy';
+
 export const timeRanges = [
   {
     label: __('30 minutes'),

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

+<script>
+import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+    GlModal,
+  },
+  directives: {
+    GlModalDirective,
+  },
+  props: {
+    corpus: {
+      type: Object,
+      required: true,
+    },
+  },
+  i18n: {
+    deleteCorpusMessage: s__('Corpus Management|Are you sure you want to delete the corpus?'),
+  },
+  modal: {
+    actionPrimary: {
+      text: s__('Delete'),
+      attributes: { variant: 'danger', 'data-testid': 'modal-confirm' },
+    },
+    actionCancel: {
+      text: s__('Cancel'),
+    },
+  },
+  computed: {
+    downloadPath() {
+      /*
+       * TODO: Replace with relative path when we complete backend
+       * https://gitlab.com/gitlab-org/gitlab/-/issues/321618
+       */
+      return `https://www.gitlab.com/${this.corpus.downloadPath}`;
+    },
+  },
+};
+</script>
+<template>
+  <span>
+    <gl-button
+      class="gl-mr-2"
+      icon="download"
+      category="secondary"
+      variant="confirm"
+      :href="downloadPath"
+    />
+    <gl-button
+      v-gl-modal-directive="`confirmation-modal-${corpus.name}`"
+      icon="remove"
+      category="secondary"
+      variant="danger"
+    />
+
+    <gl-modal
+      header-class="gl-border-b-initial"
+      body-class="gl-display-none"
+      size="sm"
+      :title="$options.i18n.deleteCorpusMessage"
+      :modal-id="`confirmation-modal-${corpus.name}`"
+      :action-primary="$options.modal.actionPrimary"
+      :action-cancel="$options.modal.actionCancel"
+      @primary="$emit('delete', corpus)"
+    />
+  </span>
+</template>

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

+<script>
+import { GlLink } from '@gitlab/ui';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlLink,
+  },
+  props: {
+    corpus: {
+      type: Object,
+      required: true,
+    },
+  },
+  i18n: {
+    latestJob: s__('CorpusManagement|Latest Job:'),
+  },
+  computed: {
+    fileSize() {
+      return numberToHumanSize(this.corpus.size);
+    },
+    jobUrl() {
+      /*
+       * TODO: Replace with relative path when we complete backend
+       * https://gitlab.com/gitlab-org/gitlab/-/issues/321618
+       */
+      return `https://www.gitlab.com/${this.corpus.latestJobPath}`;
+    },
+    jobPath() {
+      return this.corpus.latestJobPath;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="gl-text-gray-900" data-testid="corpus-name">
+      {{ corpus.name }} <span data-testid="file-size">{{ fileSize }}</span
+      >)
+    </div>
+    <div data-testid="latest-job">
+      {{ this.$options.i18n.latestJob }}
+      <gl-link v-if="jobPath" class="gl-display-inline-block" :href="jobUrl" target="_blank">
+        {{ jobPath }}
+      </gl-link>
+      <template v-else>-</template>
+    </div>
+  </div>
+</template>

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

+<script>
+import { GlIcon } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  props: {
+    target: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    notSet: s__('CorpusManagement|Not Set'),
+  },
+  computed: {
+    hasTarget() {
+      return Boolean(this.target);
+    },
+  },
+};
+</script>
+<template>
+  <span v-if="hasTarget" class="gl-text-gray-900"> {{ target }} </span>
+  <span v-else class="gl-text-gray-900">
+    <gl-icon class="gl-mr-1" :size="16" name="information-o" />
+    {{ this.$options.i18n.notSet }}
+  </span>
+</template>

ee/spec/frontend/security_configuration/corpus_management/components/columns/__snapshots__/name_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Name component renders name with correct file size 1`] = `
+<div
+  class="gl-text-gray-900"
+  data-testid="corpus-name"
+>
+  
+    Test corpus 1 
+  <span
+    data-testid="file-size"
+  >
+    381.47 MiB
+  </span>
+  )
+  
+</div>
+`;
+
+exports[`Name component renders the latest job 1`] = `
+<div
+  class="gl-text-gray-900"
+  data-testid="corpus-name"
+>
+  
+    Test corpus 1 
+  <span
+    data-testid="file-size"
+  >
+    381.47 MiB
+  </span>
+  )
+  
+</div>
+`;
+
+exports[`Name component without job path renders a - string instead of a link 1`] = `
+<div
+  class="gl-text-gray-900"
+  data-testid="corpus-name"
+>
+  
+    Corpus-sample-2-1431-4425 
+  <span
+    data-testid="file-size"
+  >
+    306.13 MiB
+  </span>
+  )
+  
+</div>
+`;

ee/spec/frontend/security_configuration/corpus_management/components/columns/__snapshots__/target_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Target component renders target 1`] = `
+<span
+  class="gl-text-gray-900"
+>
+   294444-apollo-management-table 
+</span>
+`;
+
+exports[`Target component without target renders Not Set with icon 1`] = `
+<span
+  class="gl-text-gray-900"
+>
+  <gl-icon-stub
+    class="gl-mr-1"
+    name="information-o"
+    size="16"
+  />
+  
+  Not Set
+
+</span>
+`;

ee/spec/frontend/security_configuration/corpus_management/components/columns/actions_spec.js

+import { GlButton, GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Actions from 'ee/security_configuration/corpus_management/components/columns/actions.vue';
+import { corpuses } from '../../mock_data';
+
+describe('Action buttons', () => {
+  let wrapper;
+
+  const createComponentFactory = (mountFn = shallowMount) => (options = {}) => {
+    const defaultProps = {
+      corpus: corpuses[0],
+    };
+    wrapper = mountFn(Actions, {
+      propsData: defaultProps,
+      ...options,
+    });
+  };
+
+  const createComponent = createComponentFactory();
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('corpus management', () => {
+    it('renders the action buttons', () => {
+      createComponent();
+      expect(wrapper.findAll(GlButton)).toHaveLength(2);
+    });
+
+    describe('delete confirmation modal', () => {
+      beforeEach(() => {
+        createComponent({ stubs: { GlModal } });
+      });
+
+      it('calls the deleteCorpus method', async () => {
+        wrapper.findComponent(GlModal).vm.$emit('primary');
+        await nextTick();
+
+        expect(wrapper.emitted().delete).toBeTruthy();
+      });
+    });
+  });
+});

ee/spec/frontend/security_configuration/corpus_management/components/columns/name_spec.js

+import { GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Name from 'ee/security_configuration/corpus_management/components/columns/name.vue';
+import { corpuses } from '../../mock_data';
+
+describe('Name', () => {
+  let wrapper;
+
+  const findName = () => wrapper.find('[data-testid="corpus-name"]');
+  const findFileSize = () => wrapper.find('[data-testid="file-size"]');
+
+  const createComponentFactory = (mountFn = shallowMount) => (options = {}) => {
+    const defaultProps = {
+      corpus: corpuses[0],
+    };
+    wrapper = mountFn(Name, {
+      propsData: defaultProps,
+      ...options,
+    });
+  };
+
+  const createComponent = createComponentFactory();
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('component', () => {
+    it('renders name with correct file size', () => {
+      createComponent();
+      expect(findFileSize().text()).toBe('381.47 MiB');
+      expect(findName().element).toMatchSnapshot();
+    });
+
+    it('renders the latest job', () => {
+      createComponent();
+      expect(wrapper.findComponent(GlLink).exists()).toBe(true);
+      expect(findFileSize().text()).toBe('381.47 MiB');
+      expect(findName().element).toMatchSnapshot();
+    });
+
+    describe('without job path', () => {
+      it('renders a - string instead of a link', () => {
+        createComponent({ propsData: { corpus: corpuses[2] } });
+        expect(wrapper.findComponent(GlLink).exists()).toBe(false);
+        expect(findFileSize().text()).toBe('306.13 MiB');
+        expect(findName().element).toMatchSnapshot();
+      });
+    });
+  });
+});

ee/spec/frontend/security_configuration/corpus_management/components/columns/target_spec.js

+import { GlIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Target from 'ee/security_configuration/corpus_management/components/columns/target.vue';
+
+describe('Target', () => {
+  let wrapper;
+
+  const createComponentFactory = (mountFn = shallowMount) => (options = {}) => {
+    const defaultProps = { target: '294444-apollo-management-table' };
+    wrapper = mountFn(Target, {
+      propsData: defaultProps,
+      ...options,
+    });
+  };
+
+  const createComponent = createComponentFactory();
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('component', () => {
+    it('renders target', () => {
+      createComponent();
+      expect(wrapper.findComponent(GlIcon).exists()).toBe(false);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    describe('without target', () => {
+      it('renders Not Set with icon', () => {
+        createComponent({ propsData: { target: '' } });
+        expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
+        expect(wrapper.element).toMatchSnapshot();
+      });
+    });
+  });
+});

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

+export const corpuses = [
+  {
+    name: 'Test corpus 1',
+    lastUpdated: new Date(2021, 1, 12),
+    lastUsed: new Date(2020, 4, 3),
+    latestJobPath: 'gitlab-examples/security/security-reports/-/jobs/1107103952',
+    target: '',
+    downloadPath: 'farias-gl/go-fuzzing-example/-/jobs/959593462/artifacts/download',
+    size: 4e8,
+  },
+  {
+    name: 'Corpus-sample-1-5830-2393',
+    lastUpdated: new Date(2021, 2, 5),
+    lastUsed: new Date(2021, 6, 3),
+    latestJobPath: 'gitlab-examples/security/security-reports/-/jobs/1107103952',
+    downloadPath: 'farias-gl/go-fuzzing-example/-/jobs/959593462/artifacts/download',
+    target: '294444-apollo-management-table',
+    size: 2.34e8,
+  },
+  {
+    name: 'Corpus-sample-2-1431-4425',
+    lastUpdated: new Date(2021, 1, 17),
+    lastUsed: new Date(2020, 4, 23),
+    latestJobPath: '',
+    target: '120498-another-branch',
+    size: 3.21e8,
+  },
+  {
+    name: 'Corpus-sample-5-5830-1393',
+    lastUpdated: new Date(2021, 4, 9),
+    lastUsed: new Date(2020, 8, 4),
+    latestJobPath: 'gitlab-examples/security/security-reports/-/jobs/1107103952',
+    downloadPath: 'farias-gl/go-fuzzing-example/-/jobs/959593462/artifacts/download',
+    target: '120341-feature-branch',
+    size: 1.34e8,
+  },
+  {
+    name: 'Corpus-sample-8-1830-1393',
+    lastUpdated: new Date(2020, 4, 9),
+    lastUsed: new Date(2019, 8, 4),
+    latestJobPath: 'gitlab-examples/security/security-reports/-/jobs/1107103952',
+    downloadPath: 'farias-gl/go-fuzzing-example/-/jobs/959593462/artifacts/download',
+    target: '',
+    size: 6.34e8,
+  },
+  {
+    name: 'Corpus-sample-9-2450-2393',
+    lastUpdated: new Date(2019, 4, 6),
+    lastUsed: new Date(2020, 3, 12),
+    latestJobPath: 'gitlab-examples/security/security-reports/-/jobs/1107103952',
+    downloadPath: 'farias-gl/go-fuzzing-example/-/jobs/959593462/artifacts/download',
+    target: '403847-feature-branch',
+    size: 3.22e8,
+  },
+];

locale/gitlab.pot

@@ -8684,12 +8684,21 @@ msgstr ""
 msgid "Copy value"
 msgstr ""
 
+msgid "Corpus Management|Are you sure you want to delete the corpus?"
+msgstr ""
+
 msgid "CorpusManagement|Fuzz testing corpus management"
 msgstr ""
 
+msgid "CorpusManagement|Latest Job:"
+msgstr ""
+
 msgid "CorpusManagement|New corpus"
 msgstr ""
 
+msgid "CorpusManagement|Not Set"
+msgstr ""
+
 msgid "CorpusManagement|Total Size: %{totalSize}"
 msgstr ""
 

spec/frontend/admin/users/components/user_date_spec.js

 import { shallowMount } from '@vue/test-utils';
 
-import UserDate from '~/admin/users/components/user_date.vue';
+import UserDate from '~/vue_shared/components/user_date.vue';
 import { users } from '../mock_data';
 
 const mockDate = users[0].createdAt;

spec/frontend/admin/users/components/users_table_spec.js

@@ -3,8 +3,8 @@ import { mount } from '@vue/test-utils';
 
 import AdminUserActions from '~/admin/users/components/user_actions.vue';
 import AdminUserAvatar from '~/admin/users/components/user_avatar.vue';
-import AdminUserDate from '~/admin/users/components/user_date.vue';
 import AdminUsersTable from '~/admin/users/components/users_table.vue';
+import AdminUserDate from '~/vue_shared/components/user_date.vue';
 
 import { users, paths } from '../mock_data';