cleanup

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

@@ -3,11 +3,17 @@ import _ from 'underscore';
 import { s__ } from '~/locale';
 import { mapState, mapGetters, mapActions } from 'vuex';
 
-import gcpDropdownMixin from './gcp_dropdown_mixin';
+import gkeDropdownMixin from './gke_dropdown_mixin';
 
 export default {
   name: 'GkeMachineTypeDropdown',
-  mixins: [gcpDropdownMixin],
+  mixins: [gkeDropdownMixin],
+  data() {
+    return {
+      searchPlaceholderText: s__('ClusterIntegration|Search machine types'),
+      noSearchResultsText: s__('ClusterIntegration|No machine types matched your search'),
+    };
+  },
   computed: {
     ...mapState(['selectedProject', 'selectedZone', 'selectedMachineType']),
     ...mapState({ items: 'machineTypes' }),
@@ -35,12 +41,6 @@ export default {
         ? s__('ClusterIntegration|Select zone to choose machine type')
         : s__('ClusterIntegration|Select machine type');
     },
-    searchPlaceholderText() {
-      return s__('ClusterIntegration|Search machine types');
-    },
-    noSearchResultsText() {
-      return s__('ClusterIntegration|No machine types matched your search');
-    },
   },
   watch: {
     selectedZone() {

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

@@ -3,11 +3,11 @@ import _ from 'underscore';
 import { s__, sprintf } from '~/locale';
 import { mapState, mapGetters, mapActions } from 'vuex';
 
-import gcpDropdownMixin from './gcp_dropdown_mixin';
+import gkeDropdownMixin from './gke_dropdown_mixin';
 
 export default {
   name: 'GkeProjectIdDropdown',
-  mixins: [gcpDropdownMixin],
+  mixins: [gkeDropdownMixin],
   props: {
     docsUrl: {
       type: String,
@@ -17,6 +17,8 @@ export default {
   data() {
     return {
       isLoading: true,
+      searchPlaceholderText: s__('ClusterIntegration|Search projects'),
+      noSearchResultsText: s__('ClusterIntegration|No projects matched your search'),
     };
   },
   computed: {
@@ -29,9 +31,6 @@ export default {
     isDisabled() {
       return this.items.length < 2;
     },
-    noSearchResultsText() {
-      return s__('ClusterIntegration|No projects matched your search');
-    },
     toggleText() {
       if (this.isLoading) {
         return s__('ClusterIntegration|Fetching projects');
@@ -45,9 +44,6 @@ export default {
         ? s__('ClusterIntegration|No projects found')
         : s__('ClusterIntegration|Select project');
     },
-    searchPlaceholderText() {
-      return s__('ClusterIntegration|Search projects');
-    },
     helpText() {
       let message;
       if (this.hasErrors) {
@@ -73,25 +69,26 @@ export default {
   },
   created() {
     this.getProjects()
-      .then(() => {
-        if (this.defaultValue) {
-          const projectToSelect = _.find(this.items, item => item.projectId === this.defaultValue);
-
-          if (projectToSelect) {
-            this.setItem(projectToSelect);
-          }
-        } else if (this.items.length === 1) {
-          this.setItem(this.items[0]);
-        }
-
-        this.isLoading = false;
-        this.hasErrors = false;
-      })
+      .then(this.fetchSuccessHandler)
       .catch(this.fetchFailureHandler);
   },
   methods: {
     ...mapActions(['getProjects']),
     ...mapActions({ setItem: 'setProject' }),
+    fetchSuccessHandler() {
+      if (this.defaultValue) {
+        const projectToSelect = _.find(this.items, item => item.projectId === this.defaultValue);
+
+        if (projectToSelect) {
+          this.setItem(projectToSelect);
+        }
+      } else if (this.items.length === 1) {
+        this.setItem(this.items[0]);
+      }
+
+      this.isLoading = false;
+      this.hasErrors = false;
+    },
   },
 };
 </script>

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

@@ -2,11 +2,17 @@
 import { s__ } from '~/locale';
 import { mapState, mapGetters, mapActions } from 'vuex';
 
-import gcpDropdownMixin from './gcp_dropdown_mixin';
+import gkeDropdownMixin from './gke_dropdown_mixin';
 
 export default {
   name: 'GkeZoneDropdown',
-  mixins: [gcpDropdownMixin],
+  mixins: [gkeDropdownMixin],
+  data() {
+    return {
+      searchPlaceholderText: s__('ClusterIntegration|Search zones'),
+      noSearchResultsText: s__('ClusterIntegration|No zones matched your search'),
+    };
+  },
   computed: {
     ...mapState(['selectedProject', 'selectedZone']),
     ...mapState({ items: 'zones' }),
@@ -27,12 +33,6 @@ export default {
         ? s__('ClusterIntegration|Select project to choose zone')
         : s__('ClusterIntegration|Select zone');
     },
-    searchPlaceholderText() {
-      return s__('ClusterIntegration|Search zones');
-    },
-    noSearchResultsText() {
-      return s__('ClusterIntegration|No zones matched your search');
-    },
   },
   watch: {
     selectedProject() {