mirror of
https://github.com/stablyai/orca.git
synced 2026-09-22 08:02:28 +00:00
Improve onboarding browse button (#4423)
Co-authored-by: Orca <help@stably.ai>
This commit is contained in:
@@ -42,10 +42,23 @@ describe('RepoStep', () => {
|
||||
const html = renderRepoStep()
|
||||
|
||||
expect(html).not.toContain('Project already added')
|
||||
expect(html).toContain('Open a folder')
|
||||
expect(html).toContain('Browse for a folder')
|
||||
expect(html).toContain('Clone a repo')
|
||||
})
|
||||
|
||||
it('presents the local-folder card itself as the browse action', () => {
|
||||
const html = renderRepoStep()
|
||||
|
||||
expect(html).toContain('border-border bg-muted/30')
|
||||
expect(html).toContain('focus:border-foreground/70')
|
||||
expect(html).toContain('focus:ring-2 focus:ring-inset focus:ring-foreground/25')
|
||||
expect(html).toContain('autofocus=""')
|
||||
expect(html).toContain('Browse for a folder')
|
||||
expect(html).toContain('group-hover:translate-x-0.5')
|
||||
expect(html).toContain('w-fit max-w-[calc(100%-3.75rem)]')
|
||||
expect(html).toContain('Want to import many repos at once? Select the parent folder.')
|
||||
})
|
||||
|
||||
it('disables nested import actions when no repositories are selected', () => {
|
||||
const html = renderRepoStep({
|
||||
nestedScan: {
|
||||
|
||||
@@ -233,25 +233,28 @@ export function RepoStep({
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="group w-full rounded-xl border border-border bg-muted/30 p-5 text-left transition hover:border-foreground/40 hover:bg-muted/60 disabled:opacity-60"
|
||||
className="group w-full rounded-xl border border-border bg-muted/30 p-5 text-left transition hover:border-foreground/40 hover:bg-muted/60 focus:border-foreground/70 focus:bg-muted/40 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-foreground/25 disabled:opacity-60"
|
||||
disabled={disabled}
|
||||
autoFocus={!disabled}
|
||||
onClick={onOpenFolder}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex min-w-0 items-center gap-4">
|
||||
<div className="grid size-11 shrink-0 place-items-center rounded-lg bg-muted text-foreground">
|
||||
<FolderOpen className="size-5" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-base font-semibold text-foreground">Open a folder</div>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<div className="min-w-0 text-base font-semibold text-foreground">
|
||||
Browse for a folder
|
||||
</div>
|
||||
<ArrowRight className="size-4 shrink-0 text-muted-foreground transition group-hover:translate-x-0.5 group-hover:text-foreground" />
|
||||
</div>
|
||||
<div className="mt-0.5 text-[13px] text-muted-foreground">
|
||||
Choose any local directory, git repo or not.
|
||||
</div>
|
||||
</div>
|
||||
<span className="shrink-0 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground transition group-hover:border-foreground/40">
|
||||
Browse...
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-[3.75rem] mt-3 flex items-center gap-2 rounded-lg border border-border bg-muted px-3 py-2 text-[12px] text-muted-foreground">
|
||||
<div className="ml-[3.75rem] mt-3 flex w-fit max-w-[calc(100%-3.75rem)] items-center gap-2 rounded-lg border border-border bg-muted px-3 py-2 text-[12px] text-muted-foreground">
|
||||
<span className="grid size-6 shrink-0 place-items-center rounded-md border border-border bg-background text-foreground">
|
||||
<Lightbulb className="size-3.5" />
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user