Fixes to Settings link logic

This commit is contained in:
jpelletier1
2026-08-25 09:23:36 -04:00
parent 270ebe9641
commit 3d4e2263e5
2 changed files with 77 additions and 19 deletions
@@ -744,6 +744,48 @@ describe("BackendSelector", () => {
expect(input.value).toBe("BACKEND$NO_BACKEND_AVAILABLE");
});
describe("settings link", () => {
it("renders the settings link as a NavigationLink for a local backend", async () => {
let localId = "";
renderWithProviders(
<TestSeed
onMount={(ctx) => {
localId = ctx.addBackend(SEED_LOCAL_1).id;
ctx.setActive(localId, null);
}}
>
<BackendSelector />
</TestSeed>,
);
const link = screen.getByTestId("backend-selector-settings-link");
expect(link).toHaveAttribute("href", "/settings");
expect(link).not.toHaveAttribute("target", "_blank");
});
it("renders the settings link as an external anchor for a cloud backend", async () => {
let cloudId = "";
renderWithProviders(
<TestSeed
onMount={(ctx) => {
cloudId = ctx.addBackend(SEED_CLOUD_PRODUCTION).id;
ctx.setActive(cloudId, null);
}}
>
<BackendSelector />
</TestSeed>,
);
const link = screen.getByTestId("backend-selector-settings-link");
expect(link).toHaveAttribute(
"href",
`${SEED_CLOUD_PRODUCTION.host}/settings`,
);
expect(link).toHaveAttribute("target", "_blank");
expect(link).toHaveAttribute("rel", "noopener noreferrer");
});
});
describe("connection indicator", () => {
it("renders one status dot per option, green when the probe succeeds", async () => {
vi.mocked(SettingsClient).mockImplementation(
@@ -414,25 +414,41 @@ export function BackendSelector({
placement={settingsTooltipPlacement}
offset={10}
>
<NavigationLink
to="/settings"
data-testid="backend-selector-settings-link"
data-active={isSettingsActive}
aria-label={settingsLabel}
className={
isSettingsActive
? cn(
"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer",
formControlTransitionClassName,
)
: cn(
"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer",
formControlTransitionClassName,
)
}
>
<Settings width={16} height={16} />
</NavigationLink>
{active.backend.kind === "cloud" ? (
<a
href={`${active.backend.host.replace(/\/+$/, "")}/settings`}
target="_blank"
rel="noopener noreferrer"
data-testid="backend-selector-settings-link"
aria-label={settingsLabel}
className={cn(
"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer",
formControlTransitionClassName,
)}
>
<Settings width={16} height={16} />
</a>
) : (
<NavigationLink
to="/settings"
data-testid="backend-selector-settings-link"
data-active={isSettingsActive}
aria-label={settingsLabel}
className={
isSettingsActive
? cn(
"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md bg-tertiary text-white font-normal cursor-pointer",
formControlTransitionClassName,
)
: cn(
"inline-flex items-center justify-center shrink-0 w-9 h-9 rounded-md text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)] cursor-pointer",
formControlTransitionClassName,
)
}
>
<Settings width={16} height={16} />
</NavigationLink>
)}
</StyledTooltip>
) : null}
</div>