Merge branch 'tr-remove-custom-alert-table-formatting' into 'master'

Remove custom alert table formatting

See merge request gitlab-org/gitlab!42201

app/assets/javascripts/vue_shared/components/alert_details_table.vue

 <script>
 import { GlLoadingIcon, GlTable } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import {
+  capitalizeFirstCharacter,
+  convertToSentenceCase,
+  splitCamelCase,
+} from '~/lib/utils/text_utility';
+
+const thClass = 'gl-bg-transparent! gl-border-1! gl-border-b-solid! gl-border-gray-200!';
+const tdClass = 'gl-border-gray-100! gl-p-5!';
 
 export default {
   components: {
@@ -18,27 +26,42 @@ export default {
       required: true,
     },
   },
-  tableHeader: {
-    [s__('AlertManagement|Key')]: s__('AlertManagement|Value'),
+  fields: [
+    {
+      key: 'fieldName',
+      label: s__('AlertManagement|Key'),
+      thClass,
+      tdClass,
+      formatter: string => capitalizeFirstCharacter(convertToSentenceCase(splitCamelCase(string))),
+    },
+    {
+      key: 'value',
+      thClass: `${thClass} w-60p`,
+      tdClass,
+      label: s__('AlertManagement|Value'),
     },
+  ],
   computed: {
     items() {
       if (!this.alert) {
         return [];
       }
-      return [{ ...this.$options.tableHeader, ...this.alert }];
+      return Object.entries(this.alert).map(([fieldName, value]) => ({
+        fieldName,
+        value,
+      }));
     },
   },
 };
 </script>
 <template>
   <gl-table
-    class="alert-management-details-table gl-mb-0!"
+    class="alert-management-details-table"
     :busy="loading"
     :empty-text="s__('AlertManagement|No alert data to display.')"
     :items="items"
+    :fields="$options.fields"
     show-empty
-    stacked
   >
     <template #table-busy>
       <gl-loading-icon size="lg" color="dark" class="gl-mt-5" />

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

 .alert-management-details {
-  // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
-  table {
-    tr {
-      td {
-        @include gl-border-0;
-        @include gl-p-5;
-        border-color: transparent;
-
-        &:not(:last-child) {
-          border-bottom: 1px solid $table-border-color;
-        }
-
-        &:first-child {
-          div {
-            font-weight: bold;
-          }
-        }
-
-        &:not(:first-child) {
-          &::before {
-            color: $gray-500;
-            font-weight: normal !important;
-          }
-
-          div {
-            color: $gray-500;
-          }
-        }
-
-        @include media-breakpoint-up(sm) {
-          div {
-            text-align: left !important;
-          }
-        }
-      }
-
-      &:last-child {
-        &::after {
-          content: none !important;
-        }
-      }
-    }
-  }
-
   @include media-breakpoint-down(xs) {
     .alert-details-incident-button {
       width: 100%;