fix(web, dashboard): replace BridgeStatus type with HealthCheck type, provide state for preview

apps/dashboard/package.json

@@ -24,6 +24,7 @@
     "@codemirror/lang-liquid": "^6.2.1",
     "@hookform/resolvers": "^3.9.0",
     "@lezer/highlight": "^1.2.1",
+    "@novu/framework": "workspace:*",
     "@novu/react": "workspace:*",
     "@novu/shared": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.1",

apps/dashboard/src/api/bridge.ts

@@ -1,8 +1,7 @@
-import { BridgeStatus } from '@/utils/types';
+import type { HealthCheck } from '@novu/framework/internal';
 import { get, post } from './api.client';
-
 export const getBridgeHealthCheck = async () => {
-  const { data } = await get<{ data: BridgeStatus }>('/bridge/status');
+  const { data } = await get<{ data: HealthCheck }>('/bridge/status');
 
   return data;
 };

apps/dashboard/src/hooks/use-bridge-health-check.ts

@@ -1,17 +1,18 @@
 import { useQuery } from '@tanstack/react-query';
 import { getBridgeHealthCheck } from '@/api/bridge';
-import { BridgeStatus, ConnectionStatus } from '@/utils/types';
+import { ConnectionStatus } from '@/utils/types';
 import { QueryKeys } from '@/utils/query-keys';
 import { useMemo } from 'react';
 import { useEnvironment } from '@/context/environment/hooks';
