Adds changes from @fatihacet review

- Splits `activeFilters` getter into multiple parts
- Adds actions for filters and commits them from the components
- Renames `help` to `report-type-popover`
- Adds constants for the state
- Makes some code-style tweaks
- Adds a changelog

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

 <script>
-import { mapGetters, mapMutations } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import Help from './help.vue';
+import ReportTypePopover from './report_type_popover.vue';
 
 export default {
   components: {
     GlDropdown,
     GlDropdownItem,
-    Help,
+    ReportTypePopover,
     Icon,
   },
   props: {
@@ -27,16 +27,17 @@ export default {
       return this.getFilter(this.filterId);
     },
     selectedOptionText() {
-      const selectedOption = this.getSelectedOptions(this.filterId)[0];
+      const [selectedOption] = this.getSelectedOptions(this.filterId);
       return (selectedOption && selectedOption.name) || '-';
     },
   },
   methods: {
-    ...mapMutations('filters', ['SET_FILTER']),
+    ...mapActions('filters', ['setFilter']),
     clickFilter(option) {
-      const { filterId } = this;
-      const optionId = option.id;
-      this.SET_FILTER({ filterId, optionId });
+      this.setFilter({
+        filterId: this.filterId,
+        optionId: option.id,
+      });
       this.$emit('change');
     },
   },
@@ -46,7 +47,10 @@ export default {
 <template>
   <div class="dashboard-filter">
     <strong class="js-name">{{ filter.name }}</strong>
-    <help v-if="filterId === 'type'" :dashboard-documentation="dashboardDocumentation" />
+    <report-type-popover
+      v-if="filterId === 'type'"
+      :dashboard-documentation="dashboardDocumentation"
+    />
     <gl-dropdown :text="selectedOptionText" class="d-block mt-1">
       <gl-dropdown-item
         v-for="option in filter.options"

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

+import * as types from './mutation_types';
+
+export const setFilter = ({ commit }, payload) => {
+  commit(types.SET_FILTER, payload);
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+// This is no longer needed after gitlab-ce#52179 is merged
+export default () => {};

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

+export const SEVERITIES = {
+  critical: 'Critical',
+  high: 'High',
+  medium: 'Medium',
+  low: 'Low',
+  unknown: 'Unknown',
+  experimental: 'Experimental',
+  ignore: 'Ignore',
+  undefined: 'Undefined',
+};
+
+export const REPORT_TYPES = {
+  sast: 'SAST',
+};

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

@@ -3,25 +3,25 @@ export const getFilter = state => filterId => state.filters.find(filter => filte
 export const getSelectedOptions = (state, getters) => filterId =>
   getters.getFilter(filterId).options.filter(option => option.selected);
 
+export const getSelectedOptionIds = (state, getters) => filterId =>
+  getters.getSelectedOptions(filterId).map(option => option.id);
+
+export const getFilterIds = state => state.filters.map(filter => filter.id);
+
 /**
- * Loops through all the filters and returns all the selected/active ones
+ * Loops through all the filters and returns all the 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(
-      (result, filterId) => ({
-        ...result,
-        [filterId]: getters
-          .getSelectedOptions(filterId)
-          .map(option => option.id)
-          .filter(option => option !== 'all'),
-      }),
-      {},
-    );
+  getters.getFilterIds.reduce(
+    (result, filterId) => ({
+      ...result,
+      [filterId]: getters.getSelectedOptionIds(filterId).filter(option => option !== 'all'),
+    }),
+    {},
+  );
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 // This is no longer needed after gitlab-ce#52179 is merged

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

-import state from './state';
-import mutations from './mutations';
+import * as actions from './actions';
 import * as getters from './getters';
+import mutations from './mutations';
+import state from './state';
 
 export default {
   namespaced: true,
-  state,
-  mutations,
+  actions,
   getters,
+  mutations,
+  state,
 };

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

@@ -4,7 +4,9 @@ export default {
   [types.SET_FILTER](state, payload) {
     const { filterId, optionId } = payload;
     const activeFilter = state.filters.find(filter => filter.id === filterId);
-    activeFilter.options.find(option => option.selected).selected = false;
-    activeFilter.options.find(option => option.id === optionId).selected = true;
+    if (activeFilter) {
+      activeFilter.options.find(option => option.selected).selected = false;
+      activeFilter.options.find(option => option.id === optionId).selected = true;
+    }
   },
 };

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

+import { SEVERITIES, REPORT_TYPES } from './constants';
+
 export default () => ({
   filters: [
     {
@@ -9,46 +11,10 @@ export default () => ({
           id: 'all',
           selected: true,
         },
-        {
-          name: 'Critical',
-          id: 'critical',
-          selected: false,
-        },
-        {
-          name: 'High',
-          id: 'high',
-          selected: false,
-        },
-        {
-          name: 'Medium',
-          id: 'medium',
-          selected: false,
-        },
-        {
-          name: 'Low',
-          id: 'low',
-          selected: false,
-        },
-        {
-          name: 'Unknown',
-          id: 'unknown',
-          selected: false,
-        },
-        {
-          name: 'Experimental',
-          id: 'experimental',
-          selected: false,
-        },
-        {
-          name: 'Ignore',
-          id: 'ignore',
-          selected: false,
-        },
-        {
-          name: 'Undefined',
-          id: 'undefined',
-          selected: false,
-        },
+        ...Object.entries(SEVERITIES).map(severity => {
+          const [id, name] = severity;
+          return { id, name };
+        }),
       ],
     },
     {
@@ -56,7 +22,7 @@ export default () => ({
       id: 'type',
       options: [
         {
-          name: 'SAST',
+          name: REPORT_TYPES.sast,
           id: 'sast',
           selected: true,
         },

ee/changelogs/unreleased/6240-add-filters-to-gsd.yml

+---
+title: Adds basic filtering to the Group Security Dashboard frontend
+merge_request: 8886
+author:
+type: added

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

+import testAction from 'spec/helpers/vuex_action_helper';
+
+import createState from 'ee/security_dashboard/store/modules/filters/state';
+import * as types from 'ee/security_dashboard/store/modules/filters/mutation_types';
+import * as actions from 'ee/security_dashboard/store/modules/filters/actions';
+
+describe('filters actions', () => {
+  describe('setFilter', () => {
+    it('should commit the SET_FILTER mutuation', done => {
+      const state = createState();
+      const payload = { filterId: 'type', optionId: 'sast' };
+
+      testAction(
+        actions.setFilter,
+        payload,
+        state,
+        [
+          {
+            type: types.SET_FILTER,
+            payload,
+          },
+        ],
+        [],
+        done,
+      );
+    });
+  });
+});

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

@@ -6,10 +6,15 @@ describe('filters module getters', () => {
     const getFilter = filterId => getters.getFilter(state)(filterId);
     const getSelectedOptions = filterId =>
       getters.getSelectedOptions(state, { getFilter })(filterId);
+    const getSelectedOptionIds = filterId =>
+      getters.getSelectedOptionIds(state, { getSelectedOptions })(filterId);
+    const getFilterIds = getters.getFilterIds(state);
 
     return {
       getFilter,
       getSelectedOptions,
+      getSelectedOptionIds,
+      getFilterIds,
     };
   };
 
@@ -32,6 +37,16 @@ describe('filters module getters', () => {
     });
   });
 
+  describe('getSelectedOptionIds', () => {
+    it('should return "sast" as the selcted option ID', () => {
+      const state = createState();
+      const selectedOptionIds = getters.getSelectedOptionIds(state, mockedGetters(state))('type');
+
+      expect(selectedOptionIds).toHaveLength(1);
+      expect(selectedOptionIds[0]).toEqual('sast');
+    });
+  });
+
   describe('activeFilters', () => {
     it('should return no severity filters', () => {
       const state = createState();

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

@@ -14,10 +14,10 @@ describe('filters module mutations', () => {
       [typeFilter] = state.filters;
       [allOption, sastOption] = typeFilter.options;
 
-      const filterId = typeFilter.id;
-      const optionId = sastOption.id;
-
-      mutations[types.SET_FILTER](state, { filterId, optionId });
+      mutations[types.SET_FILTER](state, {
+        filterId: typeFilter.id,
+        optionId: sastOption.id,
+      });
     });
 
     it('should make SAST the selected option', () => {

locale/gitlab.pot

@@ -7534,9 +7534,6 @@ msgstr ""
 msgid "SAML for %{group_name}"
 msgstr ""
 
-msgid "SAST"
-msgstr ""
-
 msgid "SHA1 fingerprint of the SAML token signing certificate. Get this from your identity provider, where it can also be called \"Thumbprint\"."
 msgstr ""