Better empty state for Groups view.

CHANGELOG

@@ -28,6 +28,7 @@ v 8.13.0 (unreleased)
   - Fix Long commit messages overflow viewport in file tree
   - Revert avoid touching file system on Build#artifacts?
   - Add broadcast messages and alerts below sub-nav
+  - Better empty state for Groups view
   - Update ruby-prof to 0.16.2. !6026 (Elan Ruusamäe)
   - Fix unnecessary escaping of reserved HTML characters in milestone title. !6533
   - Add organization field to user profile

app/assets/stylesheets/pages/groups.scss

@@ -57,7 +57,6 @@
 }
 
 .groups-header {
-
   @media (min-width: $screen-sm-min) {
     .nav-links {
       width: 35%;
@@ -68,3 +67,38 @@
     }
   }
 }
+
+.groups-empty-state {
+  padding: 50px 100px;
+  overflow: hidden;
+
+  @media (max-width: $screen-md-min) {
+    padding: 50px 0;
+  }
+
+  svg {
+    float: right;
+
+    @media (max-width: $screen-md-min) {
+      float: none;
+      display: block;
+      width: 250px;
+      position: relative;
+      left: 50%;
+      margin-left: -125px;
+    }
+  }
+
+  .text-content {
+    float: left;
+    width: 460px;
+    margin-top: 120px;
+
+    @media (max-width: $screen-md-min) {
+      float: none;
+      margin-top: 60px;
+      width: auto;
+      text-align: center;
+    }
+  }
+}

app/views/dashboard/groups/_empty_state.html.haml

@@ -0,0 +1,7 @@
+.groups-empty-state
+  = custom_icon("icon_empty_groups")
+
+  .text-content
+    %h4 A group is a collection of several projects.
+    %p If you organize your projects under a group, it works like a folder.
+    %p You can manage your group member’s permissions and access to each project in the group.

app/views/dashboard/groups/index.html.haml

@@ -2,9 +2,12 @@
 - header_title  "Groups", dashboard_groups_path
 = render 'dashboard/groups_head'
 
-%ul.content-list
-  - @group_members.each do |group_member|
-    - group = group_member.group
-    = render 'shared/groups/group', group: group, group_member: group_member
+- if @group_members.empty?
+  = render 'empty_state'
+- else
+  %ul.content-list
+    - @group_members.each do |group_member|
+      - group = group_member.group
+      = render 'shared/groups/group', group: group, group_member: group_member
 
-= paginate @group_members, theme: 'gitlab'
+  = paginate @group_members, theme: 'gitlab'