Merge branch...

Merge branch 'Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/confidential_merge_request/components/dropdown.vue' into 'master'

Gldeprecateddropdown to Gldropdown in confidential_ merge_ request/components/dropdown.vue

See merge request gitlab-org/gitlab!41416

app/assets/javascripts/confidential_merge_request/components/dropdown.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
-    GlIcon,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     projects: {
@@ -37,25 +36,15 @@ export default {
 </script>
 
 <template>
-  <gl-deprecated-dropdown toggle-class="d-flex align-items-center w-100" class="w-100">
-    <template #button-content>
-      <span class="str-truncated-100 mr-2">
-        <gl-icon name="lock" />
-        {{ dropdownText }}
-      </span>
-      <gl-icon name="chevron-down" class="ml-auto" />
-    </template>
-    <gl-deprecated-dropdown-item
+  <gl-dropdown block icon="lock" :text="dropdownText">
+    <gl-dropdown-item
       v-for="project in projects"
       :key="project.id"
+      :is-check-item="true"
+      :is-checked="project.id === selectedProject.id"
       @click="selectProject(project)"
     >
-      <gl-icon
-        name="mobile-issue-close"
-        :class="{ icon: project.id !== selectedProject.id }"
-        class="js-active-project-check"
-      />
-      <span class="ml-1">{{ project.name }}</span>
-    </gl-deprecated-dropdown-item>
-  </gl-deprecated-dropdown>
+      {{ project.name }}
+    </gl-dropdown-item>
+  </gl-dropdown>
 </template>

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

+---
+title: Replace-GlDeprecatedDropdown-with-GlDropdown-in-app/assets/javascripts/confidential_merge_request/components/dropdown.vue
+merge_request: 41416
+author: nuwe1
+type: other

spec/frontend/confidential_merge_request/components/dropdown_spec.js

 import { mount } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import Dropdown from '~/confidential_merge_request/components/dropdown.vue';
 
 let vm;
@@ -30,27 +30,18 @@ describe('Confidential merge request project dropdown component', () => {
       },
     ]);
 
-    expect(vm.findAll(GlDeprecatedDropdownItem).length).toBe(2);
+    expect(vm.findAll(GlDropdownItem).length).toBe(2);
   });
 
-  it('renders selected project icon', () => {
-    factory([
-      {
-        id: 1,
-        name: 'test',
-      },
-      {
-        id: 2,
-        name: 'test 2',
-      },
-    ]);
+  it('shows lock icon', () => {
+    factory();
+
+    expect(vm.find(GlDropdown).props('icon')).toBe('lock');
+  });
+
+  it('has dropdown text', () => {
+    factory();
 
-    expect(vm.find('.js-active-project-check').classes()).not.toContain('icon');
-    expect(
-      vm
-        .findAll('.js-active-project-check')
-        .at(1)
-        .classes(),
-    ).toContain('icon');
+    expect(vm.find(GlDropdown).props('text')).toBe('Select private project');
   });
 });