Resolve "Empty states for profile page"

9 files changed, 126 insertions, 14 deletions

diff --git a/app/helpers/profiles_helper.rb b/app/helpers/profiles_helper.rb
index df318de740a..5a42e581867 100644
--- a/app/helpers/profiles_helper.rb
+++ b/app/helpers/profiles_helper.rb
@@ -25,4 +25,8 @@ module ProfilesHelper
       end
     end
   end
+
+  def user_profile?
+    params[:controller] == 'users'
+  end
 end
diff --git a/app/views/events/_events.html.haml b/app/views/events/_events.html.haml
index 6ae4c334f7f..e1b7804c5a7 100644
--- a/app/views/events/_events.html.haml
+++ b/app/views/events/_events.html.haml
@@ -1,4 +1,18 @@
+- illustration_path = 'illustrations/profile-page/activity.svg'
+- current_user_empty_message_header = s_('UserProfile|Join or create a group to start contributing by commenting on issues or submitting merge requests!')
+- primary_button_label = _('New group')
+- primary_button_link = new_group_path
+- secondary_button_label = _('Explore groups')
+- secondary_button_link = explore_groups_path
+- visitor_empty_message = _('No activities found')
+
 - if @events.present?
   = render partial: 'events/event', collection: @events
 - else
-  .nothing-here-block= _("No activities found")
+  = render partial: 'shared/empty_states/profile_tabs', locals: { illustration_path: illustration_path,
+    current_user_empty_message_header: current_user_empty_message_header,
+    primary_button_label: primary_button_label,
+    primary_button_link: primary_button_link,
+    secondary_button_label: secondary_button_label,
+    secondary_button_link: secondary_button_link,
+    visitor_empty_message: visitor_empty_message }
diff --git a/app/views/shared/empty_states/_profile_tabs.html.haml b/app/views/shared/empty_states/_profile_tabs.html.haml
new file mode 100644
index 00000000000..6da40e1b059
--- /dev/null
+++ b/app/views/shared/empty_states/_profile_tabs.html.haml
@@ -0,0 +1,19 @@
+- current_user_empty_message_description = local_assigns.fetch(:current_user_empty_message_description, nil)
+- secondary_button_link = local_assigns.fetch(:secondary_button_link, nil)
+
+.nothing-here-block
+  .svg-content
+    = image_tag illustration_path, size: '75'
+    .text-content
+      - if user_profile? and current_user.present? and current_user.username == params[:username]
+        %h5= current_user_empty_message_header
+
+        - if current_user_empty_message_description.present?
+          %p= current_user_empty_message_description
+
+        - if secondary_button_link.present?
+          = link_to secondary_button_label, secondary_button_link, class: 'btn btn-create btn-inverted'
+
+        = link_to primary_button_label, primary_button_link, class: 'btn btn-success'
+      - else
+        %h5= visitor_empty_message
diff --git a/app/views/shared/groups/_list.html.haml b/app/views/shared/groups/_list.html.haml
index f50a6bd4d6a..c5b39c7db08 100644
--- a/app/views/shared/groups/_list.html.haml
+++ b/app/views/shared/groups/_list.html.haml
@@ -1,3 +1,10 @@
+- illustration_path = 'illustrations/profile-page/groups.svg'
+- current_user_empty_message_header = s_('UserProfile|You can create a group for several dependent projects.')
+- current_user_empty_message_description = s_('UserProfile|Groups are the best way to manage projects and members.')
+- primary_button_label = _('New group')
+- primary_button_link = new_group_path
+- visitor_empty_message = s_('GroupsEmptyState|No groups found')
+
 - if groups.any?
   - user = local_assigns[:user]
 
@@ -5,4 +12,9 @@
     - groups.each_with_index do |group, i|
       = render "shared/groups/group", group: group, user: user
 - else
