Remove parent group prefix from current orphan group

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

@@ -5,6 +5,10 @@ export default {
       type: Object,
       required: true,
     },
+    baseGroup: {
+      type: Object,
+      required: false,
+    },
   },
   computed: {
     hasGroups() {
@@ -16,6 +20,6 @@ export default {
 
 <template>
   <ul class="content-list group-list-tree" v-show="hasGroups">
-    <group-item v-for="(group, index) in groups" :key="index" :group="group" />
+    <group-item v-for="(group, index) in groups" :key="index" :group="group" :baseGroup="baseGroup" />
   </ul>
 </template>

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

@@ -7,6 +7,10 @@ export default {
       type: Object,
       required: true,
     },
+    baseGroup: {
+      type: Object,
+      required: false,
+    },
   },
   methods: {
     toggleSubGroups(e) {
@@ -31,6 +35,31 @@ export default {
     isExpandable() {
       return Object.keys(this.group.subGroups).length > 0;
     },
+    fullPath() {
+      let fullPath = '';
+
+      if (this.group.isOrphan) {
+        // check if current group is baseGroup
+        if (this.baseGroup) {
+          // Remove baseGroup prefix from our current group.fullName. e.g:
+          // baseGroup.fullName: `level1`
+          // group.fullName: `level1 / level2 / level3`
+          // Result: `level2 / level3`
+          const gfn = this.group.fullName;
+          const bfn = this.baseGroup.fullName;
+          const length = bfn.length;
+          const start = gfn.indexOf(bfn);
+
+          fullPath = gfn.substr(start + length + 2);
+        } else {
+          fullPath = this.group.fullName;
+        }
+      } else {
+        fullPath = this.group.name;
+      }
+
+      return fullPath;
+    },
   },
 };
 </script>
@@ -92,13 +121,13 @@ export default {
     </div>
 
     <div class="title">
-      <a :href="group.webUrl">{{group.isOrphan ? group.fullName : group.name}}</a>
+      <a :href="group.webUrl">{{fullPath}}</a>
     </div>
 
     <div class="description">
       {{group.description}}
     </div>
 
-    <group-folder v-if="group.isOpen" :groups="group.subGroups" />
+    <group-folder v-if="group.isOpen" :groups="group.subGroups" :baseGroup="group" />
   </li>
 </template>