Commit bbfca76f authored by Marvin Karegyeya's avatar Marvin Karegyeya Committed by Scott Hampton

Replace GlDeprecatedDropdown with GlDropdown in app/assets/javascripts/vue_ merge_request_widget

parent f47f42c5
<script> <script>
import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui'; import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
export default { export default {
components: { components: {
GlDeprecatedDropdown, GlDropdown,
GlDeprecatedDropdownItem, GlDropdownItem,
}, },
props: { props: {
commits: { commits: {
...@@ -18,20 +18,20 @@ export default { ...@@ -18,20 +18,20 @@ export default {
<template> <template>
<div> <div>
<gl-deprecated-dropdown <gl-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-deprecated-dropdown-item <gl-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-deprecated-dropdown-item> </gl-dropdown-item>
</gl-deprecated-dropdown> </gl-dropdown>
</div> </div>
</template> </template>
---
title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/vue_merge_request_widget
merge_request: 41429
author: nuwe1
type: other
...@@ -2,12 +2,11 @@ ...@@ -2,12 +2,11 @@
/* eslint-disable vue/no-v-html */ /* eslint-disable vue/no-v-html */
import { import {
GlButton, GlButton,
GlDeprecatedDropdown, GlDropdown,
GlDeprecatedDropdownItem, GlDropdownItem,
GlModal, GlModal,
GlSearchBoxByType, GlSearchBoxByType,
GlModalDirective, GlModalDirective,
GlIcon,
} from '@gitlab/ui'; } from '@gitlab/ui';
import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue'; import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
...@@ -16,11 +15,10 @@ import { s__, sprintf } from '~/locale'; ...@@ -16,11 +15,10 @@ import { s__, sprintf } from '~/locale';
export default { export default {
components: { components: {
GlButton, GlButton,
GlDeprecatedDropdown, GlDropdown,
GlDeprecatedDropdownItem, GlDropdownItem,
GlModal, GlModal,
GlSearchBoxByType, GlSearchBoxByType,
GlIcon,
ReviewAppLink, ReviewAppLink,
ModalCopyButton, ModalCopyButton,
}, },
...@@ -204,8 +202,10 @@ export default { ...@@ -204,8 +202,10 @@ export default {
<gl-button category="secondary" @click="cancel"> <gl-button category="secondary" @click="cancel">
{{ s__('VisualReviewApp|Cancel') }} {{ s__('VisualReviewApp|Cancel') }}
</gl-button> </gl-button>
<gl-deprecated-dropdown <gl-dropdown
v-if="shouldShowChanges" v-if="shouldShowChanges"
:text="s__('VisualReviewApp|Open review app')"
icon="external-link"
dropup dropup
right right
split split
...@@ -215,23 +215,19 @@ export default { ...@@ -215,23 +215,19 @@ export default {
@click="ok" @click="ok"
> >
<gl-search-box-by-type v-model.trim="changesSearchTerm" /> <gl-search-box-by-type v-model.trim="changesSearchTerm" />
<template #button-content> <gl-dropdown-item
{{ s__('VisualReviewApp|Open review app') }}
<gl-icon class="fgray" name="external-link" />
</template>
<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-deprecated-dropdown-item >{{ change.path }}</gl-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-deprecated-dropdown> </gl-dropdown>
<review-app-link <review-app-link
v-else v-else
:display="viewAppDisplay" :display="viewAppDisplay"
......
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 { GlButton, GlDeprecatedDropdown, GlModal } from '@gitlab/ui'; import { GlButton, GlDropdown, 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(GlDeprecatedDropdown) .find(GlDropdown)
.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(GlDeprecatedDropdown) .find(GlDropdown)
.find(`a[href='${propsData.link}/example-path']`) .find(`a[href='${propsData.link}/example-path']`)
.exists(), .exists(),
).toEqual(true); ).toEqual(true);
......
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlDeprecatedDropdownItem } from '@gitlab/ui'; import { GlDropdownItem } 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(GlDeprecatedDropdownItem); const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
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', () => {
......
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