Adds changes from @leipert review

- Better documentation and testing for activeFilters getter
- Aligns the filters to the grid
- Renames gl-filter to dasboard-filter
- Fixes a bug with pagination and filter mixing

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

 <script>
 import { mapState } from 'vuex';
-import GlFilter from './filter.vue';
+import DashboardFilter from './filter.vue';
 
 export default {
   components: {
-    GlFilter,
+    DashboardFilter,
   },
   props: {
     dashboardDocumentation: {
@@ -21,17 +21,14 @@ export default {
 <template>
   <div class="dashboard-filters border-bottom bg-light">
     <div class="row mx-0 p-2">
-      <gl-filter
+      <dashboard-filter
         v-for="filter in filters"
         :key="filter.id"
-        class="col-sm p-2 js-filter"
+        class="col-sm-6 col-md-4 col-lg-2 p-2 js-filter"
         :filter-id="filter.id"
         :dashboard-documentation="dashboardDocumentation"
         @change="$emit('change');"
       />
-      <div class="col-sm p-2 d-md-block d-none"></div>
-      <div class="col-sm p-2 d-md-block d-none"></div>
-      <div class="col-sm p-2 d-md-block d-none"></div>
     </div>
   </div>
 </template>

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

@@ -29,6 +29,7 @@ export default {
       'pageInfo',
       'vulnerabilities',
     ]),
+    ...mapGetters('filters', ['activeFilters']),
     ...mapGetters('vulnerabilities', ['dashboardListError']),
     showEmptyState() {
       return (
@@ -48,7 +49,7 @@ export default {
   methods: {
     ...mapActions('vulnerabilities', ['fetchVulnerabilities', 'openModal']),
     fetchPage(page) {
-      this.fetchVulnerabilities({ page });
+      this.fetchVulnerabilities({ ...this.activeFilters, page });
     },
   },
 };

ee/app/assets/javascripts/security_dashboard/store/modules/filters/getters.js

 export const getFilter = state => filterId => state.filters.find(filter => filter.id === filterId);
+
 export const getSelectedOptions = (state, getters) => filterId =>
   getters.getFilter(filterId).options.filter(option => option.selected);
+
+/**
+ * Loops through all the filters and returns all the selected/active ones
+ * stripping out any that are set to 'all'
+ * @returns Object
+ * e.g. { type: ['sast'], severity: ['high', 'medium'] }
+ */
 export const activeFilters = (state, getters) =>
   state.filters
     .map(filter => filter.id)
     .reduce(
-      (obj, filterId) => ({
-        ...obj,
+      (result, filterId) => ({
+        ...result,
         [filterId]: getters
           .getSelectedOptions(filterId)
           .map(option => option.id)

ee/spec/javascripts/security_dashboard/store/filters/getters_spec.js

@@ -2,10 +2,16 @@ import createState from 'ee/security_dashboard/store/modules/filters/state';
 import * as getters from 'ee/security_dashboard/store/modules/filters/getters';
 
 describe('filters module getters', () => {
-  const mockedGetters = {};
-  mockedGetters.getFilter = filterId => getters.getFilter(createState())(filterId);
-  mockedGetters.getSelectedOptions = filterId =>
-    getters.getSelectedOptions(createState(), mockedGetters)(filterId);
+  const mockedGetters = state => {
+    const getFilter = filterId => getters.getFilter(state)(filterId);
+    const getSelectedOptions = filterId =>
+      getters.getSelectedOptions(state, { getFilter })(filterId);
+
+    return {
+      getFilter,
+      getSelectedOptions,
+    };
+  };
 
   describe('getFilter', () => {
     it('should return the type filter information', () => {
@@ -19,7 +25,7 @@ describe('filters module getters', () => {
   describe('getSelectedOptions', () => {
     it('should return "SAST" as the selcted option', () => {
       const state = createState();
-      const selectedOptions = getters.getSelectedOptions(state, mockedGetters)('type');
+      const selectedOptions = getters.getSelectedOptions(state, mockedGetters(state))('type');
 
       expect(selectedOptions).toHaveLength(1);
       expect(selectedOptions[0].name).toEqual('SAST');
@@ -29,17 +35,29 @@ describe('filters module getters', () => {
   describe('activeFilters', () => {
     it('should return no severity filters', () => {
       const state = createState();
-      const activeFilters = getters.activeFilters(state, mockedGetters);
+      const activeFilters = getters.activeFilters(state, mockedGetters(state));
 
       expect(activeFilters.severity).toHaveLength(0);
     });
 
     it('should return the SAST type filter', () => {
       const state = createState();
-      const activeFilters = getters.activeFilters(state, mockedGetters);
+      const activeFilters = getters.activeFilters(state, mockedGetters(state));
 
       expect(activeFilters.type).toHaveLength(1);
       expect(activeFilters.type[0]).toEqual('sast');
     });
+
+    it('should return multiple project filters"', () => {
+      const state = createState();
+      const projectFilter = {
+        id: 'project',
+        options: [{ id: 'one', selected: true }, { id: 'anotherone', selected: true }],
+      };
+      state.filters.push(projectFilter);
+      const activeFilters = getters.activeFilters(state, mockedGetters(state));
+
+      expect(activeFilters.project).toHaveLength(2);
+    });
   });
 });