1 files changed, 93 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/compare/components/repo_dropdown.vue b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue
new file mode 100644
index 00000000000..822dfc09d81
--- /dev/null
+++ b/app/assets/javascripts/projects/compare/components/repo_dropdown.vue
@@ -0,0 +1,93 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
+
+const SOURCE_PARAM_NAME = 'to';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlSearchBoxByType,
+  },
+  inject: ['projectTo', 'projectsFrom'],
+  props: {
+    paramsName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      searchTerm: '',
+      selectedRepo: {},
+    };
+  },
+  computed: {
+    filteredRepos() {
+      const lowerCaseSearchTerm = this.searchTerm.toLowerCase();
+
+      return this?.projectsFrom.filter(({ name }) =>
+        name.toLowerCase().includes(lowerCaseSearchTerm),
+      );
+    },
+    isSourceRevision() {
+      return this.paramsName === SOURCE_PARAM_NAME;
+    },
+    inputName() {
+      return `${this.paramsName}_project_id`;
+    },
+  },
+  mounted() {
+    this.setDefaultRepo();
+  },
+  methods: {
+    onClick(repo) {
+      this.selectedRepo = repo;
+      this.emitTargetProject(repo.name);
+    },
+    setDefaultRepo() {
+      if (this.isSourceRevision) {
+        this.selectedRepo = this.projectTo;
+        return;
+      }
+
+      const [defaultTargetProject] = this.projectsFrom;
+      this.emitTargetProject(defaultTargetProject.name);
+      this.selectedRepo = defaultTargetProject;
+    },
+    emitTargetProject(name) {
+      if (!this.isSourceRevision) {
+        this.$emit('changeTargetProject', name);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <input type="hidden" :name="inputName" :value="selectedRepo.id" />
+    <gl-dropdown
+      :text="selectedRepo.name"
+      :header-text="s__(`CompareRevisions|Select target project`)"
+      class="gl-w-full gl-font-monospace gl-sm-pr-3"
+      toggle-class="gl-min-w-0"
+      :disabled="isSourceRevision"
+    >
+      <template #header>
+        <gl-search-box-by-type v-if="!isSourceRevision" v-model.trim="searchTerm" />
+      </template>
+      <template v-if="!isSourceRevision">
+        <gl-dropdown-item
+          v-for="repo in filteredRepos"
+          :key="repo.id"
+          is-check-item
+          :is-checked="selectedRepo.id === repo.id"
+          @click="onClick(repo)"
+        >
+          {{ repo.name }}
+        </gl-dropdown-item>
+      </template>
+    </gl-dropdown>
+  </div>
+</template>