DRYed up groups empty statedry-groups-empty-state

Added to user page

9 files changed, 20 insertions, 46 deletions

diff --git a/app/assets/javascripts/user_tabs.js.es6 b/app/assets/javascripts/user_tabs.js.es6
index 9b5e3bbc48a..e3900dcb8c2 100644
--- a/app/assets/javascripts/user_tabs.js.es6
+++ b/app/assets/javascripts/user_tabs.js.es6
@@ -89,6 +89,7 @@ content on the Users#show page.
     initEmptyStates() {
       this.emptyStates = {
         snippets: document.querySelector('#js-user-snippets-empty-state'),
+        groups: document.querySelector('#js-user-groups-empty-state'),
       };
     }
 
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index fe2e7f404b6..586ba4a8079 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -282,5 +282,9 @@
     &.snippets .text-content {
       margin-top: 100px;
     }
+
+    &.groups .text-content {
+      margin-top: 110px;
+    }
   }
 }
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 4375e29c8db..8538ed0ab0d 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -63,38 +63,3 @@
     }
   }
 }
-
-.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;
-    }
-  }
-}
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 63eada2c968..96b5a8b8608 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -25,9 +25,7 @@ class UsersController < ApplicationController
     respond_to do |format|
       format.html { render 'show' }
       format.json do
-        render json: {
-          html: view_to_html_string("shared/groups/_list", groups: @groups)
-        }
+        render json: { html: @groups.blank? ? nil : view_to_html_string("shared/groups/_list", groups: @groups) }
       end
     end
   end
diff --git a/app/views/dashboard/groups/_empty_state.html.haml b/app/views/dashboard/groups/_empty_state.html.haml
deleted file mode 100644
index f5222fe631e..00000000000
--- a/app/views/dashboard/groups/_empty_state.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-.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.
diff --git a/app/views/dashboard/groups/index.html.haml b/app/views/dashboard/groups/index.html.haml
index 1a679c51774..60dbcebe289 100644
--- a/app/views/dashboard/groups/index.html.haml
+++ b/app/views/dashboard/groups/index.html.haml
@@ -3,7 +3,7 @@
 = render 'dashboard/groups_head'
 
 - if @group_members.empty?
-  = render 'empty_state'
+  = render 'shared/empty_states/groups'
 - else
   %ul.content-list
     - @group_members.each do |group_member|
diff --git a/app/views/shared/empty_states/_groups.html.haml b/app/views/shared/empty_states/_groups.html.haml
new file mode 100644
index 00000000000..dd3e050dd67
--- /dev/null
+++ b/app/views/shared/empty_states/_groups.html.haml
@@ -0,0 +1,11 @@
+.row.empty-state.groups
+  .pull-right.col-xs-12.col-sm-6
+    .svg-content
+      = render 'shared/empty_states/icons/groups.svg'
+  .col-xs-12.col-sm-6
+    .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.
+        You can manage your group member’s permissions and access to each project in the group.
diff --git a/app/views/shared/icons/_icon_empty_groups.svg b/app/views/shared/empty_states/icons/_groups.svg
index 9228be05f03..9228be05f03 100644
--- a/app/views/shared/icons/_icon_empty_groups.svg
+++ b/app/views/shared/empty_states/icons/_groups.svg
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index e39a0cc8033..f485cd99b6f 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -111,6 +111,8 @@
 
       #groups.tab-pane
         - # This tab is always loaded via AJAX
+        #js-user-groups-empty-state.hidden
+          = render 'shared/empty_states/groups'
 
       #contributed.tab-pane
         - # This tab is always loaded via AJAX