Clear Environment Search in CI/CD Variables

By clearing the search, it makes it easier for users to pick existing
environments, as they are already listed, but filtered out by the
current value.

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

@@ -20,7 +20,7 @@ export default {
   },
   data() {
     return {
-      searchTerm: this.value || '',
+      searchTerm: '',
     };
   },
   computed: {
@@ -38,11 +38,6 @@ export default {
       );
     },
   },
-  watch: {
-    value(newVal) {
-      this.searchTerm = newVal;
-    },
-  },
   methods: {
     selectEnvironment(selected) {
       this.$emit('selectEnvironment', selected);
@@ -55,11 +50,14 @@ export default {
     isSelected(env) {
       return this.value === env;
     },
+    clearSearch() {
+      this.searchTerm = '';
+    },
   },
 };
 </script>
 <template>
-  <gl-dropdown :text="value">
+  <gl-dropdown :text="value" @show="clearSearch">
     <gl-search-box-by-type v-model.trim="searchTerm" data-testid="ci-environment-search" />
     <gl-dropdown-item
       v-for="environment in filteredResults"

changelogs/unreleased/preload-environments-for-ci-cd-variables.yml

+---
+title: Clear Environment Search in CI/CD Variables
+merge_request: 54626
+author:
+type: changed

spec/features/project_variables_spec.rb

@@ -24,7 +24,6 @@ RSpec.describe 'Project variables', :js do
       find('[data-qa-selector="ci_variable_key_field"] input').set('akey')
       find('#ci-variable-value').set('akey_value')
       find('[data-testid="environment-scope"]').click
-      find_button('clear').click
       find('[data-testid="ci-environment-search"]').set('review/*')
       find('[data-testid="create-wildcard-button"]').click
 

spec/frontend/ci_variable_list/components/ci_environments_dropdown_spec.js

-import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
@@ -10,6 +10,9 @@ describe('Ci environments dropdown', () => {
   let wrapper;
   let store;
 
+  const enterSearchTerm = (value) =>
+    wrapper.find('[data-testid="ci-environment-search"]').setValue(value);
+
   const createComponent = (term) => {
     store = new Vuex.Store({
       getters: {
@@ -24,11 +27,12 @@ describe('Ci environments dropdown', () => {
         value: term,
       },
     });
+    enterSearchTerm(term);
   };
 
-  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
-  const findDropdownItemByIndex = (index) => wrapper.findAll(GlDropdownItem).at(index);
-  const findActiveIconByIndex = (index) => findDropdownItemByIndex(index).find(GlIcon);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
+  const findActiveIconByIndex = (index) => findDropdownItemByIndex(index).findComponent(GlIcon);
 
   afterEach(() => {
     wrapper.destroy();
@@ -68,8 +72,9 @@ describe('Ci environments dropdown', () => {
   });
 
   describe('Environments found', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       createComponent('prod');
+      await wrapper.vm.$nextTick();
     });
 
     it('renders only the environment searched for', () => {
@@ -84,21 +89,29 @@ describe('Ci environments dropdown', () => {
     });
 
     it('should not display empty results message', () => {
-      expect(wrapper.find({ ref: 'noMatchingResults' }).exists()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'noMatchingResults' }).exists()).toBe(false);
     });
 
     it('should display active checkmark if active', () => {
       expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(false);
     });
 
+    it('should clear the search term when showing the dropdown', () => {
+      wrapper.findComponent(GlDropdown).trigger('click');
+
+      expect(wrapper.find('[data-testid="ci-environment-search"]').text()).toBe('');
+    });
+
     describe('Custom events', () => {
       it('should emit selectEnvironment if an environment is clicked', () => {
         findDropdownItemByIndex(0).vm.$emit('click');
         expect(wrapper.emitted('selectEnvironment')).toEqual([['prod']]);
       });
 
-      it('should emit createClicked if an environment is clicked', () => {
+      it('should emit createClicked if an environment is clicked', async () => {
         createComponent('newscope');
+
+        await wrapper.vm.$nextTick();
         findDropdownItemByIndex(1).vm.$emit('click');
         expect(wrapper.emitted('createClicked')).toEqual([['newscope']]);
       });