-  .nothing-here-block= s_("GroupsEmptyState|No groups found")
+  = render partial: 'shared/empty_states/profile_tabs', locals: { illustration_path: illustration_path,
+    current_user_empty_message_header: current_user_empty_message_header,
+    current_user_empty_message_description: current_user_empty_message_description,
+    primary_button_label: primary_button_label,
+    primary_button_link: primary_button_link,
+    visitor_empty_message: visitor_empty_message }
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index 7d90d9ca4a5..13847cd9be1 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -14,6 +14,17 @@
 - skip_pagination = false unless local_assigns[:skip_pagination] == true
 - compact_mode = false unless local_assigns[:compact_mode] == true
 - css_classes = "#{'compact' if compact_mode} #{'explore' if explore_projects_tab?}"
+- contributed_projects_illustration_path = 'illustrations/profile-page/contributed-projects.svg'
+- contributed_projects_current_user_empty_message_header = s_('UserProfile|Explore public groups to find projects to contribute to.')
+- contributed_projects_visitor_empty_message = s_('UserProfile|This user hasn\'t contributed to any projects')
+- own_projects_illustration_path = 'illustrations/profile-page/personal-project.svg'
+- own_projects_current_user_empty_message_header = s_('UserProfile|You haven\'t created any personal projects.')
+- own_projects_current_user_empty_message_description = s_('UserProfile|Your projects can be available publicly, internally, or privately, at your choice.')
+- own_projects_visitor_empty_message = s_('UserProfile|This user doesn\'t have any personal projects')
+- primary_button_label = _('New project')
+- primary_button_link = new_project_path
+- secondary_button_label = _('Explore groups')
+- secondary_button_link = explore_groups_path
 
 .js-projects-list-holder
   - if any_projects?(projects)
@@ -33,9 +44,18 @@
           %span  you have no access to.
     = paginate_collection(projects, remote: remote) unless skip_pagination
   - else
-    .nothing-here-block
-      .svg-content.svg-130
-        = image_tag 'illustrations/profile-page/personal-project.svg'
-      %div
-        %span
-          = s_('UserProfile|This user doesn\'t have any personal projects')
+    - if @contributed_projects
+      = render partial: 'shared/empty_states/profile_tabs', locals: { illustration_path: contributed_projects_illustration_path,
+        current_user_empty_message_header: contributed_projects_current_user_empty_message_header,
+        primary_button_label: primary_button_label,
+        primary_button_link: primary_button_link,
+        secondary_button_label: secondary_button_label,
+        secondary_button_link: secondary_button_link,
+        visitor_empty_message: contributed_projects_visitor_empty_message }
+    - else
+      = render partial: 'shared/empty_states/profile_tabs', locals: { illustration_path: own_projects_illustration_path,
+        current_user_empty_message_header: own_projects_current_user_empty_message_header,
+        current_user_empty_message_description: own_projects_current_user_empty_message_description,
+        primary_button_label: primary_button_label,
+        primary_button_link: primary_button_link,
+        visitor_empty_message: own_projects_visitor_empty_message }
diff --git a/app/views/snippets/_snippets.html.haml b/app/views/snippets/_snippets.html.haml
index 69d41f8fe5e..dab247da251 100644
--- a/app/views/snippets/_snippets.html.haml
+++ b/app/views/snippets/_snippets.html.haml
@@ -1,10 +1,21 @@
 - link_project = local_assigns.fetch(:link_project, false)
+- illustration_path = 'illustrations/profile-page/activity.svg'
+- current_user_empty_message_header = s_('UserProfile|You haven\'t created any snippets.')
+- current_user_empty_message_description = s_('UserProfile|Snippets in GitLab can either be private, internal, or public.')
+- primary_button_label = _('New snippet')
+- primary_button_link = new_snippet_path
+- visitor_empty_message = s_('UserProfile|No snippets found.')
 
 .snippets-list-holder
   %ul.content-list
     = render partial: 'shared/snippets/snippet', collection: @snippets, locals: { link_project: link_project }
     - if @snippets.empty?
       %li
