Add alert management details link

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

@@ -13,6 +13,7 @@ import {
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
+import { joinPaths } from '~/lib/utils/url_utility';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import getAlerts from '../graphql/queries/getAlerts.query.graphql';
 import { ALERTS_STATUS, ALERTS_STATUS_TABS, ALERTS_SEVERITY_LABELS } from '../constants';
@@ -21,8 +22,11 @@ import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql'
 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';
 
 export default {
+  bodyTrClass,
   i18n: {
     noAlertsMsg: s__(
       "AlertManagement|No alerts available to display. If you think you're seeing this message in error, refresh the page.",
@@ -62,9 +66,8 @@ export default {
     {
       key: 'status',
       thClass: 'w-15p',
-      trClass: 'w-15p',
       label: s__('AlertManagement|Status'),
-      tdClass: `${tdClass} rounded-bottom text-capitalize`,
+      tdClass: `${tdClass} rounded-bottom`,
     },
   ],
   statuses: {
@@ -170,6 +173,9 @@ export default {
           );
         });
     },
+    handleRowClick({ iid }) {
+      window.location.assign(joinPaths(window.location.pathname, iid, 'details'));
+    },
   },
 };
 </script>
@@ -201,8 +207,9 @@ export default {
         :fields="$options.fields"
         :show-empty="true"
         :busy="loading"
-        fixed
         stacked="md"
+        :tbody-tr-class="$options.bodyTrClass"
+        @row-clicked="handleRowClick"
       >
         <template #cell(severity)="{ item }">
           <div

app/assets/stylesheets/pages/alerts_list.scss

@@ -24,14 +24,38 @@
     color: $gray-400;
   }
 
+
+  // consider adding these stateful variants to @gitlab-ui
+  // https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1178
+  .hover-bg-blue-50:hover {
+    background-color: $blue-50;
+  }
+
+  .hover-gl-cursor-pointer:hover {
+    cursor: pointer;
+  }
+
+  .hover-gl-border-b-solid:hover {
+    @include gl-border-b-solid;
+  }
+
+  .hover-gl-border-blue-200:hover {
+    border-color: $blue-200;
+  }
+
   // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
   table {
     color: $gray-700;
 
     tr {
+      &:focus {
+        outline: none;
+      }
+
       td,
       th {
         @include gl-p-5;
+        border: 0; // Remove cell border styling so that we can set border styling per row
 
         &.event-count {
           @include gl-pr-9;
@@ -42,9 +66,6 @@
         background-color: transparent;
         font-weight: $gl-font-weight-bold;
         color: $gl-gray-600;
-        @include gl-border-b-1;
-        @include gl-border-b-solid;
-        border-color: $gray-100;
       }
 
       &:last-child {

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -5,9 +5,9 @@ import {
   GlAlert,
   GlLoadingIcon,
   GlDropdown,
+  GlDropdownItem,
   GlIcon,
   GlTab,
-  GlDropdownItem,
 } from '@gitlab/ui';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import createFlash from '~/flash';
@@ -49,7 +49,9 @@ describe('AlertManagementList', () => {
         ...props,
       },
       provide: {
-        glFeatures: { alertListStatusFilteringEnabled },
+        glFeatures: {
+          alertListStatusFilteringEnabled,
+        },
       },
       data() {
         return data;
@@ -211,6 +213,21 @@ describe('AlertManagementList', () => {
       ).toBe('Critical');
     });
 
+    it('navigates to the detail page when alert row is clicked', () => {
+      mountComponent({
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+        data: { alerts: mockAlerts, errored: false },
+        loading: false,
+      });
+
+      window.location.assign = jest.fn();
+
+      findAlerts()
+        .at(0)
+        .trigger('click');
+      expect(window.location.assign).toHaveBeenCalledWith('/1527542/details');
+    });
+
     describe('handle date fields', () => {
       it('should display time ago dates when values provided', () => {
         mountComponent({