Replace dynamic QA selectors with generic hard-coded values

The existing QA selectors were in-place due to the process of migrating
the audit events from HAML templates to a generic Vue app. This removes
these selectors and replaces them with hard-coded generic values as the
dynamic values are no longer needed. We can use the generic values very
simply for all the QA testing requirements.

We can also remove the audit_log_filter QA selector as it isn't used

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

@@ -29,16 +29,6 @@ export default {
       type: Array,
       required: true,
     },
-    filterQaSelector: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    tableQaSelector: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
     exportUrl: {
       type: String,
       required: false,
@@ -73,7 +63,6 @@ export default {
         <div class="col-lg-auto flex-fill form-group align-items-lg-center pr-lg-8">
           <audit-events-filter
             :filter-token-options="filterTokenOptions"
-            :qa-selector="filterQaSelector"
             :value="filterValue"
             @selected="setFilterValue"
             @submit="searchForAuditEvents"
@@ -93,10 +82,6 @@ export default {
         </div>
       </div>
     </div>
-    <audit-events-table
-      :events="events"
-      :is-last-page="isLastPage"
-      :qa-selector="tableQaSelector"
-    />
+    <audit-events-table :events="events" :is-last-page="isLastPage" />
   </div>
 </template>

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

@@ -19,11 +19,6 @@ export default {
       default: () => AUDIT_FILTER_CONFIGS,
       validator: filterTokenOptionsValidator,
     },
-    qaSelector: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
   },
   data() {
     return {
@@ -63,11 +58,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="input-group bg-white flex-grow-1"
-    data-testid="audit-events-filter"
-    :data-qa-selector="qaSelector"
-  >
+  <div class="input-group bg-white flex-grow-1" data-testid="audit-events-filter">
     <gl-filtered-search
       :value="value"
       :placeholder="__('Search')"

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

@@ -27,11 +27,6 @@ export default {
       required: false,
       default: false,
     },
-    qaSelector: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
   },
   data() {
     return {
@@ -90,7 +85,7 @@ export default {
 </script>
 
 <template>
-  <div class="audit-log-table" data-testid="audit-events-table" :data-qa-selector="qaSelector">
+  <div class="audit-log-table" data-qa-selector="audit_log_table">
     <gl-table class="gl-mt-5" :fields="$options.fields" :items="events" show-empty stacked="md">
       <template #cell(author)="{ value: { url, name } }">
         <url-table-cell :url="url" :name="name" />

ee/app/assets/javascripts/audit_events/init_audit_events.js

@@ -7,14 +7,7 @@ import createStore from './store';
 
 export default selector => {
   const el = document.querySelector(selector);
-  const {
-    events,
-    isLastPage,
-    filterTokenOptions,
-    filterQaSelector,
-    tableQaSelector,
-    exportUrl,
-  } = el.dataset;
+  const { events, isLastPage, filterTokenOptions, exportUrl } = el.dataset;
 
   const store = createStore();
   store.dispatch('initializeAuditEvents');
@@ -30,8 +23,6 @@ export default selector => {
           filterTokenOptions: JSON.parse(filterTokenOptions).map(filterTokenOption =>
             convertObjectPropsToCamelCase(filterTokenOption),
           ),
-          filterQaSelector,
-          tableQaSelector,
           exportUrl,
         },
       }),

ee/app/views/admin/audit_logs/index.html.haml

@@ -3,7 +3,5 @@
 #js-audit-log-app{ data: { form_path: admin_audit_logs_path,
   events: @events.to_json,
   is_last_page: @is_last_page.to_json,
-  filter_qa_selector: 'admin_audit_log_filter',
-  table_qa_selector: 'admin_audit_log_table',
   filter_token_options: admin_audit_event_tokens.to_json,
   export_url: export_url } }

ee/app/views/groups/audit_events/index.html.haml

@@ -6,6 +6,4 @@
 #js-group-audit-events-app{ data: { form_path: group_audit_events_path(@group),
   events: @events.to_json,
   is_last_page: @is_last_page.to_json,
-  filter_qa_selector: 'group_audit_log_filter',
-  table_qa_selector: 'group_audit_log_table',
   filter_token_options: group_audit_event_tokens(@group.id).to_json } }

ee/app/views/projects/audit_events/index.html.haml

@@ -10,8 +10,6 @@
   #js-project-audit-events-app{ data: { form_path: project_audit_events_path(@project),
   events: @events.to_json,
   is_last_page: @is_last_page.to_json,
-  filter_qa_selector: 'project_audit_log_filter',
-  table_qa_selector: 'project_audit_log_table',
   filter_token_options: project_audit_event_tokens(@project.full_path).to_json } }
 
 - elsif show_promotions?

ee/spec/frontend/audit_events/components/__snapshots__/audit_events_app_spec.js.snap

