UI Polish: Branch selector hard to see when filtered
Description
- Visit
/-/jira_connect/branches/new?issue_key=FE-10
. - Pick a project.
- Open the branch picker and filter to
master
ormain
.
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 thanBRANCHES_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. TheGlCollapsibleListbox
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.