diff options
author | Dennis Tang <dtang@gitlab.com> | 2018-05-11 22:03:12 +0300 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2018-05-11 22:03:12 +0300 |
commit | 8626255a3921d975e6aeafa00e1fa7cbe2adfc39 (patch) | |
tree | 293ceda3ed3b28b79d1ecf4a6a9b6088b909c498 /app/assets/javascripts/projects | |
parent | e144946ebed62bcc2f24b668beae8242776c2cc9 (diff) |
move errors next to input fields
Diffstat (limited to 'app/assets/javascripts/projects')
5 files changed, 128 insertions, 112 deletions
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js index f5b26fbeefe..c15d8ba49e1 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js @@ -34,6 +34,7 @@ export default { isLoading: false, hasErrors: false, searchQuery: '', + gapiError: '', }; }, computed: { @@ -58,9 +59,13 @@ export default { this.isLoading = false; this.hasErrors = false; }, - fetchFailureHandler() { + fetchFailureHandler(resp) { this.isLoading = false; this.hasErrors = true; + + if (resp.result && resp.result.error) { + this.gapiError = resp.result.error.message; + } }, }, }; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue index 26ba4c762c1..d25df18658d 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue @@ -1,5 +1,5 @@ <script> -import { s__ } from '~/locale'; +import { sprintf, s__ } from '~/locale'; import { mapState, mapGetters, mapActions } from 'vuex'; import gkeDropdownMixin from './gke_dropdown_mixin'; @@ -34,6 +34,14 @@ export default { ? s__('ClusterIntegration|Select zone to choose machine type') : s__('ClusterIntegration|Select machine type'); }, + errorMessage() { + return sprintf( + s__( + 'ClusterIntegration|An error occured while trying to fetch zone machine types: %{error}', + ), + { error: this.gapiError }, + ); + }, }, watch: { selectedZone() { @@ -64,48 +72,57 @@ export default { </script> <template> - <div - class="js-gcp-machine-type-dropdown dropdown" - :class="{ 'gl-show-field-errors': hasErrors }" - > - <dropdown-hidden-input - :name="fieldName" - :value="selectedMachineType" - /> - <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 machine types')" + <div> + <div + class="js-gcp-machine-type-dropdown dropdown" + :class="{ 'gl-show-field-errors': hasErrors }" + > + <dropdown-hidden-input + :name="fieldName" + :value="selectedMachineType" + /> + <dropdown-button + :class="{ 'gl-field-error-outline': hasErrors }" + :is-disabled="isDisabled" + :is-loading="isLoading" + :toggle-text="toggleText" /> - <div class="dropdown-content"> - <ul> - <li v-show="!results.length"> - <span class="menu-item"> - {{ s__('ClusterIntegration|No machine types matched your search') }} - </span> - </li> - <li - v-for="result in results" - :key="result.id" - > - <button - type="button" - @click.prevent="setItem(result.name)" + <div class="dropdown-menu dropdown-select"> + <dropdown-search-input + v-model="searchQuery" + :placeholder-text="s__('ClusterIntegration|Search machine types')" + /> + <div class="dropdown-content"> + <ul> + <li v-show="!results.length"> + <span class="menu-item"> + {{ s__('ClusterIntegration|No machine types matched your search') }} + </span> + </li> + <li + v-for="result in results" + :key="result.id" > - {{ result.name }} - </button> - </li> - </ul> - </div> - <div class="dropdown-loading"> - <loading-icon /> + <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="help-block" + :class="{ 'gl-field-error': hasErrors }" + v-if="hasErrors" + > + {{ errorMessage }} + </span> </div> </template> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue index 58605832202..e1b15a1507d 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue @@ -66,6 +66,12 @@ export default { false, ); }, + errorMessage() { + return sprintf( + s__('ClusterIntegration|An error occured while trying to fetch your projects: %{error}'), + { error: this.gapiError }, + ); + }, }, created() { this.isLoading = true; @@ -146,7 +152,7 @@ export default { </div> <span class="help-block" - :class="{ 'gl-field-error-message': hasErrors }" + :class="{ 'gl-field-error': hasErrors }" v-html="helpText" ></span> </div> 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 index d0e6bfc0137..a63d9ae9125 100644 --- 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 @@ -1,5 +1,5 @@ <script> -import { s__ } from '~/locale'; +import { sprintf, s__ } from '~/locale'; import { mapState, mapGetters, mapActions } from 'vuex'; import gkeDropdownMixin from './gke_dropdown_mixin'; @@ -8,7 +8,7 @@ export default { name: 'GkeZoneDropdown', mixins: [gkeDropdownMixin], computed: { - ...mapState(['selectedProject', 'selectedZone']), + ...mapState(['selectedProject', 'selectedZone', 'projects']), ...mapState({ items: 'zones' }), ...mapGetters(['hasProject']), isDisabled() { @@ -27,6 +27,12 @@ export default { ? 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: { selectedProject() { @@ -45,48 +51,57 @@ export default { </script> <template> - <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> + <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-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)" + <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" > - {{ result.name }} - </button> - </li> - </ul> - </div> - <div class="dropdown-loading"> - <loading-icon /> + <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="help-block" + :class="{ 'gl-field-error': hasErrors }" + v-if="hasErrors" + > + {{ errorMessage }} + </span> </div> </template> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js index 73f1e17f379..e484f6a1b2b 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js @@ -1,5 +1,4 @@ /* global gapi */ -import createFlash, { hideFlash } from '~/flash'; import { s__, sprintf } from '~/locale'; import * as types from './mutation_types'; @@ -16,21 +15,7 @@ export const setMachineType = ({ commit }, selectedMachineType) => { commit(types.SET_MACHINE_TYPE, selectedMachineType); }; -const displayError = (resp, errorMessage) => { - if (resp.result && resp.result.error) { - createFlash(sprintf(errorMessage, { error: resp.result.error.message })); - } -}; - -const hideError = () => { - const flashEl = document.querySelector('.flash-alert'); - - if (flashEl) { - hideFlash(flashEl); - } -}; - -const gapiRequest = ({ service, params, commit, mutation, payloadKey, errorMessage }) => +const gapiRequest = ({ service, params, commit, mutation, payloadKey }) => new Promise((resolve, reject) => { const request = service.list(params); @@ -38,15 +23,12 @@ const gapiRequest = ({ service, params, commit, mutation, payloadKey, errorMessa resp => { const { result } = resp; - hideError(); commit(mutation, result[payloadKey]); resolve(); }, resp => { - displayError(resp, errorMessage); - - reject(); + reject(resp); }, ); }); @@ -58,9 +40,6 @@ export const getProjects = ({ commit }) => commit, mutation: types.SET_PROJECTS, payloadKey: 'projects', - errorMessage: s__( - 'ClusterIntegration|An error occured while trying to fetch your projects: %{error}', - ), }); export const getZones = ({ commit, state }) => @@ -72,9 +51,6 @@ export const getZones = ({ commit, state }) => commit, mutation: types.SET_ZONES, payloadKey: 'items', - errorMessage: s__( - 'ClusterIntegration|An error occured while trying to fetch project zones: %{error}', - ), }); export const getMachineTypes = ({ commit, state }) => @@ -87,9 +63,6 @@ export const getMachineTypes = ({ commit, state }) => commit, mutation: types.SET_MACHINE_TYPES, payloadKey: 'items', - errorMessage: s__( - 'ClusterIntegration|An error occured while trying to fetch zone machine types: %{error}', - ), }); // prevent babel-plugin-rewire from generating an invalid default during karma tests |