86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<script>
|
|
import { GlFilteredSearchSuggestion, GlToken } from '@gitlab/ui';
|
|
import { createAlert } from '~/flash';
|
|
import axios from '~/lib/utils/axios_utils';
|
|
import { s__ } from '~/locale';
|
|
|
|
import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
|
|
import { RUNNER_TAG_BG_CLASS } from '../../constants';
|
|
|
|
export const TAG_SUGGESTIONS_PATH = '/admin/runners/tag_list.json';
|
|
|
|
export default {
|
|
components: {
|
|
BaseToken,
|
|
GlFilteredSearchSuggestion,
|
|
GlToken,
|
|
},
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
tags: [],
|
|
loading: false,
|
|
};
|
|
},
|
|
methods: {
|
|
getTagsOptions(search) {
|
|
// TODO This should be implemented via a GraphQL API
|
|
// The API should
|
|
// 1) scope to the rights of the user
|
|
// 2) stay up to date to the removal of old tags
|
|
// 3) consider the scope of search, like searching within the tags of a group
|
|
// See: https://gitlab.com/gitlab-org/gitlab/-/issues/333796
|
|
return axios
|
|
.get(TAG_SUGGESTIONS_PATH, {
|
|
params: {
|
|
search,
|
|
},
|
|
})
|
|
.then(({ data }) => {
|
|
return data.map(({ id, name }) => ({ id, value: name, text: name }));
|
|
});
|
|
},
|
|
async fetchTags(searchTerm) {
|
|
this.loading = true;
|
|
try {
|
|
this.tags = await this.getTagsOptions(searchTerm);
|
|
} catch {
|
|
createAlert({
|
|
message: s__('Runners|Something went wrong while fetching the tags suggestions'),
|
|
});
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
},
|
|
RUNNER_TAG_BG_CLASS,
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<base-token
|
|
v-bind="$attrs"
|
|
:config="config"
|
|
:suggestions-loading="loading"
|
|
:suggestions="tags"
|
|
@fetch-suggestions="fetchTags"
|
|
v-on="$listeners"
|
|
>
|
|
<template #view-token="{ viewTokenProps: { listeners, inputValue, activeTokenValue } }">
|
|
<gl-token variant="search-value" :class="$options.RUNNER_TAG_BG_CLASS" v-on="listeners">
|
|
{{ activeTokenValue ? activeTokenValue.text : inputValue }}
|
|
</gl-token>
|
|
</template>
|
|
<template #suggestions-list="{ suggestions }">
|
|
<gl-filtered-search-suggestion v-for="tag in suggestions" :key="tag.id" :value="tag.value">
|
|
{{ tag.text }}
|
|
</gl-filtered-search-suggestion>
|
|
</template>
|
|
</base-token>
|
|
</template>
|