Fix stale app UI (supabase) & overall E2E test infra improvements (#337)

Fixes #269

src/components/SupabaseConnector.tsx

@@ -202,14 +202,22 @@ export function SupabaseConnector({ appId }: { appId: number }) {
       <div className="flex flex-col md:flex-row items-center justify-between">
         <h2 className="text-lg font-medium">Integrations</h2>
         <img
-          onClick={() => {
-            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"
         />
       </div>

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<DyadAddIntegrationProps> = ({
   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<DyadAddIntegrationProps> = ({
       return;
     }
     navigate({ to: "/app-details", search: { appId } });
-    setIsSetup(true);
   };
 
   if (app?.supabaseProjectName) {
@@ -71,36 +63,18 @@ export const DyadAddIntegration: React.FC<DyadAddIntegrationProps> = ({
           </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>
+          <p>
+            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>
+          </p>
+          <p>Click the chat suggestion "Keep going" to continue.</p>
         </div>
       </div>
     );
   }
 
-  if (isSetup) {
-    return (
-      <Button
-        onClick={() => {
-          setIsSetup(false);
-          if (!selectedChatId) {
-            showError("No chat ID found");
-            return;
-          }
-          streamMessage({
-            prompt: "OK, I've setup Supabase. Continue",
-            chatId: selectedChatId,
-          });
-        }}
-        className="my-1"
-      >
-        Continue | I've setup {provider}
-      </Button>
-    );
-  }
-
   return (
     <div className="flex flex-col gap-2 my-2 p-3 border rounded-md bg-secondary/10">
       <div className="text-sm">

src/components/preview_panel/CodeView.tsx

@@ -36,7 +36,7 @@ export const CodeView = ({ loading, app }: CodeViewProps) => {
         {/* Toolbar */}
         <div className="flex items-center p-2 border-b space-x-2">
           <button
-            onClick={refreshApp}
+            onClick={() => refreshApp()}
             className="p-1 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
             disabled={loading || !app.id}
             title="Refresh Files"