Restore previous tree format

Tree object is an array now.

- All groups are displayed at the top level
- To access subgroups now we have to click every parent which will make a request to fetch sub groups.

[ci skip]

app/assets/javascripts/groups/components/group_folder.vue

@@ -2,13 +2,13 @@
 export default {
   props: {
     groups: {
-      type: Object,
+      type: Array,
       required: true,
     },
   },
   computed: {
     hasGroups() {
-      return Object.keys(this.groups).length > 0;
+      return this.groups.length > 0;
     },
   },
 };

app/assets/javascripts/groups/components/group_item.vue

@@ -29,7 +29,7 @@ export default {
       };
     },
     isExpandable() {
-      return Object.keys(this.group.subGroups).length > 0;
+      return this.group.subGroups.length > 0;
     },
   },
 };

app/assets/javascripts/groups/components/groups.vue

@@ -2,7 +2,7 @@
 export default {
   props: {
     groups: {
-      type: Object,
+      type: Array,
       required: true,
     },
   },

app/assets/javascripts/groups/stores/groups_store.js

@@ -1,7 +1,7 @@
 export default class GroupsStore {
   constructor() {
     this.state = {};
-    this.state.groups = {};
+    this.state.groups = [];
 
     return this;
   }
@@ -10,42 +10,14 @@ export default class GroupsStore {
     const parentGroup = parent;
 
     if (parentGroup) {
-      parentGroup.subGroups = this.buildTree(rawGroups);
+      parentGroup.subGroups = this.decorateGroups(rawGroups);
     } else {
-      this.state.groups = this.buildTree(rawGroups);
+      this.state.groups = this.decorateGroups(rawGroups);
     }
 
     return rawGroups;
   }
 
-  buildTree(rawGroups) {
-    const groups = this.decorateGroups(rawGroups);
-    const tree = {};
-    const mappedGroups = {};
-
-    // Map groups to an object
-    for (let i = 0, len = groups.length; i < len; i += 1) {
-      const group = groups[i];
-      mappedGroups[group.id] = group;
-      mappedGroups[group.id].subGroups = {};
-    }
-
-    Object.keys(mappedGroups).forEach((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];
-      if (currentGroup.parentId && parentGroup) {
-        mappedGroups[currentGroup.parentId].subGroups[currentGroup.id] = currentGroup;
-        mappedGroups[currentGroup.parentId].isOpen = true; // Expand group if it has subgroups
-      } else {
-        // If the group is at the root level, add it to first level elements array.
-        tree[currentGroup.id] = currentGroup;
-      }
-    });
-
-    return tree;
-  }
-
   decorateGroups(rawGroups) {
     this.groups = rawGroups.map(GroupsStore.decorateGroup);
     return this.groups;
@@ -62,7 +34,7 @@ export default class GroupsStore {
       isOpen: false,
       numberProjects: 10,
       numberMembers: 10,
-      subGroups: {},
+      subGroups: [],
     };
   }
 

app/assets/stylesheets/framework/lists.scss

@@ -307,7 +307,7 @@ ul.indent-list {
     border-top: solid 1px $border-white-light;
     position: relative;
 
-    &:before {
+    &::before {
       content: '';
       display: block;
       width: 0;
@@ -321,7 +321,7 @@ ul.indent-list {
     .group-row {
       position: relative;
 
-      &:before {
+      &::before {
         content: "";
         display: block;
         width: 10px;
@@ -332,20 +332,12 @@ ul.indent-list {
         left: -16px;
       }
 
-      &:last-child:before {
+      &:last-child::before {
-        background: white;
+        background: $white-light;
         height: auto;
         top: 30px;
         bottom: 0;
       }
     }
   }
-
-  .branch-connector {
-    &:after {
-      content: ' ';
-      position: absolute;
-      background-color: red;
-    }
-  }
 }