From c70bd0f9b08f344d3f8b9299bf1f8440e03e7b59 Mon Sep 17 00:00:00 2001 From: Brandon Labuschagne Date: Tue, 19 Feb 2019 15:01:58 +0000 Subject: 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. --- app/views/dashboard/projects/_starred_empty_state.html.haml | 9 +++++++++ app/views/dashboard/projects/starred.html.haml | 9 ++++----- .../unreleased/34555-empty-state-for-starred-projects.yml | 5 +++++ locale/gitlab.pot | 6 ++++++ spec/features/dashboard/projects_spec.rb | 11 ++++++++++- 5 files changed, 34 insertions(+), 6 deletions(-) create mode 100644 app/views/dashboard/projects/_starred_empty_state.html.haml create mode 100644 changelogs/unreleased/34555-empty-state-for-starred-projects.yml 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) -- cgit v1.2.1