Merge branch 'cngo-remove-refs-from-environment_picker' into 'master'

Remove refs from environment_picker.vue

See merge request gitlab-org/gitlab!54915

ee/app/assets/javascripts/threat_monitoring/components/environment_picker.vue

@@ -42,7 +42,6 @@ export default {
   >
     <gl-dropdown
       :id="$options.environmentFilterId"
-      ref="environmentsDropdown"
       class="gl-display-flex"
       toggle-class="gl-truncate"
       :text="environmentName"
@@ -51,16 +50,12 @@ export default {
       <gl-dropdown-item
         v-for="environment in environments"
         :key="environment.id"
-        ref="environmentsDropdownItem"
         @click="setCurrentEnvironmentId(environment.id)"
         >{{ environment.name }}</gl-dropdown-item
       >
-      <gl-dropdown-item
-        v-if="includeAll"
-        ref="environmentsDropdownItem"
-        @click="setAllEnvironments"
-        >{{ $options.ALL_ENVIRONMENT_NAME }}</gl-dropdown-item
-      >
+      <gl-dropdown-item v-if="includeAll" @click="setAllEnvironments">{{
+        $options.ALL_ENVIRONMENT_NAME
+      }}</gl-dropdown-item>
     </gl-dropdown>
   </gl-form-group>
 </template>

ee/spec/frontend/threat_monitoring/components/environment_picker_spec.js

+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import EnvironmentPicker from 'ee/threat_monitoring/components/environment_picker.vue';
 import {
@@ -25,8 +26,8 @@ describe('EnvironmentPicker component', () => {
     });
   };
-  const findEnvironmentsDropdown = () => wrapper.find({ ref: 'environmentsDropdown' });
-  const findEnvironmentsDropdownItems = () => wrapper.findAll({ ref: 'environmentsDropdownItem' });
+  const findEnvironmentsDropdown = () => wrapper.findComponent(GlDropdown);
+  const findEnvironmentsDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   afterEach(() => {
     wrapper.destroy();