Added merge request to IDE sidebar

#44846

3 files changed, 51 insertions, 68 deletions

diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
index 0c44a755f56..e50b1c0315d 100644
--- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
+++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue
@@ -1,28 +1,14 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
 import { __, sprintf } from '~/locale';
 
 export default {
-  components: {
-    Icon,
-  },
   props: {
-    hasChanges: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    mergeRequestId: {
-      type: String,
-      required: false,
-      default: '',
-    },
     viewer: {
       type: String,
       required: true,
     },
-    showShadow: {
-      type: Boolean,
+    mergeRequestId: {
+      type: Number,
       required: true,
     },
   },
@@ -44,69 +30,30 @@ export default {
 <template>
   <div
     class="dropdown"
-    :class="{
-      shadow: showShadow,
-    }"
+    style="margin-left:auto;"
   >
     <button
       type="button"
-      class="btn btn-primary btn-sm"
-      :class="{
-        'btn-inverted': hasChanges,
-      }"
+      class="btn btn-link"
       data-toggle="dropdown"
     >
-      <template v-if="viewer === 'mrdiff' && mergeRequestId">
-        {{ mergeReviewLine }}
-      </template>
-      <template v-else-if="viewer === 'editor'">
-        {{ __('Editing') }}
-      </template>
-      <template v-else>
-        {{ __('Reviewing') }}
-      </template>
-      <icon
-        name="angle-down"
-        :size="12"
-        css-classes="caret-down"
-      />
+      Edit
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-open-left">
       <ul>
-        <template v-if="mergeRequestId">
-          <li>
-            <a
-              href="#"
-              @click.prevent="changeMode('mrdiff')"
-              :class="{
-                'is-active': viewer === 'mrdiff',
-              }"
-            >
-              <strong class="dropdown-menu-inner-title">
-                {{ mergeReviewLine }}
-              </strong>
-              <span class="dropdown-menu-inner-content">
-                {{ __('Compare changes with the merge request target branch') }}
-              </span>
-            </a>
-          </li>
-          <li
-            role="separator"
-            class="divider"
-          >
-          </li>
-        </template>
         <li>
           <a
             href="#"
-            @click.prevent="changeMode('editor')"
+            @click.prevent="changeMode('mrdiff')"
             :class="{
-              'is-active': viewer === 'editor',
+              'is-active': viewer === 'mrdiff',
             }"
           >
-            <strong class="dropdown-menu-inner-title">{{ __('Editing') }}</strong>
+            <strong class="dropdown-menu-inner-title">
+              {{ mergeReviewLine }}
+            </strong>
             <span class="dropdown-menu-inner-content">
-              {{ __('View and edit lines') }}
+              {{ __('Compare changes with the merge request target branch') }}
             </span>
           </a>
         </li>
diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index ede1a753f17..230fd094d69 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -1,26 +1,61 @@
 <script>
+import { mapGetters, mapState, mapActions } from 'vuex';
 import IdeTreeList from './ide_tree_list.vue';
+import EditorModeDropdown from './editor_mode_dropdown.vue';
 
 export default {
   components: {
     IdeTreeList,
+    EditorModeDropdown,
+  },
+  computed: {
+    ...mapGetters(['currentMergeRequest']),
+    ...mapState(['viewer']),
+  },
+  mounted() {
+    this.updateViewer(this.currentMergeRequest ? 'mrdiff' : 'diff');
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
   },
 };
 </script>
 
 <template>
   <ide-tree-list
-    viewer-type="diff"
+    :viewer-type="viewer"
     header-class="ide-review-header"
     :disable-action-dropdown="true"
   >
     <template
       slot="header"
     >
-      {{ __('Review') }}
+      <div class="ide-review-button-holder">
+        {{ __('Review') }}
+        <editor-mode-dropdown
+          v-if="currentMergeRequest"
+          :viewer="viewer"
+          :merge-request-id="currentMergeRequest.iid"
+          @click="updateViewer"
+        />
+      </div>
       <div class="prepend-top-5 ide-review-sub-header">
-        {{ __('Lastest changes') }}
+        <template v-if="!currentMergeRequest || viewer === 'diff'">
+          {{ __('Lastest changes') }}
+        </template>
+        <template v-else-if="currentMergeRequest && viewer === 'mrdiff'">
+          Merge request
+          (<a :href="currentMergeRequest.web_url">!{{ currentMergeRequest.iid }}</a>)
+        </template>
       </div>
     </template>
   </ide-tree-list>
 </template>
+
+<style>
+.ide-review-button-holder {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+</style>
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index ee30e5074b3..f68eb8f4ce6 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import flash from '~/flash';
 import store from './stores';
+import { activityBarViews } from './constants';
 
 Vue.use(VueRouter);
 
@@ -101,7 +102,7 @@ router.beforeEach((to, from, next) => {
               throw e;
             });
         } else if (to.params.mrid) {
-          store.dispatch('updateViewer', 'mrdiff');
+          store.dispatch('updateActivityBarView', activityBarViews.review);
 
           store
             .dispatch('getMergeRequestData', {