Resolve "Improve handling of projects shared with a group"

5 files changed, 113 insertions, 61 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index b0765747a36..69f192ac75e 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -2,14 +2,15 @@
 /* global Flash */
 
 import $ from 'jquery';
-import { s__ } from '~/locale';
+import { s__, sprintf } from '~/locale';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import { HIDDEN_CLASS } from '~/lib/utils/constants';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
 import eventHub from '../event_hub';
-import { COMMON_STR } from '../constants';
+import { COMMON_STR, CONTENT_LIST_CLASS } from '../constants';
 import groupsComponent from './groups.vue';
 
 export default {
@@ -19,6 +20,16 @@ export default {
     groupsComponent,
   },
   props: {
+    action: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    containerId: {
+      type: String,
+      required: false,
+      default: '',
+    },
     store: {
       type: Object,
       required: true,
@@ -56,31 +67,28 @@ export default {
       ? COMMON_STR.GROUP_SEARCH_EMPTY
       : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
 
-    eventHub.$on('fetchPage', this.fetchPage);
-    eventHub.$on('toggleChildren', this.toggleChildren);
-    eventHub.$on('showLeaveGroupModal', this.showLeaveGroupModal);
-    eventHub.$on('updatePagination', this.updatePagination);
-    eventHub.$on('updateGroups', this.updateGroups);
+    eventHub.$on(`${this.action}fetchPage`, this.fetchPage);
+    eventHub.$on(`${this.action}toggleChildren`, this.toggleChildren);
+    eventHub.$on(`${this.action}showLeaveGroupModal`, this.showLeaveGroupModal);
+    eventHub.$on(`${this.action}updatePagination`, this.updatePagination);
+    eventHub.$on(`${this.action}updateGroups`, this.updateGroups);
   },
   mounted() {
     this.fetchAllGroups();
+
+    if (this.containerId) {
+      this.containerEl = document.getElementById(this.containerId);
+    }
   },
   beforeDestroy() {
-    eventHub.$off('fetchPage', this.fetchPage);
-    eventHub.$off('toggleChildren', this.toggleChildren);
-    eventHub.$off('showLeaveGroupModal', this.showLeaveGroupModal);
-    eventHub.$off('updatePagination', this.updatePagination);
-    eventHub.$off('updateGroups', this.updateGroups);
+    eventHub.$off(`${this.action}fetchPage`, this.fetchPage);
+    eventHub.$off(`${this.action}toggleChildren`, this.toggleChildren);
+    eventHub.$off(`${this.action}showLeaveGroupModal`, this.showLeaveGroupModal);
+    eventHub.$off(`${this.action}updatePagination`, this.updatePagination);
+    eventHub.$off(`${this.action}updateGroups`, this.updateGroups);
   },
   methods: {
-    fetchGroups({
-      parentId,
-      page,
-      filterGroupsBy,
-      sortBy,
-      archived,
-      updatePagination,
-    }) {
+    fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
       return this.service
         .getGroups(parentId, page, filterGroupsBy, sortBy, archived)
         .then(res => {
@@ -165,13 +173,13 @@ export default {
       }
     },
     showLeaveGroupModal(group, parentGroup) {
+      const { fullName } = group;
       this.targetGroup = group;
       this.targetParentGroup = parentGroup;
       this.showModal = true;
-      this.groupLeaveConfirmationMessage = s__(
-        `GroupsTree|Are you sure you want to leave the "${
-          group.fullName
-        }" group?`,
+      this.groupLeaveConfirmationMessage = sprintf(
+        s__('GroupsTree|Are you sure you want to leave the "%{fullName}" group?'),
+        { fullName },
       );
     },
     hideLeaveGroupModal() {
@@ -197,16 +205,35 @@ export default {
           this.targetGroup.isBeingRemoved = false;
         });
     },
+    showEmptyState() {
+      const { containerEl } = this;
+      const contentListEl = containerEl.querySelector(CONTENT_LIST_CLASS);
+      const emptyStateEl = containerEl.querySelector('.empty-state');
+
+      if (contentListEl) {
+        contentListEl.remove();
+      }
+
+      if (emptyStateEl) {
+        emptyStateEl.classList.remove(HIDDEN_CLASS);
+      }
+    },
     updatePagination(headers) {
       this.store.setPaginationInfo(headers);
     },
     updateGroups(groups, fromSearch) {
-      this.isSearchEmpty = groups ? groups.length === 0 : false;
+      const hasGroups = groups && groups.length > 0;
+      this.isSearchEmpty = !hasGroups;
+
       if (fromSearch) {
         this.store.setSearchedGroups(groups);
       } else {
         this.store.setGroups(groups);
       }
+
+      if (this.action && !hasGroups && !fromSearch) {
+        this.showEmptyState();
+      }
     },
   },
 };
@@ -226,6 +253,7 @@ export default {
       :search-empty="isSearchEmpty"
       :search-empty-message="searchEmptyMessage"
       :page-info="pageInfo"
+      :action="action"
     />
     <deprecated-modal
       v-show="showModal"
diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue
index 647c9d0046d..bcc7a638346 100644
--- a/app/assets/javascripts/groups/components/group_folder.vue
+++ b/app/assets/javascripts/groups/components/group_folder.vue
@@ -11,8 +11,12 @@ export default {
     },
     groups: {
       type: Array,
+      required: true,
+    },
+    action: {
+      type: String,
       required: false,
-      default: () => ([]),
+      default: '',
     },
   },
   computed: {
@@ -37,6 +41,7 @@ export default {
       :key="index"
       :group="group"
       :parent-group="parentGroup"
+      :action="action"
     />
     <li
       v-if="hasMoreChildren"
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 2b9e2a929fc..154ad2ea607 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -30,6 +30,11 @@ export default {
       type: Object,
       required: true,
     },
+    action: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     groupDomId() {
@@ -56,10 +61,12 @@ export default {
   methods: {
     onClickRowGroup(e) {
       const NO_EXPAND_CLS = 'no-expand';
-      if (!(e.target.classList.contains(NO_EXPAND_CLS) ||
-            e.target.parentElement.classList.contains(NO_EXPAND_CLS))) {
+      const targetClasses = e.target.classList;
+      const parentElClasses = e.target.parentElement.classList;
+
+      if (!(targetClasses.contains(NO_EXPAND_CLS) || parentElClasses.contains(NO_EXPAND_CLS))) {
         if (this.hasChildren) {
-          eventHub.$emit('toggleChildren', this.group);
+          eventHub.$emit(`${this.action}toggleChildren`, this.group);
         } else {
           visitUrl(this.group.relativePath);
         }
@@ -158,6 +165,7 @@ export default {
       v-if="group.isOpen && hasChildren"
       :parent-group="group"
       :groups="group.children"
+      :action="action"
     />
   </li>
 </template>
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 73ae928b0d9..a1beb222950 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -1,39 +1,44 @@
 <script>
-  import tablePagination from '~/vue_shared/components/table_pagination.vue';
-  import eventHub from '../event_hub';
-  import { getParameterByName } from '../../lib/utils/common_utils';
+import tablePagination from '~/vue_shared/components/table_pagination.vue';
+import eventHub from '../event_hub';
+import { getParameterByName } from '../../lib/utils/common_utils';
 
-  export default {
-    components: {
-      tablePagination,
+export default {
+  components: {
+    tablePagination,
+  },
+  props: {
+    groups: {
+      type: Array,
+      required: true,
     },
-    props: {
-      groups: {
-        type: Array,
-        required: true,
-      },
-      pageInfo: {
-        type: Object,
-        required: true,
-      },
-      searchEmpty: {
-        type: Boolean,
-        required: true,
-      },
-      searchEmptyMessage: {
-        type: String,
-        required: true,
-      },
+    pageInfo: {
+      type: Object,
+      required: true,
     },
-    methods: {
-      change(page) {
-        const filterGroupsParam = getParameterByName('filter_groups');
-        const sortParam = getParameterByName('sort');
-        const archivedParam = getParameterByName('archived');
-        eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
-      },
+    searchEmpty: {
+      type: Boolean,
+      required: true,
     },
-  };
+    searchEmptyMessage: {
+      type: String,
+      required: true,
+    },
+    action: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  methods: {
+    change(page) {
+      const filterGroupsParam = getParameterByName('filter_groups');
+      const sortParam = getParameterByName('sort');
+      const archivedParam = getParameterByName('archived');
+      eventHub.$emit(`${this.action}fetchPage`, page, filterGroupsParam, sortParam, archivedParam);
+    },
+  },
+};
 </script>
 
 <template>
@@ -47,6 +52,7 @@
     <group-folder
       v-if="!searchEmpty"
       :groups="groups"
+      :action="action"
     />
     <table-pagination
       v-if="!searchEmpty"
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 24eec4901ec..6e700b8bf8a 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -21,6 +21,11 @@ export default {
       type: Object,
       required: true,
     },
+    action: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     leaveBtnTitle() {
@@ -32,7 +37,7 @@ export default {
   },
   methods: {
     onLeaveGroup() {
-      eventHub.$emit('showLeaveGroupModal', this.group, this.parentGroup);
+      eventHub.$emit(`${this.action}showLeaveGroupModal`, this.group, this.parentGroup);
     },
   },
 };