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,72 +181,66 @@ 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" />
+    <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"
-        >
-          <gl-sprintf v-if="lastQuery" :message="i18n.noResultsWithQuery">
-            <template #query>
-              <b class="gl-word-break-all">{{ lastQuery }}</b>
-            </template>
-          </gl-sprintf>
+    <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>
+        </template>
+      </gl-sprintf>
 
-          <span v-else>{{ i18n.noResults }}</span>
-        </div>
+      <span v-else>{{ i18n.noResults }}</span>
+    </div>
 
-        <template v-else>
-          <template v-if="showBranchesSection">
-            <ref-results-section
-              :section-title="i18n.branches"
-              :total-count="matches.branches.totalCount"
-              :items="matches.branches.list"
-              :selected-ref="selectedRef"
-              :error="matches.branches.error"
-              :error-message="i18n.branchesErrorMessage"
-              :show-header="showSectionHeaders"
-              data-testid="branches-section"
-              @selected="selectRef($event)"
-            />
+    <template v-else>
+      <template v-if="showBranchesSection">
+        <ref-results-section
+          :section-title="i18n.branches"
+          :total-count="matches.branches.totalCount"
+          :items="matches.branches.list"
+          :selected-ref="selectedRef"
+          :error="matches.branches.error"
+          :error-message="i18n.branchesErrorMessage"
+          :show-header="showSectionHeaders"
+          data-testid="branches-section"
+          @selected="selectRef($event)"
+        />
 
-            <gl-dropdown-divider v-if="showTagsSection || showCommitsSection" />
-          </template>
+        <gl-dropdown-divider v-if="showTagsSection || showCommitsSection" />
+      </template>
 
-          <template v-if="showTagsSection">
-            <ref-results-section
-              :section-title="i18n.tags"
-              :total-count="matches.tags.totalCount"
-              :items="matches.tags.list"
-              :selected-ref="selectedRef"
-              :error="matches.tags.error"
-              :error-message="i18n.tagsErrorMessage"
-              :show-header="showSectionHeaders"
-              data-testid="tags-section"
-              @selected="selectRef($event)"
-            />
+      <template v-if="showTagsSection">
+        <ref-results-section
+          :section-title="i18n.tags"
+          :total-count="matches.tags.totalCount"
+          :items="matches.tags.list"
+          :selected-ref="selectedRef"
+          :error="matches.tags.error"
+          :error-message="i18n.tagsErrorMessage"
+          :show-header="showSectionHeaders"
+          data-testid="tags-section"
+          @selected="selectRef($event)"
+        />
 
-            <gl-dropdown-divider v-if="showCommitsSection" />
-          </template>
+        <gl-dropdown-divider v-if="showCommitsSection" />
+      </template>
 
-          <template v-if="showCommitsSection">
-            <ref-results-section
-              :section-title="i18n.commits"
-              :total-count="matches.commits.totalCount"
-              :items="matches.commits.list"
-              :selected-ref="selectedRef"
-              :error="matches.commits.error"
-              :error-message="i18n.commitsErrorMessage"
-              :show-header="showSectionHeaders"
-              data-testid="commits-section"
-              @selected="selectRef($event)"
-            />
-          </template>
-        </template>
-      </div>
-    </div>
+      <template v-if="showCommitsSection">
+        <ref-results-section
+          :section-title="i18n.commits"
+          :total-count="matches.commits.totalCount"
+          :items="matches.commits.list"
+          :selected-ref="selectedRef"
+          :error="matches.commits.error"
+          :error-message="i18n.commitsErrorMessage"
+          :show-header="showSectionHeaders"
+          data-testid="commits-section"
+          @selected="selectRef($event)"
+        />
+      </template>
+    </template>
   </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