Skip to content
Snippets Groups Projects

Add simple dropdown component and change severity filter to use it

5 unresolved threads
4 files
+ 293
182
Compare changes
  • Side-by-side
  • Inline
Files
4
<script>
<script>
import { GlDropdown } from '@gitlab/ui';
import { xor } from 'lodash';
import { s__ } from '~/locale';
import { s__ } from '~/locale';
import { SEVERITY_LEVELS } from 'ee/security_dashboard/store/constants';
import { SEVERITY_LEVELS } from 'ee/security_dashboard/store/constants';
import DropdownButtonText from './dropdown_button_text.vue';
import SimpleDropdown from './simple_dropdown.vue';
import QuerystringSync from './querystring_sync.vue';
import FilterItem from './filter_item.vue';
import { ALL_ID } from './constants';
import { ALL_ID } from './constants';
// For backwards compatibility with existing bookmarks, the ID needs to be capitalized.
// For backwards compatibility with existing bookmarks, the ID needs to be capitalized.
export const DROPDOWN_OPTIONS = Object.entries(SEVERITY_LEVELS).map(([id, text]) => ({
const SEVERITY_OPTIONS = Object.entries(SEVERITY_LEVELS).map(([id, text]) => ({
id: id.toUpperCase(),
id: id.toUpperCase(),
text,
text,
}));
}));
const VALID_IDS = DROPDOWN_OPTIONS.map(({ id }) => id);
 
const DROPDOWN_OPTIONS = [
 
{ id: ALL_ID, text: s__('SecurityReports|All severities') },
 
...SEVERITY_OPTIONS,
 
];
export default {
export default {
components: { GlDropdown, DropdownButtonText, QuerystringSync, FilterItem },
components: { SimpleDropdown },
data: () => ({
data: () => ({
selected: [],
selected: [],
}),
}),
computed: {
selectedItemTexts() {
const options = DROPDOWN_OPTIONS.filter(({ id }) => this.selected.includes(id));
// Return the text for selected items, or all items if nothing is selected.
return options.length ? options.map(({ text }) => text) : [this.$options.i18n.allItemsText];
},
},
watch: {
watch: {
selected() {
selected() {
this.$emit('filter-changed', { severity: this.selected });
this.$emit('filter-changed', { severity: this.selected });
},
},
},
},
methods: {
deselectAll() {
this.selected = [];
},
toggleSelected(id) {
this.selected = xor(this.selected, [id]);
},
setSelected(ids) {
this.selected = ids.filter((id) => VALID_IDS.includes(id));
},
},
i18n: {
i18n: {
label: s__('SecurityReports|Severity'),
label: s__('SecurityReports|Severity'),
allItemsText: s__('SecurityReports|All severities'),
},
},
DROPDOWN_OPTIONS,
DROPDOWN_OPTIONS,
ALL_ID,
};
};
</script>
</script>
<template>
<template>
<div>
<simple-dropdown
    • Author Developer

      SeverityFilter has now been reduced down to just a SimpleDropdown. It passes down the dropdown options to render and will emit the filter-changed event when the selected IDs change, but everything else is handled by SimpleDropdown.

Please register or sign in to reply
<querystring-sync querystring-key="severity" :value="selected" @input="setSelected" />
:label="$options.i18n.label"
<label class="gl-mb-2">{{ $options.i18n.label }}</label>
:options="$options.DROPDOWN_OPTIONS"
<gl-dropdown :header-text="$options.i18n.label" block toggle-class="gl-mb-0">
:selected-ids.sync="selected"
<template #button-text>
querystring-key="severity"
<dropdown-button-text
/>
:items="selectedItemTexts"
data-qa-selector="filter_severity_dropdown"
/>
</template>
<filter-item
:is-checked="!selected.length"
:text="$options.i18n.allItemsText"
:data-testid="$options.ALL_ID"
@click="deselectAll"
/>
<filter-item
v-for="{ id, text } in $options.DROPDOWN_OPTIONS"
:key="id"
:data-testid="id"
:is-checked="selected.includes(id)"
:text="text"
@click="toggleSelected(id)"
/>
</gl-dropdown>
</div>
</template>
</template>
Loading