Improve empty state for starred projects

In this MR, a view for the empty state of projects has been added.
In addition, an svg for this has also been added.

5 files changed, 34 insertions, 6 deletions

diff --git a/app/views/dashboard/projects/_starred_empty_state.html.haml b/app/views/dashboard/projects/_starred_empty_state.html.haml
new file mode 100644
index 00000000000..bea27f1a456
--- /dev/null
+++ b/app/views/dashboard/projects/_starred_empty_state.html.haml
@@ -0,0 +1,9 @@
+.row.empty-state
+  .col-12
+    .svg-content.svg-250
+      = image_tag 'illustrations/starred_empty.svg'
+    .text-content
+      %h4.text-center
+        = s_("StarredProjectsEmptyState|You don't have starred projects yet.")
+      %p.text-secondary
+        = s_("StarredProjectsEmptyState|Visit a project page and press on a star icon. Then, you can find the project on this page.")
diff --git a/app/views/dashboard/projects/starred.html.haml b/app/views/dashboard/projects/starred.html.haml
index ad08409c8fe..3a45f6df017 100644
--- a/app/views/dashboard/projects/starred.html.haml
+++ b/app/views/dashboard/projects/starred.html.haml
@@ -1,8 +1,8 @@
 - @hide_top_links = true
 - @no_container = true
-- breadcrumb_title "Projects"
-- page_title "Starred Projects"
-- header_title "Projects", dashboard_projects_path
+- breadcrumb_title _("Projects")
+- page_title _("Starred Projects")
+- header_title _("Projects"), dashboard_projects_path
 
 = render_if_exists "shared/gold_trial_callout"
 
@@ -13,5 +13,4 @@
   - if params[:filter_projects] || any_projects?(@projects)
     = render 'projects'
   - else
-    %h3.page-title You don't have starred projects yet
-    %p.slead Visit project page and press on star icon and it will appear on this page.
+    = render 'starred_empty_state'
diff --git a/changelogs/unreleased/34555-empty-state-for-starred-projects.yml b/changelogs/unreleased/34555-empty-state-for-starred-projects.yml
new file mode 100644
index 00000000000..926d3a2eecf
--- /dev/null
+++ b/changelogs/unreleased/34555-empty-state-for-starred-projects.yml
@@ -0,0 +1,5 @@
+---
+title: Improve empty state for starred projects
+merge_request: 25138
+author:
+type: changed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7f6ca12aebf..973950d27aa 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7003,6 +7003,12 @@ msgstr ""
 msgid "Starred projects"
 msgstr ""
 
+msgid "StarredProjectsEmptyState|Visit a project page and press on a star icon. Then, you can find the project on this page."
+msgstr ""
+
+msgid "StarredProjectsEmptyState|You don't have starred projects yet."
+msgstr ""
+
 msgid "Stars"
 msgstr ""
 
diff --git a/spec/features/dashboard/projects_spec.rb b/spec/features/dashboard/projects_spec.rb
index 6c4b04ab76b..9d1c1e3acc7 100644
--- a/spec/features/dashboard/projects_spec.rb
+++ b/spec/features/dashboard/projects_spec.rb
@@ -114,7 +114,16 @@ describe 'Dashboard Projects' do
     end
   end
 
-  context 'when on Starred projects tab' do
+  context 'when on Starred projects tab', :js do
+    it 'shows the empty state when there are no starred projects' do
+      visit(starred_dashboard_projects_path)
+
+      element = page.find('.row.empty-state')
+
+      expect(element).to have_content("You don't have starred projects yet.")
+      expect(element.find('.svg-content img')['src']).to have_content('illustrations/starred_empty')
+    end
+
     it 'shows only starred projects' do
       user.toggle_star(project2)