debian-mirror-gitlab/app/assets/javascripts/feature_flags/components/environments_dropdown.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

185 lines
4.8 KiB
Vue
Raw Normal View History

2021-01-03 14:25:43 +05:30
<script>
2021-03-08 18:12:59 +05:30
import { GlButton, GlSearchBoxByType } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { debounce } from 'lodash';
2022-11-25 23:54:43 +05:30
import { createAlert } from '~/flash';
2021-01-03 14:25:43 +05:30
import axios from '~/lib/utils/axios_utils';
import { __ } from '~/locale';
/**
* Creates a searchable input for environments.
*
* When given a value, it will render it as selected value
* Otherwise it will render a placeholder for the search input.
* It will fetch the available environments on focus.
*
* When the user types, it will trigger an event to allow
* for API queries outside of the component.
*
* When results are returned, it renders a selectable
* list with the suggestions
*
* When no results are returned, it will render a
* button with a `Create` label. When clicked, it will
* emit an event to allow for the creation of a new
* record.
*
*/
export default {
name: 'EnvironmentsSearchableInput',
components: {
2021-03-08 18:12:59 +05:30
GlButton,
2021-01-03 14:25:43 +05:30
GlSearchBoxByType,
},
2021-03-08 18:12:59 +05:30
inject: ['environmentsEndpoint'],
2021-01-03 14:25:43 +05:30
props: {
value: {
type: String,
required: false,
default: '',
},
placeholder: {
type: String,
required: false,
default: __('Search an environment spec'),
},
createButtonLabel: {
type: String,
required: false,
default: __('Create'),
},
disabled: {
type: Boolean,
default: false,
required: false,
},
},
data() {
return {
environmentSearch: this.value,
results: [],
showSuggestions: false,
isLoading: false,
};
},
computed: {
/**
* Creates a label with the value of the filter
* @returns {String}
*/
composedCreateButtonLabel() {
return `${this.createButtonLabel} ${this.environmentSearch}`;
},
shouldRenderCreateButton() {
return !this.isLoading && !this.results.length;
},
},
methods: {
fetchEnvironments: debounce(function debouncedFetchEnvironments() {
this.isLoading = true;
this.openSuggestions();
axios
.get(this.environmentsEndpoint, { params: { query: this.environmentSearch } })
.then(({ data }) => {
this.results = data || [];
this.isLoading = false;
})
.catch(() => {
this.isLoading = false;
this.closeSuggestions();
2022-11-25 23:54:43 +05:30
createAlert({
2021-09-04 01:27:46 +05:30
message: __('Something went wrong on our end. Please try again.'),
});
2021-01-03 14:25:43 +05:30
});
}, 250),
/**
* Opens the list of suggestions
*/
openSuggestions() {
this.showSuggestions = true;
},
/**
* Closes the list of suggestions and cleans the results
*/
closeSuggestions() {
this.showSuggestions = false;
this.environmentSearch = '';
},
/**
* On click, it will:
* 1. clear the input value
* 2. close the list of suggestions
* 3. emit an event
*/
clearInput() {
this.closeSuggestions();
this.$emit('clearInput');
},
/**
* When the user selects a value from the list of suggestions
*
* It emits an event with the selected value
* Clears the filter
* and closes the list of suggestions
*
* @param {String} selected
*/
selectEnvironment(selected) {
this.$emit('selectEnvironment', selected);
this.results = [];
this.closeSuggestions();
},
/**
* When the user clicks the create button
* it emits an event with the filter value
*/
createClicked() {
this.$emit('createClicked', this.environmentSearch);
this.closeSuggestions();
},
},
};
</script>
<template>
<div>
<div class="dropdown position-relative">
<gl-search-box-by-type
v-model.trim="environmentSearch"
class="js-env-search"
:aria-label="placeholder"
:placeholder="placeholder"
:disabled="disabled"
:is-loading="isLoading"
@focus="fetchEnvironments"
@keyup="fetchEnvironments"
/>
<div
v-if="showSuggestions"
class="dropdown-menu d-block dropdown-menu-selectable dropdown-menu-full-width"
>
<div class="dropdown-content">
<ul v-if="results.length">
<li v-for="(result, i) in results" :key="i">
2021-03-08 18:12:59 +05:30
<gl-button category="tertiary" @click="selectEnvironment(result)">{{
2021-01-03 14:25:43 +05:30
result
2021-03-08 18:12:59 +05:30
}}</gl-button>
2021-01-03 14:25:43 +05:30
</li>
</ul>
<div v-else-if="!results.length" class="text-secondary gl-p-3">
{{ __('No matching results') }}
</div>
<div v-if="shouldRenderCreateButton" class="dropdown-footer">
2021-03-08 18:12:59 +05:30
<gl-button
category="tertiary"
class="js-create-button dropdown-item"
2021-01-03 14:25:43 +05:30
@click="createClicked"
2021-03-08 18:12:59 +05:30
>{{ composedCreateButtonLabel }}</gl-button
2021-01-03 14:25:43 +05:30
>
</div>
</div>
</div>
</div>
</div>
</template>