diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/tokens')
4 files changed, 185 insertions, 11 deletions
diff --git a/app/assets/javascripts/pipelines/components/tokens/pipeline_branch_name_token.vue b/app/assets/javascripts/pipelines/components/tokens/pipeline_branch_name_token.vue index a7a3f986255..da14bb2d308 100644 --- a/app/assets/javascripts/pipelines/components/tokens/pipeline_branch_name_token.vue +++ b/app/assets/javascripts/pipelines/components/tokens/pipeline_branch_name_token.vue @@ -23,15 +23,18 @@ export default { }, data() { return { - branches: this.config.branches, + branches: null, loading: true, }; }, + created() { + this.fetchBranches(); + }, methods: { - fetchBranchBySearchTerm(searchTerm) { - Api.branches(this.config.projectId, searchTerm) - .then(res => { - this.branches = res.data.map(branch => branch.name); + fetchBranches(searchterm) { + Api.branches(this.config.projectId, searchterm) + .then(({ data }) => { + this.branches = data.map(branch => branch.name); this.loading = false; }) .catch(err => { @@ -41,7 +44,7 @@ export default { }); }, searchBranches: debounce(function debounceSearch({ data }) { - this.fetchBranchBySearchTerm(data); + this.fetchBranches(data); }, FILTER_PIPELINES_SEARCH_DELAY), }, }; diff --git a/app/assets/javascripts/pipelines/components/tokens/pipeline_status_token.vue b/app/assets/javascripts/pipelines/components/tokens/pipeline_status_token.vue new file mode 100644 index 00000000000..dc43d94f4fd --- /dev/null +++ b/app/assets/javascripts/pipelines/components/tokens/pipeline_status_token.vue @@ -0,0 +1,104 @@ +<script> +import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlIcon } from '@gitlab/ui'; +import { s__ } from '~/locale'; + +export default { + components: { + GlFilteredSearchToken, + GlFilteredSearchSuggestion, + GlIcon, + }, + props: { + config: { + type: Object, + required: true, + }, + value: { + type: Object, + required: true, + }, + }, + computed: { + statuses() { + return [ + { + class: 'ci-status-icon-canceled', + icon: 'status_canceled', + text: s__('Pipeline|Canceled'), + value: 'canceled', + }, + { + class: 'ci-status-icon-created', + icon: 'status_created', + text: s__('Pipeline|Created'), + value: 'created', + }, + { + class: 'ci-status-icon-failed', + icon: 'status_failed', + text: s__('Pipeline|Failed'), + value: 'failed', + }, + { + class: 'ci-status-icon-manual', + icon: 'status_manual', + text: s__('Pipeline|Manual'), + value: 'manual', + }, + { + class: 'ci-status-icon-success', + icon: 'status_success', + text: s__('Pipeline|Passed'), + value: 'success', + }, + { + class: 'ci-status-icon-pending', + icon: 'status_pending', + text: s__('Pipeline|Pending'), + value: 'pending', + }, + { + class: 'ci-status-icon-running', + icon: 'status_running', + text: s__('Pipeline|Running'), + value: 'running', + }, + { + class: 'ci-status-icon-skipped', + icon: 'status_skipped', + text: s__('Pipeline|Skipped'), + value: 'skipped', + }, + ]; + }, + findActiveStatus() { + return this.statuses.find(status => status.value === this.value.data); + }, + }, +}; +</script> + +<template> + <gl-filtered-search-token v-bind="{ ...$props, ...$attrs }" v-on="$listeners"> + <template #view> + <div class="gl-display-flex gl-align-items-center"> + <div :class="findActiveStatus.class"> + <gl-icon :name="findActiveStatus.icon" class="gl-mr-2 gl-display-block" /> + </div> + <span>{{ findActiveStatus.text }}</span> + </div> + </template> + <template #suggestions> + <gl-filtered-search-suggestion + v-for="(status, index) in statuses" + :key="index" + :value="status.value" + > + <div class="gl-display-flex" :class="status.class"> + <gl-icon :name="status.icon" class="gl-mr-3" /> + <span>{{ status.text }}</span> + </div> + </gl-filtered-search-suggestion> + </template> + </gl-filtered-search-token> +</template> diff --git a/app/assets/javascripts/pipelines/components/tokens/pipeline_tag_name_token.vue b/app/assets/javascripts/pipelines/components/tokens/pipeline_tag_name_token.vue new file mode 100644 index 00000000000..7b209c5fa12 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/tokens/pipeline_tag_name_token.vue @@ -0,0 +1,64 @@ +<script> +import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui'; +import Api from '~/api'; +import { FETCH_TAG_ERROR_MESSAGE, FILTER_PIPELINES_SEARCH_DELAY } from '../../constants'; +import createFlash from '~/flash'; +import { debounce } from 'lodash'; + +export default { + components: { + GlFilteredSearchToken, + GlFilteredSearchSuggestion, + GlLoadingIcon, + }, + props: { + config: { + type: Object, + required: true, + }, + value: { + type: Object, + required: true, + }, + }, + data() { + return { + tags: null, + loading: true, + }; + }, + created() { + this.fetchTags(); + }, + methods: { + fetchTags(searchTerm) { + Api.tags(this.config.projectId, searchTerm) + .then(({ data }) => { + this.tags = data.map(tag => tag.name); + this.loading = false; + }) + .catch(err => { + createFlash(FETCH_TAG_ERROR_MESSAGE); + this.loading = false; + throw err; + }); + }, + searchTags: debounce(function debounceSearch({ data }) { + this.fetchTags(data); + }, FILTER_PIPELINES_SEARCH_DELAY), + }, +}; +</script> + +<template> + <gl-filtered-search-token v-bind="{ ...$props, ...$attrs }" v-on="$listeners" @input="searchTags"> + <template #suggestions> + <gl-loading-icon v-if="loading" /> + <template v-else> + <gl-filtered-search-suggestion v-for="(tag, index) in tags" :key="index" :value="tag"> + {{ tag }} + </gl-filtered-search-suggestion> + </template> + </template> + </gl-filtered-search-token> +</template> diff --git a/app/assets/javascripts/pipelines/components/tokens/pipeline_trigger_author_token.vue b/app/assets/javascripts/pipelines/components/tokens/pipeline_trigger_author_token.vue index 83e3558e1a1..4062a3b11bb 100644 --- a/app/assets/javascripts/pipelines/components/tokens/pipeline_trigger_author_token.vue +++ b/app/assets/javascripts/pipelines/components/tokens/pipeline_trigger_author_token.vue @@ -36,7 +36,7 @@ export default { }, data() { return { - users: this.config.triggerAuthors, + users: [], loading: true, }; }, @@ -50,11 +50,14 @@ export default { }); }, }, + created() { + this.fetchProjectUsers(); + }, methods: { - fetchAuthorBySearchTerm(searchTerm) { + fetchProjectUsers(searchTerm) { Api.projectUsers(this.config.projectId, searchTerm) - .then(res => { - this.users = res; + .then(users => { + this.users = users; this.loading = false; }) .catch(err => { @@ -64,7 +67,7 @@ export default { }); }, searchAuthors: debounce(function debounceSearch({ data }) { - this.fetchAuthorBySearchTerm(data); + this.fetchProjectUsers(data); }, FILTER_PIPELINES_SEARCH_DELAY), }, }; |