Add docs button to the API-key connect dialog

The Add Source card links to a connector's docs, but the API-key
connect dialog did not, so a user filling in an API key had no path
to the setup instructions. Add a "Documentation" button to the dialog
footer, styled like Cancel and on the left of the Cancel/Connect row,
shown only when the provider has a docs page.

Extract the rendering into a shared ConnectorDocumentationLink
component with a link/button variant (the card keeps the quiet link,
the dialog uses the button) and give DialogFooter an optional start
slot for left-aligned footer content.

Signed-off-by: Aurélien Sibiril <81782+aureliensibiril@users.noreply.github.com>
This commit is contained in:
Aurélien Sibiril
2026-07-24 14:27:48 +02:00
parent b1a67aba00
commit fa3b7dc2b3
4 changed files with 95 additions and 18 deletions

View File

@@ -195,19 +195,27 @@ export function DialogFooter({
children,
exitLabel,
className,
start,
}: {
children?: ReactNode;
exitLabel?: string;
className?: string;
// Optional content aligned to the footer's left edge (e.g. a documentation
// link), on the same line as the Cancel/confirm buttons. When set, the footer
// switches to justify-between; otherwise it keeps the default right alignment.
start?: ReactNode;
}) {
const { __ } = useTranslate();
const { footer } = dialog();
return (
<footer className={footer({ className })}>
<Close asChild>
<Button variant="secondary">{exitLabel ?? __("Cancel")}</Button>
</Close>
{children}
<footer className={footer({ className: clsx(start != null && "justify-between", className) })}>
{start != null && <div className="flex items-center gap-2">{start}</div>}
<div className="flex items-center gap-2">
<Close asChild>
<Button variant="secondary">{exitLabel ?? __("Cancel")}</Button>
</Close>
{children}
</div>
</footer>
);
}