1 files changed, 78 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
new file mode 100644
index 00000000000..ed4edabd81c
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/compare_dropdown_layout.vue
@@ -0,0 +1,78 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    Icon,
+    TimeAgo,
+  },
+  props: {
+    versions: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    selectedVersionName() {
+      return this.versions.find(x => x.selected)?.versionName || '';
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="dropdown inline">
+    <a
+      class="dropdown-menu-toggle btn btn-default w-100"
+      data-toggle="dropdown"
+      aria-expanded="false"
+    >
+      <span> {{ selectedVersionName }} </span>
+      <icon :size="12" name="angle-down" class="position-absolute" />
+    </a>
+    <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
+      <div class="dropdown-content">
+        <ul>
+          <li v-for="version in versions" :key="version.id">
+            <a :class="{ 'is-active': version.selected }" :href="version.href">
+              <div>
+                <strong>
+                  {{ version.versionName }}
+                  <template v-if="version.isHead">{{
+                    s__('DiffsCompareBaseBranch|(HEAD)')
+                  }}</template>
+                  <template v-else-if="version.isBase">{{
+                    s__('DiffsCompareBaseBranch|(base)')
+                  }}</template>
+                </strong>
+              </div>
+              <div>
+                <small class="commit-sha"> {{ version.short_commit_sha }} </small>
+              </div>
+              <div>
+                <small>
+                  <template v-if="version.commitsText">
+                    {{ version.commitsText }}
+                  </template>
+                  <time-ago
+                    v-if="version.created_at"
+                    :time="version.created_at"
+                    class="js-timeago"
+                  />
+                </small>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </span>
+</template>
+
+<style>
+.dropdown {
+  min-width: 0;
+  max-height: 170px;
+}
+</style>