Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 6x 29x 33x 6x 117x 29x 29x 35x 35x 35x 35x 35x 29x 35x 35x 1x 1x 1x 6x 6x | <script>
import { GlCollapsibleListbox, GlButton } from '@gitlab/ui';
import { debounce, memoize } from 'lodash';
import { createAlert } from '~/alert';
import axios from '~/lib/utils/axios_utils';
import { __, n__, sprintf } from '~/locale';
import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
export default {
components: {
GlButton,
GlCollapsibleListbox,
},
inject: ['environmentsEndpoint'],
data() {
return {
environmentSearch: '',
results: [],
isLoading: false,
};
},
translations: {
addEnvironmentsLabel: __('Add environment'),
noResultsLabel: __('No matching results'),
},
computed: {
srOnlyResultsCount() {
return n__('%d environment found', '%d environments found', this.results.length);
},
createEnvironmentLabel() {
return sprintf(__('Create %{environment}'), { environment: this.environmentSearch });
},
isCreateEnvironmentShown() {
return !this.isLoading && this.results.length === 0 && Boolean(this.environmentSearch);
},
},
mounted() {
this.fetchEnvironments();
},
unmounted() {
// cancel debounce if the component is unmounted to avoid unnecessary fetches
this.fetchEnvironments.cancel();
},
created() {
this.fetch = memoize(async function fetchEnvironmentsFromApi(query) {
this.isLoading = true;
try {
const { data } = await axios.get(this.environmentsEndpoint, { params: { query } });
return data;
} catch {
createAlert({
message: __('Something went wrong on our end. Please try again.'),
});
return [];
} finally {
this.isLoading = false;
}
});
this.fetchEnvironments = debounce(function debouncedFetchEnvironments(query = '') {
this.fetch(query)
.then((data) => {
this.results = data.map((item) => ({ text: item, value: item }));
})
.catch(() => {
this.results = [];
});
}, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
},
methods: {
onSelect(selected) {
this.$emit('add', selected[0]);
},
addEnvironment(newEnvironment) {
this.$emit('add', newEnvironment);
this.results = [];
},
onSearch(query) {
this.environmentSearch = query;
this.fetchEnvironments(query);
},
},
};
</script>
<template>
<gl-collapsible-listbox
icon="plus"
data-testid="new-environments-dropdown"
:toggle-text="$options.translations.addEnvironmentsLabel"
:items="results"
:searching="isLoading"
:header-text="$options.translations.addEnvironmentsLabel"
searchable
multiple
@search="onSearch"
@select="onSelect"
>
<template #footer>
<div
v-if="isCreateEnvironmentShown"
class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-p-2"
>
<gl-button
category="tertiary"
block
class="gl-justify-content-start!"
data-testid="add-environment-button"
@click="addEnvironment(environmentSearch)"
>
{{ createEnvironmentLabel }}
</gl-button>
</div>
</template>
<template #search-summary-sr-only>
{{ srOnlyResultsCount }}
</template>
</gl-collapsible-listbox>
</template>
|