fix number of form value bugs

4 files changed, 26 insertions, 32 deletions

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 9f05b1ab01f..ff67cf848d2 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
@@ -85,7 +85,7 @@ export default {
     fetchItems() {
       this.isLoading = true;
       const request = this.service.machineTypes.list({
-        project: this.$store.state.selectedProject,
+        project: this.$store.state.selectedProject.projectId,
         zone: this.$store.state.selectedZone,
       });
 
@@ -143,7 +143,7 @@ export default {
   >
     <dropdown-hidden-input
       :name="fieldName"
-      :value="$store.state.selectedProject"
+      :value="$store.state.selectedMachineType"
     />
     <dropdown-button
       :class="{ 'gl-field-error-outline': hasErrors }"
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 c37b49441ac..1bc826477dc 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
@@ -11,7 +11,6 @@ import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidde
 import store from '../stores';
 import DropdownButton from './dropdown_button.vue';
 // TODO: Consolidate dropdown code
-// TODO: Account for invalid project settings/errors (project returns error when retrieving zones)
 
 export default {
   name: 'GkeProjectIdDropdown',
@@ -43,7 +42,6 @@ export default {
   },
   data() {
     return {
-      isDisabled: false,
       isLoading: true,
       hasErrors: false,
       searchQuery: '',
@@ -52,17 +50,24 @@ export default {
     };
   },
   computed: {
+    isDisabled() {
+      return this.items.length < 2;
+    },
     results() {
       return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
     },
     toggleText() {
-      if (this.$store.state.selectedProject) {
-        return this.$store.state.selectedProject;
+      if (this.$store.state.selectedProject.name) {
+        return this.$store.state.selectedProject.name;
+      }
+
+      if (this.isLoading) {
+        return s__('ClusterIntegration|Fetching projects');
       }
 
-      return this.isLoading
-        ? s__('ClusterIntegration|Fetching projects')
-        : s__('ClusterIntegration|Select project');
+      return this.items.length
+        ? s__('ClusterIntegration|Select project')
+        : s__('ClusterIntegration|No projects found');
     },
     placeholderText() {
       return s__('ClusterIntegration|Search projects');
@@ -102,26 +107,10 @@ export default {
         resp => {
           this.items = resp.result.projects;
 
-          // Cause error
-          // this.items = data;
-
-          // Single state
-          // this.items = [
-          //   {
-          //     create_time: '2018-01-16T15:55:02.992Z',
-          //     lifecycle_state: 'ACTIVE',
-          //     name: 'NaturalInterface',
-          //     item_id: 'naturalinterface-192315',
-          //     item_number: 840816084083,
-          //   },
-          // ];
-
+          this.isLoading = false;
           if (this.items.length === 1) {
-            this.isDisabled = true;
-            this.setProject(this.items[0].name);
+            this.setProject(this.items[0]);
           }
-
-          this.isLoading = false;
         },
         resp => {
           this.isLoading = false;
@@ -150,7 +139,7 @@ export default {
     >
       <dropdown-hidden-input
         :name="fieldName"
-        :value="$store.state.selectedProject"
+        :value="$store.state.selectedProject.projectId"
       />
       <dropdown-button
         :class="{ 'gl-field-error-outline': hasErrors }"
@@ -171,7 +160,7 @@ export default {
             >
               <a
                 href="#"
-                @click.prevent="setProject(result.name)"
+                @click.prevent="setProject(result)"
               >{{ result.name }}</a>
             </li>
           </ul>
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 9b1dfe00f02..b8f3f0fd8ca 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
@@ -76,7 +76,9 @@ export default {
     ...mapActions(['setZone']),
     fetchItems() {
       this.isLoading = true;
-      const request = this.service.zones.list({ project: this.$store.state.selectedProject });
+      const request = this.service.zones.list({
+        project: this.$store.state.selectedProject.projectId,
+      });
 
       return request.then(
         resp => {
@@ -129,7 +131,7 @@ export default {
   >
     <dropdown-hidden-input
       :name="fieldName"
-      :value="$store.state.selectedProject"
+      :value="$store.state.selectedZone"
     />
     <dropdown-button
       :class="{ 'gl-field-error-outline': hasErrors }"
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/index.js
index 76e839efa88..9d4b8d572b5 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/index.js
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/stores/index.js
@@ -11,7 +11,10 @@ export default new Vuex.Store({
   getters,
   mutations,
   state: {
-    selectedProject: '',
+    selectedProject: {
+      projectId: '',
+      name: '',
+    },
     selectedZone: '',
     selectedMachineType: '',
   },