Merge branch...

Merge branch '222268-follow-up-remove-dynamic-qa-selectors-from-audit-logs-template-and-make-them-generic' into 'master'

Remove QA selector props from audit logs and make them generic

See merge request gitlab-org/gitlab!42822

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