@@ -23,7 +23,6 @@ exports[`AuditEventsApp when initialized matches the snapshot 1`] = `
       >
         <div
           class="input-group bg-white flex-grow-1"
-          data-qa-selector="filter_qa_selector"
           data-testid="audit-events-filter"
         >
           <gl-filtered-search-stub
@@ -59,7 +58,6 @@ exports[`AuditEventsApp when initialized matches the snapshot 1`] = `
   <audit-events-table-stub
     events="[object Object]"
     islastpage="true"
-    qaselector="table_qa_selector"
   />
 </div>
 `;

ee/spec/frontend/audit_events/components/audit_events_app_spec.js

@@ -20,8 +20,6 @@ describe('AuditEventsApp', () => {
 
   const events = [{ foo: 'bar' }];
   const filterTokenOptions = AVAILABLE_TOKEN_TYPES.map(type => ({ type }));
-  const filterQaSelector = 'filter_qa_selector';
-  const tableQaSelector = 'table_qa_selector';
   const exportUrl = 'http://example.com/audit_log_reports.csv';
 
   const initComponent = (props = {}) => {
@@ -29,8 +27,6 @@ describe('AuditEventsApp', () => {
       store,
       propsData: {
         isLastPage: true,
-        filterQaSelector,
-        tableQaSelector,
         filterTokenOptions,
         events,
         exportUrl,
@@ -70,7 +66,6 @@ describe('AuditEventsApp', () => {
     it('renders audit events table', () => {
       expect(wrapper.find(AuditEventsTable).props()).toEqual({
         events,
-        qaSelector: tableQaSelector,
         isLastPage: true,
       });
     });
@@ -78,7 +73,6 @@ describe('AuditEventsApp', () => {
     it('renders audit events filter', () => {
       expect(wrapper.find(AuditEventsFilter).props()).toEqual({
         filterTokenOptions,
-        qaSelector: filterQaSelector,
         value: TEST_FILTER_VALUE,
       });
     });

ee/spec/frontend/audit_events/components/audit_events_filter_spec.js

@@ -112,27 +112,4 @@ describe('AuditEventsFilter', () => {
       expect(getAvailableTokens()).toMatchObject([{ type }]);
     });
   });
-
-  describe('when setting the QA selector', () => {
-    beforeEach(() => {
-      initComponent();
-    });
-
-    it('should not set the QA selector if not provided', () => {
-      wrapper.vm.$nextTick(() => {
-        expect(
-          wrapper.find('[data-testid="audit-events-filter"]').attributes('data-qa-selector'),
-        ).toBeUndefined();
-      });
-    });
-
-    it('should set the QA selector if provided', () => {
-      wrapper.setProps({ qaSelector: 'qa_selector' });
-      wrapper.vm.$nextTick(() => {
-        expect(
-          wrapper.find('[data-testid="audit-events-filter"]').attributes('data-qa-selector'),
-        ).toEqual('qa_selector');
-      });
-    });
-  });
 });

ee/spec/frontend/audit_events/components/audit_events_table_spec.js

@@ -51,23 +51,6 @@ describe('AuditEventsTable component', () => {
         expect(getCell(0, 0).text()).toBe('There are no records to show');
       });
     });
-
-    it('should not set the QA selector if not provided', () => {
-      wrapper.vm.$nextTick(() => {
-        expect(
-          wrapper.find('[data-testid="audit-events-table"]').attributes('data-qa-selector'),
-        ).toBeUndefined();
-      });
-    });
-
-    it('should set the QA selector if provided', () => {
-      wrapper.setProps({ qaSelector: 'qa_selector' });
-      wrapper.vm.$nextTick(() => {
-        expect(
-          wrapper.find('[data-testid="audit-events-table"]').attributes('data-qa-selector'),
-        ).toEqual('qa_selector');
-      });
-    });
   });
 
   describe('Pagination behaviour', () => {

qa/qa/ee/page/admin/monitoring/audit_log.rb

@@ -6,8 +6,8 @@ module QA
       module Admin
         module Monitoring
           class AuditLog < QA::Page::Base
-            view 'ee/app/views/admin/audit_logs/index.html.haml' do
-              element :admin_audit_log_table
+            view 'ee/app/assets/javascripts/audit_events/components/audit_events_table.vue' do
+              element :audit_log_table
             end
 
             def has_audit_log_table_with_text?(text)
@@ -16,7 +16,7 @@ module QA
               # https://gitlab.com/gitlab-org/gitlab/issues/119203
               # TODO: https://gitlab.com/gitlab-org/gitlab/issues/195424
               wait_until(reload: true) do
-                has_element?(:admin_audit_log_table, text: text)
+                has_element?(:audit_log_table, text: text)
               end
             end
           end