Function ExternalAuthButtons

site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx:435–488

({
	versionId,
	missedExternalAuth,
})

};

const ExternalAuthButtons: FC<ExternalAuthButtonProps> = ({
	versionId,
	missedExternalAuth,
}) => {
	const { startPollingExternalAuth, externalAuthPollingState } =
		useExternalAuth(versionId);

	return missedExternalAuth.map((auth) => {
		const isPollingExternalAuth =
			externalAuthPollingState[auth.id] === "polling";
		const shouldRetry = externalAuthPollingState[auth.id] === "abandoned";

		return (
			<div className="flex items-center gap-2" key={auth.id}>
				<Button
					className="bg-surface-tertiary hover:bg-surface-quaternary rounded-full text-content-primary"
					size="sm"
					disabled={isPollingExternalAuth || auth.authenticated}
					onClick={() => {
						window.open(
							auth.authenticate_url,
							"_blank",
							"width=900,height=600",
						);
						startPollingExternalAuth(auth.id);
					}}
				>
					<Spinner loading={isPollingExternalAuth}>
						<ExternalImage src={auth.display_icon} />
					</Spinner>
					Connect to {auth.display_name}
				</Button>

				{shouldRetry && !auth.authenticated && (
					<Tooltip>
						<TooltipTrigger asChild>
							<Button
								variant="outline"
								size="icon"
								onClick={() => startPollingExternalAuth(auth.id)}
							>
								<RedoIcon />
								<span className="sr-only">Refresh external auth</span>
							</Button>
						</TooltipTrigger>
						<TooltipContent>
							Retry connecting to {auth.display_name}
						</TooltipContent>
					</Tooltip>
				)}
			</div>
		);
	});
};

function sortByDefault(a: Preset, b: Preset) {
	// Default preset should come first