Merge branch '217779-move-audit-log-into-shared-template' into 'master'

Move audit log app to shared audit events dir

Closes #217779

See merge request gitlab-org/gitlab!33257

ee/app/assets/javascripts/audit_logs/components/audit_log_app.vue → ee/app/assets/javascripts/audit_events/components/audit_events_app.vue

 <script>
-import AuditLogFilter from './audit_log_filter.vue';
+import AuditEventsFilter from './audit_events_filter.vue';
 import DateRangeField from './date_range_field.vue';
 import SortingField from './sorting_field.vue';
-import LogsTable from './logs_table.vue';
+import AuditEventsTable from './audit_events_table.vue';
 
 export default {
   components: {
-    AuditLogFilter,
+    AuditEventsFilter,
     DateRangeField,
     SortingField,
-    LogsTable,
+    AuditEventsTable,
   },
   props: {
     formPath: {
@@ -55,18 +55,18 @@ export default {
         class="filter-form d-flex justify-content-between audit-controls row"
       >
         <div class="col-lg-auto flex-fill form-group align-items-lg-center pr-lg-8">
-          <AuditLogFilter v-bind="{ enabledTokenTypes }" />
+          <audit-events-filter v-bind="{ enabledTokenTypes }" />
         </div>
         <div class="d-flex col-lg-auto flex-wrap pl-lg-0">
           <div
             class="audit-controls d-flex align-items-lg-center flex-column flex-lg-row col-lg-auto px-0"
           >
-            <DateRangeField v-if="formElement" :form-element="formElement" />
-            <SortingField />
+            <date-range-field v-if="formElement" :form-element="formElement" />
+            <sorting-field />
           </div>
         </div>
       </form>
     </div>
-    <LogsTable v-bind="{ events, isLastPage }" />
+    <audit-events-table v-bind="{ events, isLastPage }" />
   </div>
 </template>

ee/app/assets/javascripts/audit_logs/components/logs_table.vue → ee/app/assets/javascripts/audit_events/components/audit_events_table.vue

@@ -7,7 +7,6 @@ import UrlTableCell from './url_table_cell.vue';
 const TABLE_HEADER_CLASSES = 'bg-transparent border-bottom p-3';
 
 export default {
-  name: 'LogsTable',
   components: {
     GlTable,
     GlPagination,

ee/app/assets/javascripts/audit_logs/components/date_range_field.vue → ee/app/assets/javascripts/audit_events/components/date_range_field.vue

@@ -5,7 +5,6 @@ import { parsePikadayDate, pikadayToString } from '~/lib/utils/datetime_utility'
 import { queryToObject } from '~/lib/utils/url_utility';
 
 export default {
-  name: 'DateRangeField',
   components: {
     GlDaterangePicker,
   },

ee/app/assets/javascripts/audit_logs/components/sorting_field.vue → ee/app/assets/javascripts/audit_events/components/sorting_field.vue

@@ -17,7 +17,6 @@ const SORTING_OPTIONS = [
 ];
 
 export default {
-  name: 'SortingField',
   components: {
     GlNewDropdown,
     GlNewDropdownHeader,

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

+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import AuditEventsApp from './components/audit_events_app.vue';
+
+export default selector => {
+  const el = document.querySelector(selector);
+  const { events, isLastPage, formPath, enabledTokenTypes } = el.dataset;
+
+  return new Vue({
+    el,
+    render: createElement =>
+      createElement(AuditEventsApp, {
+        props: {
+          events: JSON.parse(events),
+          isLastPage: parseBoolean(isLastPage),
+          enabledTokenTypes: JSON.parse(enabledTokenTypes),
+          formPath,
+        },
+      }),
+  });
+};

ee/app/assets/javascripts/pages/admin/audit_logs/index.js

-import Vue from 'vue';
-import { parseBoolean } from '~/lib/utils/common_utils';
-import AuditLogApp from 'ee/audit_logs/components/audit_log_app.vue';
+import initAuditEvents from 'ee/audit_events/init_audit_events';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const el = document.querySelector('#js-audit-log-app');
-  const { events, isLastPage, formPath, enabledTokenTypes } = el.dataset;
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    name: 'AuditLogApp',
-    render: createElement =>
-      createElement(AuditLogApp, {
-        props: {
-          events: JSON.parse(events),
-          isLastPage: parseBoolean(isLastPage),
-          enabledTokenTypes: JSON.parse(enabledTokenTypes),
-          formPath,
-        },
-      }),
-  });
-});
+initAuditEvents('#js-audit-log-app');

ee/spec/frontend/audit_logs/components/__snapshots__/audit_log_app_spec.js.snap → ee/spec/frontend/audit_events/components/__snapshots__/audit_events_app_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AuditLogApp when initialized matches the snapshot 1`] = `
+exports[`AuditEventsApp when initialized matches the snapshot 1`] = `
 <div
   dataqaselector="qa_selector"
 >
@@ -46,17 +46,17 @@ exports[`AuditLogApp when initialized matches the snapshot 1`] = `
         <div
           class="audit-controls d-flex align-items-lg-center flex-column flex-lg-row col-lg-auto px-0"
         >
-          <daterangefield-stub
+          <date-range-field-stub
             formelement="[object HTMLFormElement]"
           />
            
-          <sortingfield-stub />
+          <sorting-field-stub />
         </div>
       </div>
     </form>
   </div>
    
-  <logstable-stub
+  <audit-events-table-stub
     events="[object Object]"
     islastpage="true"
   />

ee/spec/frontend/audit_logs/components/audit_log_app_spec.js → ee/spec/frontend/audit_events/components/audit_events_app_spec.js

 import { shallowMount } from '@vue/test-utils';
 
-import AuditLogApp from 'ee/audit_logs/components/audit_log_app.vue';
-import DateRangeField from 'ee/audit_logs/components/date_range_field.vue';
-import LogsTable from 'ee/audit_logs/components/logs_table.vue';
-import AuditLogFilter from 'ee/audit_logs/components/audit_log_filter.vue';
-import { AVAILABLE_TOKEN_TYPES } from 'ee/audit_logs/constants';
+import AuditEventsApp from 'ee/audit_events/components/audit_events_app.vue';
+import DateRangeField from 'ee/audit_events/components/date_range_field.vue';
+import AuditEventsTable from 'ee/audit_events/components/audit_events_table.vue';
+import AuditEventsFilter from 'ee/audit_events/components/audit_events_filter.vue';
+import { AVAILABLE_TOKEN_TYPES } from 'ee/audit_events/constants';
 
-describe('AuditLogApp', () => {
+describe('AuditEventsApp', () => {
   let wrapper;
 
   const events = [{ foo: 'bar' }];
   const enabledTokenTypes = AVAILABLE_TOKEN_TYPES;
 
   const initComponent = (props = {}) => {
-    wrapper = shallowMount(AuditLogApp, {
+    wrapper = shallowMount(AuditEventsApp, {
       propsData: {
         formPath: 'form/path',
         isLastPage: true,
@@ -23,7 +23,7 @@ describe('AuditLogApp', () => {
         ...props,
       },
       stubs: {
-        AuditLogFilter,
+        AuditEventsFilter,
       },
     });
   };
@@ -48,11 +48,11 @@ describe('AuditLogApp', () => {
     });
 
     it('passes its events property to the logs table', () => {
-      expect(wrapper.find(LogsTable).props('events')).toEqual(events);
+      expect(wrapper.find(AuditEventsTable).props('events')).toEqual(events);
     });
 
     it('passes its avilable token types to the logs filter', () => {
-      expect(wrapper.find(AuditLogFilter).props('enabledTokenTypes')).toEqual(enabledTokenTypes);
+      expect(wrapper.find(AuditEventsFilter).props('enabledTokenTypes')).toEqual(enabledTokenTypes);
     });
   });
 });

ee/spec/frontend/audit_logs/components/audit_log_filter_spec.js → ee/spec/frontend/audit_events/components/audit_events_filter_spec.js

 import { GlFilteredSearch } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
-import AuditLogFilter from 'ee/audit_logs/components/audit_log_filter.vue';
-import { AVAILABLE_TOKEN_TYPES } from 'ee/audit_logs/constants';
+import AuditEventsFilter from 'ee/audit_events/components/audit_events_filter.vue';
+import { AVAILABLE_TOKEN_TYPES } from 'ee/audit_events/constants';
 
-describe('AuditLogFilter', () => {
+describe('AuditEventsFilter', () => {
   let wrapper;
   const formElement = document.createElement('form');
   formElement.submit = jest.fn();
@@ -15,7 +15,7 @@ describe('AuditLogFilter', () => {
     getAvailableTokens().filter(token => token.type === type)[0];
 
   const initComponent = (props = {}) => {
-    wrapper = shallowMount(AuditLogFilter, {
+    wrapper = shallowMount(AuditEventsFilter, {
       propsData: {
         ...props,
       },

ee/spec/frontend/audit_logs/components/logs_table_spec.js → ee/spec/frontend/audit_events/components/audit_events_table_spec.js

 import { mount } from '@vue/test-utils';
 import { GlPagination, GlTable } from '@gitlab/ui';
 
-import LogsTable from 'ee/audit_logs/components/logs_table.vue';
+import AuditEventsTable from 'ee/audit_events/components/audit_events_table.vue';
 import createEvents from '../mock_data';
 
 const EVENTS = createEvents();
 
-describe('LogsTable component', () => {
+describe('AuditEventsTable component', () => {
   let wrapper;
 
   const createComponent = (props = {}) => {
-    return mount(LogsTable, {
+    return mount(AuditEventsTable, {
       propsData: {
         events: EVENTS,
         isLastPage: false,

ee/spec/frontend/audit_logs/components/date_range_field_spec.js → ee/spec/frontend/audit_events/components/date_range_field_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlDaterangePicker } from '@gitlab/ui';
 
-import DateRangeField from 'ee/audit_logs/components/date_range_field.vue';
+import DateRangeField from 'ee/audit_events/components/date_range_field.vue';
 import { parsePikadayDate } from '~/lib/utils/datetime_utility';
 
 describe('DateRangeField component', () => {

ee/spec/frontend/audit_logs/components/sorting_field_spec.js → ee/spec/frontend/audit_events/components/sorting_field_spec.js

@@ -3,7 +3,7 @@ import { GlNewDropdownItem } from '@gitlab/ui';
 
 import * as urlUtils from '~/lib/utils/url_utility';
 
-import SortingField from 'ee/audit_logs/components/sorting_field.vue';
+import SortingField from 'ee/audit_events/components/sorting_field.vue';
 
 describe('SortingField component', () => {
   let wrapper;

ee/spec/frontend/audit_logs/components/tokens/audit_filter_token_spec.js → ee/spec/frontend/audit_events/components/tokens/audit_filter_token_spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 import createFlash from '~/flash';
 
-import AuditFilterToken from 'ee/audit_logs/components/tokens/shared/audit_filter_token.vue';
+import AuditFilterToken from 'ee/audit_events/components/tokens/shared/audit_filter_token.vue';
 
 jest.mock('~/flash');
 

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

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

ee/spec/frontend/audit_logs/validators_spec.js → ee/spec/frontend/audit_events/validators_spec.js

 import { sample } from 'lodash';
-import { AVAILABLE_TOKEN_TYPES } from 'ee/audit_logs/constants';
-import { availableTokensValidator } from 'ee/audit_logs/validators';
+import { AVAILABLE_TOKEN_TYPES } from 'ee/audit_events/constants';
+import { availableTokensValidator } from 'ee/audit_events/validators';
 
 describe('availableTokensValidator', () => {
   it('returns true when the input contains an available token type', () => {