refactor dropdown reusable components

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

@@ -5,10 +5,10 @@ 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 eventHub from '../eventhub';
 import store from '../stores';
-import DropdownButton from './dropdown_button.vue';
 
 export default {
   name: 'GkeMachineTypeDropdown',

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

@@ -5,9 +5,9 @@ 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 DropdownButton from './dropdown_button.vue';
 
 export default {
   name: 'GkeProjectIdDropdown',

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

@@ -5,10 +5,10 @@ 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 eventHub from '../eventhub';
 import store from '../stores';
-import DropdownButton from './dropdown_button.vue';
 
 export default {
   name: 'GkeZoneDropdown',

app/assets/javascripts/projects/gke_cluster_dropdowns/components/dropdown_button.vue → app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue

 <script>
-import { s__ } from '~/locale';
+import { __ } from '~/locale';
 import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 
 export default {
@@ -19,8 +19,8 @@ export default {
     },
     toggleText: {
       type: String,
-      required: true,
-      default: s__('ClusterIntegration|Select'),
+      required: false,
+      default: __('Select'),
     },
   },
 };
@@ -41,11 +41,15 @@ export default {
     <span class="dropdown-toggle-text">
       {{ toggleText }}
     </span>
+    <span
+      class="dropdown-toggle-icon"
+      v-show="!isLoading"
+    >
       <i
+        class="fa fa-chevron-down"
         aria-hidden="true"
         data-hidden="true"
-      v-show="!isLoading"
-      class="fa fa-chevron-down"
       ></i>
+  </span>
   </button>
 </template>

app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue

@@ -6,7 +6,7 @@ export default {
       required: true,
     },
     value: {
-      type: String,
+      type: [Number, String],
       required: true,
     },
   },

app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue

@@ -30,14 +30,14 @@ export default {
       autocomplete="off"
     />
     <i
-      aria-hidden="true"
       class="fa fa-search dropdown-input-search"
+      aria-hidden="true"
       data-hidden="true"
     >
     </i>
     <i
-      aria-hidden="true"
       class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+      aria-hidden="true"
       data-hidden="true"
       role="button"
     >

app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue

@@ -2,13 +2,13 @@
 import $ from 'jquery';
 import { __ } from '~/locale';
 import LabelsSelect from '~/labels_select';
+import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import LoadingIcon from '../../loading_icon.vue';
 
 import DropdownTitle from './dropdown_title.vue';
 import DropdownValue from './dropdown_value.vue';
 import DropdownValueCollapsed from './dropdown_value_collapsed.vue';
 import DropdownButton from './dropdown_button.vue';
-import DropdownHiddenInput from './dropdown_hidden_input.vue';
 import DropdownHeader from './dropdown_header.vue';
 import DropdownSearchInput from './dropdown_search_input.vue';
 import DropdownFooter from './dropdown_footer.vue';
@@ -140,7 +140,7 @@ export default {
         v-for="label in context.labels"
         :key="label.id"
         :name="hiddenInputName"
-        :label="label"
+        :value="label.id"
       />
       <div
         class="dropdown"

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue

-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <input
-    type="hidden"
-    :name="name"
-    :value="label.id"
-  />
-</template>

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js

-import Vue from 'vue';
-
-import dropdownHiddenInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockLabels } from './mock_data';
-
-const createComponent = (name = 'label_id[]', label = mockLabels[0]) => {
-  const Component = Vue.extend(dropdownHiddenInputComponent);
-
-  return mountComponent(Component, {
-    name,
-    label,
-  });
-};
-
-describe('DropdownHiddenInputComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('template', () => {
-    it('renders input element of type `hidden`', () => {
-      expect(vm.$el.nodeName).toBe('INPUT');
-      expect(vm.$el.getAttribute('type')).toBe('hidden');
-      expect(vm.$el.getAttribute('name')).toBe(vm.name);
-      expect(vm.$el.getAttribute('value')).toBe(`${vm.label.id}`);
-    });
-  });
-});