Merge branch '10077-add-dependency-scanning-to-dl-add-sort-by-severity-ee' into 'master'

Add ability to sort Dependency List by Severity

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

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

@@ -31,11 +31,6 @@ export default {
       type: String,
       required: true,
     },
-    dependencyListVulnerabilities: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {

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

@@ -3,7 +3,11 @@ import { mapActions, mapState } from 'vuex';
 import { GlButton, GlDropdown, GlDropdownItem, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { DEPENDENCY_LIST_TYPES } from '../store/constants';
-import { SORT_ORDER } from '../store/modules/list/constants';
+import {
+  SORT_FIELDS,
+  SORT_FIELDS_WITH_SEVERITY,
+  SORT_ORDER,
+} from '../store/modules/list/constants';
 
 export default {
   name: 'DependenciesActions',
@@ -16,6 +20,12 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  inject: {
+    dependencyListVulnerabilities: {
+      from: 'dependencyListVulnerabilities',
+      default: false,
+    },
+  },
   props: {
     namespace: {
       type: String,
@@ -23,14 +33,16 @@ export default {
       validator: value => Object.values(DEPENDENCY_LIST_TYPES).includes(value),
     },
   },
+  data() {
+    return {
+      sortFields: this.dependencyListVulnerabilities ? SORT_FIELDS_WITH_SEVERITY : SORT_FIELDS,
+    };
+  },
   computed: {
     ...mapState({
       sortField(state) {
         return state[this.namespace].sortField;
       },
-      sortFields(state) {
-        return state[this.namespace].sortFields;
-      },
       sortOrder(state) {
         return state[this.namespace].sortOrder;
       },

ee/app/assets/javascripts/dependencies/index.js

@@ -15,13 +15,15 @@ export default () => {
     components: {
       DependenciesApp,
     },
+    provide: {
+      dependencyListVulnerabilities,
+    },
     render(createElement) {
       return createElement(DependenciesApp, {
         props: {
           endpoint,
           emptyStateSvgPath,
           documentationPath,
-          dependencyListVulnerabilities,
         },
       });
     },

ee/app/assets/javascripts/dependencies/store/modules/list/constants.js

@@ -5,6 +5,11 @@ export const SORT_FIELDS = {
   packager: s__('Dependencies|Packager'),
 };
 
+export const SORT_FIELDS_WITH_SEVERITY = {
+  ...SORT_FIELDS,
+  severity: s__('Vulnerability|Severity'),
+};
+
 export const SORT_ORDER = {
   ascending: 'asc',
   descending: 'desc',

ee/app/assets/javascripts/dependencies/store/modules/list/state.js

-import { REPORT_STATUS, SORT_FIELDS, SORT_ORDER } from './constants';
+import { REPORT_STATUS, SORT_ORDER } from './constants';
 
 export default () => ({
   endpoint: '',
@@ -12,6 +12,5 @@ export default () => ({
     jobPath: '',
   },
   sortField: 'name',
-  sortFields: SORT_FIELDS,
   sortOrder: SORT_ORDER.ascending,
 });

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

@@ -72,3 +72,91 @@ exports[`DependenciesActions component matches the snapshot 1`] = `
   </glbutton-stub>
 </div>
 `;
+
+exports[`DependenciesActions component with feature flag enabled matches the snapshot 1`] = `
+<div
+  class="btn-toolbar"
+>
+  <div
+    class="btn-group flex-grow-1 mr-2"
+  >
+    <gldropdown-stub
+      class="flex-grow-1 text-center"
+      right=""
+      text="Component name"
+    >
+      <gldropdownitem-stub>
+        <span
+          class="d-flex"
+        >
+          <icon-stub
+            class="flex-shrink-0 append-right-4"
+            cssclasses=""
+            name="mobile-issue-close"
+            size="16"
+          />
+          
+          Component name
+        
+        </span>
+      </gldropdownitem-stub>
+      <gldropdownitem-stub>
+        <span
+          class="d-flex"
+        >
+          <icon-stub
+            class="flex-shrink-0 append-right-4 invisible"
+            cssclasses=""
+            name="mobile-issue-close"
+            size="16"
+          />
+          
+          Packager
+        
+        </span>
+      </gldropdownitem-stub>
+      <gldropdownitem-stub>
+        <span
+          class="d-flex"
+        >
+          <icon-stub
+            class="flex-shrink-0 append-right-4 invisible"
+            cssclasses=""
+            name="mobile-issue-close"
+            size="16"
+          />
+          
+          Severity
+        
+        </span>
+      </gldropdownitem-stub>
+    </gldropdown-stub>
+     
+    <glbutton-stub
+      class="flex-grow-0 js-sort-order"
+      data-original-title="Sort direction"
+      title=""
+    >
+      <icon-stub
+        cssclasses=""
+        name="sort-lowest"
+        size="16"
+      />
+    </glbutton-stub>
+  </div>
+   
+  <glbutton-stub
+    class="js-download"
+    data-original-title="Export as JSON"
+    download="dependencies.json"
+    href="http://test.host/dependencies.json"
+    title=""
+  >
+    <icon-stub
+      cssclasses=""
+      name="download"
+      size="16"
+    />
+  </glbutton-stub>
+</div>
+`;

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

@@ -3,30 +3,41 @@ import { GlDropdownItem } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import createStore from 'ee/dependencies/store';
 import { DEPENDENCY_LIST_TYPES } from 'ee/dependencies/store/constants';
-import { SORT_FIELDS } from 'ee/dependencies/store/modules/list/constants';
+import {
+  SORT_FIELDS,
+  SORT_FIELDS_WITH_SEVERITY,
+} from 'ee/dependencies/store/modules/list/constants';
 import DependenciesActions from 'ee/dependencies/components/dependencies_actions.vue';
 
-describe('DependenciesActions component', () => {
+describe.each`
+  context                         | isFeatureFlagEnabled | sortFields
+  ${''}                           | ${false}             | ${SORT_FIELDS}
+  ${' with feature flag enabled'} | ${true}              | ${SORT_FIELDS_WITH_SEVERITY}
+`('DependenciesActions component$context', ({ isFeatureFlagEnabled, sortFields }) => {
   let store;
   let wrapper;
   const listType = DEPENDENCY_LIST_TYPES.all;
 
-  const factory = (props = {}) => {
+  const factory = ({ propsData, ...options } = {}) => {
     const localVue = createLocalVue();
 
     store = createStore();
     jest.spyOn(store, 'dispatch').mockImplementation();
 
     wrapper = shallowMount(localVue.extend(DependenciesActions), {
+      ...options,
       localVue,
       store,
       sync: false,
-      propsData: { ...props },
+      propsData: { ...propsData },
     });
   };
 
   beforeEach(() => {
-    factory({ namespace: listType });
+    factory({
+      propsData: { namespace: listType },
+      provide: { dependencyListVulnerabilities: isFeatureFlagEnabled },
+    });
     store.state[listType].endpoint = `${TEST_HOST}/dependencies`;
     return wrapper.vm.$nextTick();
   });
@@ -50,7 +61,7 @@ describe('DependenciesActions component', () => {
 
     expect(store.dispatch.mock.calls).toEqual(
       expect.arrayContaining(
-        Object.keys(SORT_FIELDS).map(field => [`${listType}/setSortField`, field]),
+        Object.keys(sortFields).map(field => [`${listType}/setSortField`, field]),
       ),
     );
   });