diff --git a/app/views/admin/labels/index.html.haml b/app/views/admin/labels/index.html.haml
index 0fe7cc3d75164bc5808943eb85b9922f43d0c84f..ee5b6a8a18761bcd63242fada62a5f79b994b929 100644
--- a/app/views/admin/labels/index.html.haml
+++ b/app/views/admin/labels/index.html.haml
@@ -5,7 +5,7 @@
%div{ data: { event_tracking_load: 'true', event_tracking: 'view_admin_labels_pageload' } }
- if @labels.present?
- = render ::Layouts::CrudComponent.new(_('Labels'), description: page_description, count: @labels.count, count_class: 'js-admin-labels-count', icon: 'label', options: { class: 'labels other-labels gl-mt-5 js-admin-labels-container' }) do |c|
+ = render ::Layouts::CrudComponent.new(_('Labels'), description: page_description, count: @labels.total_count, count_class: 'js-admin-labels-count', icon: 'label', options: { class: 'labels other-labels gl-mt-5 js-admin-labels-container' }) do |c|
- c.with_actions do
= render Pajamas::ButtonComponent.new(variant: :default,
size: :small,
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index 43f8a6a9188850b52bf608a1af3bbde1d2195ba0..3fe77c192b7be75a2156fde0e7ad521f8c81ca12 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -11,14 +11,14 @@
.labels-container.gl-mt-5
- if @labels.any?
- .text-muted.gl-mb-5
+ .gl-text-subtle.gl-mb-5
= labels_function_introduction
- .other-labels.gl-rounded-base.gl-border.gl-bg-gray-10
- .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-top-base.gl-border-b
- %h3.card-title.h5.gl-m-0.gl-relative.gl-leading-24
- = _('Labels')
- %ul.manage-labels-list.js-other-labels.gl-px-3.gl-rounded-base
- = render partial: 'shared/label', collection: @labels, as: :label, locals: { use_label_priority: false, subject: @group }
+
+ = render ::Layouts::CrudComponent.new(_('Labels'), count: @labels.total_count, icon: 'label', options: { class: 'other-labels' }, body_options: { class: '!gl-m-0' }) do |c|
+ - c.with_body do
+ %ul.manage-labels-list.js-other-labels
+ = render partial: 'shared/label', collection: @labels, as: :label, locals: { use_label_priority: false, subject: @group }
+ - c.with_pagination do
= paginate @labels, theme: 'gitlab'
- elsif search.present?
.nothing-here-block
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index 03086b19984ce26e69a648a78999dcd7454e8762..ed202159f1d3f01afe23b9af52a3dab189e9621f 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -10,37 +10,35 @@
= render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
- if can_admin_label && search.blank?
- %p.text-muted.gl-mt-5
+ %p.gl-text-subtle.gl-mt-5
= _('Labels can be applied to issues and merge requests. Star a label to make it a priority label.')
- .labels-container
+ .labels-container.gl-flex.gl-flex-col.gl-gap-5
-# Only show it in the first page
- hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
- .prioritized-labels.gl-new-card{ class: [('hide' if hide), ('is-not-draggable' unless can_admin_label)] }
- .gl-new-card-header
- .gl-new-card-title-wrapper.gl-flex-direction-column
- %h3.gl-new-card-title
- = _('Prioritized labels')
- .gl-new-card-description
- = _('Drag to reorder prioritized labels and change their relative priority.')
- .js-prioritized-labels.gl-rounded-base.manage-labels-list{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
- #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty? && search.blank?}" }
- = render 'shared/empty_states/priority_labels'
- - if @prioritized_labels.any?
- = render partial: 'shared/label', collection: @prioritized_labels, as: :label, locals: { force_priority: true, subject: @project }
- - elsif search.present?
- .nothing-here-block
- = _('No prioritized labels with such name or description')
+ = render ::Layouts::CrudComponent.new(_('Prioritized labels'),
+ options: {class: ['prioritized-labels', ('gl-hidden' if hide), ('is-not-draggable' unless can_admin_label)].compact.join(' ')},
+ count: @prioritized_labels.size,
+ icon: 'label',
+ body_options: { class: '!gl-m-0' },
+ description: _('Drag to reorder prioritized labels and change their relative priority.')) do |c|
+ - c.with_body do
+ .js-prioritized-labels.gl-rounded-base.manage-labels-list{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
+ #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty? && search.blank?}" }
+ = render 'shared/empty_states/priority_labels'
+ - if @prioritized_labels.any?
+ = render partial: 'shared/label', collection: @prioritized_labels, as: :label, locals: { force_priority: true, subject: @project }
+ - elsif search.present?
+ .nothing-here-block
+ = _('No prioritized labels with such name or description')
- if @labels.any?
- .other-labels.gl-new-card
- .gl-new-card-header
- .gl-new-card-title-wrapper
- %h3.gl-new-card-title{ class: ('hide' if hide) }= _('Other labels')
- .gl-new-card-body.gl-px-0
+ = render ::Layouts::CrudComponent.new(hide ? _('Labels') : _('Other labels'), options: { class: 'other-labels' }, count: @labels.total_count, icon: 'label', body_options: { class: '!gl-m-0' }) do |c|
+ - c.with_body do
.js-other-labels.manage-labels-list
= render partial: 'shared/label', collection: @labels, as: :label, locals: { subject: @project }
- = paginate @labels, theme: 'gitlab'
+ - c.with_pagination do
+ = paginate @labels, theme: 'gitlab'
- elsif search.present?
.other-labels
@@ -60,5 +58,5 @@
= render 'shared/empty_states/labels'
%template#js-badge-item-template
- %li.js-priority-badge.inline.gl-mr-3
+ %li.js-priority-badge.gl-inline.gl-mr-3
.label-badge.gl-bg-blue-50= _('Prioritized')