fetch both created & assigned

show badges for both

[ci skip]

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

@@ -38,6 +38,7 @@ export default {
   data() {
     return {
       showTooltip: false,
+      showMergeRequestsDropdown: false,
     };
   },
   computed: {
@@ -67,6 +68,23 @@ export default {
         this.showTooltip = this.$refs.branchId.scrollWidth > this.$refs.branchId.offsetWidth;
       });
     },
+    showMergeRequestsDropdown() {
+      if (this.showMergeRequestsDropdown) {
+        document.addEventListener('click', this.hideMergeRequestDropdown);
+      } else {
+        document.removeEventListener('click', this.hideMergeRequestDropdown);
+      }
+    },
+  },
+  methods: {
+    hideMergeRequestDropdown(e) {
+      if (this.$refs.mergeRequestDropdown.contains(e.target)) return;
+
+      this.showMergeRequestsDropdown = false;
+    },
+    toggleMergeRequestDropdown() {
+      this.showMergeRequestsDropdown = !this.showMergeRequestsDropdown;
+    },
   },
 };
 </script>
@@ -91,12 +109,17 @@ export default {
         </div>
       </template>
       <template v-else>
-        <div class="context-header ide-context-header dropdown">
+        <div
+          class="context-header ide-context-header dropdown"
+          :class="{
+            show: showMergeRequestsDropdown
+          }"
+          ref="mergeRequestDropdown"
+        >
           <a
             href="#"
             role="button"
-            @click.prevent
-            data-toggle="dropdown"
+            @click.prevent="toggleMergeRequestDropdown"
           >
             <div
               v-if="currentProject.avatar_url"
