Commit aa7e55f2 authored by Dennis Tang's avatar Dennis Tang

refactor dropdown reusable components

parent da3610ff
......@@ -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',
......
......@@ -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',
......
......@@ -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',
......
<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>
......@@ -6,7 +6,7 @@ export default {
required: true,
},
value: {
type: String,
type: [Number, String],
required: true,
},
},
......
......@@ -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"
>
......
......@@ -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"
......
<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>
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}`);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment