Minor visual adjustments

4 files changed, 63 insertions, 18 deletions

diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue
index dcf6f10e1ca..cd47f6b0047 100644
--- a/app/assets/javascripts/groups/components/group_folder.vue
+++ b/app/assets/javascripts/groups/components/group_folder.vue
@@ -15,6 +15,6 @@ export default {
 
 <template>
   <ul class="content-list group-list-tree">
-    <group-item v-for="(group, index) in groups" :key="index" :group="group" :baseGroup="baseGroup" />
+    <group-item v-for="(group, index) in groups" :key="index" :group="group" :base-group="baseGroup" :collection="groups" />
   </ul>
 </template>
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 2013469f9e6..c4b0325fb09 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -12,6 +12,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    collection: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   methods: {
     onClickRowGroup(e) {
@@ -35,7 +40,7 @@ export default {
       }
     },
     leaveGroup() {
-      eventHub.$emit('leaveGroup', this.group.leavePath);
+      eventHub.$emit('leaveGroup', this.group, this.collection);
     },
   },
   computed: {
@@ -63,7 +68,7 @@ export default {
 
       if (this.group.isOrphan) {
         // check if current group is baseGroup
-        if (Object.keys(this.baseGroup).length > 0) {
+        if (Object.keys(this.baseGroup).length > 0 && this.baseGroup !== this.group) {
           // Remove baseGroup prefix from our current group.fullName. e.g:
           // baseGroup.fullName: `level1`
           // group.fullName: `level1 / level2 / level3`
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index 9c2e37dd5f1..4e2cb88eb4e 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -1,3 +1,5 @@
+/* global Flash */
+
 import Vue from 'vue';
 import GroupFilterableList from './groups_filterable_list';
 import GroupsComponent from './components/groups.vue';
@@ -29,9 +31,16 @@ document.addEventListener('DOMContentLoaded', () => {
 
       return {
         store: this.store,
+        isLoading: true,
         state: this.store.state,
+        loading: true,
       };
     },
+    computed: {
+      isEmpty() {
+        return Object.keys(this.state.groups).length === 0;
+      },
+    },
     methods: {
       fetchGroups(parentGroup) {
         let parentId = null;
@@ -43,6 +52,8 @@ document.addEventListener('DOMContentLoaded', () => {
         let filterGroups = null;
         let filterGroupsParam = null;
 
+        this.isLoading = true;
+
         if (parentGroup) {
           parentId = parentGroup.id;
         }
@@ -66,22 +77,26 @@ document.addEventListener('DOMContentLoaded', () => {
         getGroups.then((response) => {
           this.updateGroups(response.json(), parentGroup);
         })
-        .catch(() => {
-          // TODO: Handle error
-        });
+        .finally(() => {
+          this.isLoading = false;
+        })
+        .catch(this.handleErrorResponse);
 
         return getGroups;
       },
       fetchPage(page, filterGroups, sort) {
+        this.isLoading = true;
+
         this.service.getGroups(null, page, filterGroups, sort)
           .then((response) => {
             this.updateGroups(response.json());
             this.updatePagination(response.headers);
             $.scrollTo(0);
           })
-          .catch(() => {
-            // TODO: Handle error
-          });
+          .finally(() => {
+            this.isLoading = false;
+          })
+          .catch(this.handleErrorResponse);
       },
       toggleSubGroups(parentGroup = null) {
         if (!parentGroup.isOpen) {
@@ -91,13 +106,26 @@ document.addEventListener('DOMContentLoaded', () => {
 
         GroupsStore.toggleSubGroups(parentGroup);
       },
-      leaveGroup(endpoint) {
-        this.service.leaveGroup(endpoint)
-          .then(() => {
-            // TODO: Refresh?
+      leaveGroup(group, collection) {
+        this.service.leaveGroup(group.leavePath)
+          .then((response) => {
+            this.store.removeGroup(group, collection);
+
+            // eslint-disable-next-line no-new
+            new Flash(response.json().notice, 'notice');
+          })
+          .finally(() => {
+            $.scrollTo(0);
           })
-          .catch(() => {
-            // TODO: Handle error
+          .catch((response) => {
+            let message = 'An error occurred. Please try again.';
+
+            if (response.status === 403) {
+              message = 'Failed to leave the group. Please make sure you are not the only owner';
+            }
+
+            // eslint-disable-next-line no-new
+            new Flash(message);
           });
       },
       updateGroups(groups, parentGroup) {
@@ -106,6 +134,10 @@ document.addEventListener('DOMContentLoaded', () => {
       updatePagination(headers) {
         this.store.storePagination(headers);
       },
+      handleErrorResponse() {
+        // eslint-disable-next-line no-new
+        new Flash('An error occurred. Please try again.');
+      },
     },
     beforeMount() {
       let groupFilterList = null;
@@ -135,9 +167,10 @@ document.addEventListener('DOMContentLoaded', () => {
         .then((response) => {
           this.updatePagination(response.headers);
         })
-        .catch(() => {
-          // TODO: Handle error
-        });
+        .finally(() => {
+          this.isLoading = false;
+        })
+        .catch(this.handleErrorResponse);
     },
   });
 });
diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js
index d8353a92881..0493cee2fa8 100644
--- a/app/assets/javascripts/groups/stores/groups_store.js
+++ b/app/assets/javascripts/groups/stores/groups_store.js
@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 export default class GroupsStore {
   constructor() {
     this.state = {};
@@ -132,6 +134,11 @@ export default class GroupsStore {
   }
 
   // eslint-disable-next-line class-methods-use-this
+  removeGroup(group, collection) {
+    Vue.delete(collection, group.id);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
   static toggleSubGroups(toggleGroup) {
     const group = toggleGroup;
     group.isOpen = !group.isOpen;