Commit cc9b8a53 authored by Jiaan Louw's avatar Jiaan Louw Committed by Phil Hughes

Add search token configuration to AuditLogFilter

parent d91a8d0e
<script> <script>
import { GlFilteredSearch } from '@gitlab/ui'; import { GlFilteredSearch } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import { queryToObject } from '~/lib/utils/url_utility'; import { queryToObject } from '~/lib/utils/url_utility';
import UserToken from './tokens/user_token.vue'; import { FILTER_TOKENS, AVAILABLE_TOKEN_TYPES } from '../constants';
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);
export default { export default {
components: { components: {
GlFilteredSearch, GlFilteredSearch,
}, },
props: {
enabledTokenTypes: {
type: Array,
required: false,
default: () => AVAILABLE_TOKEN_TYPES,
},
},
data() { data() {
return { return {
searchTerms: [], searchTerms: [],
...@@ -46,18 +21,21 @@ export default { ...@@ -46,18 +21,21 @@ export default {
}, },
computed: { computed: {
searchTerm() { 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() { filterTokens() {
// This limits the user to search by only one of the available tokens // This limits the user to search by only one of the available tokens
const { searchTerm } = this; const { enabledTokens, searchTerm } = this;
if (searchTerm?.type) { if (searchTerm?.type) {
return FILTER_TOKENS.map(token => ({ return enabledTokens.map(token => ({
...token, ...token,
disabled: searchTerm.type !== token.type, disabled: searchTerm.type !== token.type,
})); }));
} }
return FILTER_TOKENS; return enabledTokens;
}, },
id() { id() {
return this.searchTerm?.value?.data; return this.searchTerm?.value?.data;
......
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);
...@@ -2,6 +2,7 @@ import { GlFilteredSearch } from '@gitlab/ui'; ...@@ -2,6 +2,7 @@ import { GlFilteredSearch } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import AuditLogFilter from 'ee/audit_logs/components/audit_log_filter.vue'; import AuditLogFilter from 'ee/audit_logs/components/audit_log_filter.vue';
import { AVAILABLE_TOKEN_TYPES } from 'ee/audit_logs/constants';
describe('AuditLogFilter', () => { describe('AuditLogFilter', () => {
let wrapper; let wrapper;
...@@ -13,8 +14,11 @@ describe('AuditLogFilter', () => { ...@@ -13,8 +14,11 @@ describe('AuditLogFilter', () => {
const getAvailableTokenProps = type => const getAvailableTokenProps = type =>
getAvailableTokens().filter(token => token.type === type)[0]; getAvailableTokens().filter(token => token.type === type)[0];
const initComponent = () => { const initComponent = (props = {}) => {
wrapper = shallowMount(AuditLogFilter, { wrapper = shallowMount(AuditLogFilter, {
propsData: {
...props,
},
methods: { methods: {
getFormElement: () => formElement, getFormElement: () => formElement,
}, },
...@@ -112,4 +116,19 @@ describe('AuditLogFilter', () => { ...@@ -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 }]);
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment