use component mixin to refactor components

7 files changed, 118 insertions, 194 deletions

diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gcp_dropdown_mixin.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gcp_dropdown_mixin.js
new file mode 100644
index 00000000000..26dc329ad1f
--- /dev/null
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gcp_dropdown_mixin.js
@@ -0,0 +1,62 @@
+import _ from 'underscore';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
+import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
+import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
+
+import store from '../stores';
+
+export default {
+  store,
+  components: {
+    LoadingIcon,
+    DropdownButton,
+    DropdownSearchInput,
+    DropdownHiddenInput,
+  },
+  props: {
+    fieldId: {
+      type: String,
+      required: true,
+    },
+    fieldName: {
+      type: String,
+      required: true,
+    },
+    defaultValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      hasErrors: false,
+      searchQuery: '',
+    };
+  },
+  computed: {
+    results() {
+      return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
+    },
+  },
+  methods: {
+    fetchSuccessHandler() {
+      if (this.defaultValue) {
+        const itemToSelect = _.find(this.items, item => item.name === this.defaultValue);
+
+        if (itemToSelect) {
+          this.setItem(itemToSelect.name);
+        }
+      }
+
+      this.isLoading = false;
+      this.hasErrors = false;
+    },
+    fetchFailureHandler() {
+      this.isLoading = false;
+      this.hasErrors = true;
+    },
+  },
+};
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 d65600117c0..991f2e91729 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
@@ -2,46 +2,15 @@
 import _ from 'underscore';
 import { s__ } from '~/locale';
 import { mapState, mapGetters, mapActions } from 'vuex';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
-import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
-import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
-import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
-import store from '../stores';
+import gcpDropdownMixin from './gcp_dropdown_mixin';
 
 export default {
   name: 'GkeMachineTypeDropdown',
-  store,
-  components: {
-    LoadingIcon,
-    DropdownButton,
-    DropdownSearchInput,
-    DropdownHiddenInput,
-  },
-  props: {
-    fieldId: {
-      type: String,
-      required: true,
-    },
-    fieldName: {
-      type: String,
-      required: true,
-    },
-    defaultValue: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isLoading: false,
-      hasErrors: false,
-      searchQuery: '',
-    };
-  },
+  mixins: [gcpDropdownMixin],
   computed: {
-    ...mapState(['selectedProject', 'selectedZone', 'selectedMachineType', 'machineTypes']),
+    ...mapState(['selectedProject', 'selectedZone', 'selectedMachineType']),
+    ...mapState({ items: 'machineTypes' }),
     ...mapGetters(['hasProject', 'hasZone', 'hasMachineType']),
     allDropdownsSelected() {
       return this.hasProject && this.hasZone && this.hasMachineType;
@@ -49,11 +18,6 @@ export default {
     isDisabled() {
       return !this.selectedProject || !this.selectedZone;
     },
-    results() {
-      return this.machineTypes.filter(
-        item => item.name.toLowerCase().indexOf(this.searchQuery) > -1,
-      );
-    },
     toggleText() {
       if (this.isLoading) {
         return s__('ClusterIntegration|Fetching machine types');
@@ -80,38 +44,19 @@ export default {
   },
   watch: {
     selectedZone() {
-      this.fetchMachineTypes();
+      this.isLoading = true;
+
+      this.getMachineTypes()
+        .then(this.fetchSuccessHandler)
+        .catch(this.fetchFailureHandler);
     },
     selectedMachineType() {
       this.enableSubmit();
     },
   },
   methods: {
-    ...mapActions(['setMachineType', 'getMachineTypes']),
-    fetchMachineTypes() {
-      this.isLoading = true;
-
-      this.getMachineTypes()
-        .then(() => {
-          if (this.defaultValue) {
-            const machineTypeToSelect = _.find(
-              this.machineTypes,
-              item => item.name === this.defaultValue,
-            );
-
-            if (machineTypeToSelect) {
-              this.setMachineType(machineTypeToSelect.name);
-            }
-          }
-
-          this.isLoading = false;
-          this.hasErrors = false;
-        })
-        .catch(() => {
-          this.isLoading = false;
-          this.hasErrors = true;
-        });
-    },
+    ...mapActions(['getMachineTypes']),
+    ...mapActions({ setItem: 'setMachineType' }),
     enableSubmit() {
       if (this.allDropdownsSelected) {
         const submitButtonEl = document.querySelector('.js-gke-cluster-creation-submit');
@@ -154,7 +99,7 @@ export default {
             v-for="result in results"
             :key="result.id"
           >
-            <button @click.prevent="setMachineType(result.name)">
+            <button @click.prevent="setItem(result.name)">
               {{ result.name }}
             </button>
           </li>
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 f813f784d47..95fcbc12cfb 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
@@ -2,59 +2,32 @@
 import _ from 'underscore';
 import { s__, sprintf } from '~/locale';
 import { mapState, mapGetters, mapActions } from 'vuex';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
-import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
-import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
-import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
-import store from '../stores';
+import gcpDropdownMixin from './gcp_dropdown_mixin';
 
 export default {
   name: 'GkeProjectIdDropdown',
-  store,
-  components: {
-    LoadingIcon,
-    DropdownButton,
-    DropdownSearchInput,
-    DropdownHiddenInput,
-  },
+  mixins: [gcpDropdownMixin],
   props: {
     docsUrl: {
       type: String,
       required: true,
     },
-    fieldId: {
-      type: String,
-      required: true,
-    },
-    fieldName: {
-      type: String,
-      required: true,
-    },
-    defaultValue: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   data() {
     return {
       isLoading: true,
-      hasErrors: false,
-      searchQuery: '',
     };
   },
   computed: {
-    ...mapState(['selectedProject', 'projects']),
+    ...mapState(['selectedProject']),
+    ...mapState({ items: 'projects' }),
     ...mapGetters(['hasProject']),
     hasOneProject() {
-      return this.projects.length === 1;
+      return this.items.length === 1;
     },
     isDisabled() {
-      return this.projects.length < 2;
-    },
-    results() {
-      return this.projects.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
+      return this.items.length < 2;
     },
     noSearchResultsText() {
       return s__('ClusterIntegration|No projects matched your search');
@@ -68,7 +41,7 @@ export default {
         return this.selectedProject.name;
       }
 
-      return !this.projects.length
+      return !this.items.length
         ? s__('ClusterIntegration|No projects found')
         : s__('ClusterIntegration|Select project');
     },
@@ -82,7 +55,7 @@ export default {
           'ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';
       }
 
-      message = this.projects.length
+      message = this.items.length
         ? 'ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'
         : 'ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.';
 
@@ -99,34 +72,29 @@ export default {
     },
   },
   created() {
-    this.fetchProjects();
-  },
-  methods: {
-    ...mapActions(['setProject', 'getProjects']),
-    fetchProjects() {
-      this.getProjects()
-        .then(() => {
-          if (this.defaultValue) {
-            const projectToSelect = _.find(
-              this.projects,
-              item => item.projectId === this.defaultValue,
-            );
+    this.getProjects()
+      .then(() => {
+        if (this.defaultValue) {
+          const projectToSelect = _.find(this.items, item => item.projectId === this.defaultValue);
 
-            if (projectToSelect) {
-              this.setProject(projectToSelect);
-            }
-          } else if (this.projects.length === 1) {
-            this.setProject(this.projects[0]);
+          if (projectToSelect) {
+            this.setItem(projectToSelect);
           }
+        } else if (this.items.length === 1) {
+          this.setItem(this.items[0]);
+        }
 
-          this.isLoading = false;
-          this.hasErrors = false;
-        })
-        .catch(() => {
-          this.isLoading = false;
-          this.hasErrors = true;
-        });
-    },
+        this.isLoading = false;
+        this.hasErrors = false;
+      })
+      .catch(() => {
+        this.isLoading = false;
+        this.hasErrors = true;
+      });
+  },
+  methods: {
+    ...mapActions(['getProjects']),
+    ...mapActions({ setItem: 'setProject' }),
   },
 };
 </script>
@@ -164,7 +132,7 @@ export default {
               v-for="result in results"
               :key="result.project_number"
             >
-              <button @click.prevent="setProject(result)">
+              <button @click.prevent="setItem(result)">
                 {{ result.name }}
               </button>
             </li>
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 f27cee3bf07..35220d8d960 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
@@ -1,54 +1,19 @@
 <script>
-import _ from 'underscore';
 import { s__ } from '~/locale';
 import { mapState, mapGetters, mapActions } from 'vuex';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
-import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
-import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
-import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
-import store from '../stores';
+import gcpDropdownMixin from './gcp_dropdown_mixin';
 
 export default {
   name: 'GkeZoneDropdown',
-  store,
-  components: {
-    LoadingIcon,
-    DropdownButton,
-    DropdownSearchInput,
-    DropdownHiddenInput,
-  },
-  props: {
-    fieldId: {
-      type: String,
-      required: true,
-    },
-    fieldName: {
-      type: String,
-      required: true,
-    },
-    defaultValue: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isLoading: false,
-      hasErrors: false,
-      searchQuery: '',
-    };
-  },
+  mixins: [gcpDropdownMixin],
   computed: {
-    ...mapState(['selectedProject', 'selectedZone', 'zones']),
+    ...mapState(['selectedProject', 'selectedZone']),
+    ...mapState({ items: 'zones' }),
     ...mapGetters(['hasProject']),
     isDisabled() {
       return !this.hasProject;
     },
-    results() {
-      return this.zones.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
-    },
     toggleText() {
       if (this.isLoading) {
         return s__('ClusterIntegration|Fetching zones');
@@ -71,33 +36,17 @@ export default {
   },
   watch: {
     selectedProject() {
-      this.fetchZones();
-    },
-  },
-  methods: {
-    ...mapActions(['setZone', 'getZones']),
-    fetchZones() {
       this.isLoading = true;
 
       this.getZones()
-        .then(() => {
-          if (this.defaultValue) {
-            const zoneToSelect = _.find(this.zones, item => item.name === this.defaultValue);
-
-            if (zoneToSelect) {
-              this.setZone(zoneToSelect.name);
-            }
-          }
-
-          this.isLoading = false;
-          this.hasErrors = false;
-        })
-        .catch(() => {
-          this.isLoading = false;
-          this.hasErrors = true;
-        });
+        .then(this.fetchSuccessHandler)
+        .catch(this.fetchFailureHandler);
     },
   },
+  methods: {
+    ...mapActions(['getZones']),
+    ...mapActions({ setItem: 'setZone' }),
+  },
 };
 </script>
 
@@ -130,7 +79,7 @@ export default {
             v-for="result in results"
             :key="result.id"
           >
-            <button @click.prevent="setZone(result.name)">
+            <button @click.prevent="setItem(result.name)">
               {{ result.name }}
             </button>
           </li>
diff --git a/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js
index 421ec74bb65..fe1aff2bd09 100644
--- a/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js
+++ b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js
@@ -73,7 +73,7 @@ describe('GkeMachineTypeDropdown', () => {
     });
 
     it('returns machine type name if machine type selected', () => {
-      vm.setMachineType(selectedMachineTypeMock);
+      vm.setItem(selectedMachineTypeMock);
 
       expect(vm.toggleText).toBe(selectedMachineTypeMock);
     });
diff --git a/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js
index 28b1dc466f7..d88c55216dd 100644
--- a/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js
+++ b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js
@@ -45,7 +45,7 @@ describe('GkeProjectIdDropdown', () => {
     it('returns default toggle text', done => {
       vm.$nextTick(() => {
         vm.$nextTick(() => {
-          vm.setProject(emptyProjectMock);
+          vm.setItem(emptyProjectMock);
 
           expect(vm.toggleText).toBe(LABELS.DEFAULT);
           done();
@@ -65,7 +65,7 @@ describe('GkeProjectIdDropdown', () => {
     it('returns empty toggle text', done => {
       vm.$nextTick(() => {
         vm.$store.commit(SET_PROJECTS, []);
-        vm.setProject(emptyProjectMock);
+        vm.setItem(emptyProjectMock);
 
         vm.$nextTick(() => {
           expect(vm.toggleText).toBe(LABELS.EMPTY);
diff --git a/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js
index cb137e33a0d..b8b06a06be0 100644
--- a/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js
+++ b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js
@@ -55,7 +55,7 @@ describe('GkeZoneDropdown', () => {
     });
 
     it('returns project name if project selected', () => {
-      vm.setZone(selectedZoneMock);
+      vm.setItem(selectedZoneMock);
 
       expect(vm.toggleText).toBe(selectedZoneMock);
     });