Skip to content

G
gitlab-ce
Commit 8626255a authored by Dennis Tang's avatar Dennis Tang
Browse files
Options

move errors next to input fields

parent e144946e
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 112 deletions
app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
View file @ 8626255a
...@@ -34,6 +34,7 @@ export default { ...@@ -34,6 +34,7 @@ export default {
isLoading: false, isLoading: false,
hasErrors: false, hasErrors: false,
searchQuery: '', searchQuery: '',
gapiError: '',
}; };
}, },
computed: { computed: {
...@@ -58,9 +59,13 @@ export default { ...@@ -58,9 +59,13 @@ export default {
this.isLoading = false; this.isLoading = false;
this.hasErrors = false; this.hasErrors = false;
}, },
fetchFailureHandler() { fetchFailureHandler(resp) {
this.isLoading = false; this.isLoading = false;
this.hasErrors = true; this.hasErrors = true;
if (resp.result && resp.result.error) {
this.gapiError = resp.result.error.message;
}
}, },
}, },
}; };
app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
View file @ 8626255a
<script> <script>
import { s__ } from '~/locale'; import { sprintf, s__ } from '~/locale';
import { mapState, mapGetters, mapActions } from 'vuex'; import { mapState, mapGetters, mapActions } from 'vuex';
import gkeDropdownMixin from './gke_dropdown_mixin'; import gkeDropdownMixin from './gke_dropdown_mixin';
...@@ -34,6 +34,14 @@ export default { ...@@ -34,6 +34,14 @@ export default {
? s__('ClusterIntegration|Select zone to choose machine type') ? s__('ClusterIntegration|Select zone to choose machine type')
: s__('ClusterIntegration|Select 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: { watch: {
selectedZone() { selectedZone() {
...@@ -64,48 +72,57 @@ export default { ...@@ -64,48 +72,57 @@ export default {
</script> </script>
<template> <template>
<div <div>
class="js-gcp-machine-type-dropdown dropdown" <div
:class="{ 'gl-show-field-errors': hasErrors }" class="js-gcp-machine-type-dropdown dropdown"
> :class="{ 'gl-show-field-errors': hasErrors }"
<dropdown-hidden-input >
:name="fieldName" <dropdown-hidden-input
:value="selectedMachineType" :name="fieldName"
/> :value="selectedMachineType"
<dropdown-button />
:class="{ 'gl-field-error-outline': hasErrors }" <dropdown-button
:is-disabled="isDisabled" :class="{ 'gl-field-error-outline': hasErrors }"
:is-loading="isLoading" :is-disabled="isDisabled"
:toggle-text="toggleText" :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 class="dropdown-content"> <div class="dropdown-menu dropdown-select">
<ul> <dropdown-search-input
<li v-show="!results.length"> v-model="searchQuery"
<span class="menu-item"> :placeholder-text="s__('ClusterIntegration|Search machine types')"
{{ s__('ClusterIntegration|No machine types matched your search') }} />
</span> <div class="dropdown-content">
</li> <ul>
<li <li v-show="!results.length">
v-for="result in results" <span class="menu-item">
:key="result.id" {{ s__('ClusterIntegration|No machine types matched your search') }}
> </span>
<button </li>
type="button" <li
@click.prevent="setItem(result.name)" v-for="result in results"
:key="result.id"
> >
{{ result.name }} <button
</button> type="button"
</li> @click.prevent="setItem(result.name)"
</ul> >
</div> {{ result.name }}
<div class="dropdown-loading"> </button>
<loading-icon /> </li>
</ul>
</div>
<div class="dropdown-loading">
<loading-icon />
</div>
</div> </div>
</div> </div>
<span
class="help-block"
:class="{ 'gl-field-error': hasErrors }"
v-if="hasErrors"
>
{{ errorMessage }}
</span>
</div> </div>
</template> </template>
app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
View file @ 8626255a
...@@ -66,6 +66,12 @@ export default { ...@@ -66,6 +66,12 @@ export default {
false, false,
); );
}, },
errorMessage() {
return sprintf(
s__('ClusterIntegration|An error occured while trying to fetch your projects: %{error}'),
{ error: this.gapiError },
);
},
}, },
created() { created() {
this.isLoading = true; this.isLoading = true;
...@@ -146,7 +152,7 @@ export default { ...@@ -146,7 +152,7 @@ export default {
</div> </div>
<span <span
class="help-block" class="help-block"
:class="{ 'gl-field-error-message': hasErrors }" :class="{ 'gl-field-error': hasErrors }"
v-html="helpText" v-html="helpText"
></span> ></span>
</div> </div>
......
app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
View file @ 8626255a
<script> <script>
import { s__ } from '~/locale'; import { sprintf, s__ } from '~/locale';
import { mapState, mapGetters, mapActions } from 'vuex'; import { mapState, mapGetters, mapActions } from 'vuex';
import gkeDropdownMixin from './gke_dropdown_mixin'; import gkeDropdownMixin from './gke_dropdown_mixin';
...@@ -8,7 +8,7 @@ export default { ...@@ -8,7 +8,7 @@ export default {
name: 'GkeZoneDropdown', name: 'GkeZoneDropdown',
mixins: [gkeDropdownMixin], mixins: [gkeDropdownMixin],
computed: { computed: {
...mapState(['selectedProject', 'selectedZone']), ...mapState(['selectedProject', 'selectedZone', 'projects']),
...mapState({ items: 'zones' }), ...mapState({ items: 'zones' }),
...mapGetters(['hasProject']), ...mapGetters(['hasProject']),
isDisabled() { isDisabled() {
...@@ -27,6 +27,12 @@ export default { ...@@ -27,6 +27,12 @@ export default {
? s__('ClusterIntegration|Select project to choose zone') ? s__('ClusterIntegration|Select project to choose zone')
: s__('ClusterIntegration|Select zone'); : s__('ClusterIntegration|Select zone');
}, },
errorMessage() {
return sprintf(
s__('ClusterIntegration|An error occured while trying to fetch project zones: %{error}'),
{ error: this.gapiError },
);
},
}, },
watch: { watch: {
selectedProject() { selectedProject() {
...@@ -45,48 +51,57 @@ export default { ...@@ -45,48 +51,57 @@ export default {
</script> </script>
<template> <template>
<div <div>
class="js-gcp-zone-dropdown dropdown" <div
:class="{ 'gl-show-field-errors': hasErrors }" class="js-gcp-zone-dropdown dropdown"
> :class="{ 'gl-show-field-errors': hasErrors }"
<dropdown-hidden-input >
:name="fieldName" <dropdown-hidden-input
:value="selectedZone" :name="fieldName"
/> :value="selectedZone"
<dropdown-button />
:class="{ 'gl-field-error-outline': hasErrors }" <dropdown-button
:is-disabled="isDisabled" :class="{ 'gl-field-error-outline': hasErrors }"
:is-loading="isLoading" :is-disabled="isDisabled"
:toggle-text="toggleText" :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"> <div class="dropdown-menu dropdown-select">
<ul> <dropdown-search-input
<li v-show="!results.length"> v-model="searchQuery"
<span class="menu-item"> :placeholder-text="s__('ClusterIntegration|Search zones')"
{{ s__('ClusterIntegration|No zones matched your search') }} />
</span> <div class="dropdown-content">
</li> <ul>
<li <li v-show="!results.length">
v-for="result in results" <span class="menu-item">
:key="result.id" {{ s__('ClusterIntegration|No zones matched your search') }}
> </span>
<button </li>
type="button" <li
@click.prevent="setItem(result.name)" v-for="result in results"
:key="result.id"
> >
{{ result.name }} <button
</button> type="button"
</li> @click.prevent="setItem(result.name)"
</ul> >
</div> {{ result.name }}
<div class="dropdown-loading"> </button>
<loading-icon /> </li>
</ul>
</div>
<div class="dropdown-loading">
<loading-icon />
</div>
</div> </div>
</div> </div>
<span
class="help-block"
:class="{ 'gl-field-error': hasErrors }"
v-if="hasErrors"
>
{{ errorMessage }}
</span>
</div> </div>
</template> </template>
app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js
View file @ 8626255a
/* global gapi */ /* global gapi */
import createFlash, { hideFlash } from '~/flash';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
import * as types from './mutation_types'; import * as types from './mutation_types';
...@@ -16,21 +15,7 @@ export const setMachineType = ({ commit }, selectedMachineType) => { ...@@ -16,21 +15,7 @@ export const setMachineType = ({ commit }, selectedMachineType) => {
commit(types.SET_MACHINE_TYPE, selectedMachineType); commit(types.SET_MACHINE_TYPE, selectedMachineType);
}; };
const displayError = (resp, errorMessage) => { const gapiRequest = ({ service, params, commit, mutation, payloadKey }) =>
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 }) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
const request = service.list(params); const request = service.list(params);
...@@ -38,15 +23,12 @@ const gapiRequest = ({ service, params, commit, mutation, payloadKey, errorMessa ...@@ -38,15 +23,12 @@ const gapiRequest = ({ service, params, commit, mutation, payloadKey, errorMessa
resp => { resp => {
const { result } = resp; const { result } = resp;
hideError();
commit(mutation, result[payloadKey]); commit(mutation, result[payloadKey]);
resolve(); resolve();
}, },
resp => { resp => {
displayError(resp, errorMessage); reject(resp);
reject();
}, },
); );
}); });
...@@ -58,9 +40,6 @@ export const getProjects = ({ commit }) => ...@@ -58,9 +40,6 @@ export const getProjects = ({ commit }) =>
commit, commit,
mutation: types.SET_PROJECTS, mutation: types.SET_PROJECTS,
payloadKey: 'projects', payloadKey: 'projects',
errorMessage: s__(
'ClusterIntegration|An error occured while trying to fetch your projects: %{error}',
),
}); });
export const getZones = ({ commit, state }) => export const getZones = ({ commit, state }) =>
...@@ -72,9 +51,6 @@ export const getZones = ({ commit, state }) => ...@@ -72,9 +51,6 @@ export const getZones = ({ commit, state }) =>
commit, commit,
mutation: types.SET_ZONES, mutation: types.SET_ZONES,
payloadKey: 'items', payloadKey: 'items',
errorMessage: s__(
'ClusterIntegration|An error occured while trying to fetch project zones: %{error}',
),
}); });
export const getMachineTypes = ({ commit, state }) => export const getMachineTypes = ({ commit, state }) =>
...@@ -87,9 +63,6 @@ export const getMachineTypes = ({ commit, state }) => ...@@ -87,9 +63,6 @@ export const getMachineTypes = ({ commit, state }) =>
commit, commit,
mutation: types.SET_MACHINE_TYPES, mutation: types.SET_MACHINE_TYPES,
payloadKey: 'items', 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 // prevent babel-plugin-rewire from generating an invalid default during karma tests
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7