Remove internal fields from alert details table

app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue

@@ -45,13 +45,6 @@ export default {
     loading() {
       return this.$apollo.queries.alert.loading;
     },
-    alertTableFields() {
-      if (this.alert) {
-        const { detailsUrl, __typename, ...restDetails } = this.alert;
-        return restDetails;
-      }
-      return null;
-    },
   },
 };
 </script>
@@ -64,7 +57,7 @@ export default {
         <description-component v-bind="$attrs" />
       </gl-tab>
       <gl-tab v-if="alert" class="alert-management-details" :title="s__('Incident|Alert details')">
-        <alert-details-table :alert="alertTableFields" :loading="loading" />
+        <alert-details-table :alert="alert" :loading="loading" />
       </gl-tab>
     </gl-tabs>
   </div>

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

@@ -9,6 +9,22 @@ import {
 
 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!';
+const allowedFields = [
+  'iid',
+  'title',
+  'severity',
+  'status',
+  'startedAt',
+  'eventCount',
+  'monitoringTool',
+  'service',
+  'description',
+  'endedAt',
+  'details',
+];
+
+const filterAllowedFields = ([fieldName]) => allowedFields.includes(fieldName);
+const arrayToObject = ([fieldName, value]) => ({ fieldName, value });
 
 export default {
   components: {
@@ -46,10 +62,9 @@ export default {
       if (!this.alert) {
         return [];
       }
-      return Object.entries(this.alert).map(([fieldName, value]) => ({
-        fieldName,
-        value,
-      }));
+      return Object.entries(this.alert)
+        .filter(filterAllowedFields)
+        .map(arrayToObject);
     },
   },
 };

changelogs/unreleased/tr-filter-internal-strings.yml

+---
+title: Remove internal fields from alert details table
+merge_request: 43076
+author:
+type: changed

spec/frontend/issue_show/components/incidents/incident_tabs_spec.js

@@ -79,7 +79,7 @@ describe('Incident Tabs component', () => {
     it('renders the alert details table with the correct props', () => {
       const alert = { iid: mockAlert.iid };
 
-      expect(findAlertDetailsComponent().props('alert')).toEqual(alert);
+      expect(findAlertDetailsComponent().props('alert')).toMatchObject(alert);
       expect(findAlertDetailsComponent().props('loading')).toBe(true);
     });
 

spec/frontend/vue_shared/components/alert_detail_table_spec.js

@@ -14,6 +14,7 @@ const mockAlert = {
   assignees: { nodes: [] },
   notes: { nodes: [] },
   todos: { nodes: [] },
+  __typename: 'AlertManagementAlert',
 };
 
 describe('AlertDetails', () => {
@@ -35,6 +36,8 @@ describe('AlertDetails', () => {
   });
 
   const findTableComponent = () => wrapper.find(GlTable);
+  const findTableKeys = () => findTableComponent().findAll('tbody td:first-child');
+  const findTableField = (fields, fieldName) => fields.filter(row => row.text() === fieldName);
 
   describe('Alert details', () => {
     describe('empty state', () => {
@@ -69,6 +72,24 @@ describe('AlertDetails', () => {
       it('renders a cell based on alert data', () => {
         expect(findTableComponent().text()).toContain('SyntaxError: Invalid or unexpected token');
       });
+
+      it('should show allowed alert fields', () => {
+        const fields = findTableKeys();
+
+        expect(findTableField(fields, 'Iid').exists()).toBe(true);
+        expect(findTableField(fields, 'Title').exists()).toBe(true);
+        expect(findTableField(fields, 'Severity').exists()).toBe(true);
+        expect(findTableField(fields, 'Status').exists()).toBe(true);
+      });
+
+      it('should not show disallowed alert fields', () => {
+        const fields = findTableKeys();
+
+        expect(findTableField(fields, 'Typename').exists()).toBe(false);
+        expect(findTableField(fields, 'Todos').exists()).toBe(false);
+        expect(findTableField(fields, 'Notes').exists()).toBe(false);
+        expect(findTableField(fields, 'Assignees').exists()).toBe(false);
+      });
     });
   });
 });