misc: improved helper text for GCP sa field

This commit is contained in:
Sheen Capadngan
2025-01-29 03:10:37 +08:00
parent c3d515bb95
commit b5d60398d6
@@ -114,36 +114,42 @@ export const GcpConnectionForm = ({ appConnection, onSubmit }: Props) => {
className="group" className="group"
helperText={ helperText={
<> <>
<span> <div>
{`Service account ID (the part of the email before '@') must be suffixed with "${expectedAccountIdSuffix}"`} {`Service account ID must be suffixed with "${expectedAccountIdSuffix}"`}
</span> <Tooltip className="relative right-2" position="bottom" content="Copy">
<Tooltip className="relative right-2" position="bottom" content="Copy"> <IconButton
<IconButton variant="plain"
variant="plain" ariaLabel="copy"
ariaLabel="copy" onClick={() => {
onClick={() => { if (isCopied) {
if (isCopied) { return;
return; }
}
navigator.clipboard.writeText(expectedAccountIdSuffix); navigator.clipboard.writeText(expectedAccountIdSuffix);
createNotification({ createNotification({
text: "Copied to clipboard", text: "Copied to clipboard",
type: "info" type: "info"
}); });
toggleIsCopied(2000); toggleIsCopied(2000);
}} }}
className="hover:bg-bunker-100/10" className="hover:bg-bunker-100/10"
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={!isCopied ? faCopy : faCheck} icon={!isCopied ? faCopy : faCheck}
size="sm" size="sm"
className="cursor-pointer" className="cursor-pointer"
/> />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
<div>
Example:
<span className="ml-1 font-semibold">
{`service-account-${expectedAccountIdSuffix}@my-project.iam.gserviceaccount.com`}
</span>
</div>
</> </>
} }
> >