Merge branch '345088-corpus-table-fetch' into 'master'

Render Corpus table with real data

See merge request gitlab-org/gitlab!74480

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

@@ -30,11 +30,13 @@ export default {
   },
   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}`;
+      return this.corpus.package.packageFiles.nodes[0].downloadPath;
+    },
+    name() {
+      return this.corpus.package.name;
+    },
+    directiveName() {
+      return `confirmation-modal-${this.name}`;
     },
   },
 };
@@ -43,7 +45,7 @@ export default {
   <span>
     <gl-button class="gl-mr-2" icon="download" :href="downloadPath" />
     <gl-button
-      v-gl-modal-directive="`confirmation-modal-${corpus.name}`"
+      v-gl-modal-directive="directiveName"
       icon="remove"
       category="secondary"
       variant="danger"
@@ -54,7 +56,7 @@ export default {
       body-class="gl-display-none"
       size="sm"
       :title="$options.i18n.deleteCorpusMessage"
-      :modal-id="`confirmation-modal-${corpus.name}`"
+      :modal-id="directiveName"
       :action-primary="$options.modal.actionPrimary"
       :action-cancel="$options.modal.actionCancel"
       @primary="$emit('delete', corpus)"

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

@@ -18,17 +18,19 @@ export default {
   },
   computed: {
     fileSize() {
-      return decimalBytes(this.corpus.size);
+      return decimalBytes(this.corpus.package.packageFiles.nodes[0].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}`;
+      return this.corpus.package.pipelines.nodes[0]?.path;
     },
-    jobPath() {
-      return this.corpus.latestJobPath;
+    ref() {
+      return this.corpus.package.pipelines.nodes[0]?.ref;
+    },
+    latestJob() {
+      return `${this.jobURL} (${this.ref})`;
+    },
+    name() {
+      return this.corpus.package.name;
     },
   },
 };
@@ -36,13 +38,13 @@ export default {
 <template>
   <div>
     <div class="gl-text-gray-900" data-testid="corpus-name">
-      {{ corpus.name }}
+      {{ name }}
       <span class="gl-text-gray-500" 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 v-if="jobUrl" class="gl-display-inline-block" :href="jobUrl" target="_blank">
+        {{ latestJob }}
       </gl-link>
       <template v-else>-</template>
     </div>

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

@@ -12,7 +12,8 @@ export default {
   props: {
     target: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
   },
   i18n: {

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

@@ -37,15 +37,12 @@ export default {
     learnMore: __('Learn More'),
   },
   computed: {
-    mockedData() {
-      return this.states?.mockedPackages.data || [];
+    corpuses() {
+      return this.states?.project.corpuses.nodes || [];
     },
     isLoading() {
       return this.$apollo.loading;
     },
-    totalSize() {
-      return this.states?.mockedPackages.totalSize;
-    },
   },
 };
 </script>
@@ -64,8 +61,8 @@ export default {
 
     <gl-loading-icon v-if="isLoading" size="lg" />
     <template v-else>
-      <corpus-upload :total-size="totalSize" />
-      <corpus-table :corpuses="mockedData" />
+      <corpus-upload />
+      <corpus-table :corpuses="corpuses" />
     </template>
   </div>
 </template>

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

@@ -59,6 +59,15 @@ export default {
         variables: { name, projectPath: this.projectFullPath },
       });
     },
+    target(corpus) {
+      return corpus.package.pipelines.nodes[0]?.ref;
+    },
+    lastUpdated(corpus) {
+      return corpus.package.updatedAt;
+    },
+    lastUsed(corpus) {
+      return corpus.package.pipelines.nodes[0]?.updatedAt;
+    },
   },
   dateFormat: ISO_SHORT_FORMAT,
 };
