Merge branch...

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

Replace GlDeprecatedDropdown in app/assets/javascripts/ci variable list

See merge request gitlab-org/gitlab!41413

app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue

 <script>
-import {
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlDeprecatedDropdownDivider,
-  GlSearchBoxByType,
-  GlIcon,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import { __, sprintf } from '~/locale';
 
 export default {
   name: 'CiEnvironmentsDropdown',
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
-    GlDeprecatedDropdownDivider,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
     GlSearchBoxByType,
-    GlIcon,
   },
   props: {
     value: {
@@ -66,28 +59,25 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-dropdown :text="value">
+  <gl-dropdown :text="value">
     <gl-search-box-by-type v-model.trim="searchTerm" class="gl-m-3" />
-    <gl-deprecated-dropdown-item
+    <gl-dropdown-item
       v-for="environment in filteredResults"
       :key="environment"
+      :is-checked="isSelected(environment)"
+      is-check-item
       @click="selectEnvironment(environment)"
     >
-      <gl-icon
-        :class="{ invisible: !isSelected(environment) }"
-        name="mobile-issue-close"
-        class="vertical-align-middle"
-      />
       {{ environment }}
-    </gl-deprecated-dropdown-item>
-    <gl-deprecated-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+    </gl-dropdown-item>
+    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
       __('No matching results')
-    }}</gl-deprecated-dropdown-item>
+    }}</gl-dropdown-item>
     <template v-if="shouldRenderCreateButton">
-      <gl-deprecated-dropdown-divider />
-      <gl-deprecated-dropdown-item @click="createClicked">
+      <gl-dropdown-divider />
+      <gl-dropdown-item @click="createClicked">
         {{ composedCreateButtonLabel }}
-      </gl-deprecated-dropdown-item>
+      </gl-dropdown-item>
     </template>
-  </gl-deprecated-dropdown>
+  </gl-dropdown>
 </template>

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

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

spec/frontend/ci_variable_list/components/ci_enviroments_dropdown_spec.js

 import Vuex from 'vuex';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
+import { mount, createLocalVue } from '@vue/test-utils';
+import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
 
 const localVue = createLocalVue();
@@ -17,7 +17,7 @@ describe('Ci environments dropdown', () => {
       },
     });
 
-    wrapper = shallowMount(CiEnvironmentsDropdown, {
+    wrapper = mount(CiEnvironmentsDropdown, {
       store,
       localVue,
       propsData: {
@@ -26,9 +26,9 @@ describe('Ci environments dropdown', () => {
     });
   };
 
-  const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedDropdownItem);
-  const findDropdownItemByIndex = index => wrapper.findAll(GlDeprecatedDropdownItem).at(index);
-  const findActiveIconByIndex = index => wrapper.findAll(GlIcon).at(index);
+  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findDropdownItemByIndex = index => wrapper.findAll(GlDropdownItem).at(index);
+  const findActiveIconByIndex = index => findDropdownItemByIndex(index).find(GlIcon);
 
   afterEach(() => {
     wrapper.destroy();
@@ -61,6 +61,10 @@ describe('Ci environments dropdown', () => {
       expect(findDropdownItemByIndex(1).text()).toBe('prod');
       expect(findDropdownItemByIndex(2).text()).toBe('staging');
     });
+
+    it('should not display active checkmark on the inactive stage', () => {
+      expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(true);
+    });
   });
 
   describe('Enviroments found', () => {
@@ -84,7 +88,7 @@ describe('Ci environments dropdown', () => {
     });
 
     it('should display active checkmark if active', () => {
-      expect(findActiveIconByIndex(0).classes('invisible')).toBe(false);
+      expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(false);
     });
 
     describe('Custom events', () => {