move errors next to input fields

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;
+      }
     },
   },
 };

app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue

 <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,6 +72,7 @@ export default {
 </script>
 
 <template>
+  <div>
     <div
       class="js-gcp-machine-type-dropdown dropdown"
       :class="{ 'gl-show-field-errors': hasErrors }"
@@ -108,4 +117,12 @@ export default {
         </div>
       </div>
     </div>
+    <span
+      class="help-block"
+      :class="{ 'gl-field-error': hasErrors }"
+      v-if="hasErrors"
+    >
+      {{ errorMessage }}
+    </span>
+  </div>
 </template>

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>

app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue

 <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,6 +51,7 @@ export default {
 </script>
 
 <template>
+  <div>
     <div
       class="js-gcp-zone-dropdown dropdown"
       :class="{ 'gl-show-field-errors': hasErrors }"
@@ -89,4 +96,12 @@ export default {
         </div>
       </div>
     </div>
+    <span
+      class="help-block"
+      :class="{ 'gl-field-error': hasErrors }"
+      v-if="hasErrors"
+    >
+      {{ errorMessage }}
+    </span>
+  </div>
 </template>

app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js

 /* 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