Skip to content

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.

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.

Screenshot_2023-09-14_at_11.56.54_PM

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.

    Screenshot_2023-09-01_at_12.00.50_AM

    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:

    Screenshot_2023-09-14_at_11.56.54_PM

    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.

Edited by 🤖 GitLab Bot 🤖