Updates with feedback

* Separates svg into mulitline
* moves icon to the left
* adds comments, etc

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

@@ -26,7 +26,7 @@ import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
 const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 hover-bg-blue-50 hover-gl-cursor-pointer hover-gl-border-b-solid hover-gl-border-blue-200';
-const findSortColumn = () => document.getElementsByClassName('started-at')[0];
+const findSortColumn = () => document.querySelector('.started-at');
 
 export default {
   i18n: {
@@ -67,7 +67,7 @@ export default {
     {
       key: 'eventsCount',
       label: s__('AlertManagement|Events'),
-      thClass: 'text-right gl-pr-9',
+      thClass: 'text-right gl-pr-9 w-3rem',
       tdClass: `${tdClass} text-md-right`,
       sortable: true,
     },
@@ -257,6 +257,7 @@ export default {
         stacked="md"
         :tbody-tr-class="tbodyTrClass"
         :no-local-sorting="true"
+        sort-icon-left
         @row-clicked="navigateToAlertDetails"
         @sort-changed="fetchSortedData"
       >
@@ -282,7 +283,7 @@ export default {
         <template #cell(endTime)="{ item }">
           <time-ago v-if="item.endedAt" :time="item.endedAt" />
         </template>
-
+        <!-- TODO: Remove after: https://gitlab.com/gitlab-org/gitlab/-/issues/218467 -->
         <template #cell(eventsCount)="{ item }">
           {{ item.eventCount }}
         </template>

app/assets/stylesheets/framework/variables_overrides.scss

@@ -55,21 +55,26 @@ $tooltip-padding-y: 0.5rem;
 $tooltip-padding-x: 0.75rem;
 $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
-$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,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"/>
+$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, \
+  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"/> \
   </svg>') !default;
-$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="M4.29289,4.2971 L8,0.59 L11.7071,4.2971 C12.0976,4.6876
-12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834,6.10183 10.2929,5.7113
-L9,4.4184 L9,14.0042 C9,14.55649 8.55228,15.0042 8,15.0042 C7.44772,15.0042 7,14.55649
-7,14.0042 L7,4.4184 L5.70711,5.7113 C5.31658,6.10183 4.68342,6.10183 4.29289,5.7113
-C3.90237,5.3208 3.90237,4.6876 4.29289,4.2971 Z"/>
-</svg> ') !default;
+$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="M4.29289,4.2971 L8,0.59 \
+  L11.7071,4.2971 C12.0976,4.6876 \
+  12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834, \
+  6.10183 10.2929,5.7113 L9,4.4184 L9,14.0042 C9,14.55649 \
+  8.55228,15.0042 8,15.0042 C7.44772,15.0042 7,14.55649 \
+  7,14.0042 L7,4.4184 L5.70711,5.7113 C5.31658,6.10183 4.68342,6.10183 4.29289,5.7113 \
+  C3.90237,5.3208 3.90237,4.6876 4.29289,4.2971 Z"/> \
+  </svg> ') !default;
 $b-table-sort-icon-bg-not-sorted: '';

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

@@ -28,7 +28,9 @@
 
       td,
       th {
-        @include gl-p-5;
+        // 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;
         border: 0; // Remove cell border styling so that we can set border styling per row
 

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -84,7 +84,7 @@ describe('AlertManagementList', () => {
   const mockStartedAtCol = {};
 
   beforeEach(() => {
-    jest.spyOn(document, 'getElementsByClassName').mockReturnValue([mockStartedAtCol]);
+    jest.spyOn(document, 'querySelector').mockReturnValue(mockStartedAtCol);
     mountComponent();
   });