Skip to content

G
gitlab-ce
Commit c39f47af authored by Mike Greiling's avatar Mike Greiling
Browse files
Options

Rename GlDropdown to GlDeprecatedDropdown 

The GlDropdown component has been deprecated in favor of
GlNewDropdown. During this transition GlDropdown has been
renamed to GlDeprecatedDropdown. This rename effects
GlDropdownItem, GlDropdownHeader, and GlDropdownDivider
as well.
parent acda044f
Hide whitespace changes
Inline Side-by-side
Showing with 741 additions and 634 deletions
app/assets/javascripts/alert_management/components/alert_status.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlButton } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import Tracking from '~/tracking'; import Tracking from '~/tracking';
import { trackAlertStatusUpdateOptions } from '../constants'; import { trackAlertStatusUpdateOptions } from '../constants';
...@@ -18,8 +18,8 @@ export default { ...@@ -18,8 +18,8 @@ export default {
RESOLVED: s__('AlertManagement|Resolved'), RESOLVED: s__('AlertManagement|Resolved'),
}, },
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlButton, GlButton,
}, },
props: { props: {
...@@ -91,7 +91,7 @@ export default { ...@@ -91,7 +91,7 @@ export default {
<template> <template>
<div class="dropdown dropdown-menu-selectable" :class="dropdownClass"> <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
<gl-dropdown <gl-deprecated-dropdown
ref="dropdown" ref="dropdown"
right right
:text="$options.statuses[alert.status]" :text="$options.statuses[alert.status]"
...@@ -112,7 +112,7 @@ export default { ...@@ -112,7 +112,7 @@ export default {
/> />
</div> </div>
<div class="dropdown-content dropdown-body"> <div class="dropdown-content dropdown-body">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="(label, field) in $options.statuses" v-for="(label, field) in $options.statuses"
:key="field" :key="field"
data-testid="statusDropdownItem" data-testid="statusDropdownItem"
...@@ -122,8 +122,8 @@ export default { ...@@ -122,8 +122,8 @@ export default {
@click="updateAlertStatus(label)" @click="updateAlertStatus(label)"
> >
{{ label }} {{ label }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</template> </template>
app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue
View file @ c39f47af
<script> <script>
import { GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdownItem } from '@gitlab/ui';
export default { export default {
components: { components: {
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
user: { user: {
...@@ -24,7 +24,7 @@ export default { ...@@ -24,7 +24,7 @@ export default {
</script> </script>
<template> <template>
<gl-dropdown-item <gl-deprecated-dropdown-item
:key="user.username" :key="user.username"
data-testid="assigneeDropdownItem" data-testid="assigneeDropdownItem"
class="assignee-dropdown-item gl-vertical-align-middle" class="assignee-dropdown-item gl-vertical-align-middle"
...@@ -47,5 +47,5 @@ export default { ...@@ -47,5 +47,5 @@ export default {
</strong> </strong>
<span class="dropdown-menu-user-username"> {{ user.username }}</span> <span class="dropdown-menu-user-username"> {{ user.username }}</span>
</span> </span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</template> </template>
app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue
View file @ c39f47af
<script> <script>
import { import {
GlIcon, GlIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
GlLoadingIcon, GlLoadingIcon,
GlTooltip, GlTooltip,
GlButton, GlButton,
...@@ -33,10 +33,10 @@ export default { ...@@ -33,10 +33,10 @@ export default {
}, },
components: { components: {
GlIcon, GlIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlLoadingIcon, GlLoadingIcon,
GlTooltip, GlTooltip,
GlButton, GlButton,
...@@ -213,7 +213,7 @@ export default { ...@@ -213,7 +213,7 @@ export default {
</p> </p>
<div class="dropdown dropdown-menu-selectable" :class="dropdownClass"> <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
<gl-dropdown <gl-deprecated-dropdown
ref="dropdown" ref="dropdown"
:text="assignedUser" :text="assignedUser"
class="w-100" class="w-100"
...@@ -243,18 +243,18 @@ export default { ...@@ -243,18 +243,18 @@ export default {
</div> </div>
<div class="dropdown-content dropdown-body"> <div class="dropdown-content dropdown-body">
<template v-if="userListValid"> <template v-if="userListValid">
<gl-dropdown-item <gl-deprecated-dropdown-item
:active="!userName" :active="!userName"
active-class="is-active" active-class="is-active"
@click="updateAlertAssignees('')" @click="updateAlertAssignees('')"
> >
{{ __('Unassigned') }} {{ __('Unassigned') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-dropdown-header class="mt-0"> <gl-deprecated-dropdown-header class="mt-0">
{{ __('Assignee') }} {{ __('Assignee') }}
</gl-dropdown-header> </gl-deprecated-dropdown-header>
<sidebar-assignee <sidebar-assignee
v-for="user in sortedUsers" v-for="user in sortedUsers"
:key="user.username" :key="user.username"
...@@ -263,12 +263,12 @@ export default { ...@@ -263,12 +263,12 @@ export default {
@update-alert-assignees="updateAlertAssignees" @update-alert-assignees="updateAlertAssignees"
/> />
</template> </template>
<gl-dropdown-item v-else-if="userListEmpty"> <gl-deprecated-dropdown-item v-else-if="userListEmpty">
{{ __('No Matching Results') }} {{ __('No Matching Results') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-loading-icon v-else /> <gl-loading-icon v-else />
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
<gl-loading-icon v-if="isUpdating" :inline="true" /> <gl-loading-icon v-if="isUpdating" :inline="true" />
......
app/assets/javascripts/boards/components/boards_selector.vue
View file @ c39f47af
...@@ -3,10 +3,10 @@ import { throttle } from 'lodash'; ...@@ -3,10 +3,10 @@ import { throttle } from 'lodash';
import { import {
GlLoadingIcon, GlLoadingIcon,
GlSearchBoxByType, GlSearchBoxByType,
GlDropdown, GlDeprecatedDropdown,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
} from '@gitlab/ui'; } from '@gitlab/ui';
import httpStatusCodes from '~/lib/utils/http_status'; import httpStatusCodes from '~/lib/utils/http_status';
...@@ -26,10 +26,10 @@ export default { ...@@ -26,10 +26,10 @@ export default {
BoardForm, BoardForm,
GlLoadingIcon, GlLoadingIcon,
GlSearchBoxByType, GlSearchBoxByType,
GlDropdown, GlDeprecatedDropdown,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
currentBoard: { currentBoard: {
...@@ -235,7 +235,7 @@ export default { ...@@ -235,7 +235,7 @@ export default {
<template> <template>
<div class="boards-switcher js-boards-selector gl-mr-3"> <div class="boards-switcher js-boards-selector gl-mr-3">
<span class="boards-selector-wrapper js-boards-selector-wrapper"> <span class="boards-selector-wrapper js-boards-selector-wrapper">
<gl-dropdown <gl-deprecated-dropdown
data-qa-selector="boards_dropdown" data-qa-selector="boards_dropdown"
toggle-class="dropdown-menu-toggle js-dropdown-toggle" toggle-class="dropdown-menu-toggle js-dropdown-toggle"
menu-class="flex-column dropdown-extended-height" menu-class="flex-column dropdown-extended-height"
...@@ -248,9 +248,9 @@ export default { ...@@ -248,9 +248,9 @@ export default {
</div> </div>
</div> </div>
<gl-dropdown-header class="mt-0"> <gl-deprecated-dropdown-header class="mt-0">
<gl-search-box-by-type ref="searchBox" v-model="filterTerm" /> <gl-search-box-by-type ref="searchBox" v-model="filterTerm" />
</gl-dropdown-header> </gl-deprecated-dropdown-header>
<div <div
v-if="!loading" v-if="!loading"
...@@ -259,26 +259,26 @@ export default { ...@@ -259,26 +259,26 @@ export default {
class="dropdown-content flex-fill" class="dropdown-content flex-fill"
@scroll.passive="throttledSetScrollFade" @scroll.passive="throttledSetScrollFade"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-show="filteredBoards.length === 0" v-show="filteredBoards.length === 0"
class="no-pointer-events text-secondary" class="no-pointer-events text-secondary"
> >
{{ s__('IssueBoards|No matching boards found') }} {{ s__('IssueBoards|No matching boards found') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<h6 v-if="showRecentSection" class="dropdown-bold-header my-0"> <h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
{{ __('Recent') }} {{ __('Recent') }}
</h6> </h6>
<template v-if="showRecentSection"> <template v-if="showRecentSection">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="recentBoard in recentBoards" v-for="recentBoard in recentBoards"
:key="`recent-${recentBoard.id}`" :key="`recent-${recentBoard.id}`"
class="js-dropdown-item" class="js-dropdown-item"
:href="`${boardBaseUrl}/${recentBoard.id}`" :href="`${boardBaseUrl}/${recentBoard.id}`"
> >
{{ recentBoard.name }} {{ recentBoard.name }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</template> </template>
<hr v-if="showRecentSection" class="my-1" /> <hr v-if="showRecentSection" class="my-1" />
...@@ -287,21 +287,21 @@ export default { ...@@ -287,21 +287,21 @@ export default {
{{ __('All') }} {{ __('All') }}
</h6> </h6>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="otherBoard in filteredBoards" v-for="otherBoard in filteredBoards"
:key="otherBoard.id" :key="otherBoard.id"
class="js-dropdown-item" class="js-dropdown-item"
:href="`${boardBaseUrl}/${otherBoard.id}`" :href="`${boardBaseUrl}/${otherBoard.id}`"
> >
{{ otherBoard.name }} {{ otherBoard.name }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-item v-if="hasMissingBoards" class="small unclickable"> <gl-deprecated-dropdown-item v-if="hasMissingBoards" class="small unclickable">
{{ {{
s__( s__(
'IssueBoards|Some of your boards are hidden, activate a license to see them again.', 'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
) )
}} }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</div> </div>
<div <div
...@@ -313,25 +313,25 @@ export default { ...@@ -313,25 +313,25 @@ export default {
<gl-loading-icon v-if="loading" /> <gl-loading-icon v-if="loading" />
<div v-if="canAdminBoard"> <div v-if="canAdminBoard">
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-dropdown-item <gl-deprecated-dropdown-item
v-if="multipleIssueBoardsAvailable" v-if="multipleIssueBoardsAvailable"
data-qa-selector="create_new_board_button" data-qa-selector="create_new_board_button"
@click.prevent="showPage('new')" @click.prevent="showPage('new')"
> >
{{ s__('IssueBoards|Create new board') }} {{ s__('IssueBoards|Create new board') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-if="showDelete" v-if="showDelete"
class="text-danger js-delete-board" class="text-danger js-delete-board"
@click.prevent="showPage('delete')" @click.prevent="showPage('delete')"
> >
{{ s__('IssueBoards|Delete board') }} {{ s__('IssueBoards|Delete board') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
<board-form <board-form
v-if="currentPage" v-if="currentPage"
......
app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue
View file @ c39f47af
<script> <script>
import { import {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlSearchBoxByType, GlSearchBoxByType,
GlIcon, GlIcon,
} from '@gitlab/ui'; } from '@gitlab/ui';
...@@ -12,9 +12,9 @@ import { mapGetters } from 'vuex'; ...@@ -12,9 +12,9 @@ import { mapGetters } from 'vuex';
export default { export default {
name: 'CiEnvironmentsDropdown', name: 'CiEnvironmentsDropdown',
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlSearchBoxByType, GlSearchBoxByType,
GlIcon, GlIcon,
}, },
...@@ -66,9 +66,9 @@ export default { ...@@ -66,9 +66,9 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-dropdown :text="value"> <gl-deprecated-dropdown :text="value">
<gl-search-box-by-type v-model.trim="searchTerm" class="m-2" /> <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" />
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="environment in filteredResults" v-for="environment in filteredResults"
:key="environment" :key="environment"
@click="selectEnvironment(environment)" @click="selectEnvironment(environment)"
...@@ -79,15 +79,15 @@ export default { ...@@ -79,15 +79,15 @@ export default {
class="vertical-align-middle" class="vertical-align-middle"
/> />
{{ environment }} {{ environment }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{ <gl-deprecated-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
__('No matching results') __('No matching results')
}}</gl-dropdown-item> }}</gl-deprecated-dropdown-item>
<template v-if="shouldRenderCreateButton"> <template v-if="shouldRenderCreateButton">
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-dropdown-item @click="createClicked"> <gl-deprecated-dropdown-item @click="createClicked">
{{ composedCreateButtonLabel }} {{ composedCreateButtonLabel }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</template> </template>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
app/assets/javascripts/clusters/components/crossplane_provider_stack.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
import { s__ } from '../../locale'; import { s__ } from '../../locale';
export default { export default {
name: 'CrossplaneProviderStack', name: 'CrossplaneProviderStack',
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlIcon, GlIcon,
}, },
props: { props: {
...@@ -67,17 +67,21 @@ export default { ...@@ -67,17 +67,21 @@ export default {
<label> <label>
{{ s__('ClusterIntegration|Enabled stack') }} {{ s__('ClusterIntegration|Enabled stack') }}
</label> </label>
<gl-dropdown <gl-deprecated-dropdown
:disabled="crossplane.installed" :disabled="crossplane.installed"
:text="dropdownText" :text="dropdownText"
toggle-class="dropdown-menu-toggle gl-field-error-outline" toggle-class="dropdown-menu-toggle gl-field-error-outline"
class="w-100" class="w-100"
:class="{ 'gl-show-field-errors': validationError }" :class="{ 'gl-show-field-errors': validationError }"
> >
<gl-dropdown-item v-for="stack in stacks" :key="stack.code" @click="selectStack(stack)"> <gl-deprecated-dropdown-item
v-for="stack in stacks"
:key="stack.code"
@click="selectStack(stack)"
>
<span class="ml-1">{{ stack.name }}</span> <span class="ml-1">{{ stack.name }}</span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
<span v-if="validationError" class="gl-field-error">{{ validationError }}</span> <span v-if="validationError" class="gl-field-error">{{ validationError }}</span>
<p class="form-text text-muted"> <p class="form-text text-muted">
{{ s__(`You must select a stack for configuring your cloud provider. Learn more about`) }} {{ s__(`You must select a stack for configuring your cloud provider. Learn more about`) }}
......
app/assets/javascripts/clusters/components/fluentd_output_settings.vue
View file @ c39f47af
...@@ -4,8 +4,8 @@ import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants'; ...@@ -4,8 +4,8 @@ import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
import { import {
GlAlert, GlAlert,
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlFormCheckbox, GlFormCheckbox,
} from '@gitlab/ui'; } from '@gitlab/ui';
import eventHub from '~/clusters/event_hub'; import eventHub from '~/clusters/event_hub';
...@@ -17,8 +17,8 @@ export default { ...@@ -17,8 +17,8 @@ export default {
components: { components: {
GlAlert, GlAlert,
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlFormCheckbox, GlFormCheckbox,
}, },
props: { props: {
...@@ -203,15 +203,15 @@ export default { ...@@ -203,15 +203,15 @@ export default {
<label for="fluentd-protocol"> <label for="fluentd-protocol">
<strong>{{ s__('ClusterIntegration|SIEM Protocol') }}</strong> <strong>{{ s__('ClusterIntegration|SIEM Protocol') }}</strong>
</label> </label>
<gl-dropdown :text="protocolName" class="w-100"> <gl-deprecated-dropdown :text="protocolName" class="w-100">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="(value, index) in protocols" v-for="(value, index) in protocols"
:key="index" :key="index"
@click="selectProtocol(value.toLowerCase())" @click="selectProtocol(value.toLowerCase())"
> >
{{ value }} {{ value }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
<div class="form-group flex flex-wrap"> <div class="form-group flex flex-wrap">
<gl-form-checkbox :checked="wafLogEnabled" @input="wafLogChanged"> <gl-form-checkbox :checked="wafLogEnabled" @input="wafLogChanged">
......
app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
View file @ c39f47af
...@@ -8,8 +8,8 @@ import { ...@@ -8,8 +8,8 @@ import {
GlLink, GlLink,
GlToggle, GlToggle,
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlIcon, GlIcon,
} from '@gitlab/ui'; } from '@gitlab/ui';
import eventHub from '~/clusters/event_hub'; import eventHub from '~/clusters/event_hub';
...@@ -26,8 +26,8 @@ export default { ...@@ -26,8 +26,8 @@ export default {
GlLink, GlLink,
GlToggle, GlToggle,
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlIcon, GlIcon,
}, },
props: { props: {
...@@ -221,11 +221,15 @@ export default { ...@@ -221,11 +221,15 @@ export default {
</strong> </strong>
</p> </p>
</div> </div>
<gl-dropdown :text="modSecurityModeName" :disabled="saveButtonDisabled"> <gl-deprecated-dropdown :text="modSecurityModeName" :disabled="saveButtonDisabled">
<gl-dropdown-item v-for="(mode, key) in modes" :key="key" @click="selectMode(key)"> <gl-deprecated-dropdown-item
v-for="(mode, key) in modes"
:key="key"
@click="selectMode(key)"
>
{{ mode.name }} {{ mode.name }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</div> </div>
<div v-if="showButtons" class="mt-3"> <div v-if="showButtons" class="mt-3">
......
app/assets/javascripts/clusters/components/knative_domain_editor.vue
View file @ c39f47af
<script> <script>
import { import {
GlDropdown, GlDeprecatedDropdown,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlDropdownItem, GlDeprecatedDropdownItem,
GlLoadingIcon, GlLoadingIcon,
GlSearchBoxByType, GlSearchBoxByType,
GlSprintf, GlSprintf,
...@@ -20,9 +20,9 @@ export default { ...@@ -20,9 +20,9 @@ export default {
LoadingButton, LoadingButton,
ClipboardButton, ClipboardButton,
GlLoadingIcon, GlLoadingIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlDropdownItem, GlDeprecatedDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
GlSprintf, GlSprintf,
}, },
...@@ -121,7 +121,7 @@ export default { ...@@ -121,7 +121,7 @@ export default {
<strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong> <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong>
</label> </label>
<gl-dropdown <gl-deprecated-dropdown
v-if="showDomainsDropdown" v-if="showDomainsDropdown"
:text="domainDropdownText" :text="domainDropdownText"
toggle-class="dropdown-menu-toggle" toggle-class="dropdown-menu-toggle"
...@@ -132,16 +132,16 @@ export default { ...@@ -132,16 +132,16 @@ export default {
:placeholder="s__('ClusterIntegration|Search domains')" :placeholder="s__('ClusterIntegration|Search domains')"
class="m-2" class="m-2"
/> />
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="domain in filteredDomains" v-for="domain in filteredDomains"
:key="domain.id" :key="domain.id"
@click="selectDomain(domain)" @click="selectDomain(domain)"
> >
<span class="ml-1">{{ domain.domain }}</span> <span class="ml-1">{{ domain.domain }}</span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<template v-if="searchQuery"> <template v-if="searchQuery">
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-dropdown-item key="custom-domain" @click="selectCustomDomain(searchQuery)"> <gl-deprecated-dropdown-item key="custom-domain" @click="selectCustomDomain(searchQuery)">
<span class="ml-1"> <span class="ml-1">
<gl-sprintf :message="s__('ClusterIntegration|Use %{query}')"> <gl-sprintf :message="s__('ClusterIntegration|Use %{query}')">
<template #query> <template #query>
...@@ -149,9 +149,9 @@ export default { ...@@ -149,9 +149,9 @@ export default {
</template> </template>
</gl-sprintf> </gl-sprintf>
</span> </span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</template> </template>
</gl-dropdown> </gl-deprecated-dropdown>
<input <input
v-else v-else
......
app/assets/javascripts/confidential_merge_request/components/dropdown.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
Icon, Icon,
}, },
props: { props: {
...@@ -38,7 +38,7 @@ export default { ...@@ -38,7 +38,7 @@ export default {
</script> </script>
<template> <template>
<gl-dropdown toggle-class="d-flex align-items-center w-100" class="w-100"> <gl-deprecated-dropdown toggle-class="d-flex align-items-center w-100" class="w-100">
<template #button-content> <template #button-content>
<span class="str-truncated-100 mr-2"> <span class="str-truncated-100 mr-2">
<icon name="lock" /> <icon name="lock" />
...@@ -46,13 +46,17 @@ export default { ...@@ -46,13 +46,17 @@ export default {
</span> </span>
<icon name="chevron-down" class="ml-auto" /> <icon name="chevron-down" class="ml-auto" />
</template> </template>
<gl-dropdown-item v-for="project in projects" :key="project.id" @click="selectProject(project)"> <gl-deprecated-dropdown-item
v-for="project in projects"
:key="project.id"
@click="selectProject(project)"
>
<icon <icon
name="mobile-issue-close" name="mobile-issue-close"
:class="{ icon: project.id !== selectedProject.id }" :class="{ icon: project.id !== selectedProject.id }"
class="js-active-project-check" class="js-active-project-check"
/> />
<span class="ml-1">{{ project.name }}</span> <span class="ml-1">{{ project.name }}</span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } 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: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
mixins: [allVersionsMixin], mixins: [allVersionsMixin],
computed: { computed: {
...@@ -50,8 +50,8 @@ export default { ...@@ -50,8 +50,8 @@ export default {
</script> </script>
<template> <template>
<gl-dropdown :text="dropdownText" variant="link" class="design-version-dropdown"> <gl-deprecated-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
<gl-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id"> <gl-deprecated-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
<router-link <router-link
class="d-flex js-version-link" class="d-flex js-version-link"
:to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }" :to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }"
...@@ -71,6 +71,6 @@ export default { ...@@ -71,6 +71,6 @@ export default {
class="fa fa-check pull-right" class="fa fa-check pull-right"
></i> ></i>
</router-link> </router-link>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
app/assets/javascripts/error_tracking/components/error_details.vue
View file @ c39f47af
...@@ -9,9 +9,9 @@ import { ...@@ -9,9 +9,9 @@ import {
GlBadge, GlBadge,
GlAlert, GlAlert,
GlSprintf, GlSprintf,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { __, sprintf, n__ } from '~/locale'; import { __, sprintf, n__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
...@@ -43,9 +43,9 @@ export default { ...@@ -43,9 +43,9 @@ export default {
GlBadge, GlBadge,
GlAlert, GlAlert,
GlSprintf, GlSprintf,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
TimeAgoTooltip, TimeAgoTooltip,
}, },
directives: { directives: {
...@@ -331,38 +331,38 @@ export default { ...@@ -331,38 +331,38 @@ export default {
</gl-button> </gl-button>
</form> </form>
</div> </div>
<gl-dropdown <gl-deprecated-dropdown
text="Options" text="Options"
class="error-details-options d-md-none" class="error-details-options d-md-none"
right right
:disabled="issueUpdateInProgress" :disabled="issueUpdateInProgress"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
data-qa-selector="update_ignore_status_button" data-qa-selector="update_ignore_status_button"
@click="onIgnoreStatusUpdate" @click="onIgnoreStatusUpdate"
>{{ ignoreBtnLabel }}</gl-dropdown-item >{{ ignoreBtnLabel }}</gl-deprecated-dropdown-item
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
data-qa-selector="update_resolve_status_button" data-qa-selector="update_resolve_status_button"
@click="onResolveStatusUpdate" @click="onResolveStatusUpdate"
>{{ resolveBtnLabel }}</gl-dropdown-item >{{ resolveBtnLabel }}</gl-deprecated-dropdown-item
> >
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-dropdown-item <gl-deprecated-dropdown-item
v-if="error.gitlabIssuePath" v-if="error.gitlabIssuePath"
data-qa-selector="view_issue_button" data-qa-selector="view_issue_button"
:href="error.gitlabIssuePath" :href="error.gitlabIssuePath"
variant="success" variant="success"
>{{ __('View issue') }}</gl-dropdown-item >{{ __('View issue') }}</gl-deprecated-dropdown-item
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-if="!error.gitlabIssuePath" v-if="!error.gitlabIssuePath"
:loading="issueCreationInProgress" :loading="issueCreationInProgress"
data-qa-selector="create_issue_button" data-qa-selector="create_issue_button"
@click="createIssue" @click="createIssue"
>{{ __('Create issue') }}</gl-dropdown-item >{{ __('Create issue') }}</gl-deprecated-dropdown-item
> >
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</div> </div>
<div> <div>
......
app/assets/javascripts/error_tracking/components/error_tracking_list.vue
View file @ c39f47af
...@@ -8,9 +8,9 @@ import { ...@@ -8,9 +8,9 @@ import {
GlLoadingIcon, GlLoadingIcon,
GlTable, GlTable,
GlFormInput, GlFormInput,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlTooltipDirective, GlTooltipDirective,
GlPagination, GlPagination,
} from '@gitlab/ui'; } from '@gitlab/ui';
...@@ -72,9 +72,9 @@ export default { ...@@ -72,9 +72,9 @@ export default {
components: { components: {
GlEmptyState, GlEmptyState,
GlButton, GlButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlIcon, GlIcon,
GlLink, GlLink,
GlLoadingIcon, GlLoadingIcon,
...@@ -233,7 +233,7 @@ export default { ...@@ -233,7 +233,7 @@ export default {
> >
<div class="search-box flex-fill mb-1 mb-md-0"> <div class="search-box flex-fill mb-1 mb-md-0">
<div class="filtered-search-box mb-0"> <div class="filtered-search-box mb-0">
<gl-dropdown <gl-deprecated-dropdown
:text="__('Recent searches')" :text="__('Recent searches')"
class="filtered-search-history-dropdown-wrapper" class="filtered-search-history-dropdown-wrapper"
toggle-class="filtered-search-history-dropdown-toggle-button" toggle-class="filtered-search-history-dropdown-toggle-button"
...@@ -243,19 +243,19 @@ export default { ...@@ -243,19 +243,19 @@ export default {
{{ __('This feature requires local storage to be enabled') }} {{ __('This feature requires local storage to be enabled') }}
</div> </div>
<template v-else-if="recentSearches.length > 0"> <template v-else-if="recentSearches.length > 0">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="searchQuery in recentSearches" v-for="searchQuery in recentSearches"
:key="searchQuery" :key="searchQuery"
@click="setSearchText(searchQuery)" @click="setSearchText(searchQuery)"
>{{ searchQuery }} >{{ searchQuery }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches" <gl-deprecated-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches"
>{{ __('Clear recent searches') }} >{{ __('Clear recent searches') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</template> </template>
<div v-else class="px-3">{{ __("You don't have any recent searches") }}</div> <div v-else class="px-3">{{ __("You don't have any recent searches") }}</div>
</gl-dropdown> </gl-deprecated-dropdown>
<div class="filtered-search-input-container flex-fill"> <div class="filtered-search-input-container flex-fill">
<gl-form-input <gl-form-input
v-model="errorSearchQuery" v-model="errorSearchQuery"
...@@ -280,13 +280,13 @@ export default { ...@@ -280,13 +280,13 @@ export default {
</div> </div>
</div> </div>
<gl-dropdown <gl-deprecated-dropdown
:text="$options.statusFilters[statusFilter]" :text="$options.statusFilters[statusFilter]"
class="status-dropdown mx-md-1 mb-1 mb-md-0" class="status-dropdown mx-md-1 mb-1 mb-md-0"
menu-class="dropdown" menu-class="dropdown"
:disabled="loading" :disabled="loading"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="(label, status) in $options.statusFilters" v-for="(label, status) in $options.statusFilters"
:key="status" :key="status"
@click="filterErrors(status, label)" @click="filterErrors(status, label)"
...@@ -299,16 +299,16 @@ export default { ...@@ -299,16 +299,16 @@ export default {
/> />
{{ label }} {{ label }}
</span> </span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
<gl-dropdown <gl-deprecated-dropdown
:text="$options.sortFields[sortField]" :text="$options.sortFields[sortField]"
left left
:disabled="loading" :disabled="loading"
menu-class="dropdown" menu-class="dropdown"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="(label, field) in $options.sortFields" v-for="(label, field) in $options.sortFields"
:key="field" :key="field"
@click="sortByField(field)" @click="sortByField(field)"
...@@ -321,8 +321,8 @@ export default { ...@@ -321,8 +321,8 @@ export default {
/> />
{{ label }} {{ label }}
</span> </span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
<div v-if="loading" class="py-3"> <div v-if="loading" class="py-3">
......
app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { getDisplayName } from '../utils'; import { getDisplayName } from '../utils';
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
dropdownLabel: { dropdownLabel: {
...@@ -52,7 +52,7 @@ export default { ...@@ -52,7 +52,7 @@ export default {
<div :class="{ 'gl-show-field-errors': isProjectInvalid }"> <div :class="{ 'gl-show-field-errors': isProjectInvalid }">
<label class="label-bold" for="project-dropdown">{{ __('Project') }}</label> <label class="label-bold" for="project-dropdown">{{ __('Project') }}</label>
<div class="row"> <div class="row">
<gl-dropdown <gl-deprecated-dropdown
id="project-dropdown" id="project-dropdown"
class="col-8 col-md-9 gl-pr-0" class="col-8 col-md-9 gl-pr-0"
:disabled="!hasProjects" :disabled="!hasProjects"
...@@ -60,14 +60,14 @@ export default { ...@@ -60,14 +60,14 @@ export default {
toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline" toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
:text="dropdownLabel" :text="dropdownLabel"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="project in projects" v-for="project in projects"
:key="`${project.organizationSlug}.${project.slug}`" :key="`${project.organizationSlug}.${project.slug}`"
class="w-100" class="w-100"
@click="$emit('select-project', project)" @click="$emit('select-project', project)"
>{{ getDisplayName(project) }}</gl-dropdown-item >{{ getDisplayName(project) }}</gl-deprecated-dropdown-item
> >
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
<p v-if="isProjectInvalid" class="js-project-dropdown-error gl-field-error"> <p v-if="isProjectInvalid" class="js-project-dropdown-error gl-field-error">
{{ invalidProjectLabel }} {{ invalidProjectLabel }}
......
app/assets/javascripts/logs/components/environment_logs.vue
View file @ c39f47af
...@@ -5,10 +5,10 @@ import { ...@@ -5,10 +5,10 @@ import {
GlSprintf, GlSprintf,
GlIcon, GlIcon,
GlAlert, GlAlert,
GlDropdown, GlDeprecatedDropdown,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlInfiniteScroll, GlInfiniteScroll,
} from '@gitlab/ui'; } from '@gitlab/ui';
...@@ -25,10 +25,10 @@ export default { ...@@ -25,10 +25,10 @@ export default {
GlSprintf, GlSprintf,
GlIcon, GlIcon,
GlAlert, GlAlert,
GlDropdown, GlDeprecatedDropdown,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlInfiniteScroll, GlInfiniteScroll,
LogSimpleFilters, LogSimpleFilters,
LogAdvancedFilters, LogAdvancedFilters,
...@@ -174,16 +174,16 @@ export default { ...@@ -174,16 +174,16 @@ export default {
<div class="top-bar d-md-flex border bg-secondary-50 pt-2 pr-1 pb-0 pl-2"> <div class="top-bar d-md-flex border bg-secondary-50 pt-2 pr-1 pb-0 pl-2">
<div class="flex-grow-0"> <div class="flex-grow-0">
<gl-dropdown <gl-deprecated-dropdown
id="environments-dropdown" id="environments-dropdown"
:text="environments.current || managedApps.current" :text="environments.current || managedApps.current"
:disabled="environments.isLoading" :disabled="environments.isLoading"
class="mb-2 gl-h-32 pr-2 d-flex d-md-block js-environments-dropdown" class="mb-2 gl-h-32 pr-2 d-flex d-md-block js-environments-dropdown"
> >
<gl-dropdown-header class="gl-text-center"> <gl-deprecated-dropdown-header class="gl-text-center">
{{ s__('Environments|Environments') }} {{ s__('Environments|Environments') }}
</gl-dropdown-header> </gl-deprecated-dropdown-header>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="env in environments.options" v-for="env in environments.options"
:key="env.id" :key="env.id"
@click="showEnvironment(env.name)" @click="showEnvironment(env.name)"
...@@ -195,12 +195,12 @@ export default { ...@@ -195,12 +195,12 @@ export default {
/> />
<div class="gl-flex-grow-1">{{ env.name }}</div> <div class="gl-flex-grow-1">{{ env.name }}</div>
</div> </div>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-dropdown-header class="gl-text-center"> <gl-deprecated-dropdown-header class="gl-text-center">
{{ s__('Environments|Managed apps') }} {{ s__('Environments|Managed apps') }}
</gl-dropdown-header> </gl-deprecated-dropdown-header>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="app in managedApps.options" v-for="app in managedApps.options"
:key="app.id" :key="app.id"
@click="showManagedApp(app.name)" @click="showManagedApp(app.name)"
...@@ -212,8 +212,8 @@ export default { ...@@ -212,8 +212,8 @@ export default {
/> />
<div class="gl-flex-grow-1">{{ app.name }}</div> <div class="gl-flex-grow-1">{{ app.name }}</div>
</div> </div>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
<log-advanced-filters <log-advanced-filters
......
app/assets/javascripts/logs/components/log_simple_filters.vue
View file @ c39f47af
<script> <script>
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { GlIcon, GlDropdown, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui'; import {
GlIcon,
GlDeprecatedDropdown,
GlDeprecatedDropdownHeader,
GlDeprecatedDropdownItem,
} from '@gitlab/ui';
export default { export default {
components: { components: {
GlIcon, GlIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
disabled: { disabled: {
...@@ -39,22 +44,22 @@ export default { ...@@ -39,22 +44,22 @@ export default {
</script> </script>
<template> <template>
<div> <div>
<gl-dropdown <gl-deprecated-dropdown
ref="podsDropdown" ref="podsDropdown"
:text="podDropdownText" :text="podDropdownText"
:disabled="disabled" :disabled="disabled"
class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown" class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown"
> >
<gl-dropdown-header class="text-center"> <gl-deprecated-dropdown-header class="text-center">
{{ s__('Environments|Select pod') }} {{ s__('Environments|Select pod') }}
</gl-dropdown-header> </gl-deprecated-dropdown-header>
<gl-dropdown-item v-if="!pods.options.length" disabled> <gl-deprecated-dropdown-item v-if="!pods.options.length" disabled>
<span ref="noPodsMsg" class="text-muted"> <span ref="noPodsMsg" class="text-muted">
{{ s__('Environments|No pods to display') }} {{ s__('Environments|No pods to display') }}
</span> </span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="podName in pods.options" v-for="podName in pods.options"
:key="podName" :key="podName"
class="text-nowrap" class="text-nowrap"
...@@ -67,7 +72,7 @@ export default { ...@@ -67,7 +72,7 @@ export default {
/> />
<div class="flex-grow-1">{{ podName }}</div> <div class="flex-grow-1">{{ podName }}</div>
</div> </div>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</template> </template>
app/assets/javascripts/monitoring/components/alert_widget_form.vue
View file @ c39f47af
...@@ -7,8 +7,8 @@ import { ...@@ -7,8 +7,8 @@ import {
GlButtonGroup, GlButtonGroup,
GlFormGroup, GlFormGroup,
GlFormInput, GlFormInput,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlModal, GlModal,
GlTooltipDirective, GlTooltipDirective,
} from '@gitlab/ui'; } from '@gitlab/ui';
...@@ -40,8 +40,8 @@ export default { ...@@ -40,8 +40,8 @@ export default {
GlButtonGroup, GlButtonGroup,
GlFormGroup, GlFormGroup,
GlFormInput, GlFormInput,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlModal, GlModal,
GlLink, GlLink,
Icon, Icon,
...@@ -244,20 +244,20 @@ export default { ...@@ -244,20 +244,20 @@ export default {
</template> </template>
</gl-form-group> </gl-form-group>
<gl-form-group v-else label-for="alert-query-dropdown" :label="$options.alertQueryText.label"> <gl-form-group v-else label-for="alert-query-dropdown" :label="$options.alertQueryText.label">
<gl-dropdown <gl-deprecated-dropdown
id="alert-query-dropdown" id="alert-query-dropdown"
:text="queryDropdownLabel" :text="queryDropdownLabel"
toggle-class="dropdown-menu-toggle qa-alert-query-dropdown" toggle-class="dropdown-menu-toggle qa-alert-query-dropdown"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="query in relevantQueries" v-for="query in relevantQueries"
:key="query.metricId" :key="query.metricId"
data-qa-selector="alert_query_option" data-qa-selector="alert_query_option"
@click="selectQuery(query.metricId)" @click="selectQuery(query.metricId)"
> >
{{ query.label }} {{ query.label }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</gl-form-group> </gl-form-group>
<gl-button-group class="mb-2" :label="s__('PrometheusAlerts|Operator')"> <gl-button-group class="mb-2" :label="s__('PrometheusAlerts|Operator')">
<gl-deprecated-button <gl-deprecated-button
......
app/assets/javascripts/monitoring/components/dashboard_header.vue
View file @ c39f47af
...@@ -5,10 +5,10 @@ import { ...@@ -5,10 +5,10 @@ import {
GlButton, GlButton,
GlIcon, GlIcon,
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlNewDropdown, GlNewDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownItem, GlNewDropdownItem,
...@@ -41,11 +41,11 @@ export default { ...@@ -41,11 +41,11 @@ export default {
GlButton, GlButton,
GlIcon, GlIcon,
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlLoadingIcon, GlLoadingIcon,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlNewDropdown, GlNewDropdown,
GlNewDropdownDivider, GlNewDropdownDivider,
GlNewDropdownItem, GlNewDropdownItem,
...@@ -240,7 +240,7 @@ export default { ...@@ -240,7 +240,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-dropdown <gl-deprecated-dropdown
id="monitor-environments-dropdown" id="monitor-environments-dropdown"
ref="monitorEnvironmentsDropdown" ref="monitorEnvironmentsDropdown"
class="flex-grow-1" class="flex-grow-1"
...@@ -250,20 +250,20 @@ export default { ...@@ -250,20 +250,20 @@ export default {
:text="currentEnvironmentName" :text="currentEnvironmentName"
> >
<div class="d-flex flex-column overflow-hidden"> <div class="d-flex flex-column overflow-hidden">
<gl-dropdown-header class="monitor-environment-dropdown-header text-center"> <gl-deprecated-dropdown-header class="monitor-environment-dropdown-header text-center">
{{ __('Environment') }} {{ __('Environment') }}
</gl-dropdown-header> </gl-deprecated-dropdown-header>
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-search-box-by-type class="m-2" @input="debouncedEnvironmentsSearch" /> <gl-search-box-by-type class="m-2" @input="debouncedEnvironmentsSearch" />
<gl-loading-icon v-if="environmentsLoading" :inline="true" /> <gl-loading-icon v-if="environmentsLoading" :inline="true" />
<div v-else class="flex-fill overflow-auto"> <div v-else class="flex-fill overflow-auto">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="environment in filteredEnvironments" v-for="environment in filteredEnvironments"
:key="environment.id" :key="environment.id"
:active="environment.name === currentEnvironmentName" :active="environment.name === currentEnvironmentName"
active-class="is-active" active-class="is-active"
:href="getEnvironmentPath(environment.id)" :href="getEnvironmentPath(environment.id)"
>{{ environment.name }}</gl-dropdown-item >{{ environment.name }}</gl-deprecated-dropdown-item
> >
</div> </div>
<div <div
...@@ -274,7 +274,7 @@ export default { ...@@ -274,7 +274,7 @@ export default {
{{ __('No matching results') }} {{ __('No matching results') }}
</div> </div>
</div> </div>
</gl-dropdown> </gl-deprecated-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">
......
app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
View file @ c39f47af
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
import { mapState, mapActions, mapGetters } from 'vuex'; import { mapState, mapActions, mapGetters } from 'vuex';
import { import {
GlIcon, GlIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlSearchBoxByType, GlSearchBoxByType,
GlModalDirective, GlModalDirective,
} from '@gitlab/ui'; } from '@gitlab/ui';
...@@ -17,10 +17,10 @@ const events = { ...@@ -17,10 +17,10 @@ const events = {
export default { export default {
components: { components: {
GlIcon, GlIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlSearchBoxByType, GlSearchBoxByType,
}, },
directives: { directives: {
...@@ -81,16 +81,16 @@ export default { ...@@ -81,16 +81,16 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-dropdown <gl-deprecated-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"
> >
<div class="d-flex flex-column overflow-hidden"> <div class="d-flex flex-column overflow-hidden">
<gl-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{ <gl-deprecated-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{
__('Dashboard') __('Dashboard')
}}</gl-dropdown-header> }}</gl-deprecated-dropdown-header>
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-search-box-by-type <gl-search-box-by-type
ref="monitorDashboardsDropdownSearch" ref="monitorDashboardsDropdownSearch"
v-model="searchTerm" v-model="searchTerm"
...@@ -98,7 +98,7 @@ export default { ...@@ -98,7 +98,7 @@ export default {
/> />
<div class="flex-fill overflow-auto"> <div class="flex-fill overflow-auto">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="dashboard in starredDashboards" v-for="dashboard in starredDashboards"
:key="dashboard.path" :key="dashboard.path"
:active="dashboard.path === selectedDashboardPath" :active="dashboard.path === selectedDashboardPath"
...@@ -109,14 +109,14 @@ export default { ...@@ -109,14 +109,14 @@ export default {
{{ dashboardDisplayName(dashboard) }} {{ dashboardDisplayName(dashboard) }}
<gl-icon class="text-muted ml-auto" name="star" /> <gl-icon class="text-muted ml-auto" name="star" />
</div> </div>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-divider <gl-deprecated-dropdown-divider
v-if="starredDashboards.length && nonStarredDashboards.length" v-if="starredDashboards.length && nonStarredDashboards.length"
ref="starredListDivider" ref="starredListDivider"
/> />
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="dashboard in nonStarredDashboards" v-for="dashboard in nonStarredDashboards"
:key="dashboard.path" :key="dashboard.path"
:active="dashboard.path === selectedDashboardPath" :active="dashboard.path === selectedDashboardPath"
...@@ -124,7 +124,7 @@ export default { ...@@ -124,7 +124,7 @@ export default {
@click="selectDashboard(dashboard)" @click="selectDashboard(dashboard)"
> >
{{ dashboardDisplayName(dashboard) }} {{ dashboardDisplayName(dashboard) }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</div> </div>
<div <div
...@@ -140,12 +140,12 @@ export default { ...@@ -140,12 +140,12 @@ export default {
in https://gitlab.com/gitlab-org/gitlab/-/issues/223223 in https://gitlab.com/gitlab-org/gitlab/-/issues/223223
--> -->
<template v-if="isOutOfTheBoxDashboard"> <template v-if="isOutOfTheBoxDashboard">
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-dropdown-item v-gl-modal="modalId" data-testid="duplicateDashboardItem"> <gl-deprecated-dropdown-item v-gl-modal="modalId" data-testid="duplicateDashboardItem">
{{ s__('Metrics|Duplicate dashboard') }} {{ s__('Metrics|Duplicate dashboard') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</template> </template>
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
app/assets/javascripts/monitoring/components/variables/dropdown_field.vue
View file @ c39f47af
<script> <script>
import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlFormGroup, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
export default { export default {
components: { components: {
GlFormGroup, GlFormGroup,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
name: { name: {
...@@ -41,13 +41,16 @@ export default { ...@@ -41,13 +41,16 @@ export default {
</script> </script>
<template> <template>
<gl-form-group :label="label"> <gl-form-group :label="label">
<gl-dropdown toggle-class="dropdown-menu-toggle" :text="text || s__('Metrics|Select a value')"> <gl-deprecated-dropdown
<gl-dropdown-item toggle-class="dropdown-menu-toggle"
:text="text || s__('Metrics|Select a value')"
>
<gl-deprecated-dropdown-item
v-for="val in options.values" v-for="val in options.values"
:key="val.value" :key="val.value"
@click="onUpdate(val.value)" @click="onUpdate(val.value)"
>{{ val.text }}</gl-dropdown-item >{{ val.text }}</gl-deprecated-dropdown-item
> >
</gl-dropdown> </gl-deprecated-dropdown>
</gl-form-group> </gl-form-group>
</template> </template>
app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue
View file @ c39f47af
<script> <script>
import { GlAlert, GlDropdown, GlDropdownItem, GlIcon, GlSprintf } from '@gitlab/ui'; import {
GlAlert,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlIcon,
GlSprintf,
} from '@gitlab/ui';
import { GlAreaChart } from '@gitlab/ui/dist/charts'; import { GlAreaChart } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat'; import dateFormat from 'dateformat';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
...@@ -11,8 +17,8 @@ export default { ...@@ -11,8 +17,8 @@ export default {
components: { components: {
GlAlert, GlAlert,
GlAreaChart, GlAreaChart,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlIcon, GlIcon,
GlSprintf, GlSprintf,
}, },
...@@ -134,8 +140,8 @@ export default { ...@@ -134,8 +140,8 @@ export default {
{{ __('It seems that there is currently no available data for code coverage') }} {{ __('It seems that there is currently no available data for code coverage') }}
</span> </span>
</gl-alert> </gl-alert>
<gl-dropdown v-if="canShowData" :text="selectedDailyCoverageName"> <gl-deprecated-dropdown v-if="canShowData" :text="selectedDailyCoverageName">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="({ group_name }, index) in dailyCoverageData" v-for="({ group_name }, index) in dailyCoverageData"
:key="index" :key="index"
:value="group_name" :value="group_name"
...@@ -151,8 +157,8 @@ export default { ...@@ -151,8 +157,8 @@ export default {
{{ group_name }} {{ group_name }}
</span> </span>
</div> </div>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
<gl-area-chart <gl-area-chart
v-if="!isLoading" v-if="!isLoading"
......
app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue
View file @ c39f47af
...@@ -3,7 +3,7 @@ import { ...@@ -3,7 +3,7 @@ import {
GlFilteredSearchToken, GlFilteredSearchToken,
GlAvatar, GlAvatar,
GlFilteredSearchSuggestion, GlFilteredSearchSuggestion,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlLoadingIcon, GlLoadingIcon,
} from '@gitlab/ui'; } from '@gitlab/ui';
import Api from '~/api'; import Api from '~/api';
...@@ -21,7 +21,7 @@ export default { ...@@ -21,7 +21,7 @@ export default {
GlFilteredSearchToken, GlFilteredSearchToken,
GlAvatar, GlAvatar,
GlFilteredSearchSuggestion, GlFilteredSearchSuggestion,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlLoadingIcon, GlLoadingIcon,
}, },
props: { props: {
...@@ -94,7 +94,7 @@ export default { ...@@ -94,7 +94,7 @@ export default {
<gl-filtered-search-suggestion :value="$options.anyTriggerAuthor">{{ <gl-filtered-search-suggestion :value="$options.anyTriggerAuthor">{{
$options.anyTriggerAuthor $options.anyTriggerAuthor
}}</gl-filtered-search-suggestion> }}</gl-filtered-search-suggestion>
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-loading-icon v-if="loading" /> <gl-loading-icon v-if="loading" />
<template v-else> <template v-else>
......
app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import Tracking from '~/tracking'; import Tracking from '~/tracking';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
...@@ -15,7 +15,7 @@ import { ...@@ -15,7 +15,7 @@ import {
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlFormGroup, GlFormGroup,
GlFormInputGroup, GlFormInputGroup,
ClipboardButton, ClipboardButton,
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-dropdown <gl-deprecated-dropdown
:text="$options.i18n.dropdownTitle" :text="$options.i18n.dropdownTitle"
variant="primary" variant="primary"
size="sm" size="sm"
...@@ -99,5 +99,5 @@ export default { ...@@ -99,5 +99,5 @@ export default {
</gl-form-group> </gl-form-group>
</form> </form>
</li> </li>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
app/assets/javascripts/repository/components/breadcrumbs.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownDivider, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui'; import {
GlDeprecatedDropdown,
GlDeprecatedDropdownDivider,
GlDeprecatedDropdownHeader,
GlDeprecatedDropdownItem,
} from '@gitlab/ui';
import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility'; import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
import { __ } from '../../locale'; import { __ } from '../../locale';
import Icon from '../../vue_shared/components/icon.vue'; import Icon from '../../vue_shared/components/icon.vue';
...@@ -15,10 +20,10 @@ const ROW_TYPES = { ...@@ -15,10 +20,10 @@ const ROW_TYPES = {
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
Icon, Icon,
}, },
apollo: { apollo: {
...@@ -221,11 +226,11 @@ export default { ...@@ -221,11 +226,11 @@ export default {
getComponent(type) { getComponent(type) {
switch (type) { switch (type) {
case ROW_TYPES.divider: case ROW_TYPES.divider:
return 'gl-dropdown-divider'; return 'gl-deprecated-dropdown-divider';
case ROW_TYPES.header: case ROW_TYPES.header:
return 'gl-dropdown-header'; return 'gl-deprecated-dropdown-header';
default: default:
return 'gl-dropdown-item'; return 'gl-deprecated-dropdown-item';
} }
}, },
}, },
...@@ -241,7 +246,7 @@ export default { ...@@ -241,7 +246,7 @@ export default {
</router-link> </router-link>
</li> </li>
<li v-if="renderAddToTreeDropdown" class="breadcrumb-item"> <li v-if="renderAddToTreeDropdown" class="breadcrumb-item">
<gl-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1"> <gl-deprecated-dropdown toggle-class="add-to-tree qa-add-to-tree ml-1">
<template #button-content> <template #button-content>
<span class="sr-only">{{ __('Add to tree') }}</span> <span class="sr-only">{{ __('Add to tree') }}</span>
<icon name="plus" :size="16" class="float-left" /> <icon name="plus" :size="16" class="float-left" />
...@@ -252,7 +257,7 @@ export default { ...@@ -252,7 +257,7 @@ export default {
{{ item.text }} {{ item.text }}
</component> </component>
</template> </template>
</gl-dropdown> </gl-deprecated-dropdown>
</li> </li>
</ol> </ol>
</nav> </nav>
......
app/assets/javascripts/snippets/components/snippet_header.vue
View file @ c39f47af
...@@ -7,8 +7,8 @@ import { ...@@ -7,8 +7,8 @@ import {
GlModal, GlModal,
GlAlert, GlAlert,
GlLoadingIcon, GlLoadingIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlButton, GlButton,
GlTooltipDirective, GlTooltipDirective,
} from '@gitlab/ui'; } from '@gitlab/ui';
...@@ -26,8 +26,8 @@ export default { ...@@ -26,8 +26,8 @@ export default {
GlModal, GlModal,
GlAlert, GlAlert,
GlLoadingIcon, GlLoadingIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
TimeAgoTooltip, TimeAgoTooltip,
GlButton, GlButton,
}, },
...@@ -223,17 +223,17 @@ export default { ...@@ -223,17 +223,17 @@ export default {
</template> </template>
</div> </div>
<div class="d-block d-sm-none dropdown"> <div class="d-block d-sm-none dropdown">
<gl-dropdown :text="__('Options')" class="w-100" toggle-class="text-center"> <gl-deprecated-dropdown :text="__('Options')" class="w-100" toggle-class="text-center">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="(action, index) in personalSnippetActions" v-for="(action, index) in personalSnippetActions"
:key="index" :key="index"
:disabled="action.disabled" :disabled="action.disabled"
:title="action.title" :title="action.title"
:href="action.href" :href="action.href"
@click="action.click ? action.click() : undefined" @click="action.click ? action.click() : undefined"
>{{ action.text }}</gl-dropdown-item >{{ action.text }}</gl-deprecated-dropdown-item
> >
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</div> </div>
......
app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
commits: { commits: {
...@@ -18,20 +18,20 @@ export default { ...@@ -18,20 +18,20 @@ export default {
<template> <template>
<div> <div>
<gl-dropdown <gl-deprecated-dropdown
right right
text="Use an existing commit message" text="Use an existing commit message"
variant="link" variant="link"
class="mr-commit-dropdown" class="mr-commit-dropdown"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="commit in commits" v-for="commit in commits"
:key="commit.short_id" :key="commit.short_id"
class="text-nowrap text-truncate" class="text-nowrap text-truncate"
@click="$emit('input', commit.message)" @click="$emit('input', commit.message)"
> >
<span class="monospace mr-2">{{ commit.short_id }}</span> {{ commit.title }} <span class="monospace mr-2">{{ commit.short_id }}</span> {{ commit.title }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</template> </template>
app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
View file @ c39f47af
<script> <script>
import { GlIcon, GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui'; import {
GlIcon,
GlDeprecatedButton,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlFormGroup,
} from '@gitlab/ui';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range'; import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
...@@ -23,8 +29,8 @@ export default { ...@@ -23,8 +29,8 @@ export default {
components: { components: {
GlIcon, GlIcon,
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlFormGroup, GlFormGroup,
TooltipOnTruncate, TooltipOnTruncate,
DateTimePickerInput, DateTimePickerInput,
...@@ -206,7 +212,7 @@ export default { ...@@ -206,7 +212,7 @@ export default {
placement="top" placement="top"
class="d-inline-block" class="d-inline-block"
> >
<gl-dropdown <gl-deprecated-dropdown
:text="timeWindowText" :text="timeWindowText"
v-bind="$attrs" v-bind="$attrs"
class="date-time-picker w-100" class="date-time-picker w-100"
...@@ -256,7 +262,7 @@ export default { ...@@ -256,7 +262,7 @@ export default {
<span class="gl-pl-5-deprecated-no-really-do-not-use-me">{{ __('Quick range') }}</span> <span class="gl-pl-5-deprecated-no-really-do-not-use-me">{{ __('Quick range') }}</span>
</template> </template>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="(option, index) in options" v-for="(option, index) in options"
:key="index" :key="index"
data-qa-selector="quick_range_item" data-qa-selector="quick_range_item"
...@@ -270,9 +276,9 @@ export default { ...@@ -270,9 +276,9 @@ export default {
:class="{ invisible: !isOptionActive(option) }" :class="{ invisible: !isOptionActive(option) }"
/> />
{{ option.label }} {{ option.label }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-form-group> </gl-form-group>
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
</tooltip-on-truncate> </tooltip-on-truncate>
</template> </template>
app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue
View file @ c39f47af
...@@ -3,7 +3,7 @@ import { ...@@ -3,7 +3,7 @@ import {
GlFilteredSearchToken, GlFilteredSearchToken,
GlAvatar, GlAvatar,
GlFilteredSearchSuggestion, GlFilteredSearchSuggestion,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlLoadingIcon, GlLoadingIcon,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
GlFilteredSearchToken, GlFilteredSearchToken,
GlAvatar, GlAvatar,
GlFilteredSearchSuggestion, GlFilteredSearchSuggestion,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlLoadingIcon, GlLoadingIcon,
}, },
props: { props: {
...@@ -102,7 +102,7 @@ export default { ...@@ -102,7 +102,7 @@ export default {
<gl-filtered-search-suggestion :value="$options.anyAuthor"> <gl-filtered-search-suggestion :value="$options.anyAuthor">
{{ __('Any') }} {{ __('Any') }}
</gl-filtered-search-suggestion> </gl-filtered-search-suggestion>
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-loading-icon v-if="loading" /> <gl-loading-icon v-if="loading" />
<template v-else> <template v-else>
<gl-filtered-search-suggestion <gl-filtered-search-suggestion
......
app/assets/javascripts/vue_shared/components/split_button.vue
View file @ c39f47af
<script> <script>
import { isString } from 'lodash'; import { isString } from 'lodash';
import { GlDropdown, GlDropdownDivider, GlDropdownItem } from '@gitlab/ui'; import {
GlDeprecatedDropdown,
GlDeprecatedDropdownDivider,
GlDeprecatedDropdownItem,
} from '@gitlab/ui';
const isValidItem = item => const isValidItem = item =>
isString(item.eventName) && isString(item.title) && isString(item.description); isString(item.eventName) && isString(item.title) && isString(item.description);
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
...@@ -57,7 +61,7 @@ export default { ...@@ -57,7 +61,7 @@ export default {
</script> </script>
<template> <template>
<gl-dropdown <gl-deprecated-dropdown
:menu-class="`dropdown-menu-selectable ${menuClass}`" :menu-class="`dropdown-menu-selectable ${menuClass}`"
split split
:text="dropdownToggleText" :text="dropdownToggleText"
...@@ -66,7 +70,7 @@ export default { ...@@ -66,7 +70,7 @@ export default {
@click="triggerEvent" @click="triggerEvent"
> >
<template v-for="(item, itemIndex) in actionItems"> <template v-for="(item, itemIndex) in actionItems">
<gl-dropdown-item <gl-deprecated-dropdown-item
:key="item.eventName" :key="item.eventName"
:active="selectedItem === item" :active="selectedItem === item"
active-class="is-active" active-class="is-active"
...@@ -74,12 +78,12 @@ export default { ...@@ -74,12 +78,12 @@ export default {
> >
<strong>{{ item.title }}</strong> <strong>{{ item.title }}</strong>
<div>{{ item.description }}</div> <div>{{ item.description }}</div>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-divider <gl-deprecated-dropdown-divider
v-if="itemIndex < actionItems.length - 1" v-if="itemIndex < actionItems.length - 1"
:key="`${item.eventName}-divider`" :key="`${item.eventName}-divider`"
/> />
</template> </template>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
app/assets/javascripts/vue_shared/components/timezone_dropdown.vue
View file @ c39f47af
<script> <script>
import { GlNewDropdown, GlDropdownItem, GlSearchBoxByType, GlIcon } from '@gitlab/ui'; import { GlNewDropdown, 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';
...@@ -7,7 +7,7 @@ export default { ...@@ -7,7 +7,7 @@ export default {
name: 'TimezoneDropdown', name: 'TimezoneDropdown',
components: { components: {
GlNewDropdown, GlNewDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlSearchBoxByType, GlSearchBoxByType,
GlIcon, GlIcon,
}, },
...@@ -83,7 +83,7 @@ export default { ...@@ -83,7 +83,7 @@ export default {
</template> </template>
<gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus class="gl-m-3" /> <gl-search-box-by-type v-model.trim="searchTerm" v-autofocusonshow autofocus class="gl-m-3" />
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="timezone in filteredResults" v-for="timezone in filteredResults"
:key="timezone.formattedTimezone" :key="timezone.formattedTimezone"
@click="selectTimezone(timezone)" @click="selectTimezone(timezone)"
...@@ -94,9 +94,9 @@ export default { ...@@ -94,9 +94,9 @@ export default {
class="gl-vertical-align-middle" class="gl-vertical-align-middle"
/> />
{{ timezone.formattedTimezone }} {{ timezone.formattedTimezone }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-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-dropdown-item> </gl-deprecated-dropdown-item>
</gl-new-dropdown> </gl-new-dropdown>
</template> </template>
ee/app/assets/javascripts/analytics/cycle_analytics/components/custom_stage_form.vue
View file @ c39f47af
...@@ -6,9 +6,9 @@ import { ...@@ -6,9 +6,9 @@ import {
GlFormInput, GlFormInput,
GlFormSelect, GlFormSelect,
GlLoadingIcon, GlLoadingIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
GlSprintf, GlSprintf,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
...@@ -76,9 +76,9 @@ export default { ...@@ -76,9 +76,9 @@ export default {
GlFormSelect, GlFormSelect,
GlLoadingIcon, GlLoadingIcon,
LabelsSelector, LabelsSelector,
GlDropdown, GlDeprecatedDropdown,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
GlSprintf, GlSprintf,
}, },
props: { props: {
...@@ -257,18 +257,21 @@ export default { ...@@ -257,18 +257,21 @@ export default {
<form v-else class="custom-stage-form m-4 mt-0"> <form v-else class="custom-stage-form m-4 mt-0">
<div class="mb-1 d-flex flex-row justify-content-between"> <div class="mb-1 d-flex flex-row justify-content-between">
<h4>{{ formTitle }}</h4> <h4>{{ formTitle }}</h4>
<gl-dropdown :text="__('Recover hidden stage')" class="js-recover-hidden-stage-dropdown"> <gl-deprecated-dropdown
<gl-dropdown-header>{{ __('Default stages') }}</gl-dropdown-header> :text="__('Recover hidden stage')"
class="js-recover-hidden-stage-dropdown"
>
<gl-deprecated-dropdown-header>{{ __('Default stages') }}</gl-deprecated-dropdown-header>
<template v-if="hasHiddenStages"> <template v-if="hasHiddenStages">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="stage in hiddenStages" v-for="stage in hiddenStages"
:key="stage.id" :key="stage.id"
@click="handleRecoverStage(stage.id)" @click="handleRecoverStage(stage.id)"
>{{ stage.title }}</gl-dropdown-item >{{ stage.title }}</gl-deprecated-dropdown-item
> >
</template> </template>
<p v-else class="mx-3 my-2">{{ __('All default stages are currently visible') }}</p> <p v-else class="mx-3 my-2">{{ __('All default stages are currently visible') }}</p>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
<gl-form-group <gl-form-group
ref="name" ref="name"
......
ee/app/assets/javascripts/analytics/cycle_analytics/components/labels_selector.vue
View file @ c39f47af
<script> <script>
import Api from 'ee/api'; import Api from 'ee/api';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { GlDropdown, GlDropdownItem, GlIcon, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui'; import {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlIcon,
GlLoadingIcon,
GlSearchBoxByType,
} from '@gitlab/ui';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import createFlash from '~/flash'; import createFlash from '~/flash';
import { __ } from '~/locale'; import { __ } from '~/locale';
...@@ -11,8 +17,8 @@ import { DATA_REFETCH_DELAY } from '../../shared/constants'; ...@@ -11,8 +17,8 @@ import { DATA_REFETCH_DELAY } from '../../shared/constants';
export default { export default {
name: 'LabelsSelector', name: 'LabelsSelector',
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlIcon, GlIcon,
GlLoadingIcon, GlLoadingIcon,
GlSearchBoxByType, GlSearchBoxByType,
...@@ -120,7 +126,7 @@ export default { ...@@ -120,7 +126,7 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-dropdown class="w-100" toggle-class="overflow-hidden" :right="right"> <gl-deprecated-dropdown class="w-100" toggle-class="overflow-hidden" :right="right">
<template #button-content> <template #button-content>
<slot name="label-dropdown-button"> <slot name="label-dropdown-button">
<span v-if="selectedLabel"> <span v-if="selectedLabel">
...@@ -136,15 +142,17 @@ export default { ...@@ -136,15 +142,17 @@ export default {
</template> </template>
<template> <template>
<slot name="label-dropdown-list-header"> <slot name="label-dropdown-list-header">
<gl-dropdown-item :active="!selectedLabelId.length" @click.prevent="$emit('clearLabel')" <gl-deprecated-dropdown-item
:active="!selectedLabelId.length"
@click.prevent="$emit('clearLabel')"
>{{ __('Select a label') }} >{{ __('Select a label') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</slot> </slot>
<div class="mb-3 px-3"> <div class="mb-3 px-3">
<gl-search-box-by-type v-model.trim="searchTerm" class="mb-2" /> <gl-search-box-by-type v-model.trim="searchTerm" class="mb-2" />
</div> </div>
<div class="mb-3 px-3"> <div class="mb-3 px-3">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="label in labels" v-for="label in labels"
:key="label.id" :key="label.id"
:class="{ :class="{
...@@ -162,7 +170,7 @@ export default { ...@@ -162,7 +170,7 @@ export default {
<span :style="{ backgroundColor: label.color }" class="d-inline-block dropdown-label-box"> <span :style="{ backgroundColor: label.color }" class="d-inline-block dropdown-label-box">
</span> </span>
{{ labelTitle(label) }} {{ labelTitle(label) }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<div v-show="loading" class="text-center"> <div v-show="loading" class="text-center">
<gl-loading-icon :inline="true" size="md" /> <gl-loading-icon :inline="true" size="md" />
</div> </div>
...@@ -171,5 +179,5 @@ export default { ...@@ -171,5 +179,5 @@ export default {
</div> </div>
</div> </div>
</template> </template>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
ee/app/assets/javascripts/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters.vue
View file @ c39f47af
<script> <script>
import { GlDropdownDivider, GlSegmentedControl, GlIcon } from '@gitlab/ui'; import { GlDeprecatedDropdownDivider, GlSegmentedControl, GlIcon } from '@gitlab/ui';
import { s__, sprintf } from '~/locale'; import { s__, sprintf } from '~/locale';
import createFlash from '~/flash'; import createFlash from '~/flash';
import { removeFlash } from '../../utils'; import { removeFlash } from '../../utils';
...@@ -15,7 +15,7 @@ export default { ...@@ -15,7 +15,7 @@ export default {
name: 'TasksByTypeFilters', name: 'TasksByTypeFilters',
components: { components: {
GlSegmentedControl, GlSegmentedControl,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlIcon, GlIcon,
LabelsSelector, LabelsSelector,
}, },
...@@ -126,7 +126,7 @@ export default { ...@@ -126,7 +126,7 @@ export default {
" "
/> />
</div> </div>
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<div class="mb-3 px-3"> <div class="mb-3 px-3">
<p class="font-weight-bold text-left my-2"> <p class="font-weight-bold text-left my-2">
{{ s__('CycleAnalytics|Select labels') }} {{ s__('CycleAnalytics|Select labels') }}
......
ee/app/assets/javascripts/analytics/productivity_analytics/components/app.vue
View file @ c39f47af
...@@ -3,8 +3,8 @@ import { mapState, mapActions, mapGetters } from 'vuex'; ...@@ -3,8 +3,8 @@ import { mapState, mapActions, mapGetters } from 'vuex';
import { import {
GlEmptyState, GlEmptyState,
GlLoadingIcon, GlLoadingIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDeprecatedButton, GlDeprecatedButton,
GlTooltipDirective, GlTooltipDirective,
} from '@gitlab/ui'; } from '@gitlab/ui';
...@@ -24,8 +24,8 @@ export default { ...@@ -24,8 +24,8 @@ export default {
components: { components: {
GlEmptyState, GlEmptyState,
GlLoadingIcon, GlLoadingIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlColumnChart, GlColumnChart,
GlDeprecatedButton, GlDeprecatedButton,
Icon, Icon,
...@@ -298,12 +298,12 @@ export default { ...@@ -298,12 +298,12 @@ export default {
> >
<strong class="mr-2">{{ __('Sort by') }}</strong> <strong class="mr-2">{{ __('Sort by') }}</strong>
<div class="d-flex"> <div class="d-flex">
<gl-dropdown <gl-deprecated-dropdown
class="mr-2 flex-grow" class="mr-2 flex-grow"
toggle-class="dropdown-menu-toggle" toggle-class="dropdown-menu-toggle"
:text="sortFieldDropdownLabel" :text="sortFieldDropdownLabel"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="metric in tableSortOptions" v-for="metric in tableSortOptions"
:key="metric.key" :key="metric.key"
active-class="is-active" active-class="is-active"
...@@ -320,8 +320,8 @@ export default { ...@@ -320,8 +320,8 @@ export default {
/> />
{{ metric.label }} {{ metric.label }}
</span> </span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
<gl-deprecated-button <gl-deprecated-button
v-gl-tooltip.hover v-gl-tooltip.hover
:title="sortTooltipTitle" :title="sortTooltipTitle"
......
ee/app/assets/javascripts/analytics/productivity_analytics/components/metric_chart.vue
View file @ c39f47af
<script> <script>
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
export default { export default {
name: 'MetricChart', name: 'MetricChart',
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlLoadingIcon, GlLoadingIcon,
Icon, Icon,
}, },
...@@ -72,14 +72,14 @@ export default { ...@@ -72,14 +72,14 @@ export default {
{{ __('There is no data available. Please change your selection.') }} {{ __('There is no data available. Please change your selection.') }}
</div> </div>
<template v-else> <template v-else>
<gl-dropdown <gl-deprecated-dropdown
v-if="hasMetricTypes" v-if="hasMetricTypes"
class="mb-4 metric-dropdown" class="mb-4 metric-dropdown"
toggle-class="dropdown-menu-toggle w-100" toggle-class="dropdown-menu-toggle w-100"
menu-class="w-100 mw-100" menu-class="w-100 mw-100"
:text="metricDropdownLabel" :text="metricDropdownLabel"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="metric in metricTypes" v-for="metric in metricTypes"
:key="metric.key" :key="metric.key"
active-class="is-active" active-class="is-active"
...@@ -98,8 +98,8 @@ export default { ...@@ -98,8 +98,8 @@ export default {
/> />
{{ metric.label }} {{ metric.label }}
</span> </span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
<p v-if="description" class="text-muted">{{ description }}</p> <p v-if="description" class="text-muted">{{ description }}</p>
<div ref="chart"> <div ref="chart">
<slot v-if="hasChartData"></slot> <slot v-if="hasChartData"></slot>
......
ee/app/assets/javascripts/analytics/productivity_analytics/components/mr_table.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import MergeRequestTableRow from './mr_table_row.vue'; import MergeRequestTableRow from './mr_table_row.vue';
import Pagination from '~/vue_shared/components/pagination_links.vue'; import Pagination from '~/vue_shared/components/pagination_links.vue';
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
Icon, Icon,
MergeRequestTableRow, MergeRequestTableRow,
Pagination, Pagination,
...@@ -65,13 +65,13 @@ export default { ...@@ -65,13 +65,13 @@ export default {
<div class="d-flex"> <div class="d-flex">
<span class="d-none d-md-flex metric-col">{{ __('Time to merge') }}</span> <span class="d-none d-md-flex metric-col">{{ __('Time to merge') }}</span>
<gl-dropdown <gl-deprecated-dropdown
class="w-100 metric-col" class="w-100 metric-col"
toggle-class="dropdown-menu-toggle w-100" toggle-class="dropdown-menu-toggle w-100"
menu-class="w-100 mw-100" menu-class="w-100 mw-100"
:text="metricDropdownLabel" :text="metricDropdownLabel"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="option in columnOptions" v-for="option in columnOptions"
:key="option.key" :key="option.key"
active-class="is-active" active-class="is-active"
...@@ -88,8 +88,8 @@ export default { ...@@ -88,8 +88,8 @@ export default {
/> />
{{ option.label }} {{ option.label }}
</span> </span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</div> </div>
</div> </div>
......
ee/app/assets/javascripts/analytics/shared/components/date_range_dropdown.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
availableDaysInPast: { availableDaysInPast: {
...@@ -43,17 +43,17 @@ export default { ...@@ -43,17 +43,17 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-dropdown <gl-deprecated-dropdown
toggle-class="dropdown-menu-toggle w-100" toggle-class="dropdown-menu-toggle w-100"
menu-class="w-100 mw-100" menu-class="w-100 mw-100"
:text="dropdownText" :text="dropdownText"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="d in availableDaysInPast" v-for="d in availableDaysInPast"
:key="d" :key="d"
class="w-100" class="w-100"
@click="onSelect(d)" @click="onSelect(d)"
>{{ getLabel(d) }}</gl-dropdown-item >{{ getLabel(d) }}</gl-deprecated-dropdown-item
> >
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
ee/app/assets/javascripts/analytics/shared/components/tokens/label_token.vue
View file @ c39f47af
...@@ -3,7 +3,7 @@ import { ...@@ -3,7 +3,7 @@ import {
GlToken, GlToken,
GlFilteredSearchToken, GlFilteredSearchToken,
GlFilteredSearchSuggestion, GlFilteredSearchSuggestion,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlLoadingIcon, GlLoadingIcon,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
...@@ -15,7 +15,7 @@ export default { ...@@ -15,7 +15,7 @@ export default {
GlToken, GlToken,
GlFilteredSearchToken, GlFilteredSearchToken,
GlFilteredSearchSuggestion, GlFilteredSearchSuggestion,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlLoadingIcon, GlLoadingIcon,
}, },
inheritAttrs: false, inheritAttrs: false,
...@@ -108,7 +108,7 @@ export default { ...@@ -108,7 +108,7 @@ export default {
:value="suggestion.value" :value="suggestion.value"
>{{ suggestion.text }}</gl-filtered-search-suggestion >{{ suggestion.text }}</gl-filtered-search-suggestion
> >
<gl-dropdown-divider v-if="config.isLoading || labels.length" /> <gl-deprecated-dropdown-divider v-if="config.isLoading || labels.length" />
<gl-filtered-search-suggestion <gl-filtered-search-suggestion
v-for="label in labels" v-for="label in labels"
ref="labelItem" ref="labelItem"
......
ee/app/assets/javascripts/analytics/shared/components/tokens/milestone_token.vue
View file @ c39f47af
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { import {
GlFilteredSearchToken, GlFilteredSearchToken,
GlFilteredSearchSuggestion, GlFilteredSearchSuggestion,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlLoadingIcon, GlLoadingIcon,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { __ } from '~/locale'; import { __ } from '~/locale';
...@@ -13,7 +13,7 @@ export default { ...@@ -13,7 +13,7 @@ export default {
components: { components: {
GlFilteredSearchToken, GlFilteredSearchToken,
GlFilteredSearchSuggestion, GlFilteredSearchSuggestion,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlLoadingIcon, GlLoadingIcon,
}, },
inheritAttrs: false, inheritAttrs: false,
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
:value="suggestion.value" :value="suggestion.value"
>{{ suggestion.text }}</gl-filtered-search-suggestion >{{ suggestion.text }}</gl-filtered-search-suggestion
> >
<gl-dropdown-divider v-if="config.isLoading || milestones.length" /> <gl-deprecated-dropdown-divider v-if="config.isLoading || milestones.length" />
<gl-loading-icon v-if="config.isLoading" /> <gl-loading-icon v-if="config.isLoading" />
<template v-else> <template v-else>
<gl-filtered-search-suggestion <gl-filtered-search-suggestion
......
ee/app/assets/javascripts/boards/components/weight_select.vue
View file @ c39f47af
<script> <script>
import { GlDeprecatedButton, GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedButton, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
const ANY_WEIGHT = 'Any weight'; const ANY_WEIGHT = 'Any weight';
const NO_WEIGHT = 'None'; const NO_WEIGHT = 'None';
...@@ -7,8 +7,8 @@ const NO_WEIGHT = 'None'; ...@@ -7,8 +7,8 @@ const NO_WEIGHT = 'None';
export default { export default {
components: { components: {
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
board: { board: {
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
</div> </div>
<div :class="valueClass" :hidden="!dropdownHidden" class="value">{{ valueText }}</div> <div :class="valueClass" :hidden="!dropdownHidden" class="value">{{ valueText }}</div>
<gl-dropdown <gl-deprecated-dropdown
ref="dropdown" ref="dropdown"
:hidden="dropdownHidden" :hidden="dropdownHidden"
:text="valueText" :text="valueText"
...@@ -91,10 +91,10 @@ export default { ...@@ -91,10 +91,10 @@ export default {
toggle-class="d-flex justify-content-between" toggle-class="d-flex justify-content-between"
> >
<div ref="weight-select" @click="selectWeight"> <div ref="weight-select" @click="selectWeight">
<gl-dropdown-item v-for="weight in weights" :key="weight" :value="weight"> <gl-deprecated-dropdown-item v-for="weight in weights" :key="weight" :value="weight">
{{ weight }} {{ weight }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</template> </template>
ee/app/assets/javascripts/dependencies/components/dependencies_actions.vue
View file @ c39f47af
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { import {
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlIcon, GlIcon,
GlTooltipDirective, GlTooltipDirective,
} from '@gitlab/ui'; } from '@gitlab/ui';
...@@ -14,8 +14,8 @@ export default { ...@@ -14,8 +14,8 @@ export default {
name: 'DependenciesActions', name: 'DependenciesActions',
components: { components: {
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlIcon, GlIcon,
}, },
directives: { directives: {
...@@ -72,8 +72,12 @@ export default { ...@@ -72,8 +72,12 @@ export default {
<template> <template>
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group flex-grow-1 mr-2"> <div class="btn-group flex-grow-1 mr-2">
<gl-dropdown :text="sortFieldName" class="flex-grow-1 text-center" right> <gl-deprecated-dropdown :text="sortFieldName" class="flex-grow-1 text-center" right>
<gl-dropdown-item v-for="(name, id) in sortFields" :key="id" @click="setSortField(id)"> <gl-deprecated-dropdown-item
v-for="(name, id) in sortFields"
:key="id"
@click="setSortField(id)"
>
<span class="d-flex"> <span class="d-flex">
<gl-icon <gl-icon
class="flex-shrink-0 gl-mr-2" class="flex-shrink-0 gl-mr-2"
...@@ -82,8 +86,8 @@ export default { ...@@ -82,8 +86,8 @@ export default {
/> />
{{ name }} {{ name }}
</span> </span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
<gl-deprecated-button <gl-deprecated-button
v-gl-tooltip v-gl-tooltip
:title="__('Sort direction')" :title="__('Sort direction')"
......
ee/app/assets/javascripts/geo_node_form/components/geo_node_form_namespaces.vue
View file @ c39f47af
<script> <script>
import { GlIcon, GlSearchBoxByType, GlDropdown, GlDeprecatedButton } from '@gitlab/ui'; import { GlIcon, GlSearchBoxByType, GlDeprecatedDropdown, GlDeprecatedButton } from '@gitlab/ui';
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { __, n__ } from '~/locale'; import { __, n__ } from '~/locale';
...@@ -10,7 +10,7 @@ export default { ...@@ -10,7 +10,7 @@ export default {
components: { components: {
GlIcon, GlIcon,
GlSearchBoxByType, GlSearchBoxByType,
GlDropdown, GlDeprecatedDropdown,
GlDeprecatedButton, GlDeprecatedButton,
}, },
props: { props: {
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
</script> </script>
<template> <template>
<gl-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces(namespaceSearch)"> <gl-deprecated-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces(namespaceSearch)">
<gl-search-box-by-type v-model="namespaceSearch" class="m-2" /> <gl-search-box-by-type v-model="namespaceSearch" class="m-2" />
<li v-for="namespace in synchronizationNamespaces" :key="namespace.id"> <li v-for="namespace in synchronizationNamespaces" :key="namespace.id">
<gl-deprecated-button class="d-flex align-items-center" @click="toggleNamespace(namespace)"> <gl-deprecated-button class="d-flex align-items-center" @click="toggleNamespace(namespace)">
...@@ -68,5 +68,5 @@ export default { ...@@ -68,5 +68,5 @@ export default {
</gl-deprecated-button> </gl-deprecated-button>
</li> </li>
<div v-if="noSyncNamespaces" class="text-secondary p-2">{{ __('Nothing found…') }}</div> <div v-if="noSyncNamespaces" class="text-secondary p-2">{{ __('Nothing found…') }}</div>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
ee/app/assets/javascripts/geo_node_form/components/geo_node_form_shards.vue
View file @ c39f47af
<script> <script>
import { GlIcon, GlDropdown, GlDeprecatedButton } from '@gitlab/ui'; import { GlIcon, GlDeprecatedDropdown, GlDeprecatedButton } from '@gitlab/ui';
import { __, n__ } from '~/locale'; import { __, n__ } from '~/locale';
import { SELECTIVE_SYNC_SHARDS } from '../constants'; import { SELECTIVE_SYNC_SHARDS } from '../constants';
...@@ -7,7 +7,7 @@ export default { ...@@ -7,7 +7,7 @@ export default {
name: 'GeoNodeFormShards', name: 'GeoNodeFormShards',
components: { components: {
GlIcon, GlIcon,
GlDropdown, GlDeprecatedDropdown,
GlDeprecatedButton, GlDeprecatedButton,
}, },
props: { props: {
...@@ -49,7 +49,7 @@ export default { ...@@ -49,7 +49,7 @@ export default {
</script> </script>
<template> <template>
<gl-dropdown :text="dropdownTitle"> <gl-deprecated-dropdown :text="dropdownTitle">
<li v-for="shard in syncShardsOptions" :key="shard.value"> <li v-for="shard in syncShardsOptions" :key="shard.value">
<gl-deprecated-button class="d-flex align-items-center" @click="toggleShard(shard)"> <gl-deprecated-button class="d-flex align-items-center" @click="toggleShard(shard)">
<gl-icon :class="[{ invisible: !isSelected(shard) }]" name="mobile-issue-close" /> <gl-icon :class="[{ invisible: !isSelected(shard) }]" name="mobile-issue-close" />
...@@ -57,5 +57,5 @@ export default { ...@@ -57,5 +57,5 @@ export default {
</gl-deprecated-button> </gl-deprecated-button>
</li> </li>
<div v-if="noSyncShards" class="text-secondary p-2">{{ __('Nothing found…') }}</div> <div v-if="noSyncShards" class="text-secondary p-2">{{ __('Nothing found…') }}</div>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
ee/app/assets/javascripts/geo_replicable/components/geo_replicable_filter_bar.vue
View file @ c39f47af
<script> <script>
import { mapActions, mapState, mapGetters } from 'vuex'; import { mapActions, mapState, mapGetters } from 'vuex';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { GlSearchBoxByType, GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui'; import {
GlSearchBoxByType,
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlButton,
} from '@gitlab/ui';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
import { DEFAULT_SEARCH_DELAY, ACTION_TYPES, FILTER_STATES } from '../constants'; import { DEFAULT_SEARCH_DELAY, ACTION_TYPES, FILTER_STATES } from '../constants';
...@@ -9,8 +14,8 @@ export default { ...@@ -9,8 +14,8 @@ export default {
name: 'GeoReplicableFilterBar', name: 'GeoReplicableFilterBar',
components: { components: {
GlSearchBoxByType, GlSearchBoxByType,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlButton, GlButton,
}, },
computed: { computed: {
...@@ -48,8 +53,8 @@ export default { ...@@ -48,8 +53,8 @@ export default {
<div class="row d-flex flex-column flex-sm-row"> <div class="row d-flex flex-column flex-sm-row">
<div class="col"> <div class="col">
<div class="d-sm-flex mx-n1"> <div class="d-sm-flex mx-n1">
<gl-dropdown :text="__('Filter by status')" class="px-1 my-1 my-sm-0 w-100"> <gl-deprecated-dropdown :text="__('Filter by status')" class="px-1 my-1 my-sm-0 w-100">
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="(filter, index) in filterOptions" v-for="(filter, index) in filterOptions"
:key="index" :key="index"
:class="{ 'bg-secondary-100': index === currentFilterIndex }" :class="{ 'bg-secondary-100': index === currentFilterIndex }"
...@@ -59,8 +64,8 @@ export default { ...@@ -59,8 +64,8 @@ export default {
>{{ filter.label }} {{ replicableTypeName }}</span >{{ filter.label }} {{ replicableTypeName }}</span
> >
<span v-else>{{ filter.label }}</span> <span v-else>{{ filter.label }}</span>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
<gl-search-box-by-type <gl-search-box-by-type
v-model="search" v-model="search"
class="px-1 my-1 my-sm-0 bg-white w-100" class="px-1 my-1 my-sm-0 bg-white w-100"
......
ee/app/assets/javascripts/insights/components/insights.vue
View file @ c39f47af
<script> <script>
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { GlAlert, GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; import { GlAlert, GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
import InsightsPage from './insights_page.vue'; import InsightsPage from './insights_page.vue';
import InsightsConfigWarning from './insights_config_warning.vue'; import InsightsConfigWarning from './insights_config_warning.vue';
...@@ -10,8 +10,8 @@ export default { ...@@ -10,8 +10,8 @@ export default {
GlLoadingIcon, GlLoadingIcon,
InsightsPage, InsightsPage,
InsightsConfigWarning, InsightsConfigWarning,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
endpoint: { endpoint: {
...@@ -107,7 +107,7 @@ export default { ...@@ -107,7 +107,7 @@ export default {
</gl-alert> </gl-alert>
</div> </div>
<div v-else-if="configPresent" class="insights-wrapper"> <div v-else-if="configPresent" class="insights-wrapper">
<gl-dropdown <gl-deprecated-dropdown
class="js-insights-dropdown w-100" class="js-insights-dropdown w-100"
data-qa-selector="insights_dashboard_dropdown" data-qa-selector="insights_dashboard_dropdown"
menu-class="w-100 mw-100" menu-class="w-100 mw-100"
...@@ -115,14 +115,14 @@ export default { ...@@ -115,14 +115,14 @@ export default {
:text="__('Select Page')" :text="__('Select Page')"
:disabled="pageLoading" :disabled="pageLoading"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="page in pages" v-for="page in pages"
:key="page.scope" :key="page.scope"
class="w-100" class="w-100"
@click="onChangePage(page.scope)" @click="onChangePage(page.scope)"
>{{ page.name }}</gl-dropdown-item >{{ page.name }}</gl-deprecated-dropdown-item
> >
</gl-dropdown> </gl-deprecated-dropdown>
<gl-alert v-if="notice != ''"> <gl-alert v-if="notice != ''">
{{ notice }} {{ notice }}
</gl-alert> </gl-alert>
......
ee/app/assets/javascripts/licenses/components/cards/license_card.vue
View file @ c39f47af
<script> <script>
import { mapState, mapActions } from 'vuex'; import { mapState, mapActions } from 'vuex';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import { __ } from '~/locale'; import { __ } from '~/locale';
import LicenseCardBody from './license_card_body.vue'; import LicenseCardBody from './license_card_body.vue';
...@@ -9,8 +9,8 @@ export default { ...@@ -9,8 +9,8 @@ export default {
name: 'LicenseCard', name: 'LicenseCard',
components: { components: {
LicenseCardBody, LicenseCardBody,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
license: { license: {
...@@ -55,21 +55,26 @@ export default { ...@@ -55,21 +55,26 @@ export default {
}} }}
</h4> </h4>
<gl-dropdown right class="js-manage-license" :text="__('Manage')" :disabled="isRemoving"> <gl-deprecated-dropdown
<gl-dropdown-item right
class="js-manage-license"
:text="__('Manage')"
:disabled="isRemoving"
>
<gl-deprecated-dropdown-item
v-if="isCurrentLicense" v-if="isCurrentLicense"
class="js-download-license" class="js-download-license"
:href="downloadLicensePath" :href="downloadLicensePath"
> >
{{ __('Download license') }} {{ __('Download license') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-item <gl-deprecated-dropdown-item
class="js-delete-license text-danger" class="js-delete-license text-danger"
@click="confirmDeleteLicense(license)" @click="confirmDeleteLicense(license)"
> >
{{ __('Delete license') }} {{ __('Delete license') }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</div> </div>
......
ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue
View file @ c39f47af
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
import { mapState, mapActions } from 'vuex'; import { mapState, mapActions } from 'vuex';
import { import {
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlFormInput, GlFormInput,
GlSearchBoxByType, GlSearchBoxByType,
GlLoadingIcon, GlLoadingIcon,
...@@ -17,8 +17,8 @@ import { SEARCH_DEBOUNCE } from '../constants'; ...@@ -17,8 +17,8 @@ import { SEARCH_DEBOUNCE } from '../constants';
export default { export default {
components: { components: {
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlFormInput, GlFormInput,
GlSearchBoxByType, GlSearchBoxByType,
GlLoadingIcon, GlLoadingIcon,
...@@ -129,7 +129,7 @@ export default { ...@@ -129,7 +129,7 @@ export default {
</div> </div>
<div class="col-sm"> <div class="col-sm">
<label class="label-bold">{{ __('Project') }}</label> <label class="label-bold">{{ __('Project') }}</label>
<gl-dropdown <gl-deprecated-dropdown
ref="dropdownButton" ref="dropdownButton"
:text="dropdownToggleText" :text="dropdownToggleText"
class="w-100 projects-dropdown" class="w-100 projects-dropdown"
...@@ -154,7 +154,7 @@ export default { ...@@ -154,7 +154,7 @@ export default {
<span v-if="!projects.length" class="d-block text-center p-2">{{ <span v-if="!projects.length" class="d-block text-center p-2">{{
__('No matches found') __('No matches found')
}}</span> }}</span>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="project in projects" v-for="project in projects"
:key="project.id" :key="project.id"
class="w-100" class="w-100"
...@@ -163,9 +163,9 @@ export default { ...@@ -163,9 +163,9 @@ export default {
<project-avatar :project="project" :size="32" /> <project-avatar :project="project" :size="32" />
{{ project.name }} {{ project.name }}
<div class="text-secondary">{{ project.namespace.name }}</div> <div class="text-secondary">{{ project.namespace.name }}</div>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</div> </div>
......
ee/app/assets/javascripts/related_items_tree/components/epic_issue_actions_split_button.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownDivider, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui'; import {
GlDeprecatedDropdown,
GlDeprecatedDropdownDivider,
GlDeprecatedDropdownHeader,
GlDeprecatedDropdownItem,
} from '@gitlab/ui';
import { s__, __ } from '~/locale'; import { s__, __ } from '~/locale';
...@@ -29,10 +34,10 @@ export default { ...@@ -29,10 +34,10 @@ export default {
epicActionItems, epicActionItems,
issueActionItems, issueActionItems,
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownDivider, GlDeprecatedDropdownDivider,
GlDropdownHeader, GlDeprecatedDropdownHeader,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
allowSubEpics: { allowSubEpics: {
...@@ -50,32 +55,32 @@ export default { ...@@ -50,32 +55,32 @@ export default {
</script> </script>
<template> <template>
<gl-dropdown <gl-deprecated-dropdown
:text="__('Add')" :text="__('Add')"
variant="secondary" variant="secondary"
data-qa-selector="epic_issue_actions_split_button" data-qa-selector="epic_issue_actions_split_button"
right right
> >
<gl-dropdown-header>{{ __('Issue') }}</gl-dropdown-header> <gl-deprecated-dropdown-header>{{ __('Issue') }}</gl-deprecated-dropdown-header>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="item in $options.issueActionItems" v-for="item in $options.issueActionItems"
:key="item.eventName" :key="item.eventName"
active-class="is-active" active-class="is-active"
@click="change(item)" @click="change(item)"
> >
{{ item.title }} {{ item.title }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<template v-if="allowSubEpics"> <template v-if="allowSubEpics">
<gl-dropdown-divider /> <gl-deprecated-dropdown-divider />
<gl-dropdown-header>{{ __('Epic') }}</gl-dropdown-header> <gl-deprecated-dropdown-header>{{ __('Epic') }}</gl-deprecated-dropdown-header>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="item in $options.epicActionItems" v-for="item in $options.epicActionItems"
:key="item.eventName" :key="item.eventName"
active-class="is-active" active-class="is-active"
@click="change(item)" @click="change(item)"
> >
{{ item.title }} {{ item.title }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</template> </template>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
ee/app/assets/javascripts/security_dashboard/components/filter.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlSearchBoxByType } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlSearchBoxByType } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlSearchBoxByType, GlSearchBoxByType,
Icon, Icon,
}, },
...@@ -58,7 +58,7 @@ export default { ...@@ -58,7 +58,7 @@ export default {
<template> <template>
<div class="dashboard-filter"> <div class="dashboard-filter">
<strong class="js-name">{{ filter.name }}</strong> <strong class="js-name">{{ filter.name }}</strong>
<gl-dropdown <gl-deprecated-dropdown
ref="dropdown" ref="dropdown"
class="d-block mt-1" class="d-block mt-1"
menu-class="dropdown-extended-height" menu-class="dropdown-extended-height"
...@@ -127,6 +127,6 @@ export default { ...@@ -127,6 +127,6 @@ export default {
> >
{{ __('No matching results') }} {{ __('No matching results') }}
</button> </button>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</template> </template>
ee/app/assets/javascripts/security_dashboard/components/fuzzing_artifacts_download.vue
View file @ c39f47af
<script> <script>
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { GlButton, GlNewDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlButton, GlNewDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
export default { export default {
i18n: { i18n: {
...@@ -9,7 +9,7 @@ export default { ...@@ -9,7 +9,7 @@ export default {
components: { components: {
GlButton, GlButton,
GlNewDropdown, GlNewDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
props: { props: {
jobs: { jobs: {
...@@ -47,9 +47,12 @@ export default { ...@@ -47,9 +47,12 @@ export default {
variant="info" variant="info"
size="small" size="small"
> >
<gl-dropdown-item v-for="job in jobs" :key="job.id" :href="artifactDownloadUrl(job)">{{ <gl-deprecated-dropdown-item
job.name v-for="job in jobs"
}}</gl-dropdown-item> :key="job.id"
:href="artifactDownloadUrl(job)"
>{{ job.name }}</gl-deprecated-dropdown-item
>
</gl-new-dropdown> </gl-new-dropdown>
<gl-button <gl-button
v-else v-else
......
ee/app/assets/javascripts/sidebar/components/status/health_status_dropdown.vue
View file @ c39f47af
<script> <script>
import { GlButton, GlDropdownItem, GlDropdown, GlDropdownDivider } from '@gitlab/ui'; import {
GlButton,
GlDeprecatedDropdownItem,
GlDeprecatedDropdown,
GlDeprecatedDropdownDivider,
} from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { healthStatusTextMap } from '../../constants'; import { healthStatusTextMap } from '../../constants';
export default { export default {
components: { components: {
GlButton, GlButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
}, },
props: { props: {
isEditable: { isEditable: {
...@@ -81,7 +86,7 @@ export default { ...@@ -81,7 +86,7 @@ export default {
<template> <template>
<div class="dropdown dropdown-menu-selectable"> <div class="dropdown dropdown-menu-selectable">
<gl-dropdown <gl-deprecated-dropdown
ref="dropdown" ref="dropdown"
class="w-100" class="w-100"
:text="dropdownText" :text="dropdownText"
...@@ -100,7 +105,7 @@ export default { ...@@ -100,7 +105,7 @@ export default {
</div> </div>
<div class="dropdown-content dropdown-body"> <div class="dropdown-content dropdown-body">
<gl-dropdown-item @click="handleDropdownClick(null)"> <gl-deprecated-dropdown-item @click="handleDropdownClick(null)">
<gl-button <gl-button
variant="link" variant="link"
class="dropdown-item health-dropdown-item" class="dropdown-item health-dropdown-item"
...@@ -108,11 +113,11 @@ export default { ...@@ -108,11 +113,11 @@ export default {
> >
{{ s__('Sidebar|No status') }} {{ s__('Sidebar|No status') }}
</gl-button> </gl-button>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-divider class="divider health-divider" /> <gl-deprecated-dropdown-divider class="divider health-divider" />
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="option in statusOptions" v-for="option in statusOptions"
:key="option.key" :key="option.key"
@click="handleDropdownClick(option.key)" @click="handleDropdownClick(option.key)"
...@@ -124,8 +129,8 @@ export default { ...@@ -124,8 +129,8 @@ export default {
> >
{{ option.value }} {{ option.value }}
</gl-button> </gl-button>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
</template> </template>
ee/app/assets/javascripts/sidebar/components/status/status.vue
View file @ c39f47af
...@@ -5,9 +5,9 @@ import { ...@@ -5,9 +5,9 @@ import {
GlButton, GlButton,
GlLoadingIcon, GlLoadingIcon,
GlTooltip, GlTooltip,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdown, GlDeprecatedDropdown,
GlDropdownDivider, GlDeprecatedDropdownDivider,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { healthStatusTextMap } from '../../constants'; import { healthStatusTextMap } from '../../constants';
...@@ -18,9 +18,9 @@ export default { ...@@ -18,9 +18,9 @@ export default {
GlButton, GlButton,
GlLoadingIcon, GlLoadingIcon,
GlTooltip, GlTooltip,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDropdownDivider, GlDeprecatedDropdownDivider,
}, },
mixins: [Tracking.mixin()], mixins: [Tracking.mixin()],
props: { props: {
...@@ -139,7 +139,7 @@ export default { ...@@ -139,7 +139,7 @@ export default {
class="dropdown dropdown-menu-selectable" class="dropdown dropdown-menu-selectable"
:class="{ show: isDropdownShowing, 'd-none': !isDropdownShowing }" :class="{ show: isDropdownShowing, 'd-none': !isDropdownShowing }"
> >
<gl-dropdown <gl-deprecated-dropdown
ref="dropdown" ref="dropdown"
class="w-100" class="w-100"
:text="dropdownText" :text="dropdownText"
...@@ -158,7 +158,7 @@ export default { ...@@ -158,7 +158,7 @@ export default {
</div> </div>
<div class="dropdown-content dropdown-body"> <div class="dropdown-content dropdown-body">
<gl-dropdown-item @click="handleDropdownClick(null)"> <gl-deprecated-dropdown-item @click="handleDropdownClick(null)">
<gl-button <gl-button
variant="link" variant="link"
class="dropdown-item health-dropdown-item" class="dropdown-item health-dropdown-item"
...@@ -166,11 +166,11 @@ export default { ...@@ -166,11 +166,11 @@ export default {
> >
{{ s__('Sidebar|No status') }} {{ s__('Sidebar|No status') }}
</gl-button> </gl-button>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-divider class="divider health-divider" /> <gl-deprecated-dropdown-divider class="divider health-divider" />
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="option in statusOptions" v-for="option in statusOptions"
:key="option.key" :key="option.key"
@click="handleDropdownClick(option.key)" @click="handleDropdownClick(option.key)"
...@@ -182,9 +182,9 @@ export default { ...@@ -182,9 +182,9 @@ export default {
> >
{{ option.value }} {{ option.value }}
</gl-button> </gl-button>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
</div> </div>
<gl-loading-icon v-if="isFetching" :inline="true" /> <gl-loading-icon v-if="isFetching" :inline="true" />
......
ee/app/assets/javascripts/threat_monitoring/components/environment_picker.vue
View file @ c39f47af
<script> <script>
import { mapActions, mapGetters, mapState } from 'vuex'; import { mapActions, mapGetters, mapState } from 'vuex';
import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlFormGroup, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
export default { export default {
components: { components: {
GlFormGroup, GlFormGroup,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
}, },
computed: { computed: {
...mapState('threatMonitoring', ['environments', 'currentEnvironmentId']), ...mapState('threatMonitoring', ['environments', 'currentEnvironmentId']),
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
:label-for="$options.environmentFilterId" :label-for="$options.environmentFilterId"
class="col-sm-6 col-md-4 col-lg-3 col-xl-2" class="col-sm-6 col-md-4 col-lg-3 col-xl-2"
> >
<gl-dropdown <gl-deprecated-dropdown
:id="$options.environmentFilterId" :id="$options.environmentFilterId"
ref="environmentsDropdown" ref="environmentsDropdown"
class="mb-0 d-flex" class="mb-0 d-flex"
...@@ -34,13 +34,13 @@ export default { ...@@ -34,13 +34,13 @@ export default {
:text="currentEnvironmentName" :text="currentEnvironmentName"
:disabled="!canChangeEnvironment" :disabled="!canChangeEnvironment"
> >
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="environment in environments" v-for="environment in environments"
:key="environment.id" :key="environment.id"
ref="environmentsDropdownItem" ref="environmentsDropdownItem"
@click="setCurrentEnvironmentId(environment.id)" @click="setCurrentEnvironmentId(environment.id)"
>{{ environment.name }}</gl-dropdown-item >{{ environment.name }}</gl-deprecated-dropdown-item
> >
</gl-dropdown> </gl-deprecated-dropdown>
</gl-form-group> </gl-form-group>
</template> </template>
ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue
View file @ c39f47af
<script> <script>
import { import {
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlModal, GlModal,
GlSearchBoxByType, GlSearchBoxByType,
GlModalDirective, GlModalDirective,
...@@ -15,8 +15,8 @@ import { s__, sprintf } from '~/locale'; ...@@ -15,8 +15,8 @@ import { s__, sprintf } from '~/locale';
export default { export default {
components: { components: {
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlModal, GlModal,
GlSearchBoxByType, GlSearchBoxByType,
Icon, Icon,
...@@ -201,7 +201,7 @@ export default { ...@@ -201,7 +201,7 @@ export default {
<gl-deprecated-button @click="cancel"> <gl-deprecated-button @click="cancel">
{{ s__('VisualReviewApp|Cancel') }} {{ s__('VisualReviewApp|Cancel') }}
</gl-deprecated-button> </gl-deprecated-button>
<gl-dropdown <gl-deprecated-dropdown
v-if="shouldShowChanges" v-if="shouldShowChanges"
dropup dropup
right right
...@@ -216,19 +216,19 @@ export default { ...@@ -216,19 +216,19 @@ export default {
{{ s__('VisualReviewApp|Open review app') }} {{ s__('VisualReviewApp|Open review app') }}
<icon class="fgray" name="external-link" /> <icon class="fgray" name="external-link" />
</template> </template>
<gl-dropdown-item <gl-deprecated-dropdown-item
v-for="change in filteredChanges" v-for="change in filteredChanges"
:key="change.path" :key="change.path"
:href="change.external_url" :href="change.external_url"
data-track-event="open_review_app" data-track-event="open_review_app"
data-track-label="review_app" data-track-label="review_app"
>{{ change.path }}</gl-dropdown-item >{{ change.path }}</gl-deprecated-dropdown-item
> >
<div v-show="isSearchEmpty" class="text-secondary p-2"> <div v-show="isSearchEmpty" class="text-secondary p-2">
{{ s__('VisualReviewApp|No review app found or available.') }} {{ s__('VisualReviewApp|No review app found or available.') }}
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
<review-app-link <review-app-link
v-else v-else
:display="viewAppDisplay" :display="viewAppDisplay"
......
ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue
View file @ c39f47af
<script> <script>
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
import { getIssueStatusFromLicenseStatus } from 'ee/vue_shared/license_compliance/store/utils'; import { getIssueStatusFromLicenseStatus } from 'ee/vue_shared/license_compliance/store/utils';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
...@@ -15,8 +15,8 @@ const invisibleClass = 'invisible'; ...@@ -15,8 +15,8 @@ const invisibleClass = 'invisible';
export default { export default {
name: 'AdminLicenseManagementRow', name: 'AdminLicenseManagementRow',
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlLoadingIcon, GlLoadingIcon,
Icon, Icon,
IssueStatusIcon, IssueStatusIcon,
...@@ -71,21 +71,21 @@ export default { ...@@ -71,21 +71,21 @@ export default {
<div class="float-right"> <div class="float-right">
<div class="d-flex"> <div class="d-flex">
<gl-loading-icon v-if="loading" class="js-loading-icon d-flex align-items-center mr-2" /> <gl-loading-icon v-if="loading" class="js-loading-icon d-flex align-items-center mr-2" />
<gl-dropdown <gl-deprecated-dropdown
:text="dropdownText" :text="dropdownText"
:disabled="loading" :disabled="loading"
toggle-class="d-flex justify-content-between align-items-center" toggle-class="d-flex justify-content-between align-items-center"
right right
> >
<gl-dropdown-item @click="allowLicense(license)"> <gl-deprecated-dropdown-item @click="allowLicense(license)">
<icon :class="approveIconClass" name="mobile-issue-close" /> <icon :class="approveIconClass" name="mobile-issue-close" />
{{ $options[$options.LICENSE_APPROVAL_ACTION.ALLOW] }} {{ $options[$options.LICENSE_APPROVAL_ACTION.ALLOW] }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
<gl-dropdown-item @click="denyLicense(license)"> <gl-deprecated-dropdown-item @click="denyLicense(license)">
<icon :class="blacklistIconClass" name="mobile-issue-close" /> <icon :class="blacklistIconClass" name="mobile-issue-close" />
{{ $options[$options.LICENSE_APPROVAL_ACTION.DENY] }} {{ $options[$options.LICENSE_APPROVAL_ACTION.DENY] }}
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
<button <button
:disabled="loading" :disabled="loading"
class="btn btn-blank js-remove-button" class="btn btn-blank js-remove-button"
......
ee/app/assets/javascripts/vue_shared/security_reports/components/split_button.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
export default { export default {
components: { components: {
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
Icon, Icon,
}, },
props: { props: {
...@@ -37,7 +37,7 @@ export default { ...@@ -37,7 +37,7 @@ export default {
</script> </script>
<template> <template>
<gl-dropdown <gl-deprecated-dropdown
v-if="selectedButton" v-if="selectedButton"
:disabled="disabled" :disabled="disabled"
no-caret no-caret
...@@ -47,7 +47,11 @@ export default { ...@@ -47,7 +47,11 @@ export default {
:text="selectedButton.name" :text="selectedButton.name"
@click="handleClick" @click="handleClick"
> >
<gl-dropdown-item v-for="button in buttons" :key="button.action" @click="setButton(button)"> <gl-deprecated-dropdown-item
v-for="button in buttons"
:key="button.action"
@click="setButton(button)"
>
<div class="media"> <div class="media">
<div> <div>
<icon v-if="selectedButton === button" class="gl-mr-2" name="mobile-issue-close" /> <icon v-if="selectedButton === button" class="gl-mr-2" name="mobile-issue-close" />
...@@ -58,6 +62,6 @@ export default { ...@@ -58,6 +62,6 @@ export default {
<span>{{ button.tagline }}</span> <span>{{ button.tagline }}</span>
</div> </div>
</div> </div>
</gl-dropdown-item> </gl-deprecated-dropdown-item>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
ee/app/assets/javascripts/vulnerabilities/components/vulnerability_state_dropdown.vue
View file @ c39f47af
<script> <script>
import { GlDropdown, GlIcon, GlDeprecatedButton } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlIcon, GlDeprecatedButton } from '@gitlab/ui';
import { VULNERABILITY_STATE_OBJECTS } from '../constants'; import { VULNERABILITY_STATE_OBJECTS } from '../constants';
export default { export default {
states: Object.values(VULNERABILITY_STATE_OBJECTS), states: Object.values(VULNERABILITY_STATE_OBJECTS),
components: { GlDropdown, GlIcon, GlDeprecatedButton }, components: { GlDeprecatedDropdown, GlIcon, GlDeprecatedButton },
props: { props: {
// Initial vulnerability state from the parent. This is used to disable the Change Status button // Initial vulnerability state from the parent. This is used to disable the Change Status button
...@@ -56,7 +56,7 @@ export default { ...@@ -56,7 +56,7 @@ export default {
</script> </script>
<template> <template>
<gl-dropdown <gl-deprecated-dropdown
ref="dropdown" ref="dropdown"
menu-class="p-0" menu-class="p-0"
toggle-class="text-capitalize" toggle-class="text-capitalize"
...@@ -96,5 +96,5 @@ export default { ...@@ -96,5 +96,5 @@ export default {
{{ s__('VulnerabilityManagement|Change status') }} {{ s__('VulnerabilityManagement|Change status') }}
</gl-deprecated-button> </gl-deprecated-button>
</div> </div>
</gl-dropdown> </gl-deprecated-dropdown>
</template> </template>
ee/spec/frontend/analytics/cycle_analytics/components/labels_selector_spec.js
View file @ c39f47af
...@@ -11,7 +11,7 @@ import { groupLabels } from '../mock_data'; ...@@ -11,7 +11,7 @@ import { groupLabels } from '../mock_data';
const selectedLabel = groupLabels[groupLabels.length - 1]; const selectedLabel = groupLabels[groupLabels.length - 1];
const findActiveItem = wrapper => const findActiveItem = wrapper =>
wrapper wrapper
.findAll('gl-dropdown-item-stub') .findAll('gl-deprecated-dropdown-item-stub')
.filter(d => d.attributes('active')) .filter(d => d.attributes('active'))
.at(0); .at(0);
......
ee/spec/frontend/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters_spec.js
View file @ c39f47af
...@@ -2,7 +2,7 @@ import Vuex from 'vuex'; ...@@ -2,7 +2,7 @@ import Vuex from 'vuex';
import axios from 'axios'; import axios from 'axios';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { shallowMount, mount, createLocalVue } from '@vue/test-utils'; import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
import { GlDropdownItem, GlSegmentedControl } from '@gitlab/ui'; import { GlDeprecatedDropdownItem, GlSegmentedControl } from '@gitlab/ui';
import createFlash from '~/flash'; import createFlash from '~/flash';
import TasksByTypeFilters from 'ee/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters.vue'; import TasksByTypeFilters from 'ee/analytics/cycle_analytics/components/tasks_by_type/tasks_by_type_filters.vue';
import LabelsSelector from 'ee/analytics/cycle_analytics/components/labels_selector.vue'; import LabelsSelector from 'ee/analytics/cycle_analytics/components/labels_selector.vue';
...@@ -20,7 +20,7 @@ const selectedLabelIds = [groupLabels[0].id]; ...@@ -20,7 +20,7 @@ const selectedLabelIds = [groupLabels[0].id];
const findSubjectFilters = ctx => ctx.find(GlSegmentedControl); const findSubjectFilters = ctx => ctx.find(GlSegmentedControl);
const findSelectedSubjectFilters = ctx => findSubjectFilters(ctx).attributes('checked'); const findSelectedSubjectFilters = ctx => findSubjectFilters(ctx).attributes('checked');
const findDropdownLabels = ctx => ctx.find(LabelsSelector).findAll(GlDropdownItem); const findDropdownLabels = ctx => ctx.find(LabelsSelector).findAll(GlDeprecatedDropdownItem);
const selectLabelAtIndex = (ctx, index) => { const selectLabelAtIndex = (ctx, index) => {
findDropdownLabels(ctx) findDropdownLabels(ctx)
......
ee/spec/frontend/analytics/productivity_analytics/components/app_spec.js
View file @ c39f47af
...@@ -11,8 +11,8 @@ import { TEST_HOST } from 'helpers/test_constants'; ...@@ -11,8 +11,8 @@ import { TEST_HOST } from 'helpers/test_constants';
import { import {
GlEmptyState, GlEmptyState,
GlLoadingIcon, GlLoadingIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlDeprecatedButton, GlDeprecatedButton,
} from '@gitlab/ui'; } from '@gitlab/ui';
import { GlColumnChart } from '@gitlab/ui/dist/charts'; import { GlColumnChart } from '@gitlab/ui/dist/charts';
...@@ -78,7 +78,7 @@ describe('ProductivityApp component', () => { ...@@ -78,7 +78,7 @@ describe('ProductivityApp component', () => {
const findCommitBasedMetricChart = () => wrapper.find({ ref: 'commitBasedChart' }); const findCommitBasedMetricChart = () => wrapper.find({ ref: 'commitBasedChart' });
const findScatterplotMetricChart = () => wrapper.find({ ref: 'scatterplot' }); const findScatterplotMetricChart = () => wrapper.find({ ref: 'scatterplot' });
const findMrTableSortSection = () => wrapper.find('.js-mr-table-sort'); const findMrTableSortSection = () => wrapper.find('.js-mr-table-sort');
const findSortFieldDropdown = () => findMrTableSortSection().find(GlDropdown); const findSortFieldDropdown = () => findMrTableSortSection().find(GlDeprecatedDropdown);
const findSortOrderToggle = () => findMrTableSortSection().find(GlDeprecatedButton); const findSortOrderToggle = () => findMrTableSortSection().find(GlDeprecatedButton);
const findMrTableSection = () => wrapper.find('.js-mr-table'); const findMrTableSection = () => wrapper.find('.js-mr-table');
const findMrTable = () => findMrTableSection().find(MergeRequestTable); const findMrTable = () => findMrTableSection().find(MergeRequestTable);
...@@ -430,7 +430,7 @@ describe('ProductivityApp component', () => { ...@@ -430,7 +430,7 @@ describe('ProductivityApp component', () => {
it('should change the sort field', () => { it('should change the sort field', () => {
findSortFieldDropdown() findSortFieldDropdown()
.findAll(GlDropdownItem) .findAll(GlDeprecatedDropdownItem)
.at(0) .at(0)
.vm.$emit('click'); .vm.$emit('click');
......
ee/spec/frontend/analytics/productivity_analytics/components/metric_chart_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue'; import MetricChart from 'ee/analytics/productivity_analytics/components/metric_chart.vue';
import { GlLoadingIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlLoadingIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
describe('MetricChart component', () => { describe('MetricChart component', () => {
...@@ -38,8 +38,8 @@ describe('MetricChart component', () => { ...@@ -38,8 +38,8 @@ describe('MetricChart component', () => {
const findLoadingIndicator = () => wrapper.find(GlLoadingIcon); const findLoadingIndicator = () => wrapper.find(GlLoadingIcon);
const findNoDataSection = () => wrapper.find({ ref: 'noData' }); const findNoDataSection = () => wrapper.find({ ref: 'noData' });
const findMetricDropdown = () => wrapper.find(GlDropdown); const findMetricDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findMetricDropdownItems = () => findMetricDropdown().findAll(GlDropdownItem); const findMetricDropdownItems = () => findMetricDropdown().findAll(GlDeprecatedDropdownItem);
const findChartSlot = () => wrapper.find({ ref: 'chart' }); const findChartSlot = () => wrapper.find({ ref: 'chart' });
describe('template', () => { describe('template', () => {
......
ee/spec/frontend/analytics/productivity_analytics/components/mr_table_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import MergeRequestTable from 'ee/analytics/productivity_analytics/components/mr_table.vue'; import MergeRequestTable from 'ee/analytics/productivity_analytics/components/mr_table.vue';
import MergeRequestTableRow from 'ee/analytics/productivity_analytics/components/mr_table_row.vue'; import MergeRequestTableRow from 'ee/analytics/productivity_analytics/components/mr_table_row.vue';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { mockMergeRequests } from '../mock_data'; import { mockMergeRequests } from '../mock_data';
describe('MergeRequestTable component', () => { describe('MergeRequestTable component', () => {
...@@ -27,8 +27,8 @@ describe('MergeRequestTable component', () => { ...@@ -27,8 +27,8 @@ describe('MergeRequestTable component', () => {
const findMergeRequestTableRows = () => wrapper.findAll(MergeRequestTableRow); const findMergeRequestTableRows = () => wrapper.findAll(MergeRequestTableRow);
const findTableHeader = () => wrapper.find('.table-row-header'); const findTableHeader = () => wrapper.find('.table-row-header');
const findDropdown = () => wrapper.find(GlDropdown); const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findDropdownItems = () => wrapper.findAll(GlDropdownItem); const findDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findFirstDropdownItem = () => findDropdownItems().at(0); const findFirstDropdownItem = () => findDropdownItems().at(0);
beforeEach(() => { beforeEach(() => {
......
ee/spec/frontend/analytics/shared/components/date_range_dropdown_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdownItem } from '@gitlab/ui';
import DateRangeDropdown from 'ee/analytics/shared/components/date_range_dropdown.vue'; import DateRangeDropdown from 'ee/analytics/shared/components/date_range_dropdown.vue';
describe('DateRangeDropdown component', () => { describe('DateRangeDropdown component', () => {
...@@ -23,7 +23,7 @@ describe('DateRangeDropdown component', () => { ...@@ -23,7 +23,7 @@ describe('DateRangeDropdown component', () => {
createComponent(); createComponent();
}); });
const findDropdownElements = () => wrapper.findAll(GlDropdownItem); const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findFirstDropdownElement = () => findDropdownElements().at(0); const findFirstDropdownElement = () => findDropdownElements().at(0);
afterEach(() => { afterEach(() => {
......
ee/spec/frontend/boards/components/weight_select_spec.js
View file @ c39f47af
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import WeightSelect from 'ee/boards/components/weight_select.vue'; import WeightSelect from 'ee/boards/components/weight_select.vue';
import { GlDeprecatedButton, GlDropdown } from '@gitlab/ui'; import { GlDeprecatedButton, GlDeprecatedDropdown } from '@gitlab/ui';
describe('WeightSelect', () => { describe('WeightSelect', () => {
let wrapper; let wrapper;
const editButton = () => wrapper.find(GlDeprecatedButton); const editButton = () => wrapper.find(GlDeprecatedButton);
const valueContainer = () => wrapper.find('.value'); const valueContainer = () => wrapper.find('.value');
const weightDropdown = () => wrapper.find(GlDropdown); const weightDropdown = () => wrapper.find(GlDeprecatedDropdown);
const weightSelect = () => wrapper.find({ ref: 'weight-select' }); const weightSelect = () => wrapper.find({ ref: 'weight-select' });
const defaultProps = { const defaultProps = {
......
ee/spec/frontend/dependencies/components/dependencies_actions_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdownItem } from '@gitlab/ui';
import { TEST_HOST } from 'helpers/test_constants'; import { TEST_HOST } from 'helpers/test_constants';
import createStore from 'ee/dependencies/store'; import createStore from 'ee/dependencies/store';
import { DEPENDENCY_LIST_TYPES } from 'ee/dependencies/store/constants'; import { DEPENDENCY_LIST_TYPES } from 'ee/dependencies/store/constants';
...@@ -39,7 +39,7 @@ describe('DependenciesActions component', () => { ...@@ -39,7 +39,7 @@ describe('DependenciesActions component', () => {
}); });
it('dispatches the right setSortField action on clicking each item in the dropdown', () => { it('dispatches the right setSortField action on clicking each item in the dropdown', () => {
const dropdownItems = wrapper.findAll(GlDropdownItem).wrappers; const dropdownItems = wrapper.findAll(GlDeprecatedDropdownItem).wrappers;
dropdownItems.forEach(item => { dropdownItems.forEach(item => {
// trigger() does not work on stubbed/shallow mounted components // trigger() does not work on stubbed/shallow mounted components
......
ee/spec/frontend/geo_node_form/components/geo_node_form_namespaces_spec.js
View file @ c39f47af
import Vuex from 'vuex'; import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils'; import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlIcon, GlSearchBoxByType, GlDropdown } from '@gitlab/ui'; import { GlIcon, GlSearchBoxByType, GlDeprecatedDropdown } from '@gitlab/ui';
import GeoNodeFormNamespaces from 'ee/geo_node_form/components/geo_node_form_namespaces.vue'; import GeoNodeFormNamespaces from 'ee/geo_node_form/components/geo_node_form_namespaces.vue';
import store from 'ee/geo_node_form/store'; import store from 'ee/geo_node_form/store';
import { MOCK_SYNC_NAMESPACES } from '../mock_data'; import { MOCK_SYNC_NAMESPACES } from '../mock_data';
...@@ -41,7 +41,7 @@ describe('GeoNodeFormNamespaces', () => { ...@@ -41,7 +41,7 @@ describe('GeoNodeFormNamespaces', () => {
wrapper.destroy(); wrapper.destroy();
}); });
const findGlDropdown = () => wrapper.find(GlDropdown); const findGlDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findGlDropdownSearch = () => findGlDropdown().find(GlSearchBoxByType); const findGlDropdownSearch = () => findGlDropdown().find(GlSearchBoxByType);
const findDropdownItems = () => findGlDropdown().findAll('li'); const findDropdownItems = () => findGlDropdown().findAll('li');
const findDropdownItemsText = () => findDropdownItems().wrappers.map(w => w.text()); const findDropdownItemsText = () => findDropdownItems().wrappers.map(w => w.text());
......
ee/spec/frontend/geo_node_form/components/geo_node_form_shards_spec.js
View file @ c39f47af
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { GlIcon, GlDropdown } from '@gitlab/ui'; import { GlIcon, GlDeprecatedDropdown } from '@gitlab/ui';
import GeoNodeFormShards from 'ee/geo_node_form/components/geo_node_form_shards.vue'; import GeoNodeFormShards from 'ee/geo_node_form/components/geo_node_form_shards.vue';
import { MOCK_SYNC_SHARDS } from '../mock_data'; import { MOCK_SYNC_SHARDS } from '../mock_data';
...@@ -32,7 +32,7 @@ describe('GeoNodeFormShards', () => { ...@@ -32,7 +32,7 @@ describe('GeoNodeFormShards', () => {
wrapper.destroy(); wrapper.destroy();
}); });
const findGlDropdown = () => wrapper.find(GlDropdown); const findGlDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findDropdownItems = () => findGlDropdown().findAll('li'); const findDropdownItems = () => findGlDropdown().findAll('li');
describe('template', () => { describe('template', () => {
......
ee/spec/frontend/geo_replicable/components/geo_replicable_filter_bar_spec.js
View file @ c39f47af
import Vuex from 'vuex'; import Vuex from 'vuex';
import { createLocalVue, mount } from '@vue/test-utils'; import { createLocalVue, mount } from '@vue/test-utils';
import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlButton } from '@gitlab/ui'; import {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlSearchBoxByType,
GlButton,
} from '@gitlab/ui';
import GeoReplicableFilterBar from 'ee/geo_replicable/components/geo_replicable_filter_bar.vue'; import GeoReplicableFilterBar from 'ee/geo_replicable/components/geo_replicable_filter_bar.vue';
import createStore from 'ee/geo_replicable/store'; import createStore from 'ee/geo_replicable/store';
import { DEFAULT_SEARCH_DELAY } from 'ee/geo_replicable/constants'; import { DEFAULT_SEARCH_DELAY } from 'ee/geo_replicable/constants';
...@@ -34,8 +39,8 @@ describe('GeoReplicableFilterBar', () => { ...@@ -34,8 +39,8 @@ describe('GeoReplicableFilterBar', () => {
}); });
const findNavContainer = () => wrapper.find('nav'); const findNavContainer = () => wrapper.find('nav');
const findGlDropdown = () => findNavContainer().find(GlDropdown); const findGlDropdown = () => findNavContainer().find(GlDeprecatedDropdown);
const findGlDropdownItems = () => findNavContainer().findAll(GlDropdownItem); const findGlDropdownItems = () => findNavContainer().findAll(GlDeprecatedDropdownItem);
const findDropdownItemsText = () => findGlDropdownItems().wrappers.map(w => w.text()); const findDropdownItemsText = () => findGlDropdownItems().wrappers.map(w => w.text());
const findGlSearchBox = () => findNavContainer().find(GlSearchBoxByType); const findGlSearchBox = () => findNavContainer().find(GlSearchBoxByType);
const findGlButton = () => findNavContainer().find(GlButton); const findGlButton = () => findNavContainer().find(GlButton);
......
ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js
View file @ c39f47af
...@@ -2,8 +2,8 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; ...@@ -2,8 +2,8 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { import {
GlDeprecatedButton, GlDeprecatedButton,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlFormInput, GlFormInput,
GlSearchBoxByType, GlSearchBoxByType,
GlLoadingIcon, GlLoadingIcon,
...@@ -163,7 +163,7 @@ describe('CreateIssueForm', () => { ...@@ -163,7 +163,7 @@ describe('CreateIssueForm', () => {
it('renders Projects dropdown field', () => { it('renders Projects dropdown field', () => {
const projectsDropdownLabel = wrapper.findAll('label').at(1); const projectsDropdownLabel = wrapper.findAll('label').at(1);
const projectsDropdownButton = wrapper.find(GlDropdown); const projectsDropdownButton = wrapper.find(GlDeprecatedDropdown);
expect(projectsDropdownLabel.text()).toBe('Project'); expect(projectsDropdownLabel.text()).toBe('Project');
expect(projectsDropdownButton.props('text')).toBe('Select a project'); expect(projectsDropdownButton.props('text')).toBe('Select a project');
...@@ -173,8 +173,8 @@ describe('CreateIssueForm', () => { ...@@ -173,8 +173,8 @@ describe('CreateIssueForm', () => {
wrapper.vm.$store.dispatch('receiveProjectsSuccess', mockProjects); wrapper.vm.$store.dispatch('receiveProjectsSuccess', mockProjects);
return wrapper.vm.$nextTick(() => { return wrapper.vm.$nextTick(() => {
const projectsDropdownButton = wrapper.find(GlDropdown); const projectsDropdownButton = wrapper.find(GlDeprecatedDropdown);
const dropdownItems = projectsDropdownButton.findAll(GlDropdownItem); const dropdownItems = projectsDropdownButton.findAll(GlDeprecatedDropdownItem);
expect(projectsDropdownButton.find(GlSearchBoxByType).exists()).toBe(true); expect(projectsDropdownButton.find(GlSearchBoxByType).exists()).toBe(true);
expect(projectsDropdownButton.find(GlLoadingIcon).exists()).toBe(true); expect(projectsDropdownButton.find(GlLoadingIcon).exists()).toBe(true);
...@@ -195,7 +195,7 @@ describe('CreateIssueForm', () => { ...@@ -195,7 +195,7 @@ describe('CreateIssueForm', () => {
const filteredMockProjects = mockProjects.filter(project => project.name === searchKey); const filteredMockProjects = mockProjects.filter(project => project.name === searchKey);
jest.spyOn(wrapper.vm, 'fetchProjects').mockImplementation(jest.fn()); jest.spyOn(wrapper.vm, 'fetchProjects').mockImplementation(jest.fn());
wrapper.find(GlDropdown).trigger('click'); wrapper.find(GlDeprecatedDropdown).trigger('click');
wrapper.setData({ wrapper.setData({
searchKey, searchKey,
...@@ -207,7 +207,7 @@ describe('CreateIssueForm', () => { ...@@ -207,7 +207,7 @@ describe('CreateIssueForm', () => {
wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects); wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
}) })
.then(() => { .then(() => {
expect(wrapper.findAll(GlDropdownItem)).toHaveLength(1); expect(wrapper.findAll(GlDeprecatedDropdownItem)).toHaveLength(1);
}); });
}); });
...@@ -216,7 +216,7 @@ describe('CreateIssueForm', () => { ...@@ -216,7 +216,7 @@ describe('CreateIssueForm', () => {
const filteredMockProjects = mockProjects.filter(project => project.name === searchKey); const filteredMockProjects = mockProjects.filter(project => project.name === searchKey);
jest.spyOn(wrapper.vm, 'fetchProjects').mockImplementation(jest.fn()); jest.spyOn(wrapper.vm, 'fetchProjects').mockImplementation(jest.fn());
wrapper.find(GlDropdown).trigger('click'); wrapper.find(GlDeprecatedDropdown).trigger('click');
wrapper.setData({ wrapper.setData({
searchKey, searchKey,
......
ee/spec/frontend/security_dashboard/components/filter_spec.js
View file @ c39f47af
...@@ -19,7 +19,7 @@ describe('Filter component', () => { ...@@ -19,7 +19,7 @@ describe('Filter component', () => {
wrapper = mount(Filter, { wrapper = mount(Filter, {
stubs: { stubs: {
...stubChildren(Filter), ...stubChildren(Filter),
GlDropdown: false, GlDeprecatedDropdown: false,
GlSearchBoxByType: false, GlSearchBoxByType: false,
}, },
propsData, propsData,
......
ee/spec/frontend/security_dashboard/components/fuzzing_artifacts_download_spec.js
View file @ c39f47af
...@@ -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, GlDropdownItem } from '@gitlab/ui'; import { GlButton, GlNewDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -60,11 +60,11 @@ describe('Filter component', () => { ...@@ -60,11 +60,11 @@ 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(GlNewDropdown).exists()).toBe(true);
expect(wrapper.findAll(GlDropdownItem).length).toBe(2); expect(wrapper.findAll(GlDeprecatedDropdownItem).length).toBe(2);
}); });
it('should render with href set to the correct filepath for every element', () => { it('should render with href set to the correct filepath for every element', () => {
const wrapperArray = wrapper.findAll(GlDropdownItem); const wrapperArray = wrapper.findAll(GlDeprecatedDropdownItem);
wrapperArray.wrappers.forEach((_, index) => { wrapperArray.wrappers.forEach((_, index) => {
const href = `/api/v4/projects/${projectId}/jobs/artifacts/${ const href = `/api/v4/projects/${projectId}/jobs/artifacts/${
jobs[index].ref jobs[index].ref
......
ee/spec/frontend/sidebar/components/status/status_spec.js
View file @ c39f47af
import { GlDropdown, GlDropdownItem, GlLoadingIcon, GlTooltip } from '@gitlab/ui'; import {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
GlLoadingIcon,
GlTooltip,
} from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils'; import { mount, shallowMount } from '@vue/test-utils';
import Vue from 'vue'; import Vue from 'vue';
import Status from 'ee/sidebar/components/status/status.vue'; import Status from 'ee/sidebar/components/status/status.vue';
...@@ -10,9 +15,9 @@ const getTooltipText = wrapper => wrapper.find(GlTooltip).text(); ...@@ -10,9 +15,9 @@ const getTooltipText = wrapper => wrapper.find(GlTooltip).text();
const getEditButton = wrapper => wrapper.find({ ref: 'editButton' }); const getEditButton = wrapper => wrapper.find({ ref: 'editButton' });
const getDropdownElement = wrapper => wrapper.find(GlDropdown); const getDropdownElement = wrapper => wrapper.find(GlDeprecatedDropdown);
const getRemoveStatusItem = wrapper => wrapper.find(GlDropdownItem); const getRemoveStatusItem = wrapper => wrapper.find(GlDeprecatedDropdownItem);
describe('Status', () => { describe('Status', () => {
let wrapper; let wrapper;
...@@ -215,7 +220,7 @@ describe('Status', () => { ...@@ -215,7 +220,7 @@ describe('Status', () => {
}); });
it('hides form when a dropdown item is clicked', () => { it('hides form when a dropdown item is clicked', () => {
const dropdownItem = wrapper.findAll(GlDropdownItem).at(1); const dropdownItem = wrapper.findAll(GlDeprecatedDropdownItem).at(1);
dropdownItem.vm.$emit('click'); dropdownItem.vm.$emit('click');
...@@ -241,7 +246,7 @@ describe('Status', () => { ...@@ -241,7 +246,7 @@ describe('Status', () => {
}); });
it('shows 4 dropdown items', () => { it('shows 4 dropdown items', () => {
expect(wrapper.findAll(GlDropdownItem)).toHaveLength(4); expect(wrapper.findAll(GlDeprecatedDropdownItem)).toHaveLength(4);
}); });
// Test that "On track", "Needs attention", and "At risk" are displayed // Test that "On track", "Needs attention", and "At risk" are displayed
...@@ -250,7 +255,7 @@ describe('Status', () => { ...@@ -250,7 +255,7 @@ describe('Status', () => {
(statusText, index) => { (statusText, index) => {
expect( expect(
wrapper wrapper
.findAll(GlDropdownItem) .findAll(GlDeprecatedDropdownItem)
.at(index + 1) // +1 in index to account for 1st item as `No status` .at(index + 1) // +1 in index to account for 1st item as `No status`
.text(), .text(),
).toContain(statusText); ).toContain(statusText);
...@@ -262,7 +267,7 @@ describe('Status', () => { ...@@ -262,7 +267,7 @@ describe('Status', () => {
'emits onFormSubmit event with argument "%s" when user selects the option and submits form', 'emits onFormSubmit event with argument "%s" when user selects the option and submits form',
(status, index) => { (status, index) => {
wrapper wrapper
.findAll(GlDropdownItem) .findAll(GlDeprecatedDropdownItem)
.at(index + 1) .at(index + 1)
.vm.$emit('click', { preventDefault: () => null }); .vm.$emit('click', { preventDefault: () => null });
......
ee/spec/frontend/vue_mr_widget/components/visual_review_app_spec.js
View file @ c39f47af
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import VisualReviewAppLink from 'ee/vue_merge_request_widget/components/visual_review_app_link.vue'; import VisualReviewAppLink from 'ee/vue_merge_request_widget/components/visual_review_app_link.vue';
import { GlDeprecatedButton, GlDropdown, GlModal } from '@gitlab/ui'; import { GlDeprecatedButton, GlDeprecatedDropdown, GlModal } from '@gitlab/ui';
import { mockTracking, triggerEvent } from 'helpers/tracking_helper'; import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
...@@ -132,7 +132,7 @@ describe('Visual Review App Link', () => { ...@@ -132,7 +132,7 @@ describe('Visual Review App Link', () => {
it('with review app split dropdown', () => { it('with review app split dropdown', () => {
expect( expect(
wrapper wrapper
.find(GlDropdown) .find(GlDeprecatedDropdown)
.find(`a[href='${propsData.link}']`) .find(`a[href='${propsData.link}']`)
.exists(), .exists(),
).toEqual(true); ).toEqual(true);
...@@ -141,7 +141,7 @@ describe('Visual Review App Link', () => { ...@@ -141,7 +141,7 @@ describe('Visual Review App Link', () => {
it('contains a list of changed pages', () => { it('contains a list of changed pages', () => {
expect( expect(
wrapper wrapper
.find(GlDropdown) .find(GlDeprecatedDropdown)
.find(`a[href='${propsData.link}/example-path']`) .find(`a[href='${propsData.link}/example-path']`)
.exists(), .exists(),
).toEqual(true); ).toEqual(true);
......
ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue'; import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
...@@ -21,8 +21,8 @@ const buttons = [ ...@@ -21,8 +21,8 @@ const buttons = [
describe('Split Button', () => { describe('Split Button', () => {
let wrapper; let wrapper;
const findDropdown = () => wrapper.find(GlDropdown); const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findDropdownItems = () => wrapper.findAll(GlDropdownItem); const findDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
const createComponent = props => { const createComponent = props => {
wrapper = shallowMount(SplitButton, { wrapper = shallowMount(SplitButton, {
......
spec/frontend/alert_management/components/alert_management_table_spec.js
View file @ c39f47af
...@@ -3,8 +3,8 @@ import { ...@@ -3,8 +3,8 @@ import {
GlTable, GlTable,
GlAlert, GlAlert,
GlLoadingIcon, GlLoadingIcon,
GlDropdown, GlDeprecatedDropdown,
GlDropdownItem, GlDeprecatedDropdownItem,
GlIcon, GlIcon,
GlTabs, GlTabs,
GlTab, GlTab,
...@@ -32,12 +32,12 @@ describe('AlertManagementTable', () => { ...@@ -32,12 +32,12 @@ describe('AlertManagementTable', () => {
const findAlerts = () => wrapper.findAll('table tbody tr'); const findAlerts = () => wrapper.findAll('table tbody tr');
const findAlert = () => wrapper.find(GlAlert); const findAlert = () => wrapper.find(GlAlert);
const findLoader = () => wrapper.find(GlLoadingIcon); const findLoader = () => wrapper.find(GlLoadingIcon);
const findStatusDropdown = () => wrapper.find(GlDropdown); const findStatusDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findStatusFilterTabs = () => wrapper.findAll(GlTab); const findStatusFilterTabs = () => wrapper.findAll(GlTab);
const findStatusTabs = () => wrapper.find(GlTabs); const findStatusTabs = () => wrapper.find(GlTabs);
const findStatusFilterBadge = () => wrapper.findAll(GlBadge); const findStatusFilterBadge = () => wrapper.findAll(GlBadge);
const findDateFields = () => wrapper.findAll(TimeAgo); const findDateFields = () => wrapper.findAll(TimeAgo);
const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem); const findFirstStatusOption = () => findStatusDropdown().find(GlDeprecatedDropdownItem);
const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]'); const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]');
const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]'); const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
const findSeverityColumnHeader = () => wrapper.findAll('th').at(0); const findSeverityColumnHeader = () => wrapper.findAll('th').at(0);
......
spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import axios from 'axios'; import axios from 'axios';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdownItem } from '@gitlab/ui';
import SidebarAssignee from '~/alert_management/components/sidebar/sidebar_assignee.vue'; import SidebarAssignee from '~/alert_management/components/sidebar/sidebar_assignee.vue';
import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue'; import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue';
import AlertSetAssignees from '~/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql'; import AlertSetAssignees from '~/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql';
...@@ -103,7 +103,7 @@ describe('Alert Details Sidebar Assignees', () => { ...@@ -103,7 +103,7 @@ describe('Alert Details Sidebar Assignees', () => {
it('renders a unassigned option', () => { it('renders a unassigned option', () => {
wrapper.setData({ isDropdownSearching: false }); wrapper.setData({ isDropdownSearching: false });
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdownItem).text()).toBe('Unassigned'); expect(wrapper.find(GlDeprecatedDropdownItem).text()).toBe('Unassigned');
}); });
}); });
......
spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js
View file @ c39f47af
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlLoadingIcon } from '@gitlab/ui';
import { trackAlertStatusUpdateOptions } from '~/alert_management/constants'; import { trackAlertStatusUpdateOptions } from '~/alert_management/constants';
import AlertSidebarStatus from '~/alert_management/components/sidebar/sidebar_status.vue'; import AlertSidebarStatus from '~/alert_management/components/sidebar/sidebar_status.vue';
import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.mutation.graphql'; import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.mutation.graphql';
...@@ -10,8 +10,8 @@ const mockAlert = mockAlerts[0]; ...@@ -10,8 +10,8 @@ const mockAlert = mockAlerts[0];
describe('Alert Details Sidebar Status', () => { describe('Alert Details Sidebar Status', () => {
let wrapper; let wrapper;
const findStatusDropdown = () => wrapper.find(GlDropdown); const findStatusDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findStatusDropdownItem = () => wrapper.find(GlDropdownItem); const findStatusDropdownItem = () => wrapper.find(GlDeprecatedDropdownItem);
const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon); const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon);
function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) { function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) {
......
spec/frontend/boards/components/boards_selector_spec.js
View file @ c39f47af
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { GlDropdown, GlLoadingIcon } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlLoadingIcon } from '@gitlab/ui';
import { TEST_HOST } from 'spec/test_constants'; import { TEST_HOST } from 'spec/test_constants';
import BoardsSelector from '~/boards/components/boards_selector.vue'; import BoardsSelector from '~/boards/components/boards_selector.vue';
import boardsStore from '~/boards/stores/boards_store'; import boardsStore from '~/boards/stores/boards_store';
...@@ -103,7 +103,7 @@ describe('BoardsSelector', () => { ...@@ -103,7 +103,7 @@ describe('BoardsSelector', () => {
}); });
// Emits gl-dropdown show event to simulate the dropdown is opened at initialization time // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
wrapper.find(GlDropdown).vm.$emit('show'); wrapper.find(GlDeprecatedDropdown).vm.$emit('show');
}); });
afterEach(() => { afterEach(() => {
......
spec/frontend/ci_variable_list/components/ci_enviroments_dropdown_spec.js
View file @ c39f47af
import Vuex from 'vuex'; import Vuex from 'vuex';
import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue'; import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlDropdownItem, GlIcon } from '@gitlab/ui'; import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -26,8 +26,8 @@ describe('Ci environments dropdown', () => { ...@@ -26,8 +26,8 @@ describe('Ci environments dropdown', () => {
}); });
}; };
const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem); const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findDropdownItemByIndex = index => wrapper.findAll(GlDropdownItem).at(index); const findDropdownItemByIndex = index => wrapper.findAll(GlDeprecatedDropdownItem).at(index);
const findActiveIconByIndex = index => wrapper.findAll(GlIcon).at(index); const findActiveIconByIndex = index => wrapper.findAll(GlIcon).at(index);
afterEach(() => { afterEach(() => {
......
spec/frontend/clusters/components/fluentd_output_settings_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue'; import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue';
import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants'; import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
import { GlAlert, GlDropdown, GlFormCheckbox } from '@gitlab/ui'; import { GlAlert, GlDeprecatedDropdown, GlFormCheckbox } from '@gitlab/ui';
import eventHub from '~/clusters/event_hub'; import eventHub from '~/clusters/event_hub';
const { UPDATING } = APPLICATION_STATUS; const { UPDATING } = APPLICATION_STATUS;
...@@ -36,7 +36,7 @@ describe('FluentdOutputSettings', () => { ...@@ -36,7 +36,7 @@ describe('FluentdOutputSettings', () => {
}; };
const findSaveButton = () => wrapper.find({ ref: 'saveBtn' }); const findSaveButton = () => wrapper.find({ ref: 'saveBtn' });
const findCancelButton = () => wrapper.find({ ref: 'cancelBtn' }); const findCancelButton = () => wrapper.find({ ref: 'cancelBtn' });
const findProtocolDropdown = () => wrapper.find(GlDropdown); const findProtocolDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findCheckbox = name => const findCheckbox = name =>
wrapper.findAll(GlFormCheckbox).wrappers.find(x => x.text() === name); wrapper.findAll(GlFormCheckbox).wrappers.find(x => x.text() === name);
const findHost = () => wrapper.find('#fluentd-host'); const findHost = () => wrapper.find('#fluentd-host');
......
spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import IngressModsecuritySettings from '~/clusters/components/ingress_modsecurity_settings.vue'; import IngressModsecuritySettings from '~/clusters/components/ingress_modsecurity_settings.vue';
import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants'; import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants';
import { GlAlert, GlToggle, GlDropdown } from '@gitlab/ui'; import { GlAlert, GlToggle, GlDeprecatedDropdown } from '@gitlab/ui';
import eventHub from '~/clusters/event_hub'; import eventHub from '~/clusters/event_hub';
const { UPDATING } = APPLICATION_STATUS; const { UPDATING } = APPLICATION_STATUS;
...@@ -31,7 +31,7 @@ describe('IngressModsecuritySettings', () => { ...@@ -31,7 +31,7 @@ describe('IngressModsecuritySettings', () => {
const findSaveButton = () => wrapper.find('.btn-success'); const findSaveButton = () => wrapper.find('.btn-success');
const findCancelButton = () => wrapper.find('[variant="secondary"]'); const findCancelButton = () => wrapper.find('[variant="secondary"]');
const findModSecurityToggle = () => wrapper.find(GlToggle); const findModSecurityToggle = () => wrapper.find(GlToggle);
const findModSecurityDropdown = () => wrapper.find(GlDropdown); const findModSecurityDropdown = () => wrapper.find(GlDeprecatedDropdown);
describe('when ingress is installed', () => { describe('when ingress is installed', () => {
beforeEach(() => { beforeEach(() => {
......
spec/frontend/clusters/components/knative_domain_editor_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdownItem } from '@gitlab/ui';
import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue'; import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
import LoadingButton from '~/vue_shared/components/loading_button.vue'; import LoadingButton from '~/vue_shared/components/loading_button.vue';
import { APPLICATION_STATUS } from '~/clusters/constants'; import { APPLICATION_STATUS } from '~/clusters/constants';
...@@ -113,7 +113,7 @@ describe('KnativeDomainEditor', () => { ...@@ -113,7 +113,7 @@ describe('KnativeDomainEditor', () => {
createComponent({ knative: { ...knative, availableDomains: [newDomain] } }); createComponent({ knative: { ...knative, availableDomains: [newDomain] } });
jest.spyOn(wrapper.vm, 'selectDomain'); jest.spyOn(wrapper.vm, 'selectDomain');
wrapper.find(GlDropdownItem).vm.$emit('click'); wrapper.find(GlDeprecatedDropdownItem).vm.$emit('click');
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.vm.selectDomain).toHaveBeenCalledWith(newDomain); expect(wrapper.vm.selectDomain).toHaveBeenCalledWith(newDomain);
......
spec/frontend/clusters/services/crossplane_provider_stack_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem, GlIcon } from '@gitlab/ui'; import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue'; import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue';
describe('CrossplaneProviderStack component', () => { describe('CrossplaneProviderStack component', () => {
...@@ -37,7 +37,7 @@ describe('CrossplaneProviderStack component', () => { ...@@ -37,7 +37,7 @@ describe('CrossplaneProviderStack component', () => {
createComponent({ crossplane }); createComponent({ crossplane });
}); });
const findDropdownElements = () => wrapper.findAll(GlDropdownItem); const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findFirstDropdownElement = () => findDropdownElements().at(0); const findFirstDropdownElement = () => findDropdownElements().at(0);
afterEach(() => { afterEach(() => {
......
spec/frontend/confidential_merge_request/components/dropdown_spec.js
View file @ c39f47af
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdownItem } from '@gitlab/ui';
import Dropdown from '~/confidential_merge_request/components/dropdown.vue'; import Dropdown from '~/confidential_merge_request/components/dropdown.vue';
let vm; let vm;
...@@ -30,7 +30,7 @@ describe('Confidential merge request project dropdown component', () => { ...@@ -30,7 +30,7 @@ describe('Confidential merge request project dropdown component', () => {
}, },
]); ]);
expect(vm.findAll(GlDropdownItem).length).toBe(2); expect(vm.findAll(GlDeprecatedDropdownItem).length).toBe(2);
}); });
it('renders selected project icon', () => { it('renders selected project icon', () => {
......
spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
View file @ c39f47af
...@@ -4,7 +4,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; ...@@ -4,7 +4,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import createStore from '~/deploy_freeze/store'; import createStore from '~/deploy_freeze/store';
import { mockTimezoneData } from '../mock_data'; import { mockTimezoneData } from '../mock_data';
import { GlDropdownItem, GlNewDropdown } from '@gitlab/ui'; import { GlDeprecatedDropdownItem, GlNewDropdown } from '@gitlab/ui';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
...@@ -30,8 +30,8 @@ describe('Deploy freeze timezone dropdown', () => { ...@@ -30,8 +30,8 @@ describe('Deploy freeze timezone dropdown', () => {
wrapper.setData({ searchTerm }); wrapper.setData({ searchTerm });
}; };
const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem); const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findDropdownItemByIndex = index => wrapper.findAll(GlDropdownItem).at(index); const findDropdownItemByIndex = index => wrapper.findAll(GlDeprecatedDropdownItem).at(index);
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
......
spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue'; import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import mockAllVersions from './mock_data/all_versions'; import mockAllVersions from './mock_data/all_versions';
const LATEST_VERSION_ID = 3; const LATEST_VERSION_ID = 3;
...@@ -75,7 +75,9 @@ describe('Design management design version dropdown component', () => { ...@@ -75,7 +75,9 @@ describe('Design management design version dropdown component', () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version'); expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(
'Showing Latest Version',
);
}); });
}); });
...@@ -83,7 +85,9 @@ describe('Design management design version dropdown component', () => { ...@@ -83,7 +85,9 @@ 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(GlDropdown).attributes('text')).toBe('Showing Latest Version'); expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(
'Showing Latest Version',
);
}); });
}); });
...@@ -91,7 +95,7 @@ describe('Design management design version dropdown component', () => { ...@@ -91,7 +95,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(GlDropdown).attributes('text')).toBe(`Showing Version #1`); expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(`Showing Version #1`);
}); });
}); });
...@@ -99,7 +103,9 @@ describe('Design management design version dropdown component', () => { ...@@ -99,7 +103,9 @@ 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(GlDropdown).attributes('text')).toBe('Showing Latest Version'); expect(wrapper.find(GlDeprecatedDropdown).attributes('text')).toBe(
'Showing Latest Version',
);
}); });
}); });
...@@ -107,7 +113,9 @@ describe('Design management design version dropdown component', () => { ...@@ -107,7 +113,9 @@ describe('Design management design version dropdown component', () => {
createComponent(); createComponent();
return wrapper.vm.$nextTick().then(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length); expect(wrapper.findAll(GlDeprecatedDropdownItem)).toHaveLength(
wrapper.vm.allVersions.length,
);
}); });
}); });
}); });
......
spec/frontend/error_tracking/components/error_tracking_list_spec.js
View file @ c39f47af
import { createLocalVue, mount } from '@vue/test-utils'; import { createLocalVue, mount } from '@vue/test-utils';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { GlEmptyState, GlLoadingIcon, GlFormInput, GlPagination, GlDropdown } from '@gitlab/ui'; import {
GlEmptyState,
GlLoadingIcon,
GlFormInput,
GlPagination,
GlDeprecatedDropdown,
} from '@gitlab/ui';
import stubChildren from 'helpers/stub_children'; import stubChildren from 'helpers/stub_children';
import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue'; import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue'; import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue';
...@@ -18,19 +24,19 @@ describe('ErrorTrackingList', () => { ...@@ -18,19 +24,19 @@ describe('ErrorTrackingList', () => {
const findErrorListTable = () => wrapper.find('table'); const findErrorListTable = () => wrapper.find('table');
const findErrorListRows = () => wrapper.findAll('tbody tr'); const findErrorListRows = () => wrapper.findAll('tbody tr');
const dropdownsArray = () => wrapper.findAll(GlDropdown); const dropdownsArray = () => wrapper.findAll(GlDeprecatedDropdown);
const findRecentSearchesDropdown = () => const findRecentSearchesDropdown = () =>
dropdownsArray() dropdownsArray()
.at(0) .at(0)
.find(GlDropdown); .find(GlDeprecatedDropdown);
const findStatusFilterDropdown = () => const findStatusFilterDropdown = () =>
dropdownsArray() dropdownsArray()
.at(1) .at(1)
.find(GlDropdown); .find(GlDeprecatedDropdown);
const findSortDropdown = () => const findSortDropdown = () =>
dropdownsArray() dropdownsArray()
.at(2) .at(2)
.find(GlDropdown); .find(GlDeprecatedDropdown);
const findLoadingIcon = () => wrapper.find(GlLoadingIcon); const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findPagination = () => wrapper.find(GlPagination); const findPagination = () => wrapper.find(GlPagination);
const findErrorActions = () => wrapper.find(ErrorTrackingActions); const findErrorActions = () => wrapper.find(ErrorTrackingActions);
...@@ -128,8 +134,8 @@ describe('ErrorTrackingList', () => { ...@@ -128,8 +134,8 @@ describe('ErrorTrackingList', () => {
mountComponent({ mountComponent({
stubs: { stubs: {
GlTable: false, GlTable: false,
GlDropdown: false, GlDeprecatedDropdown: false,
GlDropdownItem: false, GlDeprecatedDropdownItem: false,
GlLink: false, GlLink: false,
}, },
}); });
...@@ -199,8 +205,8 @@ describe('ErrorTrackingList', () => { ...@@ -199,8 +205,8 @@ describe('ErrorTrackingList', () => {
mountComponent({ mountComponent({
stubs: { stubs: {
GlTable: false, GlTable: false,
GlDropdown: false, GlDeprecatedDropdown: false,
GlDropdownItem: false, GlDeprecatedDropdownItem: false,
}, },
}); });
}); });
...@@ -335,8 +341,8 @@ describe('ErrorTrackingList', () => { ...@@ -335,8 +341,8 @@ describe('ErrorTrackingList', () => {
beforeEach(() => { beforeEach(() => {
mountComponent({ mountComponent({
stubs: { stubs: {
GlDropdown: false, GlDeprecatedDropdown: false,
GlDropdownItem: false, GlDeprecatedDropdownItem: false,
}, },
}); });
}); });
......
spec/frontend/error_tracking_settings/components/project_dropdown_spec.js
View file @ c39f47af
import { pick, clone } from 'lodash'; import { pick, clone } from 'lodash';
import Vuex from 'vuex'; import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils'; import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import ProjectDropdown from '~/error_tracking_settings/components/project_dropdown.vue'; import ProjectDropdown from '~/error_tracking_settings/components/project_dropdown.vue';
import { defaultProps, projectList, staleProject } from '../mock'; import { defaultProps, projectList, staleProject } from '../mock';
...@@ -43,7 +43,7 @@ describe('error tracking settings project dropdown', () => { ...@@ -43,7 +43,7 @@ describe('error tracking settings project dropdown', () => {
describe('empty project list', () => { describe('empty project list', () => {
it('renders the dropdown', () => { it('renders the dropdown', () => {
expect(wrapper.find('#project-dropdown').exists()).toBeTruthy(); expect(wrapper.find('#project-dropdown').exists()).toBeTruthy();
expect(wrapper.find(GlDropdown).exists()).toBeTruthy(); expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeTruthy();
}); });
it('shows helper text', () => { it('shows helper text', () => {
...@@ -58,8 +58,8 @@ describe('error tracking settings project dropdown', () => { ...@@ -58,8 +58,8 @@ describe('error tracking settings project dropdown', () => {
}); });
it('does not contain any dropdown items', () => { it('does not contain any dropdown items', () => {
expect(wrapper.find(GlDropdownItem).exists()).toBeFalsy(); expect(wrapper.find(GlDeprecatedDropdownItem).exists()).toBeFalsy();
expect(wrapper.find(GlDropdown).props('text')).toBe('No projects available'); expect(wrapper.find(GlDeprecatedDropdown).props('text')).toBe('No projects available');
}); });
}); });
...@@ -72,12 +72,12 @@ describe('error tracking settings project dropdown', () => { ...@@ -72,12 +72,12 @@ describe('error tracking settings project dropdown', () => {
it('renders the dropdown', () => { it('renders the dropdown', () => {
expect(wrapper.find('#project-dropdown').exists()).toBeTruthy(); expect(wrapper.find('#project-dropdown').exists()).toBeTruthy();
expect(wrapper.find(GlDropdown).exists()).toBeTruthy(); expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeTruthy();
}); });
it('contains a number of dropdown items', () => { it('contains a number of dropdown items', () => {
expect(wrapper.find(GlDropdownItem).exists()).toBeTruthy(); expect(wrapper.find(GlDeprecatedDropdownItem).exists()).toBeTruthy();
expect(wrapper.findAll(GlDropdownItem).length).toBe(2); expect(wrapper.findAll(GlDeprecatedDropdownItem).length).toBe(2);
}); });
}); });
......
spec/frontend/logs/components/environment_logs_spec.js
View file @ c39f47af
import { GlSprintf, GlIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlSprintf, GlIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import EnvironmentLogs from '~/logs/components/environment_logs.vue'; import EnvironmentLogs from '~/logs/components/environment_logs.vue';
...@@ -124,7 +124,7 @@ describe('EnvironmentLogs', () => { ...@@ -124,7 +124,7 @@ describe('EnvironmentLogs', () => {
expect(wrapper.isVueInstance()).toBe(true); expect(wrapper.isVueInstance()).toBe(true);
expect(wrapper.isEmpty()).toBe(false); expect(wrapper.isEmpty()).toBe(false);
expect(findEnvironmentsDropdown().is(GlDropdown)).toBe(true); expect(findEnvironmentsDropdown().is(GlDeprecatedDropdown)).toBe(true);
expect(findSimpleFilters().exists()).toBe(true); expect(findSimpleFilters().exists()).toBe(true);
expect(findLogControlButtons().exists()).toBe(true); expect(findLogControlButtons().exists()).toBe(true);
...@@ -167,7 +167,7 @@ describe('EnvironmentLogs', () => { ...@@ -167,7 +167,7 @@ describe('EnvironmentLogs', () => {
it('displays a disabled environments dropdown', () => { it('displays a disabled environments dropdown', () => {
expect(findEnvironmentsDropdown().attributes('disabled')).toBe('true'); expect(findEnvironmentsDropdown().attributes('disabled')).toBe('true');
expect(findEnvironmentsDropdown().findAll(GlDropdownItem).length).toBe(0); expect(findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem).length).toBe(0);
}); });
it('does not update buttons state', () => { it('does not update buttons state', () => {
...@@ -244,7 +244,7 @@ describe('EnvironmentLogs', () => { ...@@ -244,7 +244,7 @@ describe('EnvironmentLogs', () => {
}); });
it('populates environments dropdown', () => { it('populates environments dropdown', () => {
const items = findEnvironmentsDropdown().findAll(GlDropdownItem); const items = findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem);
expect(findEnvironmentsDropdown().props('text')).toBe(mockEnvName); expect(findEnvironmentsDropdown().props('text')).toBe(mockEnvName);
expect(items.length).toBe(mockEnvironments.length); expect(items.length).toBe(mockEnvironments.length);
mockEnvironments.forEach((env, i) => { mockEnvironments.forEach((env, i) => {
...@@ -254,7 +254,7 @@ describe('EnvironmentLogs', () => { ...@@ -254,7 +254,7 @@ describe('EnvironmentLogs', () => {
}); });
it('dropdown has one environment selected', () => { it('dropdown has one environment selected', () => {
const items = findEnvironmentsDropdown().findAll(GlDropdownItem); const items = findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem);
mockEnvironments.forEach((env, i) => { mockEnvironments.forEach((env, i) => {
const item = items.at(i); const item = items.at(i);
...@@ -289,7 +289,7 @@ describe('EnvironmentLogs', () => { ...@@ -289,7 +289,7 @@ describe('EnvironmentLogs', () => {
describe('when user clicks', () => { describe('when user clicks', () => {
it('environment name, trace is refreshed', () => { it('environment name, trace is refreshed', () => {
const items = findEnvironmentsDropdown().findAll(GlDropdownItem); const items = findEnvironmentsDropdown().findAll(GlDeprecatedDropdownItem);
const index = 1; // any env const index = 1; // any env
expect(dispatch).not.toHaveBeenCalledWith(`${module}/showEnvironment`, expect.anything()); expect(dispatch).not.toHaveBeenCalledWith(`${module}/showEnvironment`, expect.anything());
......
spec/frontend/logs/components/log_simple_filters_spec.js
View file @ c39f47af
import { GlIcon, GlDropdownItem } from '@gitlab/ui'; import { GlIcon, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { createStore } from '~/logs/stores'; import { createStore } from '~/logs/stores';
import { mockPods, mockPodName } from '../mock_data'; import { mockPods, mockPodName } from '../mock_data';
...@@ -17,7 +17,7 @@ describe('LogSimpleFilters', () => { ...@@ -17,7 +17,7 @@ describe('LogSimpleFilters', () => {
const findPodsNoPodsText = () => wrapper.find({ ref: 'noPodsMsg' }); const findPodsNoPodsText = () => wrapper.find({ ref: 'noPodsMsg' });
const findPodsDropdownItems = () => const findPodsDropdownItems = () =>
findPodsDropdown() findPodsDropdown()
.findAll(GlDropdownItem) .findAll(GlDeprecatedDropdownItem)
.filter(item => !item.is('[disabled]')); .filter(item => !item.is('[disabled]'));
const mockPodsLoading = () => { const mockPodsLoading = () => {
......
spec/frontend/monitoring/components/dashboard_header_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { createStore } from '~/monitoring/stores'; import { createStore } from '~/monitoring/stores';
import * as types from '~/monitoring/stores/mutation_types'; import * as types from '~/monitoring/stores/mutation_types';
import { GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui'; import { GlDeprecatedDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
import DashboardHeader from '~/monitoring/components/dashboard_header.vue'; import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue'; import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
import CreateDashboardModal from '~/monitoring/components/create_dashboard_modal.vue'; import CreateDashboardModal from '~/monitoring/components/create_dashboard_modal.vue';
...@@ -27,7 +27,7 @@ describe('Dashboard header', () => { ...@@ -27,7 +27,7 @@ describe('Dashboard header', () => {
let wrapper; let wrapper;
const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' }); const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDropdownItem); const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDeprecatedDropdownItem);
const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType); const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType);
const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' }); const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' });
const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon); const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon);
......
spec/frontend/monitoring/components/dashboards_dropdown_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem, GlIcon } from '@gitlab/ui'; import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue'; import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
...@@ -38,8 +38,8 @@ describe('DashboardsDropdown', () => { ...@@ -38,8 +38,8 @@ describe('DashboardsDropdown', () => {
}); });
} }
const findItems = () => wrapper.findAll(GlDropdownItem); const findItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findItemAt = i => wrapper.findAll(GlDropdownItem).at(i); const findItemAt = i => wrapper.findAll(GlDeprecatedDropdownItem).at(i);
const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' }); const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' });
const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' }); const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' });
const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' }); const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' });
......
spec/frontend/monitoring/components/variables/dropdown_field_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import DropdownField from '~/monitoring/components/variables/dropdown_field.vue'; import DropdownField from '~/monitoring/components/variables/dropdown_field.vue';
describe('Custom variable component', () => { describe('Custom variable component', () => {
...@@ -23,8 +23,8 @@ describe('Custom variable component', () => { ...@@ -23,8 +23,8 @@ describe('Custom variable component', () => {
}); });
}; };
const findDropdown = () => wrapper.find(GlDropdown); const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findDropdownItems = () => wrapper.findAll(GlDropdownItem); const findDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
it('renders dropdown element when all necessary props are passed', () => { it('renders dropdown element when all necessary props are passed', () => {
createShallowWrapper(); createShallowWrapper();
......
spec/frontend/pages/projects/graphs/code_coverage_spec.js
View file @ c39f47af
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 { GlAlert, GlIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlAlert, GlIcon, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { GlAreaChart } from '@gitlab/ui/dist/charts'; import { GlAreaChart } from '@gitlab/ui/dist/charts';
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
...@@ -17,7 +17,7 @@ describe('Code Coverage', () => { ...@@ -17,7 +17,7 @@ describe('Code Coverage', () => {
const findAlert = () => wrapper.find(GlAlert); const findAlert = () => wrapper.find(GlAlert);
const findAreaChart = () => wrapper.find(GlAreaChart); const findAreaChart = () => wrapper.find(GlAreaChart);
const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem); const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findFirstDropdownItem = () => findAllDropdownItems().at(0); const findFirstDropdownItem = () => findAllDropdownItems().at(0);
const findSecondDropdownItem = () => findAllDropdownItems().at(1); const findSecondDropdownItem = () => findAllDropdownItems().at(1);
...@@ -124,7 +124,7 @@ describe('Code Coverage', () => { ...@@ -124,7 +124,7 @@ describe('Code Coverage', () => {
}); });
it('renders the dropdown with all custom names as options', () => { it('renders the dropdown with all custom names as options', () => {
expect(wrapper.contains(GlDropdown)).toBeDefined(); expect(wrapper.contains(GlDeprecatedDropdown)).toBeDefined();
expect(findAllDropdownItems()).toHaveLength(codeCoverageMockData.length); expect(findAllDropdownItems()).toHaveLength(codeCoverageMockData.length);
expect(findFirstDropdownItem().text()).toBe(codeCoverageMockData[0].group_name); expect(findFirstDropdownItem().text()).toBe(codeCoverageMockData[0].group_name);
}); });
......
spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js
View file @ c39f47af
import Vuex from 'vuex'; import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils'; import { mount, createLocalVue } from '@vue/test-utils';
import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
import Tracking from '~/tracking'; import Tracking from '~/tracking';
import * as getters from '~/registry/explorer/stores/getters'; import * as getters from '~/registry/explorer/stores/getters';
import QuickstartDropdown from '~/registry/explorer/components/list_page/cli_commands.vue'; import QuickstartDropdown from '~/registry/explorer/components/list_page/cli_commands.vue';
...@@ -23,7 +23,7 @@ describe('cli_commands', () => { ...@@ -23,7 +23,7 @@ describe('cli_commands', () => {
let wrapper; let wrapper;
let store; let store;
const findDropdownButton = () => wrapper.find(GlDropdown); const findDropdownButton = () => wrapper.find(GlDeprecatedDropdown);
const findFormGroups = () => wrapper.findAll(GlFormGroup); const findFormGroups = () => wrapper.findAll(GlFormGroup);
const mountComponent = () => { const mountComponent = () => {
......
spec/frontend/repository/components/breadcrumbs_spec.js
View file @ c39f47af
import { shallowMount, RouterLinkStub } from '@vue/test-utils'; import { shallowMount, RouterLinkStub } from '@vue/test-utils';
import { GlDropdown } from '@gitlab/ui'; import { GlDeprecatedDropdown } from '@gitlab/ui';
import Breadcrumbs from '~/repository/components/breadcrumbs.vue'; import Breadcrumbs from '~/repository/components/breadcrumbs.vue';
let vm; let vm;
...@@ -61,7 +61,7 @@ describe('Repository breadcrumbs component', () => { ...@@ -61,7 +61,7 @@ describe('Repository breadcrumbs component', () => {
vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } }); vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
return vm.vm.$nextTick(() => { return vm.vm.$nextTick(() => {
expect(vm.find(GlDropdown).exists()).toBe(false); expect(vm.find(GlDeprecatedDropdown).exists()).toBe(false);
}); });
}); });
...@@ -71,7 +71,7 @@ describe('Repository breadcrumbs component', () => { ...@@ -71,7 +71,7 @@ describe('Repository breadcrumbs component', () => {
vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } }); vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
return vm.vm.$nextTick(() => { return vm.vm.$nextTick(() => {
expect(vm.find(GlDropdown).exists()).toBe(true); expect(vm.find(GlDeprecatedDropdown).exists()).toBe(true);
}); });
}); });
}); });
spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
View file @ c39f47af
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdownItem } from '@gitlab/ui';
import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue'; import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue';
const commits = [ const commits = [
...@@ -39,7 +39,7 @@ describe('Commits message dropdown component', () => { ...@@ -39,7 +39,7 @@ describe('Commits message dropdown component', () => {
wrapper.destroy(); wrapper.destroy();
}); });
const findDropdownElements = () => wrapper.findAll(GlDropdownItem); const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findFirstDropdownElement = () => findDropdownElements().at(0); const findFirstDropdownElement = () => findDropdownElements().at(0);
it('should have 3 elements in dropdown list', () => { it('should have 3 elements in dropdown list', () => {
......
spec/frontend/vue_shared/components/split_button_spec.js
View file @ c39f47af
import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import SplitButton from '~/vue_shared/components/split_button.vue'; import SplitButton from '~/vue_shared/components/split_button.vue';
...@@ -25,10 +25,10 @@ describe('SplitButton', () => { ...@@ -25,10 +25,10 @@ describe('SplitButton', () => {
}); });
}; };
const findDropdown = () => wrapper.find(GlDropdown); const findDropdown = () => wrapper.find(GlDeprecatedDropdown);
const findDropdownItem = (index = 0) => const findDropdownItem = (index = 0) =>
findDropdown() findDropdown()
.findAll(GlDropdownItem) .findAll(GlDeprecatedDropdownItem)
.at(index); .at(index);
const selectItem = index => { const selectItem = index => {
findDropdownItem(index).vm.$emit('click'); findDropdownItem(index).vm.$emit('click');
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7