UI Polish: Branch selector hard to see when filtered

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Description

1. Visit /-/jira_connect/branches/new?issue_key=FE-10.
2. Pick a project.
3. Open the branch picker and filter to master or main.

Let's make this look better ☝️

Context

The following discussion from !130145 (merged) should be addressed:

• @pslaughter started a discussion: (+4 comments)

  suggestion (non-blocking,ux): Currently, we'll always try 2 fetches to graphql even if the first fetch only returned 1 item.

  

  We might be able to optimize and improve the UX here a little by skipping the infiniteScroll if we received less than BRANCHES_PER_PAGE items. Here's a patch for what I'm thinking:

  diff --git a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
  index e4ebe9f634d9..adb6138cbc4f 100644
  --- a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
  +++ b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
  @@ -28,6 +28,7 @@ export default {
         sourceBranchNamesLoading: false,
         sourceBranchNamesLoadingMore: false,
         sourceBranchNames: [],
  +      hasMore: false,
       };
     },
     computed: {
  @@ -102,6 +103,9 @@ export default {
               return { text: value, value };
             }) || [];
   
  +        // what: For now, we just assume we have more if we've returned the page size
  +        this.hasMore = branchNameItems.length === BRANCHES_PER_PAGE;
  +
           if (append) {
             this.sourceBranchNames.push(...branchNameItems);
           } else {
  @@ -125,7 +129,6 @@ export default {
   <template>
     <gl-collapsible-listbox
       :class="{ 'gl-font-monospace': hasSelectedSourceBranch }"
  -    :selected="selectedBranchName"
       :disabled="!hasSelectedProject"
       :items="sourceBranchNames"
       :loading="initialSourceBranchNamesLoading"
  @@ -133,7 +136,7 @@ export default {
       :searching="sourceBranchNamesLoading"
       :toggle-text="branchDropdownText"
       fluid-width
  -    infinite-scroll
  +    :infinite-scroll="hasMore"
       :infinite-scroll-loading="sourceBranchNamesLoadingMore"
       @bottom-reached="onBottomReached"
       @search="onSearch"
  
  

  There's an issue with this patch though. I can't figure out how to get keep the dropdown's scrim from showing up 🤷

  We don't need to handle this here. Just something to think about 😄

  ... Thanks for taking a look at this! I like this a lot.

  The only issue I've run into is that the underlying component seems to display things strangely if there's a small number of items. For example, if you use "search" to filter to just the selected branch:

  

  WDYT? Was it like this before introducing the hasMoreBranches computed? Your call on what you'd like to do here @justin_ho 😄

  ... Ah ok now I see what you meant by scrim. I think this has to do with the way we toggle the :infinite-scroll="hasMoreBranches" property. The GlCollapsibleListbox doesn't seem to handle that well as it hides the intersection observer but doesn't reset the state of the items observed (bottomBoundaryVisible), aka the scrim that we see.

  I tried a couple of other small fixes but this does seem like an issue with GitLab UI (or might need more investigation). I would consider this a minor annoyance at best so wdyt about handling this in a follow-up UI polish issue?

Investigation

This will likely need a fix upstream in the gitlab-ui project.