Resolve "System level labels UI broken"

app/assets/stylesheets/pages/labels.scss

@@ -72,6 +72,9 @@
 }
 
 .manage-labels-list {
+  padding: 0;
+  margin-bottom: 0;
+
   > li:not(.empty-message):not(.is-not-draggable) {
     background-color: $white-light;
     margin-bottom: 5px;
@@ -81,6 +84,10 @@
     border-radius: $border-radius-default;
     border: 1px solid $theme-gray-100;
 
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     &.sortable-ghost {
       opacity: 0.3;
     }
@@ -243,7 +250,10 @@
 .label-actions-list {
   list-style: none;
   flex-shrink: 0;
+  text-align: right;
   padding: 0;
+  position: relative;
+  top: -3px;
 }
 
 .label-badge {
@@ -272,6 +282,16 @@
   padding: 0;
 }
 
+.label-description {
+  .description-text {
+    margin-bottom: 10px;
+
+    .admin-labels & {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .label-list-item {
   .content-list &::before,
   .content-list &::after {
@@ -319,6 +339,64 @@
         fill: $blue-600;
       }
     }
+
+    &.remove-row {
+      &:hover {
+        color: $gl-text-red;
+
+        svg {
+          fill: $gl-text-red;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .manage-labels-list {
+    > li:not(.empty-message):not(.is-not-draggable) {
+      flex-wrap: wrap;
+    }
+
+    .label-name {
+      order: 1;
+      flex-grow: 1;
+      width: auto;
+      max-width: 100%;
+    }
+
+    .label-actions-list {
+      order: 2;
+      flex-shrink: 1;
+      text-align: left;
+    }
+
+    .label-links {
+      white-space: normal;
+    }
+
+    .label-description {
+      order: 3;
+      width: 100%;
+
+      > .append-right-default.prepend-left-default {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+@media (max-width: 910px) {
+  .priority-badge {
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    margin-top: $gl-padding;
+
+    .label-badge {
+      display: inline-block;
+    }
   }
 }
 

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

@@ -1,7 +1,7 @@
-%li{ id: dom_id(label) }
+%li.label-list-item{ id: dom_id(label) }
-  .label-row
+  = render "shared/label_row", label: label
-    = render_colored_label(label, tooltip: false)
+  .label-actions-list
-    = markdown_field(label, :description)
+    = link_to edit_admin_label_path(label), class: 'btn btn-transparent label-action has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
-    .float-right
+      = sprite_icon('pencil')
-      = link_to _('Edit'), edit_admin_label_path(label), class: 'btn btn-sm'
+    = link_to admin_label_path(label), class: 'btn btn-transparent remove-row label-action has-tooltip', title: _('Delete'), data: { placement: 'bottom', confirm: "Delete this label? Are you sure?" }, aria_label: _('Delete'), method: :delete, remote: true do
-      = link_to _('Delete'), admin_label_path(label), class: 'btn btn-sm btn-remove remove-row', method: :delete, remote: true, data: {confirm: "Delete this label? Are you sure?"}
+      = sprite_icon('remove')

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

@@ -7,10 +7,11 @@
     = _('Labels')
 %hr
 
-.labels
+.labels.labels-container.admin-labels
   - if @labels.present?
-    %ul.bordered-list.manage-labels-list
+    %ul.manage-labels-list
       = render @labels
+
     = paginate @labels, theme: 'gitlab'
   - else
     .card.bg-light

app/views/shared/_label.html.haml

@@ -17,13 +17,13 @@
     - if can?(current_user, :admin_label, @project)
       %li.inline.js-toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
         dom_id: dom_id(label), type: label.type } }
-        %button.label-action.add-priority.btn.btn-transparent.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'top' }, aria_label: _('Prioritize label') }
+        %button.label-action.add-priority.btn.btn-transparent.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Prioritize label') }
           = sprite_icon('star-o')
-        %button.label-action.remove-priority.btn.btn-transparent.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'top' }, aria_label: _('Deprioritize label') }
+        %button.label-action.remove-priority.btn.btn-transparent.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Deprioritize label') }
           = sprite_icon('star')
     - if can?(current_user, :admin_label, label)
       %li.inline
-        = link_to edit_label_path(label), class: 'btn btn-transparent label-action edit', aria_label: 'Edit label' do
+        = link_to edit_label_path(label), class: 'btn btn-transparent label-action edit has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
           = sprite_icon('pencil')
     %li.inline
       .dropdown

app/views/shared/_label_row.html.haml

@@ -1,14 +1,17 @@
 - subject = local_assigns[:subject]
 - force_priority = local_assigns.fetch(:force_priority, false)
-- show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project)
+- show_label_issues_link = defined?(@project) && show_label_issuables_link?(label, :issues, project: @project)
-- show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project)
+- show_label_merge_requests_link = defined?(@project) && show_label_issuables_link?(label, :merge_requests, project: @project)
 
 .label-name
+  - if defined?(@project)
     = link_to_label(label, subject: @project, tooltip: false)
+  - else
+    = render_colored_label(label, tooltip: false)
 .label-description
   .append-right-default.prepend-left-default
     - if label.description.present?
-      .description-text.append-bottom-10
+      .description-text
         = markdown_field(label, :description)
     %ul.label-links
       - if show_label_issues_link
@@ -19,5 +22,5 @@
         %li.label-link-item.inline
           = link_to_label(label, subject: subject, type: :merge_request) { _('Merge requests') }
       - if force_priority
-        %li.label-link-item.js-priority-badge.inline.prepend-left-10
+        %li.label-link-item.priority-badge.js-priority-badge.inline.prepend-left-10
           .label-badge.label-badge-blue= _('Prioritized label')

changelogs/unreleased/48456-fix-system-level-labels-admin-ui.yml

@@ -0,0 +1,5 @@
+---
+title: Fix the UI for listing system-level labels
+merge_request:
+author:
+type: fixed

spec/features/admin/admin_labels_spec.rb

@@ -32,7 +32,7 @@ RSpec.describe 'admin issues labels' do
 
     it 'deletes all labels', :js do
       page.within '.labels' do
-        page.all('.btn-remove').each do |remove|
+        page.all('.remove-row').each do |remove|
           accept_confirm { remove.click }
           wait_for_requests
         end