Skip to content

Commit fbb10f6

Browse files
hannesrudolphhannesrudolph
committed
feat: update search score threshold slider to match settings style and add reset tooltip
- Replace custom input range with consistent Slider component - Follow standard slider pattern: slider + value display + reset button - Add tooltip to reset button with translation support - Update all tests to work with new component structure - Maintain consistent spacing and styling with other settings sliders
1 parent 9e4da86 commit fbb10f6

File tree

3 files changed

+91
-40
lines changed

3 files changed

+91
-40
lines changed

‎webview-ui/src/components/settings/CodeIndexSettings.tsx‎

Lines changed: 49 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ import {
2727
AlertDialogHeader,
2828
AlertDialogTitle,
2929
AlertDialogTrigger,
30+
Slider,
31+
Button,
32+
Tooltip,
33+
TooltipContent,
34+
TooltipProvider,
35+
TooltipTrigger,
3036
} from "@src/components/ui"
3137

3238
import { SetCachedStateField } from "./types"
@@ -449,42 +455,50 @@ export const CodeIndexSettings: React.FC<CodeIndexSettingsProps> = ({
449455
</div>
450456
</div>
451457

452-
<div className="flex flex-col gap-3">
453-
<div className="flex items-center gap-4 font-bold">
454-
<div>{t("settings:codeIndex.searchMinScoreLabel")}</div>
458+
<div>
459+
<span className="block font-medium mb-1">{t("settings:codeIndex.searchMinScoreLabel")}</span>
460+
<div className="flex items-center gap-2">
461+
<Slider
462+
min={0}
463+
max={1}
464+
step={0.05}
465+
value={[codebaseIndexConfig.codebaseIndexSearchMinScore || 0.4]}
466+
onValueChange={([value]) =>
467+
setCachedStateField("codebaseIndexConfig", {
468+
...codebaseIndexConfig,
469+
codebaseIndexSearchMinScore: value,
470+
})
471+
}
472+
data-testid="search-min-score-slider"
473+
/>
474+
<span className="w-20">
475+
{(codebaseIndexConfig.codebaseIndexSearchMinScore || 0.4).toFixed(2)}
476+
</span>
477+
<TooltipProvider>
478+
<Tooltip>
479+
<TooltipTrigger asChild>
480+
<Button
481+
variant="ghost"
482+
size="sm"
483+
onClick={() =>
484+
setCachedStateField("codebaseIndexConfig", {
485+
...codebaseIndexConfig,
486+
codebaseIndexSearchMinScore: 0.4,
487+
})
488+
}
489+
className="h-8 w-8 p-0"
490+
data-testid="search-min-score-reset-button">
491+
<span className="codicon codicon-debug-restart w-4 h-4" />
492+
</Button>
493+
</TooltipTrigger>
494+
<TooltipContent>
495+
<p>{t("settings:codeIndex.searchMinScoreResetTooltip")}</p>
496+
</TooltipContent>
497+
</Tooltip>
498+
</TooltipProvider>
455499
</div>
456-
<div className="flex flex-col gap-3">
457-
<div className="flex items-center gap-3">
458-
<span className="text-xs text-vscode-descriptionForeground min-w-[30px]">0.0</span>
459-
<input
460-
type="range"
461-
min="0"
462-
max="1"
463-
step="0.05"
464-
value={codebaseIndexConfig.codebaseIndexSearchMinScore || 0.4}
465-
onChange={(e) => {
466-
const value = parseFloat(e.target.value)
467-
setCachedStateField("codebaseIndexConfig", {
468-
...codebaseIndexConfig,
469-
codebaseIndexSearchMinScore: value,
470-
})
471-
}}
472-
className="flex-1 h-2 bg-vscode-input-background rounded-lg appearance-none cursor-pointer slider"
473-
data-testid="search-min-score-slider"
474-
style={{
475-
background: `linear-gradient(to right, var(--vscode-progressBar-background) 0%, var(--vscode-progressBar-background) ${(codebaseIndexConfig.codebaseIndexSearchMinScore || 0.4) * 100}%, var(--vscode-input-background) ${(codebaseIndexConfig.codebaseIndexSearchMinScore || 0.4) * 100}%, var(--vscode-input-background) 100%)`,
476-
}}
477-
/>
478-
<span className="text-xs text-vscode-descriptionForeground min-w-[30px]">1.0</span>
479-
</div>
480-
<div className="text-center">
481-
<span className="text-sm text-vscode-foreground font-medium">
482-
{(codebaseIndexConfig.codebaseIndexSearchMinScore || 0.4).toFixed(2)}
483-
</span>
484-
</div>
485-
<p className="text-vscode-descriptionForeground text-sm mt-1">
486-
{t("settings:codeIndex.searchMinScoreDescription")}
487-
</p>
500+
<div className="text-vscode-descriptionForeground text-sm mt-1">
501+
{t("settings:codeIndex.searchMinScoreDescription")}
488502
</div>
489503
</div>
490504

‎webview-ui/src/components/settings/__tests__/CodeIndexSettings.spec.tsx‎

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ vi.mock("@src/i18n/TranslationContext", () => ({
4646
"settings:codeIndex.searchMinScoreLabel": "Search Score Threshold",
4747
"settings:codeIndex.searchMinScoreDescription":
4848
"Minimum similarity score (0.0-1.0) required for search results. Lower values return more results but may be less relevant. Higher values return fewer but more relevant results.",
49+
"settings:codeIndex.searchMinScoreResetTooltip": "Reset to default value (0.4)",
4950
}
5051
return translations[key] || key
5152
},
@@ -88,6 +89,24 @@ vi.mock("@src/components/ui", () => ({
8889
AlertDialogHeader: ({ children }: any) => <div data-testid="alert-dialog-header">{children}</div>,
8990
AlertDialogTitle: ({ children }: any) => <div data-testid="alert-dialog-title">{children}</div>,
9091
AlertDialogTrigger: ({ children }: any) => <div data-testid="alert-dialog-trigger">{children}</div>,
92+
Slider: ({ value, onValueChange, "data-testid": dataTestId }: any) => (
93+
<input
94+
type="range"
95+
value={value[0]}
96+
onChange={(e) => onValueChange && onValueChange([parseFloat(e.target.value)])}
97+
data-testid={dataTestId}
98+
role="slider"
99+
/>
100+
),
101+
Button: ({ children, onClick, "data-testid": dataTestId, ...props }: any) => (
102+
<button onClick={onClick} data-testid={dataTestId} {...props}>
103+
{children}
104+
</button>
105+
),
106+
Tooltip: ({ children }: any) => <div data-testid="tooltip">{children}</div>,
107+
TooltipContent: ({ children }: any) => <div data-testid="tooltip-content">{children}</div>,
108+
TooltipProvider: ({ children }: any) => <div data-testid="tooltip-provider">{children}</div>,
109+
TooltipTrigger: ({ children }: any) => <div data-testid="tooltip-trigger">{children}</div>,
91110
}))
92111

93112
vi.mock("@vscode/webview-ui-toolkit/react", () => ({
@@ -822,10 +841,11 @@ describe("CodeIndexSettings", () => {
822841
})
823842

824843
describe("Search Minimum Score Slider", () => {
825-
it("should render search minimum score slider", () => {
844+
it("should render search minimum score slider with reset button", () => {
826845
render(<CodeIndexSettings {...defaultProps} />)
827846

828847
expect(screen.getByTestId("search-min-score-slider")).toBeInTheDocument()
848+
expect(screen.getByTestId("search-min-score-reset-button")).toBeInTheDocument()
829849
expect(screen.getByText("Search Score Threshold")).toBeInTheDocument()
830850
})
831851

@@ -840,8 +860,6 @@ describe("CodeIndexSettings", () => {
840860

841861
render(<CodeIndexSettings {...propsWithScore} />)
842862

843-
const slider = screen.getByTestId("search-min-score-slider")
844-
expect(slider).toHaveValue("0.65")
845863
expect(screen.getByText("0.65")).toBeInTheDocument()
846864
})
847865

@@ -857,6 +875,26 @@ describe("CodeIndexSettings", () => {
857875
})
858876
})
859877

878+
it("should reset to default value when reset button is clicked", () => {
879+
const propsWithScore = {
880+
...defaultProps,
881+
codebaseIndexConfig: {
882+
...defaultProps.codebaseIndexConfig,
883+
codebaseIndexSearchMinScore: 0.8,
884+
},
885+
}
886+
887+
render(<CodeIndexSettings {...propsWithScore} />)
888+
889+
const resetButton = screen.getByTestId("search-min-score-reset-button")
890+
fireEvent.click(resetButton)
891+
892+
expect(mockSetCachedStateField).toHaveBeenCalledWith("codebaseIndexConfig", {
893+
...defaultProps.codebaseIndexConfig,
894+
codebaseIndexSearchMinScore: 0.4,
895+
})
896+
})
897+
860898
it("should use default value when no score is set", () => {
861899
const propsWithoutScore = {
862900
...defaultProps,
@@ -868,8 +906,6 @@ describe("CodeIndexSettings", () => {
868906

869907
render(<CodeIndexSettings {...propsWithoutScore} />)
870908

871-
const slider = screen.getByTestId("search-min-score-slider")
872-
expect(slider).toHaveValue("0.4")
873909
expect(screen.getByText("0.40")).toBeInTheDocument()
874910
})
875911
})

‎webview-ui/src/i18n/locales/en/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"qdrantKeyLabel": "Qdrant Key:",
5959
"searchMinScoreLabel": "Search Score Threshold",
6060
"searchMinScoreDescription": "Minimum similarity score (0.0-1.0) required for search results. Lower values return more results but may be less relevant. Higher values return fewer but more relevant results.",
61+
"searchMinScoreResetTooltip": "Reset to default value (0.4)",
6162
"startIndexingButton": "Start Indexing",
6263
"clearIndexDataButton": "Clear Index Data",
6364
"unsavedSettingsMessage": "Please save your settings before starting the indexing process.",

0 commit comments

Comments
 (0)