Migrate GlDropdownHeader to GlDropdownSectionHeader

GlDropdownHeader has been renamed to GlDropdownSectionHeader. This
updates all the current usages to reflect this change.
parent d37ebc47
......@@ -2,7 +2,7 @@
import {
GlDropdown,
GlDropdownDivider,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlLoadingIcon,
GlSearchBoxByType,
......@@ -19,7 +19,7 @@ export default {
components: {
GlDropdown,
GlDropdownDivider,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlLoadingIcon,
GlSearchBoxByType,
......@@ -196,9 +196,9 @@ export default {
<gl-icon name="chevron-down" />
</template>
<gl-new-dropdown-header>
<gl-dropdown-section-header>
<span class="text-center d-block">{{ $options.translations.selectMilestone }}</span>
</gl-new-dropdown-header>
</gl-dropdown-section-header>
<gl-dropdown-divider />
......
......@@ -6,7 +6,7 @@ import {
GlDropdown,
GlLoadingIcon,
GlDropdownItem,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlSearchBoxByType,
GlModalDirective,
GlTooltipDirective,
......@@ -31,7 +31,7 @@ export default {
GlDropdown,
GlLoadingIcon,
GlDropdownItem,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlSearchBoxByType,
......@@ -191,7 +191,7 @@ export default {
:text="environmentDropdownText"
>
<div class="d-flex flex-column overflow-hidden">
<gl-new-dropdown-header>{{ __('Environment') }}</gl-new-dropdown-header>
<gl-dropdown-section-header>{{ __('Environment') }}</gl-dropdown-section-header>
<gl-search-box-by-type class="gl-m-3" @input="debouncedEnvironmentsSearch" />
<gl-loading-icon v-if="environmentsLoading" :inline="true" />
......
......@@ -4,7 +4,7 @@ import {
GlIcon,
GlDropdown,
GlDropdownItem,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlDropdownDivider,
GlSearchBoxByType,
GlModalDirective,
......@@ -19,7 +19,7 @@ export default {
GlIcon,
GlDropdown,
GlDropdownItem,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlDropdownDivider,
GlSearchBoxByType,
},
......@@ -79,7 +79,7 @@ export default {
:text="selectedDashboardText"
>
<div class="d-flex flex-column overflow-hidden">
<gl-new-dropdown-header>{{ __('Dashboard') }}</gl-new-dropdown-header>
<gl-dropdown-section-header>{{ __('Dashboard') }}</gl-dropdown-section-header>
<gl-search-box-by-type
ref="monitorDashboardsDropdownSearch"
v-model="searchTerm"
......
......@@ -3,7 +3,7 @@ import { debounce } from 'lodash';
import { mapState, mapActions } from 'vuex';
import {
GlDropdown,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlSearchBoxByType,
GlDropdownDivider,
......@@ -19,7 +19,7 @@ export default {
name: 'AuthorSelect',
components: {
GlDropdown,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlSearchBoxByType,
GlDropdownDivider,
......@@ -113,9 +113,9 @@ export default {
toggle-class="gl-py-3 gl-border-0"
class="w-100 mt-2 mt-sm-0"
>
<gl-new-dropdown-header>
<gl-dropdown-section-header>
{{ __('Search by author') }}
</gl-new-dropdown-header>
</gl-dropdown-section-header>
<gl-dropdown-divider />
<gl-search-box-by-type
v-model.trim="authorInput"
......
<script>
import { GlNewDropdownHeader, GlDropdownItem, GlBadge, GlIcon } from '@gitlab/ui';
import { GlDropdownSectionHeader, GlDropdownItem, GlBadge, GlIcon } from '@gitlab/ui';
import { s__ } from '~/locale';
export default {
name: 'RefResultsSection',
components: {
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlBadge,
GlIcon,
......@@ -84,12 +84,12 @@ export default {
<template>
<div>
<gl-new-dropdown-header>
<gl-dropdown-section-header>
<div class="gl-display-flex align-items-center" data-testid="section-header">
<span class="gl-mr-2 gl-mb-1">{{ sectionTitle }}</span>
<gl-badge variant="neutral">{{ totalCountText }}</gl-badge>
</div>
</gl-new-dropdown-header>
</gl-dropdown-section-header>
<template v-if="error">
<div class="gl-display-flex align-items-start text-danger gl-ml-4 gl-mr-4 gl-mb-3">
<gl-icon name="error" class="gl-mr-2 gl-mt-2 gl-flex-shrink-0" />
......
......@@ -3,7 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
import {
GlDropdown,
GlDropdownDivider,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlSearchBoxByType,
GlSprintf,
GlIcon,
......@@ -20,7 +20,7 @@ export default {
components: {
GlDropdown,
GlDropdownDivider,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlSearchBoxByType,
GlSprintf,
GlIcon,
......@@ -130,9 +130,9 @@ export default {
</template>
<div class="gl-display-flex gl-flex-direction-column ref-selector-dropdown-content">
<gl-new-dropdown-header>
<gl-dropdown-section-header>
<span class="gl-text-center gl-display-block">{{ i18n.dropdownHeader }}</span>
</gl-new-dropdown-header>
</gl-dropdown-section-header>
<gl-dropdown-divider />
......
......@@ -3,7 +3,7 @@ import { escape as esc } from 'lodash';
import {
GlButton,
GlDropdown,
GlDropdownHeader,
GlDropdownSectionHeader,
GlDropdownText,
GlFormInputGroup,
GlTooltipDirective,
......@@ -18,7 +18,7 @@ export default {
components: {
GlButton,
GlDropdown,
GlDropdownHeader,
GlDropdownSectionHeader,
GlDropdownText,
GlFormInputGroup,
},
......@@ -51,9 +51,9 @@ export default {
menu-class="gl-px-1! gl-pb-5! gl-dropdown-menu-wide"
>
<template v-for="{ name, value } in sections">
<gl-dropdown-header :key="`header_${name}`" data-testid="header">{{
<gl-dropdown-section-header :key="`header_${name}`" data-testid="header">{{
name
}}</gl-dropdown-header>
}}</gl-dropdown-section-header>
<gl-dropdown-text
:key="`input_${name}`"
tag="div"
......
......@@ -5,7 +5,7 @@ import { escape } from 'lodash';
import {
GlButton,
GlDropdown,
GlNewDropdownHeader as GlDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlTooltipDirective,
} from '@gitlab/ui';
......@@ -23,7 +23,7 @@ export default {
MrWidgetIcon,
GlButton,
GlDropdown,
GlDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
},
directives: {
......@@ -168,7 +168,7 @@ export default {
right
data-qa-selector="download_dropdown"
>
<gl-dropdown-header>{{ s__('Download as') }}</gl-dropdown-header>
<gl-dropdown-section-header>{{ s__('Download as') }}</gl-dropdown-section-header>
<gl-dropdown-item
:href="mr.emailPatchesPath"
class="js-download-email-patches"
......
<script>
import {
GlDropdown,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlFormInputGroup,
GlButton,
GlTooltipDirective,
......@@ -12,7 +12,7 @@ import { getHTTPProtocol } from '~/lib/utils/url_utility';
export default {
components: {
GlDropdown,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlFormInputGroup,
GlButton,
},
......@@ -48,7 +48,7 @@ export default {
<gl-dropdown right :text="$options.labels.defaultLabel" category="primary" variant="info">
<div class="pb-2 mx-1">
<template v-if="sshLink">
<gl-new-dropdown-header>{{ $options.labels.ssh }}</gl-new-dropdown-header>
<gl-dropdown-section-header>{{ $options.labels.ssh }}</gl-dropdown-section-header>
<div class="mx-3">
<gl-form-input-group :value="sshLink" readonly select-on-click>
......@@ -67,7 +67,7 @@ export default {
</template>
<template v-if="httpLink">
<gl-new-dropdown-header>{{ httpLabel }}</gl-new-dropdown-header>
<gl-dropdown-section-header>{{ httpLabel }}</gl-dropdown-section-header>
<div class="mx-3">
<gl-form-input-group :value="httpLink" readonly select-on-click>
......
<script>
import { GlDropdown, GlNewDropdownHeader as GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
export default {
name: 'StageDropdownFilter',
components: {
GlDropdown,
GlDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
},
props: {
......@@ -66,7 +66,7 @@ export default {
:text="selectedStagesLabel"
right
>
<gl-dropdown-header>{{ s__('CycleAnalytics|Stages') }}</gl-dropdown-header>
<gl-dropdown-section-header>{{ s__('CycleAnalytics|Stages') }}</gl-dropdown-section-header>
<gl-dropdown-item
v-for="stage in stages"
:key="stage.id"
......
......@@ -5,7 +5,7 @@ import {
GlLoadingIcon,
GlAvatar,
GlDropdown,
GlNewDropdownHeader as GlDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlSearchBoxByType,
GlSafeHtmlDirective as SafeHtml,
......@@ -22,7 +22,7 @@ export default {
GlLoadingIcon,
GlAvatar,
GlDropdown,
GlDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlSearchBoxByType,
},
......@@ -133,7 +133,7 @@ export default {
</div>
<gl-icon class="gl-ml-2" name="chevron-down" />
</template>
<gl-dropdown-header>{{ __('Groups') }}</gl-dropdown-header>
<gl-dropdown-section-header>{{ __('Groups') }}</gl-dropdown-section-header>
<gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
<gl-dropdown-item
v-for="group in availableGroups"
......
......@@ -5,7 +5,7 @@ import {
GlLoadingIcon,
GlAvatar,
GlDropdown,
GlNewDropdownHeader as GlDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlSearchBoxByType,
} from '@gitlab/ui';
......@@ -21,7 +21,7 @@ export default {
GlLoadingIcon,
GlAvatar,
GlDropdown,
GlDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
GlSearchBoxByType,
},
......@@ -155,7 +155,7 @@ export default {
</div>
<gl-icon class="gl-ml-2" name="chevron-down" />
</template>
<gl-dropdown-header>{{ __('Projects') }}</gl-dropdown-header>
<gl-dropdown-section-header>{{ __('Projects') }}</gl-dropdown-section-header>
<gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
<gl-dropdown-item
......
<script>
import { GlDropdown, GlNewDropdownHeader, GlDropdownItem } from '@gitlab/ui';
import { GlDropdown, GlDropdownSectionHeader, GlDropdownItem } from '@gitlab/ui';
import { s__ } from '~/locale';
const SORTING_TITLE = s__('SortOptions|Sort by:');
......@@ -17,7 +17,7 @@ const SORTING_OPTIONS = [
export default {
components: {
GlDropdown,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlDropdownItem,
},
props: {
......@@ -48,7 +48,7 @@ export default {
<template>
<div>
<gl-dropdown :text="selectedOption.text" class="w-100 flex-column flex-lg-row form-group">
<gl-new-dropdown-header> {{ $options.SORTING_TITLE }}</gl-new-dropdown-header>
<gl-dropdown-section-header> {{ $options.SORTING_TITLE }}</gl-dropdown-section-header>
<gl-dropdown-item
v-for="option in $options.SORTING_OPTIONS"
:key="option.key"
......
......@@ -5,7 +5,7 @@ import {
GlDropdown,
GlDropdownItem,
GlSearchBoxByType,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlIcon,
GlTooltipDirective,
} from '@gitlab/ui';
......@@ -27,7 +27,7 @@ export default {
GlDropdown,
GlDropdownItem,
GlSearchBoxByType,
GlNewDropdownHeader,
GlDropdownSectionHeader,
GlIcon,
},
props: {
......@@ -195,9 +195,9 @@ export default {
class="dropdown gl-w-full"
:class="{ show: editing }"
>
<gl-new-dropdown-header class="d-flex justify-content-center">{{
<gl-dropdown-section-header class="d-flex justify-content-center">{{
__('Assign Iteration')
}}</gl-new-dropdown-header>
}}</gl-dropdown-section-header>
<gl-search-box-by-type ref="search" v-model="searchTerm" class="gl-m-3" />
<gl-dropdown-item
v-for="iterationItem in iterations"
......
......@@ -47,9 +47,9 @@ exports[`Dashboard template matches the default snapshot 1`] = `
<div
class="d-flex flex-column overflow-hidden"
>
<gl-new-dropdown-header-stub>
<gl-dropdown-section-header-stub>
Environment
</gl-new-dropdown-header-stub>
</gl-dropdown-section-header-stub>
<gl-search-box-by-type-stub
class="gl-m-3"
......
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import { GlDropdown, GlNewDropdownHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
import * as urlUtility from '~/lib/utils/url_utility';
import AuthorSelect from '~/projects/commits/components/author_select.vue';
import { createStore } from '~/projects/commits/store';
......@@ -59,7 +59,7 @@ describe('Author Select', () => {
const findDropdownContainer = () => wrapper.find({ ref: 'dropdownContainer' });
const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownHeader = () => wrapper.find(GlNewDropdownHeader);
const findDropdownHeader = () => wrapper.find(GlDropdownSectionHeader);
const findSearchBox = () => wrapper.find(GlSearchBoxByType);
const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
......
......@@ -12,9 +12,9 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
<div
class="pb-2 mx-1"
>
<gl-new-dropdown-header-stub>
<gl-dropdown-section-header-stub>
Clone with SSH
</gl-new-dropdown-header-stub>
</gl-dropdown-section-header-stub>
<div
class="mx-3"
......@@ -53,9 +53,9 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
</div>
</div>
<gl-new-dropdown-header-stub>
<gl-dropdown-section-header-stub>
Clone with HTTP
</gl-new-dropdown-header-stub>
</gl-dropdown-section-header-stub>
<div
class="mx-3"
......
import { shallowMount } from '@vue/test-utils';
import { GlFormInputGroup, GlNewDropdownHeader } from '@gitlab/ui';
import { GlFormInputGroup, GlDropdownSectionHeader } from '@gitlab/ui';
import CloneDropdown from '~/vue_shared/components/clone_dropdown.vue';
describe('Clone Dropdown Button', () => {
......@@ -51,7 +51,7 @@ describe('Clone Dropdown Button', () => {
createComponent({ [name]: value });
expect(wrapper.find(GlFormInputGroup).props('value')).toBe(value);
expect(wrapper.findAll(GlNewDropdownHeader).length).toBe(1);
expect(wrapper.findAll(GlDropdownSectionHeader).length).toBe(1);
});
});
......@@ -63,12 +63,12 @@ describe('Clone Dropdown Button', () => {
`('allows null values for the props', ({ name, value }) => {
createComponent({ ...defaultPropsData, [name]: value });
expect(wrapper.findAll(GlNewDropdownHeader).length).toBe(1);
expect(wrapper.findAll(GlDropdownSectionHeader).length).toBe(1);
});
it('correctly calculates httpLabel for HTTPS protocol', () => {
createComponent({ httpLink: httpsLink });
expect(wrapper.find(GlNewDropdownHeader).text()).toContain('HTTPS');
expect(wrapper.find(GlDropdownSectionHeader).text()).toContain('HTTPS');
});
});
});
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