feat(dashboard): Open step template drawer on Add Step

apps/dashboard/src/components/workflow-editor/channel-preferences-form.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { ChannelTypeEnum, UpdateWorkflowDto, WorkflowPreferences, WorkflowResponseDto } from '@novu/shared';
+import { ChannelTypeEnum, WorkflowPreferences, WorkflowResponseDto } from '@novu/shared';
 import { motion } from 'motion/react';
 import { useMemo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
@@ -9,6 +9,7 @@ import { z } from 'zod';
 
 import { SidebarContent, SidebarHeader } from '@/components/side-navigation/sidebar';
 import { UserPreferencesFormSchema } from '@/components/workflow-editor/schema';
+import { UpdateWorkflowFn } from '@/components/workflow-editor/workflow-provider';
 import { useTelemetry } from '@/hooks/use-telemetry';
 import { STEP_TYPE_TO_COLOR } from '@/utils/color';
 import { StepTypeEnum, WorkflowOriginEnum } from '@/utils/enums';
@@ -28,7 +29,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip';
 
 type ConfigureWorkflowFormProps = {
   workflow: WorkflowResponseDto;
-  update: (data: UpdateWorkflowDto) => void;
+  update: UpdateWorkflowFn;
 };
 
 const CHANNEL_LABELS_LOOKUP: Record<`${ChannelTypeEnum}` | 'all', string> = {
@@ -87,10 +88,12 @@ export const ChannelPreferencesForm = (props: ConfigureWorkflowFormProps) => {
 
   const updateUserPreference = (userPreferences: WorkflowPreferences | null) => {
     update({
-      ...workflow,
-      preferences: {
-        ...workflow.preferences,
-        user: userPreferences,
+      data: {
+        ...workflow,
+        preferences: {
+          ...workflow.preferences,
+          user: userPreferences,
+        },
       },
     });
 

apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx

@@ -18,6 +18,7 @@ import { ToastIcon } from '@/components/primitives/sonner';
 import { showToast } from '@/components/primitives/sonner-helpers';
 import { SidebarContent, SidebarHeader } from '@/components/side-navigation/sidebar';
 import { MAX_DESCRIPTION_LENGTH, workflowSchema } from '@/components/workflow-editor/schema';
+import { UpdateWorkflowFn } from '@/components/workflow-editor/workflow-provider';
 import { useEnvironment } from '@/context/environment/hooks';
 import { useDeleteWorkflow } from '@/hooks/use-delete-workflow';
 import { useFormAutosave } from '@/hooks/use-form-autosave';
@@ -26,7 +27,7 @@ import { useTags } from '@/hooks/use-tags';
 import { ROUTES } from '@/utils/routes';
 import { cn } from '@/utils/ui';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { UpdateWorkflowDto, WorkflowOriginEnum, WorkflowResponseDto } from '@novu/shared';
+import { WorkflowOriginEnum, WorkflowResponseDto } from '@novu/shared';
 import {
   RiArrowRightSLine,
   RiCodeSSlashLine,
@@ -55,7 +56,7 @@ import { usePromotionalBanner } from '../promotional/coming-soon-banner';
 
 type ConfigureWorkflowFormProps = {
   workflow: WorkflowResponseDto;
-  update: (data: UpdateWorkflowDto) => void;
+  update: UpdateWorkflowFn;
 };
 
 const toastOptions: ExternalToast = {
@@ -133,7 +134,7 @@ export const ConfigureWorkflowForm = (props: ConfigureWorkflowFormProps) => {
   });
 
   const { onBlur, saveForm } = useFormAutosave({
-    previousData: workflow,
+    previousData: { data: workflow },
     form,
     isReadOnly,
     save: update,

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

@@ -1,8 +1,11 @@
-import { BaseEdge, Edge, EdgeLabelRenderer, EdgeProps, getBezierPath } from '@xyflow/react';
-import { AddStepMenu } from './add-step-menu';
+import { createStep } from '@/components/workflow-editor/step-utils';
 import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
+import { AUTO_OPEN_DRAWER_AFTER_CREATION_STEP_TYPES } from '@/utils/constants';
+import { buildRoute, ROUTES } from '@/utils/routes';
 import { WorkflowOriginEnum } from '@novu/shared';
-import { createStep } from '@/components/workflow-editor/step-utils';
+import { BaseEdge, Edge, EdgeLabelRenderer, EdgeProps, getBezierPath } from '@xyflow/react';
+import { useNavigate } from 'react-router-dom';
+import { AddStepMenu } from './add-step-menu';
 
 export type AddNodeEdgeType = Edge<{ isLast: boolean; addStepIndex: number }>;
 
@@ -18,6 +21,7 @@ export function AddNodeEdge({
   markerEnd,
 }: EdgeProps<AddNodeEdgeType>) {
   const { workflow, update } = useWorkflow();
+  const navigate = useNavigate();
   const isReadOnly = workflow?.origin === WorkflowOriginEnum.EXTERNAL;
 
   const [edgePath, labelX, labelY] = getBezierPath({
@@ -47,7 +51,7 @@ export function AddNodeEdge({
           >
             {!isReadOnly && (
               <AddStepMenu
-                onMenuItemClick={(stepType) => {
+                onMenuItemClick={async (stepType) => {
                   if (workflow) {
                     const indexToAdd = data.addStepIndex;
 
@@ -60,8 +64,20 @@ export function AddNodeEdge({
                     ];
 
                     update({
-                      ...workflow,
-                      steps: updatedSteps,
+                      data: {
+                        ...workflow,
+                        steps: updatedSteps,
+                      },
+                      onSuccess: (data) => {
+                        if (AUTO_OPEN_DRAWER_AFTER_CREATION_STEP_TYPES.includes(stepType)) {
+                          navigate(
+                            buildRoute(ROUTES.EDIT_STEP_TEMPLATE, {
+                              workflowSlug: workflow.slug,
+                              stepSlug: data.steps[indexToAdd].slug,
+                            })
+                          );
+                        }
+                      },
                     });
                   }
                 }}

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

@@ -1,15 +1,17 @@
 import { createStep } from '@/components/workflow-editor/step-utils';
 import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
 import { STEP_TYPE_TO_COLOR } from '@/utils/color';
+import { AUTO_OPEN_DRAWER_AFTER_CREATION_STEP_TYPES } from '@/utils/constants';
 import { StepTypeEnum } from '@/utils/enums';
 import { buildRoute, ROUTES } from '@/utils/routes';
 import { getWorkflowIdFromSlug, STEP_DIVIDER } from '@/utils/step';
 import { cn } from '@/utils/ui';
 import { WorkflowOriginEnum } from '@novu/shared';
 import { Node as FlowNode, Handle, NodeProps, Position } from '@xyflow/react';
+import { steps } from 'motion/react';
 import { ComponentProps } from 'react';
 import { RiPlayCircleLine } from 'react-icons/ri';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { STEP_TYPE_TO_ICON } from '../icons/utils';
 import { AddStepMenu } from './add-step-menu';
 import { Node, NodeBody, NodeError, NodeHeader, NodeIcon, NodeName } from './base-node';
@@ -242,6 +244,7 @@ export const CustomNode = (props: NodeProps<NodeType>) => {
 
 export const AddNode = (_props: NodeProps<NodeType>) => {
   const { workflow, update } = useWorkflow();
+  const navigate = useNavigate();
   if (!workflow) {
     return null;
   }
@@ -257,7 +260,19 @@ export const AddNode = (_props: NodeProps<NodeType>) => {
       <AddStepMenu
         visible
         onMenuItemClick={(stepType) => {
-          update({ ...workflow, steps: [...workflow.steps, createStep(stepType)] });
+          update({
+            data: { ...workflow, steps: [...workflow.steps, createStep(stepType)] },
+            onSuccess: (data) => {
+              if (AUTO_OPEN_DRAWER_AFTER_CREATION_STEP_TYPES.includes(stepType)) {
+                navigate(
+                  buildRoute(ROUTES.EDIT_STEP_TEMPLATE, {
+                    workflowSlug: workflow.slug,
+                    stepSlug: data.steps[steps.length - 1].slug,
+                  })
+                );
+              }
+            },
+          });
         }}
       />
     </div>

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

@@ -3,7 +3,6 @@ import {
   StepDataDto,
   StepTypeEnum,
   StepUpdateDto,
-  UpdateWorkflowDto,
   WorkflowOriginEnum,
   WorkflowResponseDto,
 } from '@novu/shared';
@@ -39,6 +38,7 @@ import { ConfigurePushStepPreview } from '@/components/workflow-editor/steps/pus
 import { SaveFormContext } from '@/components/workflow-editor/steps/save-form-context';
 import { SdkBanner } from '@/components/workflow-editor/steps/sdk-banner';
 import { ConfigureSmsStepPreview } from '@/components/workflow-editor/steps/sms/configure-sms-step-preview';
+import { UpdateWorkflowFn } from '@/components/workflow-editor/workflow-provider';
 import { useFormAutosave } from '@/hooks/use-form-autosave';
 import {
   AUTOCOMPLETE_PASSWORD_MANAGERS_OFF,
@@ -77,7 +77,7 @@ type ConfigureStepFormProps = {
   workflow: WorkflowResponseDto;
   environment: IEnvironment;
   step: StepDataDto;
-  update: (data: UpdateWorkflowDto) => void;
+  update: UpdateWorkflowFn;
 };
 
 export const ConfigureStepForm = (props: ConfigureStepFormProps) => {
@@ -104,7 +104,7 @@ export const ConfigureStepForm = (props: ConfigureStepFormProps) => {
   const isInlineConfigurableStepWithCustomControls = isInlineConfigurableStep && hasCustomControls;
 
   const onDeleteStep = () => {
-    update({ ...workflow, steps: workflow.steps.filter((s) => s._id !== step._id) });
+    update({ data: { ...workflow, steps: workflow.steps.filter((s) => s._id !== step._id) } });
     navigate(buildRoute(ROUTES.EDIT_WORKFLOW, { environmentSlug: environment.slug!, workflowSlug: workflow.slug }));
   };
 
@@ -144,7 +144,7 @@ export const ConfigureStepForm = (props: ConfigureStepFormProps) => {
         name: data.name,
         ...(data.controlValues ? { controlValues: data.controlValues } : {}),
       };
-      update(updateStepInWorkflow(workflow, step.stepId, updateStepData));
+      update({ data: updateStepInWorkflow(workflow, step.stepId, updateStepData) });
     },
   });
 

apps/dashboard/src/components/workflow-editor/steps/configure-step-template-form.tsx

@@ -1,24 +1,19 @@
+import { type StepDataDto, StepTypeEnum, StepUpdateDto, type WorkflowResponseDto } from '@novu/shared';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
-import {
-  type StepDataDto,
-  StepTypeEnum,
-  StepUpdateDto,
-  UpdateWorkflowDto,
-  type WorkflowResponseDto,
-} from '@novu/shared';
 
-import { flattenIssues, updateStepInWorkflow } from '@/components/workflow-editor/step-utils';
 import { Form } from '@/components/primitives/form/form';
-import { EmailTabs } from '@/components/workflow-editor/steps/email/email-tabs';
 import { getStepDefaultValues } from '@/components/workflow-editor/step-default-values';
+import { flattenIssues, updateStepInWorkflow } from '@/components/workflow-editor/step-utils';
+import { ChatTabs } from '@/components/workflow-editor/steps/chat/chat-tabs';
+import { CommonCustomControlValues } from '@/components/workflow-editor/steps/common/common-custom-control-values';
+import { EmailTabs } from '@/components/workflow-editor/steps/email/email-tabs';
 import { InAppTabs } from '@/components/workflow-editor/steps/in-app/in-app-tabs';
 import { PushTabs } from '@/components/workflow-editor/steps/push/push-tabs';
 import { SaveFormContext } from '@/components/workflow-editor/steps/save-form-context';
 import { SmsTabs } from '@/components/workflow-editor/steps/sms/sms-tabs';
-import { ChatTabs } from '@/components/workflow-editor/steps/chat/chat-tabs';
+import { UpdateWorkflowFn } from '@/components/workflow-editor/workflow-provider';
 import { useFormAutosave } from '@/hooks/use-form-autosave';
-import { CommonCustomControlValues } from '@/components/workflow-editor/steps/common/common-custom-control-values';
 
 const STEP_TYPE_TO_TEMPLATE_FORM: Record<StepTypeEnum, (args: StepEditorProps) => React.JSX.Element | null> = {
   [StepTypeEnum.EMAIL]: EmailTabs,
@@ -38,7 +33,7 @@ export type StepEditorProps = {
 };
 
 type ConfigureStepTemplateFormProps = StepEditorProps & {
-  update: (data: UpdateWorkflowDto) => void;
+  update: UpdateWorkflowFn;
 };
 
 export const ConfigureStepTemplateForm = (props: ConfigureStepTemplateFormProps) => {
@@ -58,7 +53,7 @@ export const ConfigureStepTemplateForm = (props: ConfigureStepTemplateFormProps)
       const updateStepData: Partial<StepUpdateDto> = {
         controlValues: data,
       };
-      update(updateStepInWorkflow(workflow, step.stepId, updateStepData));
+      update({ data: updateStepInWorkflow(workflow, step.stepId, updateStepData) });
     },
   });
 

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

@@ -2,33 +2,39 @@ import { PatchWorkflowDto, StepDataDto, UpdateWorkflowDto, WorkflowResponseDto }
 import { createContext, ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { useBlocker, useNavigate, useParams } from 'react-router-dom';
 
-import { useEnvironment } from '@/context/environment/hooks';
-import { useFetchWorkflow } from '@/hooks/use-fetch-workflow';
-import { useUpdateWorkflow } from '@/hooks/use-update-workflow';
-import { usePatchWorkflow } from '@/hooks/use-patch-workflow';
-import { createContextHook } from '@/utils/context';
-import { buildRoute, ROUTES } from '@/utils/routes';
-import { toast } from 'sonner';
-import { RiCloseFill } from 'react-icons/ri';
 import {
   AlertDialog,
-  AlertDialogHeader,
   AlertDialogContent,
-  AlertDialogTitle,
   AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
 } from '@/components/primitives/alert-dialog';
-import { RiAlertFill } from 'react-icons/ri';
-import { CheckCircleIcon } from 'lucide-react';
+import { useEnvironment } from '@/context/environment/hooks';
+import { useFetchWorkflow } from '@/hooks/use-fetch-workflow';
 import { useInvocationQueue } from '@/hooks/use-invocation-queue';
+import { usePatchWorkflow } from '@/hooks/use-patch-workflow';
+import { useUpdateWorkflow } from '@/hooks/use-update-workflow';
+import { createContextHook } from '@/utils/context';
+import { buildRoute, ROUTES } from '@/utils/routes';
+import { getWorkflowIdFromSlug, STEP_DIVIDER } from '@/utils/step';
+import { CheckCircleIcon } from 'lucide-react';
+import { RiAlertFill, RiCloseFill } from 'react-icons/ri';
+import { toast } from 'sonner';
 import { showErrorToast, showSavingToast, showSuccessToast } from './toasts';
-import { STEP_DIVIDER } from '@/utils/step';
-import { getWorkflowIdFromSlug } from '@/utils/step';
+
+export type UpdateWorkflowFn = ({
+  data,
+  onSuccess,
+}: {
+  data: UpdateWorkflowDto;
+  onSuccess?: (workflow: WorkflowResponseDto) => void;
+}) => void;
 
 export type WorkflowContextType = {
   isPending: boolean;
   workflow?: WorkflowResponseDto;
   step?: StepDataDto;
-  update: (data: UpdateWorkflowDto) => void;
+  update: UpdateWorkflowFn;
   patch: (data: PatchWorkflowDto) => void;
 };
 
@@ -105,9 +111,13 @@ export const WorkflowProvider = ({ children }: { children: ReactNode }) => {
   const isUpdatePatchPending = isPatchPending || isUpdatePending || hasPendingItems;
 
   const update = useCallback(
-    (data: UpdateWorkflowDto) => {
+    ({ data, onSuccess }: { data: UpdateWorkflowDto; onSuccess?: (workflow: WorkflowResponseDto) => void }) => {
       if (workflow) {
-        enqueue(() => updateWorkflow({ workflowSlug: workflow.slug, workflow: { ...data } }));
+        enqueue(async () => {
+          const res = await updateWorkflow({ workflowSlug: workflow.slug, workflow: { ...data } });
+          onSuccess?.(res);
+          return res;
+        });
       }
     },
     [enqueue, updateWorkflow, workflow]

apps/dashboard/src/utils/constants.ts

@@ -28,6 +28,14 @@ export const STEP_TYPE_LABELS: Record<StepTypeEnum, string> = {
   [StepTypeEnum.CUSTOM]: 'Custom',
 };
 
+export const AUTO_OPEN_DRAWER_AFTER_CREATION_STEP_TYPES: StepTypeEnum[] = [
+  StepTypeEnum.EMAIL,
+  StepTypeEnum.SMS,
+  StepTypeEnum.IN_APP,
+  StepTypeEnum.CHAT,
+  StepTypeEnum.PUSH,
+];
+
 export const DEFAULT_CONTROL_DELAY_AMOUNT = 30;
 export const DEFAULT_CONTROL_DELAY_UNIT = TimeUnitEnum.SECONDS;
 export const DEFAULT_CONTROL_DELAY_TYPE = 'regular';