Add search token configuration to AuditLogApp

This adds the ability for the consumer of AuditLogApp
to configure which tokens should be available for the
user to choose from.

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

@@ -26,6 +26,10 @@ export default {
       required: false,
       default: false,
     },
+    enabledTokenTypes: {
+      type: Array,
+      required: true,
+    },
   },
   data() {
     return {
@@ -51,7 +55,7 @@ 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 />
+          <AuditLogFilter v-bind="{ enabledTokenTypes }" />
         </div>
         <div class="d-flex col-lg-auto flex-wrap pl-lg-0">
           <div

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

@@ -2,6 +2,7 @@
 import { GlFilteredSearch } from '@gitlab/ui';
 import { queryToObject } from '~/lib/utils/url_utility';
 import { FILTER_TOKENS, AVAILABLE_TOKEN_TYPES } from '../constants';
+import { availableTokensValidator } from '../validators';
 
 export default {
   components: {
@@ -12,6 +13,7 @@ export default {
       type: Array,
       required: false,
       default: () => AVAILABLE_TOKEN_TYPES,
+      validator: availableTokensValidator,
     },
   },
   data() {

ee/app/assets/javascripts/audit_logs/validators.js

+import { AVAILABLE_TOKEN_TYPES } from './constants';
+
+export function availableTokensValidator(value) {
+  return value.every(type => AVAILABLE_TOKEN_TYPES.includes(type));
+}
+
+export default {};

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

@@ -4,7 +4,7 @@ import AuditLogApp from 'ee/audit_logs/components/audit_log_app.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   const el = document.querySelector('#js-audit-log-app');
-  const { events, isLastPage, formPath } = el.dataset;
+  const { events, isLastPage, formPath, enabledTokenTypes } = el.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -15,6 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
         props: {
           events: JSON.parse(events),
           isLastPage: parseBoolean(isLastPage),
+          enabledTokenTypes: JSON.parse(enabledTokenTypes),
           formPath,
         },
       }),

ee/app/helpers/audit_logs_helper.rb

 # frozen_string_literal: true
 
 module AuditLogsHelper
-  def audit_entity_type_options
-    [
-      { id: 'All', text: 'All Events' },
-      { id: 'Group', text: 'Group Events' },
-      { id: 'Project', text: 'Project Events' },
-      { id: 'User', text: 'User Events' }
-    ]
-  end
-
-  def audit_entity_type_label(selected)
-    selected = 'All' unless selected.present?
-
-    audit_entity_type_options.find { |type| type[:id] == selected }[:text]
+  def admin_audit_log_token_types
+    %w[User Group Project].freeze
   end
 end

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

 - page_title 'Audit Log'
 
-#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' } }
+#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',
+  enabled_token_types: admin_audit_log_token_types } }

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

@@ -16,8 +16,28 @@ exports[`AuditLogApp when initialized matches the snapshot 1`] = `
         class="col-lg-auto flex-fill form-group align-items-lg-center pr-lg-8"
       >
         <div
-          class="audit-log-filter"
-        />
+          class="input-group bg-white flex-grow-1"
+          data-qa-selector="admin_audit_log_filter"
+        >
+          <gl-filtered-search-stub
+            availabletokens="[object Object],[object Object],[object Object]"
+            class="gl-h-32 w-100"
+            clearbuttontitle="Clear"
+            close-button-title="Close"
+            placeholder="Search"
+            value=""
+          />
+           
+          <input
+            name="entity_type"
+            type="hidden"
+          />
+           
+          <input
+            name="entity_id"
+            type="hidden"
+          />
+        </div>
       </div>
        
       <div

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

@@ -3,11 +3,14 @@ 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';
 
 describe('AuditLogApp', () => {
   let wrapper;
 
   const events = [{ foo: 'bar' }];
+  const enabledTokenTypes = AVAILABLE_TOKEN_TYPES;
 
   const initComponent = (props = {}) => {
     wrapper = shallowMount(AuditLogApp, {
@@ -15,13 +18,12 @@ describe('AuditLogApp', () => {
         formPath: 'form/path',
         isLastPage: true,
         dataQaSelector: 'qa_selector',
+        enabledTokenTypes,
         events,
         ...props,
       },
       stubs: {
-        AuditLogFilter: {
-          template: `<div class="audit-log-filter"></div>`,
-        },
+        AuditLogFilter,
       },
     });
   };
@@ -48,5 +50,9 @@ describe('AuditLogApp', () => {
     it('passes its events property to the logs table', () => {
       expect(wrapper.find(LogsTable).props('events')).toEqual(events);
     });
+
+    it('passes its avilable token types to the logs filter', () => {
+      expect(wrapper.find(AuditLogFilter).props('enabledTokenTypes')).toEqual(enabledTokenTypes);
+    });
   });
 });

ee/spec/frontend/audit_logs/validators_spec.js

+import { sample } from 'lodash';
+import { AVAILABLE_TOKEN_TYPES } from 'ee/audit_logs/constants';
+import { availableTokensValidator } from 'ee/audit_logs/validators';
+
+describe('availableTokensValidator', () => {
+  it('returns true when the input contains an available token type', () => {
+    const input = [sample(AVAILABLE_TOKEN_TYPES)];
+    expect(availableTokensValidator(input)).toEqual(true);
+  });
+  it('returns false when the input contains an unavailable token type', () => {
+    const input = ['InvalidType'];
+    expect(availableTokensValidator(input)).toEqual(false);
+  });
+});

ee/spec/helpers/audit_logs_helper_spec.rb

@@ -5,17 +5,10 @@ require 'spec_helper'
 describe AuditLogsHelper do
   using RSpec::Parameterized::TableSyntax
 
-  describe '#audit_entity_type_label' do
-    where(:label, :result) do
-      nil       | 'All Events'
-      'All'     | 'All Events'
-      'User'    | 'User Events'
-      'Group'   | 'Group Events'
-      'Project' | 'Project Events'
-    end
-
-    with_them do
-      it { expect(audit_entity_type_label(label)).to eq(result) }
+  describe '#admin_audit_log_token_types' do
+    it 'returns the available tokens' do
+      available_tokens = %w[User Group Project]
+      expect(admin_audit_log_token_types).to eq(available_tokens)
     end
   end
 end