1 files changed, 75 insertions, 14 deletions

diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 3f980203911..1dc2170edde 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,4 +1,5 @@
 <script>
+import $ from 'jquery';
 import { mapState, mapGetters } from 'vuex';
 import ProjectAvatarImage from '~/vue_shared/components/project_avatar/image.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -13,6 +14,7 @@ import CommitSection from './repo_commit_section.vue';
 import CommitForm from './commit_sidebar/form.vue';
 import IdeReview from './ide_review.vue';
 import SuccessMessage from './commit_sidebar/success_message.vue';
+import MergeRequestDropdown from './merge_requests/dropdown.vue';
 import { activityBarViews } from '../constants';
 
 export default {
@@ -32,10 +34,12 @@ export default {
     CommitForm,
     IdeReview,
     SuccessMessage,
+    MergeRequestDropdown,
   },
   data() {
     return {
       showTooltip: false,
+      showMergeRequestsDropdown: false,
     };
   },
   computed: {
@@ -46,6 +50,7 @@ export default {
       'changedFiles',
       'stagedFiles',
       'lastCommitMsg',
+      'currentMergeRequestId',
     ]),
     ...mapGetters(['currentProject', 'someUncommitedChanges']),
     showSuccessMessage() {
@@ -61,9 +66,39 @@ export default {
   watch: {
     currentBranchId() {
       this.$nextTick(() => {
+        if (!this.$refs.branchId) return;
+
         this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
       });
     },
+    loading() {
+      this.$nextTick(() => {
+        this.addDropdownListeners();
+      });
+    },
+  },
+  mounted() {
+    this.addDropdownListeners();
+  },
+  beforeDestroy() {
+    $(this.$refs.mergeRequestDropdown)
+      .off('show.bs.dropdown')
+      .off('hide.bs.dropdown');
+  },
+  methods: {
+    addDropdownListeners() {
+      if (!this.$refs.mergeRequestDropdown) return;
+
+      $(this.$refs.mergeRequestDropdown)
+        .on('show.bs.dropdown', () => {
+          this.toggleMergeRequestDropdown();
+        }).on('hide.bs.dropdown', () => {
+          this.toggleMergeRequestDropdown();
+        });
+    },
+    toggleMergeRequestDropdown() {
+      this.showMergeRequestsDropdown = !this.showMergeRequestsDropdown;
+    },
   },
 };
 </script>
@@ -88,9 +123,13 @@ export default {
         </div>
       </template>
       <template v-else>
-        <div class="context-header ide-context-header">
-          <a
-            :href="currentProject.web_url"
+        <div
+          class="context-header ide-context-header dropdown"
+          ref="mergeRequestDropdown"
+        >
+          <button
+            type="button"
+            data-toggle="dropdown"
           >
             <div
               v-if="currentProject.avatar_url"
@@ -114,19 +153,41 @@ export default {
               <div class="sidebar-context-title">
                 {{ currentProject.name }}
               </div>
-              <div
-                class="sidebar-context-title ide-sidebar-branch-title"
-                ref="branchId"
-                v-tooltip
-                :title="branchTooltipTitle"
-              >
-                <icon
-                  name="branch"
-                  css-classes="append-right-5"
-                />{{ currentBranchId }}
+              <div class="d-flex">
+                <div
+                  v-if="currentBranchId"
+                  class="sidebar-context-title ide-sidebar-branch-title"
+                  ref="branchId"
+                  v-tooltip
+                  :title="branchTooltipTitle"
+                >
+                  <icon
+                    name="branch"
+                    css-classes="append-right-5"
+                  />{{ currentBranchId }}
+                </div>
+                <div
+                  v-if="currentMergeRequestId"
+                  class="sidebar-context-title ide-sidebar-branch-title"
+                  :class="{
+                    'prepend-left-8': currentBranchId
+                  }"
+                >
+                  <icon
+                    name="git-merge"
+                    css-classes="append-right-5"
+                  />!{{ currentMergeRequestId }}
+                </div>
               </div>
             </div>
-          </a>
+            <icon
+              class="ml-auto"
+              name="chevron-down"
+            />
+          </button>
+          <merge-request-dropdown
+            :show="showMergeRequestsDropdown"
+          />
         </div>
         <div class="multi-file-commit-panel-inner-scroll">
           <component