Commit 8a645d43 authored by Florie Guibert's avatar Florie Guibert Committed by Natalia Tepluhina

Labels widget follow up

parent 14ab76f9
...@@ -195,12 +195,12 @@ export default { ...@@ -195,12 +195,12 @@ export default {
> >
<template #header> <template #header>
<dropdown-header <dropdown-header
v-if="!isStandalone"
ref="header" ref="header"
v-model="searchKey" :search-key="searchKey"
:labels-create-title="labelsCreateTitle" :labels-create-title="labelsCreateTitle"
:labels-list-title="labelsListTitle" :labels-list-title="labelsListTitle"
:show-dropdown-contents-create-view="showDropdownContentsCreateView" :show-dropdown-contents-create-view="showDropdownContentsCreateView"
:is-standalone="isStandalone"
@toggleDropdownContentsCreateView="toggleDropdownContent" @toggleDropdownContentsCreateView="toggleDropdownContent"
@closeDropdown="$emit('closeDropdown')" @closeDropdown="$emit('closeDropdown')"
@input="debouncedSearchKeyUpdate" @input="debouncedSearchKeyUpdate"
......
...@@ -6,9 +6,6 @@ export default { ...@@ -6,9 +6,6 @@ export default {
GlButton, GlButton,
GlSearchBoxByType, GlSearchBoxByType,
}, },
model: {
prop: 'searchKey',
},
props: { props: {
labelsCreateTitle: { labelsCreateTitle: {
type: String, type: String,
...@@ -31,6 +28,11 @@ export default { ...@@ -31,6 +28,11 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
isStandalone: {
type: Boolean,
required: false,
default: false,
},
}, },
computed: { computed: {
dropdownTitle() { dropdownTitle() {
...@@ -47,7 +49,11 @@ export default { ...@@ -47,7 +49,11 @@ export default {
<template> <template>
<div data-testid="dropdown-header"> <div data-testid="dropdown-header">
<div class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"> <div
v-if="!isStandalone"
class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
data-testid="dropdown-header-title"
>
<gl-button <gl-button
v-if="showDropdownContentsCreateView" v-if="showDropdownContentsCreateView"
:aria-label="__('Go back')" :aria-label="__('Go back')"
......
...@@ -286,7 +286,7 @@ export default { ...@@ -286,7 +286,7 @@ export default {
<template> <template>
<div <div
class="labels-select-wrapper position-relative" class="labels-select-wrapper gl-relative"
:class="{ :class="{
'is-standalone': isDropdownVariantStandalone(variant), 'is-standalone': isDropdownVariantStandalone(variant),
'is-embedded': isDropdownVariantEmbedded(variant), 'is-embedded': isDropdownVariantEmbedded(variant),
......
...@@ -124,19 +124,7 @@ describe('DropdownContent', () => { ...@@ -124,19 +124,7 @@ describe('DropdownContent', () => {
expect(wrapper.emitted('setLabels')).toEqual([[[updatedLabel]]]); expect(wrapper.emitted('setLabels')).toEqual([[[updatedLabel]]]);
}); });
it('does not render header on standalone variant', () => { it('renders header', () => {
createComponent({ props: { variant: DropdownVariant.Standalone } });
expect(findDropdownHeader().exists()).toBe(false);
});
it('renders header on embedded variant', () => {
createComponent({ props: { variant: DropdownVariant.Embedded } });
expect(findDropdownHeader().exists()).toBe(true);
});
it('renders header on sidebar variant', () => {
createComponent(); createComponent();
expect(findDropdownHeader().exists()).toBe(true); expect(findDropdownHeader().exists()).toBe(true);
......
...@@ -9,6 +9,7 @@ describe('DropdownHeader', () => { ...@@ -9,6 +9,7 @@ describe('DropdownHeader', () => {
const createComponent = ({ const createComponent = ({
showDropdownContentsCreateView = false, showDropdownContentsCreateView = false,
labelsFetchInProgress = false, labelsFetchInProgress = false,
isStandalone = false,
} = {}) => { } = {}) => {
wrapper = extendedWrapper( wrapper = extendedWrapper(
shallowMount(DropdownHeader, { shallowMount(DropdownHeader, {
...@@ -18,6 +19,7 @@ describe('DropdownHeader', () => { ...@@ -18,6 +19,7 @@ describe('DropdownHeader', () => {
labelsCreateTitle: 'Create label', labelsCreateTitle: 'Create label',
labelsListTitle: 'Select label', labelsListTitle: 'Select label',
searchKey: '', searchKey: '',
isStandalone,
}, },
stubs: { stubs: {
GlSearchBoxByType, GlSearchBoxByType,
...@@ -32,6 +34,7 @@ describe('DropdownHeader', () => { ...@@ -32,6 +34,7 @@ describe('DropdownHeader', () => {
const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType); const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
const findGoBackButton = () => wrapper.findByTestId('go-back-button'); const findGoBackButton = () => wrapper.findByTestId('go-back-button');
const findDropdownTitle = () => wrapper.findByTestId('dropdown-header-title');
beforeEach(() => { beforeEach(() => {
createComponent(); createComponent();
...@@ -72,4 +75,18 @@ describe('DropdownHeader', () => { ...@@ -72,4 +75,18 @@ describe('DropdownHeader', () => {
}, },
); );
}); });
describe('Standalone variant', () => {
beforeEach(() => {
createComponent({ isStandalone: true });
});
it('renders search input', () => {
expect(findSearchInput().exists()).toBe(true);
});
it('does not render title', async () => {
expect(findDropdownTitle().exists()).toBe(false);
});
});
}); });
...@@ -75,9 +75,9 @@ describe('LabelsSelectRoot', () => { ...@@ -75,9 +75,9 @@ describe('LabelsSelectRoot', () => {
wrapper.destroy(); wrapper.destroy();
}); });
it('renders component with classes `labels-select-wrapper position-relative`', () => { it('renders component with classes `labels-select-wrapper gl-relative`', () => {
createComponent(); createComponent();
expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'position-relative']); expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'gl-relative']);
}); });
it.each` it.each`
......
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