Merge branch 'lm-hover-state-sort' into 'master'

Add hovering icon for sorting columns on alert management list

See merge request gitlab-org/gitlab!33429

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

@@ -31,7 +31,8 @@ import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql'
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
 import Tracking from '~/tracking';
 
-const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
+const tdClass = 'table-col gl-display-flex d-md-table-cell gl-align-items-center';
+const thClass = 'gl-hover-bg-blue-50';
 const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-bg-blue-50 gl-hover-cursor-pointer gl-hover-border-b-solid gl-hover-border-blue-200';
 
@@ -57,32 +58,34 @@ export default {
       key: 'severity',
       label: s__('AlertManagement|Severity'),
       tdClass: `${tdClass} rounded-top text-capitalize`,
+      thClass,
       sortable: true,
     },
     {
       key: 'startedAt',
       label: s__('AlertManagement|Start time'),
-      thClass: 'js-started-at',
+      thClass: `${thClass} js-started-at`,
       tdClass,
       sortable: true,
     },
     {
       key: 'endedAt',
       label: s__('AlertManagement|End time'),
+      thClass,
       tdClass,
       sortable: true,
     },
     {
       key: 'title',
       label: s__('AlertManagement|Alert'),
-      thClass: 'w-30p alert-title',
+      thClass: `${thClass} w-30p gl-pointer-events-none`,
       tdClass,
       sortable: false,
     },
     {
       key: 'eventCount',
       label: s__('AlertManagement|Events'),
-      thClass: 'text-right gl-pr-9 w-3rem',
+      thClass: `${thClass} text-right gl-pr-9 w-3rem`,
       tdClass: `${tdClass} text-md-right`,
       sortable: true,
     },
@@ -93,7 +96,7 @@ export default {
     },
     {
       key: 'status',
-      thClass: 'w-15p',
+      thClass: `${thClass} w-15p`,
       label: s__('AlertManagement|Status'),
       tdClass: `${tdClass} rounded-bottom`,
       sortable: true,
@@ -194,6 +197,7 @@ export default {
       pagination: initialPaginationState,
       sortBy: 'startedAt',
       sortDesc: true,
+      sortDirection: 'desc',
     };
   },
   computed: {
@@ -239,11 +243,11 @@ export default {
       this.filteredByStatus = status;
     },
     fetchSortedData({ sortBy, sortDesc }) {
-      const sortDirection = sortDesc ? 'DESC' : 'ASC';
-      const sortColumn = convertToSnakeCase(sortBy).toUpperCase();
+      const sortingDirection = sortDesc ? 'DESC' : 'ASC';
+      const sortingColumn = convertToSnakeCase(sortBy).toUpperCase();
 
       this.resetPagination();
-      this.sort = `${sortColumn}_${sortDirection}`;
+      this.sort = `${sortingColumn}_${sortingDirection}`;
     },
     updateAlertStatus(status, iid) {
       this.$apollo
@@ -344,6 +348,7 @@ export default {
         stacked="md"
         :tbody-tr-class="tbodyTrClass"
         :no-local-sorting="true"
+        :sort-direction="sortDirection"
         :sort-desc.sync="sortDesc"
         :sort-by.sync="sortBy"
         sort-icon-left

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

@@ -8,22 +8,43 @@
         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-py-5;
         @include gl-outline-none;
-
-        &.alert-title {
-          @include gl-pointer-events-none;
-        }
+        @include gl-relative;
       }
 
       th {
         background-color: transparent;
         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");
+        }
       }
     }
 

changelogs/unreleased/lm-hover-state-sort.yml

+---
+title: Add hovering icon for sorting columns on alert management list
+merge_request: 33429
+author:
+type: other

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -344,11 +344,11 @@ describe('AlertManagementList', () => {
     it('updates sort with new direction and column key', () => {
       findSeverityColumnHeader().trigger('click');
 
-      expect(wrapper.vm.$data.sort).toBe('SEVERITY_ASC');
+      expect(wrapper.vm.$data.sort).toBe('SEVERITY_DESC');
 
       findSeverityColumnHeader().trigger('click');
 
-      expect(wrapper.vm.$data.sort).toBe('SEVERITY_DESC');
+      expect(wrapper.vm.$data.sort).toBe('SEVERITY_ASC');
     });
   });