Update empty state for admin labels management

app/assets/javascripts/labels/index.js

@@ -113,8 +113,9 @@ export function initLabelIndex() {
 }
 
 export function initAdminLabels() {
-  const pagination = document.querySelector('.labels .gl-pagination');
-  const emptyState = document.querySelector('.labels .nothing-here-block.hidden');
+  const labelsContainer = document.querySelector('.js-admin-labels-container');
+  const pagination = labelsContainer?.querySelector('.gl-pagination');
+  const emptyState = document.querySelector('.js-admin-labels-empty-state');
 
   function removeLabelSuccessCallback() {
     this.closest('li').classList.add('gl-display-none!');
@@ -125,7 +126,8 @@ export function initAdminLabels() {
 
     // display the empty state if there are no more labels
     if (labelsCount < 1 && !pagination && emptyState) {
-      emptyState.classList.remove('hidden');
+      emptyState.classList.remove('gl-display-none');
+      labelsContainer.classList.add('gl-display-none');
     }
   }
 

app/views/admin/labels/index.html.haml

@@ -6,13 +6,27 @@
   %h3.page-title
     = _('Labels')
 %hr
-
-.labels.labels-container.admin-labels.gl-bg-gray-10.gl-border-solid.gl-border-1.gl-border-gray-100
-  - if @labels.present?
+- if @labels.present?
+  .labels.labels-container.admin-labels.js-admin-labels-container.gl-bg-gray-10.gl-border-solid.gl-border-1.gl-border-gray-100
     %ul.manage-labels-list
       = render @labels
 
     = paginate @labels, theme: 'gitlab'
 
-  .nothing-here-block{ class: ('hidden' if @labels.present?) }
-    = _('There are no labels yet')
+.js-admin-labels-empty-state{ class: ('gl-display-none' if @labels.present?) }
+  %section.row.empty-state.gl-text-center
+    .col-12
+      .svg-content
+        = image_tag 'illustrations/labels.svg'
+    .col-12
+      .gl-mx-auto.gl-my-0.gl-p-5
+        %h1.gl-font-size-h-display.gl-line-height-36.h4
+          = s_('AdminLabels|Define your default set of project labels')
+        %p.gl-mb-0
+          = s_('AdminLabels|Labels created here will be automatically added to new projects.')
+        %p
+          = s_('AdminLabels|They can be used to categorize issues and merge requests.')
+        .gl-display-flex.gl-flex-wrap.gl-justify-content-center
+          = link_to new_admin_label_path, class: "btn gl-mb-3 btn-confirm btn-md gl-button gl-mx-2" do
+            %span.gl-button-text
+              = _('New label')

locale/gitlab.pot

@@ -2462,6 +2462,15 @@ msgstr ""
 msgid "AdminDashboard|Error loading the statistics. Please try again"
 msgstr ""
 
+msgid "AdminLabels|Define your default set of project labels"
+msgstr ""
+
+msgid "AdminLabels|Labels created here will be automatically added to new projects."
+msgstr ""
+
+msgid "AdminLabels|They can be used to categorize issues and merge requests."
+msgstr ""
+
 msgid "AdminProjects| You’re about to permanently delete the project %{projectName}, its repository, and all related resources, including issues and merge requests. After you confirm and press %{strong_start}Delete project%{strong_end}, it cannot be undone or recovered."
 msgstr ""
 
@@ -35279,9 +35288,6 @@ msgstr ""
 msgid "There are no issues with the selected labels"
 msgstr ""
 
-msgid "There are no labels yet"
-msgstr ""
-
 msgid "There are no matching files"
 msgstr ""
 

spec/features/admin/admin_labels_spec.rb

@@ -45,7 +45,7 @@ RSpec.describe 'admin issues labels' do
 
       wait_for_requests
 
-      expect(page).to have_content("There are no labels yet")
+      expect(page).to have_content("Define your default set of project labels")
       expect(page).not_to have_content('bug')
       expect(page).not_to have_content('feature_label')
     end