First pass at updated profile empty state

7 files changed, 20 insertions, 6 deletions

diff --git a/app/assets/javascripts/pages/users/user_overview_block.js b/app/assets/javascripts/pages/users/user_overview_block.js
index e9ecec717d6..a7c3c9d104d 100644
--- a/app/assets/javascripts/pages/users/user_overview_block.js
+++ b/app/assets/javascripts/pages/users/user_overview_block.js
@@ -15,7 +15,8 @@ export default class UserOverviewBlock {
   }
 
   loadData() {
-    const loadingEl = document.querySelector(`${this.container} .loading`);
+    const containerEl = document.querySelector(this.container);
+    const loadingEl = containerEl.querySelector(`.loading`);
 
     loadingEl.classList.remove('hide');
 
@@ -42,7 +43,7 @@ export default class UserOverviewBlock {
       const nothingHereBlock = containerEl.querySelector('.nothing-here-block');
 
       if (nothingHereBlock) {
-        nothingHereBlock.classList.add('text-left', 'p-0');
+        nothingHereBlock.classList.add('p-5');
       }
     }
 
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index 15c29e14cc0..7d90d9ca4a5 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -33,4 +33,9 @@
           %span  you have no access to.
     = paginate_collection(projects, remote: remote) unless skip_pagination
   - else
-    .nothing-here-block No projects found
+    .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')
diff --git a/changelogs/unreleased/profile-project-empty-state.yml b/changelogs/unreleased/profile-project-empty-state.yml
new file mode 100644
index 00000000000..484306d5b98
--- /dev/null
+++ b/changelogs/unreleased/profile-project-empty-state.yml
@@ -0,0 +1,5 @@
+---
+title: Added empty project illustration and updated text to user profile overview
+merge_request: 23973
+author: Fernando Arias
+type: changed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 08331f4e630..501acb6947a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7476,6 +7476,9 @@ msgstr ""
 msgid "UserProfile|Subscribe"
 msgstr ""
 
+msgid "UserProfile|This user doesn't have any personal projects"
+msgstr ""
+
 msgid "UserProfile|This user has a private profile"
 msgstr ""
 
diff --git a/spec/features/dashboard/shortcuts_spec.rb b/spec/features/dashboard/shortcuts_spec.rb
index 31a1dcf826d..cbddf117462 100644
--- a/spec/features/dashboard/shortcuts_spec.rb
+++ b/spec/features/dashboard/shortcuts_spec.rb
@@ -49,7 +49,7 @@ describe 'Dashboard shortcuts', :js do
       find('body').send_keys([:shift, 'P'])
 
       find('.nothing-here-block')
-      expect(page).to have_content('No projects found')
+      expect(page).to have_content('This user doesn\'t have any personal projects')
     end
   end
 
diff --git a/spec/features/dashboard/user_filters_projects_spec.rb b/spec/features/dashboard/user_filters_projects_spec.rb
index 3746d37b9cd..cc86114e436 100644
--- a/spec/features/dashboard/user_filters_projects_spec.rb
+++ b/spec/features/dashboard/user_filters_projects_spec.rb
@@ -38,7 +38,7 @@ describe 'Dashboard > User filters projects' do
     it 'returns message when starred projects fitler returns no results' do
       fill_in 'project-filter-form-field', with: 'Beta\n'
 
-      expect(page).to have_content('No projects found')
+      expect(page).to have_content('This user doesn\'t have any personal projects')
       expect(page).not_to have_content('You don\'t have starred projects yet')
     end
   end
diff --git a/spec/features/users/overview_spec.rb b/spec/features/users/overview_spec.rb
index 8748230fa0c..3708f0ee477 100644
--- a/spec/features/users/overview_spec.rb
+++ b/spec/features/users/overview_spec.rb
@@ -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('No projects found')
+          expect(page).to have_content('This user doesn\'t have any personal projects')
           expect(page).not_to have_selector('.project-row')
         end
       end