diff --git a/apps/dashboard/src/api/workflows.ts b/apps/dashboard/src/api/workflows.ts index 5ac056237f2..f050e7dc3fe 100644 --- a/apps/dashboard/src/api/workflows.ts +++ b/apps/dashboard/src/api/workflows.ts @@ -56,14 +56,14 @@ export const updateWorkflow = async ({ export const previewStep = async ({ workflowSlug, payload, - stepId, + stepSlug, }: { workflowSlug: string; - stepId: string; + stepSlug: string; payload?: GeneratePreviewRequestDto; }): Promise => { const { data } = await postV2<{ data: GeneratePreviewResponseDto }>( - `/workflows/${workflowSlug}/step/${stepId}/preview`, + `/workflows/${workflowSlug}/step/${stepSlug}/preview`, payload ); diff --git a/apps/dashboard/src/components/workflow-editor/nodes.tsx b/apps/dashboard/src/components/workflow-editor/nodes.tsx index b6e952336e7..4c425279470 100644 --- a/apps/dashboard/src/components/workflow-editor/nodes.tsx +++ b/apps/dashboard/src/components/workflow-editor/nodes.tsx @@ -13,7 +13,7 @@ export type NodeData = { name?: string; content?: string; addStepIndex?: number; - stepId?: string; + stepSlug?: string; error?: string; }; @@ -45,7 +45,7 @@ export const EmailNode = ({ data }: NodeProps) => { const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.EMAIL]; return ( - + @@ -66,7 +66,7 @@ export const SmsNode = ({ data }: NodeProps) => { const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.SMS]; return ( - + @@ -87,7 +87,7 @@ export const InAppNode = ({ data }: NodeProps) => { const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.IN_APP]; return ( - + @@ -108,7 +108,7 @@ export const PushNode = ({ data }: NodeProps) => { const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.PUSH]; return ( - + @@ -129,7 +129,7 @@ export const ChatNode = ({ data }: NodeProps) => { const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.CHAT]; return ( - + diff --git a/apps/dashboard/src/components/workflow-editor/schema.ts b/apps/dashboard/src/components/workflow-editor/schema.ts index a12bcb027ce..96c21c672ff 100644 --- a/apps/dashboard/src/components/workflow-editor/schema.ts +++ b/apps/dashboard/src/components/workflow-editor/schema.ts @@ -1,5 +1,5 @@ import * as z from 'zod'; -import type { WorkflowTestDataResponseDto } from '@novu/shared'; +import type { StepResponseDto, WorkflowTestDataResponseDto } from '@novu/shared'; import { StepTypeEnum } from '@/utils/enums'; import { capitalize } from '@/utils/string'; @@ -30,6 +30,7 @@ export const workflowSchema = z.object({ type: z.nativeEnum(StepTypeEnum), _id: z.string(), stepId: z.string(), + slug: z.literal('_stp_'), }) .passthrough() ), diff --git a/apps/dashboard/src/components/workflow-editor/steps/configure-in-app-template/configure-in-app-step-template-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/configure-in-app-template/configure-in-app-step-template-preview.tsx index 6bfbb07ad8b..4ab3669af05 100644 --- a/apps/dashboard/src/components/workflow-editor/steps/configure-in-app-template/configure-in-app-step-template-preview.tsx +++ b/apps/dashboard/src/components/workflow-editor/steps/configure-in-app-template/configure-in-app-step-template-preview.tsx @@ -15,9 +15,9 @@ export const ConfigureInAppStepTemplatePreview = () => { const [editorValue, setEditorValue] = useState('{}'); const [isEditorOpen, setIsEditorOpen] = useState(true); const { previewStep, data } = usePreviewStep(); - const { workflowSlug, stepId } = useParams<{ + const { workflowSlug = '', stepSlug = '' } = useParams<{ workflowSlug: string; - stepId: string; + stepSlug: string; }>(); const [payloadError, setPayloadError] = useState(''); @@ -63,7 +63,7 @@ export const ConfigureInAppStepTemplatePreview = () => { className="self-end" onClick={() => { try { - previewStep({ workflowSlug: workflowSlug!, stepId: stepId!, payload: JSON.parse(editorValue) }); + previewStep({ workflowSlug, stepSlug, payload: JSON.parse(editorValue) }); } catch (e) { setPayloadError(String(e)); } diff --git a/apps/dashboard/src/components/workflow-editor/steps/edit-step-sidebar.tsx b/apps/dashboard/src/components/workflow-editor/steps/edit-step-sidebar.tsx index 686578a3fd3..603d25fa187 100644 --- a/apps/dashboard/src/components/workflow-editor/steps/edit-step-sidebar.tsx +++ b/apps/dashboard/src/components/workflow-editor/steps/edit-step-sidebar.tsx @@ -14,7 +14,7 @@ import { StepEditor } from './step-editor'; const transitionSetting = { ease: [0.29, 0.83, 0.57, 0.99], duration: 0.4 }; export const EditStepSidebar = () => { - const { workflowSlug = '', stepId = '' } = useParams<{ workflowSlug: string; stepId: string }>(); + const { workflowSlug = '', stepSlug = '' } = useParams<{ workflowSlug: string; stepSlug: string }>(); const navigate = useNavigate(); const form = useForm>({ mode: 'onSubmit', resolver: zodResolver(workflowSchema) }); const { reset, setError } = form; @@ -23,7 +23,7 @@ export const EditStepSidebar = () => { workflowSlug, }); - const step = useMemo(() => workflow?.steps.find((el) => el._id === stepId), [stepId, workflow]); + const step = useMemo(() => workflow?.steps.find((el) => el.slug === stepSlug), [stepSlug, workflow]); useLayoutEffect(() => { if (!workflow) { diff --git a/apps/dashboard/src/components/workflow-editor/steps/in-app/edit-step-in-app-preview.tsx b/apps/dashboard/src/components/workflow-editor/steps/in-app/edit-step-in-app-preview.tsx index 34a465a1500..a27e2479e87 100644 --- a/apps/dashboard/src/components/workflow-editor/steps/in-app/edit-step-in-app-preview.tsx +++ b/apps/dashboard/src/components/workflow-editor/steps/in-app/edit-step-in-app-preview.tsx @@ -5,16 +5,16 @@ import { InAppPreview } from '@/components/workflow-editor/in-app-preview'; export function EditStepInAppPreview() { const { previewStep, data } = usePreviewStep(); - const { workflowSlug, stepId } = useParams<{ + const { workflowSlug, stepSlug } = useParams<{ workflowSlug: string; - stepId: string; + stepSlug: string; }>(); useEffect(() => { - if (workflowSlug && stepId) { - previewStep({ workflowSlug, stepId }); + if (workflowSlug && stepSlug) { + previewStep({ workflowSlug, stepSlug }); } - }, [workflowSlug, stepId, previewStep]); + }, [workflowSlug, stepSlug, previewStep]); if (!data) { return null; diff --git a/apps/dashboard/src/components/workflow-editor/steps/use-step.tsx b/apps/dashboard/src/components/workflow-editor/steps/use-step.tsx index 67445300bb7..a97b362260c 100644 --- a/apps/dashboard/src/components/workflow-editor/steps/use-step.tsx +++ b/apps/dashboard/src/components/workflow-editor/steps/use-step.tsx @@ -5,8 +5,8 @@ import * as z from 'zod'; import { workflowSchema } from '../schema'; export const useStep = () => { - const { stepId = '' } = useParams<{ - stepId: string; + const { stepSlug = '' } = useParams<{ + stepSlug: string; }>(); const { watch, control } = useFormContext>(); @@ -14,17 +14,17 @@ export const useStep = () => { const step = useMemo(() => { if (Array.isArray(steps)) { - return steps.find((message) => message._id === stepId); + return steps.find((el) => el.slug === stepSlug); } return undefined; - }, [stepId, steps]); + }, [stepSlug, steps]); const stepIndex = useMemo(() => { if (Array.isArray(steps)) { - return steps.findIndex((message) => message._id === stepId); + return steps.findIndex((el) => el.slug === stepSlug); } return -1; - }, [stepId, steps]); + }, [stepSlug, steps]); return { step, diff --git a/apps/dashboard/src/components/workflow-editor/workflow-canvas.tsx b/apps/dashboard/src/components/workflow-editor/workflow-canvas.tsx index 09a34317aac..a8374f7a71a 100644 --- a/apps/dashboard/src/components/workflow-editor/workflow-canvas.tsx +++ b/apps/dashboard/src/components/workflow-editor/workflow-canvas.tsx @@ -70,7 +70,7 @@ const mapStepToNode = ( name: step.name, content, addStepIndex, - stepId: step._id, + stepSlug: step.slug, error, }, type: step.type, diff --git a/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx b/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx index 8c238a7cad6..0f2ead9ddf2 100644 --- a/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx +++ b/apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx @@ -34,6 +34,7 @@ const STEP_NAME_BY_TYPE: Record = { const createStep = (type: StepTypeEnum): Step => ({ name: STEP_NAME_BY_TYPE[type], stepId: '', + slug: '_stp_', type, _id: crypto.randomUUID(), }); diff --git a/apps/dashboard/src/context/environment/environment-provider.tsx b/apps/dashboard/src/context/environment/environment-provider.tsx index b9b49db5851..63d27df4e9a 100644 --- a/apps/dashboard/src/context/environment/environment-provider.tsx +++ b/apps/dashboard/src/context/environment/environment-provider.tsx @@ -1,7 +1,6 @@ import { useCallback, useLayoutEffect, useMemo, useState } from 'react'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; - -import { EnvironmentEnum, type IEnvironment } from '@novu/shared'; +import { type IEnvironment } from '@novu/shared'; import { getEnvironmentId, saveEnvironmentId } from '@/utils/environment'; import { buildRoute, ROUTES } from '@/utils/routes'; @@ -22,7 +21,7 @@ function selectEnvironment(environments: IEnvironment[], selectedEnvironmentSlug // Or pick the development environment if (!environment) { - environment = environments.find((env) => env.name === EnvironmentEnum.DEVELOPMENT); + environment = environments.find((env) => env.name === DEVELOPMENT_ENVIRONMENT); } if (!environment) { diff --git a/apps/dashboard/src/utils/routes.ts b/apps/dashboard/src/utils/routes.ts index 2fe41b18c77..373beefece3 100644 --- a/apps/dashboard/src/utils/routes.ts +++ b/apps/dashboard/src/utils/routes.ts @@ -7,8 +7,8 @@ export const ROUTES = { WORKFLOWS: '/env/:environmentSlug/workflows', EDIT_WORKFLOW: '/env/:environmentSlug/workflows/:workflowSlug', TEST_WORKFLOW: '/env/:environmentSlug/workflows/:workflowSlug/test', - CONFIGURE_STEP: 'steps/:stepId', - EDIT_STEP: 'steps/:stepId/edit', + CONFIGURE_STEP: 'steps/:stepSlug', + EDIT_STEP: 'steps/:stepSlug/edit', }; export const buildRoute = (route: string, params: Record) => { diff --git a/apps/dashboard/src/utils/types.ts b/apps/dashboard/src/utils/types.ts index 3b2457c94b0..8f2e8149c32 100644 --- a/apps/dashboard/src/utils/types.ts +++ b/apps/dashboard/src/utils/types.ts @@ -29,7 +29,7 @@ export type RuntimeIssue = { }; // TODO: update this when the API types are updated -export type Step = Pick & { +export type Step = Pick & { issues?: { body: Record; control: Record;