From 3dcd55d98e835f688dcd94ffb110010dc18bdbf9 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Tue, 1 Oct 2024 14:08:07 +0000
Subject: [PATCH] Update Labels empty state

---
 .../shared/empty_states/_labels.html.haml     | 25 ++++++++-----------
 locale/gitlab.pot                             |  2 +-
 qa/qa/page/label/index.rb                     |  4 ---
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/app/views/shared/empty_states/_labels.html.haml b/app/views/shared/empty_states/_labels.html.haml
index 9dd9cdcd05167..575c459f7b2cb 100644
--- a/app/views/shared/empty_states/_labels.html.haml
+++ b/app/views/shared/empty_states/_labels.html.haml
@@ -1,14 +1,11 @@
-.row.empty-state.labels
-  .col-12
-    .svg-content.svg-150{ data: { testid: 'label-svg-content' } }
-      = image_tag 'illustrations/empty-state/empty-labels-md.svg'
-  .col-12
-    .text-content
-      %h4= _("Labels can be applied to issues and merge requests to categorize them.")
-      %p= _("You can also star a label to make it a priority label.")
-      .text-center
-        - if can?(current_user, :admin_label, @project)
-          = link_button_to _('New label'), new_project_label_path(@project), title: _('New label'), id: 'new_label_link', variant: :confirm
-          = link_button_to _('Generate a default set of labels'), generate_project_labels_path(@project), method: :post, title: _('Generate a default set of labels'), id: 'generate_labels_link', variant: :confirm, category: :secondary
-        - if can?(current_user, :admin_label, @group)
-          = link_button_to _('New label'), new_group_label_path(@group), title: _('New label'), id: 'new_label_link', variant: :confirm
+= render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-labels-add-md.svg',
+  title: _("Labels can be applied to issues and merge requests to categorize them")) do |c|
+
+  - c.with_description do
+    = _("You can also star a label to make it a priority label.")
+    .gl-mt-5.gl-flex.gl-gap-3.gl-flex-wrap.gl-justify-center
+      - if can?(current_user, :admin_label, @project)
+        = link_button_to _('New label'), new_project_label_path(@project), title: _('New label'), id: 'new_label_link', variant: :confirm
+        = link_button_to _('Generate a default set of labels'), generate_project_labels_path(@project), method: :post, title: _('Generate a default set of labels'), id: 'generate_labels_link', variant: :confirm, category: :secondary
+      - if can?(current_user, :admin_label, @group)
+        = link_button_to _('New label'), new_group_label_path(@group), title: _('New label'), id: 'new_label_link', variant: :confirm
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index fc46359168f13..e1495081881ce 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -31568,7 +31568,7 @@ msgstr ""
 msgid "Labels"
 msgstr ""
 
-msgid "Labels can be applied to issues and merge requests to categorize them."
+msgid "Labels can be applied to issues and merge requests to categorize them"
 msgstr ""
 
 msgid "Labels can be applied to issues and merge requests. Group labels are available for any project within the group."
diff --git a/qa/qa/page/label/index.rb b/qa/qa/page/label/index.rb
index 77d02c73a5263..5e1ad97966bc2 100644
--- a/qa/qa/page/label/index.rb
+++ b/qa/qa/page/label/index.rb
@@ -10,10 +10,6 @@ class Index < Page::Base
           element 'create-new-label-button'
         end
 
-        view 'app/views/shared/empty_states/_labels.html.haml' do
-          element 'label-svg-content'
-        end
-
         view 'app/views/shared/empty_states/_priority_labels.html.haml' do
           element 'label-svg-content'
         end
-- 
GitLab