Update ref_selector component to use #header slot

This commit refactors the ref_selector component to take advantage of
the newly-added #header slot in the GlDropdown component.

app/assets/javascripts/ref/components/ref_selector.vue

@@ -2,7 +2,6 @@
 import {
   GlDropdown,
   GlDropdownDivider,
-  GlDropdownSectionHeader,
   GlSearchBoxByType,
   GlSprintf,
   GlIcon,
@@ -27,7 +26,6 @@ export default {
   components: {
     GlDropdown,
     GlDropdownDivider,
-    GlDropdownSectionHeader,
     GlSearchBoxByType,
     GlSprintf,
     GlIcon,
@@ -161,8 +159,13 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown v-bind="$attrs" class="ref-selector" @shown="focusSearchBox">
-    <template slot="button-content">
+  <gl-dropdown
+    v-bind="$attrs"
+    :header-text="i18n.dropdownHeader"
+    class="ref-selector"
+    @shown="focusSearchBox"
+  >
+    <template #button-content>
       <span class="gl-flex-grow-1 gl-ml-2 gl-text-gray-400" data-testid="button-content">
         <span v-if="selectedRef" class="gl-font-monospace">{{ selectedRef }}</span>
         <span v-else>{{ i18n.noRefSelected }}</span>
@@ -170,13 +173,7 @@ export default {
       <gl-icon name="chevron-down" />
     </template>
 
-    <div class="gl-display-flex gl-flex-direction-column ref-selector-dropdown-content">
-      <gl-dropdown-section-header>
-        <span class="gl-text-center gl-display-block">{{ i18n.dropdownHeader }}</span>
-      </gl-dropdown-section-header>
-
-      <gl-dropdown-divider />
-
+    <template #header>
       <gl-search-box-by-type
         ref="searchBox"
         v-model.trim="query"
@@ -184,15 +181,11 @@ export default {
         @input="onSearchBoxInput"
         @keydown.enter.prevent="onSearchBoxEnter"
       />
+    </template>
 
-      <div class="gl-flex-grow-1 gl-overflow-y-auto">
     <gl-loading-icon v-if="isLoading" size="lg" class="gl-my-3" />
 
-        <div
-          v-else-if="showNoResults"
-          class="gl-text-center gl-mx-3 gl-py-3"
-          data-testid="no-results"
-        >
+    <div v-else-if="showNoResults" class="gl-text-center gl-mx-3 gl-py-3" data-testid="no-results">
       <gl-sprintf v-if="lastQuery" :message="i18n.noResultsWithQuery">
         <template #query>
           <b class="gl-word-break-all">{{ lastQuery }}</b>
@@ -249,7 +242,5 @@ export default {
         />
       </template>
     </template>
-      </div>
-    </div>
   </gl-dropdown>
 </template>

app/assets/stylesheets/components/ref_selector.scss

 .ref-selector {
-  & &-dropdown-content {
-    // Setting a max height is necessary to allow the dropdown's content
-    // to control where and how scrollbars appear.
-    // This content is limited to the max-height of the dropdown
-    // ($dropdown-max-height-lg) minus the additional padding
-    // on the top and bottom (2 * $gl-padding-8)
-    max-height: $dropdown-max-height-lg - 2 * $gl-padding-8;
-  }
-
   .dropdown-menu.show {
     // Make the dropdown a little wider and longer than usual
     // since it contains quite a bit of content.

changelogs/unreleased/nfriend-ref-selector-dropdown-cleanup.yml

+---
+title: Small visual updates to Git ref selector dropdown on New/Edit Release page
+merge_request: 55121
+author:
+type: changed