diff options
author | Dennis Tang <dtang@gitlab.com> | 2018-05-08 15:24:50 +0200 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2018-05-08 15:24:50 +0200 |
commit | aa7e55f274a362078ad728262337a50fd9ea5972 (patch) | |
tree | a71991c9200272bbd76321d62ae4c107f0329fd8 | |
parent | da3610fff25b2d21e2ad33196bf34dbbf6fddcf3 (diff) | |
download | gitlab-ce-aa7e55f274a362078ad728262337a50fd9ea5972.tar.gz |
refactor dropdown reusable components
-rw-r--r-- | app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue (renamed from app/assets/javascripts/projects/gke_cluster_dropdowns/components/dropdown_button.vue) | 20 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue | 22 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js | 37 |
9 files changed, 20 insertions, 75 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> diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js deleted file mode 100644 index 88733922a59..00000000000 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js +++ /dev/null @@ -1,37 +0,0 @@ -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}`); - }); - }); -}); |