Commit 206258c6 authored by Alexander Turinske's avatar Alexander Turinske

Clean up policy name filter

- abstract out constants
- clean up test
- convert class to gl-
parent 0eeab345
<script> <script>
import { GlFormCheckbox, GlFormGroup, GlSearchBoxByType } from '@gitlab/ui'; import { GlFormCheckbox, GlFormGroup, GlSearchBoxByType } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { DEFAULT_FILTERS } from './constants'; import { DEBOUNCE, DEFAULT_FILTERS } from './constants';
export default { export default {
DEBOUNCE,
DEFAULT_DISMISSED_FILTER: true, DEFAULT_DISMISSED_FILTER: true,
components: { GlFormCheckbox, GlFormGroup, GlSearchBoxByType }, components: { GlFormCheckbox, GlFormGroup, GlSearchBoxByType },
props: { props: {
...@@ -46,7 +47,7 @@ export default { ...@@ -46,7 +47,7 @@ export default {
<div> <div>
<h5 class="gl-mt-0">{{ $options.i18n.POLICY_NAME_FILTER_TITLE }}</h5> <h5 class="gl-mt-0">{{ $options.i18n.POLICY_NAME_FILTER_TITLE }}</h5>
<gl-search-box-by-type <gl-search-box-by-type
debounce="250" :debounce="$options.DEBOUNCE"
:placeholder="$options.i18n.POLICY_NAME_FILTER_PLACEHOLDER" :placeholder="$options.i18n.POLICY_NAME_FILTER_PLACEHOLDER"
@input="handleSearch" @input="handleSearch"
/> />
......
...@@ -56,3 +56,5 @@ export const PAGE_SIZE = 20; ...@@ -56,3 +56,5 @@ export const PAGE_SIZE = 20;
export const DEFAULT_FILTERS = { statuses: ['TRIGGERED', 'ACKNOWLEDGED'] }; export const DEFAULT_FILTERS = { statuses: ['TRIGGERED', 'ACKNOWLEDGED'] };
export const DOMAIN = 'threat_monitoring'; export const DOMAIN = 'threat_monitoring';
export const DEBOUNCE = 250;
...@@ -187,7 +187,7 @@ export default { ...@@ -187,7 +187,7 @@ export default {
> >
<gl-sprintf :message="$options.autodevopsNoticeDescription"> <gl-sprintf :message="$options.autodevopsNoticeDescription">
<template #monospaced="{ content }"> <template #monospaced="{ content }">
<span class="monospace">{{ content }}</span> <span class="gl-font-monospace">{{ content }}</span>
</template> </template>
<template #link="{ content }"> <template #link="{ content }">
<gl-link :href="documentationFullPath">{{ content }}</gl-link> <gl-link :href="documentationFullPath">{{ content }}</gl-link>
......
...@@ -31,12 +31,12 @@ describe('AlertFilters component', () => { ...@@ -31,12 +31,12 @@ describe('AlertFilters component', () => {
}); });
it('does emit an event with a user-defined string', async () => { it('does emit an event with a user-defined string', async () => {
const term = 'abc'; const searchTerm = 'abc';
const search = findGlSearch(); const search = findGlSearch();
search.vm.$emit('input', term); search.vm.$emit('input', searchTerm);
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
expect(wrapper.emitted('filter-change')).toStrictEqual([ expect(wrapper.emitted('filter-change')).toStrictEqual([
[{ ...DEFAULT_FILTERS, searchTerm: 'abc' }], [{ ...DEFAULT_FILTERS, searchTerm }],
]); ]);
}); });
}); });
......
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