Created new HTML table cell

- This contains the sanitiser and v-html code into one small part
- Undid some rspec changes
- Added tests for new cell
- Moved table cells to separate folder

ee/app/assets/javascripts/audit_events/components/audit_events_table.vue

 <script>
 import { GlPagination, GlTable } from '@gitlab/ui';
+
 import { s__ } from '~/locale';
 import { getParameterValues, setUrlParams } from '~/lib/utils/url_utility';
-import UrlTableCell from './url_table_cell.vue';
+
+import UrlTableCell from './table_cells/url_table_cell.vue';
+import HtmlTableCell from './table_cells/html_table_cell.vue';
 
 const TABLE_HEADER_CLASSES = 'bg-transparent border-bottom p-3';
 
 export default {
   components: {
+    HtmlTableCell,
     GlTable,
     GlPagination,
     UrlTableCell,
@@ -94,6 +98,9 @@ export default {
       <template #cell(object)="{ value: { url, name } }">
         <url-table-cell :url="url" :name="name" />
       </template>
+      <template #cell(action)="{ value }">
+        <html-table-cell :html="value" />
+      </template>
     </gl-table>
     <gl-pagination
       v-if="displayPagination"

ee/app/assets/javascripts/audit_events/components/table_cells/html_table_cell.vue

+<script>
+import sanitize from 'sanitize-html';
+
+const ALLOWED_TAGS = ['strong'];
+
+export default {
+  props: {
+    html: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    sanitisedHtml() {
+      return sanitize(this.html, { allowedTags: ALLOWED_TAGS });
+    },
+  },
+};
+</script>
+
+<template>
+  <span v-html="sanitisedHtml"></span>
+</template>

ee/spec/features/projects/feature_flags/user_creates_feature_flag_spec.rb

@@ -96,7 +96,7 @@ RSpec.describe 'User creates feature flag', :js do
       it 'records audit event' do
         visit(project_audit_events_path(project))
 
-        expect(page).to have_text("Created feature flag <strong>ci_live_trace</strong> with description <strong>\"For live trace\"</strong>.")
+        expect(page).to have_text("Created feature flag ci_live_trace with description \"For live trace\".")
       end
     end
 

ee/spec/features/projects/feature_flags/user_deletes_feature_flag_spec.rb

@@ -33,6 +33,6 @@ RSpec.describe 'User deletes feature flag', :js do
   it 'records audit event' do
     visit(project_audit_events_path(project))
 
-    expect(page).to have_text("Deleted feature flag <strong>ci_live_trace</strong>.")
+    expect(page).to have_text("Deleted feature flag ci_live_trace.")
   end
 end

ee/spec/features/projects/feature_flags/user_sees_feature_flag_list_spec.rb

@@ -80,7 +80,7 @@ RSpec.describe 'User sees feature flag list', :js do
       visit(project_audit_events_path(project))
 
       expect(page).to(
-        have_text('Updated feature flag <strong>ci_live_trace</strong>. Updated active from <strong>"false"</strong> to <strong>"true"</strong>.')
+        have_text('Updated feature flag ci_live_trace. Updated active from "false" to "true".')
       )
     end
   end

ee/spec/features/projects/feature_flags/user_updates_feature_flag_spec.rb

@@ -116,7 +116,7 @@ RSpec.describe 'User updates feature flag', :js do
         visit(project_audit_events_path(project))
 
         expect(page).to(
-          have_text("Updated feature flag <strong>ci_live_trace</strong>. Updated rule <strong>review/*</strong> active state from <strong>true</strong> to <strong>false</strong>.")
+          have_text("Updated feature flag ci_live_trace. Updated rule review/* active state from true to false.")
         )
       end
     end
@@ -147,7 +147,7 @@ RSpec.describe 'User updates feature flag', :js do
         visit(project_audit_events_path(project))
 
         expect(page).to(
-          have_text("Updated feature flag <strong>ci_live_trace</strong>")
+          have_text("Updated feature flag ci_live_trace")
         )
       end
     end
@@ -175,7 +175,7 @@ RSpec.describe 'User updates feature flag', :js do
         visit(project_audit_events_path(project))
 
         expect(page).to(
-          have_text("Updated feature flag <strong>ci_live_trace</strong>")
+          have_text("Updated feature flag ci_live_trace")
         )
       end
     end

ee/spec/frontend/audit_events/components/table_cells/html_table_cell_spec.js

+import { shallowMount } from '@vue/test-utils';
+
+import HtmlTableCell from 'ee/audit_events/components/table_cells/html_table_cell.vue';
+
+describe('HtmlTableCell component', () => {
+  it('should show <strong> tags if present in the HTML provided', () => {
+    const html = '<strong>Test HTML</strong>';
+    const wrapper = shallowMount(HtmlTableCell, {
+      propsData: { html },
+    });
+
+    expect(wrapper.html()).toBe(`<span>${html}</span>`);
+  });
+
+  it('should not include tags that are not in the allowed list but should keep the content', () => {
+    const html = '<a href="https://magic.url/">Link</a> <i>Test</i> <h1>HTML</h1>';
+    const wrapper = shallowMount(HtmlTableCell, {
+      propsData: { html },
+    });
+
+    expect(wrapper.html()).toBe('<span>Link Test HTML</span>');
+  });
+});

ee/spec/frontend/audit_events/components/url_table_cell_spec.js → ee/spec/frontend/audit_events/components/table_cells/url_table_cell_spec.js

 import { shallowMount } from '@vue/test-utils';
 
-import UrlTableCell from 'ee/audit_events/components/url_table_cell.vue';
+import UrlTableCell from 'ee/audit_events/components/table_cells/url_table_cell.vue';
 
 describe('UrlTableCell component', () => {
   it('should show the link if the URL is provided', () => {