+import type { HealthCheck } from '@novu/framework/internal';
 
 const BRIDGE_STATUS_REFRESH_INTERVAL_IN_MS = 10 * 1000;
 
 export const useBridgeHealthCheck = () => {
   const { currentEnvironment } = useEnvironment();
   const bridgeURL = currentEnvironment?.bridge?.url || '';
 
-  const { data, isLoading, error } = useQuery<BridgeStatus>({
+  const { data, isLoading, error } = useQuery<HealthCheck>({
     queryKey: [QueryKeys.bridgeHealthCheck, currentEnvironment?._id, bridgeURL],
     queryFn: getBridgeHealthCheck,
     enabled: !!bridgeURL,

apps/dashboard/src/utils/types.ts

@@ -1,13 +1,5 @@
 import type { StepResponseDto } from '@novu/shared';
 
-export type BridgeStatus = {
-  status: 'ok';
-  bridgeUrl?: string;
-  discovered: {
-    workflows: number;
-  };
-};
-
 export enum ConnectionStatus {
   CONNECTED = 'connected',
   DISCONNECTED = 'disconnected',

apps/web/src/bridgeApi/bridgeApi.client.ts

@@ -1,13 +1,6 @@
 import axios from 'axios';
 
-import type { DiscoverWorkflowOutput } from '@novu/framework/internal';
-
-export type StepPreviewParams = {
-  workflowId: string;
-  stepId: string;
-  payload: Record<string, unknown>;
-  controls: Record<string, unknown>;
-};
+import type { DiscoverWorkflowOutput, Event, ExecuteOutput, HealthCheck } from '@novu/framework/internal';
 
 export type TriggerParams = {
   workflowId: string;
@@ -19,14 +12,6 @@ export type TriggerParams = {
   };
 };
 
-export type BridgeStatus = {
-  status: 'ok';
-  bridgeUrl?: string;
-  discovered: {
-    workflows: number;
-  };
-};
-
 export function buildBridgeHTTPClient(baseURL: string) {
   const httpClient = axios.create({
     baseURL,
@@ -69,7 +54,7 @@ export function buildBridgeHTTPClient(baseURL: string) {
       });
     },
 
-    async healthCheck(): Promise<BridgeStatus> {
+    async healthCheck(): Promise<HealthCheck> {
       return get('', {
         action: 'health-check',
       });
@@ -78,7 +63,7 @@ export function buildBridgeHTTPClient(baseURL: string) {
     /**
      * TODO: Use framework shared types
      */
-    async getWorkflow(workflowId: string): Promise<any> {
+    async getWorkflow(workflowId: string): Promise<DiscoverWorkflowOutput | undefined> {
       const { workflows } = await this.discover();
 
       return workflows.find((workflow) => workflow.workflowId === workflowId);
@@ -87,10 +72,19 @@ export function buildBridgeHTTPClient(baseURL: string) {
     /**
      * TODO: Use framework shared types
      */
-    async getStepPreview({ workflowId, stepId, controls, payload }: StepPreviewParams): Promise<any> {
+    async getStepPreview({
+      workflowId,
+      stepId,
+      controls,
+      payload,
+      state,
+      subscriber,
+    }: Omit<Event, 'action'>): Promise<ExecuteOutput> {
       return post(`${baseURL}?action=preview&workflowId=${workflowId}&stepId=${stepId}`, {
         controls: controls || {},
         payload: payload || {},
+        state: state || [],
+        subscriber: subscriber || {},
       });
     },
 

apps/web/src/components/layout/components/BridgeStatus.tsx

@@ -2,6 +2,7 @@ import { Badge, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { Popover } from '@novu/design-system';
 import { useDisclosure } from '@mantine/hooks';
+import type { HealthCheck } from '@novu/framework/internal';
 import { api } from '../../../api/api.client';
 import { useEnvironment } from '../../../hooks';
 import { IS_SELF_HOSTED } from '../../../config';
@@ -11,11 +12,7 @@ export function BridgeStatus() {
 
   const { environment } = useEnvironment();
   const isBridgeEnabled = !!environment?.echo?.url && !IS_SELF_HOSTED;
-  const { data, error, isInitialLoading } = useQuery<{
-    status: 'ok' | 'down';
-    version: string;
-    discovered: { workflows: number };
-  }>(
+  const { data, error, isInitialLoading } = useQuery<HealthCheck>(
     ['/v1/bridge/status'],
     () => {
       return api.get('/v1/bridge/status');

apps/web/src/pages/studio-onboarding/components/SetupTimeline.tsx

@@ -4,7 +4,7 @@ import { IconCheck } from '@novu/novui/icons';
 import { Text } from '@novu/novui';
 import { css } from '@novu/novui/css';
 import { useColorScheme } from '@novu/design-system';
-import { BridgeStatus } from '../../../bridgeApi/bridgeApi.client';
+import type { HealthCheck } from '@novu/framework/internal';
 import { CodeSnippet } from '../../get-started/legacy-onboarding/components/CodeSnippet';
 import { useStudioState } from '../../../studio/StudioStateProvider';
 import { timelineRecipe } from './SetupTimeline.recipe';
@@ -20,7 +20,7 @@ const Icon = () => (
   />
 );
 
-export const SetupTimeline = ({ testResponse }: { testResponse: { isLoading: boolean; data: BridgeStatus } }) => {
+export const SetupTimeline = ({ testResponse }: { testResponse: { isLoading: boolean; data: HealthCheck } }) => {
   const { devSecretKey } = useStudioState();
   const [active, setActive] = useState(0);
   const { colorScheme } = useColorScheme();

apps/web/src/pages/studio-onboarding/index.tsx

@@ -3,13 +3,13 @@ import { useEffect } from 'react';
 import { Title, Text } from '@novu/novui';
 import { VStack } from '@novu/novui/jsx';
 import { useNavigate } from 'react-router-dom';
+import { HealthCheck } from '@novu/framework/internal';
 import { Footer } from './components/Footer';
 import { Header } from './components/Header';
 import { SetupTimeline } from './components/SetupTimeline';
 import { Wrapper } from './components/Wrapper';
 import { ROUTES } from '../../constants/routes';
 import { useHealthCheck } from '../../studio/hooks/useBridgeAPI';
-import { BridgeStatus } from '../../bridgeApi/bridgeApi.client';
 import { useStudioState } from '../../studio/StudioStateProvider';
 import { capitalizeFirstLetter } from '../../utils/string';
 import { setNovuOnboardingStepCookie } from '../../utils';
@@ -62,7 +62,7 @@ export const StudioOnboarding = () => {
             Send your first email notification, by connecting to your Novu Bridge Endpoint. This setup will create a
             sample Next.js project with a pre-configured <code>@novu/framework</code>.
           </Text>
-          <SetupTimeline testResponse={{ data: data as BridgeStatus, isLoading }} />
+          <SetupTimeline testResponse={{ data: data as HealthCheck, isLoading }} />
         </div>
       </VStack>
       <Footer

apps/web/src/pages/studio-onboarding/preview.tsx

@@ -1,11 +1,11 @@
-import { Prism } from '@mantine/prism';
-import { errorMessage, Tabs } from '@novu/design-system';
+import { errorMessage } from '@novu/design-system';
 import { css } from '@novu/novui/css';
 import { useEffect, useMemo, useState } from 'react';
 import { createSearchParams, useNavigate } from 'react-router-dom';
 import { VStack } from '@novu/novui/jsx';
 import { Text, Title } from '@novu/novui';
 import { isAxiosError } from 'axios';
+import type { ExecuteOutput } from '@novu/framework/internal';
 // TODO: This indicates that all onboarding pages for studio should move under the "Studio" folder
 import { useWorkflowTrigger, useDiscover, useWorkflowPreview } from '../../studio/hooks/useBridgeAPI';
 import { Footer } from './components/Footer';
@@ -23,7 +23,6 @@ export const StudioOnboardingPreview = () => {
   const [controls, setStepControls] = useState({});
   const [payload, setPayload] = useState({});
   const { testUser } = useStudioState();
-  const [tab, setTab] = useState<string>('Preview');
   const track = useTelemetry();
   const navigate = useNavigate();
   const { data: bridgeResponse, isLoading: isLoadingList } = useDiscover();
@@ -154,7 +153,7 @@ export const StudioOnboardingPreview = () => {
                 source="studio"
                 error={null}
                 step={step}
-                preview={preview}
+                preview={preview as ExecuteOutput}
                 isLoadingPreview={previewLoading || isLoadingList}
               />
               <WorkflowStepEditorControlsPanel

apps/web/src/studio/components/workflows/WorkflowNotFound.tsx

@@ -0,0 +1,12 @@
+import { Text } from '@novu/novui';
+import { PageContainer } from '../../layout';
+
+export const WorkflowNotFound = () => {
+  return (
+    <PageContainer>
+      <Text color={'typography.text.secondary'} textAlign={'center'}>
+        Workflow not found
+      </Text>
+    </PageContainer>
+  );
+};

apps/web/src/studio/components/workflows/node-view/WorkflowsDetailPage.tsx

@@ -1,11 +1,10 @@
 import { Skeleton } from '@mantine/core';
-import { IconButton } from '@novu/novui';
+import { IconButton, Text } from '@novu/novui';
 import { css } from '@novu/novui/css';
 import { IconCable, IconPlayArrow, IconSettings } from '@novu/novui/icons';
 import { HStack, Stack } from '@novu/novui/jsx';
 import { token } from '@novu/novui/tokens';
 import { useEffect, useState } from 'react';
-import type { DiscoverWorkflowOutput } from '@novu/framework/internal';
 import { useTelemetry } from '../../../../hooks/useNovuAPI';
 import { useWorkflow } from '../../../hooks/useBridgeAPI';
 import { useStudioWorkflowsNavigation } from '../../../hooks/useStudioWorkflowsNavigation';
@@ -18,6 +17,7 @@ import { WorkflowDetailFormContextProvider } from '../preferences/WorkflowDetail
 import { WorkflowBackgroundWrapper } from './WorkflowBackgroundWrapper';
 import { WorkflowFloatingMenu } from './WorkflowFloatingMenu';
 import { WorkflowNodes } from './WorkflowNodes';
+import { WorkflowNotFound } from '../WorkflowNotFound';
 
 const BaseWorkflowsDetailPage = () => {
   const { currentWorkflowId, goToStep, goToTest } = useStudioWorkflowsNavigation();
@@ -39,10 +39,11 @@ const BaseWorkflowsDetailPage = () => {
     return <WorkflowsContentLoading />;
   }
 
-  // After loading has completed, we can safely cast the workflow to DiscoverWorkflowOutput
-  const fetchedWorkflow = workflow as DiscoverWorkflowOutput;
+  if (!workflow) {
+    return <WorkflowNotFound />;
+  }
 
-  const title = fetchedWorkflow?.name || fetchedWorkflow.workflowId;
+  const title = workflow?.name || workflow.workflowId;
 
   return (
     <WorkflowsPageTemplate

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

@@ -3,8 +3,16 @@ import { Prism } from '@mantine/prism';
 import { Tabs } from '@novu/novui';
 import { IconOutlineCode, IconVisibility } from '@novu/novui/icons';
 import { VStack } from '@novu/novui/jsx';
-import { ButtonTypeEnum, inAppMessageFromBridgeOutputs, StepTypeEnum } from '@novu/shared';
+import { inAppMessageFromBridgeOutputs, StepTypeEnum } from '@novu/shared';
 import { css } from '@novu/novui/css';
+import type {
+  ChatOutput,
+  EmailOutput,
+  ExecuteOutput,
+  InAppOutput,
+  PushOutput,
+  SmsOutput,
+} from '@novu/framework/internal';
 import { PreviewWeb } from '../../../../components/workflow/preview/email/PreviewWeb';
 import { useActiveIntegrations } from '../../../../hooks';
 import {
@@ -17,7 +25,7 @@ import { MobileSimulator } from '../../../../components/workflow/preview/common'
 import { ErrorPrettyRender } from '../../../../components/workflow/preview/ErrorPrettyRender';
 
 interface IWorkflowStepEditorContentPanelProps {
-  preview: any;
+  preview: ExecuteOutput;
   isLoadingPreview: boolean;
   error?: any;
   step: any;
@@ -94,7 +102,7 @@ export const PreviewStep = ({
   source,
 }: {
   channel: StepTypeEnum;
-  preview: any;
+  preview: ExecuteOutput;
   loadingPreview: boolean;
   source?: 'studio' | 'playground' | 'dashboard';
 }) => {
@@ -106,13 +114,15 @@ export const PreviewStep = ({
   const props = { locales: [], loading: loadingPreview, onLocaleChange: () => {} };
 
   switch (channel) {
-    case StepTypeEnum.EMAIL:
+    case StepTypeEnum.EMAIL: {
+      const previewOutputs = preview?.outputs as EmailOutput;
+
       return (
         <PreviewWeb
           source={source}
           integration={integration}
-          content={preview?.outputs?.body}
-          subject={preview?.outputs?.subject}
+          content={previewOutputs?.body}
+          subject={previewOutputs?.subject}
           classNames={{
             browser: css({ display: 'flex', flexDirection: 'column', gap: '0', flex: '1' }),
             content: css({ display: 'flex' }),
@@ -128,12 +138,16 @@ export const PreviewStep = ({
           {...props}
         />
       );
+    }
 
-    case StepTypeEnum.SMS:
-      return <SmsBasePreview content={preview?.outputs?.body} {...props} />;
+    case StepTypeEnum.SMS: {
+      const previewOutputs = preview?.outputs as SmsOutput;
+
+      return <SmsBasePreview content={previewOutputs?.body} {...props} />;
+    }
 
     case StepTypeEnum.IN_APP: {
-      const inAppMessage = inAppMessageFromBridgeOutputs(preview?.outputs);
+      const inAppMessage = inAppMessageFromBridgeOutputs(preview?.outputs as InAppOutput);
 
       return (
         <InAppBasePreview
@@ -148,24 +162,31 @@ export const PreviewStep = ({
       );
     }
 
-    case StepTypeEnum.CHAT:
-      return <ChatBasePreview content={preview?.outputs?.body} {...props} />;
+    case StepTypeEnum.CHAT: {
+      const previewOutputs = preview?.outputs as ChatOutput;
+
+      return <ChatBasePreview content={previewOutputs?.body} {...props} />;
+    }
+
+    case StepTypeEnum.PUSH: {
+      const previewOutputs = preview?.outputs as PushOutput;
 
-    case StepTypeEnum.PUSH:
       return (
         <MobileSimulator withBackground>
-          <PushBasePreview title={preview?.outputs?.subject} content={preview?.outputs?.body} {...props} />
+          <PushBasePreview title={previewOutputs?.subject} content={previewOutputs?.body} {...props} />
         </MobileSimulator>
       );
+    }
 
     case StepTypeEnum.DIGEST:
     case StepTypeEnum.DELAY:
-    case StepTypeEnum.CUSTOM:
+    case StepTypeEnum.CUSTOM: {
       return (
         <Prism styles={prismStyles} withLineNumbers language="javascript">
           {`${JSON.stringify(preview?.outputs, null, 2)}`}
         </Prism>
       );
+    }
 
     default:
       return <>Unknown Step</>;