Merge branch 'jlouw-create-audit-log-app' into 'master'

Move Admin Audit Events filter components into a single vue app

Closes #217755

See merge request gitlab-org/gitlab!32755

ee/app/assets/javascripts/audit_logs/components/audit_log_app.vue

+<script>
+import AuditLogFilter from './audit_log_filter.vue';
+import DateRangeField from './date_range_field.vue';
+import SortingField from './sorting_field.vue';
+import LogsTable from './logs_table.vue';
+
+export default {
+  components: {
+    AuditLogFilter,
+    DateRangeField,
+    SortingField,
+    LogsTable,
+  },
+  props: {
+    formPath: {
+      type: String,
+      required: true,
+    },
+    events: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isLastPage: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      formElement: null,
+    };
+  },
+  mounted() {
+    // Passing the form to child components is only temporary
+    // and should be changed when this issue is completed:
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/217759
+    this.formElement = this.$refs.form;
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="row-content-block second-block pb-0">
+      <form
+        ref="form"
+        method="GET"
+        :path="formPath"
+        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 />
+        </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 />
+          </div>
+        </div>
+      </form>
+    </div>
+    <LogsTable v-bind="{ events, isLastPage }" />
+  </div>
+</template>

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 AuditLogFilter from 'ee/audit_logs/components/audit_log_filter.vue';
-import DateRangeField from 'ee/audit_logs/components/date_range_field.vue';
-import SortingField from 'ee/audit_logs/components/sorting_field.vue';
-import LogsTable from 'ee/audit_logs/components/logs_table.vue';
-
-// Merge these when working on https://gitlab.com/gitlab-org/gitlab/-/issues/215363
-document.addEventListener('DOMContentLoaded', () => {
-  const el = document.querySelector('#js-audit-logs-filter-app');
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    name: 'AuditLogFilterApp',
-    render: createElement => createElement(AuditLogFilter),
-  });
-});
-document.addEventListener('DOMContentLoaded', () => {
-  const el = document.querySelector('#js-audit-logs-date-range-app');
-  const formElement = el.closest('form');
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    name: 'AuditLogsDateRangeApp',
-    render: createElement =>
-      createElement(DateRangeField, {
-        props: {
-          ...el.dataset,
-          formElement,
-        },
-      }),
-  });
-});
-document.addEventListener('DOMContentLoaded', () => {
-  const el = document.querySelector('#js-audit-logs-sorting-app');
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    name: 'AuditLogSortingApp',
-    render: createElement => createElement(SortingField),
-  });
-});
 document.addEventListener('DOMContentLoaded', () => {
-  const el = document.querySelector('#js-audit-logs-table-app');
+  const el = document.querySelector('#js-audit-log-app');
+  const { events, isLastPage, formPath } = el.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
     el,
-    name: 'AuditLogsTableApp',
+    name: 'AuditLogApp',
     render: createElement =>
-      createElement(LogsTable, {
+      createElement(AuditLogApp, {
         props: {
-          events: JSON.parse(el.dataset.events),
-          isLastPage: parseBoolean(el.dataset.isLastPage),
+          events: JSON.parse(events),
+          isLastPage: parseBoolean(isLastPage),
+          formPath,
         },
       }),
   });

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

 - page_title 'Audit Log'
 
-.todos-filters
-  .row-content-block.second-block.pb-0
-    = form_tag admin_audit_logs_path, method: :get, class: 'filter-form d-flex justify-content-between audit-controls row' do
-      .col-lg-auto.flex-fill.form-group.align-items-lg-center.pr-lg-8
-        #js-audit-logs-filter-app
-
-      .d-flex.col-lg-auto.flex-wrap.pl-lg-0
-        .audit-controls.d-flex.align-items-lg-center.flex-column.flex-lg-row.col-lg-auto.px-0
-          #js-audit-logs-date-range-app
-          #js-audit-logs-sorting-app
-
-- if @table_events.present?
-  #js-audit-logs-table-app{ data: { events: @table_events.to_json, is_last_page: @events.last_page?.to_json, qa_selector: 'admin_audit_log_table' } }
+#js-audit-log-app{ data: { form_path: admin_audit_logs_path, events: @table_events.to_json, is_last_page: @events.last_page?.to_json, qa_selector: 'admin_audit_log_table' } }

ee/spec/frontend/audit_logs/components/__snapshots__/audit_log_app_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AuditLogApp when initialized matches the snapshot 1`] = `
+<div
+  dataqaselector="qa_selector"
+>
+  <div
+    class="row-content-block second-block pb-0"
+  >
+    <form
+      class="filter-form d-flex justify-content-between audit-controls row"
+      method="GET"
+      path="form/path"
+    >
+      <div
+        class="col-lg-auto flex-fill form-group align-items-lg-center pr-lg-8"
+      >
+        <div
+          class="audit-log-filter"
+        />
+      </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-stub
+            formelement="[object HTMLFormElement]"
+          />
+           
+          <sortingfield-stub />
+        </div>
+      </div>
+    </form>
+  </div>
+   
+  <logstable-stub
+    events="[object Object]"
+    islastpage="true"
+  />
+</div>
+`;

ee/spec/frontend/audit_logs/components/audit_log_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';
+
+describe('AuditLogApp', () => {
+  let wrapper;
+
+  const events = [{ foo: 'bar' }];
+
+  const initComponent = (props = {}) => {
+    wrapper = shallowMount(AuditLogApp, {
+      propsData: {
+        formPath: 'form/path',
+        isLastPage: true,
+        dataQaSelector: 'qa_selector',
+        events,
+        ...props,
+      },
+      stubs: {
+        AuditLogFilter: {
+          template: `<div class="audit-log-filter"></div>`,
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when initialized', () => {
+    beforeEach(() => {
+      initComponent();
+    });
+
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('sets the form element on the date range field', () => {
+      const { element } = wrapper.find('form');
+      expect(wrapper.find(DateRangeField).props('formElement')).toEqual(element);
+    });
+
+    it('passes its events property to the logs table', () => {
+      expect(wrapper.find(LogsTable).props('events')).toEqual(events);
+    });
+  });
+});