Commit e3002fbf authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera

Merge branch 'migrate-gl-new-dropdown' into 'master'

Migrate GlNewDropdownText and GlNewDropdown

See merge request gitlab-org/gitlab!42146
parents 2ccc00ee 00623dfe
<script> <script>
import { GlNewDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
import allVersionsMixin from '../../mixins/all_versions'; import allVersionsMixin from '../../mixins/all_versions';
import { findVersionId } from '../../utils/design_management_utils'; import { findVersionId } from '../../utils/design_management_utils';
export default { export default {
components: { components: {
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlSprintf, GlSprintf,
}, },
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
</script> </script>
<template> <template>
<gl-new-dropdown :text="dropdownText" size="small"> <gl-dropdown :text="dropdownText" size="small">
<gl-new-dropdown-item <gl-new-dropdown-item
v-for="(version, index) in allVersions" v-for="(version, index) in allVersions"
:key="version.id" :key="version.id"
...@@ -77,5 +77,5 @@ export default { ...@@ -77,5 +77,5 @@ export default {
</template> </template>
</gl-sprintf> </gl-sprintf>
</gl-new-dropdown-item> </gl-new-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
</template> </template>
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
GlIcon, GlIcon,
GlFormGroup, GlFormGroup,
GlFormCheckbox, GlFormCheckbox,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { import {
...@@ -24,7 +24,7 @@ export default { ...@@ -24,7 +24,7 @@ export default {
GlFormGroup, GlFormGroup,
GlIcon, GlIcon,
GlFormCheckbox, GlFormCheckbox,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
}, },
inject: ['service', 'alertSettings'], inject: ['service', 'alertSettings'],
...@@ -101,7 +101,7 @@ export default { ...@@ -101,7 +101,7 @@ export default {
<gl-icon name="question" :size="12" /> <gl-icon name="question" :size="12" />
</gl-link> </gl-link>
</label> </label>
<gl-new-dropdown <gl-dropdown
id="alert-integration-settings-issue-template" id="alert-integration-settings-issue-template"
data-qa-selector="incident_templates_dropdown" data-qa-selector="incident_templates_dropdown"
:text="issueTemplateHeader" :text="issueTemplateHeader"
...@@ -117,7 +117,7 @@ export default { ...@@ -117,7 +117,7 @@ export default {
> >
{{ template.name }} {{ template.name }}
</gl-new-dropdown-item> </gl-new-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
</gl-form-group> </gl-form-group>
<gl-form-group class="gl-pl-0 gl-mb-5"> <gl-form-group class="gl-pl-0 gl-mb-5">
......
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import { GlNewDropdown, GlNewDropdownItem, GlLink } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem, GlLink } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { defaultIntegrationLevel, overrideDropdownDescriptions } from '../constants'; import { defaultIntegrationLevel, overrideDropdownDescriptions } from '../constants';
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
dropdownOptions, dropdownOptions,
name: 'OverrideDropdown', name: 'OverrideDropdown',
components: { components: {
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlLink, GlLink,
}, },
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
}}</gl-link> }}</gl-link>
</span> </span>
<input name="service[inherit_from_id]" :value="override ? '' : inheritFromId" type="hidden" /> <input name="service[inherit_from_id]" :value="override ? '' : inheritFromId" type="hidden" />
<gl-new-dropdown :text="selected.text"> <gl-dropdown :text="selected.text">
<gl-new-dropdown-item <gl-new-dropdown-item
v-for="option in $options.dropdownOptions" v-for="option in $options.dropdownOptions"
:key="option.value" :key="option.value"
...@@ -81,6 +81,6 @@ export default { ...@@ -81,6 +81,6 @@ export default {
> >
{{ option.text }} {{ option.text }}
</gl-new-dropdown-item> </gl-new-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
</div> </div>
</template> </template>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
import { import {
GlAlert, GlAlert,
GlButton, GlButton,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlNewDropdownText, GlDropdownText,
GlFormGroup, GlFormGroup,
GlFormSelect, GlFormSelect,
GlIcon, GlIcon,
...@@ -34,9 +34,9 @@ export default { ...@@ -34,9 +34,9 @@ export default {
components: { components: {
GlAlert, GlAlert,
GlButton, GlButton,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlNewDropdownText, GlDropdownText,
GlFormGroup, GlFormGroup,
GlFormSelect, GlFormSelect,
GlIcon, GlIcon,
...@@ -293,7 +293,7 @@ export default { ...@@ -293,7 +293,7 @@ export default {
<gl-icon name="arrow-right" :aria-label="__('Will be mapped to')" /> <gl-icon name="arrow-right" :aria-label="__('Will be mapped to')" />
</template> </template>
<template #cell(gitlabUsername)="data"> <template #cell(gitlabUsername)="data">
<gl-new-dropdown <gl-dropdown
:text="data.value || $options.currentUsername" :text="data.value || $options.currentUsername"
class="w-100" class="w-100"
:aria-label=" :aria-label="
...@@ -314,10 +314,10 @@ export default { ...@@ -314,10 +314,10 @@ export default {
{{ user.username }} ({{ user.name }}) {{ user.username }} ({{ user.name }})
</gl-new-dropdown-item> </gl-new-dropdown-item>
<gl-new-dropdown-text v-show="shouldShowNoMatchesFoundText" class="text-secondary"> <gl-dropdown-text v-show="shouldShowNoMatchesFoundText" class="text-secondary">
{{ __('No matches found') }} {{ __('No matches found') }}
</gl-new-dropdown-text> </gl-dropdown-text>
</gl-new-dropdown> </gl-dropdown>
</template> </template>
</gl-table> </gl-table>
......
<script> <script>
import { import {
GlNewDropdown, GlDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownHeader, GlNewDropdownHeader,
GlNewDropdownItem, GlNewDropdownItem,
...@@ -17,7 +17,7 @@ const SEARCH_DEBOUNCE_MS = 250; ...@@ -17,7 +17,7 @@ const SEARCH_DEBOUNCE_MS = 250;
export default { export default {
components: { components: {
GlNewDropdown, GlDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownHeader, GlNewDropdownHeader,
GlNewDropdownItem, GlNewDropdownItem,
...@@ -188,7 +188,7 @@ export default { ...@@ -188,7 +188,7 @@ export default {
</script> </script>
<template> <template>
<gl-new-dropdown v-bind="$attrs" class="project-milestone-combobox" @shown="focusSearchBox"> <gl-dropdown v-bind="$attrs" class="project-milestone-combobox" @shown="focusSearchBox">
<template slot="button-content"> <template slot="button-content">
<span ref="buttonText" class="flex-grow-1 ml-1 text-muted">{{ <span ref="buttonText" class="flex-grow-1 ml-1 text-muted">{{
selectedMilestonesLabel selectedMilestonesLabel
...@@ -246,5 +246,5 @@ export default { ...@@ -246,5 +246,5 @@ export default {
<gl-new-dropdown-item v-for="(item, idx) in extraLinks" :key="idx" :href="item.url"> <gl-new-dropdown-item v-for="(item, idx) in extraLinks" :key="idx" :href="item.url">
<span class="pl-4">{{ item.text }}</span> <span class="pl-4">{{ item.text }}</span>
</gl-new-dropdown-item> </gl-new-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
</template> </template>
...@@ -7,7 +7,7 @@ import { ...@@ -7,7 +7,7 @@ import {
GlButtonGroup, GlButtonGroup,
GlFormGroup, GlFormGroup,
GlFormInput, GlFormInput,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
GlModal, GlModal,
GlTooltipDirective, GlTooltipDirective,
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { mapState, mapGetters, mapActions } from 'vuex'; import { mapState, mapGetters, mapActions } from 'vuex';
import { import {
GlDeprecatedButton, GlDeprecatedButton,
GlNewDropdown, GlDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownItem, GlNewDropdownItem,
GlModal, GlModal,
...@@ -23,7 +23,7 @@ import { getAddMetricTrackingOptions } from '../utils'; ...@@ -23,7 +23,7 @@ import { getAddMetricTrackingOptions } from '../utils';
export default { export default {
components: { components: {
GlDeprecatedButton, GlDeprecatedButton,
GlNewDropdown, GlDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownItem, GlNewDropdownItem,
GlModal, GlModal,
...@@ -143,7 +143,7 @@ export default { ...@@ -143,7 +143,7 @@ export default {
as part of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/936 as part of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/936
The variant will create a dropdown with an icon, no text and no caret The variant will create a dropdown with an icon, no text and no caret
--> -->
<gl-new-dropdown <gl-dropdown
v-gl-tooltip v-gl-tooltip
data-testid="actions-menu" data-testid="actions-menu"
data-qa-selector="actions_menu_dropdown" data-qa-selector="actions_menu_dropdown"
...@@ -287,5 +287,5 @@ export default { ...@@ -287,5 +287,5 @@ export default {
:project-path="projectPath" :project-path="projectPath"
/> />
</template> </template>
</gl-new-dropdown> </gl-dropdown>
</template> </template>
...@@ -3,7 +3,7 @@ import { debounce } from 'lodash'; ...@@ -3,7 +3,7 @@ import { debounce } from 'lodash';
import { mapActions, mapState, mapGetters } from 'vuex'; import { mapActions, mapState, mapGetters } from 'vuex';
import { import {
GlButton, GlButton,
GlNewDropdown, GlDropdown,
GlLoadingIcon, GlLoadingIcon,
GlNewDropdownItem, GlNewDropdownItem,
GlNewDropdownHeader, GlNewDropdownHeader,
...@@ -28,7 +28,7 @@ export default { ...@@ -28,7 +28,7 @@ export default {
components: { components: {
GlIcon, GlIcon,
GlButton, GlButton,
GlNewDropdown, GlDropdown,
GlLoadingIcon, GlLoadingIcon,
GlNewDropdownItem, GlNewDropdownItem,
GlNewDropdownHeader, GlNewDropdownHeader,
...@@ -181,7 +181,7 @@ export default { ...@@ -181,7 +181,7 @@ export default {
<span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span> <span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span>
<div class="mb-2 pr-2 d-flex d-sm-block"> <div class="mb-2 pr-2 d-flex d-sm-block">
<gl-new-dropdown <gl-dropdown
id="monitor-environments-dropdown" id="monitor-environments-dropdown"
ref="monitorEnvironmentsDropdown" ref="monitorEnvironmentsDropdown"
class="flex-grow-1" class="flex-grow-1"
...@@ -214,7 +214,7 @@ export default { ...@@ -214,7 +214,7 @@ export default {
{{ __('No matching results') }} {{ __('No matching results') }}
</div> </div>
</div> </div>
</gl-new-dropdown> </gl-dropdown>
</div> </div>
<div class="mb-2 pr-2 d-flex d-sm-block"> <div class="mb-2 pr-2 d-flex d-sm-block">
......
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
GlIcon, GlIcon,
GlLink, GlLink,
GlLoadingIcon, GlLoadingIcon,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
GlNewDropdownDivider as GlDropdownDivider, GlNewDropdownDivider as GlDropdownDivider,
GlModal, GlModal,
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { mapState, mapGetters } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import { import {
GlIcon, GlIcon,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlNewDropdownHeader, GlNewDropdownHeader,
GlNewDropdownDivider, GlNewDropdownDivider,
...@@ -17,7 +17,7 @@ const events = { ...@@ -17,7 +17,7 @@ const events = {
export default { export default {
components: { components: {
GlIcon, GlIcon,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlNewDropdownHeader, GlNewDropdownHeader,
GlNewDropdownDivider, GlNewDropdownDivider,
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-new-dropdown <gl-dropdown
toggle-class="dropdown-menu-toggle" toggle-class="dropdown-menu-toggle"
menu-class="monitor-dashboard-dropdown-menu" menu-class="monitor-dashboard-dropdown-menu"
:text="selectedDashboardText" :text="selectedDashboardText"
...@@ -127,5 +127,5 @@ export default { ...@@ -127,5 +127,5 @@ export default {
{{ __('No matching results') }} {{ __('No matching results') }}
</div> </div>
</div> </div>
</gl-new-dropdown> </gl-dropdown>
</template> </template>
...@@ -4,7 +4,7 @@ import { mapActions } from 'vuex'; ...@@ -4,7 +4,7 @@ import { mapActions } from 'vuex';
import { import {
GlButtonGroup, GlButtonGroup,
GlButton, GlButton,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlNewDropdownDivider, GlNewDropdownDivider,
GlTooltipDirective, GlTooltipDirective,
...@@ -48,7 +48,7 @@ export default { ...@@ -48,7 +48,7 @@ export default {
components: { components: {
GlButtonGroup, GlButtonGroup,
GlButton, GlButton,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlNewDropdownDivider, GlNewDropdownDivider,
}, },
...@@ -152,7 +152,7 @@ export default { ...@@ -152,7 +152,7 @@ export default {
icon="retry" icon="retry"
@click="refresh" @click="refresh"
/> />
<gl-new-dropdown <gl-dropdown
v-if="!disableMetricDashboardRefreshRate" v-if="!disableMetricDashboardRefreshRate"
v-gl-tooltip v-gl-tooltip
:title="s__('Metrics|Set refresh rate')" :title="s__('Metrics|Set refresh rate')"
...@@ -173,6 +173,6 @@ export default { ...@@ -173,6 +173,6 @@ export default {
@click="setRefreshInterval(option)" @click="setRefreshInterval(option)"
>{{ option.label }}</gl-new-dropdown-item >{{ option.label }}</gl-new-dropdown-item
> >
</gl-new-dropdown> </gl-dropdown>
</gl-button-group> </gl-button-group>
</template> </template>
...@@ -9,7 +9,7 @@ import { ...@@ -9,7 +9,7 @@ import {
GlFormInput, GlFormInput,
GlFormSelect, GlFormSelect,
GlLink, GlLink,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
GlSprintf, GlSprintf,
...@@ -37,7 +37,7 @@ export default { ...@@ -37,7 +37,7 @@ export default {
GlFormInput, GlFormInput,
GlFormSelect, GlFormSelect,
GlLink, GlLink,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
GlSprintf, GlSprintf,
...@@ -173,7 +173,7 @@ export default { ...@@ -173,7 +173,7 @@ export default {
>{{ error }}</gl-alert >{{ error }}</gl-alert
> >
<gl-form-group :label="s__('Pipeline|Run for')"> <gl-form-group :label="s__('Pipeline|Run for')">
<gl-new-dropdown :text="refValue" block> <gl-dropdown :text="refValue" block>
<gl-search-box-by-type <gl-search-box-by-type
v-model.trim="searchTerm" v-model.trim="searchTerm"
:placeholder="__('Search branches and tags')" :placeholder="__('Search branches and tags')"
...@@ -189,7 +189,7 @@ export default { ...@@ -189,7 +189,7 @@ export default {
> >
{{ ref }} {{ ref }}
</gl-new-dropdown-item> </gl-new-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
<template #description> <template #description>
<div> <div>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { mapState, mapActions } from 'vuex'; import { mapState, mapActions } from 'vuex';
import { import {
GlNewDropdown, GlDropdown,
GlNewDropdownHeader, GlNewDropdownHeader,
GlNewDropdownItem, GlNewDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
...@@ -18,7 +18,7 @@ const tooltipMessage = __('Searching by both author and message is currently not ...@@ -18,7 +18,7 @@ const tooltipMessage = __('Searching by both author and message is currently not
export default { export default {
name: 'AuthorSelect', name: 'AuthorSelect',
components: { components: {
GlNewDropdown, GlDropdown,
GlNewDropdownHeader, GlNewDropdownHeader,
GlNewDropdownItem, GlNewDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
...@@ -107,7 +107,7 @@ export default { ...@@ -107,7 +107,7 @@ export default {
<template> <template>
<div ref="dropdownContainer" v-gl-tooltip :title="tooltipTitle" :disabled="!hasSearchParam"> <div ref="dropdownContainer" v-gl-tooltip :title="tooltipTitle" :disabled="!hasSearchParam">
<gl-new-dropdown <gl-dropdown
:text="dropdownText" :text="dropdownText"
:disabled="hasSearchParam" :disabled="hasSearchParam"
toggle-class="gl-py-3 gl-border-0" toggle-class="gl-py-3 gl-border-0"
...@@ -137,6 +137,6 @@ export default { ...@@ -137,6 +137,6 @@ export default {
> >
{{ author.name }} {{ author.name }}
</gl-new-dropdown-item> </gl-new-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
</div> </div>
</template> </template>
<script> <script>
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import { import {
GlNewDropdown, GlDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownHeader, GlNewDropdownHeader,
GlSearchBoxByType, GlSearchBoxByType,
...@@ -18,7 +18,7 @@ export default { ...@@ -18,7 +18,7 @@ export default {
name: 'RefSelector', name: 'RefSelector',
store: createStore(), store: createStore(),
components: { components: {
GlNewDropdown, GlDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownHeader, GlNewDropdownHeader,
GlSearchBoxByType, GlSearchBoxByType,
...@@ -120,7 +120,7 @@ export default { ...@@ -120,7 +120,7 @@ export default {
</script> </script>
<template> <template>
<gl-new-dropdown v-bind="$attrs" class="ref-selector" @shown="focusSearchBox"> <gl-dropdown v-bind="$attrs" class="ref-selector" @shown="focusSearchBox">
<template slot="button-content"> <template slot="button-content">
<span class="gl-flex-grow-1 gl-ml-2 gl-text-gray-400" data-testid="button-content"> <span class="gl-flex-grow-1 gl-ml-2 gl-text-gray-400" data-testid="button-content">
<span v-if="selectedRef" class="gl-font-monospace">{{ selectedRef }}</span> <span v-if="selectedRef" class="gl-font-monospace">{{ selectedRef }}</span>
...@@ -208,5 +208,5 @@ export default { ...@@ -208,5 +208,5 @@ export default {
</template> </template>
</div> </div>
</div> </div>
</gl-new-dropdown> </gl-dropdown>
</template> </template>
...@@ -4,7 +4,7 @@ import Mousetrap from 'mousetrap'; ...@@ -4,7 +4,7 @@ import Mousetrap from 'mousetrap';
import { escape } from 'lodash'; import { escape } from 'lodash';
import { import {
GlButton, GlButton,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownHeader as GlDropdownHeader, GlNewDropdownHeader as GlDropdownHeader,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
GlTooltipDirective, GlTooltipDirective,
......
<script> <script>
import { import {
GlNewDropdown, GlDropdown,
GlNewDropdownHeader, GlNewDropdownHeader,
GlFormInputGroup, GlFormInputGroup,
GlButton, GlButton,
...@@ -11,7 +11,7 @@ import { getHTTPProtocol } from '~/lib/utils/url_utility'; ...@@ -11,7 +11,7 @@ import { getHTTPProtocol } from '~/lib/utils/url_utility';
export default { export default {
components: { components: {
GlNewDropdown, GlDropdown,
GlNewDropdownHeader, GlNewDropdownHeader,
GlFormInputGroup, GlFormInputGroup,
GlButton, GlButton,
...@@ -45,7 +45,7 @@ export default { ...@@ -45,7 +45,7 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-new-dropdown right :text="$options.labels.defaultLabel" category="primary" variant="info"> <gl-dropdown right :text="$options.labels.defaultLabel" category="primary" variant="info">
<div class="pb-2 mx-1"> <div class="pb-2 mx-1">
<template v-if="sshLink"> <template v-if="sshLink">
<gl-new-dropdown-header>{{ $options.labels.ssh }}</gl-new-dropdown-header> <gl-new-dropdown-header>{{ $options.labels.ssh }}</gl-new-dropdown-header>
...@@ -85,5 +85,5 @@ export default { ...@@ -85,5 +85,5 @@ export default {
</div> </div>
</template> </template>
</div> </div>
</gl-new-dropdown> </gl-dropdown>
</template> </template>
...@@ -3,7 +3,7 @@ import { ...@@ -3,7 +3,7 @@ import {
GlFilteredSearch, GlFilteredSearch,
GlButtonGroup, GlButtonGroup,
GlButton, GlButton,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
GlTooltipDirective, GlTooltipDirective,
} from '@gitlab/ui'; } from '@gitlab/ui';
......
<script> <script>
import { GlNewDropdown, GlDeprecatedDropdownItem, GlSearchBoxByType, GlIcon } from '@gitlab/ui'; import { GlDropdown, GlDeprecatedDropdownItem, GlSearchBoxByType, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
export default { export default {
name: 'TimezoneDropdown', name: 'TimezoneDropdown',
components: { components: {
GlNewDropdown, GlDropdown,
GlDeprecatedDropdownItem, GlDeprecatedDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
GlIcon, GlIcon,
...@@ -74,7 +74,7 @@ export default { ...@@ -74,7 +74,7 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-new-dropdown :text="value" block lazy menu-class="gl-w-full!"> <gl-dropdown :text="value" block lazy menu-class="gl-w-full!">
<template #button-content> <template #button-content>
<span class="gl-flex-grow-1" :class="{ 'gl-text-gray-300': !value }"> <span class="gl-flex-grow-1" :class="{ 'gl-text-gray-300': !value }">
{{ selectedTimezoneLabel }} {{ selectedTimezoneLabel }}
...@@ -98,5 +98,5 @@ export default { ...@@ -98,5 +98,5 @@ export default {
<gl-deprecated-dropdown-item v-if="!filteredResults.length" data-testid="noMatchingResults"> <gl-deprecated-dropdown-item v-if="!filteredResults.length" data-testid="noMatchingResults">
{{ $options.tranlations.noResultsText }} {{ $options.tranlations.noResultsText }}
</gl-deprecated-dropdown-item> </gl-deprecated-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
</template> </template>
<script> <script>
import { import {
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownHeader as GlDropdownHeader, GlNewDropdownHeader as GlDropdownHeader,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
} from '@gitlab/ui'; } from '@gitlab/ui';
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { import {
GlAlert, GlAlert,
GlButton, GlButton,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
GlNewDropdownDivider as GlDropdownDivider, GlNewDropdownDivider as GlDropdownDivider,
GlForm, GlForm,
......
...@@ -4,7 +4,7 @@ import { ...@@ -4,7 +4,7 @@ import {
GlIcon, GlIcon,
GlLoadingIcon, GlLoadingIcon,
GlAvatar, GlAvatar,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownHeader as GlDropdownHeader, GlNewDropdownHeader as GlDropdownHeader,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
......
...@@ -4,7 +4,7 @@ import { ...@@ -4,7 +4,7 @@ import {
GlIcon, GlIcon,
GlLoadingIcon, GlLoadingIcon,
GlAvatar, GlAvatar,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownHeader as GlDropdownHeader, GlNewDropdownHeader as GlDropdownHeader,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
......
<script> <script>
import { GlNewDropdown, GlNewDropdownHeader, GlNewDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownHeader, GlNewDropdownItem } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
const SORTING_TITLE = s__('SortOptions|Sort by:'); const SORTING_TITLE = s__('SortOptions|Sort by:');
...@@ -16,7 +16,7 @@ const SORTING_OPTIONS = [ ...@@ -16,7 +16,7 @@ const SORTING_OPTIONS = [
export default { export default {
components: { components: {
GlNewDropdown, GlDropdown,
GlNewDropdownHeader, GlNewDropdownHeader,
GlNewDropdownItem, GlNewDropdownItem,
}, },
...@@ -47,7 +47,7 @@ export default { ...@@ -47,7 +47,7 @@ export default {
<template> <template>
<div> <div>
<gl-new-dropdown :text="selectedOption.text" class="w-100 flex-column flex-lg-row form-group"> <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-new-dropdown-header> {{ $options.SORTING_TITLE }}</gl-new-dropdown-header>
<gl-new-dropdown-item <gl-new-dropdown-item
v-for="option in $options.SORTING_OPTIONS" v-for="option in $options.SORTING_OPTIONS"
...@@ -58,6 +58,6 @@ export default { ...@@ -58,6 +58,6 @@ export default {
> >
{{ option.text }} {{ option.text }}
</gl-new-dropdown-item> </gl-new-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
</div> </div>
</template> </template>
<script> <script>
import { mapState, mapActions } from 'vuex'; import { mapState, mapActions } from 'vuex';
import { GlNewDropdown as GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
export default { export default {
......
<script> <script>
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { import {
GlNewDropdown, GlDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownItem, GlNewDropdownItem,
GlIcon, GlIcon,
...@@ -14,7 +14,7 @@ import { deprecatedCreateFlash as createFlash } from '~/flash'; ...@@ -14,7 +14,7 @@ import { deprecatedCreateFlash as createFlash } from '~/flash';
export default { export default {
components: { components: {
GlNewDropdown, GlDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownItem, GlNewDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
...@@ -70,7 +70,7 @@ export default { ...@@ -70,7 +70,7 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-new-dropdown class="js-new-environments-dropdown" @shown="setFocus"> <gl-dropdown class="js-new-environments-dropdown" @shown="setFocus">
<template #button-content> <template #button-content>
<span class="d-md-none mr-1"> <span class="d-md-none mr-1">
{{ $options.translations.addEnvironmentsLabel }} {{ $options.translations.addEnvironmentsLabel }}
...@@ -102,5 +102,5 @@ export default { ...@@ -102,5 +102,5 @@ export default {
{{ createEnvironmentLabel }} {{ createEnvironmentLabel }}
</gl-new-dropdown-item> </gl-new-dropdown-item>
</template> </template>
</gl-new-dropdown> </gl-dropdown>
</template> </template>
...@@ -6,7 +6,7 @@ import { ...@@ -6,7 +6,7 @@ import {
GlLoadingIcon, GlLoadingIcon,
GlEmptyState, GlEmptyState,
GlIcon, GlIcon,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { formatDate } from '~/lib/utils/datetime_utility'; import { formatDate } from '~/lib/utils/datetime_utility';
...@@ -35,7 +35,7 @@ export default { ...@@ -35,7 +35,7 @@ export default {
GlLoadingIcon, GlLoadingIcon,
GlEmptyState, GlEmptyState,
GlIcon, GlIcon,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
IterationForm, IterationForm,
IterationReportSummary, IterationReportSummary,
...@@ -193,7 +193,7 @@ export default { ...@@ -193,7 +193,7 @@ export default {
<span class="gl-ml-4" <span class="gl-ml-4"
>{{ formatDate(iteration.startDate) }}{{ formatDate(iteration.dueDate) }}</span >{{ formatDate(iteration.startDate) }}{{ formatDate(iteration.dueDate) }}</span
> >
<gl-new-dropdown <gl-dropdown
v-if="canEditIteration" v-if="canEditIteration"
data-testid="actions-dropdown" data-testid="actions-dropdown"
variant="default" variant="default"
...@@ -208,7 +208,7 @@ export default { ...@@ -208,7 +208,7 @@ export default {
<gl-new-dropdown-item @click="loadEditPage">{{ <gl-new-dropdown-item @click="loadEditPage">{{
__('Edit iteration') __('Edit iteration')
}}</gl-new-dropdown-item> }}</gl-new-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
</div> </div>
<h3 ref="title" class="page-title">{{ iteration.title }}</h3> <h3 ref="title" class="page-title">{{ iteration.title }}</h3>
<div ref="description" v-html="iteration.descriptionHtml"></div> <div ref="description" v-html="iteration.descriptionHtml"></div>
......
...@@ -8,7 +8,7 @@ import { ...@@ -8,7 +8,7 @@ import {
GlFormGroup, GlFormGroup,
GlIcon, GlIcon,
GlLink, GlLink,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
GlSkeletonLoader, GlSkeletonLoader,
GlSprintf, GlSprintf,
......
<script> <script>
import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem } from '@gitlab/ui';
export default { export default {
components: { components: {
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
}, },
props: { props: {
...@@ -34,7 +34,7 @@ export default { ...@@ -34,7 +34,7 @@ export default {
<template> <template>
<div> <div>
<input type="hidden" name="group[visibility_level]" :value="selectedOption.level" /> <input type="hidden" name="group[visibility_level]" :value="selectedOption.level" />
<gl-new-dropdown :text="selectedOption.label" class="gl-w-full" menu-class="gl-w-full! gl-mb-0"> <gl-dropdown :text="selectedOption.label" class="gl-w-full" menu-class="gl-w-full! gl-mb-0">
<gl-new-dropdown-item <gl-new-dropdown-item
v-for="option in visibilityLevelOptions" v-for="option in visibilityLevelOptions"
:key="option.level" :key="option.level"
...@@ -43,6 +43,6 @@ export default { ...@@ -43,6 +43,6 @@ export default {
> >
<div class="gl-font-weight-bold gl-mb-1">{{ option.label }}</div> <div class="gl-font-weight-bold gl-mb-1">{{ option.label }}</div>
</gl-new-dropdown-item> </gl-new-dropdown-item>
</gl-new-dropdown> </gl-dropdown>
</div> </div>
</template> </template>
...@@ -3,7 +3,7 @@ import { mapState, mapActions } from 'vuex'; ...@@ -3,7 +3,7 @@ import { mapState, mapActions } from 'vuex';
import { import {
GlFormGroup, GlFormGroup,
GlSegmentedControl, GlSegmentedControl,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
GlNewDropdownDivider as GlDropdownDivider, GlNewDropdownDivider as GlDropdownDivider,
} from '@gitlab/ui'; } from '@gitlab/ui';
......
<script> <script>
import { GlButton, GlNewDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui'; import { GlButton, GlDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
export default { export default {
...@@ -8,7 +8,7 @@ export default { ...@@ -8,7 +8,7 @@ export default {
}, },
components: { components: {
GlButton, GlButton,
GlNewDropdown, GlDropdown,
GlDeprecatedDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
<template> <template>
<div> <div>
<strong>{{ s__('SecurityReports|Download Report') }}</strong> <strong>{{ s__('SecurityReports|Download Report') }}</strong>
<gl-new-dropdown <gl-dropdown
v-if="hasDropdown" v-if="hasDropdown"
class="d-block mt-1" class="d-block mt-1"
:text="$options.i18n.FUZZING_ARTIFACTS" :text="$options.i18n.FUZZING_ARTIFACTS"
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
:href="artifactDownloadUrl(job)" :href="artifactDownloadUrl(job)"
>{{ job.name }}</gl-deprecated-dropdown-item >{{ job.name }}</gl-deprecated-dropdown-item
> >
</gl-new-dropdown> </gl-dropdown>
<gl-button <gl-button
v-else v-else
class="d-block mt-1" class="d-block mt-1"
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { import {
GlButton, GlButton,
GlLink, GlLink,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
GlNewDropdownHeader, GlNewDropdownHeader,
...@@ -24,7 +24,7 @@ export default { ...@@ -24,7 +24,7 @@ export default {
components: { components: {
GlButton, GlButton,
GlLink, GlLink,
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
GlNewDropdownHeader, GlNewDropdownHeader,
...@@ -187,7 +187,7 @@ export default { ...@@ -187,7 +187,7 @@ export default {
><strong>{{ iterationTitle }}</strong></gl-link ><strong>{{ iterationTitle }}</strong></gl-link
> >
</div> </div>
<gl-new-dropdown <gl-dropdown
v-show="editing" v-show="editing"
ref="newDropdown" ref="newDropdown"
data-toggle="dropdown" data-toggle="dropdown"
...@@ -207,6 +207,6 @@ export default { ...@@ -207,6 +207,6 @@ export default {
@click="setIteration(iterationItem.id)" @click="setIteration(iterationItem.id)"
>{{ iterationItem.title }}</gl-new-dropdown-item >{{ iterationItem.title }}</gl-new-dropdown-item
> >
</gl-new-dropdown> </gl-dropdown>
</div> </div>
</template> </template>
<script> <script>
import { GlNewDropdown as GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale'; import { sprintf, s__ } from '~/locale';
import { EntityTypes } from './constants'; import { EntityTypes } from './constants';
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlNewDropdown as GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
import StageDropdownFilter from 'ee/analytics/cycle_analytics/components/stage_dropdown_filter.vue'; import StageDropdownFilter from 'ee/analytics/cycle_analytics/components/stage_dropdown_filter.vue';
const stages = [ const stages = [
......
import Vuex from 'vuex'; import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlButton, GlNewDropdown as GlDropdown, GlFormGroup } from '@gitlab/ui'; import { GlButton, GlDropdown, GlFormGroup } from '@gitlab/ui';
import ValueStreamSelect from 'ee/analytics/cycle_analytics/components/value_stream_select.vue'; import ValueStreamSelect from 'ee/analytics/cycle_analytics/components/value_stream_select.vue';
import { valueStreams } from '../mock_data'; import { valueStreams } from '../mock_data';
import { findDropdownItemText } from '../helpers'; import { findDropdownItemText } from '../helpers';
......
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { GlNewDropdown as GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
import GroupsDropdownFilter from 'ee/analytics/shared/components/groups_dropdown_filter.vue'; import GroupsDropdownFilter from 'ee/analytics/shared/components/groups_dropdown_filter.vue';
import { TEST_HOST } from 'helpers/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
import Api from '~/api'; import Api from '~/api';
......
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue'; import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue';
import { GlNewDropdown as GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
import { LAST_ACTIVITY_AT } from 'ee/analytics/shared/constants'; import { LAST_ACTIVITY_AT } from 'ee/analytics/shared/constants';
import { TEST_HOST } from 'helpers/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
import Api from '~/api'; import Api from '~/api';
......
import Vue from 'vue'; import Vue from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { GlNewDropdown as GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
import ToggleEpicsSwimlanes from 'ee/boards/components/toggle_epics_swimlanes.vue'; import ToggleEpicsSwimlanes from 'ee/boards/components/toggle_epics_swimlanes.vue';
Vue.use(Vuex); Vue.use(Vuex);
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { import {
GlNewDropdown, GlDropdown,
GlNewDropdownItem, GlNewDropdownItem,
GlEmptyState, GlEmptyState,
GlLoadingIcon, GlLoadingIcon,
...@@ -229,7 +229,7 @@ describe('Iterations report', () => { ...@@ -229,7 +229,7 @@ describe('Iterations report', () => {
}); });
it(`${canEditIteration ? 'is shown' : 'is hidden'}`, () => { it(`${canEditIteration ? 'is shown' : 'is hidden'}`, () => {
expect(wrapper.find(GlNewDropdown).exists()).toBe(canEditIteration); expect(wrapper.find(GlDropdown).exists()).toBe(canEditIteration);
}); });
}, },
); );
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlNewDropdown, GlNewDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem } from '@gitlab/ui';
import Component from 'ee/registrations/components/visibility_level_dropdown.vue'; import Component from 'ee/registrations/components/visibility_level_dropdown.vue';
describe('Visibility Level Dropdown', () => { describe('Visibility Level Dropdown', () => {
...@@ -31,7 +31,7 @@ describe('Visibility Level Dropdown', () => { ...@@ -31,7 +31,7 @@ describe('Visibility Level Dropdown', () => {
const hiddenInputValue = () => const hiddenInputValue = () =>
wrapper.find("input[name='group[visibility_level]']").attributes('value'); wrapper.find("input[name='group[visibility_level]']").attributes('value');
const dropdownText = () => wrapper.find(GlNewDropdown).props('text'); const dropdownText = () => wrapper.find(GlDropdown).props('text');
const findDropdownItems = () => const findDropdownItems = () =>
wrapper.findAll(GlNewDropdownItem).wrappers.map(option => ({ wrapper.findAll(GlNewDropdownItem).wrappers.map(option => ({
text: option.text(), text: option.text(),
......
import Vuex from 'vuex'; import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import { import { GlSegmentedControl, GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
GlSegmentedControl,
GlNewDropdown as GlDropdown,
GlNewDropdownItem as GlDropdownItem,
} from '@gitlab/ui';
import RoadmapFilters from 'ee/roadmap/components/roadmap_filters.vue'; import RoadmapFilters from 'ee/roadmap/components/roadmap_filters.vue';
import createStore from 'ee/roadmap/store'; import createStore from 'ee/roadmap/store';
......
...@@ -2,7 +2,7 @@ import Vuex from 'vuex'; ...@@ -2,7 +2,7 @@ import Vuex from 'vuex';
import FuzzingArtifactsDownload from 'ee/security_dashboard/components/fuzzing_artifacts_download.vue'; import FuzzingArtifactsDownload from 'ee/security_dashboard/components/fuzzing_artifacts_download.vue';
import createStore from 'ee/security_dashboard/store'; import createStore from 'ee/security_dashboard/store';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlButton, GlNewDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui'; import { GlButton, GlDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -41,7 +41,7 @@ describe('Filter component', () => { ...@@ -41,7 +41,7 @@ describe('Filter component', () => {
it('should render a download button', () => { it('should render a download button', () => {
expect(wrapper.find(GlButton).exists()).toBe(true); expect(wrapper.find(GlButton).exists()).toBe(true);
expect(wrapper.find(GlNewDropdown).exists()).toBe(false); expect(wrapper.find(GlDropdown).exists()).toBe(false);
}); });
it('should render with href set to the correct filepath', () => { it('should render with href set to the correct filepath', () => {
...@@ -59,7 +59,7 @@ describe('Filter component', () => { ...@@ -59,7 +59,7 @@ describe('Filter component', () => {
it('should render a dropdown button with several items', () => { it('should render a dropdown button with several items', () => {
expect(wrapper.find(GlButton).exists()).toBe(false); expect(wrapper.find(GlButton).exists()).toBe(false);
expect(wrapper.find(GlNewDropdown).exists()).toBe(true); expect(wrapper.find(GlDropdown).exists()).toBe(true);
expect(wrapper.findAll(GlDeprecatedDropdownItem).length).toBe(2); expect(wrapper.findAll(GlDeprecatedDropdownItem).length).toBe(2);
}); });
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlNewDropdown, GlNewDropdownItem, GlButton, GlLink, GlSearchBoxByType } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem, GlButton, GlLink, GlSearchBoxByType } from '@gitlab/ui';
import IterationSelect from 'ee/sidebar/components/iteration_select.vue'; import IterationSelect from 'ee/sidebar/components/iteration_select.vue';
import { iterationSelectTextMap } from 'ee/sidebar/constants'; import { iterationSelectTextMap } from 'ee/sidebar/constants';
import setIterationOnIssue from 'ee/sidebar/queries/set_iteration_on_issue.mutation.graphql'; import setIterationOnIssue from 'ee/sidebar/queries/set_iteration_on_issue.mutation.graphql';
...@@ -88,12 +88,12 @@ describe('IterationSelect', () => { ...@@ -88,12 +88,12 @@ describe('IterationSelect', () => {
it('opens the dropdown on click of the edit button', () => { it('opens the dropdown on click of the edit button', () => {
createComponent({ props: { canEdit: true } }); createComponent({ props: { canEdit: true } });
expect(wrapper.find(GlNewDropdown).isVisible()).toBe(false); expect(wrapper.find(GlDropdown).isVisible()).toBe(false);
toggleDropdown(); toggleDropdown();
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).isVisible()).toBe(true); expect(wrapper.find(GlDropdown).isVisible()).toBe(true);
}); });
}); });
...@@ -113,7 +113,7 @@ describe('IterationSelect', () => { ...@@ -113,7 +113,7 @@ describe('IterationSelect', () => {
const spy = jest.fn(); const spy = jest.fn();
createComponent({ props: { canEdit: true } }); createComponent({ props: { canEdit: true } });
expect(wrapper.find(GlNewDropdown).isVisible()).toBe(false); expect(wrapper.find(GlDropdown).isVisible()).toBe(false);
toggleDropdown(spy); toggleDropdown(spy);
...@@ -127,7 +127,7 @@ describe('IterationSelect', () => { ...@@ -127,7 +127,7 @@ describe('IterationSelect', () => {
it('shows GlNewDropdown', () => { it('shows GlNewDropdown', () => {
createComponent({ props: { canEdit: true }, data: { editing: true } }); createComponent({ props: { canEdit: true }, data: { editing: true } });
expect(wrapper.find(GlNewDropdown).isVisible()).toBe(true); expect(wrapper.find(GlDropdown).isVisible()).toBe(true);
}); });
describe('GlDropdownItem with the right title and id', () => { describe('GlDropdownItem with the right title and id', () => {
...@@ -283,12 +283,12 @@ describe('IterationSelect', () => { ...@@ -283,12 +283,12 @@ describe('IterationSelect', () => {
}); });
it('closes the dropdown', () => { it('closes the dropdown', () => {
expect(wrapper.find(GlNewDropdown).isVisible()).toBe(true); expect(wrapper.find(GlDropdown).isVisible()).toBe(true);
toggleDropdown(); toggleDropdown();
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).isVisible()).toBe(false); expect(wrapper.find(GlDropdown).isVisible()).toBe(false);
}); });
}); });
}); });
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import PolicyRuleEntity from 'ee/threat_monitoring/components/policy_editor/policy_rule_entity.vue'; import PolicyRuleEntity from 'ee/threat_monitoring/components/policy_editor/policy_rule_entity.vue';
import { GlNewDropdown as GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
import { EntityTypes } from 'ee/threat_monitoring/components/policy_editor/constants'; import { EntityTypes } from 'ee/threat_monitoring/components/policy_editor/constants';
describe('PolicyRuleEntity component', () => { describe('PolicyRuleEntity component', () => {
......
import Vuex from 'vuex'; import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlDeprecatedDropdownItem, GlNewDropdown } from '@gitlab/ui'; import { GlDeprecatedDropdownItem, GlDropdown } from '@gitlab/ui';
import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue'; import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
import createStore from '~/deploy_freeze/store'; import createStore from '~/deploy_freeze/store';
...@@ -92,7 +92,7 @@ describe('Deploy freeze timezone dropdown', () => { ...@@ -92,7 +92,7 @@ describe('Deploy freeze timezone dropdown', () => {
}); });
it('renders selected time zone as dropdown label', () => { it('renders selected time zone as dropdown label', () => {
expect(wrapper.find(GlNewDropdown).vm.text).toBe('Alaska'); expect(wrapper.find(GlDropdown).vm.text).toBe('Alaska');
}); });
}); });
}); });
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design management design version dropdown component renders design version dropdown button 1`] = ` exports[`Design management design version dropdown component renders design version dropdown button 1`] = `
<gl-new-dropdown-stub <gl-dropdown-stub
category="tertiary" category="tertiary"
headertext="" headertext=""
issueiid="" issueiid=""
...@@ -35,11 +35,11 @@ exports[`Design management design version dropdown component renders design vers ...@@ -35,11 +35,11 @@ exports[`Design management design version dropdown component renders design vers
1 1
</gl-new-dropdown-item-stub> </gl-new-dropdown-item-stub>
</gl-new-dropdown-stub> </gl-dropdown-stub>
`; `;
exports[`Design management design version dropdown component renders design version list 1`] = ` exports[`Design management design version dropdown component renders design version list 1`] = `
<gl-new-dropdown-stub <gl-dropdown-stub
category="tertiary" category="tertiary"
headertext="" headertext=""
issueiid="" issueiid=""
...@@ -73,5 +73,5 @@ exports[`Design management design version dropdown component renders design vers ...@@ -73,5 +73,5 @@ exports[`Design management design version dropdown component renders design vers
1 1
</gl-new-dropdown-item-stub> </gl-new-dropdown-item-stub>
</gl-new-dropdown-stub> </gl-dropdown-stub>
`; `;
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlNewDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui';
import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue'; import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
import mockAllVersions from './mock_data/all_versions'; import mockAllVersions from './mock_data/all_versions';
...@@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => { ...@@ -75,7 +75,7 @@ describe('Design management design version dropdown component', () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version'); expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
}); });
}); });
...@@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => { ...@@ -83,7 +83,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ maxVersions: 1 }); createComponent({ maxVersions: 1 });
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version'); expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
}); });
}); });
...@@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => { ...@@ -91,7 +91,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) }); createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe(`Showing version #1`); expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing version #1`);
}); });
}); });
...@@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => { ...@@ -99,7 +99,7 @@ describe('Design management design version dropdown component', () => {
createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) }); createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlNewDropdown).attributes('text')).toBe('Showing latest version'); expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing latest version');
}); });
}); });
......
...@@ -45,7 +45,7 @@ exports[`Alert integration settings form default state should match the default ...@@ -45,7 +45,7 @@ exports[`Alert integration settings form default state should match the default
</gl-link-stub> </gl-link-stub>
</label> </label>
<gl-new-dropdown-stub <gl-dropdown-stub
block="true" block="true"
category="tertiary" category="tertiary"
data-qa-selector="incident_templates_dropdown" data-qa-selector="incident_templates_dropdown"
...@@ -68,7 +68,7 @@ exports[`Alert integration settings form default state should match the default ...@@ -68,7 +68,7 @@ exports[`Alert integration settings form default state should match the default
No template selected No template selected
</gl-new-dropdown-item-stub> </gl-new-dropdown-item-stub>
</gl-new-dropdown-stub> </gl-dropdown-stub>
</gl-form-group-stub> </gl-form-group-stub>
<gl-form-group-stub <gl-form-group-stub
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlNewDropdown, GlLink } from '@gitlab/ui'; import { GlDropdown, GlLink } from '@gitlab/ui';
import { createStore } from '~/integrations/edit/store'; import { createStore } from '~/integrations/edit/store';
import { integrationLevels, overrideDropdownDescriptions } from '~/integrations/edit/constants'; import { integrationLevels, overrideDropdownDescriptions } from '~/integrations/edit/constants';
...@@ -34,14 +34,14 @@ describe('OverrideDropdown', () => { ...@@ -34,14 +34,14 @@ describe('OverrideDropdown', () => {
}); });
const findGlLink = () => wrapper.find(GlLink); const findGlLink = () => wrapper.find(GlLink);
const findGlNewDropdown = () => wrapper.find(GlNewDropdown); const findGlDropdown = () => wrapper.find(GlDropdown);
describe('template', () => { describe('template', () => {
describe('override prop is true', () => { describe('override prop is true', () => {
it('renders GlToggle as disabled', () => { it('renders GlToggle as disabled', () => {
createComponent(); createComponent();
expect(findGlNewDropdown().props('text')).toBe('Use custom settings'); expect(findGlDropdown().props('text')).toBe('Use custom settings');
}); });
}); });
...@@ -49,7 +49,7 @@ describe('OverrideDropdown', () => { ...@@ -49,7 +49,7 @@ describe('OverrideDropdown', () => {
it('renders GlToggle as disabled', () => { it('renders GlToggle as disabled', () => {
createComponent({ override: false }); createComponent({ override: false });
expect(findGlNewDropdown().props('text')).toBe('Use default settings'); expect(findGlDropdown().props('text')).toBe('Use default settings');
}); });
}); });
......
import { GlAlert, GlButton, GlNewDropdown, GlFormSelect, GlLabel, GlTable } from '@gitlab/ui'; import { GlAlert, GlButton, GlDropdown, GlFormSelect, GlLabel, GlTable } from '@gitlab/ui';
import { getByRole } from '@testing-library/dom'; import { getByRole } from '@testing-library/dom';
import { mount, shallowMount } from '@vue/test-utils'; import { mount, shallowMount } from '@vue/test-utils';
import AxiosMockAdapter from 'axios-mock-adapter'; import AxiosMockAdapter from 'axios-mock-adapter';
...@@ -35,7 +35,7 @@ describe('JiraImportForm', () => { ...@@ -35,7 +35,7 @@ describe('JiraImportForm', () => {
const getTable = () => wrapper.find(GlTable); const getTable = () => wrapper.find(GlTable);
const getUserDropdown = () => getTable().find(GlNewDropdown); const getUserDropdown = () => getTable().find(GlDropdown);
const getHeader = name => getByRole(wrapper.element, 'columnheader', { name }); const getHeader = name => getByRole(wrapper.element, 'columnheader', { name });
......
import axios from 'axios'; import axios from 'axios';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlNewDropdown, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui'; import { GlDropdown, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
import { ENTER_KEY } from '~/lib/utils/keys'; import { ENTER_KEY } from '~/lib/utils/keys';
import MilestoneCombobox from '~/milestones/project_milestone_combobox.vue'; import MilestoneCombobox from '~/milestones/project_milestone_combobox.vue';
import { milestones as projectMilestones } from './mock_data'; import { milestones as projectMilestones } from './mock_data';
...@@ -53,7 +53,7 @@ describe('Milestone selector', () => { ...@@ -53,7 +53,7 @@ describe('Milestone selector', () => {
}); });
it('renders the dropdown', () => { it('renders the dropdown', () => {
expect(wrapper.find(GlNewDropdown)).toExist(); expect(wrapper.find(GlDropdown)).toExist();
}); });
it('renders additional links', () => { it('renders additional links', () => {
......
...@@ -32,7 +32,7 @@ exports[`Dashboard template matches the default snapshot 1`] = ` ...@@ -32,7 +32,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
<div <div
class="mb-2 pr-2 d-flex d-sm-block" class="mb-2 pr-2 d-flex d-sm-block"
> >
<gl-new-dropdown-stub <gl-dropdown-stub
category="tertiary" category="tertiary"
class="flex-grow-1" class="flex-grow-1"
data-qa-selector="environments_dropdown" data-qa-selector="environments_dropdown"
...@@ -69,7 +69,7 @@ exports[`Dashboard template matches the default snapshot 1`] = ` ...@@ -69,7 +69,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
</div> </div>
</div> </div>
</gl-new-dropdown-stub> </gl-dropdown-stub>
</div> </div>
<div <div
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import Visibility from 'visibilityjs'; import Visibility from 'visibilityjs';
import { GlNewDropdown, GlNewDropdownItem, GlButton } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem, GlButton } from '@gitlab/ui';
import { createStore } from '~/monitoring/stores'; import { createStore } from '~/monitoring/stores';
import RefreshButton from '~/monitoring/components/refresh_button.vue'; import RefreshButton from '~/monitoring/components/refresh_button.vue';
...@@ -15,7 +15,7 @@ describe('RefreshButton', () => { ...@@ -15,7 +15,7 @@ describe('RefreshButton', () => {
}; };
const findRefreshBtn = () => wrapper.find(GlButton); const findRefreshBtn = () => wrapper.find(GlButton);
const findDropdown = () => wrapper.find(GlNewDropdown); const findDropdown = () => wrapper.find(GlDropdown);
const findOptions = () => findDropdown().findAll(GlNewDropdownItem); const findOptions = () => findDropdown().findAll(GlNewDropdownItem);
const findOptionAt = index => findOptions().at(index); const findOptionAt = index => findOptions().at(index);
......
import { mount, shallowMount } from '@vue/test-utils'; import { mount, shallowMount } from '@vue/test-utils';
import { GlNewDropdown, GlNewDropdownItem, GlForm } from '@gitlab/ui'; import { GlDropdown, GlNewDropdownItem, GlForm } from '@gitlab/ui';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import waitForPromises from 'helpers/wait_for_promises'; import waitForPromises from 'helpers/wait_for_promises';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
...@@ -23,7 +23,7 @@ describe('Pipeline New Form', () => { ...@@ -23,7 +23,7 @@ describe('Pipeline New Form', () => {
}; };
const findForm = () => wrapper.find(GlForm); const findForm = () => wrapper.find(GlForm);
const findDropdown = () => wrapper.find(GlNewDropdown); const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownItems = () => wrapper.findAll(GlNewDropdownItem); const findDropdownItems = () => wrapper.findAll(GlNewDropdownItem);
const findVariableRows = () => wrapper.findAll('[data-testid="ci-variable-row"]'); const findVariableRows = () => wrapper.findAll('[data-testid="ci-variable-row"]');
const findRemoveIcons = () => wrapper.findAll('[data-testid="remove-ci-variable-row"]'); const findRemoveIcons = () => wrapper.findAll('[data-testid="remove-ci-variable-row"]');
......
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { import { GlDropdown, GlNewDropdownHeader, GlSearchBoxByType, GlNewDropdownItem } from '@gitlab/ui';
GlNewDropdown,
GlNewDropdownHeader,
GlSearchBoxByType,
GlNewDropdownItem,
} from '@gitlab/ui';
import * as urlUtility from '~/lib/utils/url_utility'; import * as urlUtility from '~/lib/utils/url_utility';
import AuthorSelect from '~/projects/commits/components/author_select.vue'; import AuthorSelect from '~/projects/commits/components/author_select.vue';
import { createStore } from '~/projects/commits/store'; import { createStore } from '~/projects/commits/store';
...@@ -63,7 +58,7 @@ describe('Author Select', () => { ...@@ -63,7 +58,7 @@ describe('Author Select', () => {
}); });
const findDropdownContainer = () => wrapper.find({ ref: 'dropdownContainer' }); const findDropdownContainer = () => wrapper.find({ ref: 'dropdownContainer' });
const findDropdown = () => wrapper.find(GlNewDropdown); const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownHeader = () => wrapper.find(GlNewDropdownHeader); const findDropdownHeader = () => wrapper.find(GlNewDropdownHeader);
const findSearchBox = () => wrapper.find(GlSearchBoxByType); const findSearchBox = () => wrapper.find(GlSearchBoxByType);
const findDropdownItems = () => wrapper.findAll(GlNewDropdownItem); const findDropdownItems = () => wrapper.findAll(GlNewDropdownItem);
......
...@@ -177,7 +177,7 @@ describe('Ref selector component', () => { ...@@ -177,7 +177,7 @@ describe('Ref selector component', () => {
return waitForRequests(); return waitForRequests();
}); });
it('adds the provided ID to the GlNewDropdown instance', () => { it('adds the provided ID to the GlDropdown instance', () => {
expect(wrapper.attributes().id).toBe(id); expect(wrapper.attributes().id).toBe(id);
}); });
}); });
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
<gl-new-dropdown-stub <gl-dropdown-stub
category="primary" category="primary"
headertext="" headertext=""
right="" right=""
...@@ -94,5 +94,5 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` ...@@ -94,5 +94,5 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
</div> </div>
</div> </div>
</div> </div>
</gl-new-dropdown-stub> </gl-dropdown-stub>
`; `;
...@@ -3,7 +3,7 @@ import { ...@@ -3,7 +3,7 @@ import {
GlFilteredSearch, GlFilteredSearch,
GlButtonGroup, GlButtonGroup,
GlButton, GlButton,
GlNewDropdown as GlDropdown, GlDropdown,
GlNewDropdownItem as GlDropdownItem, GlNewDropdownItem as GlDropdownItem,
} from '@gitlab/ui'; } from '@gitlab/ui';
......
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