Separate alert details table component for re-use

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

@@ -10,7 +10,6 @@ import {
   GlTabs,
   GlTab,
   GlButton,
-  GlTable,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import alertQuery from '../graphql/queries/details.query.graphql';
@@ -28,6 +27,7 @@ import { toggleContainerClasses } from '~/lib/utils/dom_utils';
 import SystemNote from './system_notes/system_note.vue';
 import AlertSidebar from './alert_sidebar.vue';
 import AlertMetrics from './alert_metrics.vue';
+import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
 
 const containerEl = document.querySelector('.page-with-contextual-sidebar');
 
@@ -55,6 +55,7 @@ export default {
     },
   ],
   components: {
+    AlertDetailsTable,
     GlBadge,
     GlAlert,
     GlIcon,
@@ -63,7 +64,6 @@ export default {
     GlTab,
     GlTabs,
     GlButton,
-    GlTable,
     TimeAgoTooltip,
     AlertSidebar,
     SystemNote,
@@ -331,20 +331,7 @@ export default {
             </div>
             <div class="gl-pl-2" data-testid="runbook">{{ alert.runbook }}</div>
           </div>
-          <gl-table
-            class="alert-management-details-table"
-            :items="[{ 'Full Alert Payload': 'Value', ...alert }]"
-            :show-empty="true"
-            :busy="loading"
-            stacked
-          >
-            <template #empty>
-              {{ s__('AlertManagement|No alert data to display.') }}
-            </template>
-            <template #table-busy>
-              <gl-loading-icon size="lg" color="dark" class="mt-3" />
-            </template>
-          </gl-table>
+          <alert-details-table :alert="alert" :loading="loading" />
         </gl-tab>
         <gl-tab :data-testid="$options.tabsConfig[1].id" :title="$options.tabsConfig[1].title">
           <alert-metrics :dashboard-url="alert.metricsDashboardUrl" />

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

+<script>
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    GlTable,
+  },
+  props: {
+    alert: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  tableHeader: {
+    [s__('AlertManagement|Full Alert Payload')]: s__('AlertManagement|Value'),
+  },
+  computed: {
+    items() {
+      if (!this.alert) {
+        return [];
+      }
+      return [{ ...this.$options.tableHeader, ...this.alert }];
+    },
+  },
+};
+</script>
+<template>
+  <gl-table
+    class="alert-management-details-table"
+    :busy="loading"
+    :empty-text="s__('AlertManagement|No alert data to display.')"
+    :items="items"
+    show-empty
+    stacked
+  >
+    <template #table-busy>
+      <gl-loading-icon size="lg" color="dark" class="gl-mt-5" />
+    </template>
+  </gl-table>
+</template>

locale/gitlab.pot

@@ -2162,6 +2162,9 @@ msgstr ""
 msgid "AlertManagement|Events"
 msgstr ""
 
+msgid "AlertManagement|Full Alert Payload"
+msgstr ""
+
 msgid "AlertManagement|High"
 msgstr ""
 
@@ -2264,6 +2267,9 @@ msgstr ""
 msgid "AlertManagement|Unknown"
 msgstr ""
 
+msgid "AlertManagement|Value"
+msgstr ""
+
 msgid "AlertManagement|View alerts in Opsgenie"
 msgstr ""
 

spec/frontend/alert_management/components/alert_details_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
-import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
 import AlertDetails from '~/alert_management/components/alert_details.vue';
 import createIssueMutation from '~/alert_management/graphql/mutations/create_issue_from_alert.mutation.graphql';
 import { joinPaths } from '~/lib/utils/url_utility';
@@ -22,8 +23,6 @@ describe('AlertDetails', () => {
   const projectId = '1';
   const $router = { replace: jest.fn() };
 
-  const findDetailsTable = () => wrapper.find(GlTable);
-
   function mountComponent({ data, loading = false, mountMethod = shallowMount, stubs = {} } = {}) {
     wrapper = mountMethod(AlertDetails, {
       provide: {
@@ -66,6 +65,7 @@ describe('AlertDetails', () => {
   const findCreateIncidentBtn = () => wrapper.find('[data-testid="createIncidentBtn"]');
   const findViewIncidentBtn = () => wrapper.find('[data-testid="viewIncidentBtn"]');
   const findIncidentCreationAlert = () => wrapper.find('[data-testid="incidentCreationError"]');
+  const findDetailsTable = () => wrapper.find(AlertDetailsTable);
 
   describe('Alert details', () => {
     describe('when alert is null', () => {

spec/frontend/vue_shared/components/alert_detail_table_spec.js

+import { mount } from '@vue/test-utils';
+import { GlTable, GlLoadingIcon } from '@gitlab/ui';
+import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
+
+const mockAlert = {
+  iid: '1527542',
+  title: 'SyntaxError: Invalid or unexpected token',
+  severity: 'CRITICAL',
+  eventCount: 7,
+  createdAt: '2020-04-17T23:18:14.996Z',
+  startedAt: '2020-04-17T23:18:14.996Z',
+  endedAt: '2020-04-17T23:18:14.996Z',
+  status: 'TRIGGERED',
+  assignees: { nodes: [] },
+  notes: { nodes: [] },
+  todos: { nodes: [] },
+};
+
+describe('AlertDetails', () => {
+  let wrapper;
+
+  function mountComponent(propsData = {}) {
+    wrapper = mount(AlertDetailsTable, {
+      propsData: {
+        alert: mockAlert,
+        loading: false,
+        ...propsData,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findTableComponent = () => wrapper.find(GlTable);
+
+  describe('Alert details', () => {
+    describe('empty state', () => {
+      beforeEach(() => {
+        mountComponent({ alert: null });
+      });
+
+      it('shows an empty state when no alert is provided', () => {
+        expect(wrapper.text()).toContain('No alert data to display.');
+      });
+    });
+
+    describe('loading state', () => {
+      beforeEach(() => {
+        mountComponent({ loading: true });
+      });
+
+      it('displays a loading state when loading', () => {
+        expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      });
+    });
+
+    describe('with table data', () => {
+      beforeEach(() => {
+        mountComponent();
+      });
+
+      it('renders a table', () => {
+        expect(findTableComponent().exists()).toBe(true);
+      });
+
+      it('renders a cell based on alert data', () => {
+        expect(findTableComponent().text()).toContain('SyntaxError: Invalid or unexpected token');
+      });
+    });
+  });
+});