@@ -70,15 +79,15 @@ export default {
     </template>
 
     <template #cell(target)="{ item }">
-      <target :target="item.target" />
+      <target :target="target(item)" />
     </template>
 
     <template #cell(lastUpdated)="{ item }">
-      <user-date :date="item.lastUpdated" :date-format="$options.dateFormat" />
+      <user-date :date="lastUpdated(item)" :date-format="$options.dateFormat" />
     </template>
 
     <template #cell(lastUsed)="{ item }">
-      <user-date :date="item.lastUsed" :date-format="$options.dateFormat" />
+      <user-date :date="lastUsed(item)" :date-format="$options.dateFormat" />
     </template>
 
     <template #cell(actions)="{ item }">

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

@@ -28,9 +28,7 @@ export default {
     states: {
       query: getCorpusesQuery,
       variables() {
-        return {
-          projectPath: this.projectFullPath,
-        };
+        return this.queryVariables;
       },
       update(data) {
         return data;
@@ -46,10 +44,16 @@ export default {
   props: {
     totalSize: {
       type: Number,
-      required: true,
+      required: false,
+      default: null,
     },
   },
   computed: {
+    queryVariables() {
+      return {
+        projectPath: this.projectFullPath,
+      };
+    },
     formattedFileSize() {
       return decimalBytes(this.totalSize);
     },
@@ -74,6 +78,12 @@ export default {
     addCorpus() {
       this.$apollo.mutate({
         mutation: addCorpusMutation,
+        refetchQueries: [
+          {
+            query: getCorpusesQuery,
+            variables: this.queryVariables,
+          },
+        ],
         variables: {
           name: this.$options.i18n.newCorpus,
           projectPath: this.projectFullPath,
@@ -100,7 +110,7 @@ export default {
   <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">
+    <div v-if="totalSize" class="gl-ml-5">
       <gl-sprintf :message="$options.i18n.totalSize">
         <template #totalSize>
           <span class="gl-font-weight-bold">{{ formattedFileSize }}</span>
@@ -108,7 +118,11 @@ export default {
       </gl-sprintf>
     </div>
 
-    <gl-button v-gl-modal-directive="$options.modal.modalId" class="gl-mr-5" variant="confirm">
+    <gl-button
+      v-gl-modal-directive="$options.modal.modalId"
+      class="gl-mr-5 gl-ml-auto"
+      variant="confirm"
+    >
       {{ $options.i18n.newCorpus }}
     </gl-button>
 

ee/app/assets/javascripts/security_configuration/corpus_management/graphql/queries/get_corpuses.query.graphql

 query getCorpuses($projectPath: ID!) {
-  mockedPackages(projectPath: $projectPath) @client {
-    data
-    totalSize
+  project(fullPath: $projectPath) {
+    id
+    corpuses {
+      nodes {
+        id
+        package {
+          id
+          name
+          updatedAt
+          packageFiles(last: 1) {
+            nodes {
+              id
+              size
+              downloadPath
+            }
+          }
+          pipelines(last: 1) {
+            nodes {
+              id
+              createdAt
+              ref
+            }
+          }
+        }
+      }
+    }
   }
   uploadState(projectPath: $projectPath) @client {
     isUploading

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

 import produce from 'immer';
-import { corpuses } from 'ee_jest/security_configuration/corpus_management/mock_data';
 import { publishPackage } from '~/api/packages_api';
 import axios from '~/lib/utils/axios_utils';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
@@ -11,15 +10,6 @@ import corpusCreate from '../mutations/corpus_create.mutation.graphql';
 
 export default {
   Query: {
-    /* eslint-disable no-unused-vars */
-    mockedPackages(_, { projectPath }) {
-      return {
-        // Mocked data goes here
-        totalSize: 20.45e8,
-        data: corpuses,
-        __typename: 'MockedPackages',
-      };
-    },
     /* eslint-disable no-unused-vars */
     uploadState(_, { projectPath }) {
       return {
@@ -32,7 +22,7 @@ export default {
     },
   },
   Mutation: {
-    addCorpus: (_, { name, projectPath, packageId }, { cache, client }) => {
+    addCorpus: (_, { projectPath, packageId }, { cache, client }) => {
       const sourceData = cache.readQuery({
         query: getCorpusesQuery,
         variables: { projectPath },
@@ -41,21 +31,6 @@ export default {
       const data = produce(sourceData, (draftState) => {
         draftState.uploadState.isUploading = false;
         draftState.uploadState.progress = 0;
-
-        draftState.mockedPackages.data = [
-          ...draftState.mockedPackages.data,
-          {
-            name,
-            lastUpdated: new Date().toString(),
-            lastUsed: new Date().toString(),
-            latestJobPath: '',
-            target: '',
-            downloadPath: 'farias-gl/go-fuzzing-example/-/jobs/959593462/artifacts/download',
-            size: 4e8,
-            __typename: 'CorpusData',
-          },
-        ];
-        draftState.mockedPackages.totalSize += 4e8;
       });
 
       cache.writeQuery({ query: getCorpusesQuery, data, variables: { projectPath } });
@@ -70,25 +45,8 @@ export default {
         },
       });
     },
-    deleteCorpus: (_, { name, projectPath }, { cache }) => {
-      const sourceData = cache.readQuery({
-        query: getCorpusesQuery,
-        variables: { projectPath },
-      });
-
-      const data = produce(sourceData, (draftState) => {
-        const mockedCorpuses = draftState.mockedPackages;
-        // Filter out deleted corpus
-        mockedCorpuses.data = mockedCorpuses.data.filter((corpus) => {
-          return corpus.name !== name;
-        });
-        // Re-compute total file size
-        mockedCorpuses.totalSize = mockedCorpuses.data.reduce((totalSize, corpus) => {
-          return totalSize + corpus.size;
-        }, 0);
-      });
-
-      cache.writeQuery({ query: getCorpusesQuery, data, variables: { projectPath } });
+    deleteCorpus: () => {
+      // NO-OP
     },
     uploadCorpus: (_, { projectPath, name, files }, { cache, client }) => {
       const onUploadProgress = (e) => {

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

@@ -15,7 +15,7 @@ exports[`Corpus Upload component renders header 1`] = `
   <gl-button-stub
     buttontextclasses=""
     category="primary"
-    class="gl-mr-5"
+    class="gl-mr-5 gl-ml-auto"
     icon=""
     role="button"
     size="medium"

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

@@ -6,7 +6,7 @@ exports[`Name component renders name with correct file size 1`] = `
   data-testid="corpus-name"
 >
   
-    Test corpus 1
+    Corpus-sample-1-13830-23932
     
   <span
     class="gl-text-gray-500"
@@ -23,7 +23,7 @@ exports[`Name component renders the latest job 1`] = `
   data-testid="corpus-name"
 >
   
-    Test corpus 1
+    Corpus-sample-1-13830-23932
     
   <span
     class="gl-text-gray-500"
@@ -40,7 +40,7 @@ exports[`Name component without job path renders a - string instead of a link 1`
   data-testid="corpus-name"
 >
   
-    Corpus-sample-2-1431-4425
+    Corpus-sample-3-1431-4425
     
   <span
     class="gl-text-gray-500"

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

@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import CorpusManagement from 'ee/security_configuration/corpus_management/components/corpus_management.vue';
 import CorpusTable from 'ee/security_configuration/corpus_management/components/corpus_table.vue';
 import CorpusUpload from 'ee/security_configuration/corpus_management/components/corpus_upload.vue';
+import { corpuses } from './mock_data';
 
 const TEST_PROJECT_FULL_PATH = '/namespace/project';
 const TEST_CORPUS_HELP_PATH = '/docs/corpus-management';
@@ -37,7 +38,7 @@ describe('EE - CorpusManagement', () => {
     describe('when loaded', () => {
       beforeEach(() => {
         const data = () => {
-          return { states: { mockedPackages: { totalSize: 12 } } };
+          return { states: { project: { corpuses } } };
         };
 
         createComponent({ data });

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

-export const corpuses = [
+const pipelines = {
+  nodes: [
+    {
+      ref: 'farias-gl/go-fuzzing-example',
+      path: 'gitlab-examples/security/security-reports/-/jobs/1107103952',
+      updatedAt: new Date(2020, 4, 3).toString(),
+    },
+  ],
+};
+
+const packageFiles = {
+  nodes: [
     {
-    name: 'Test corpus 1',
-    lastUpdated: new Date(2021, 1, 12).toString(),
-    lastUsed: new Date(2020, 4, 3).toString(),
-    latestJobPath: 'gitlab-examples/security/security-reports/-/jobs/1107103952',
-    target: '',
-    downloadPath: 'farias-gl/go-fuzzing-example/-/jobs/959593462/artifacts/download',
+      downloadPath: '/download-path',
       size: 4e8,
     },
+  ],
+};
+
+export const corpuses = [
+  {
+    package: {
+      name: 'Corpus-sample-1-13830-23932',
+      updatedAt: new Date(2021, 2, 12).toString(),
+      pipelines,
+      packageFiles,
+    },
+  },
+  {
+    package: {
+      name: 'Corpus-sample-2-5830-2393',
+      updatedAt: new Date(2021, 3, 12).toString(),
+      pipelines,
+      packageFiles,
+    },
+  },
+  {
+    package: {
+      name: 'Corpus-sample-3-1431-4425',
+      updatedAt: new Date(2021, 4, 12).toString(),
+      pipelines: {
+        nodes: [
           {
-    name: 'Corpus-sample-1-5830-2393',
-    lastUpdated: new Date(2021, 2, 5).toString(),
-    lastUsed: new Date(2021, 6, 3).toString(),
-    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,
+            ...pipelines.nodes[0],
+            path: '',
+          },
+        ],
       },
+      packageFiles: {
+        nodes: [
           {
-    name: 'Corpus-sample-2-1431-4425',
-    lastUpdated: new Date(2021, 1, 17).toString(),
-    lastUsed: new Date(2020, 4, 23).toString(),
-    latestJobPath: '',
-    target: '120498-another-branch',
+            downloadPath: '/download-path',
             size: 3.21e8,
           },
+        ],
+      },
+    },
+  },
   {
-    name: 'Corpus-sample-5-5830-1393',
-    lastUpdated: new Date(2021, 4, 9).toString(),
-    lastUsed: new Date(2020, 8, 4).toString(),
-    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,
+    package: {
+      name: 'Corpus-sample-4-5830-1393',
+      updatedAt: new Date(2021, 5, 12).toString(),
+      pipelines,
+      packageFiles,
+    },
   },
   {
-    name: 'Corpus-sample-8-1830-1393',
-    lastUpdated: new Date(2020, 4, 9).toString(),
-    lastUsed: new Date(2019, 8, 4).toString(),
-    latestJobPath: 'gitlab-examples/security/security-reports/-/jobs/1107103952',
-    downloadPath: 'farias-gl/go-fuzzing-example/-/jobs/959593462/artifacts/download',
-    target: '',
-    size: 6.34e8,
+    package: {
+      name: 'Corpus-sample-5-13830-23932',
+      updatedAt: new Date(2021, 6, 12).toString(),
+      pipelines,
+      packageFiles,
+    },
   },
   {
-    name: 'Corpus-sample-9-2450-2393',
-    lastUpdated: new Date(2019, 4, 6).toString(),
-    lastUsed: new Date(2020, 3, 12).toString(),
-    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,
+    package: {
+      name: 'Corpus-sample-6-2450-2393',
+      updatedAt: new Date(2021, 7, 12).toString(),
+      pipelines,
+      packageFiles,
+    },
   },
 ];