Commit 7849def4 authored by Matthew Nearents's avatar Matthew Nearents Committed by Vitaly Slobodin

Added GlDropdown geo node form

parent 3d9f7a44
<script>
import { GlIcon, GlSearchBoxByType, GlDeprecatedDropdown, GlDeprecatedButton } from '@gitlab/ui';
import { GlIcon, GlSearchBoxByType, GlDropdown } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex';
import { __, n__ } from '~/locale';
import { SELECTIVE_SYNC_NAMESPACES } from '../constants';
......@@ -9,8 +9,7 @@ export default {
components: {
GlIcon,
GlSearchBoxByType,
GlDeprecatedDropdown,
GlDeprecatedButton,
GlDropdown,
},
props: {
selectedNamespaces: {
......@@ -48,14 +47,21 @@ export default {
</script>
<template>
<gl-deprecated-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces('')">
<gl-search-box-by-type class="gl-m-3" :debounce="500" @input="fetchSyncNamespaces" />
<li v-for="namespace in synchronizationNamespaces" :key="namespace.id">
<gl-deprecated-button class="d-flex align-items-center" @click="toggleNamespace(namespace)">
<gl-icon :class="[{ invisible: !isSelected(namespace) }]" name="mobile-issue-close" />
<span class="ml-1">{{ namespace.name }}</span>
</gl-deprecated-button>
</li>
<div v-if="noSyncNamespaces" class="text-secondary p-2">{{ __('Nothing found…') }}</div>
</gl-deprecated-dropdown>
<gl-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces('')">
<gl-search-box-by-type class=".gl-m-3" :debounce="500" @input="fetchSyncNamespaces" />
<button
v-for="namespace in synchronizationNamespaces"
:key="namespace.id"
class="dropdown-item"
type="button"
@click="toggleNamespace(namespace)"
>
<gl-icon
:class="[{ 'gl-visibility-hidden': !isSelected(namespace) }]"
name="mobile-issue-close"
/>
<span class="gl-ml-2">{{ namespace.name }}</span>
</button>
<div v-if="noSyncNamespaces" class="gl-text-gray-500 gl-p-3">{{ __('Nothing found…') }}</div>
</gl-dropdown>
</template>
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlIcon, GlSearchBoxByType, GlDeprecatedDropdown } from '@gitlab/ui';
import { GlIcon, GlSearchBoxByType, GlDropdown } from '@gitlab/ui';
import GeoNodeFormNamespaces from 'ee/geo_node_form/components/geo_node_form_namespaces.vue';
import { MOCK_SYNC_NAMESPACES } from '../mock_data';
......@@ -45,9 +45,9 @@ describe('GeoNodeFormNamespaces', () => {
wrapper.destroy();
});
const findGlDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findGlDropdown = () => wrapper.find(GlDropdown);
const findGlDropdownSearch = () => findGlDropdown().find(GlSearchBoxByType);
const findDropdownItems = () => findGlDropdown().findAll('li');
const findDropdownItems = () => findGlDropdown().findAll('button');
const findDropdownItemsText = () => findDropdownItems().wrappers.map(w => w.text());
const findGlIcons = () => wrapper.findAll(GlIcon);
......@@ -98,7 +98,7 @@ describe('GeoNodeFormNamespaces', () => {
});
it('hides GlIcon if namespace not in selectedNamespaces', () => {
expect(findGlIcons().wrappers.every(w => w.classes('invisible'))).toBe(true);
expect(findGlIcons().wrappers.every(w => w.classes('gl-visibility-hidden'))).toBe(true);
});
});
});
......
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