diff options
Diffstat (limited to 'app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue new file mode 100644 index 00000000000..8ee4eefcd91 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue @@ -0,0 +1,116 @@ +<script> +import { sprintf, s__ } from '~/locale'; +import { mapState, mapActions } from 'vuex'; + +import gkeDropdownMixin from './gke_dropdown_mixin'; + +export default { + name: 'GkeZoneDropdown', + mixins: [gkeDropdownMixin], + computed: { + ...mapState([ + 'selectedProject', + 'selectedZone', + 'projects', + 'isValidatingProjectBilling', + 'projectHasBillingEnabled', + ]), + ...mapState({ items: 'zones' }), + isDisabled() { + return this.isLoading || this.isValidatingProjectBilling || !this.projectHasBillingEnabled; + }, + toggleText() { + if (this.isLoading) { + return s__('ClusterIntegration|Fetching zones'); + } + + if (this.selectedZone) { + return this.selectedZone; + } + + return !this.projectHasBillingEnabled + ? s__('ClusterIntegration|Select project to choose zone') + : s__('ClusterIntegration|Select zone'); + }, + errorMessage() { + return sprintf( + s__('ClusterIntegration|An error occured while trying to fetch project zones: %{error}'), + { error: this.gapiError }, + ); + }, + }, + watch: { + isValidatingProjectBilling(isValidating) { + this.hasErrors = false; + + if (!isValidating && this.projectHasBillingEnabled) { + this.isLoading = true; + + this.fetchZones() + .then(this.fetchSuccessHandler) + .catch(this.fetchFailureHandler); + } + }, + }, + methods: { + ...mapActions(['fetchZones']), + ...mapActions({ setItem: 'setZone' }), + }, +}; +</script> + +<template> + <div> + <div + class="js-gcp-zone-dropdown dropdown" + :class="{ 'gl-show-field-errors': hasErrors }" + > + <dropdown-hidden-input + :name="fieldName" + :value="selectedZone" + /> + <dropdown-button + :class="{ 'gl-field-error-outline': hasErrors }" + :is-disabled="isDisabled" + :is-loading="isLoading" + :toggle-text="toggleText" + /> + <div class="dropdown-menu dropdown-select"> + <dropdown-search-input + v-model="searchQuery" + :placeholder-text="s__('ClusterIntegration|Search zones')" + /> + <div class="dropdown-content"> + <ul> + <li v-show="!results.length"> + <span class="menu-item"> + {{ s__('ClusterIntegration|No zones matched your search') }} + </span> + </li> + <li + v-for="result in results" + :key="result.id" + > + <button + type="button" + @click.prevent="setItem(result.name)" + > + {{ result.name }} + </button> + </li> + </ul> + </div> + <div class="dropdown-loading"> + <loading-icon /> + </div> + </div> + </div> + <span + class="form-text text-muted" + :class="{ 'gl-field-error': hasErrors }" + v-if="hasErrors" + > + {{ errorMessage }} + </span> + </div> +</template> |