refactoring!

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

 <script>
+import _ from 'underscore';
 import Flash from '~/flash';
-import { s__ } from '~/locale';
-import { mapActions } from 'vuex';
+import { s__, sprintf } from '~/locale';
+import { mapState, mapGetters, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
@@ -10,7 +11,6 @@ import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidde
 import eventHub from '../eventhub';
 import store from '../stores';
 import DropdownButton from './dropdown_button.vue';
-// TODO: Fall back to default us-central1-a or first option
 
 export default {
   name: 'GkeMachineTypeDropdown',
@@ -35,40 +35,43 @@ export default {
       type: String,
       required: true,
     },
+    inputValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
       isLoading: false,
       hasErrors: false,
       searchQuery: '',
-      selectedItem: '',
       items: [],
     };
   },
   computed: {
+    ...mapState(['selectedProject', 'selectedZone', 'selectedMachineType']),
+    ...mapGetters(['hasProject', 'hasZone']),
     isDisabled() {
-      return (
-        this.$store.state.selectedProject.length === 0 ||
-        this.$store.state.selectedZone.length === 0
-      );
+      return !this.selectedProject || !this.selectedZone;
     },
-    results() {
+    searchResults() {
       return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
     },
     toggleText() {
-      if (this.$store.state.selectedMachineType) {
-        return this.$store.state.selectedMachineType;
-      }
-
       if (this.isLoading) {
         return s__('ClusterIntegration|Fetching machine types');
       }
 
-      if (!this.$store.state.selectedProject) {
+      if (this.selectedMachineType) {
+        return this.selectedMachineType;
+      }
+
+      if (!this.hasProject && !this.hasZone) {
         return s__('ClusterIntegration|Select project and zone to choose machine type.');
       }
 
-      return this.$store.state.selectedZone
+      return this.hasZone
         ? s__('ClusterIntegration|Select machine type')
         : s__('ClusterIntegration|Select zone to choose machine type');
     },
@@ -85,34 +88,22 @@ export default {
     fetchItems() {
       this.isLoading = true;
       const request = this.service.machineTypes.list({
-        project: this.$store.state.selectedProject.projectId,
-        zone: this.$store.state.selectedZone,
+        project: this.selectedProject.projectId,
+        zone: this.selectedZone,
       });
 
       return request.then(
         resp => {
+          let machineTypeToSelect;
           this.items = resp.result.items;
 
-          // 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,
-          //   },
-          // ];
-
-          if (this.items.length === 1) {
-            this.isDisabled = true;
-            this.setMachineType(this.items[0].name);
+          if (this.inputValue) {
+            machineTypeToSelect = _.find(this.items, item => item.name === this.inputValue);
+            this.setMachineType(machineTypeToSelect.name);
           }
 
           this.isLoading = false;
+          this.hasErrors = false;
         },
         () => {
           this.isLoading = false;
@@ -120,9 +111,10 @@ export default {
 
           if (resp.result.error) {
             Flash(
-              `${s__(
-                'ClusterIntegration|An error occured while trying to fetch zone machine types:',
-              )} ${resp.result.error.message}`,
+              sprintf(
+                'ClusterIntegration|An error occured while trying to fetch zone machine types: %{error}',
+                { error: resp.result.error.message },
+              ),
             );
           }
         },
@@ -130,7 +122,7 @@ export default {
       );
     },
     enableSubmit() {
-      document.querySelector('input[type=submit]').removeAttribute('disabled');
+      document.querySelector('.js-gke-cluster-creation-submit').removeAttribute('disabled');
     },
   },
 };
@@ -143,7 +135,7 @@ export default {
   >
     <dropdown-hidden-input
       :name="fieldName"
-      :value="$store.state.selectedMachineType"
+      :value="selectedMachineType"
     />
     <dropdown-button
       :class="{ 'gl-field-error-outline': hasErrors }"
@@ -159,7 +151,7 @@ export default {
       <div class="dropdown-content">
         <ul>
           <li
-            v-for="result in results"
+            v-for="result in searchResults"
             :key="result.id"
           >
             <a

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

@@ -2,7 +2,7 @@
 import _ from 'underscore';
 import Flash from '~/flash';
 import { s__, sprintf } from '~/locale';
-import { mapActions } from 'vuex';
+import { mapState, mapGetters, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
@@ -39,32 +39,38 @@ export default {
       type: String,
       required: true,
     },
+    inputValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
       isLoading: true,
       hasErrors: false,
       searchQuery: '',
-      selectedItem: '',
       items: [],
     };
   },
   computed: {
+    ...mapState(['selectedProject']),
+    ...mapGetters(['hasProject']),
     isDisabled() {
       return this.items.length < 2;
     },
-    results() {
+    searchResults() {
       return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
     },
     toggleText() {
-      if (this.$store.state.selectedProject.name) {
-        return this.$store.state.selectedProject.name;
-      }
-
       if (this.isLoading) {
         return s__('ClusterIntegration|Fetching projects');
       }
 
+      if (this.hasProject) {
+        return this.selectedProject.name;
+      }
+
       return this.items.length
         ? s__('ClusterIntegration|Select project')
         : s__('ClusterIntegration|No projects found');
@@ -105,24 +111,34 @@ export default {
 
       return request.then(
         resp => {
+          let projectToSelect;
           this.items = resp.result.projects;
 
-          this.isLoading = false;
-          if (this.items.length === 1) {
-            this.setProject(this.items[0]);
+          if (this.inputValue) {
+            projectToSelect = _.find(this.items, item => item.projectId === this.inputValue);
+            this.setProject(projectToSelect);
+          } else if (this.items.length === 1) {
+            projectToSelect = this.items[0];
+            this.setProject(projectToSelect);
           }
+
+          this.isLoading = false;
+          this.hasErrors = false;
         },
         resp => {
-          this.isLoading = false;
-          this.hasErrors = true;
-
           if (resp.result.error) {
             Flash(
-              `${s__('ClusterIntegration|An error occured while trying to fetch your projects:')} ${
-                resp.result.error.message
-              }`,
+              sprintf(
+                'ClusterIntegration|An error occured while trying to fetch your projects: %{error}',
+                {
+                  error: resp.result.error.message,
+                },
+              ),
             );
           }
+
+          this.isLoading = false;
+          this.hasErrors = true;
         },
         this,
       );
@@ -139,7 +155,7 @@ export default {
     >
       <dropdown-hidden-input
         :name="fieldName"
-        :value="$store.state.selectedProject.projectId"
+        :value="selectedProject.projectId"
       />
       <dropdown-button
         :class="{ 'gl-field-error-outline': hasErrors }"
@@ -155,7 +171,7 @@ export default {
         <div class="dropdown-content">
           <ul>
             <li
-              v-for="result in results"
+              v-for="result in searchResults"
               :key="result.project_number"
             >
               <a

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

 <script>
+import _ from 'underscore';
 import Flash from '~/flash';
-import { s__ } from '~/locale';
-import { mapActions } from 'vuex';
+import { s__, sprintf } from '~/locale';
+import { mapState, mapGetters, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
@@ -10,7 +11,6 @@ import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidde
 import eventHub from '../eventhub';
 import store from '../stores';
 import DropdownButton from './dropdown_button.vue';
-// TODO: Fall back to default us-central1-a or first option
 
 export default {
   name: 'GkeZoneDropdown',
@@ -35,33 +35,39 @@ export default {
       type: String,
       required: true,
     },
+    inputValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
       isLoading: false,
       hasErrors: false,
       searchQuery: '',
-      selectedItem: '',
       items: [],
     };
   },
   computed: {
+    ...mapState(['selectedProject', 'selectedZone']),
+    ...mapGetters(['hasProject']),
     isDisabled() {
-      return this.$store.state.selectedProject.projectId.length === 0;
+      return !this.hasProject;
     },
-    results() {
+    searchResults() {
       return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
     },
     toggleText() {
-      if (this.$store.state.selectedZone) {
-        return this.$store.state.selectedZone;
-      }
-
       if (this.isLoading) {
         return s__('ClusterIntegration|Fetching zones');
       }
 
-      return this.$store.state.selectedProject
+      if (this.selectedZone) {
+        return this.selectedZone;
+      }
+
+      return this.$store.state.selectedProject.projectId.length
         ? s__('ClusterIntegration|Select zone')
         : s__('ClusterIntegration|Select project to choose zone');
     },
@@ -77,33 +83,21 @@ export default {
     fetchItems() {
       this.isLoading = true;
       const request = this.service.zones.list({
-        project: this.$store.state.selectedProject.projectId,
+        project: this.selectedProject.projectId,
       });
 
       return request.then(
         resp => {
+          let zoneToSelect;
           this.items = resp.result.items;
 
-          // 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,
-          //   },
-          // ];
-
-          if (this.items.length === 1) {
-            this.isDisabled = true;
-            this.setZone(this.items[0].name);
+          if (this.inputValue) {
+            zoneToSelect = _.find(this.items, item => item.name === this.inputValue);
+            this.setZone(zoneToSelect.name);
           }
 
           this.isLoading = false;
+          this.hasErrors = false;
         },
         resp => {
           this.isLoading = false;
@@ -111,9 +105,10 @@ export default {
 
           if (resp.result.error) {
             Flash(
-              `${s__('ClusterIntegration|An error occured while trying to fetch project zones:')} ${
-                resp.result.error.message
-              }`,
+              sprintf(
+                'ClusterIntegration|An error occured while trying to fetch project zones: %{error}',
+                { error: resp.result.error.message },
+              ),
             );
           }
         },
@@ -131,7 +126,7 @@ export default {
   >
     <dropdown-hidden-input
       :name="fieldName"
-      :value="$store.state.selectedZone"
+      :value="selectedZone"
     />
     <dropdown-button
       :class="{ 'gl-field-error-outline': hasErrors }"
@@ -147,7 +142,7 @@ export default {
       <div class="dropdown-content">
         <ul>
           <li
-            v-for="result in results"
+            v-for="result in searchResults"
             :key="result.id"
           >
             <a

app/assets/javascripts/projects/gke_cluster_dropdowns/index.js

@@ -24,6 +24,7 @@ const mountGkeProjectIdDropdown = () => {
           service: gapi.client.cloudresourcemanager,
           fieldName: hiddenInput.getAttribute('name'),
           fieldId: hiddenInput.getAttribute('id'),
+          inputValue: hiddenInput.value,
         },
       }),
   });
@@ -46,6 +47,7 @@ const mountGkeZoneDropdown = () => {
           service: gapi.client.compute,
           fieldName: hiddenInput.getAttribute('name'),
           fieldId: hiddenInput.getAttribute('id'),
+          inputValue: hiddenInput.value,
         },
       }),
   });
@@ -68,6 +70,7 @@ const mountGkeMachineTypeDropdown = () => {
           service: gapi.client.compute,
           fieldName: hiddenInput.getAttribute('name'),
           fieldId: hiddenInput.getAttribute('id'),
+          inputValue: hiddenInput.value,
         },
       }),
   });
@@ -78,9 +81,10 @@ const gkeDropdownErrorHandler = () => {
 };
 
 const initializeGapiClient = () => {
-  const el = document.getElementById('new_cluster');
+  const el = document.querySelector('.js-gke-cluster-creation');
 
   gapi.client.setToken({ access_token: el.dataset.token });
+  delete el.dataset.token;
 
   gapi.client
     .load(CONSTANTS.GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT)

app/assets/javascripts/projects/gke_cluster_dropdowns/stores/getters.js

+export const hasProject = state => !!state.selectedProject.projectId;
+export const hasZone = state => !!state.selectedZone;
+export const hasMachineType = state => !!state.selectedMachineType;

app/assets/stylesheets/pages/clusters.scss

@@ -27,7 +27,7 @@
   }
 }
 
-#new_cluster {
+.js-gke-cluster-creation {
   .dropdown-menu-toggle {
     .loading-container {
       .fa {

app/views/projects/clusters/gcp/_form.html.haml

@@ -4,7 +4,7 @@
   - link_to_help_page = link_to(s_('ClusterIntegration|help page'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
   = s_('ClusterIntegration|Read our %{link_to_help_page} on Kubernetes cluster integration.').html_safe % { link_to_help_page: link_to_help_page}
 
-= form_for @cluster, html: { class: 'prepend-top-20', data: { token: @token_in_session } }, url: gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
+= form_for @cluster, html: { class: 'js-gke-cluster-creation prepend-top-20', data: { token: @token_in_session } }, url: gcp_namespace_project_clusters_path(@project.namespace, @project), as: :cluster do |field|
   = form_errors(@cluster)
   .form-group
     = field.label :name, s_('ClusterIntegration|Kubernetes cluster name')
@@ -51,4 +51,4 @@
             = icon('chevron-down')
 
     .form-group
-      = field.submit s_('ClusterIntegration|Create Kubernetes cluster'), class: 'btn btn-success', disabled: true
+      = field.submit s_('ClusterIntegration|Create Kubernetes cluster'), class: 'js-gke-cluster-creation-submit btn btn-success', disabled: true