Skip to content
Snippets Groups Projects

Change admin users search filter

10 files
+ 133
185
Compare changes
  • Side-by-side
  • Inline
Files
10
<script>
import { GlFilteredSearch, GlFilteredSearchToken } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import { setUrlParams, visitUrl, getParameterValues } from '~/lib/utils/url_utility';
import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
import {
ALL_FILTER_TYPES,
FILTER_TYPE_ADMINS,
FILTER_TYPE_ENABLED_2FA,
FILTER_TYPE_DISABLED_2FA,
FILTER_TYPE_EXTERNAL,
FILTER_TYPE_BLOCKED,
FILTER_TYPE_BANNED,
FILTER_TYPE_BLOCKED_PENDING_APPROVAL,
FILTER_TYPE_DEACTIVATED,
FILTER_TYPE_WOP,
FILTER_TYPE_TRUSTED,
TOKEN_ACCESS_LEVEL,
TOKEN_STATE,
TOKEN_2FA,
} from './filter_types';
const availableTokens = [
{
title: s__('AdminUsers|Access level'),
type: TOKEN_ACCESS_LEVEL,
token: GlFilteredSearchToken,
operators: OPERATORS_IS,
unique: true,
options: [
{ value: FILTER_TYPE_ADMINS, title: s__('AdminUsers|Administrator') },
{ value: FILTER_TYPE_EXTERNAL, title: s__('AdminUsers|External') },
],
},
{
title: __('State'),
type: TOKEN_STATE,
token: GlFilteredSearchToken,
operators: OPERATORS_IS,
unique: true,
options: [
{ value: FILTER_TYPE_BANNED, title: s__('AdminUsers|Banned') },
{ value: FILTER_TYPE_BLOCKED, title: s__('AdminUsers|Blocked') },
{ value: FILTER_TYPE_DEACTIVATED, title: s__('AdminUsers|Deactivated') },
{
value: FILTER_TYPE_BLOCKED_PENDING_APPROVAL,
title: s__('AdminUsers|Pending approval'),
},
{ value: FILTER_TYPE_TRUSTED, title: s__('AdminUsers|Trusted') },
{ value: FILTER_TYPE_WOP, title: s__('AdminUsers|Without projects') },
],
},
{
title: s__('AdminUsers|Two-factor authentication'),
type: TOKEN_2FA,
token: GlFilteredSearchToken,
operators: OPERATORS_IS,
unique: true,
options: [
{ value: FILTER_TYPE_ENABLED_2FA, title: __('On') },
{ value: FILTER_TYPE_DISABLED_2FA, title: __('Off') },
],
},
];
import { GlFilteredSearch } from '@gitlab/ui';
import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
import { TOKENS, TOKEN_TYPES } from '../constants';
import { initializeValues } from '../utils';
export default {
name: 'AdminUsersFilterApp',
@@ -70,51 +11,20 @@ export default {
},
data() {
return {
filterValue: [],
values: initializeValues(),
};
},
computed: {
queryFilter() {
return getParameterValues('filter')[0];
},
selectedFilter() {
return this.filterValue.find((selectedFilter) => {
return ALL_FILTER_TYPES.includes(selectedFilter.value?.data);
});
},
selectedFilterData() {
return this.selectedFilter?.value?.data;
},
filteredAvailableTokens() {
if (this.selectedFilterData) {
return availableTokens.filter((token) => {
return token.options.find((option) => option.value === this.selectedFilterData);
});
}
return availableTokens;
},
},
created() {
if (this.queryFilter) {
const filter = availableTokens.find((token) => {
return token.options.find((option) => option.value === this.queryFilter);
});
availableTokens() {
// Once a token is selected, discard the rest
const tokenType = this.values.find(({ type }) => TOKEN_TYPES.includes(type))?.type;
if (filter) {
this.filterValue.push({
type: filter.type,
value: {
data: this.queryFilter,
operator: filter.operators[0].value,
},
});
if (tokenType) {
return TOKENS.filter(({ type }) => type === tokenType);
}
}
const [searchQuery] = getParameterValues('search_query');
if (searchQuery) {
this.filterValue.push(searchQuery);
}
return TOKENS;
},
},
methods: {
handleSearch(filters) {
@@ -137,9 +47,9 @@ export default {
<template>
<gl-filtered-search
v-model="filterValue"
v-model="values"
:placeholder="s__('AdminUsers|Search by name, email, or username')"
:available-tokens="filteredAvailableTokens"
:available-tokens="availableTokens"
class="gl-mb-4"
terms-as-tokens
@submit="handleSearch"
Loading