fix(web): fix container logs (#6221)

apps/web/src/pages/auth/onboarding/PlaygroundPage.tsx

@@ -36,14 +36,14 @@ export function PlaygroundPage() {
     payload: {},
   });
   const [clickedStepId, setClickedStepId] = useState<string>('');
-  const { testUser, bridgeURL } = useStudioState();
+  const { testUser, bridgeURL, setBridgeURL } = useStudioState();
 
-  const { data: discover } = useDiscover();
+  const { data: discover, refetch } = useDiscover();
 
   const workflow = discover?.workflows?.[0];
   const steps = workflow?.steps;
 
-  const { initializeWebContainer, isBridgeAppLoading } = useContainer();
+  const { initializeWebContainer, isBridgeAppLoading, containerBridgeUrl } = useContainer();
   const { toggleColorScheme, colorScheme } = useThemeChange();
   const segment = useSegment();
 
@@ -77,9 +77,43 @@ export function PlaygroundPage() {
   useEffectOnce(() => {
     segment.track('Visit Playground page - [Playground]');
 
+    if (containerBridgeUrl) {
+      setBridgeURL(containerBridgeUrl);
+      setTimeout(() => {
+        refetch();
+      }, 500);
+    }
+
     initializeWebContainer();
   }, true);
 
+  useEffect(() => {
+    if (containerBridgeUrl) {
+      setBridgeURL(containerBridgeUrl);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    refetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bridgeURL]);
+
+  useEffect(() => {
+    window.addEventListener('webcontainer:serverReady', () => {
+      if (bridgeURL !== containerBridgeUrl && containerBridgeUrl) {
+        setBridgeURL(containerBridgeUrl);
+      }
+
+      refetch();
+    });
+
+    return () => {
+      window.removeEventListener('webcontainer:serverReady', () => {});
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (colorScheme === 'light') {
       toggleColorScheme();

apps/web/src/pages/auth/onboarding/PlaygroundTourGuide.tsx

@@ -1,7 +1,7 @@
 import { Code } from '@mantine/core';
 import { css } from '@novu/novui/css';
 import { useState, useEffect } from 'react';
-import Joyride, { CallBackProps, STATUS, Step, TooltipRenderProps } from 'react-joyride';
+import Joyride, { ACTIONS, CallBackProps, LIFECYCLE, STATUS, Step, TooltipRenderProps } from 'react-joyride';
 import { Button } from '@novu/novui';
 import { Accordion } from '@mantine/core';
 
@@ -135,9 +135,18 @@ export function TourGuideComponent({
   ];
 
   const handleJoyrideCallback = (data: CallBackProps) => {
-    const { status, lifecycle, action } = data;
+    const { status, lifecycle, action, index } = data;
 
-    if (action === 'next' && data.step.target === '.workflow-flow' && steps?.length && lifecycle === 'complete') {
+    if (action === ACTIONS.NEXT && lifecycle === LIFECYCLE.COMPLETE) {
+      setJoyStepIndex(index + 1);
+    }
+
+    if (
+      action === ACTIONS.NEXT &&
+      data.step.target === '.workflow-flow' &&
+      steps?.length &&
+      lifecycle === LIFECYCLE.COMPLETE
+    ) {
       setRunJoyride(false);
       setJoyStepIndex(3);
       setClickedStepId(steps[0].stepId);
@@ -153,7 +162,7 @@ export function TourGuideComponent({
   };
 
   useEffect(() => {
-    if (joyStepIndex !== undefined) {
+    if (joyStepIndex !== undefined && joyStepIndex !== null) {
       setRunJoyride(true);
     }
   }, [joyStepIndex, setRunJoyride]);

apps/web/src/pages/auth/onboarding/PlaygroundWorkflowComponent.tsx

@@ -9,7 +9,7 @@ import { WorkflowNodes } from '../../../studio/components/workflows/node-view/Wo
 import { When } from '../../../components/utils/When';
 import { HStack, VStack } from '@novu/novui/jsx';
 import { StepNode } from '../../../studio/components/workflows/node-view/StepNode';
-import { useBridgeAPI } from '../../../studio/hooks/useBridgeAPI';
+import { useBridgeAPI, useDiscover } from '../../../studio/hooks/useBridgeAPI';
 import { useControlsHandler } from '../../../hooks/workflow/useControlsHandler';
 import { WorkflowsStepEditor } from '../../../components/workflow_v2/StepEditorComponent';
 import { BackButton } from '../../../components/layout/components/LocalStudioHeader/BackButton';

apps/web/src/studio/components/workflows/step-editor/editor/useContainer.tsx

@@ -18,6 +18,7 @@ type ContainerState = {
   setCode: (code: Record<string, string>) => void;
   isBridgeAppLoading: boolean;
   initializeWebContainer: () => Promise<void>;
+  containerBridgeUrl: string | null;
 };
 
 const ContainerContext = React.createContext<ContainerState | undefined>(undefined);
@@ -36,13 +37,14 @@ export const ContainerProvider: FCWithChildren = ({ children }) => {
     'react-email.tsx': REACT_EMAIL_CODE,
   });
   const [isBridgeAppLoading, setIsBridgeAppLoading] = useState<boolean>(true);
+  const [containerBridgeUrl, setContainerBridgeUrl] = useState<string | null>(null);
   const [webContainer, setWebContainer] = useState<typeof WebContainer | null>(null);
   const [sandboxBridgeAddress, setSandboxBridgeAddress] = useState<string | null>(null);
   const [initStarted, setInitStarted] = useState<boolean>(false);
   const terminalRef = useRef<TerminalHandle>(null);
   const studioState = useStudioState() || {};
-  const { setBridgeURL } = studioState;
-  const { refetch } = useDiscover();
+  const { setBridgeURL, bridgeURL } = studioState;
+
   const segment = useSegment();
 
   const writeOutput = (data: string) => {
@@ -57,11 +59,18 @@ export const ContainerProvider: FCWithChildren = ({ children }) => {
         segment.track('Starting Playground - [Playground]');
 
         setInitStarted(true);
-        setWebContainer(
-          await WebContainer.boot({
-            coep: 'credentialless',
-          })
-        );
+        const webContainerInstance = await WebContainer.boot({
+          coep: 'credentialless',
+        });
+
+        setWebContainer(webContainerInstance);
+
+        webContainerInstance.on('server-ready', (port, url) => {
+          segment.track('Sandbox bridge app is ready - [Playground]');
+          setSandboxBridgeAddress(url + ':' + port);
+
+          window.dispatchEvent(new CustomEvent('webcontainer:serverReady'));
+        });
       }
     } catch (error: any) {
       segment.track('Error booting web container - [Playground]', {
@@ -85,8 +94,6 @@ export const ContainerProvider: FCWithChildren = ({ children }) => {
           setSandboxBridgeAddress(url + ':' + port);
 
           window.dispatchEvent(new CustomEvent('webcontainer:serverReady'));
-
-          refetch();
         });
 
         async function installDependencies() {
@@ -163,6 +170,7 @@ export const ContainerProvider: FCWithChildren = ({ children }) => {
           write(data) {
             if (data.includes('novu.sh')) {
               setBridgeURL(data.trim());
+              setContainerBridgeUrl(data.trim());
               setIsBridgeAppLoading(false);
             }
             writeOutput(data);
@@ -189,9 +197,9 @@ export const ContainerProvider: FCWithChildren = ({ children }) => {
 
     return () => clearTimeout(debounceTimeout);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [code, refetch]);
+  }, [code]);
 
-  const value = { terminalRef, code, setCode, isBridgeAppLoading, initializeWebContainer };
+  const value = { terminalRef, code, setCode, isBridgeAppLoading, initializeWebContainer, containerBridgeUrl };
 
   return <ContainerContext.Provider value={value}>{children}</ContainerContext.Provider>;
 };

apps/web/src/studio/hooks/useBridgeAPI.ts

@@ -34,7 +34,9 @@ export const useDiscover = (options?: any) => {
   const { refetch } = discoverQuery;
 
   useEffect(() => {
-    refetch();
+    if (!bridgeURL) {
+      refetch();
+    }
   }, [bridgeURL, setBridgeURL, refetch]);
 
   return discoverQuery;