Support fuzzy match when picking repo [INS-1460] (#9504)

* tmp

* Fuzzy match for selecting branch
This commit is contained in:
yaoweiprc
2025-12-23 15:30:16 +08:00
committed by GitHub
parent a4250a53e3
commit 94d0764243
2 changed files with 12 additions and 2 deletions

View File

@@ -3,6 +3,7 @@ import { Button, ComboBox, Input, Label, ListBox, ListBoxItem, Popover } from 'r
import * as reactUse from 'react-use';
import { z } from 'zod/v4';
import { fuzzyMatch } from '~/common/misc';
import type { GitCredentials } from '~/models/git-repository';
import { useGitRemoteBranchesActionFetcher } from '~/routes/git.remote-branches';
@@ -66,11 +67,14 @@ export const GitRemoteBranchSelect = ({
className="w-full"
defaultSelectedKey={remoteBranches[0]}
isDisabled={isComboboxDisabled}
items={remoteBranches.map(branch => ({
defaultItems={remoteBranches.map(branch => ({
id: branch,
name: branch,
}))}
menuTrigger="focus"
defaultFilter={(branch: string, inputValue: string) =>
Boolean(fuzzyMatch(inputValue, branch, { splitSpace: true, loose: false })?.indexes)
}
>
<div className="flex w-full items-center gap-2">
<div className="group flex h-(--line-height-xs) flex-1 items-center gap-2 rounded-xs border border-solid border-(--hl-sm) bg-(--color-bg) text-(--color-font) transition-colors focus:ring-1 focus:ring-(--hl-md) focus:outline-hidden">

View File

@@ -1,6 +1,8 @@
import React, { useEffect, useState } from 'react';
import { Button, ComboBox, FieldError, Input, Label, ListBox, ListBoxItem, Popover } from 'react-aria-components';
import { fuzzyMatch } from '~/common/misc';
import { getAppWebsiteBaseURL } from '../../../common/constants';
import { isGitHubAppUserToken } from '../github-app-config-link';
import { Icon } from '../icon';
@@ -89,6 +91,9 @@ export const GitHubRepositorySelect = ({
}))}
onSelectionChange={key => setSelectedRepository(repositories.find(r => r.clone_url === key) || null)}
menuTrigger="focus"
defaultFilter={(repoName: string, inputValue: string) =>
Boolean(fuzzyMatch(inputValue, repoName, { splitSpace: true, loose: false })?.indexes)
}
>
<div className="flex w-full items-center gap-2">
<div className="group flex h-(--line-height-xs) flex-1 items-center gap-2 rounded-xs border border-solid border-(--hl-sm) bg-(--color-bg) text-(--color-font) transition-colors focus:ring-1 focus:ring-(--hl-md) focus:outline-hidden">
@@ -141,7 +146,8 @@ export const GitHubRepositorySelect = ({
{isDisabled && <Icon icon="lock" className="group-aria-disabled:opacity-30" />}
<span className="truncate group-aria-disabled:opacity-30">{item.name}</span>
{isDisabled && (
<span className="hidden rounded border border-solid border-(--hl-xl) px-2 py-1 text-(--color-font) group-hover:inline-block">
/* If you use hidden here, if the drop down is a long list and you scroll to the disabled item and hover on it, the scroll bar will scroll to the top. So we use invisible instead */
<span className="invisible rounded border border-solid border-(--hl-xl) px-2 py-1 text-(--color-font) group-hover:visible">
Already connected to: {allConnectedRepoURIProjectNameMap[item.id]}
</span>
)}