@@ -148,7 +171,10 @@ export default {
               name="chevron-down"
             />
           </a>
-          <merge-request-dropdown />
+          <merge-request-dropdown
+            v-if="showMergeRequestsDropdown"
+            @hide="toggleMergeRequestDropdown"
+          />
         </div>
         <div class="multi-file-commit-panel-inner-scroll">
           <component

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

 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import Tabs from '../../../vue_shared/components/tabs/tabs';
 import Tab from '../../../vue_shared/components/tabs/tab.vue';
 import List from './list.vue';
-import { scopes } from '../../stores/modules/merge_requests/constants';
 
 export default {
   components: {
@@ -11,28 +10,16 @@ export default {
     Tab,
     List,
   },
-  data() {
-    return {
-      activeTabIndex: 0,
-    };
-  },
   computed: {
-    ...mapState('mergeRequests', ['isLoading', 'mergeRequests']),
+    ...mapGetters('mergeRequests', ['assignedData', 'createdData']),
     ...mapState(['currentMergeRequestId']),
-    tabScope() {
-      return this.activeTabIndex === 0 ? scopes.createdByMe : scopes.assignedToMe;
-    },
+    createdMergeRequestLength() {
+      return this.createdData.mergeRequests.length;
     },
-  mounted() {
-    this.fetchMergeRequests();
   },
   methods: {
-    ...mapActions('mergeRequests', ['fetchMergeRequests', 'setScope']),
-    updateActiveTab(index) {
-      this.activeTabIndex = index;
-
-      this.setScope(this.tabScope);
-      this.fetchMergeRequests();
+    hideDropdown() {
+      this.$emit('hide');
     },
   },
 };
@@ -40,31 +27,33 @@ export default {
 
 <template>
   <div class="dropdown-menu ide-merge-requests-dropdown">
-    <tabs
-      stop-propagation
-      @changed="updateActiveTab"
-    >
-      <tab
-        :title="__('Created by me')"
-        active
-      >
+    <tabs stop-propagation>
+      <tab active>
+        <template slot="title">
+          {{ __('Created by me') }}
+          <span class="badge badge-pill">
+            {{ createdMergeRequestLength }}
+          </span>
+        </template>
         <list
-          v-if="activeTabIndex === 0"
-          :is-loading="isLoading"
-          :items="mergeRequests"
+          type="created"
           :current-id="currentMergeRequestId"
           :empty-text="__('You have not created any merge requests')"
-          @search="fetchMergeRequests"
+          @hide="hideDropdown"
         />
       </tab>
-      <tab :title="__('Assigned to me')">
+      <tab>
+        <template slot="title">
+          {{ __('Assigned to me') }}
+          <span class="badge badge-pill">
+            {{ assignedData.mergeRequests.length }}
+          </span>
+        </template>
         <list
-          v-if="activeTabIndex === 1"
-          :is-loading="isLoading"
-          :items="mergeRequests"
+          type="assigned"
           :current-id="currentMergeRequestId"
           :empty-text="__('You do not have any assigned merge requests')"
-          @search="fetchMergeRequests"
+          @hide="hideDropdown"
         />
       </tab>
     </tabs>

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

 <script>
+import { mapActions, mapGetters } from 'vuex';
 import _ from 'underscore';
 import LoadingIcon from '../../../vue_shared/components/loading_icon.vue';
 import Item from './item.vue';
@@ -9,12 +10,8 @@ export default {
     Item,
   },
   props: {
-    isLoading: {
-      type: Boolean,
-      required: true,
-    },
-    items: {
-      type: Array,
+    type: {
+      type: String,
       required: true,
     },
     currentId: {
@@ -32,24 +29,41 @@ export default {
     };
   },
   computed: {
+    ...mapGetters('mergeRequests', ['getData']),
+    data() {
+      return this.getData(this.type);
+    },
+    isLoading() {
+      return this.data.isLoading;
+    },
+    mergeRequests() {
+      return this.data.mergeRequests;
+    },
     hasMergeRequests() {
-      return this.items.length !== 0;
+      return this.mergeRequests.length !== 0;
     },
     hasNoSearchResults() {
       return this.search !== '' && !this.hasMergeRequests;
     },
   },
-  watch: {
-    isLoading() {
-      this.focusSearch();
-    },
+  mounted() {
+    this.loadMergeRequests();
   },
   methods: {
+    ...mapActions('mergeRequests', ['fetchMergeRequests']),
+    ...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}`);
+        });
     },
     searchMergeRequests: _.debounce(function debounceSearch() {
-      this.$emit('search', this.search);
+      this.loadMergeRequests();
     }, 250),
     focusSearch() {
       if (!this.isLoading) {
@@ -88,7 +102,7 @@ export default {
         <ul class="mb-3">
           <template v-if="hasMergeRequests">
             <li
-              v-for="item in items"
+              v-for="item in mergeRequests"
               :key="item.id"
             >
               <item
@@ -103,7 +117,7 @@ export default {
             class="ide-merge-requests-empty d-flex align-items-center justify-content-center"
           >
             <template v-if="hasNoSearchResults">
-              No merge requests found
+              {{ __('No merge requests found') }}
             </template>
             <template v-else>
               {{ emptyText }}

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

@@ -17,9 +17,7 @@ export const getMergeRequestData = (
             mergeRequestId,
             mergeRequest: data,
           });
-          if (!state.currentMergeRequestId) {
           commit(types.SET_CURRENT_MERGE_REQUEST, mergeRequestId);
-          }
           resolve(data);
         })
         .catch(() => {

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

 import { __ } from '../../../../locale';
 import Api from '../../../../api';
 import flash from '../../../../flash';
+import { scopes } from './constants';
 import * as types from './mutation_types';
 
-export const requestMergeRequests = ({ commit }) => commit(types.REQUEST_MERGE_REQUESTS);
-export const receiveMergeRequestsError = ({ commit }) => {
+export const requestMergeRequests = ({ commit }, type) =>
+  commit(types.REQUEST_MERGE_REQUESTS, type);
+export const receiveMergeRequestsError = ({ commit }, type) => {
   flash(__('Error loading merge requests.'));
-  commit(types.RECEIVE_MERGE_REQUESTS_ERROR);
+  commit(types.RECEIVE_MERGE_REQUESTS_ERROR, type);
 };
-export const receiveMergeRequestsSuccess = ({ commit }, data) =>
-  commit(types.RECEIVE_MERGE_REQUESTS_SUCCESS, data);
+export const receiveMergeRequestsSuccess = ({ commit }, { type, data }) =>
+  commit(types.RECEIVE_MERGE_REQUESTS_SUCCESS, { type, data });
 
-export const fetchMergeRequests = ({ dispatch, state: { scope, state } }, search = '') => {
-  dispatch('requestMergeRequests');
-  dispatch('resetMergeRequests');
+export const fetchMergeRequests = ({ dispatch, state: { state } }, { type, search = '' }) => {
+  const scope = scopes[type];
+  dispatch('requestMergeRequests', type);
+  dispatch('resetMergeRequests', type);
 
   Api.mergeRequests({ scope, state, search })
-    .then(({ data }) => dispatch('receiveMergeRequestsSuccess', data))
-    .catch(() => dispatch('receiveMergeRequestsError'));
+    .then(({ data }) => dispatch('receiveMergeRequestsSuccess', { type, data }))
+    .catch(() => dispatch('receiveMergeRequestsError', type));
 };
 
-export const resetMergeRequests = ({ commit }) => commit(types.RESET_MERGE_REQUESTS);
-
-export const setScope = ({ commit }, scope) => commit(types.SET_SCOPE, scope);
+export const resetMergeRequests = ({ commit }, type) => commit(types.RESET_MERGE_REQUESTS, type);
 
 export default () => {};

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

 export const scopes = {
-  assignedToMe: 'assigned-to-me',
-  createdByMe: 'created-by-me',
+  assigned: 'assigned-to-me',
+  created: 'created-by-me',
 };
 
 export const states = {

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

+export const getData = state => type => state[type];
+
+export const assignedData = state => state.assigned;
+export const createdData = state => state.created;

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

 import state from './state';
 import * as actions from './actions';
+import * as getters from './getters';
 import mutations from './mutations';
 
 export default {
@@ -7,4 +8,5 @@ export default {
   state: state(),
   actions,
   mutations,
+  getters,
 };

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

@@ -3,5 +3,3 @@ export const RECEIVE_MERGE_REQUESTS_ERROR = 'RECEIVE_MERGE_REQUESTS_ERROR';
 export const RECEIVE_MERGE_REQUESTS_SUCCESS = 'RECEIVE_MERGE_REQUESTS_SUCCESS';
 
 export const RESET_MERGE_REQUESTS = 'RESET_MERGE_REQUESTS';
-
-export const SET_SCOPE = 'SET_SCOPE';

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

@@ -2,15 +2,15 @@
 import * as types from './mutation_types';
 
 export default {
-  [types.REQUEST_MERGE_REQUESTS](state) {
-    state.isLoading = true;
+  [types.REQUEST_MERGE_REQUESTS](state, type) {
+    state[type].isLoading = true;
   },
-  [types.RECEIVE_MERGE_REQUESTS_ERROR](state) {
-    state.isLoading = false;
+  [types.RECEIVE_MERGE_REQUESTS_ERROR](state, type) {
+    state[type].isLoading = false;
   },
-  [types.RECEIVE_MERGE_REQUESTS_SUCCESS](state, data) {
-    state.isLoading = false;
-    state.mergeRequests = data.map(mergeRequest => ({
+  [types.RECEIVE_MERGE_REQUESTS_SUCCESS](state, { type, data }) {
+    state[type].isLoading = false;
+    state[type].mergeRequests = data.map(mergeRequest => ({
       id: mergeRequest.id,
       iid: mergeRequest.iid,
       title: mergeRequest.title,
@@ -20,10 +20,7 @@ export default {
         .replace(`/merge_requests/${mergeRequest.iid}`, ''),
     }));
   },
-  [types.RESET_MERGE_REQUESTS](state) {
-    state.mergeRequests = [];
-  },
-  [types.SET_SCOPE](state, scope) {
-    state.scope = scope;
+  [types.RESET_MERGE_REQUESTS](state, type) {
+    state[type].mergeRequests = [];
   },
 };

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

-import { scopes, states } from './constants';
+import { states } from './constants';
 
 export default () => ({
+  created: {
     isLoading: false,
     mergeRequests: [],
-  scope: scopes.createdByMe,
+  },
+  assigned: {
+    isLoading: false,
+    mergeRequests: [],
+  },
   state: states.opened,
 });

app/assets/javascripts/vue_shared/components/tabs/tab.vue

@@ -26,6 +26,9 @@ export default {
   created() {
     this.isTab = true;
   },
+  updated() {
+    this.$parent.$forceUpdate();
+  },
 };
 </script>
 

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

@@ -29,8 +29,6 @@ export default {
       this.tabs[index].localActive = true;
 
       this.currentIndex = index;
-
-      this.$emit('changed', this.currentIndex);
     },
   },
   render(h) {