Use GlCollapsibleListbox in ci_environments_dropdown.vue

Resolves #384285 (closed)

What does this MR do and why?

This MR changes the Vue component used to select environment scope of CI environment variables from GlDropdown to GlCollapsibleListbox.

Screenshots or screen recordings

	before	after
Closed
Open
With selection
With search query

Difference in looks

The dropdown is not occupying the whole width like before. This is because GlCollapsibleList doesn't (yet?) support specifying additional classes for the toggle button text (it only supports toggleClass which goes to the button.gl-button-dropdown-toggle).

Why?

Difference in behavior

The dropdown does not clear the search term when it is closed nor when a new environment is created. This is because GlCollapsibleList does not support programmatically clearing the search input.

before	after
Screen_Recording_2022-12-26_at_4.58.01_PM	Screen_Recording_2022-12-26_at_5.15.04_PM

How to set up and validate locally

1. Go to the CI settings page of a project. For example: http://localhost:3000/flightjs/Flight/-/settings/ci_cd
2. Expand Variables section then click on Add variable
3. Validate that you can:
   1. Select an existing environment
   2. Search through existing environments
   3. Create a new environment with a search term that doesn't correspond to any existing environment

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

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

 <script>
-import { GlDropdown, GlDropdownItem, GlDropdownDivider, GlSearchBoxByType } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownDivider,
+  GlSearchBoxByType,
+  GlCollapsibleListbox,
+} from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import { convertEnvironmentScope } from '../utils';
 
@@ -10,6 +16,7 @@ export default {
     GlDropdownItem,
     GlDropdownDivider,
     GlSearchBoxByType,
+    GlCollapsibleListbox,
   },
   props: {
     environments: {
@@ -24,6 +31,7 @@ export default {
   },
   data() {
     return {
+      selectedEnvironment: '',
       searchTerm: '',
     };
   },
@@ -37,6 +45,18 @@ export default {
         return environment.toLowerCase().includes(lowerCasedSearchTerm);
       });
     },
+    environmentOptions() {
+      const lowerCasedSearchTerm = this.searchTerm.toLowerCase();
+
+      return this.environments
+        .filter((environment) => {
+          return environment.toLowerCase().includes(lowerCasedSearchTerm);
+        })
+        .map((environment) => ({
+          value: environment,
+          text: environment,
+        }));
+    },
     shouldRenderCreateButton() {
       return this.searchTerm && !this.environments.includes(this.searchTerm);
     },
@@ -66,25 +86,35 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown :text="environmentScopeLabel" @show="clearSearch">
-    <gl-search-box-by-type v-model.trim="searchTerm" data-testid="ci-environment-search" />
-    <gl-dropdown-item
-      v-for="environment in filteredEnvironments"
-      :key="environment"
-      :is-checked="isSelected(environment)"
-      is-check-item
-      @click="selectEnvironment(environment)"
-    >
-      {{ convertEnvironmentScopeValue(environment) }}
-    </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredEnvironments.length" ref="noMatchingResults">{{
-      __('No matching results')
-    }}</gl-dropdown-item>
-    <template v-if="shouldRenderCreateButton">
-      <gl-dropdown-divider />
-      <gl-dropdown-item data-testid="create-wildcard-button" @click="createEnvironmentScope">
-        {{ composedCreateButtonLabel }}
+  <div>
+    <gl-dropdown :text="environmentScopeLabel" @show="clearSearch">
+      <gl-search-box-by-type v-model.trim="searchTerm" data-testid="ci-environment-search" />
+      <gl-dropdown-item
+        v-for="environment in filteredEnvironments"
+        :key="environment"
+        :is-checked="isSelected(environment)"
+        is-check-item
+        @click="selectEnvironment(environment)"
+      >
+        {{ convertEnvironmentScopeValue(environment) }}
       </gl-dropdown-item>
-    </template>
-  </gl-dropdown>
+      <gl-dropdown-item v-if="!filteredEnvironments.length" ref="noMatchingResults">{{
+        __('No matching results')
+      }}</gl-dropdown-item>
+      <template v-if="shouldRenderCreateButton">
+        <gl-dropdown-divider />
+        <gl-dropdown-item data-testid="create-wildcard-button" @click="createEnvironmentScope">
+          {{ composedCreateButtonLabel }}
+        </gl-dropdown-item>
+      </template>
+    </gl-dropdown>
+    <gl-collapsible-listbox
+      v-model="selectedEnvironment"
+      searchable
+      :items="environmentOptions"
+      :toggle-text="environmentScopeLabel"
+      @search="searchTerm = $event.trim()"
+      @select="selectEnvironment"
+    />
+  </div>
 </template>