From 1c87af9066f36606ae87f3eb73dfe98473105c7b Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Thu, 28 May 2020 19:50:45 -0400
Subject: [PATCH 1/6] Adds hovering for column sorting

---
 .../components/alert_management_list.vue      | 11 +++++---
 .../pages/alert_management/list.scss          | 25 +++++++++++++++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index d7972de62d9c86..56a28bbf5119d0 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -32,6 +32,7 @@ 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 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 alert-title`,
       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,
diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss
index f4209496354280..3293bb609809b5 100644
--- a/app/assets/stylesheets/pages/alert_management/list.scss
+++ b/app/assets/stylesheets/pages/alert_management/list.scss
@@ -8,12 +8,17 @@
         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;
+        @include gl-relative;
 
         &.alert-title {
           @include gl-pointer-events-none;
@@ -24,6 +29,26 @@
         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");
+        }
       }
     }
 
-- 
GitLab


From c1302c0a5aa3b6be824d463a03bc90cb34289444 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Wed, 3 Jun 2020 15:19:02 -0400
Subject: [PATCH 2/6] Fixes jumpiness on list

---
 app/assets/stylesheets/framework/variables_overrides.scss | 4 +++-
 .../alert_management/user_sees_alert_list_spec.rb         | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 spec/features/alert_management/user_sees_alert_list_spec.rb

diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index c7a50bdb5a364b..24220877df5ca2 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -55,7 +55,9 @@ $tooltip-padding-y: 0.5rem;
 $tooltip-padding-x: 0.75rem;
 $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
-$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg \
+$b-table-sort-icon-bg-width: 1em;
+$b-table-sort-icon-bg-height: 1em;
+$b-table-sort-icon-bg-ascending: url('data:image/svg+xml, <svg \
   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
   <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 \
   L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375, \
diff --git a/spec/features/alert_management/user_sees_alert_list_spec.rb b/spec/features/alert_management/user_sees_alert_list_spec.rb
new file mode 100644
index 00000000000000..ade704ce1ba37d
--- /dev/null
+++ b/spec/features/alert_management/user_sees_alert_list_spec.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+
+describe 'View Alert Management index page', :js, :use_clean_rails_memory_store_caching, :sidekiq_inline do
+  let_it_be(:alert_list_response_body)
+end
-- 
GitLab


From b8dd6c993876f4d8503f1d0c896c85906c3c262d Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Tue, 9 Jun 2020 18:34:03 -0400
Subject: [PATCH 3/6] Update icon variables

---
 app/assets/stylesheets/framework/variables_overrides.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index 24220877df5ca2..f78655b337c723 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -57,7 +57,7 @@ $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
 $b-table-sort-icon-bg-width: 1em;
 $b-table-sort-icon-bg-height: 1em;
-$b-table-sort-icon-bg-ascending: url('data:image/svg+xml, <svg \
+$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg \
   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
   <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 \
   L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375, \
-- 
GitLab


From 199111393a8120b9f1b33f12abc789fbbc7b9ba6 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Wed, 10 Jun 2020 20:12:38 -0400
Subject: [PATCH 4/6] Adds default sort direction

---
 .../alert_management/components/alert_management_list.vue | 6 ++++--
 app/assets/stylesheets/framework/variables_overrides.scss | 2 --
 .../alert_management/user_sees_alert_list_spec.rb         | 8 --------
 .../components/alert_management_list_spec.js              | 4 ++--
 4 files changed, 6 insertions(+), 14 deletions(-)
 delete mode 100644 spec/features/alert_management/user_sees_alert_list_spec.rb

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 56a28bbf5119d0..88b299032610d2 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -197,6 +197,7 @@ export default {
       pagination: initialPaginationState,
       sortBy: 'startedAt',
       sortDesc: true,
+      sortDirection: 'desc',
     };
   },
   computed: {
@@ -242,11 +243,11 @@ export default {
       this.filteredByStatus = status;
     },
     fetchSortedData({ sortBy, sortDesc }) {
-      const sortDirection = sortDesc ? 'DESC' : 'ASC';
+      const sortingDirection = sortDesc ? 'DESC' : 'ASC';
       const sortColumn = convertToSnakeCase(sortBy).toUpperCase();
 
       this.resetPagination();
-      this.sort = `${sortColumn}_${sortDirection}`;
+      this.sort = `${sortColumn}_${sortingDirection}`;
     },
     updateAlertStatus(status, iid) {
       this.$apollo
@@ -347,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
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index f78655b337c723..c7a50bdb5a364b 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -55,8 +55,6 @@ $tooltip-padding-y: 0.5rem;
 $tooltip-padding-x: 0.75rem;
 $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
-$b-table-sort-icon-bg-width: 1em;
-$b-table-sort-icon-bg-height: 1em;
 $b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg \
   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
   <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 \
diff --git a/spec/features/alert_management/user_sees_alert_list_spec.rb b/spec/features/alert_management/user_sees_alert_list_spec.rb
deleted file mode 100644
index ade704ce1ba37d..00000000000000
--- a/spec/features/alert_management/user_sees_alert_list_spec.rb
+++ /dev/null
@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-require 'spec_helper'
-
-
-describe 'View Alert Management index page', :js, :use_clean_rails_memory_store_caching, :sidekiq_inline do
-  let_it_be(:alert_list_response_body)
-end
diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_list_spec.js
index 39099f25150fcc..0154e5fa112bd4 100644
--- a/spec/frontend/alert_management/components/alert_management_list_spec.js
+++ b/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');
     });
   });
 
-- 
GitLab


From 31de64f231d7680cf83cd9cdbc5ea4ee80a83fe7 Mon Sep 17 00:00:00 2001
From: lauraMon <lmontemayor@gitlab.com>
Date: Thu, 11 Jun 2020 13:38:52 -0400
Subject: [PATCH 5/6] Updates with some feedback

---
 .../alert_management/components/alert_management_list.vue | 8 ++++----
 app/assets/stylesheets/pages/alert_management/list.scss   | 4 ----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue
index 88b299032610d2..37901c21f9b462 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_list.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue
@@ -31,7 +31,7 @@ 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';
@@ -78,7 +78,7 @@ export default {
     {
       key: 'title',
       label: s__('AlertManagement|Alert'),
-      thClass: `${thClass} w-30p alert-title`,
+      thClass: `${thClass} w-30p gl-pointer-events-none`,
       tdClass,
       sortable: false,
     },
@@ -244,10 +244,10 @@ export default {
     },
     fetchSortedData({ sortBy, sortDesc }) {
       const sortingDirection = sortDesc ? 'DESC' : 'ASC';
-      const sortColumn = convertToSnakeCase(sortBy).toUpperCase();
+      const sortingColumn = convertToSnakeCase(sortBy).toUpperCase();
 
       this.resetPagination();
-      this.sort = `${sortColumn}_${sortingDirection}`;
+      this.sort = `${sortingColumn}_${sortingDirection}`;
     },
     updateAlertStatus(status, iid) {
       this.$apollo
diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss
index 3293bb609809b5..c1ea9b7604aed3 100644
--- a/app/assets/stylesheets/pages/alert_management/list.scss
+++ b/app/assets/stylesheets/pages/alert_management/list.scss
@@ -19,10 +19,6 @@
         @include gl-py-5;
         @include gl-outline-none;
         @include gl-relative;
-
-        &.alert-title {
-          @include gl-pointer-events-none;
-        }
       }
 
       th {
-- 
GitLab


From 434c66a4231f0af6aa9ce17a848b9d737ebec876 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Mon, 15 Jun 2020 14:43:27 +0100
Subject: [PATCH 6/6] Add changelog for table hover

We are adding the changelog for the table
header hover state.
---
 changelogs/unreleased/lm-hover-state-sort.yml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelogs/unreleased/lm-hover-state-sort.yml

diff --git a/changelogs/unreleased/lm-hover-state-sort.yml b/changelogs/unreleased/lm-hover-state-sort.yml
new file mode 100644
index 00000000000000..4a70151178708b
--- /dev/null
+++ b/changelogs/unreleased/lm-hover-state-sort.yml
@@ -0,0 +1,5 @@
+---
+title: Add hovering icon for sorting columns on alert management list
+merge_request: 33429
+author:
+type: other
-- 
GitLab