1 files changed, 63 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue
new file mode 100644
index 00000000000..4e18376bd48
--- /dev/null
+++ b/app/assets/javascripts/ide/components/merge_requests/item.vue
@@ -0,0 +1,63 @@
+<script>
+import Icon from '../../../vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    currentId: {
+      type: String,
+      required: true,
+    },
+    currentProjectId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    isActive() {
+      return (
+        this.item.iid === parseInt(this.currentId, 10) &&
+        this.currentProjectId === this.item.projectPathWithNamespace
+      );
+    },
+    pathWithID() {
+      return `${this.item.projectPathWithNamespace}!${this.item.iid}`;
+    },
+  },
+  methods: {
+    clickItem() {
+      this.$emit('click', this.item);
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    type="button"
+    class="btn-link d-flex align-items-center"
+    @click="clickItem"
+  >
+    <span class="d-flex append-right-default ide-merge-request-current-icon">
+      <icon
+        v-if="isActive"
+        :size="18"
+        name="mobile-issue-close"
+      />
+    </span>
+    <span>
+      <strong>
+        {{ item.title }}
+      </strong>
+      <span class="ide-merge-request-project-path d-block mt-1">
+        {{ pathWithID }}
+      </span>
+    </span>
+  </button>
+</template>