refactor dropdown reusable components

8 files changed, 20 insertions, 38 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 5a4dca0b69d..4ae5fc64a86 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
@@ -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',
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 e5364c3278a..c4547aa4709 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
@@ -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',
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 71d8c5491ae..103d49fab4c 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
@@ -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',
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
index 7df8c467965..7862b204f20 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -1,5 +1,5 @@
 <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>
-    <i
-      aria-hidden="true"
-      data-hidden="true"
+    <span
+      class="dropdown-toggle-icon"
       v-show="!isLoading"
-      class="fa fa-chevron-down"
-    ></i>
+    >
+      <i
+        class="fa fa-chevron-down"
+        aria-hidden="true"
+        data-hidden="true"
+      ></i>
+  </span>
   </button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
index 7f3e88a9a40..1fe27eb97ab 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
+++ b/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,
     },
   },
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
index 17afd2cbdae..c2145a26e64 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
+++ b/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"
     >
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
index 70b46a9c2bb..f155ac2be02 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
+++ b/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"
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue
deleted file mode 100644
index 1832c3c1757..00000000000
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<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>