1 files changed, 21 insertions, 46 deletions
diff --git a/app/assets/javascripts/notes/components/discussion_filter.vue b/app/assets/javascripts/notes/components/discussion_filter.vue
index 989ce9ff144..0e7ed854032 100644
--- a/app/assets/javascripts/notes/components/discussion_filter.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter.vue
@@ -1,7 +1,6 @@
 <script>
-import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
-import { GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility';
 import {
   DISCUSSION_FILTERS_DEFAULT_VALUE,
@@ -14,7 +13,9 @@ import notesEventHub from '../event_hub';
 
 export default {
   components: {
-    GlIcon,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
   },
   props: {
     filters: {
@@ -66,9 +67,6 @@ export default {
     selectFilter(value, persistFilter = true) {
       const filter = parseInt(value, 10);
 
-      // close dropdown
-      this.toggleDropdown();
-
       if (filter === this.currentValue) return;
       this.currentValue = filter;
       this.filterDiscussion({
@@ -78,9 +76,6 @@ export default {
       });
       this.toggleCommentsForm();
     },
-    toggleDropdown() {
-      $(this.$refs.dropdownToggle).dropdown('toggle');
-    },
     toggleCommentsForm() {
       this.setCommentsDisabled(this.currentValue === HISTORY_ONLY_FILTER_VALUE);
     },
@@ -92,7 +87,6 @@ export default {
 
       if (/^note_/.test(hash) && this.currentValue !== DISCUSSION_FILTERS_DEFAULT_VALUE) {
         this.selectFilter(this.defaultValue, false);
-        this.toggleDropdown(); // close dropdown
         this.setTargetNoteHash(hash);
       }
     },
@@ -109,43 +103,24 @@ export default {
 </script>
 
 <template>
-  <div
+  <gl-dropdown
     v-if="displayFilters"
-    class="discussion-filter-container js-discussion-filter-container d-inline-block align-bottom full-width-mobile"
+    id="discussion-filter-dropdown"
+    class="gl-mr-3 full-width-mobile discussion-filter-container js-discussion-filter-container qa-discussion-filter"
+    :text="currentFilter.title"
   >
-    <button
-      id="discussion-filter-dropdown"
-      ref="dropdownToggle"
-      class="btn btn-sm qa-discussion-filter"
-      data-toggle="dropdown"
-      aria-expanded="false"
-    >
-      {{ currentFilter.title }} <gl-icon name="chevron-down" />
-    </button>
-    <div
-      ref="dropdownMenu"
-      class="dropdown-menu dropdown-menu-selectable dropdown-menu-right"
-      aria-labelledby="discussion-filter-dropdown"
-    >
-      <div class="dropdown-content">
-        <ul>
-          <li
-            v-for="filter in filters"
-            :key="filter.value"
-            :data-filter-type="filterType(filter.value)"
-          >
-            <button
-              :class="{ 'is-active': filter.value === currentValue }"
-              class="qa-filter-options"
-              type="button"
-              @click="selectFilter(filter.value)"
-            >
-              {{ filter.title }}
-            </button>
-            <div v-if="filter.value === defaultValue" class="dropdown-divider"></div>
-          </li>
-        </ul>
-      </div>
+    <div v-for="filter in filters" :key="filter.value" class="dropdown-item-wrapper">
+      <gl-dropdown-item
+        :is-check-item="true"
+        :is-checked="filter.value === currentValue"
+        :class="{ 'is-active': filter.value === currentValue }"
+        :data-filter-type="filterType(filter.value)"
+        class="qa-filter-options"
+        @click.prevent="selectFilter(filter.value)"
+      >
+        {{ filter.title }}
+      </gl-dropdown-item>
+      <gl-dropdown-divider v-if="filter.value === defaultValue" />
     </div>
-  </div>
+  </gl-dropdown>
 </template>