show success UX for dyad add integration

This commit is contained in:
Will Chen
2025-04-23 11:35:04 -07:00
parent d4589e809b
commit 860c427f28

View File

@@ -6,6 +6,7 @@ import { useAtomValue, atom, useAtom } from "jotai";
import { showError } from "@/lib/toast"; import { showError } from "@/lib/toast";
import { useStreamChat } from "@/hooks/useStreamChat"; import { useStreamChat } from "@/hooks/useStreamChat";
import { selectedChatIdAtom } from "@/atoms/chatAtoms"; import { selectedChatIdAtom } from "@/atoms/chatAtoms";
import { useLoadApp } from "@/hooks/useLoadApp";
interface DyadAddIntegrationProps { interface DyadAddIntegrationProps {
node: { node: {
@@ -25,8 +26,10 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
const { streamMessage } = useStreamChat(); const { streamMessage } = useStreamChat();
const [isSetup, setIsSetup] = useAtom(isSetupAtom); const [isSetup, setIsSetup] = useAtom(isSetupAtom);
const navigate = useNavigate(); const navigate = useNavigate();
const { provider } = node.properties; const { provider } = node.properties;
const appId = useAtomValue(selectedAppIdAtom); const appId = useAtomValue(selectedAppIdAtom);
const { app } = useLoadApp(appId);
const selectedChatId = useAtomValue(selectedChatIdAtom); const selectedChatId = useAtomValue(selectedChatIdAtom);
const handleSetupClick = () => { const handleSetupClick = () => {
@@ -38,6 +41,45 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
setIsSetup(true); setIsSetup(true);
}; };
if (app?.supabaseProjectName) {
return (
<div className="flex flex-col my-2 p-3 border border-green-300 rounded-lg bg-green-50 shadow-sm">
<div className="flex items-center space-x-2">
<svg
className="w-5 h-5 text-green-600"
fill="none"
stroke="currentColor"
strokeWidth={2}
viewBox="0 0 24 24"
>
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="2"
fill="#bbf7d0"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 12l2 2 4-4"
/>
</svg>
<span className="font-semibold text-green-800">
Supabase integration complete
</span>
</div>
<div className="text-sm text-green-900">
This app is connected to Supabase project:{" "}
<span className="font-mono font-medium bg-green-100 px-1 py-0.5 rounded">
{app.supabaseProjectName}
</span>
</div>
</div>
);
}
if (isSetup) { if (isSetup) {
return ( return (
<Button <Button