Merge branch...

Merge branch 'Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/vue_merge_request_widget' into 'master'

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

See merge request gitlab-org/gitlab!41429

app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 export default {
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     commits: {
@@ -18,20 +18,20 @@ export default {
 
 <template>
   <div>
-    <gl-deprecated-dropdown
+    <gl-dropdown
       right
       text="Use an existing commit message"
       variant="link"
       class="mr-commit-dropdown"
     >
-      <gl-deprecated-dropdown-item
+      <gl-dropdown-item
         v-for="commit in commits"
         :key="commit.short_id"
         class="text-nowrap text-truncate"
         @click="$emit('input', commit.message)"
       >
         <span class="monospace mr-2">{{ commit.short_id }}</span> {{ commit.title }}
-      </gl-deprecated-dropdown-item>
-    </gl-deprecated-dropdown>
+      </gl-dropdown-item>
+    </gl-dropdown>
   </div>
 </template>

changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-vu.yml

+---
+title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/vue_merge_request_widget
+merge_request: 41429
+author: nuwe1
+type: other

ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

@@ -2,12 +2,11 @@
 /* eslint-disable vue/no-v-html */
 import {
   GlButton,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownItem,
   GlModal,
   GlSearchBoxByType,
   GlModalDirective,
-  GlIcon,
 } from '@gitlab/ui';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
@@ -16,11 +15,10 @@ import { s__, sprintf } from '~/locale';
 export default {
   components: {
     GlButton,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlModal,
     GlSearchBoxByType,
-    GlIcon,
     ReviewAppLink,
     ModalCopyButton,
   },
@@ -204,8 +202,10 @@ export default {
         <gl-button category="secondary" @click="cancel">
           {{ s__('VisualReviewApp|Cancel') }}
         </gl-button>
-        <gl-deprecated-dropdown
+        <gl-dropdown
           v-if="shouldShowChanges"
+          :text="s__('VisualReviewApp|Open review app')"
+          icon="external-link"
           dropup
           right
           split
@@ -215,23 +215,19 @@ export default {
           @click="ok"
         >
           <gl-search-box-by-type v-model.trim="changesSearchTerm" />
-          <template #button-content>
-            {{ s__('VisualReviewApp|Open review app') }}
-            <gl-icon class="fgray" name="external-link" />
-          </template>
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-for="change in filteredChanges"
             :key="change.path"
             :href="change.external_url"
             data-track-event="open_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">
             {{ s__('VisualReviewApp|No review app found or available.') }}
           </div>
-        </gl-deprecated-dropdown>
+        </gl-dropdown>
         <review-app-link
           v-else
           :display="viewAppDisplay"

ee/spec/frontend/vue_mr_widget/components/visual_review_app_spec.js

 import { mount } from '@vue/test-utils';
 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 ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
@@ -132,7 +132,7 @@ describe('Visual Review App Link', () => {
         it('with review app split dropdown', () => {
           expect(
             wrapper
-              .find(GlDeprecatedDropdown)
+              .find(GlDropdown)
               .find(`a[href='${propsData.link}']`)
               .exists(),
           ).toEqual(true);
@@ -141,7 +141,7 @@ describe('Visual Review App Link', () => {
         it('contains a list of changed pages', () => {
           expect(
             wrapper
-              .find(GlDeprecatedDropdown)
+              .find(GlDropdown)
               .find(`a[href='${propsData.link}/example-path']`)
               .exists(),
           ).toEqual(true);

spec/frontend/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js

 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';
 
 const commits = [
@@ -39,7 +39,7 @@ describe('Commits message dropdown component', () => {
     wrapper.destroy();
   });
 
-  const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
+  const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
   const findFirstDropdownElement = () => findDropdownElements().at(0);
 
   it('should have 3 elements in dropdown list', () => {