1 files changed, 95 insertions, 0 deletions
diff --git a/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue
new file mode 100644
index 00000000000..c1f57be7f97
--- /dev/null
+++ b/app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue
@@ -0,0 +1,95 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { PROJECTS_PER_PAGE } from '../constants';
+import getProjectsQuery from '../graphql/queries/get_projects.query.graphql';
+
+export default {
+  PROJECTS_PER_PAGE,
+  projectQueryPageInfo: {
+    endCursor: '',
+  },
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlSearchBoxByType,
+    GlLoadingIcon,
+  },
+  props: {
+    selectedProject: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      initialProjectsLoading: true,
+      projectSearchQuery: '',
+    };
+  },
+  apollo: {
+    projects: {
+      query: getProjectsQuery,
+      variables() {
+        return {
+          search: this.projectSearchQuery,
+          first: this.$options.PROJECTS_PER_PAGE,
+          after: this.$options.projectQueryPageInfo.endCursor,
+          searchNamespaces: true,
+          sort: 'similarity',
+        };
+      },
+      update(data) {
+        return data?.projects?.nodes.filter((project) => !project.repository.empty) ?? [];
+      },
+      result() {
+        this.initialProjectsLoading = false;
+      },
+      error() {
+        this.onError({ message: __('Failed to load projects') });
+      },
+    },
+  },
+  computed: {
+    projectsLoading() {
+      return Boolean(this.$apollo.queries.projects.loading);
+    },
+    projectDropdownText() {
+      return this.selectedProject?.nameWithNamespace || __('Select a project');
+    },
+  },
+  methods: {
+    async onProjectSelect(project) {
+      this.$emit('change', project);
+    },
+    onError({ message } = {}) {
+      this.$emit('error', { message });
+    },
+    isProjectSelected(project) {
+      return project.id === this.selectedProject?.id;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown :text="projectDropdownText" :loading="initialProjectsLoading">
+    <template #header>
+      <gl-search-box-by-type v-model.trim="projectSearchQuery" :debounce="250" />
+    </template>
+
+    <gl-loading-icon v-show="projectsLoading" />
+    <template v-if="!projectsLoading">
+      <gl-dropdown-item
+        v-for="project in projects"
+        :key="project.id"
+        is-check-item
+        :is-checked="isProjectSelected(project)"
+        @click="onProjectSelect(project)"
+      >
+        {{ project.nameWithNamespace }}
+      </gl-dropdown-item>
+    </template>
+  </gl-dropdown>
+</template>