diff --git a/e2e-tests/fixtures/add-supabase.md b/e2e-tests/fixtures/add-supabase.md new file mode 100644 index 0000000..0e924a2 --- /dev/null +++ b/e2e-tests/fixtures/add-supabase.md @@ -0,0 +1,2 @@ +Adding supabase... + diff --git a/e2e-tests/helpers/test_helper.ts b/e2e-tests/helpers/test_helper.ts index 6a4d0f9..b53fb6b 100644 --- a/e2e-tests/helpers/test_helper.ts +++ b/e2e-tests/helpers/test_helper.ts @@ -258,6 +258,10 @@ export class PageObject { .click(); } + async clickBackButton() { + await this.page.getByRole("button", { name: "Back" }).click(); + } + async sendPrompt(prompt: string) { await this.getChatInput().click(); await this.getChatInput().fill(prompt); @@ -382,6 +386,10 @@ export class PageObject { await this.page.getByTestId("app-details-more-options-button").click(); } + async clickConnectSupabaseButton() { + await this.page.getByTestId("connect-supabase-button").click(); + } + //////////////////////////////// // Settings related //////////////////////////////// diff --git a/e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-1.aria.yml b/e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-1.aria.yml new file mode 100644 index 0000000..1f371b5 --- /dev/null +++ b/e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-1.aria.yml @@ -0,0 +1,6 @@ +- paragraph: tc=add-supabase +- paragraph: Adding supabase... +- text: Integrate with supabase? +- button "Set up supabase" +- button "Retry": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-2.aria.yml b/e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-2.aria.yml new file mode 100644 index 0000000..c04e575 --- /dev/null +++ b/e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-2.aria.yml @@ -0,0 +1,8 @@ +- paragraph: tc=add-supabase +- paragraph: Adding supabase... +- img +- text: Supabase integration complete +- paragraph: "This app is connected to Supabase project: Fake Supabase Project" +- paragraph: Click the chat suggestion "Keep going" to continue. +- button "Retry": + - img \ No newline at end of file diff --git a/e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-3.aria.yml b/e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-3.aria.yml new file mode 100644 index 0000000..1f371b5 --- /dev/null +++ b/e2e-tests/snapshots/supabase_stale_ui.spec.ts_supabase---stale-ui-3.aria.yml @@ -0,0 +1,6 @@ +- paragraph: tc=add-supabase +- paragraph: Adding supabase... +- text: Integrate with supabase? +- button "Set up supabase" +- button "Retry": + - img \ No newline at end of file diff --git a/e2e-tests/supabase_stale_ui.spec.ts b/e2e-tests/supabase_stale_ui.spec.ts new file mode 100644 index 0000000..a42aeb5 --- /dev/null +++ b/e2e-tests/supabase_stale_ui.spec.ts @@ -0,0 +1,25 @@ +import { testSkipIfWindows } from "./helpers/test_helper"; + +// https://github.com/dyad-sh/dyad/issues/269 +testSkipIfWindows("supabase - stale ui", async ({ po }) => { + await po.setUp(); + await po.sendPrompt("tc=add-supabase"); + await po.snapshotMessages(); + + await po.page.getByText("Set up supabase").click(); + // On app details page: + await po.clickConnectSupabaseButton(); + // TODO: for some reason on Windows this navigates to the main (apps) page, + // rather than the original chat page, so this test is skipped on Windows. + // However, the underlying issue is platform-agnostic, so it seems OK to test + // only on Mac. + await po.clickBackButton(); + + // On chat page: + await po.snapshotMessages(); + + // Create a second app; do NOT integrate it with Supabase, and make sure UI is correct. + await po.goToAppsTab(); + await po.sendPrompt("tc=add-supabase"); + await po.snapshotMessages(); +}); diff --git a/src/components/SupabaseConnector.tsx b/src/components/SupabaseConnector.tsx index 2cb11c9..79c5969 100644 --- a/src/components/SupabaseConnector.tsx +++ b/src/components/SupabaseConnector.tsx @@ -202,14 +202,22 @@ export function SupabaseConnector({ appId }: { appId: number }) {

Integrations

{ - IpcClient.getInstance().openExternalUrl( - "https://supabase-oauth.dyad.sh/api/connect-supabase/login", - ); + onClick={async () => { + if (settings?.isTestMode) { + await IpcClient.getInstance().fakeHandleSupabaseConnect({ + appId, + fakeProjectId: "fake-project-id", + }); + } else { + await IpcClient.getInstance().openExternalUrl( + "https://supabase-oauth.dyad.sh/api/connect-supabase/login", + ); + } }} src={isDarkMode ? connectSupabaseDark : connectSupabaseLight} alt="Connect to Supabase" className="w-full h-10 min-h-8 min-w-20 cursor-pointer" + data-testid="connect-supabase-button" // className="h-10" />
diff --git a/src/components/chat/DyadAddIntegration.tsx b/src/components/chat/DyadAddIntegration.tsx index 2cc3dce..2545e30 100644 --- a/src/components/chat/DyadAddIntegration.tsx +++ b/src/components/chat/DyadAddIntegration.tsx @@ -2,10 +2,8 @@ import React from "react"; import { useNavigate } from "@tanstack/react-router"; import { Button } from "@/components/ui/button"; import { selectedAppIdAtom } from "@/atoms/appAtoms"; -import { useAtomValue, atom, useAtom } from "jotai"; +import { useAtomValue } from "jotai"; import { showError } from "@/lib/toast"; -import { useStreamChat } from "@/hooks/useStreamChat"; -import { selectedChatIdAtom } from "@/atoms/chatAtoms"; import { useLoadApp } from "@/hooks/useLoadApp"; interface DyadAddIntegrationProps { @@ -17,20 +15,15 @@ interface DyadAddIntegrationProps { children: React.ReactNode; } -const isSetupAtom = atom(false); - export const DyadAddIntegration: React.FC = ({ node, children, }) => { - const { streamMessage } = useStreamChat(); - const [isSetup, setIsSetup] = useAtom(isSetupAtom); const navigate = useNavigate(); const { provider } = node.properties; const appId = useAtomValue(selectedAppIdAtom); const { app } = useLoadApp(appId); - const selectedChatId = useAtomValue(selectedChatIdAtom); const handleSetupClick = () => { if (!appId) { @@ -38,7 +31,6 @@ export const DyadAddIntegration: React.FC = ({ return; } navigate({ to: "/app-details", search: { appId } }); - setIsSetup(true); }; if (app?.supabaseProjectName) { @@ -71,36 +63,18 @@ export const DyadAddIntegration: React.FC = ({
- This app is connected to Supabase project:{" "} - - {app.supabaseProjectName} - +

+ This app is connected to Supabase project:{" "} + + {app.supabaseProjectName} + +

+

Click the chat suggestion "Keep going" to continue.

); } - if (isSetup) { - return ( - - ); - } - return (
diff --git a/src/components/preview_panel/CodeView.tsx b/src/components/preview_panel/CodeView.tsx index b5f4c4a..64dd2af 100644 --- a/src/components/preview_panel/CodeView.tsx +++ b/src/components/preview_panel/CodeView.tsx @@ -36,7 +36,7 @@ export const CodeView = ({ loading, app }: CodeViewProps) => { {/* Toolbar */}