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,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>

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,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>

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