From 220cb4c3a73022d5fccd2f3cbb180bc87fe42512 Mon Sep 17 00:00:00 2001 From: George Tsiolis Date: Fri, 22 Feb 2019 12:12:36 +0000 Subject: [PATCH] Improve snippets empty state --- app/views/dashboard/_snippets_head.html.haml | 4 ++-- app/views/dashboard/snippets/index.html.haml | 12 +++++++++-- app/views/explore/snippets/index.html.haml | 2 +- app/views/projects/snippets/index.html.haml | 18 +++++++++------- app/views/projects/snippets/new.html.haml | 4 ++-- .../shared/empty_states/_snippets.html.haml | 20 ++++++++++++++++++ app/views/shared/snippets/_list.html.haml | 12 +++++++++++ app/views/snippets/index.html.haml | 2 +- .../improve-snippets-empty-state.yml | 5 +++++ locale/gitlab.pot | 21 ++++++++++++++++--- spec/features/dashboard/shortcuts_spec.rb | 2 +- spec/features/dashboard/snippets_spec.rb | 15 +++++++++++++ 12 files changed, 98 insertions(+), 19 deletions(-) create mode 100644 app/views/shared/empty_states/_snippets.html.haml create mode 100644 app/views/shared/snippets/_list.html.haml create mode 100644 changelogs/unreleased/improve-snippets-empty-state.yml diff --git a/app/views/dashboard/_snippets_head.html.haml b/app/views/dashboard/_snippets_head.html.haml index 8d99f84755a..a05d0190efb 100644 --- a/app/views/dashboard/_snippets_head.html.haml +++ b/app/views/dashboard/_snippets_head.html.haml @@ -1,9 +1,9 @@ .page-title-holder %h1.page-title= _('Snippets') - - if current_user + - if current_user && current_user.snippets.any? || @snippets.any? .page-title-controls - = link_to "New snippet", new_snippet_path, class: "btn btn-success", title: "New snippet" + = link_to _("New snippet"), new_snippet_path, class: "btn btn-success", title: _("New snippet") .top-area %ul.nav-links.nav.nav-tabs diff --git a/app/views/dashboard/snippets/index.html.haml b/app/views/dashboard/snippets/index.html.haml index 6eb067da95c..b649fe91c24 100644 --- a/app/views/dashboard/snippets/index.html.haml +++ b/app/views/dashboard/snippets/index.html.haml @@ -3,6 +3,14 @@ - header_title "Snippets", dashboard_snippets_path = render 'dashboard/snippets_head' -= render partial: 'snippets/snippets_scope_menu', locals: { include_private: true } +- if current_user.snippets.exists? + = render partial: 'snippets/snippets_scope_menu', locals: { include_private: true } -= render partial: 'snippets/snippets', locals: { link_project: true } +.d-block.d-sm-none +   + = link_to _("New snippet"), new_snippet_path, class: "btn btn-success btn-block", title: _("New snippet") + +- if current_user.snippets.exists? + = render partial: 'shared/snippets/list', locals: { link_project: true } +- else + = render 'shared/empty_states/snippets', button_path: new_snippet_path diff --git a/app/views/explore/snippets/index.html.haml b/app/views/explore/snippets/index.html.haml index 94fc4ac21d2..d23c8301b10 100644 --- a/app/views/explore/snippets/index.html.haml +++ b/app/views/explore/snippets/index.html.haml @@ -7,4 +7,4 @@ - else = render 'explore/head' -= render partial: 'snippets/snippets', locals: { link_project: true } += render partial: 'shared/snippets/list', locals: { link_project: true } diff --git a/app/views/projects/snippets/index.html.haml b/app/views/projects/snippets/index.html.haml index a4974d89c1a..7682d01a5a1 100644 --- a/app/views/projects/snippets/index.html.haml +++ b/app/views/projects/snippets/index.html.haml @@ -1,12 +1,16 @@ - page_title _("Snippets") -- if current_user - .top-area - - include_private = @project.team.member?(current_user) || current_user.admin? - = render partial: 'snippets/snippets_scope_menu', locals: { subject: @project, include_private: include_private } +- if @snippets.exists? + - if current_user + .top-area + - include_private = @project.team.member?(current_user) || current_user.admin? + = render partial: 'snippets/snippets_scope_menu', locals: { subject: @project, include_private: include_private } - .nav-controls - if can?(current_user, :create_project_snippet, @project) - = link_to _("New snippet"), new_project_snippet_path(@project), class: "btn btn-success", title: _("New snippet") + .nav-controls + - if can?(current_user, :create_project_snippet, @project) + = link_to _("New snippet"), new_project_snippet_path(@project), class: "btn btn-success", title: _("New snippet") -= render 'snippets/snippets' + = render 'shared/snippets/list' +- else + = render 'shared/empty_states/snippets', button_path: new_namespace_project_snippet_path(@project.namespace, @project) diff --git a/app/views/projects/snippets/new.html.haml b/app/views/projects/snippets/new.html.haml index 26b333d4ecf..d64e3a49a81 100644 --- a/app/views/projects/snippets/new.html.haml +++ b/app/views/projects/snippets/new.html.haml @@ -1,8 +1,8 @@ - add_to_breadcrumbs _("Snippets"), project_snippets_path(@project) - breadcrumb_title _("New") -- page_title _("New Snippets") +- page_title _("New Snippet") %h3.page-title - = _('New Snippet') + = _("New Snippet") %hr = render "shared/snippets/form", url: project_snippets_path(@project, @snippet) diff --git a/app/views/shared/empty_states/_snippets.html.haml b/app/views/shared/empty_states/_snippets.html.haml new file mode 100644 index 00000000000..a1a16b9d067 --- /dev/null +++ b/app/views/shared/empty_states/_snippets.html.haml @@ -0,0 +1,20 @@ +- button_path = local_assigns.fetch(:button_path, false) + +.row.empty-state + .col-12 + .svg-content + = image_tag 'illustrations/snippets_empty.svg' + .text-content + - if current_user + %h4 + = s_('SnippetsEmptyState|Snippets are small pieces of code or notes that you want to keep.') + %p + = s_('SnippetsEmptyState|They can be either public or private.') + .text-center + = link_to s_('SnippetsEmptyState|New snippet'), button_path, class: 'btn btn-success', title: s_('SnippetsEmptyState|New snippet'), id: 'new_snippet_link' + - unless current_page?(dashboard_snippets_path) + = link_to s_('SnippetsEmptyState|Explore public snippets'), explore_snippets_path, class: 'btn btn-default', title: s_('SnippetsEmptyState|Explore public snippets') + - else + %h4.text-center= s_('SnippetsEmptyState|There are no snippets to show.') + + diff --git a/app/views/shared/snippets/_list.html.haml b/app/views/shared/snippets/_list.html.haml new file mode 100644 index 00000000000..5d2152eb411 --- /dev/null +++ b/app/views/shared/snippets/_list.html.haml @@ -0,0 +1,12 @@ +- remote = local_assigns.fetch(:remote, false) +- link_project = local_assigns.fetch(:link_project, false) + +- if @snippets.exists? + .snippets-list-holder + %ul.content-list + = render partial: 'shared/snippets/snippet', collection: @snippets, locals: { link_project: link_project } + + = paginate @snippets, theme: 'gitlab', remote: remote + +- else + .nothing-here-block= s_("SnippetsEmptyState|No snippets found") diff --git a/app/views/snippets/index.html.haml b/app/views/snippets/index.html.haml index 4f418e2381f..f5fe75bed5a 100644 --- a/app/views/snippets/index.html.haml +++ b/app/views/snippets/index.html.haml @@ -10,4 +10,4 @@ = link_to user_path(@user) do = _("%{user_name} profile page") % { user_name: @user.name } -= render 'snippets' += render 'shared/snippets/list' diff --git a/changelogs/unreleased/improve-snippets-empty-state.yml b/changelogs/unreleased/improve-snippets-empty-state.yml new file mode 100644 index 00000000000..9859243a81f --- /dev/null +++ b/changelogs/unreleased/improve-snippets-empty-state.yml @@ -0,0 +1,5 @@ +--- +title: Improve snippets empty state +merge_request: 18348 +author: George Tsiolis +type: changed diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 2f607708834..5a8ab9aa996 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -4862,9 +4862,6 @@ msgstr "" msgid "New Snippet" msgstr "" -msgid "New Snippets" -msgstr "" - msgid "New branch" msgstr "" @@ -6790,6 +6787,24 @@ msgstr "" msgid "Snippets" msgstr "" +msgid "SnippetsEmptyState|Explore public snippets" +msgstr "" + +msgid "SnippetsEmptyState|New snippet" +msgstr "" + +msgid "SnippetsEmptyState|No snippets found" +msgstr "" + +msgid "SnippetsEmptyState|Snippets are small pieces of code or notes that you want to keep." +msgstr "" + +msgid "SnippetsEmptyState|There are no snippets to show." +msgstr "" + +msgid "SnippetsEmptyState|They can be either public or private." +msgstr "" + msgid "Someone edited this %{issueType} at the same time you did. The description has been updated and you will need to make your changes again." msgstr "" diff --git a/spec/features/dashboard/shortcuts_spec.rb b/spec/features/dashboard/shortcuts_spec.rb index cbddf117462..55f5ff04d01 100644 --- a/spec/features/dashboard/shortcuts_spec.rb +++ b/spec/features/dashboard/shortcuts_spec.rb @@ -44,7 +44,7 @@ describe 'Dashboard shortcuts', :js do find('body').send_keys([:shift, 'S']) find('.nothing-here-block') - expect(page).to have_selector('.snippets-list-holder') + expect(page).to have_content('No snippets found') find('body').send_keys([:shift, 'P']) diff --git a/spec/features/dashboard/snippets_spec.rb b/spec/features/dashboard/snippets_spec.rb index fb4263d74c4..0e248c8732d 100644 --- a/spec/features/dashboard/snippets_spec.rb +++ b/spec/features/dashboard/snippets_spec.rb @@ -13,6 +13,21 @@ describe 'Dashboard snippets' do it_behaves_like 'paginated snippets' end + context 'when there are no project snippets', :js do + let(:project) { create(:project, :public) } + before do + sign_in(project.owner) + visit dashboard_snippets_path + end + + it 'shows the empty state when there are no snippets' do + element = page.find('.row.empty-state') + + expect(element).to have_content("Snippets are small pieces of code or notes that you want to keep.") + expect(element.find('.svg-content img')['src']).to have_content('illustrations/snippets_empty') + end + end + context 'filtering by visibility' do let(:user) { create(:user) } let!(:snippets) do