Uses graphQL on the vulnerability list page

- Swaps out the REST endpoints for GraphQL data
- Uses the observer component to lazily load extra vulnerabiltiies
- Hooks up the error and loading states
- WIP: Starts work on the tests

ee/app/assets/javascripts/pages/projects/security/dashboard/index/index.js

 import initProjectSecurityDashboard from 'ee/security_dashboard/project_init';
+import initFirstClassSecurityDashboard from 'ee/security_dashboard/first_class_init';
+import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
 
-document.addEventListener('DOMContentLoaded', initProjectSecurityDashboard);
+document.addEventListener('DOMContentLoaded', () => {
+  if (gon.features?.firstClassVulnerabilities) {
+    initFirstClassSecurityDashboard(
+      document.getElementById('js-security-report-app'),
+      DASHBOARD_TYPES.PROJECT,
+    );
+  } else {
+    initProjectSecurityDashboard();
+  }
+});

ee/app/assets/javascripts/pages/projects/security/vulnerabilities/index.js

 import Vue from 'vue';
-import VulnerabilitiesApp from 'ee/vulnerabilities/components/vulnerabilities_app.vue';
-import createStore from 'ee/security_dashboard/store';
+import ProjectVulnerabilitiesApp from 'ee/vulnerabilities/components/project_vulnerabilities_app.vue';
+import createDefaultClient from '~/lib/graphql';
+import VueApollo from 'vue-apollo';
+
+Vue.use(VueApollo);
 
 function render() {
   const el = document.getElementById('app');
@@ -9,17 +12,21 @@ function render() {
     return false;
   }
 
-  const { dashboardDocumentation, emptyStateSvgPath, vulnerabilitiesEndpoint } = el.dataset;
+  const { dashboardDocumentation, emptyStateSvgPath, projectFullPath } = el.dataset;
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
 
   return new Vue({
     el,
-    store: createStore(),
+    apolloProvider,
     render(createElement) {
-      return createElement(VulnerabilitiesApp, {
+      return createElement(ProjectVulnerabilitiesApp, {
         props: {
           emptyStateSvgPath,
           dashboardDocumentation,
-          vulnerabilitiesEndpoint,
+          projectFullPath,
         },
       });
     },

ee/app/assets/javascripts/security_dashboard/components/first_class_project_dashboard.vue

+<script>
+import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
+import ProjectVulnerabilitiesApp from 'ee/vulnerabilities/components/project_vulnerabilities_app.vue';
+
+export default {
+  components: {
+    SecurityDashboardLayout,
+    ProjectVulnerabilitiesApp,
+  },
+  props: {
+    dashboardDocumentation: {
+      type: String,
+      required: true,
+    },
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
+    },
+    projectFullPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <security-dashboard-layout>
+    <project-vulnerabilities-app
+      :dashboard-documentation="dashboardDocumentation"
+      :empty-state-svg-path="emptyStateSvgPath"
+      :project-full-path="projectFullPath"
+    />
+  </security-dashboard-layout>
+</template>

ee/app/assets/javascripts/security_dashboard/first_class_init.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';
+import FirstClassProjectDashboard from './components/first_class_project_dashboard.vue';
+
+const isRequired = message => {
+  throw new Error(message);
+};
+
+export default (
+  /* eslint-disable @gitlab/require-i18n-strings */
+  el = isRequired('No element was passed to the security dashboard initializer'),
+  dashboardType = isRequired('No dashboard type was passed to the security dashboard initializer'),
+  /* eslint-enable @gitlab/require-i18n-strings */
+) => {
+  Vue.use(VueApollo);
+
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+  const { dashboardDocumentation, emptyStateSvgPath } = el.dataset;
+  const props = {
+    emptyStateSvgPath,
+    dashboardDocumentation,
+  };
+  let element;
+
+  // We'll add more of these for group and instance once we have the components
+  if (dashboardType === DASHBOARD_TYPES.PROJECT) {
+    element = FirstClassProjectDashboard;
+    props.projectFullPath = el.dataset.projectFullPath;
+  }
+
+  return new Vue({
+    el,
+    apolloProvider,
+    render(createElement) {
+      return createElement(element, { props });
+    },
+  });
+};

ee/app/assets/javascripts/vulnerabilities/components/vulnerabilities_app.vue → ee/app/assets/javascripts/vulnerabilities/components/project_vulnerabilities_app.vue

 <script>
-import { mapActions, mapState } from 'vuex';
 import { s__ } from '~/locale';
-import { GlAlert, GlEmptyState } from '@gitlab/ui';
-import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import { GlAlert, GlButton, GlEmptyState, GlIntersectionObserver } from '@gitlab/ui';
 import VulnerabilityList from 'ee/vulnerabilities/components/vulnerability_list.vue';
+import vulnerabilitiesQuery from '../graphql/project_vulnerabilities.graphql';
+import { VULNERABILITIES_PER_PAGE } from '../constants';
 
 export default {
-  name: 'VulnerabilitiesApp',
+  name: 'ProjectVulnerabilitiesApp',
   components: {
     GlAlert,
+    GlButton,
     GlEmptyState,
-    PaginationLinks,
+    GlIntersectionObserver,
     VulnerabilityList,
   },
   props: {
-    vulnerabilitiesEndpoint: {
+    dashboardDocumentation: {
       type: String,
       required: true,
     },
-    dashboardDocumentation: {
+    emptyStateSvgPath: {
       type: String,
       required: true,
     },
-    emptyStateSvgPath: {
+    projectFullPath: {
       type: String,
       required: true,
     },
   },
-  computed: {
-    ...mapState('vulnerabilities', [
-      'errorLoadingVulnerabilities',
-      'isLoadingVulnerabilities',
-      'pageInfo',
-      'vulnerabilities',
-    ]),
-    ...mapState('filters', ['activeFilters']),
+  data() {
+    return {
+      pageInfo: {},
+      vulnerabilities: [],
+      errorLoadingVulnerabilities: false,
+    };
   },
-  created() {
-    this.setVulnerabilitiesEndpoint(this.vulnerabilitiesEndpoint);
-    this.fetchVulnerabilities();
+  apollo: {
+    vulnerabilities: {
+      query: vulnerabilitiesQuery,
+      variables() {
+        return {
+          fullPath: this.projectFullPath,
+          first: VULNERABILITIES_PER_PAGE,
+        };
+      },
+      update: ({ project }) => project.vulnerabilities.nodes,
+      result({ data }) {
+        this.pageInfo = data.project.vulnerabilities.pageInfo;
+      },
+      error() {
+        this.errorLoadingVulnerabilities = true;
+      },
+    },
+  },
+  computed: {
+    isLoadingVulnerabilities() {
+      return this.$apollo.queries.vulnerabilities.loading;
+    },
+    isLoadingFirstVulnerabilities() {
+      return this.isLoadingVulnerabilities && this.vulnerabilities.length === 0;
+    },
   },
   methods: {
-    ...mapActions('vulnerabilities', ['setVulnerabilitiesEndpoint', 'fetchVulnerabilities']),
-    fetchPage(page) {
-      this.fetchVulnerabilities({ ...this.activeFilters, page });
+    fetchNextPage() {
+      if (this.pageInfo.hasNextPage) {
+        this.$apollo.queries.vulnerabilities.fetchMore({
+          variables: { after: this.pageInfo.endCursor },
+          updateQuery: (previousResult, { fetchMoreResult }) => {
+            const newResult = { ...fetchMoreResult };
+            previousResult.project.vulnerabilities.nodes.push(
+              ...fetchMoreResult.project.vulnerabilities.nodes,
+            );
+            newResult.project.vulnerabilities.nodes = previousResult.project.vulnerabilities.nodes;
+            return newResult;
+          },
+        });
+      }
     },
   },
   emptyStateDescription: s__(
@@ -63,7 +95,7 @@ export default {
     </gl-alert>
     <vulnerability-list
       v-else
-      :is-loading="isLoadingVulnerabilities"
+      :is-loading="isLoadingFirstVulnerabilities"
       :dashboard-documentation="dashboardDocumentation"
       :empty-state-svg-path="emptyStateSvgPath"
       :vulnerabilities="vulnerabilities"
@@ -78,11 +110,17 @@ export default {
         />
       </template>
     </vulnerability-list>
-    <pagination-links
-      v-if="pageInfo.total > 1"
-      class="justify-content-center prepend-top-default"
-      :page-info="pageInfo"
-      :change="fetchPage"
-    />
+    <gl-intersection-observer
+      v-if="pageInfo.hasNextPage"
+      class="text-center"
+      @appear="fetchNextPage"
+    >
+      <gl-button
+        :loading="isLoadingVulnerabilities"
+        :disabled="isLoadingVulnerabilities"
+        @click="fetchNextPage"
+        >{{ __('Load more vulnerabilities') }}</gl-button
+      >
+    </gl-intersection-observer>
   </div>
 </template>

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_list.vue

@@ -3,6 +3,7 @@ import { s__, __ } from '~/locale';
 import { GlEmptyState, GlLink, GlSkeletonLoading, GlTable } from '@gitlab/ui';
 import RemediatedBadge from './remediated_badge.vue';
 import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
+import { VULNERABILITIES_PER_PAGE } from '../constants';
 
 export default {
   name: 'VulnerabilityList',
@@ -33,15 +34,6 @@ export default {
       default: false,
     },
   },
-  methods: {
-    vulnerabilityPath({ id, path }) {
-      // Since there's no way to get this from the current data, I'll have to make it up.
-      // It will be available shortly though, so there's a fall-forward to use it once it's available
-      // We should remove this method once it's fully available.
-      // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/25740
-      return path || `vulnerabilities/${id}`;
-    },
-  },
   fields: [
     {
       key: 'state',
@@ -58,6 +50,7 @@ export default {
       label: __('Description'),
     },
   ],
+  VULNERABILITIES_PER_PAGE,
 };
 </script>
 
@@ -71,7 +64,7 @@ export default {
     responsive
   >
     <template #cell(state)="{ item }">
-      <span class="text-capitalize js-status">{{ item.state }}</span>
+      <span class="text-capitalize js-status">{{ item.state.toLowerCase() }}</span>
     </template>
 
     <template #cell(severity)="{ item }">
@@ -79,14 +72,19 @@ export default {
     </template>
 
     <template #cell(title)="{ item }">
-      <gl-link class="text-body js-description" :href="vulnerabilityPath(item)">
+      <gl-link class="text-body js-description" :href="item.vulnerabilityPath">
         {{ item.title }}
       </gl-link>
       <remediated-badge v-if="item.resolved_on_default_branch" class="ml-2" />
     </template>
 
     <template #table-busy>
-      <gl-skeleton-loading v-for="n in 10" :key="n" class="m-2 js-skeleton-loader" :lines="2" />
+      <gl-skeleton-loading
+        v-for="n in $options.VULNERABILITIES_PER_PAGE"
+        :key="n"
+        class="m-2 js-skeleton-loader"
+        :lines="2"
+      />
     </template>
 
     <template #empty>

ee/app/assets/javascripts/vulnerabilities/constants.js

 import { s__ } from '~/locale';
 
-// eslint-disable-next-line import/prefer-default-export
 export const VULNERABILITY_STATES = {
   dismissed: {
     action: 'dismiss',
@@ -21,3 +20,5 @@ export const VULNERABILITY_STATES = {
     description: s__('VulnerabilityManagement|Verified as fixed or mitigated'),
   },
 };
+
+export const VULNERABILITIES_PER_PAGE = 20;

ee/app/assets/javascripts/vulnerabilities/graphql/project_vulnerabilities.graphql

+#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
+#import "./vulnerability.fragment.graphql"
+
+query project($fullPath: ID!, $after: String, $first: Int) {
+  project(fullPath: $fullPath) {
+    vulnerabilities(after:$after, first:$first){
+      nodes{
+        ...Vulnerability
+      }
+      pageInfo {
+        ...PageInfo
+      }
+    }
+  }
+}

ee/app/assets/javascripts/vulnerabilities/graphql/vulnerability.fragment.graphql

+fragment Vulnerability on Vulnerability {
+  id
+  title
+  state
+  severity
+  vulnerabilityPath
+}

ee/app/controllers/projects/security/dashboard_controller.rb

@@ -9,6 +9,7 @@ module Projects
 
       before_action only: [:index] do
         push_frontend_feature_flag(:hide_dismissed_vulnerabilities)
+        push_frontend_feature_flag(:first_class_vulnerabilities, @project)
       end
 
       def index

ee/app/helpers/ee/projects_helper.rb

@@ -209,6 +209,7 @@ module EE
       else
         {
           project: { id: project.id, name: project.name },
+          project_full_path: project.full_path,
           vulnerabilities_endpoint: project_security_vulnerability_findings_path(project),
           vulnerabilities_summary_endpoint: summary_project_security_vulnerability_findings_path(project),
           vulnerability_feedback_help_path: help_page_path("user/application_security/index", anchor: "interacting-with-the-vulnerabilities"),

ee/app/views/projects/security/vulnerabilities/index.html.haml

@@ -8,6 +8,7 @@
   #app{ data: { empty_state_svg_path: image_path('illustrations/security-dashboard_empty.svg'),
     vulnerabilities_endpoint: expose_path(api_v4_projects_vulnerabilities_path(id: @project.id)),
     vulnerability_exports_endpoint: expose_path(api_v4_projects_vulnerability_exports_path(id: @project.id)),
+    project_full_path: @project.full_path,
     dashboard_documentation: help_page_path('user/application_security/security_dashboard/index') } }
     -# Display table loading animation while Vue app loads
     %table.table.gl-table

ee/spec/frontend/vulnerabilities/project_vulnerabilities_app_spec.js

+import { GlAlert, GlIntersectionObserver } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import ProjectVulnerabilitiesApp from 'ee/vulnerabilities/components/project_vulnerabilities_app.vue';
+import VulnerabilityList from 'ee/vulnerabilities/components/vulnerability_list.vue';
+import { generateVulnerabilities } from './mock_data';
+
+describe('Vulnerabilities app component', () => {
+  let wrapper;
+  const apolloMock = {
+    queries: { vulnerabilities: { loading: true } },
+  };
+
+  const createWrapper = ({ props = {}, $apollo = apolloMock } = {}, options = {}) => {
+    return shallowMount(ProjectVulnerabilitiesApp, {
+      propsData: {
+        dashboardDocumentation: '#',
+        emptyStateSvgPath: '#',
+        projectFullPath: '#',
+        ...props,
+      },
+      mocks: {
+        $apollo,
+        fetchNextPage: () => {},
+      },
+      ...options,
+    });
+  };
+
+  const findIntersectionObserver = () => wrapper.find(GlIntersectionObserver);
+  const findAlert = () => wrapper.find(GlAlert);
+  const findVulnerabilityList = () => wrapper.find(VulnerabilityList);
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when the vulnerabilities are loading', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('should be in the loading state', () => {
+      expect(findVulnerabilityList().props().isLoading).toBe(true);
+    });
+  });
+
+  describe('with some vulnerabilities', () => {
+    let vulnerabilities;
+
+    beforeEach(() => {
+      createWrapper();
+
+      vulnerabilities = generateVulnerabilities();
+      wrapper.setData({
+        vulnerabilities,
+      });
+    });
+
+    it('should not be in the loading state', () => {
+      expect(findVulnerabilityList().props().isLoading).toBe(false);
+    });
+
+    it('should pass the vulnerabilities to the vulnerabilities list', () => {
+      expect(findVulnerabilityList().props().vulnerabilities).toEqual(vulnerabilities);
+    });
+
+    it('should not render the observer component', () => {
+      expect(findIntersectionObserver().exists()).toBe(false);
+    });
+
+    it('should not render the alert', () => {
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('with more than a page of vulnerabilities', () => {
+    let vulnerabilities;
+
+    beforeEach(() => {
+      createWrapper();
+
+      vulnerabilities = generateVulnerabilities();
+      wrapper.setData({
+        vulnerabilities,
+        pageInfo: {
+          hasNextPage: true,
+        },
+      });
+    });
+
+    it('should render the observer component', () => {
+      expect(findIntersectionObserver().exists()).toBe(true);
+    });
+  });
+
+  describe("when there's a loading error", () => {
+    beforeEach(() => {
+      createWrapper();
+      wrapper.setData({ errorLoadingVulnerabilities: true });
+    });
+
+    it('should render the alert', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+  });
+});

ee/spec/frontend/vulnerabilities/vulnerabilities_app_spec.js

-import { shallowMount } from '@vue/test-utils';
-import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
-import { waitForMutation } from 'helpers/vue_test_utils_helper';
-import createStore from 'ee/security_dashboard/store';
-import VulnerabilitiesApp from 'ee/vulnerabilities/components/vulnerabilities_app.vue';
-import VulnerabilityList from 'ee/vulnerabilities/components/vulnerability_list.vue';
-import { vulnerabilities } from './mock_data';
-
-describe('Vulnerabilities app component', () => {
-  let store;
-  let wrapper;
-
-  const WORKING_ENDPOINT = 'WORKING_ENDPOINT';
-
-  const mock = new MockAdapter(axios);
-
-  const createWrapper = props => {
-    store = createStore();
-
-    return shallowMount(VulnerabilitiesApp, {
-      propsData: {
-        dashboardDocumentation: '#',
-        emptyStateSvgPath: '#',
-        vulnerabilitiesEndpoint: '',
-        ...props,
-      },
-      store,
-    });
-  };
-
-  beforeEach(() => {
-    mock.onGet(WORKING_ENDPOINT).replyOnce(200, vulnerabilities);
-    wrapper = createWrapper({ vulnerabilitiesEndpoint: WORKING_ENDPOINT });
-    return waitForMutation(wrapper.vm.$store, `vulnerabilities/RECEIVE_VULNERABILITIES_SUCCESS`);
-  });
-
-  afterEach(() => {
-    mock.restore();
-    wrapper.destroy();
-  });
-
-  it('should pass the vulnerabilties to the vulnerabilites list', () => {
-    const vulnerabilityList = wrapper.find(VulnerabilityList);
-
-    expect(vulnerabilityList.props().vulnerabilities).toEqual(vulnerabilities);
-  });
-});

locale/gitlab.pot

@@ -12051,6 +12051,9 @@ msgstr ""
 msgid "Live preview"
 msgstr ""
 
+msgid "Load more vulnerabilities"
+msgstr ""
+
 msgid "Loading"
 msgstr ""