1 files changed, 110 insertions, 63 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 2060410e991..59df683ca4c 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -1,10 +1,19 @@
 <script>
 import identicon from '../../vue_shared/components/identicon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 import eventHub from '../event_hub';
+import { GROUP_VISIBILITY_TYPE, VISIBILITY_TYPE_ICON } from '../constants';
+import groupFolder from './group_folder.vue';
+import projectFolder from './project_folder.vue';
 
 export default {
   components: {
     identicon,
+    groupFolder,
+    projectFolder,
+  },
+  directives: {
+    tooltip,
   },
   props: {
     group: {
@@ -28,7 +37,7 @@ export default {
 
       // Skip for buttons
       if (!(e.target.tagName === 'A') && !(e.target.tagName === 'I' && e.target.parentElement.tagName === 'A')) {
-        if (this.group.hasSubgroups) {
+        if (this.hasChildren) {
           eventHub.$emit('toggleSubGroups', this.group);
         } else {
           window.location.href = this.group.groupPath;
@@ -55,17 +64,15 @@ export default {
       return {
         'group-row': true,
         'is-open': this.group.isOpen,
-        'has-subgroups': this.group.hasSubgroups,
+        'has-subgroups': this.hasChildren,
         'no-description': !this.group.description,
       };
     },
     visibilityIcon() {
-      return {
-        fa: true,
-        'fa-globe': this.group.visibility === 'public',
-        'fa-shield': this.group.visibility === 'internal',
-        'fa-lock': this.group.visibility === 'private',
-      };
+      return VISIBILITY_TYPE_ICON[this.group.visibility];
+    },
+    visibilityTooltip() {
+      return GROUP_VISIBILITY_TYPE[this.group.visibility];
     },
     fullPath() {
       let fullPath = '';
@@ -93,12 +100,23 @@ export default {
 
       return fullPath;
     },
-    hasGroups() {
+    hasSiblingGroups() {
       return Object.keys(this.group.subGroups).length > 0;
     },
+    hasProjects() {
+      return this.group.projectCount > 0;
+    },
+    hasChildren() {
+      return this.hasProjects || this.group.hasSubgroups;
+    },
     hasAvatar() {
       return this.group.avatarUrl && this.group.avatarUrl.indexOf('/assets/no_group_avatar') === -1;
     },
+    hasGroupAccess() {
+      return this.group.projects &&
+             this.group.projects.length >= 0 &&
+             this.group.permissions.humanGroupAccess;
+    },
   },
 };
 </script>
@@ -109,95 +127,109 @@ export default {
     :id="groupDomId"
     :class="rowClass"
     >
-    <div
-      class="group-row-contents">
-      <div
-        class="controls">
+    <div class="group-row-contents">
+      <div class="controls">
         <a
           v-if="group.canEdit"
+          v-tooltip
           class="edit-group btn"
-          :href="group.editPath">
+          data-container="body"
+          title="Edit group"
+          :href="group.editPath"
+        >
           <i
             class="fa fa-cogs"
-            aria-hidden="true"
-          >
-          </i>
+            aria-hidden="true"/>
         </a>
         <a
+          v-tooltip
           @click="onLeaveGroup"
           :href="group.leavePath"
+          data-container="body"
           class="leave-group btn"
-          title="Leave this group">
+          title="Leave this group"
+        >
           <i
             class="fa fa-sign-out"
-            aria-hidden="true"
-          >
-          </i>
+            aria-hidden="true"/>
         </a>
       </div>
-      <div
-        class="stats">
+      <div class="stats">
+        <span
+          v-tooltip
+          class="number-subgroups"
+          data-placement="top"
+          data-container="body"
+          title="Subgroups"
+        >
+          <i
+            class="fa fa-folder"
+            aria-hidden="true"/>
+          {{group.subGroupCount}}
+        </span>
         <span
-          class="number-projects">
+          v-tooltip
+          class="number-projects"
+          data-placement="top"
+          data-container="body"
+          title="Projects"
+        >
           <i
             class="fa fa-bookmark"
-            aria-hidden="true"
-          >
-          </i>
+            aria-hidden="true"/>
           {{group.numberProjects}}
         </span>
         <span
-          class="number-users">
+          v-tooltip
+          class="number-users"
+          data-placement="top"
+          data-container="body"
+          title="Members"
+        >
           <i
             class="fa fa-users"
-            aria-hidden="true"
-          >
-          </i>
+            aria-hidden="true"/>
           {{group.numberUsers}}
         </span>
         <span
-          class="group-visibility">
+          v-tooltip
+          class="group-visibility"
+          data-placement="left"
+          data-container="body"
+          :title="visibilityTooltip"
+        >
           <i
+            class="fa"
             :class="visibilityIcon"
-            aria-hidden="true"
-          >
-          </i>
+            aria-hidden="true"/>
         </span>
       </div>
-      <div
-        class="folder-toggle-wrap">
+      <div class="folder-toggle-wrap">
         <span
           class="folder-caret"
-          v-if="group.hasSubgroups">
+          v-if="hasChildren"
+        >
           <i
             v-if="group.isOpen"
             class="fa fa-caret-down"
-            aria-hidden="true"
-          >
-          </i>
+            aria-hidden="true"/>
           <i
             v-if="!group.isOpen"
             class="fa fa-caret-right"
-            aria-hidden="true"
-          >
-          </i>
+            aria-hidden="true"/>
         </span>
         <span class="folder-icon">
           <i
             v-if="group.isOpen"
             class="fa fa-folder-open"
-            aria-hidden="true"
-          >
-          </i>
+            aria-hidden="true"/>
           <i
             v-if="!group.isOpen"
             class="fa fa-folder"
-            aria-hidden="true">
-          </i>
+            aria-hidden="true"/>
         </span>
       </div>
-      <div
-        class="avatar-container s40 hidden-xs">
+      <div class="avatar-container s40 hidden-xs">
         <a
           :href="group.groupPath">
           <img
@@ -212,22 +244,37 @@ export default {
           />
         </a>
       </div>
-      <div
-        class="title">
-        <a
-          :href="group.groupPath">{{fullPath}}</a>
-        <template v-if="group.permissions.humanGroupAccess">
-        as
-        <span class="access-type">{{group.permissions.humanGroupAccess}}</span>
-        </template>
+      <div class="metadata">
+        <div class="title">
+          <a
+            :href="group.groupPath"
+          >
+            {{fullPath}}
+          </a>
+          <template v-if="hasGroupAccess">
+            <span class="access-type">as {{group.permissions.humanGroupAccess}}</span>
+          </template>
+        </div>
+        <div
+          v-if="group.description"
+          class="description"
+        >
+          {{group.description}}
+        </div>
       </div>
-      <div
-        class="description">{{group.description}}</div>
     </div>
     <group-folder
-      v-if="group.isOpen && hasGroups"
+      v-if="group.isOpen"
+      :has-sibling-projects="hasProjects"
       :groups="group.subGroups"
-      :baseGroup="group"
+      :base-group="group"
+    />
+    <project-folder
+      v-if="group.isOpen && hasProjects"
+      :group-path="group.groupPath"
+      :has-sibling-groups="hasSiblingGroups"
+      :projects="group.projects"
+      :project-count="group.projectCount"
     />
   </li>
 </template>