Improve snippets empty state

app/views/dashboard/_snippets_head.html.haml

 .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

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

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 }

app/views/projects/snippets/index.html.haml

 - 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)

app/views/projects/snippets/new.html.haml

 - 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)

app/views/shared/empty_states/_snippets.html.haml

+- 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.')
+
+

app/views/shared/snippets/_list.html.haml

+- 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")

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'

changelogs/unreleased/improve-snippets-empty-state.yml

+---
+title: Improve snippets empty state
+merge_request: 18348
+author: George Tsiolis
+type: changed

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 ""
 

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'])
 

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