1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/topbar/components/group_filter.vue b/app/assets/javascripts/search/topbar/components/group_filter.vue
new file mode 100644
index 00000000000..fce9ec17d23
--- /dev/null
+++ b/app/assets/javascripts/search/topbar/components/group_filter.vue
@@ -0,0 +1,49 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { isEmpty } from 'lodash';
+import { visitUrl, setUrlParams } from '~/lib/utils/url_utility';
+import SearchableDropdown from './searchable_dropdown.vue';
+import { ANY_OPTION, GROUP_DATA, PROJECT_DATA } from '../constants';
+
+export default {
+  name: 'GroupFilter',
+  components: {
+    SearchableDropdown,
+  },
+  props: {
+    initialData: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    ...mapState(['groups', 'fetchingGroups']),
+    selectedGroup() {
+      return isEmpty(this.initialData) ? ANY_OPTION : this.initialData;
+    },
+  },
+  methods: {
+    ...mapActions(['fetchGroups']),
+    handleGroupChange(group) {
+      visitUrl(
+        setUrlParams({ [GROUP_DATA.queryParam]: group.id, [PROJECT_DATA.queryParam]: null }),
+      );
+    },
+  },
+  GROUP_DATA,
+};
+</script>
+
+<template>
+  <searchable-dropdown
+    :header-text="$options.GROUP_DATA.headerText"
+    :selected-display-value="$options.GROUP_DATA.selectedDisplayValue"
+    :items-display-value="$options.GROUP_DATA.itemsDisplayValue"
+    :loading="fetchingGroups"
+    :selected-item="selectedGroup"
+    :items="groups"
+    @search="fetchGroups"
+    @change="handleGroupChange"
+  />
+</template>