chore(dashboard): batch of small fixes (#6977)

apps/dashboard/src/components/workflow-editor/add-step-menu.tsx

@@ -53,7 +53,7 @@ const MenuItem = ({
       <span className="text-xs">{children}</span>
       {disabled && (
         <Badge kind="pill" variant="soft" className="ml-auto opacity-40">
-          <BadgeContent variant="neutral">soon</BadgeContent>
+          <BadgeContent variant="neutral">coming soon</BadgeContent>
         </Badge>
       )}
     </span>

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

@@ -67,6 +67,7 @@ export function ConfigureWorkflow() {
           <FormField
             control={control}
             name="name"
+            defaultValue=""
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Workflow Name</FormLabel>
@@ -82,6 +83,7 @@ export function ConfigureWorkflow() {
           <FormField
             control={control}
             name="workflowId"
+            defaultValue=""
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Workflow Identifier</FormLabel>

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

@@ -235,7 +235,7 @@ export const AddNode = (_props: NodeProps<NodeType>) => {
   }
 
   return (
-    <div className="flex w-[300px] justify-center">
+    <div className="flex w-[300px] cursor-pointer justify-center">
       <Handle isConnectable={false} className={handleClassName} type="target" position={Position.Top} id="a" />
       <AddStepMenu
         visible

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

@@ -15,6 +15,7 @@ import { StepEditor } from '@/components/workflow-editor/steps/step-editor';
 import { useFetchStep } from '@/hooks/use-fetch-step';
 import { VisuallyHidden } from '@/components/primitives/visually-hidden';
 import { PageMeta } from '@/components/page-meta';
+import { getStepBase62Id } from '@/utils/step';
 
 const transitionSetting = { ease: [0.29, 0.83, 0.57, 0.99], duration: 0.4 };
 
@@ -27,7 +28,10 @@ export const EditStepSidebar = () => {
   });
 
   const { step } = useFetchStep({ workflowSlug, stepSlug });
-  const stepType = useMemo(() => workflow?.steps.find((el) => el.slug === stepSlug)?.type, [stepSlug, workflow]);
+  const stepType = useMemo(
+    () => workflow?.steps.find((el) => getStepBase62Id(el.slug) === getStepBase62Id(stepSlug))?.type,
+    [stepSlug, workflow]
+  );
 
   const handleCloseSidebar = () => {
     navigate('../', { relative: 'path' });

apps/dashboard/src/components/workflow-list.tsx

@@ -102,7 +102,7 @@ export const WorkflowList = () => {
           ) : (
             <>
               {workflowsQuery.data.workflows.map((workflow) => (
-                <WorkflowRow workflow={workflow} />
+                <WorkflowRow key={workflow._id} workflow={workflow} />
               ))}
             </>
           )}

apps/dashboard/src/components/workflow-steps.tsx

@@ -22,8 +22,8 @@ export const WorkflowSteps = (props: WorkflowStepsProps) => {
   return (
     <div className="flex items-center">
       <>
-        {firstSteps.map((step) => (
-          <WorkflowStep key={step} step={step} className="-ml-2 first-of-type:ml-0" />
+        {firstSteps.map((step, idx) => (
+          <WorkflowStep key={`${step}_${idx}`} step={step} className="-ml-2 first-of-type:ml-0" />
         ))}
         {restSteps.length > 1 && <Step className="-ml-2">+{restSteps.length}</Step>}
       </>