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

novuhq · Dec 30, 2024 · 4eb716f · 4eb716f
1 parent d7f5cf2
commit 4eb716f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 35 deletions.
diff --git a/apps/dashboard/src/components/workflow-editor/edges.tsx b/apps/dashboard/src/components/workflow-editor/edges.tsx
@@ -1,8 +1,10 @@
-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 { 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 +20,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 +50,7 @@ export function AddNodeEdge({
           >
             {!isReadOnly && (
               <AddStepMenu
-                onMenuItemClick={(stepType) => {
+                onMenuItemClick={async (stepType) => {
                   if (workflow) {
                     const indexToAdd = data.addStepIndex;
 
@@ -60,8 +63,18 @@ export function AddNodeEdge({
                     ];
 
                     update({
-                      ...workflow,
-                      steps: updatedSteps,
+                      data: {
+                        ...workflow,
+                        steps: updatedSteps,
+                      },
+                      onSuccess: (data) => {
+                        navigate(
+                          buildRoute(ROUTES.EDIT_WORKFLOW, {
+                            workflowSlug: workflow.slug,
+                            stepSlug: data.steps[indexToAdd].slug,
+                          })
+                        );
+                      },
                     });
                   }
                 }}

diff --git a/apps/dashboard/src/components/workflow-editor/nodes.tsx b/apps/dashboard/src/components/workflow-editor/nodes.tsx
@@ -1,18 +1,19 @@
-import { Handle, Node as FlowNode, NodeProps, Position } from '@xyflow/react';
-import { RiPlayCircleLine } from 'react-icons/ri';
-import { Link, 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';
+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 { StepTypeEnum } from '@/utils/enums';
 import { buildRoute, ROUTES } from '@/utils/routes';
-import { ComponentProps } from 'react';
+import { getWorkflowIdFromSlug, STEP_DIVIDER } from '@/utils/step';
 import { cn } from '@/utils/ui';
-import { STEP_TYPE_TO_COLOR } from '@/utils/color';
-import { useWorkflow } from '@/components/workflow-editor/workflow-provider';
 import { WorkflowOriginEnum } from '@novu/shared';
-import { createStep } from '@/components/workflow-editor/step-utils';
-import { getWorkflowIdFromSlug, STEP_DIVIDER } from '@/utils/step';
+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, 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';
 
 export type NodeData = {
   addStepIndex?: number;
@@ -244,6 +245,7 @@ export const CustomNode = (props: NodeProps<NodeType>) => {
 
 export const AddNode = (_props: NodeProps<NodeType>) => {
   const { workflow, update } = useWorkflow();
+  const navigate = useNavigate();
   if (!workflow) {
     return null;
   }
@@ -259,7 +261,17 @@ 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) => {
+              navigate(
+                buildRoute(ROUTES.EDIT_STEP_TEMPLATE, {
+                  workflowSlug: workflow.slug,
+                  stepSlug: data.steps[steps.length - 1].slug,
+                })
+              );
+            },
+          });
         }}
       />
     </div>

diff --git a/apps/dashboard/src/components/workflow-editor/workflow-provider.tsx b/apps/dashboard/src/components/workflow-editor/workflow-provider.tsx
@@ -2,33 +2,37 @@ 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 WorkflowContextType = {
   isPending: boolean;
   workflow?: WorkflowResponseDto;
   step?: StepDataDto;
-  update: (data: UpdateWorkflowDto) => void;
+  update: ({
+    data,
+    onSuccess,
+  }: {
+    data: UpdateWorkflowDto;
+    onSuccess?: (workflow: WorkflowResponseDto) => void;
+  }) => void;
   patch: (data: PatchWorkflowDto) => void;
 };
 
@@ -105,9 +109,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]