-        .nothing-here-block= _("Nothing here.")
+        = render partial: 'shared/empty_states/profile_tabs', locals: { illustration_path: illustration_path,
+          current_user_empty_message_header: current_user_empty_message_header,
+          current_user_empty_message_description: current_user_empty_message_description,
+          primary_button_label: primary_button_label,
+          primary_button_link: primary_button_link,
+          visitor_empty_message: visitor_empty_message }
 
   = paginate @snippets, theme: 'gitlab'
diff --git a/changelogs/unreleased/28500-empty-states-for-profile-page.yml b/changelogs/unreleased/28500-empty-states-for-profile-page.yml
new file mode 100644
index 00000000000..53f840521ae
--- /dev/null
+++ b/changelogs/unreleased/28500-empty-states-for-profile-page.yml
@@ -0,0 +1,5 @@
+---
+title: Refresh empty states for profile page tabs
+merge_request: 24549
+author:
+type: changed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6687cdd5feb..d81ae2e728b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4836,9 +4836,6 @@ msgstr ""
 msgid "Notes|Show history only"
 msgstr ""
 
-msgid "Nothing here."
-msgstr ""
-
 msgid "Notification events"
 msgstr ""
 
@@ -7833,12 +7830,24 @@ msgstr ""
 msgid "UserProfile|Edit profile"
 msgstr ""
 
+msgid "UserProfile|Explore public groups to find projects to contribute to."
+msgstr ""
+
 msgid "UserProfile|Groups"
 msgstr ""
 
+msgid "UserProfile|Groups are the best way to manage projects and members."
+msgstr ""
+
+msgid "UserProfile|Join or create a group to start contributing by commenting on issues or submitting merge requests!"
+msgstr ""
+
 msgid "UserProfile|Most Recent Activity"
 msgstr ""
 
+msgid "UserProfile|No snippets found."
+msgstr ""
+
 msgid "UserProfile|Overview"
 msgstr ""
 
@@ -7851,6 +7860,9 @@ msgstr ""
 msgid "UserProfile|Snippets"
 msgstr ""
 
+msgid "UserProfile|Snippets in GitLab can either be private, internal, or public."
+msgstr ""
+
 msgid "UserProfile|Subscribe"
 msgstr ""
 
@@ -7860,12 +7872,27 @@ msgstr ""
 msgid "UserProfile|This user has a private profile"
 msgstr ""
 
+msgid "UserProfile|This user hasn't contributed to any projects"
+msgstr ""
+
 msgid "UserProfile|View all"
 msgstr ""
 
 msgid "UserProfile|View user in admin area"
 msgstr ""
 
+msgid "UserProfile|You can create a group for several dependent projects."
+msgstr ""
+
+msgid "UserProfile|You haven't created any personal projects."
+msgstr ""
+
+msgid "UserProfile|You haven't created any snippets."
+msgstr ""
+
+msgid "UserProfile|Your projects can be available publicly, internally, or privately, at your choice."
+msgstr ""
+
 msgid "Users"
 msgstr ""
 
diff --git a/spec/features/users/overview_spec.rb b/spec/features/users/overview_spec.rb
index 3708f0ee477..3db9ae7a951 100644
--- a/spec/features/users/overview_spec.rb
+++ b/spec/features/users/overview_spec.rb
@@ -34,7 +34,7 @@ describe 'Overview tab on a user profile', :js do
       it 'does not show any entries in the list of activities' do
         page.within('.activities-block') do
           expect(page).to have_selector('.loading', visible: false)
-          expect(page).to have_content('No activities found')
+          expect(page).to have_content('Join or create a group to start contributing by commenting on issues or submitting merge requests!')
           expect(page).not_to have_selector('.event-item')
         end
       end
@@ -96,7 +96,7 @@ describe 'Overview tab on a user profile', :js do
       it 'it shows an empty project list with an info message' do
         page.within('.projects-block') do
           expect(page).to have_selector('.loading', visible: false)
-          expect(page).to have_content('This user doesn\'t have any personal projects')
+          expect(page).to have_content('You haven\'t created any personal projects.')
           expect(page).not_to have_selector('.project-row')
         end
       end