Make audit events table responsive

Refactor audit events table to gl-responsive-table
This allows to utilize existing breakpoints in project

changelogs/unreleased/xanf-make-audit-table-responsive.yml

+---
+title: Added responsiveness to audit events table
+merge_request: 18859
+author:
+type: added

ee/app/views/shared/audit_events/_event_table.html.haml

 - if defined?(events)
-  %table.table#audits
-    %thead
-      %tr
-        %th Author
-        %th Action
-        %th Target
-        %th At
-
-    %tbody
-      - events.each do |event|
-        %tr
-          %td
+  .audit-table#audits
+    .gl-responsive-table-row.table-row-header{ role: 'row' }
+      .table-section.section-15{ role: 'rowheader' }
+        = _('Author')
+      .table-section.section-50{ role: 'rowheader' }
+        = s_('AuditEvents|Action')
+      .table-section.section-15{ role: 'rowheader' }
+        = s_('AuditEvents|Target')
+      .table-section.section-20{ role: 'rowheader' }
+        = s_('AuditEvents|At')
+    - events.each do |event|
+      .gl-responsive-table-row
+        .table-section.section-15
+          .table-mobile-header{ role: 'rowheader' }
+            = _('Author')
+          .table-mobile-content
             - if event.author_name
-              #{event.author_name}
+              = event.author_name
             - else
-              (removed)
-          %td
-            %span= sanitize(human_text(event.details), tags: %w(strong))
-          %td= event.details[:target_details]
-          %td= event.created_at
+              = s_('AuditEvents|(removed)')
+        .table-section.section-50.flex-truncate-parent.audit-action.js-audit-action
+          %span= sanitize(human_text(event.details), tags: %w(strong))
+        .table-section.section-15.flex-truncate-parent
+          = event.details[:target_details]
+        .table-section.section-20
+          = event.created_at
+
   = paginate events, theme: "gitlab"

ee/spec/features/groups/audit_events_spec.rb

@@ -54,7 +54,7 @@ describe 'Groups > Audit Events', :js do
 
       click_link 'Audit Events'
 
-      page.within('table#audits') do
+      page.within('#audits') do
         expect(page).to have_content 'Change access level from developer to maintainer'
         expect(page).to have_content(user.name)
         expect(page).to have_content('Pete')

ee/spec/features/projects/audit_events_spec.rb

@@ -109,7 +109,7 @@ describe 'Projects > Audit Events', :js do
 
       click_link 'Audit Events'
 
-      page.within('table#audits') do
+      page.within('#audits') do
         expect(page).to have_content 'Change access level from developer to maintainer'
         expect(page).to have_content(project.owner.name)
         expect(page).to have_content('Pete')

ee/spec/support/shared_examples/features/audit_event_contains_custom_message.rb

@@ -28,7 +28,7 @@ shared_examples 'audit event contains custom message' do
     let(:custom_message) { 'Message <strong>with</strong> <i>deleted</i> tags' }
 
     it 'allows only <strong> tag' do
-      message_row = find('td', text: 'Message with deleted tags')
+      message_row = find('.js-audit-action', text: 'Message with deleted tags')
 
       expect(message_row).to have_selector('strong')
       expect(message_row).to have_no_selector('i')

locale/gitlab.pot

@@ -2179,6 +2179,18 @@ msgstr ""
 msgid "Audit Events is a way to keep track of important events that happened in GitLab."
 msgstr ""
 
+msgid "AuditEvents|(removed)"
+msgstr ""
+
+msgid "AuditEvents|Action"
+msgstr ""
+
+msgid "AuditEvents|At"
+msgstr ""
+
+msgid "AuditEvents|Target"
+msgstr ""
+
 msgid "Aug"
 msgstr ""