correctly load up merge request

fixed pipeline request throwing an error

app/assets/javascripts/ide/components/ide_review.vue

@@ -11,17 +11,17 @@ export default {
   },
   computed: {
     ...mapGetters(['currentMergeRequest']),
-    ...mapState(['viewer']),
+    ...mapState(['viewer', 'currentMergeRequestId']),
     showLatestChangesText() {
-      return !this.currentMergeRequest || this.viewer === viewerTypes.diff;
+      return !this.currentMergeRequestId || this.viewer === viewerTypes.diff;
     },
     showMergeRequestText() {
-      return this.currentMergeRequest && this.viewer === viewerTypes.mr;
+      return this.currentMergeRequestId && this.viewer === viewerTypes.mr;
     },
   },
   mounted() {
     this.$nextTick(() => {
-      this.updateViewer(this.currentMergeRequest ? viewerTypes.mr : viewerTypes.diff);
+      this.updateViewer(this.currentMergeRequestId ? viewerTypes.mr : viewerTypes.diff);
     });
   },
   methods: {
@@ -54,7 +54,10 @@ export default {
         </template>
         <template v-else-if="showMergeRequestText">
           {{ __('Merge request') }}
-          (<a :href="currentMergeRequest.web_url">!{{ currentMergeRequest.iid }}</a>)
+          (<a
+            v-if="currentMergeRequest"
+            :href="currentMergeRequest.web_url"
+          >!{{ currentMergeRequest.iid }}</a>)
         </template>
       </div>
     </template>

app/assets/javascripts/ide/components/ide_side_bar.vue

@@ -65,6 +65,8 @@ export default {
   watch: {
     currentBranchId() {
       this.$nextTick(() => {
+        if (!this.$refs.branchId) return;
+
         this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
       });
     },
@@ -145,6 +147,7 @@ export default {
               </div>
               <div class="d-flex">
                 <div
+                  v-if="currentBranchId"
                   class="sidebar-context-title ide-sidebar-branch-title"
                   ref="branchId"
                   v-tooltip
@@ -157,7 +160,10 @@ export default {
                 </div>
                 <div
                   v-if="currentMergeRequestId"
-                  class="sidebar-context-title ide-sidebar-branch-title prepend-left-8"
+                  class="sidebar-context-title ide-sidebar-branch-title"
+                  :class="{
+                    'prepend-left-8': currentBranchId
+                  }"
                 >
                   <icon
                     name="git-merge"

app/assets/javascripts/ide/components/ide_status_bar.vue

@@ -35,9 +35,7 @@ export default {
   },
   watch: {
     lastCommit() {
-      if (!this.isPollingInitialized) {
       this.initPipelinePolling();
-      }
     },
   },
   mounted() {
@@ -47,9 +45,8 @@ export default {
     if (this.intervalId) {
       clearInterval(this.intervalId);
     }
-    if (this.isPollingInitialized) {
+
     this.stopPipelinePolling();
-    }
   },
   methods: {
     ...mapActions('pipelines', ['fetchLatestPipeline', 'stopPipelinePolling']),
@@ -59,8 +56,9 @@ export default {
       }, 1000);
     },
     initPipelinePolling() {
+      if (this.lastCommit) {
         this.fetchLatestPipeline();
-      this.isPollingInitialized = true;
+      }
     },
     commitAgeUpdate() {
       if (this.lastCommit) {

app/assets/javascripts/ide/components/merge_requests/dropdown.vue

@@ -12,7 +12,6 @@ export default {
   },
   computed: {
     ...mapGetters('mergeRequests', ['assignedData', 'createdData']),
-    ...mapState(['currentMergeRequestId']),
     createdMergeRequestLength() {
       return this.createdData.mergeRequests.length;
     },
@@ -37,7 +36,6 @@ export default {
         </template>
         <list
           type="created"
-          :current-id="currentMergeRequestId"
           :empty-text="__('You have not created any merge requests')"
           @hide="hideDropdown"
         />
@@ -51,7 +49,6 @@ export default {
         </template>
         <list
           type="assigned"
-          :current-id="currentMergeRequestId"
           :empty-text="__('You do not have any assigned merge requests')"
           @hide="hideDropdown"
         />

app/assets/javascripts/ide/components/merge_requests/item.vue

@@ -14,10 +14,17 @@ export default {
       type: String,
       required: true,
     },
+    currentProjectId: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     isActive() {
-      return this.item.iid === parseInt(this.currentId, 10);
+      return (
+        this.item.iid === parseInt(this.currentId, 10) &&
+        this.currentProjectId === this.item.projectPathWithNamespace
+      );
     },
     pathWithID() {
       return `${this.item.projectPathWithNamespace}!${this.item.iid}`;
@@ -35,7 +42,7 @@ export default {
   <button
     type="button"
     class="d-flex align-items-center"
-    @click="clickItem"
+    @click.prevent.stop="clickItem"
   >
     <span
       class="d-flex append-right-default"

app/assets/javascripts/ide/components/merge_requests/list.vue

 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import Item from './item.vue';
@@ -14,10 +14,6 @@ export default {
       type: String,
       required: true,
     },
-    currentId: {
-      type: String,
-      required: true,
-    },
     emptyText: {
       type: String,
       required: true,
@@ -30,6 +26,7 @@ export default {
   },
   computed: {
     ...mapGetters('mergeRequests', ['getData']),
+    ...mapState(['currentMergeRequestId', 'currentProjectId']),
     data() {
       return this.getData(this.type);
     },
@@ -46,20 +43,25 @@ export default {
       return this.search !== '' && !this.hasMergeRequests;
     },
   },
+  watch: {
+    isLoading: {
+      handler: 'focusSearch',
+    },
+  },
   mounted() {
     this.loadMergeRequests();
   },
   methods: {
-    ...mapActions('mergeRequests', ['fetchMergeRequests']),
+    ...mapActions('mergeRequests', ['fetchMergeRequests', 'openMergeRequest']),
     ...mapActions(['closeAllFiles']),
     loadMergeRequests() {
       this.fetchMergeRequests({ type: this.type, search: this.search });
     },
     viewMergeRequest(item) {
-      return this.closeAllFiles()
-        .then(() => {
       this.$emit('hide');
-          this.$router.push(`/project/${item.projectPathWithNamespace}/merge_requests/${item.iid}`);
+      this.openMergeRequest({
+        projectPath: item.projectPathWithNamespace,
+        id: item.iid,
       });
     },
     searchMergeRequests: _.debounce(function debounceSearch() {
@@ -107,7 +109,8 @@ export default {
             >
               <item
                 :item="item"
-                :current-id="currentId"
+                :current-id="currentMergeRequestId"
+                :current-project-id="currentProjectId"
                 @click="viewMergeRequest"
               />
             </li>

app/assets/javascripts/ide/index.js

@@ -9,6 +9,7 @@ Vue.use(Translate);
 
 export function initIde(el) {
   if (!el) return null;
+  window.store = store;
 
   return new Vue({
     el,

app/assets/javascripts/ide/stores/actions/project.js

@@ -13,7 +13,6 @@ export const getProjectData = ({ commit, state }, { namespace, projectId, force
         .then(data => {
           commit(types.TOGGLE_LOADING, { entry: state });
           commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data });
-          if (!state.currentProjectId)
           commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`);
           resolve(data);
         })

app/assets/javascripts/ide/stores/modules/merge_requests/actions.js

 import { __ } from '../../../../locale';
 import Api from '../../../../api';
 import flash from '../../../../flash';
+import router from '../../../ide_router';
 import { scopes } from './constants';
 import * as types from './mutation_types';
+import * as rootTypes from '../../mutation_types';
 
 export const requestMergeRequests = ({ commit }, type) =>
   commit(types.REQUEST_MERGE_REQUESTS, type);
@@ -25,4 +27,17 @@ export const fetchMergeRequests = ({ dispatch, state: { state } }, { type, searc
 
 export const resetMergeRequests = ({ commit }, type) => commit(types.RESET_MERGE_REQUESTS, type);
 
+export const openMergeRequest = ({ commit, dispatch }, { projectPath, id }) => {
+  commit(rootTypes.CLEAR_PROJECTS, null, { root: true });
+  commit(rootTypes.SET_CURRENT_MERGE_REQUEST, `${id}`, { root: true });
+  commit(rootTypes.RESET_OPEN_FILES, null, { root: true });
+  dispatch('pipelines/stopPipelinePolling', null, { root: true });
+  dispatch('pipelines/clearEtagPoll', null, { root: true });
+  dispatch('pipelines/resetLatestPipeline', null, { root: true });
+
+  return dispatch('setCurrentBranchId', '', { root: true }).then(() =>
+    router.push(`/project/${projectPath}/merge_requests/${id}`),
+  );
+};
+
 export default () => {};

app/assets/javascripts/ide/stores/modules/pipelines/actions.js

@@ -102,4 +102,7 @@ export const fetchJobTrace = ({ dispatch, state }) => {
     .catch(() => dispatch('receiveJobTraceError'));
 };
 
+export const resetLatestPipeline = ({ commit }) =>
+  commit(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, null);
+
 export default () => {};

app/assets/javascripts/ide/stores/mutation_types.js

@@ -68,3 +68,6 @@ export const TOGGLE_FILE_FINDER = 'TOGGLE_FILE_FINDER';
 export const BURST_UNUSED_SEAL = 'BURST_UNUSED_SEAL';
 
 export const SET_RIGHT_PANE = 'SET_RIGHT_PANE';
+
+export const CLEAR_PROJECTS = 'CLEAR_PROJECTS';
+export const RESET_OPEN_FILES = 'RESET_OPEN_FILES';

app/assets/javascripts/ide/stores/mutations.js

@@ -157,6 +157,12 @@ export default {
   [types.SET_LINKS](state, links) {
     Object.assign(state, { links });
   },
+  [types.CLEAR_PROJECTS](state) {
+    Object.assign(state, { projects: {}, trees: {} });
+  },
+  [types.RESET_OPEN_FILES](state) {
+    Object.assign(state, { openFiles: [] });
+  },
   ...projectMutations,
   ...mergeRequestMutation,
   ...fileMutations,

app/assets/javascripts/vue_shared/components/tabs/tabs.js

@@ -23,6 +23,7 @@ export default {
     setTab(e, index) {
       if (this.stopPropagation) {
         e.stopPropagation();
+        e.preventDefault();
       }
 
       this.tabs[this.currentIndex].localActive = false;

app/assets/stylesheets/framework/contextual_sidebar.scss

@@ -33,13 +33,13 @@
     align-items: center;
     padding: 10px 16px 10px 10px;
     color: $gl-text-color;
-  }
 
     &:hover,
     a:hover {
       background-color: $link-hover-background;
       color: $gl-text-color;
     }
+  }
 
   .avatar-container {
     flex: 0 0 40px;

app/assets/stylesheets/pages/repo.scss

@@ -1143,6 +1143,10 @@
   .sidebar-context-title {
     white-space: nowrap;
   }
+
+  .ide-sidebar-branch-title {
+    min-width: 50px;
+  }
 }
 
 .ide-external-link {