chore(dashboard): use step slug in the url (#6854)

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<GeneratePreviewResponseDto> => {
   const { data } = await postV2<{ data: GeneratePreviewResponseDto }>(
-    `/workflows/${workflowSlug}/step/${stepId}/preview`,
+    `/workflows/${workflowSlug}/step/${stepSlug}/preview`,
     payload
   );
 

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<NodeType>) => {
   const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.EMAIL];
 
   return (
-    <Link to={`step/${data.stepId}`}>
+    <Link to={`step/${data.stepSlug}`}>
       <Node>
         <NodeHeader type={StepTypeEnum.EMAIL}>
           <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.EMAIL]}>
@@ -66,7 +66,7 @@ export const SmsNode = ({ data }: NodeProps<NodeType>) => {
   const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.SMS];
 
   return (
-    <Link to={`step/${data.stepId}`}>
+    <Link to={`step/${data.stepSlug}`}>
       <Node>
         <NodeHeader type={StepTypeEnum.SMS}>
           <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.SMS]}>
@@ -87,7 +87,7 @@ export const InAppNode = ({ data }: NodeProps<NodeType>) => {
   const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.IN_APP];
 
   return (
-    <Link to={buildRoute(ROUTES.CONFIGURE_STEP, { stepId: data.stepId ?? '' })}>
+    <Link to={buildRoute(ROUTES.CONFIGURE_STEP, { stepSlug: data.stepSlug ?? '' })}>
       <Node>
         <NodeHeader type={StepTypeEnum.IN_APP}>
           <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.IN_APP]}>
@@ -108,7 +108,7 @@ export const PushNode = ({ data }: NodeProps<NodeType>) => {
   const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.PUSH];
 
   return (
-    <Link to={`step/${data.stepId}`}>
+    <Link to={`step/${data.stepSlug}`}>
       <Node>
         <NodeHeader type={StepTypeEnum.PUSH}>
           <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.PUSH]}>
@@ -129,7 +129,7 @@ export const ChatNode = ({ data }: NodeProps<NodeType>) => {
   const Icon = STEP_TYPE_TO_ICON[StepTypeEnum.CHAT];
 
   return (
-    <Link to={`step/${data.stepId}`}>
+    <Link to={`step/${data.stepSlug}`}>
       <Node>
         <NodeHeader type={StepTypeEnum.CHAT}>
           <NodeIcon variant={STEP_TYPE_TO_COLOR[StepTypeEnum.CHAT]}>

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<StepResponseDto['slug']>('_stp_'),
       })
       .passthrough()
   ),

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));
               }

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<z.infer<typeof workflowSchema>>({ 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) {

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;

apps/dashboard/src/components/workflow-editor/steps/use-step.tsx

@@ -5,26 +5,26 @@ 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<z.infer<typeof workflowSchema>>();
   const steps = watch('steps');
 
   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,

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,

apps/dashboard/src/components/workflow-editor/workflow-editor-provider.tsx

@@ -34,6 +34,7 @@ const STEP_NAME_BY_TYPE: Record<StepTypeEnum, string> = {
 const createStep = (type: StepTypeEnum): Step => ({
   name: STEP_NAME_BY_TYPE[type],
   stepId: '',
+  slug: '_stp_',
   type,
   _id: crypto.randomUUID(),
 });

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) {

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<string, string>) => {

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<StepResponseDto, 'name' | 'type' | '_id' | 'stepId'> & {
+export type Step = Pick<StepResponseDto, 'name' | 'type' | '_id' | 'stepId' | 'slug'> & {
   issues?: {
     body: Record<string, RuntimeIssue[]>;
     control: Record<string, RuntimeIssue[]>;