1 files changed, 25 insertions, 14 deletions

diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_environments_dropdown.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_environments_dropdown.vue
index 09b02068388..a25f871ac92 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_environments_dropdown.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_environments_dropdown.vue
@@ -24,6 +24,10 @@ export default {
       type: Array,
       required: true,
     },
+    hasEnvScopeQuery: {
+      type: Boolean,
+      required: true,
+    },
     selectedEnvironmentScope: {
       type: String,
       required: false,
@@ -32,6 +36,7 @@ export default {
   },
   data() {
     return {
+      isDropdownShown: false,
       selectedEnvironment: '',
       searchTerm: '',
     };
@@ -46,17 +51,20 @@ export default {
         return environment.toLowerCase().includes(lowerCasedSearchTerm);
       });
     },
-    isEnvScopeLimited() {
-      return this.glFeatures?.ciLimitEnvironmentScope;
+    isDropdownLoading() {
+      return this.areEnvironmentsLoading && this.hasEnvScopeQuery && !this.isDropdownShown;
+    },
+    isDropdownSearching() {
+      return this.areEnvironmentsLoading && this.hasEnvScopeQuery && this.isDropdownShown;
     },
     searchedEnvironments() {
-      // If FF is enabled, search query will be fired so this component will already
-      // receive filtered environments during the refetch.
-      // If FF is disabled, search the existing list of environments in the frontend
-      let filtered = this.isEnvScopeLimited ? this.environments : this.filteredEnvironments;
+      // If hasEnvScopeQuery (applies only to projects for now), search query will be fired so this
+      // component will already receive filtered environments during the refetch.
+      // Otherwise (applies to groups), search the existing list of environments in the frontend
+      let filtered = this.hasEnvScopeQuery ? this.environments : this.filteredEnvironments;
 
       // If there is no search term, make sure to include *
-      if (this.isEnvScopeLimited && !this.searchTerm) {
+      if (this.hasEnvScopeQuery && !this.searchTerm) {
         filtered = uniq([...filtered, '*']);
       }
 
@@ -65,15 +73,12 @@ export default {
         text: environment,
       }));
     },
-    shouldShowSearchLoading() {
-      return this.areEnvironmentsLoading && this.isEnvScopeLimited;
-    },
     shouldRenderCreateButton() {
       return this.searchTerm && !this.environments.includes(this.searchTerm);
     },
     shouldRenderDivider() {
       return (
-        (this.isEnvScopeLimited || this.shouldRenderCreateButton) && !this.shouldShowSearchLoading
+        (this.hasEnvScopeQuery || this.shouldRenderCreateButton) && !this.areEnvironmentsLoading
       );
     },
     environmentScopeLabel() {
@@ -84,7 +89,7 @@ export default {
     debouncedSearch: debounce(function debouncedSearch(searchTerm) {
       const newSearchTerm = searchTerm.trim();
       this.searchTerm = newSearchTerm;
-      if (this.isEnvScopeLimited) {
+      if (this.hasEnvScopeQuery) {
         this.$emit('search-environment-scope', newSearchTerm);
       }
     }, 500),
@@ -96,6 +101,9 @@ export default {
       this.$emit('create-environment-scope', this.searchTerm);
       this.selectEnvironment(this.searchTerm);
     },
+    toggleDropdownShown(isShown) {
+      this.isDropdownShown = isShown;
+    },
   },
   ENVIRONMENT_QUERY_LIMIT,
   i18n: {
@@ -111,14 +119,17 @@ export default {
     block
     searchable
     :items="searchedEnvironments"
-    :searching="shouldShowSearchLoading"
+    :loading="isDropdownLoading"
+    :searching="isDropdownSearching"
     :toggle-text="environmentScopeLabel"
     @search="debouncedSearch"
     @select="selectEnvironment"
+    @shown="toggleDropdownShown(true)"
+    @hidden="toggleDropdownShown(false)"
   >
     <template #footer>
       <gl-dropdown-divider v-if="shouldRenderDivider" />
-      <div v-if="isEnvScopeLimited" data-testid="max-envs-notice">
+      <div v-if="hasEnvScopeQuery" data-testid="max-envs-notice">
         <gl-dropdown-item class="gl-list-style-none" disabled>
           <gl-sprintf :message="$options.i18n.maxEnvsNote" class="gl-font-sm">
             <template #limit>