Create Web IDE MR and branch picker

1 files changed, 54 insertions, 0 deletions

diff --git a/app/assets/javascripts/ide/components/nav_dropdown_button.vue b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
new file mode 100644
index 00000000000..7f98769d484
--- /dev/null
+++ b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
@@ -0,0 +1,54 @@
+<script>
+import { mapState } from 'vuex';
+import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+
+const EMPTY_LABEL = '-';
+
+export default {
+  components: {
+    Icon,
+    DropdownButton,
+  },
+  computed: {
+    ...mapState(['currentBranchId', 'currentMergeRequestId']),
+    mergeRequestLabel() {
+      return this.currentMergeRequestId
+        ? `!${this.currentMergeRequestId}`
+        : EMPTY_LABEL;
+    },
+    branchLabel() {
+      return this.currentBranchId || EMPTY_LABEL;
+    },
+  },
+};
+</script>
+
+<template>
+  <dropdown-button>
+    <span
+      class="row"
+    >
+      <span
+        class="col-7 text-truncate"
+      >
+        <icon
+          :size="16"
+          :aria-label="__('Current Branch')"
+          name="branch"
+        />
+        {{ branchLabel }}
+      </span>
+      <span
+        class="col-5 pl-0 text-truncate"
+      >
+        <icon
+          :size="16"
+          :aria-label="__('Merge Request')"
+          name="merge-request"
+        />
+        {{ mergeRequestLabel }}
+      </span>
+    </span>
+  </dropdown-button>
+</template>