Merge branch 'jlouw-add-flags-to-audit-filter' into 'master'

Add search token configuration to AuditLogFilter

See merge request gitlab-org/gitlab!32537

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

 <script>
 import { GlFilteredSearch } from '@gitlab/ui';
-import { s__, __ } from '~/locale';
 import { queryToObject } from '~/lib/utils/url_utility';
-import UserToken from './tokens/user_token.vue';
-import ProjectToken from './tokens/project_token.vue';
-import GroupToken from './tokens/group_token.vue';
-
-const DEFAULT_TOKEN_OPTIONS = {
-  operators: [{ value: '=', description: __('is'), default: 'true' }],
-  unique: true,
-};
-const FILTER_TOKENS = [
-  {
-    ...DEFAULT_TOKEN_OPTIONS,
-    icon: 'user',
-    title: s__('AuditLogs|User Events'),
-    type: 'User',
-    token: UserToken,
-  },
-  {
-    ...DEFAULT_TOKEN_OPTIONS,
-    icon: 'bookmark',
-    title: s__('AuditLogs|Project Events'),
-    type: 'Project',
-    token: ProjectToken,
-  },
-  {
-    ...DEFAULT_TOKEN_OPTIONS,
-    icon: 'group',
-    title: s__('AuditLogs|Group Events'),
-    type: 'Group',
-    token: GroupToken,
-  },
-];
-const ALLOWED_FILTER_TYPES = FILTER_TOKENS.map(token => token.type);
+import { FILTER_TOKENS, AVAILABLE_TOKEN_TYPES } from '../constants';
 
 export default {
   components: {
     GlFilteredSearch,
   },
+  props: {
+    enabledTokenTypes: {
+      type: Array,
+      required: false,
+      default: () => AVAILABLE_TOKEN_TYPES,
+    },
+  },
   data() {
     return {
       searchTerms: [],
@@ -46,18 +21,21 @@ export default {
   },
   computed: {
     searchTerm() {
-      return this.searchTerms.find(term => ALLOWED_FILTER_TYPES.includes(term.type));
+      return this.searchTerms.find(term => AVAILABLE_TOKEN_TYPES.includes(term.type));
+    },
+    enabledTokens() {
+      return FILTER_TOKENS.filter(token => this.enabledTokenTypes.includes(token.type));
     },
     filterTokens() {
       // This limits the user to search by only one of the available tokens
-      const { searchTerm } = this;
+      const { enabledTokens, searchTerm } = this;
       if (searchTerm?.type) {
-        return FILTER_TOKENS.map(token => ({
+        return enabledTokens.map(token => ({
           ...token,
           disabled: searchTerm.type !== token.type,
         }));
       }
-      return FILTER_TOKENS;
+      return enabledTokens;
     },
     id() {
       return this.searchTerm?.value?.data;

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

+import { __, s__ } from '~/locale';
+import UserToken from './components/tokens/user_token.vue';
+import ProjectToken from './components/tokens/project_token.vue';
+import GroupToken from './components/tokens/group_token.vue';
+
+const DEFAULT_TOKEN_OPTIONS = {
+  operators: [{ value: '=', description: __('is'), default: 'true' }],
+  unique: true,
+};
+
+export const FILTER_TOKENS = [
+  {
+    ...DEFAULT_TOKEN_OPTIONS,
+    icon: 'user',
+    title: s__('AuditLogs|User Events'),
+    type: 'User',
+    token: UserToken,
+  },
+  {
+    ...DEFAULT_TOKEN_OPTIONS,
+    icon: 'bookmark',
+    title: s__('AuditLogs|Project Events'),
+    type: 'Project',
+    token: ProjectToken,
+  },
+  {
+    ...DEFAULT_TOKEN_OPTIONS,
+    icon: 'group',
+    title: s__('AuditLogs|Group Events'),
+    type: 'Group',
+    token: GroupToken,
+  },
+];
+
+export const AVAILABLE_TOKEN_TYPES = FILTER_TOKENS.map(token => token.type);

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

@@ -2,6 +2,7 @@ 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';
 
 describe('AuditLogFilter', () => {
   let wrapper;
@@ -13,8 +14,11 @@ describe('AuditLogFilter', () => {
   const getAvailableTokenProps = type =>
     getAvailableTokens().filter(token => token.type === type)[0];
 
-  const initComponent = () => {
+  const initComponent = (props = {}) => {
     wrapper = shallowMount(AuditLogFilter, {
+      propsData: {
+        ...props,
+      },
       methods: {
         getFormElement: () => formElement,
       },
@@ -112,4 +116,19 @@ describe('AuditLogFilter', () => {
       );
     });
   });
+
+  describe('when enabling just a single token type', () => {
+    const type = AVAILABLE_TOKEN_TYPES[0];
+
+    beforeEach(() => {
+      initComponent({
+        enabledTokenTypes: [type],
+      });
+    });
+
+    it('only the enabled token type is available for selection', () => {
+      expect(getAvailableTokens().length).toEqual(1);
+      expect(getAvailableTokens()).toMatchObject([{ type }]);
+    });
+  });
 });