Merge branch '221242-fix-alerts-list-sorting' into 'master'

Alert list stying issues

See merge request gitlab-org/gitlab!35741

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -74,9 +74,8 @@ export default {
     {
       key: 'title',
       label: s__('AlertManagement|Alert'),
-      thClass: `${thClass} gl-pointer-events-none`,
+      thClass: `gl-pointer-events-none`,
       tdClass,
-      sortable: false,
     },
     {
       key: 'eventCount',
@@ -88,7 +87,7 @@ export default {
     {
       key: 'assignees',
       label: s__('AlertManagement|Assignees'),
-      thClass: 'gl-w-eighth',
+      thClass: 'gl-w-eighth gl-pointer-events-none',
       tdClass,
     },
     {

app/assets/stylesheets/pages/alert_management/list.scss

@@ -8,14 +8,9 @@
         outline: none;
       }
 
-      > :not([aria-sort='none']).b-table-sort-icon-left:hover::before {
-        content: '' !important;
-      }
-
       td,
       th {
-        // TODO:  There is no gl-pl-9 utlity for this padding, to be done and then removed.
-        padding-left: 1.25rem;
+        @include gl-pl-9;
         @include gl-py-5;
         @include gl-outline-none;
         @include gl-relative;
@@ -26,24 +21,8 @@
         font-weight: $gl-font-weight-bold;
         color: $gl-gray-600;
 
-        &:hover::before {
-          left: 3%;
-          top: 34%;
-          @include gl-absolute;
-          content: url("data:image/svg+xml,%3Csvg \
-            xmlns='http://www.w3.org/2000/svg' \
-            width='14' height='14' viewBox='0 0 16 \
-            16'%3E%3Cpath fill='%23BABABA' fill-rule='evenodd' \
-            d='M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071 \
-            C3.902375,11.3166 3.902375,10.6834 \
-            4.292875,10.2929 C4.683375,9.90237 \
-            5.316575,9.90237 5.707075,10.2929 \
-            L6.999975,11.5858 L6.999975,2 C6.999975,1.44771 \
-            7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 \
-            8.999975,2 L8.999975,11.5858 L10.292865,10.2929 \
-            C10.683395,9.90237 11.316555,9.90237 11.707085,10.2929 \
-            C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 \
-            Z'/%3E%3C/svg%3E%0A");
+        &[aria-sort='none']:hover {
+          background-image: url('data:image/svg+xml, %3csvg   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"%3e   %3cpath style="fill: %23BABABA;" fill-rule="evenodd" d="M11.707085,11.7071   L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375,   10.6834 4.292875,10.2929 C4.683375,9.90237   5.316575,9.90237 5.707075,10.2929 L6.999975,   11.5858 L6.999975,2 C6.999975,1.44771   7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771   8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395   ,9.90237 11.316555,9.90237 11.707085,10.2929   C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/%3e   %3c/svg%3e');
         }
       }
     }

changelogs/unreleased/221242-fix-alerts-list-sorting.yml

+---
+title: Fix alert sort styling issues
+merge_request: 35741
+author:
+type: fixed