1 files changed, 87 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/group_filter.vue b/app/assets/javascripts/search/sidebar/components/group_filter.vue
new file mode 100644
index 00000000000..20231cdda6a
--- /dev/null
+++ b/app/assets/javascripts/search/sidebar/components/group_filter.vue
@@ -0,0 +1,87 @@
+<script>
+import { isEmpty } from 'lodash';
+// eslint-disable-next-line no-restricted-imports
+import { mapState, mapActions, mapGetters } from 'vuex';
+import { s__ } from '~/locale';
+import { visitUrl, setUrlParams } from '~/lib/utils/url_utility';
+import { ANY_OPTION, GROUP_DATA, PROJECT_DATA } from '../constants';
+import SearchableDropdown from './searchable_dropdown.vue';
+
+export default {
+  name: 'GroupFilter',
+  i18n: {
+    groupFieldLabel: s__('GlobalSearch|Group'),
+  },
+  components: {
+    SearchableDropdown,
+  },
+  data() {
+    return {
+      search: '',
+      labelId: 'group-filter-dropdown-id',
+    };
+  },
+  computed: {
+    ...mapState(['query', 'groups', 'fetchingGroups', 'groupInitialJson', 'useSidebarNavigation']),
+    ...mapGetters(['frequentGroups', 'currentScope']),
+    selectedGroup() {
+      return isEmpty(this.groupInitialJson) ? ANY_OPTION : this.groupInitialJson;
+    },
+  },
+  watch: {
+    search() {
+      this.debounceSearch();
+    },
+  },
+  created() {
+    // This tracks groups searched via the top nav search bar
+    if (this.query.nav_source === 'navbar' && this.groupInitialJson?.id) {
+      this.setFrequentGroup(this.groupInitialJson);
+    }
+  },
+  methods: {
+    ...mapActions(['fetchGroups', 'setFrequentGroup', 'loadFrequentGroups']),
+    firstLoad() {
+      this.loadFrequentGroups();
+      this.fetchGroups();
+    },
+    handleGroupChange(group) {
+      // If group.id is null we are clearing the filter and don't need to store that in LS.
+      if (group.id) {
+        this.setFrequentGroup(group);
+      }
+
+      visitUrl(
+        setUrlParams({
+          [GROUP_DATA.queryParam]: group.id,
+          [PROJECT_DATA.queryParam]: null,
+          nav_source: null,
+          scope: this.currentScope,
+        }),
+      );
+    },
+  },
+  GROUP_DATA,
+};
+</script>
+
+<template>
+  <div>
+    <h5 :id="labelId" class="gl-mt-0 gl-mb-5 gl-font-sm">
+      {{ $options.i18n.groupFieldLabel }}
+    </h5>
+    <searchable-dropdown
+      data-testid="group-filter"
+      :header-text="$options.GROUP_DATA.headerText"
+      :name="$options.GROUP_DATA.name"
+      :loading="fetchingGroups"
+      :selected-item="selectedGroup"
+      :items="groups"
+      :frequent-items="frequentGroups"
+      :search-handler="fetchGroups"
+      :label-id="labelId"
+      @first-open="firstLoad"
+      @change="handleGroupChange"
+    />
+  </div>
+</template>