Fix toggling subgroups and pagination

4 files changed, 24 insertions, 7 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 8b2b1c78a5c..ce32d194363 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -14,7 +14,7 @@ export default {
   },
   methods: {
     toggleSubGroups(e) {
-      if (e.target.tagName === 'A' || !this.hasSubgroups ) {
+      if (e.target.tagName === 'A' || !this.hasSubgroups) {
         return false;
       }
 
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index 35eac409afa..90dae30bafb 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -34,12 +34,18 @@ $(() => {
       fetchGroups(parentGroup) {
         let parentId = null;
         let getGroups = null;
+        let page = null;
+        let pageParam = null;
 
         if (parentGroup) {
           parentId = parentGroup.id;
         }
 
-        const page = gl.utils.getParameterByName('page');
+        pageParam = gl.utils.getParameterByName('page');
+
+        if (pageParam) {
+          page = pageParam;
+        }
 
         getGroups = service.getGroups(parentId, page);
         getGroups.then((response) => {
@@ -53,8 +59,10 @@ $(() => {
       },
       toggleSubGroups(parentGroup = null) {
         if (!parentGroup.isOpen) {
+          store.resetGroups(parentGroup);
           this.fetchGroups(parentGroup);
         }
+
         GroupsStore.toggleSubGroups(parentGroup);
       },
     },
diff --git a/app/assets/javascripts/groups/services/groups_service.js b/app/assets/javascripts/groups/services/groups_service.js
index ea0499779ed..2b861b6a4d5 100644
--- a/app/assets/javascripts/groups/services/groups_service.js
+++ b/app/assets/javascripts/groups/services/groups_service.js
@@ -8,7 +8,7 @@ export default class GroupsService {
     this.groups = Vue.resource(endpoint);
   }
 
-  getGroups(parentId, page = 1) {
+  getGroups(parentId, page) {
     const data = {};
 
     if (parentId) {
diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js
index 1bba9c3158f..e59aee42400 100644
--- a/app/assets/javascripts/groups/stores/groups_store.js
+++ b/app/assets/javascripts/groups/stores/groups_store.js
@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 export default class GroupsStore {
   constructor() {
     this.state = {};
@@ -9,7 +10,7 @@ export default class GroupsStore {
 
   setGroups(rawGroups, parent = null) {
     const parentGroup = parent;
-    const tree = this.buildTree(rawGroups);
+    const tree = this.buildTree(rawGroups, parentGroup);
 
     if (parentGroup) {
       parentGroup.subGroups = tree;
@@ -20,6 +21,11 @@ export default class GroupsStore {
     return tree;
   }
 
+  resetGroups(parent) {
+    const parentGroup = parent;
+    parentGroup.subGroups = {};
+  }
+
   storePagination(pagination = {}) {
     let paginationInfo;
 
@@ -33,7 +39,7 @@ export default class GroupsStore {
     this.state.pageInfo = paginationInfo;
   }
 
-  buildTree(rawGroups) {
+  buildTree(rawGroups, parentGroup) {
     const groups = this.decorateGroups(rawGroups);
     const tree = {};
     const mappedGroups = {};
@@ -49,11 +55,14 @@ export default class GroupsStore {
     Object.keys(mappedGroups).map((key) => {
       const currentGroup = mappedGroups[key];
       // If the group is not at the root level, add it to its parent array of subGroups.
-      const parentGroup = mappedGroups[currentGroup.parentId];
+      const findParentGroup = mappedGroups[currentGroup.parentId];
+
       if (currentGroup.parentId) {
-        if (parentGroup) {
+        if (findParentGroup) {
           mappedGroups[currentGroup.parentId].subGroups[currentGroup.id] = currentGroup;
           mappedGroups[currentGroup.parentId].isOpen = true; // Expand group if it has subgroups
+        } else if (parentGroup && parentGroup.id === currentGroup.parentId) {
+          tree[currentGroup.id] = currentGroup;
         } else {
           // Means the groups hast no direct parent.
           // Save for later processing, we will add them to its corresponding base group