Merge branch '10077-add-dependency-scanning-to-dl-add-status-column-ee' into 'master'

Display vulnerabilities in Dependency List

See merge request gitlab-org/gitlab-ee!14531

app/assets/stylesheets/framework/common.scss

@@ -434,6 +434,7 @@ img.emoji {
 
 /** COMMON SIZING CLASSES **/
 .w-0 { width: 0; }
+.w-8em { width: 8em; }
 
 .h-12em { height: 12em; }
 

ee/app/assets/javascripts/dependencies/components/constants.js

@@ -6,3 +6,8 @@ export const DANGER_ALERT_CLASS = 'danger_message';
 
 export const WARNING_TEXT_CLASS = 'text-warning-900';
 export const DANGER_TEXT_CLASS = 'text-danger-900';
+
+// Limit the number of vulnerabilities to display so as to avoid jank.
+// In practice, this limit will probably never be reached, since the
+// largest number of vulnerabilities we've seen one dependency have is 20.
+export const MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY = 50;

ee/app/assets/javascripts/dependencies/components/dependencies_table.vue

@@ -7,6 +7,12 @@ export default {
   components: {
     DependenciesTableRow,
   },
+  inject: {
+    dependencyListVulnerabilities: {
+      from: 'dependencyListVulnerabilities',
+      default: false,
+    },
+  },
   props: {
     dependencies: {
       type: Array,
@@ -18,14 +24,18 @@ export default {
     },
   },
   data() {
-    return {
-      tableSections: [
+    const tableSections = [
       { className: 'section-20', label: s__('Dependencies|Component') },
       { className: 'section-15', label: s__('Dependencies|Version') },
       { className: 'section-20', label: s__('Dependencies|Packager') },
       { className: 'flex-grow-1', label: s__('Dependencies|Location') },
-      ],
-    };
+    ];
+
+    if (this.dependencyListVulnerabilities) {
+      tableSections.unshift({ className: 'section-15', label: s__('Dependencies|Status') });
+    }
+
+    return { tableSections };
   },
 };
 </script>

ee/app/assets/javascripts/dependencies/components/dependencies_table_row.vue

 <script>
-import { GlSkeletonLoading } from '@gitlab/ui';
+import { GlButton, GlSkeletonLoading } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import DependencyVulnerability from './dependency_vulnerability.vue';
+import { MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY } from './constants';
 
 export default {
   name: 'DependenciesTableRow',
   components: {
+    DependencyVulnerability,
+    GlButton,
     GlSkeletonLoading,
+    Icon,
+  },
+  inject: {
+    dependencyListVulnerabilities: {
+      from: 'dependencyListVulnerabilities',
+      default: false,
+    },
   },
   props: {
     dependency: {
@@ -18,11 +30,124 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      isExpanded: false,
+    };
+  },
+  computed: {
+    toggleArrowName() {
+      return this.isExpanded ? 'arrow-up' : 'arrow-down';
+    },
+    vulnerabilities() {
+      const { vulnerabilities = [] } = this.dependency || {};
+      return vulnerabilities;
+    },
+    isVulnerable() {
+      return this.vulnerabilities.length > 0;
+    },
+    renderableVulnerabilities() {
+      return this.vulnerabilities.slice(0, MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY);
+    },
+    vulnerabilitiesNotShown() {
+      return Math.max(
+        0,
+        this.vulnerabilities.length - MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY,
+      );
+    },
+  },
+  watch: {
+    dependency: 'collapseVulnerabilities',
+    isLoading: 'collapseVulnerabilities',
+  },
+  methods: {
+    toggleVulnerabilities() {
+      this.isExpanded = !this.isExpanded;
+    },
+    collapseVulnerabilities() {
+      this.isExpanded = false;
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="gl-responsive-table-row p-2">
+  <div
+    v-if="dependencyListVulnerabilities"
+    class="gl-responsive-table-row flex-md-column align-items-md-stretch px-2"
+  >
+    <gl-skeleton-loading
+      v-if="isLoading"
+      :lines="1"
+      class="d-flex flex-column justify-content-center h-auto"
+    />
+    <div v-else class="d-md-flex align-items-baseline">
+      <div class="table-section section-15 section-wrap">
+        <div class="table-mobile-header" role="rowheader">{{ s__('Dependencies|Status') }}</div>
+        <div class="table-mobile-content">
+          <gl-button
+            v-if="isVulnerable"
+            class="bold text-warning-700 text-1 text-decoration-none js-vulnerabilities-toggle"
+            variant="link"
+            @click="toggleVulnerabilities"
+          >
+            <icon :name="toggleArrowName" class="align-top text-secondary-700 d-none d-md-inline" />
+            {{
+              n__(
+                'Dependencies|%d vulnerability',
+                'Dependencies|%d vulnerabilities',
+                vulnerabilities.length,
+              )
+            }}
+          </gl-button>
+          <span v-else class="text-success-500 text-1">
+            <icon name="check-circle" class="align-middle mr-1" />{{ s__('Dependencies|Safe') }}
+          </span>
+        </div>
+      </div>
+
+      <div class="table-section section-20 section-wrap">
+        <div class="table-mobile-header" role="rowheader">
+          {{ s__('Dependencies|Component') }}
+        </div>
+        <div class="table-mobile-content">{{ dependency.name }}</div>
+      </div>
+
+      <div class="table-section section-15">
+        <div class="table-mobile-header" role="rowheader">{{ s__('Dependencies|Version') }}</div>
+        <div class="table-mobile-content">{{ dependency.version }}</div>
+      </div>
+
+      <div class="table-section section-20 section-wrap">
+        <div class="table-mobile-header" role="rowheader">{{ s__('Dependencies|Packager') }}</div>
+        <div class="table-mobile-content">{{ dependency.packager }}</div>
+      </div>
+
+      <div class="table-section flex-grow-1 section-wrap">
+        <div class="table-mobile-header" role="rowheader">{{ s__('Dependencies|Location') }}</div>
+        <div class="table-mobile-content">
+          <a :href="dependency.location.blob_path">{{ dependency.location.path }}</a>
+        </div>
+      </div>
+    </div>
+
+    <ul v-if="isExpanded" class="d-none d-md-block list-unstyled mb-1">
+      <li v-for="vulnerability in renderableVulnerabilities" :key="vulnerability.id">
+        <dependency-vulnerability :vulnerability="vulnerability" class="mt-3" />
+      </li>
+      <li v-if="vulnerabilitiesNotShown" class="text-muted text-center mt-3 js-excess-message">
+        {{
+          n__(
+            'Dependencies|%d additional vulnerability not shown',
+            'Dependencies|%d additional vulnerabilities not shown',
+            vulnerabilitiesNotShown,
+          )
+        }}
+      </li>
+    </ul>
+  </div>
+
+  <div v-else class="gl-responsive-table-row p-2">
     <gl-skeleton-loading
       v-if="isLoading"
       :lines="1"

ee/app/assets/javascripts/dependencies/components/dependency_vulnerability.vue

+<script>
+import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
+
+export default {
+  name: 'DependencyVulnerability',
+  components: {
+    SeverityBadge,
+  },
+  props: {
+    vulnerability: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex align-items-baseline">
+    <div class="w-8em flex-shrink-0 text-right mr-3">
+      <severity-badge :severity="vulnerability.severity" />
+    </div>
+    {{ vulnerability.name }}
+  </div>
+</template>

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_row_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DependenciesTableRow component given the dependencyListVulnerabilities flag is enabled when a dependency with no vulnerabilities is loaded matches the snapshot 1`] = `
+<div
+  class="gl-responsive-table-row flex-md-column align-items-md-stretch px-2"
+>
+  <div
+    class="d-md-flex align-items-baseline"
+  >
+    <div
+      class="table-section section-15 section-wrap"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        Status
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        <span
+          class="text-success-500 text-1"
+        >
+          <icon-stub
+            class="align-middle mr-1"
+            cssclasses=""
+            name="check-circle"
+            size="16"
+          />
+          Safe
+        
+        </span>
+      </div>
+    </div>
+     
+    <div
+      class="table-section section-20 section-wrap"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        
+        Component
+      
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        left-pad
+      </div>
+    </div>
+     
+    <div
+      class="table-section section-15"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        Version
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        0.0.3
+      </div>
+    </div>
+     
+    <div
+      class="table-section section-20 section-wrap"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        Packager
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        JavaScript (yarn)
+      </div>
+    </div>
+     
+    <div
+      class="table-section flex-grow-1 section-wrap"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        Location
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        <a
+          href="/a-group/a-project/blob/da39a3ee5e6b4b0d3255bfef95601890afd80709/yarn.lock"
+        >
+          yarn.lock
+        </a>
+      </div>
+    </div>
+  </div>
+   
+  <!---->
+</div>
+`;
+
+exports[`DependenciesTableRow component given the dependencyListVulnerabilities flag is enabled when a dependency with vulnerabilities is loaded matches the snapshot 1`] = `
+<div
+  class="gl-responsive-table-row flex-md-column align-items-md-stretch px-2"
+>
+  <div
+    class="d-md-flex align-items-baseline"
+  >
+    <div
+      class="table-section section-15 section-wrap"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        Status
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        <glbutton-stub
+          class="bold text-warning-700 text-1 text-decoration-none js-vulnerabilities-toggle"
+          variant="link"
+        >
+          <icon-stub
+            class="align-top text-secondary-700 d-none d-md-inline"
+            cssclasses=""
+            name="arrow-down"
+            size="16"
+          />
+          
+          7 vulnerabilities
+        
+        </glbutton-stub>
+      </div>
+    </div>
+     
+    <div
+      class="table-section section-20 section-wrap"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        
+        Component
+      
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        left-pad
+      </div>
+    </div>
+     
+    <div
+      class="table-section section-15"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        Version
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        0.0.3
+      </div>
+    </div>
+     
+    <div
+      class="table-section section-20 section-wrap"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        Packager
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        JavaScript (yarn)
+      </div>
+    </div>
+     
+    <div
+      class="table-section flex-grow-1 section-wrap"
+    >
+      <div
+        class="table-mobile-header"
+        role="rowheader"
+      >
+        Location
+      </div>
+       
+      <div
+        class="table-mobile-content"
+      >
+        <a
+          href="/a-group/a-project/blob/da39a3ee5e6b4b0d3255bfef95601890afd80709/yarn.lock"
+        >
+          yarn.lock
+        </a>
+      </div>
+    </div>
+  </div>
+   
+  <!---->
+</div>
+`;
+
+exports[`DependenciesTableRow component given the dependencyListVulnerabilities flag is enabled when loading matches the snapshot 1`] = `
+<div
+  class="gl-responsive-table-row flex-md-column align-items-md-stretch px-2"
+>
+  <glskeletonloading-stub
+    class="d-flex flex-column justify-content-center h-auto"
+    lines="1"
+  />
+   
+  <!---->
+</div>
+`;
+
+exports[`DependenciesTableRow component given the dependencyListVulnerabilities flag is enabled when passed no props matches the snapshot 1`] = `
+<div
+  class="gl-responsive-table-row flex-md-column align-items-md-stretch px-2"
+>
+  <glskeletonloading-stub
+    class="d-flex flex-column justify-content-center h-auto"
+    lines="1"
+  />
+   
+  <!---->
+</div>
+`;
+
 exports[`DependenciesTableRow component when a dependency is loaded matches the snapshot 1`] = `
 <div
   class="gl-responsive-table-row p-2"

ee/spec/frontend/dependencies/components/__snapshots__/dependencies_table_spec.js.snap

@@ -142,3 +142,170 @@ exports[`DependenciesTable component given an empty list of dependencies matches
    
 </div>
 `;
+
+exports[`DependenciesTable component given the dependencyListVulnerabilities flag is enabled given a list of dependencies (loaded) matches the snapshot 1`] = `
+<div>
+  <div
+    class="gl-responsive-table-row table-row-header text-2 bg-secondary-50 px-2"
+    role="row"
+  >
+    <div
+      class="table-section section-15"
+      role="rowheader"
+    >
+      
+      Status
+    
+    </div>
+    <div
+      class="table-section section-20"
+      role="rowheader"
+    >
+      
+      Component
+    
+    </div>
+    <div
+      class="table-section section-15"
+      role="rowheader"
+    >
+      
+      Version
+    
+    </div>
+    <div
+      class="table-section section-20"
+      role="rowheader"
+    >
+      
+      Packager
+    
+    </div>
+    <div
+      class="table-section flex-grow-1"
+      role="rowheader"
+    >
+      
+      Location
+    
+    </div>
+  </div>
+   
+  <dependenciestablerow-stub
+    dependency="[object Object]"
+  />
+  <dependenciestablerow-stub
+    dependency="[object Object]"
+  />
+</div>
+`;
+
+exports[`DependenciesTable component given the dependencyListVulnerabilities flag is enabled given a list of dependencies (loading) matches the snapshot 1`] = `
+<div>
+  <div
+    class="gl-responsive-table-row table-row-header text-2 bg-secondary-50 px-2"
+    role="row"
+  >
+    <div
+      class="table-section section-15"
+      role="rowheader"
+    >
+      
+      Status
+    
+    </div>
+    <div
+      class="table-section section-20"
+      role="rowheader"
+    >
+      
+      Component
+    
+    </div>
+    <div
+      class="table-section section-15"
+      role="rowheader"
+    >
+      
+      Version
+    
+    </div>
+    <div
+      class="table-section section-20"
+      role="rowheader"
+    >
+      
+      Packager
+    
+    </div>
+    <div
+      class="table-section flex-grow-1"
+      role="rowheader"
+    >
+      
+      Location
+    
+    </div>
+  </div>
+   
+  <dependenciestablerow-stub
+    dependency="[object Object]"
+    isloading="true"
+  />
+  <dependenciestablerow-stub
+    dependency="[object Object]"
+    isloading="true"
+  />
+</div>
+`;
+
+exports[`DependenciesTable component given the dependencyListVulnerabilities flag is enabled given an empty list of dependencies matches the snapshot 1`] = `
+<div>
+  <div
+    class="gl-responsive-table-row table-row-header text-2 bg-secondary-50 px-2"
+    role="row"
+  >
+    <div
+      class="table-section section-15"
+      role="rowheader"
+    >
+      
+      Status
+    
+    </div>
+    <div
+      class="table-section section-20"
+      role="rowheader"
+    >
+      
+      Component
+    
+    </div>
+    <div
+      class="table-section section-15"
+      role="rowheader"
+    >
+      
+      Version
+    
+    </div>
+    <div
+      class="table-section section-20"
+      role="rowheader"
+    >
+      
+      Packager
+    
+    </div>
+    <div
+      class="table-section flex-grow-1"
+      role="rowheader"
+    >
+      
+      Location
+    
+    </div>
+  </div>
+   
+</div>
+`;

ee/spec/frontend/dependencies/components/__snapshots__/dependency_vulnerability_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DependencyVulnerability component given an vulnerability matches the snapshot 1`] = `
+<div
+  class="d-flex align-items-baseline"
+>
+  <div
+    class="w-8em flex-shrink-0 text-right mr-3"
+  >
+    <severitybadge-stub
+      severity="critical"
+    />
+  </div>
+  
+  Insecure variable usage
+
+</div>
+`;

ee/spec/frontend/dependencies/components/dependencies_table_row_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import DependenciesTableRow from 'ee/dependencies/components/dependencies_table_row.vue';
-import { makeDependency } from './utils';
+import DependencyVulnerability from 'ee/dependencies/components/dependency_vulnerability.vue';
+import { MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY } from 'ee/dependencies/components/constants';
+import { makeDependency, provideEnabledFeatureFlag } from './utils';
+import mockDataVulnerabilities from '../../../javascripts/security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities.json';
 
 describe('DependenciesTableRow component', () => {
   let wrapper;
 
-  const factory = (props = {}) => {
+  const factory = ({ propsData, ...options } = {}) => {
     const localVue = createLocalVue();
 
     wrapper = shallowMount(localVue.extend(DependenciesTableRow), {
+      ...options,
       localVue,
       sync: false,
-      propsData: { ...props },
+      propsData: { ...propsData },
     });
   };
 
+  const findVulnerabilities = () => wrapper.findAll(DependencyVulnerability).wrappers;
+  const findExcessMessage = () => wrapper.find('.js-excess-message');
+  const expectVulnerabilitiesCollapsed = () => expect(findVulnerabilities()).toHaveLength(0);
+
+  const expectVulnerabilitiesExpanded = vulnerabilities => {
+    const wrappers = findVulnerabilities();
+    expect(wrappers).toHaveLength(vulnerabilities.length);
+    wrappers.forEach((vulnerabilityWrapper, i) => {
+      expect(vulnerabilityWrapper.isVisible()).toBe(true);
+      expect(vulnerabilityWrapper.props().vulnerability).toEqual(vulnerabilities[i]);
+    });
+    expect(findExcessMessage().exists()).toBe(false);
+  };
+
+  const clickToggle = () => {
+    wrapper.find('.js-vulnerabilities-toggle').vm.$emit('click');
+    return wrapper.vm.$nextTick();
+  };
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -32,7 +55,9 @@ describe('DependenciesTableRow component', () => {
   describe('when loading', () => {
     beforeEach(() => {
       factory({
+        propsData: {
           isLoading: true,
+        },
       });
     });
 
@@ -44,8 +69,36 @@ describe('DependenciesTableRow component', () => {
   describe('when a dependency is loaded', () => {
     beforeEach(() => {
       factory({
+        propsData: {
           isLoading: false,
           dependency: makeDependency(),
+        },
+      });
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('given the dependencyListVulnerabilities flag is enabled', () => {
+    describe('when passed no props', () => {
+      beforeEach(() => {
+        factory(provideEnabledFeatureFlag());
+      });
+
+      it('matches the snapshot', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+    });
+
+    describe('when loading', () => {
+      beforeEach(() => {
+        factory({
+          ...provideEnabledFeatureFlag(),
+          propsData: {
+            isLoading: true,
+          },
         });
       });
 
@@ -53,4 +106,98 @@ describe('DependenciesTableRow component', () => {
         expect(wrapper.element).toMatchSnapshot();
       });
     });
+
+    describe('when a dependency with no vulnerabilities is loaded', () => {
+      beforeEach(() => {
+        factory({
+          ...provideEnabledFeatureFlag(),
+          propsData: {
+            isLoading: false,
+            dependency: makeDependency({ vulnerabilities: [] }),
+          },
+        });
+      });
+
+      it('matches the snapshot', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+    });
+
+    describe('when a dependency with vulnerabilities is loaded', () => {
+      beforeEach(() => {
+        factory({
+          ...provideEnabledFeatureFlag(),
+          propsData: {
+            isLoading: false,
+            dependency: makeDependency({ vulnerabilities: mockDataVulnerabilities }),
+          },
+        });
+      });
+
+      it('matches the snapshot', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+
+      describe('when the list of vulnerabilities is expanded', () => {
+        beforeEach(clickToggle);
+
+        it('renders each vulnerability', () => {
+          expectVulnerabilitiesExpanded(mockDataVulnerabilities);
+        });
+
+        describe('when clicking the toggle ', () => {
+          beforeEach(clickToggle);
+
+          it('closes the list of vulnerabilities', expectVulnerabilitiesCollapsed);
+        });
+
+        describe('when the dependency prop changes', () => {
+          beforeEach(() => {
+            wrapper.setProps({
+              dependency: makeDependency({ vulnerabilities: mockDataVulnerabilities }),
+            });
+
+            return wrapper.vm.$nextTick();
+          });
+
+          it('closes the list of vulnerabilities', expectVulnerabilitiesCollapsed);
+        });
+
+        describe('when the isLoading prop changes', () => {
+          beforeEach(() => {
+            wrapper.setProps({
+              isLoading: true,
+            });
+
+            return wrapper.vm.$nextTick();
+          });
+
+          it('closes the list of vulnerabilities', expectVulnerabilitiesCollapsed);
+        });
+      });
+    });
+
+    describe('when a dependency with a huge number vulnerabilities is loaded and expanded', () => {
+      beforeEach(() => {
+        const hugeNumberOfVulnerabilities = Array(1 + MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY)
+          .fill(null)
+          .map((_, id) => ({ id }));
+
+        factory({
+          ...provideEnabledFeatureFlag(),
+          propsData: {
+            isLoading: false,
+            dependency: makeDependency({ vulnerabilities: hugeNumberOfVulnerabilities }),
+          },
+        });
+
+        return clickToggle();
+      });
+
+      it('does not render all of them', () => {
+        expect(findVulnerabilities().length).toBe(MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY);
+        expect(findExcessMessage().isVisible()).toBe(true);
+      });
+    });
+  });
 });

ee/spec/frontend/dependencies/components/dependencies_table_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import DependenciesTable from 'ee/dependencies/components/dependencies_table.vue';
 import DependenciesTableRow from 'ee/dependencies/components/dependencies_table_row.vue';
-import { makeDependency } from './utils';
+import { makeDependency, provideEnabledFeatureFlag } from './utils';
 
 describe('DependenciesTable component', () => {
   let wrapper;
 
-  const factory = (props = {}) => {
+  const factory = ({ propsData, ...options } = {}) => {
     const localVue = createLocalVue();
 
     wrapper = shallowMount(localVue.extend(DependenciesTable), {
+      ...options,
       localVue,
       sync: false,
-      propsData: { ...props },
+      propsData: { ...propsData },
     });
   };
 
@@ -23,8 +24,10 @@ describe('DependenciesTable component', () => {
   describe('given an empty list of dependencies', () => {
     beforeEach(() => {
       factory({
+        propsData: {
           dependencies: [],
           isLoading: false,
+        },
       });
     });
 
@@ -39,8 +42,10 @@ describe('DependenciesTable component', () => {
       beforeEach(() => {
         dependencies = [makeDependency(), makeDependency({ name: 'foo' })];
         factory({
+          propsData: {
             dependencies,
             isLoading,
+          },
         });
       });
 
@@ -61,4 +66,54 @@ describe('DependenciesTable component', () => {
       });
     });
   });
+
+  describe('given the dependencyListVulnerabilities flag is enabled', () => {
+    describe('given an empty list of dependencies', () => {
+      beforeEach(() => {
+        factory({
+          ...provideEnabledFeatureFlag(),
+          propsData: {
+            dependencies: [],
+            isLoading: false,
+          },
+        });
+      });
+
+      it('matches the snapshot', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+    });
+
+    [true, false].forEach(isLoading => {
+      describe(`given a list of dependencies (${isLoading ? 'loading' : 'loaded'})`, () => {
+        let dependencies;
+        beforeEach(() => {
+          dependencies = [makeDependency(), makeDependency({ name: 'foo' })];
+          factory({
+            ...provideEnabledFeatureFlag(),
+            propsData: {
+              dependencies,
+              isLoading,
+            },
+          });
+        });
+
+        it('matches the snapshot', () => {
+          expect(wrapper.element).toMatchSnapshot();
+        });
+
+        it('passes the correct props to the table rows', () => {
+          const rows = wrapper.findAll(DependenciesTableRow).wrappers;
+          rows.forEach((row, index) => {
+            expect(row.props()).toEqual(
+              expect.objectContaining({
+                dependency: dependencies[index],
+                isLoading,
+              }),
+            );
+          });
+        });
+      });
+    });
+  });
 });

ee/spec/frontend/dependencies/components/dependency_vulnerability_spec.js

+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import DependencyVulnerability from 'ee/dependencies/components/dependency_vulnerability.vue';
+import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
+import mockDataVulnerabilities from '../../../javascripts/security_dashboard/store/vulnerabilities/data/mock_data_vulnerabilities.json';
+
+describe('DependencyVulnerability component', () => {
+  let wrapper;
+
+  const factory = ({ propsData, ...options } = {}) => {
+    const localVue = createLocalVue();
+
+    wrapper = shallowMount(localVue.extend(DependencyVulnerability), {
+      ...options,
+      localVue,
+      sync: false,
+      propsData: { ...propsData },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('given an vulnerability', () => {
+    const vulnerability = mockDataVulnerabilities[0];
+    beforeEach(() => {
+      factory({
+        propsData: {
+          vulnerability,
+        },
+      });
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('renders the severity badge with the correct props', () => {
+      const badge = wrapper.find(SeverityBadge);
+      expect(badge.isVisible()).toBe(true);
+      expect(badge.props().severity).toEqual(vulnerability.severity);
+    });
+  });
+});

ee/spec/frontend/dependencies/components/utils.js

-// eslint-disable-next-line import/prefer-default-export
 export const makeDependency = (changes = {}) => ({
   name: 'left-pad',
   version: '0.0.3',
@@ -9,3 +8,7 @@ export const makeDependency = (changes = {}) => ({
   },
   ...changes,
 });
+
+export const provideEnabledFeatureFlag = () => ({
+  provide: { dependencyListVulnerabilities: true },
+});

locale/gitlab.pot

@@ -4282,6 +4282,16 @@ msgstr ""
 msgid "Dependencies"
 msgstr ""
 
+msgid "Dependencies|%d additional vulnerability not shown"
+msgid_plural "Dependencies|%d additional vulnerabilities not shown"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "Dependencies|%d vulnerability"
+msgid_plural "Dependencies|%d vulnerabilities"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Dependencies|Component"
 msgstr ""
 
@@ -4300,6 +4310,12 @@ msgstr ""
 msgid "Dependencies|Packager"
 msgstr ""
 
+msgid "Dependencies|Safe"
+msgstr ""
+
+msgid "Dependencies|Status"
+msgstr ""
+
 msgid "Dependencies|The %{codeStartTag}dependency_scanning%{codeEndTag} job has failed and cannot generate the list. Please ensure the job is running properly and run the pipeline again."
 msgstr ""