1 files changed, 94 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/project_filter.vue b/app/assets/javascripts/search/sidebar/components/project_filter.vue
new file mode 100644
index 00000000000..76983644e60
--- /dev/null
+++ b/app/assets/javascripts/search/sidebar/components/project_filter.vue
@@ -0,0 +1,94 @@
+<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 '~/search/sidebar/constants';
+import SearchableDropdown from './searchable_dropdown.vue';
+
+export default {
+  name: 'ProjectFilter',
+  i18n: {
+    projectFieldLabel: s__('GlobalSearch|Project'),
+  },
+  components: {
+    SearchableDropdown,
+  },
+  data() {
+    return {
+      search: '',
+      labelId: 'projects-filter-dropdown-id',
+    };
+  },
+  computed: {
+    ...mapState([
+      'query',
+      'projects',
+      'fetchingProjects',
+      'projectInitialJson',
+      'useSidebarNavigation',
+    ]),
+    ...mapGetters(['frequentProjects', 'currentScope']),
+    selectedProject() {
+      return isEmpty(this.projectInitialJson) ? ANY_OPTION : this.projectInitialJson;
+    },
+  },
+  watch: {
+    search() {
+      this.debounceSearch();
+    },
+  },
+  created() {
+    // This tracks projects searched via the top nav search bar
+    if (this.query.nav_source === 'navbar' && this.projectInitialJson?.id) {
+      this.setFrequentProject(this.projectInitialJson);
+    }
+  },
+  methods: {
+    ...mapActions(['fetchProjects', 'setFrequentProject', 'loadFrequentProjects']),
+    firstLoad() {
+      this.loadFrequentProjects();
+      this.fetchProjects();
+    },
+    handleProjectChange(project) {
+      // If project.id is null we are clearing the filter and don't need to store that in LS.
+      if (project.id) {
+        this.setFrequentProject(project);
+      }
+
+      // This determines if we need to update the group filter or not
+      const queryParams = {
+        ...(project.namespace?.id && { [GROUP_DATA.queryParam]: project.namespace.id }),
+        [PROJECT_DATA.queryParam]: project.id,
+        nav_source: null,
+        scope: this.currentScope,
+      };
+
+      visitUrl(setUrlParams(queryParams));
+    },
+  },
+  PROJECT_DATA,
+};
+</script>
+
+<template>
+  <div>
+    <h5 :id="labelId" class="gl-mt-0 gl-mb-5 gl-font-sm">
+      {{ $options.i18n.projectFieldLabel }}
+    </h5>
+    <searchable-dropdown
+      data-testid="project-filter"
+      :header-text="$options.PROJECT_DATA.headerText"
+      :name="$options.PROJECT_DATA.name"
+      :loading="fetchingProjects"
+      :selected-item="selectedProject"
+      :items="projects"
+      :frequent-items="frequentProjects"
+      :search-handler="fetchProjects"
+      :label-id="labelId"
+      @first-open="firstLoad"
+      @change="handleProjectChange"
+    />
+  </div>
+</template>