From 0a149963263e693e958e59242739391fad72c25a Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 5 Mar 2019 17:00:06 +0800
Subject: [PATCH 01/11] Improve dropdowns in Group Security Dashboard

Each dropdown now:

- stays open as items in it are checked/unchecked
- has a header and close button
- shows a search box when there are many items in it
- use a more specific name for the "All" filter; e.g., "All severities"
---
 .../security_dashboard/components/filter.vue  |  80 +++++++++++---
 .../security_dashboard/store/moderator.js     |   6 +-
 .../store/modules/filters/constants.js        |  15 +++
 .../store/modules/filters/state.js            |  33 ++----
 .../components/filter_spec.js                 | 100 ++++++++++++++++--
 5 files changed, 182 insertions(+), 52 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/filter.vue b/ee/app/assets/javascripts/security_dashboard/components/filter.vue
index e848f3915f0c21..19c6cf938ba7ca 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/filter.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/filter.vue
@@ -1,12 +1,13 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlSearchBox } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlDropdown,
     GlDropdownItem,
+    GlSearchBox,
     Icon,
   },
   props: {
@@ -15,6 +16,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      filterTerm: '',
+    };
+  },
   computed: {
     ...mapGetters('filters', ['getFilter', 'getSelectedOptions', 'getSelectedOptionNames']),
     filter() {
@@ -26,6 +32,11 @@ export default {
     selectedOptionText() {
       return this.getSelectedOptionNames(this.filterId) || '-';
     },
+    filteredOptions() {
+      return this.filter.options.filter(option =>
+        option.name.toLowerCase().includes(this.filterTerm.toLowerCase()),
+      );
+    },
   },
   methods: {
     ...mapActions('filters', ['setFilter']),
@@ -38,6 +49,9 @@ export default {
     isSelected(option) {
       return this.selection.has(option.id);
     },
+    closeDropdown(event) {
+      this.$root.$emit('clicked::link', event);
+    },
   },
 };
 </script>
@@ -45,7 +59,7 @@ export default {
 <template>
   <div class="dashboard-filter">
     <strong class="js-name">{{ filter.name }}</strong>
-    <gl-dropdown class="d-block mt-1">
+    <gl-dropdown class="d-block mt-1" menu-class="dropdown-extended-height">
       <template slot="button-content">
         <span class="text-truncate">
           {{ selectedOptionText.firstOption }}
@@ -57,20 +71,56 @@ export default {
         <i class="fa fa-chevron-down" aria-hidden="true"></i>
       </template>
 
-      <gl-dropdown-item
-        v-for="option in filter.options"
-        :key="option.id"
-        @click="clickFilter(option)"
+      <div class="dropdown-title mb-0">
+        {{ filter.name }}
+        <button
+          ref="close"
+          class="btn-blank float-right"
+          type="button"
+          :aria-label="__('Close')"
+          @click="closeDropdown"
+        >
+          <icon name="close" aria-hidden="true" class="vertical-align-middle" />
+        </button>
+      </div>
+
+      <gl-search-box
+        v-if="filter.options.length >= 20"
+        ref="searchBox"
+        v-model="filterTerm"
+        class="m-2"
+        :placeholder="__('Filter...')"
+      />
+
+      <div class="dropdown-content" style="max-height: 280px">
+        <button
+          v-for="option in filteredOptions"
+          :key="option.id"
+          role="menuitem"
+          type="button"
+          class="dropdown-item"
+          @click="clickFilter(option)"
+        >
+          <span class="d-flex">
+            <icon
+              v-if="isSelected(option)"
+              class="flex-shrink-0 js-check"
+              name="mobile-issue-close"
+            />
+            <span :class="isSelected(option) ? 'prepend-left-4' : 'prepend-left-20'">{{
+              option.name
+            }}</span>
+          </span>
+        </button>
+      </div>
+
+      <button
+        v-if="filteredOptions.length === 0"
+        type="button"
+        class="dropdown-item no-pointer-events text-secondary"
       >
-        <icon
-          v-if="isSelected(option)"
-          class="vertical-align-middle js-check"
-          name="mobile-issue-close"
-        />
-        <span class="vertical-align-middle" :class="{ 'prepend-left-20': !isSelected(option) }">{{
-          option.name
-        }}</span>
-      </gl-dropdown-item>
+        {{ __('No matching results') }}
+      </button>
     </gl-dropdown>
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/security_dashboard/store/moderator.js b/ee/app/assets/javascripts/security_dashboard/store/moderator.js
index 0d3acab79e919f..b84d20891cdda7 100644
--- a/ee/app/assets/javascripts/security_dashboard/store/moderator.js
+++ b/ee/app/assets/javascripts/security_dashboard/store/moderator.js
@@ -1,6 +1,7 @@
 import * as vulnerabilitiesMutationTypes from './modules/vulnerabilities/mutation_types';
 import * as filtersMutationTypes from './modules/filters/mutation_types';
 import * as projectsMutationTypes from './modules/projects/mutation_types';
+import { BASE_FILTERS } from './modules/filters/constants';
 
 export default function configureModerator(store) {
   store.$router.beforeEach((to, from, next) => {
@@ -19,10 +20,7 @@ export default function configureModerator(store) {
         store.dispatch('filters/setFilterOptions', {
           filterId: 'project_id',
           options: [
-            {
-              name: 'All',
-              id: 'all',
-            },
+            BASE_FILTERS.project_id,
             ...payload.projects.map(project => ({
               name: project.name,
               id: project.id.toString(),
diff --git a/ee/app/assets/javascripts/security_dashboard/store/modules/filters/constants.js b/ee/app/assets/javascripts/security_dashboard/store/modules/filters/constants.js
index 28b508d12a2a1b..dbd209f93a03f0 100644
--- a/ee/app/assets/javascripts/security_dashboard/store/modules/filters/constants.js
+++ b/ee/app/assets/javascripts/security_dashboard/store/modules/filters/constants.js
@@ -27,3 +27,18 @@ export const REPORT_TYPES = {
   dependency_scanning: s__('ciReport|Dependency Scanning'),
   sast: s__('ciReport|SAST'),
 };
+
+export const BASE_FILTERS = {
+  severity: {
+    name: 'All severities',
+    id: 'all',
+  },
+  report_type: {
+    name: 'All report types',
+    id: 'all',
+  },
+  project_id: {
+    name: 'All projects',
+    id: 'all',
+  },
+};
diff --git a/ee/app/assets/javascripts/security_dashboard/store/modules/filters/state.js b/ee/app/assets/javascripts/security_dashboard/store/modules/filters/state.js
index 446be736b95bf4..befec495c88a3e 100644
--- a/ee/app/assets/javascripts/security_dashboard/store/modules/filters/state.js
+++ b/ee/app/assets/javascripts/security_dashboard/store/modules/filters/state.js
@@ -1,46 +1,25 @@
-import { SEVERITY_LEVELS, REPORT_TYPES } from './constants';
+import { SEVERITY_LEVELS, REPORT_TYPES, BASE_FILTERS } from './constants';
+
+const mapToArray = map => Object.entries(map).map(([id, name]) => ({ id, name }));
 
 export default () => ({
   filters: [
     {
       name: 'Severity',
       id: 'severity',
-      options: [
-        {
-          name: 'All',
-          id: 'all',
-        },
-        ...Object.entries(SEVERITY_LEVELS).map(severity => {
-          const [id, name] = severity;
-          return { id, name };
-        }),
-      ],
+      options: [BASE_FILTERS.severity, ...mapToArray(SEVERITY_LEVELS)],
       selection: new Set(['all']),
     },
     {
       name: 'Report type',
       id: 'report_type',
-      options: [
-        {
-          name: 'All',
-          id: 'all',
-        },
-        ...Object.entries(REPORT_TYPES).map(type => {
-          const [id, name] = type;
-          return { id, name };
-        }),
-      ],
+      options: [BASE_FILTERS.report_type, ...mapToArray(REPORT_TYPES)],
       selection: new Set(['all']),
     },
     {
       name: 'Project',
       id: 'project_id',
-      options: [
-        {
-          name: 'All',
-          id: 'all',
-        },
-      ],
+      options: [BASE_FILTERS.project_id],
       selection: new Set(['all']),
     },
   ],
diff --git a/ee/spec/javascripts/security_dashboard/components/filter_spec.js b/ee/spec/javascripts/security_dashboard/components/filter_spec.js
index 82312bbe8989d5..4955c2ffd188cd 100644
--- a/ee/spec/javascripts/security_dashboard/components/filter_spec.js
+++ b/ee/spec/javascripts/security_dashboard/components/filter_spec.js
@@ -6,8 +6,37 @@ import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper
 describe('Filter component', () => {
   let vm;
   let props;
-  const store = createStore();
-  const Component = Vue.extend(component);
+  let store;
+  let Component;
+
+  function isDropdownOpen() {
+    const toggleButton = vm.$el.querySelector('.dropdown-toggle');
+    return toggleButton.getAttribute('aria-expanded') === 'true';
+  }
+
+  function setProjectsCount(count) {
+    const projects = new Array(count).fill(null).map((_, i) => ({
+      name: i.toString(),
+      id: i.toString(),
+    }));
+
+    store.dispatch('filters/setFilterOptions', {
+      filterId: 'project_id',
+      options: projects,
+    });
+  }
+
+  const findSearchInput = () =>
+    (vm.$refs.searchBox || null) && vm.$refs.searchBox.$el.querySelector('input');
+
+  beforeEach(() => {
+    store = createStore();
+    Component = Vue.extend(component);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
 
   describe('severity', () => {
     beforeEach(() => {
@@ -15,10 +44,6 @@ describe('Filter component', () => {
       vm = mountComponentWithStore(Component, { store, props });
     });
 
-    afterEach(() => {
-      vm.$destroy();
-    });
-
     it('should display all 8 severity options', () => {
       expect(vm.$el.querySelectorAll('.dropdown-item').length).toEqual(8);
     });
@@ -30,5 +55,68 @@ describe('Filter component', () => {
     it('should display "Severity" as the option name', () => {
       expect(vm.$el.querySelector('.js-name').textContent).toContain('Severity');
     });
+
+    it('should not have a search box', () => {
+      expect(findSearchInput()).toBeNull();
+    });
+
+    it('should not be open', () => {
+      expect(isDropdownOpen()).toBe(false);
+    });
+
+    describe('when the dropdown is open', () => {
+      beforeEach(done => {
+        vm.$el.querySelector('.dropdown-toggle').click();
+        vm.$nextTick(done);
+      });
+
+      it('should keep the menu open after clicking on an item', done => {
+        expect(isDropdownOpen()).toBe(true);
+        vm.$el.querySelector('.dropdown-item').click();
+        vm.$nextTick(() => {
+          expect(isDropdownOpen()).toBe(true);
+          done();
+        });
+      });
+
+      it('should close the menu when the close button is clicked', done => {
+        expect(isDropdownOpen()).toBe(true);
+        vm.$refs.close.click();
+        vm.$nextTick(() => {
+          expect(isDropdownOpen()).toBe(false);
+          done();
+        });
+      });
+    });
+  });
+
+  describe('Project', () => {
+    describe('when there are lots of projects', () => {
+      const lots = 30;
+      beforeEach(done => {
+        props = { filterId: 'project_id', dashboardDocumentation: '' };
+        vm = mountComponentWithStore(Component, { store, props });
+        setProjectsCount(lots);
+        vm.$nextTick(done);
+      });
+
+      it('should display a search box', () => {
+        expect(findSearchInput()).not.toBeNull();
+      });
+
+      it(`should show all projects`, () => {
+        expect(vm.$el.querySelectorAll('.dropdown-item').length).toBe(lots);
+      });
+
+      it('should show only matching projects when a search term is entered', done => {
+        const input = findSearchInput();
+        input.value = '0';
+        input.dispatchEvent(new Event('input'));
+        vm.$nextTick(() => {
+          expect(vm.$el.querySelectorAll('.dropdown-item').length).toBe(3);
+          done();
+        });
+      });
+    });
   });
 });
-- 
GitLab


From c59b45048dc1ed085f48e5d921cb78789b6c8788 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Mon, 18 Mar 2019 15:36:31 +0800
Subject: [PATCH 02/11] Add changelog entry

---
 ...feature-dropdowns-to-group-security-dashboard-filters.yml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 ee/changelogs/unreleased/9253-add-full-feature-dropdowns-to-group-security-dashboard-filters.yml

diff --git a/ee/changelogs/unreleased/9253-add-full-feature-dropdowns-to-group-security-dashboard-filters.yml b/ee/changelogs/unreleased/9253-add-full-feature-dropdowns-to-group-security-dashboard-filters.yml
new file mode 100644
index 00000000000000..021be46b1f94d0
--- /dev/null
+++ b/ee/changelogs/unreleased/9253-add-full-feature-dropdowns-to-group-security-dashboard-filters.yml
@@ -0,0 +1,5 @@
+---
+title: Make editing the filters in the Group Security Dashboard easier.
+merge_request: 10138
+author:
+type: fixed
-- 
GitLab


From f1153dd6db481a21ea5f9df5a3b6fe6a4feb42de Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Mon, 18 Mar 2019 16:49:32 +0800
Subject: [PATCH 03/11] Fix tests broken by base filter name changes

---
 .../security_dashboard/store/filters/getters_spec.js         | 5 +++--
 .../javascripts/security_dashboard/store/moderator_spec.js   | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ee/spec/frontend/security_dashboard/store/filters/getters_spec.js b/ee/spec/frontend/security_dashboard/store/filters/getters_spec.js
index 0fc6fb6a2d5c57..2ca1aaa974d8cb 100644
--- a/ee/spec/frontend/security_dashboard/store/filters/getters_spec.js
+++ b/ee/spec/frontend/security_dashboard/store/filters/getters_spec.js
@@ -34,7 +34,7 @@ describe('filters module getters', () => {
         );
 
         expect(selectedOptions).toHaveLength(1);
-        expect(selectedOptions[0].name).toEqual('All');
+        expect(selectedOptions[0].name).toContain('All');
       });
     });
 
@@ -62,7 +62,8 @@ describe('filters module getters', () => {
         'severity',
       );
 
-      expect(selectedOptionNames).toEqual({ firstOption: 'All', extraOptionCount: '' });
+      expect(selectedOptionNames.firstOption).toContain('All');
+      expect(selectedOptionNames.extraOptionCount).toBe('');
     });
 
     it('should return the correct message when multiple filters are selected', () => {
diff --git a/ee/spec/javascripts/security_dashboard/store/moderator_spec.js b/ee/spec/javascripts/security_dashboard/store/moderator_spec.js
index e6c05a0a969033..75cd39cd5cae0e 100644
--- a/ee/spec/javascripts/security_dashboard/store/moderator_spec.js
+++ b/ee/spec/javascripts/security_dashboard/store/moderator_spec.js
@@ -22,7 +22,7 @@ describe('moderator', () => {
       'filters/setFilterOptions',
       Object({
         filterId: 'project_id',
-        options: [{ name: 'All', id: 'all' }, { name: 'foo', id: '1' }],
+        options: [{ name: 'All projects', id: 'all' }, { name: 'foo', id: '1' }],
       }),
     );
   });
-- 
GitLab


From 5fdb00605bf128f739b7733fc018e355aeefc247 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 19 Mar 2019 16:42:35 +0800
Subject: [PATCH 04/11] Remove unused component

---
 .../javascripts/security_dashboard/components/filter.vue       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/filter.vue b/ee/app/assets/javascripts/security_dashboard/components/filter.vue
index 19c6cf938ba7ca..2ec6ecaf870163 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/filter.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/filter.vue
@@ -1,12 +1,11 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { GlDropdown, GlDropdownItem, GlSearchBox } from '@gitlab/ui';
+import { GlDropdown, GlSearchBox } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlDropdown,
-    GlDropdownItem,
     GlSearchBox,
     Icon,
   },
-- 
GitLab


From d4f206d4f533367ec3fdd9face68e5f92e42078a Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 19 Mar 2019 17:13:17 +0800
Subject: [PATCH 05/11] Make base GSD filters translatable

---
 .../security_dashboard/store/modules/filters/constants.js   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/store/modules/filters/constants.js b/ee/app/assets/javascripts/security_dashboard/store/modules/filters/constants.js
index dbd209f93a03f0..fcde0a8d93ee53 100644
--- a/ee/app/assets/javascripts/security_dashboard/store/modules/filters/constants.js
+++ b/ee/app/assets/javascripts/security_dashboard/store/modules/filters/constants.js
@@ -30,15 +30,15 @@ export const REPORT_TYPES = {
 
 export const BASE_FILTERS = {
   severity: {
-    name: 'All severities',
+    name: s__('ciReport|All severities'),
     id: 'all',
   },
   report_type: {
-    name: 'All report types',
+    name: s__('ciReport|All report types'),
     id: 'all',
   },
   project_id: {
-    name: 'All projects',
+    name: s__('ciReport|All projects'),
     id: 'all',
   },
 };
-- 
GitLab


From b9e5d0c9db5e571018e9d2cc1676ebc495ed4754 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 19 Mar 2019 17:15:33 +0800
Subject: [PATCH 06/11] Use more natural expectation

Previously the `|| null` was ensuring that the return type of the helper
function was `HTMLElement | null`, rather than `HTMLElement | null
| undefined`, which allowed the tests to check against just `null`.
Instead of documenting that oddness, this just changes the tests to
expect an HTMLElement (or not), removing the need to avoid `undefined`.
---
 .../security_dashboard/components/filter_spec.js           | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/ee/spec/javascripts/security_dashboard/components/filter_spec.js b/ee/spec/javascripts/security_dashboard/components/filter_spec.js
index 4955c2ffd188cd..4b74fd64e232f3 100644
--- a/ee/spec/javascripts/security_dashboard/components/filter_spec.js
+++ b/ee/spec/javascripts/security_dashboard/components/filter_spec.js
@@ -26,8 +26,7 @@ describe('Filter component', () => {
     });
   }
 
-  const findSearchInput = () =>
-    (vm.$refs.searchBox || null) && vm.$refs.searchBox.$el.querySelector('input');
+  const findSearchInput = () => vm.$refs.searchBox && vm.$refs.searchBox.$el.querySelector('input');
 
   beforeEach(() => {
     store = createStore();
@@ -57,7 +56,7 @@ describe('Filter component', () => {
     });
 
     it('should not have a search box', () => {
-      expect(findSearchInput()).toBeNull();
+      expect(findSearchInput()).not.toEqual(jasmine.any(HTMLElement));
     });
 
     it('should not be open', () => {
@@ -101,7 +100,7 @@ describe('Filter component', () => {
       });
 
       it('should display a search box', () => {
-        expect(findSearchInput()).not.toBeNull();
+        expect(findSearchInput()).toEqual(jasmine.any(HTMLElement));
       });
 
       it(`should show all projects`, () => {
-- 
GitLab


From d9bb4cd17747698d392c9125eb7b3cda85598961 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 19 Mar 2019 18:08:50 +0800
Subject: [PATCH 07/11] Verify exact strings in tests

This approach gives us two things:

1. Exact strings are verified, rather than more loosely checking for
   a substring
2. Should the string change in future, these tests no longer have to
   change. The purpose of them is to verify that some constant is
   returned, but they don't care what that constant actually contains.
---
 .../security_dashboard/store/filters/getters_spec.js     | 9 +++++----
 .../security_dashboard/store/moderator_spec.js           | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ee/spec/frontend/security_dashboard/store/filters/getters_spec.js b/ee/spec/frontend/security_dashboard/store/filters/getters_spec.js
index 2ca1aaa974d8cb..8f6e131188f7a6 100644
--- a/ee/spec/frontend/security_dashboard/store/filters/getters_spec.js
+++ b/ee/spec/frontend/security_dashboard/store/filters/getters_spec.js
@@ -1,5 +1,6 @@
 import createState from 'ee/security_dashboard/store/modules/filters/state';
 import * as getters from 'ee/security_dashboard/store/modules/filters/getters';
+import { BASE_FILTERS } from 'ee/security_dashboard/store/modules/filters/constants';
 
 describe('filters module getters', () => {
   const mockedGetters = state => {
@@ -28,13 +29,13 @@ describe('filters module getters', () => {
 
   describe('getSelectedOptions', () => {
     describe('with one selected option', () => {
-      it('should return "All" as the selected option', () => {
+      it('should return the base filter as the selected option', () => {
         const selectedOptions = getters.getSelectedOptions(state, mockedGetters(state))(
           'report_type',
         );
 
         expect(selectedOptions).toHaveLength(1);
-        expect(selectedOptions[0].name).toContain('All');
+        expect(selectedOptions[0].name).toBe(BASE_FILTERS.report_type.name);
       });
     });
 
@@ -57,12 +58,12 @@ describe('filters module getters', () => {
   });
 
   describe('getSelectedOptionNames', () => {
-    it('should return "All" as the selected option', () => {
+    it('should return the base filter as the selected option', () => {
       const selectedOptionNames = getters.getSelectedOptionNames(state, mockedGetters(state))(
         'severity',
       );
 
-      expect(selectedOptionNames.firstOption).toContain('All');
+      expect(selectedOptionNames.firstOption).toBe(BASE_FILTERS.severity.name);
       expect(selectedOptionNames.extraOptionCount).toBe('');
     });
 
diff --git a/ee/spec/javascripts/security_dashboard/store/moderator_spec.js b/ee/spec/javascripts/security_dashboard/store/moderator_spec.js
index 75cd39cd5cae0e..d47a551175dd56 100644
--- a/ee/spec/javascripts/security_dashboard/store/moderator_spec.js
+++ b/ee/spec/javascripts/security_dashboard/store/moderator_spec.js
@@ -2,6 +2,7 @@ import createStore from 'ee/security_dashboard/store/index';
 import * as projectsMutationTypes from 'ee/security_dashboard/store/modules/projects/mutation_types';
 import * as filtersMutationTypes from 'ee/security_dashboard/store/modules/filters/mutation_types';
 import * as vulnerabilitiesMutationTypes from 'ee/security_dashboard/store/modules/vulnerabilities/mutation_types';
+import { BASE_FILTERS } from 'ee/security_dashboard/store/modules/filters/constants';
 
 describe('moderator', () => {
   let store;
@@ -22,7 +23,7 @@ describe('moderator', () => {
       'filters/setFilterOptions',
       Object({
         filterId: 'project_id',
-        options: [{ name: 'All projects', id: 'all' }, { name: 'foo', id: '1' }],
+        options: [BASE_FILTERS.project_id, { name: 'foo', id: '1' }],
       }),
     );
   });
-- 
GitLab


From 8575ee72bfc1c5af48571695b22e89c3012bddc3 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 19 Mar 2019 18:24:44 +0800
Subject: [PATCH 08/11] Use more explicit/less confusing function name

It takes options objects (id/name key/value pairs), not `Map`s.
---
 .../security_dashboard/store/modules/filters/state.js       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/store/modules/filters/state.js b/ee/app/assets/javascripts/security_dashboard/store/modules/filters/state.js
index befec495c88a3e..f84bb0a836f6ed 100644
--- a/ee/app/assets/javascripts/security_dashboard/store/modules/filters/state.js
+++ b/ee/app/assets/javascripts/security_dashboard/store/modules/filters/state.js
@@ -1,19 +1,19 @@
 import { SEVERITY_LEVELS, REPORT_TYPES, BASE_FILTERS } from './constants';
 
-const mapToArray = map => Object.entries(map).map(([id, name]) => ({ id, name }));
+const optionsObjectToArray = obj => Object.entries(obj).map(([id, name]) => ({ id, name }));
 
 export default () => ({
   filters: [
     {
       name: 'Severity',
       id: 'severity',
-      options: [BASE_FILTERS.severity, ...mapToArray(SEVERITY_LEVELS)],
+      options: [BASE_FILTERS.severity, ...optionsObjectToArray(SEVERITY_LEVELS)],
       selection: new Set(['all']),
     },
     {
       name: 'Report type',
       id: 'report_type',
-      options: [BASE_FILTERS.report_type, ...mapToArray(REPORT_TYPES)],
+      options: [BASE_FILTERS.report_type, ...optionsObjectToArray(REPORT_TYPES)],
       selection: new Set(['all']),
     },
     {
-- 
GitLab


From 676bd228b015364ee9ec1f37484909f8b6822ac1 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 19 Mar 2019 18:45:28 +0800
Subject: [PATCH 09/11] Avoid scrollbar in more maintainable way

What this (and the previous) approach aims to achieve is *not* to show
a scrollbar in the severity filter dropdown. It's a fixed list of
severities, and inside a `dropdown-content`, the dropdown items are only
*just* tall enough to be taller than the max-height of
`dropdown-content`, making it render with a scrollbar, looking terrible.

The report type filter dropdown is also a fixed list of only four items,
so also doesn't need an internal scrollbar.

The projects filter dropdown, however, is not a fixed list, and requires
the internal scrollbar provided by `dropdown-content`.
---
 .../assets/javascripts/security_dashboard/components/filter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/filter.vue b/ee/app/assets/javascripts/security_dashboard/components/filter.vue
index 2ec6ecaf870163..09fc50c1817e6a 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/filter.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/filter.vue
@@ -91,7 +91,7 @@ export default {
         :placeholder="__('Filter...')"
       />
 
-      <div class="dropdown-content" style="max-height: 280px">
+      <div :class="{ 'dropdown-content': filterId === 'project_id' }">
         <button
           v-for="option in filteredOptions"
           :key="option.id"
-- 
GitLab


From 25d5d33feb72a9cc9deba431d1c56c5910a3ef87 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 20 Mar 2019 10:57:48 +0800
Subject: [PATCH 10/11] Remove unused translatable strings

---
 locale/gitlab.pot | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index af10e123ee1856..a71f5fd9f8204e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -12392,6 +12392,15 @@ msgstr ""
 msgid "ciReport|(is loading, errors when loading results)"
 msgstr ""
 
+msgid "ciReport|All projects"
+msgstr ""
+
+msgid "ciReport|All report types"
+msgstr ""
+
+msgid "ciReport|All severities"
+msgstr ""
+
 msgid "ciReport|Class"
 msgstr ""
 
-- 
GitLab


From 2c0dd6cc8f87889527815dbf5f868af4062b7d39 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 27 Mar 2019 13:12:45 +0800
Subject: [PATCH 11/11] Replace deprecated component

GitLab adopted @gitlab/ui^3.0.0 during the lifetime of this branch. The
breaking change introduced the GlSearchBoxByType and GlSearchBoxByClick
components, and removed the GlSearchBox.
---
 .../javascripts/security_dashboard/components/filter.vue    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ee/app/assets/javascripts/security_dashboard/components/filter.vue b/ee/app/assets/javascripts/security_dashboard/components/filter.vue
index 09fc50c1817e6a..59328d6b495a1e 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/filter.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/filter.vue
@@ -1,12 +1,12 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { GlDropdown, GlSearchBox } from '@gitlab/ui';
+import { GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlDropdown,
-    GlSearchBox,
+    GlSearchBoxByType,
     Icon,
   },
   props: {
@@ -83,7 +83,7 @@ export default {
         </button>
       </div>
 
-      <gl-search-box
+      <gl-search-box-by-type
         v-if="filter.options.length >= 20"
         ref="searchBox"
         v-model="filterTerm"
-- 
GitLab