Add empty state placeholder for milestones

app/views/dashboard/milestones/index.html.haml

@@ -17,12 +17,11 @@
   .nav-controls
     = render 'shared/milestones/search_form'
 
-.milestones
-  %ul.content-list
-    - if @milestones.blank?
-      %li
-        .nothing-here-block No milestones to show
-    - else
+- if @milestones.blank?
+  = render 'shared/empty_states/milestones'
+- else
+  .milestones
+    %ul.content-list
       - @milestones.each do |milestone|
         = render 'milestone', milestone: milestone
-  = paginate @milestones, theme: 'gitlab'
+    = paginate @milestones, theme: 'gitlab'

app/views/groups/milestones/index.html.haml

@@ -8,17 +8,16 @@
     = render 'shared/milestones/search_form'
     = render 'shared/milestones_sort_dropdown'
     - if can?(current_user, :admin_milestone, @group)
-      = link_to "New milestone", new_group_milestone_path(@group), class: "btn gl-button btn-success", data: { qa_selector: "new_group_milestone_link" }
+      = link_to _('New milestone'), new_group_milestone_path(@group), class: "btn gl-button btn-success", data: { qa_selector: "new_group_milestone_link" }
 
-.milestones
-  %ul.content-list
-    - if @milestones.blank?
-      %li
-        .nothing-here-block No milestones to show
-    - else
+- if @milestones.blank?
+  = render 'shared/empty_states/milestones'
+- else
+  .milestones
+    %ul.content-list
       - @milestones.each do |milestone|
         - if milestone.project_milestone?
           = render 'projects/milestones/milestone', milestone: milestone
         - else
           = render 'milestone', milestone: milestone
-  = paginate @milestones, theme: "gitlab"
+    = paginate @milestones, theme: "gitlab"

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

@@ -11,15 +11,14 @@
       = link_to new_project_milestone_path(@project), class: 'gl-button btn btn-success', data: { qa_selector: "new_project_milestone_link" }, title: _('New milestone') do
         = _('New milestone')
 
-.milestones
-  #js-delete-milestone-modal
-  #promote-milestone-modal
+- if @milestones.blank?
+  = render 'shared/empty_states/milestones'
+- else
+  .milestones
+    #js-delete-milestone-modal
+    #promote-milestone-modal
 
-  %ul.content-list
-    = render @milestones
+    %ul.content-list
+      = render @milestones
 
-    - if @milestones.blank?
-      %li
-        .nothing-here-block= _('No milestones to show')
-
-  = paginate @milestones, theme: 'gitlab'
+    = paginate @milestones, theme: 'gitlab'

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

+.row.empty-state
+  .col-12
+    .svg-content
+      = image_tag 'illustrations/milestone_burndown_chart.svg'
+  .col-12
+    .text-content
+      %h4.text-center= _('No milestones to show')

changelogs/unreleased/yo-empty-milestone.yml

+---
+title: Add empty state placeholder for milestones
+merge_request: 51887
+author: Yogi (@yo)
+type: other