From 899d78a355b95ae058d2c4e9845cefc598cb2e07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Tymczuk?= <LetItRock@users.noreply.github.com>
Date: Wed, 13 Nov 2024 09:45:43 +0100
Subject: [PATCH] chore(dashboard): batch of small fixes (#6977)

---
 .../src/components/workflow-editor/add-step-menu.tsx        | 2 +-
 .../src/components/workflow-editor/configure-workflow.tsx   | 2 ++
 apps/dashboard/src/components/workflow-editor/nodes.tsx     | 2 +-
 .../components/workflow-editor/steps/edit-step-sidebar.tsx  | 6 +++++-
 apps/dashboard/src/components/workflow-list.tsx             | 2 +-
 apps/dashboard/src/components/workflow-steps.tsx            | 4 ++--
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/components/workflow-editor/add-step-menu.tsx b/apps/dashboard/src/components/workflow-editor/add-step-menu.tsx
index a8afc524d68..9c637cc0962 100644
--- a/apps/dashboard/src/components/workflow-editor/add-step-menu.tsx
+++ b/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>
diff --git a/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx b/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
index 860e57cf4cf..0b9174ed6e3 100644
--- a/apps/dashboard/src/components/workflow-editor/configure-workflow.tsx
+++ b/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>
diff --git a/apps/dashboard/src/components/workflow-editor/nodes.tsx b/apps/dashboard/src/components/workflow-editor/nodes.tsx
index a93228d0b9d..1bc347ede23 100644
--- a/apps/dashboard/src/components/workflow-editor/nodes.tsx
+++ b/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
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 83e29916aeb..aa3c96b670d 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
@@ -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' });
diff --git a/apps/dashboard/src/components/workflow-list.tsx b/apps/dashboard/src/components/workflow-list.tsx
index 4419764bdd0..ba4fb6e895d 100644
--- a/apps/dashboard/src/components/workflow-list.tsx
+++ b/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} />
               ))}
             </>
           )}
diff --git a/apps/dashboard/src/components/workflow-steps.tsx b/apps/dashboard/src/components/workflow-steps.tsx
index 4711097bb70..74a395989cb 100644
--- a/apps/dashboard/src/components/workflow-steps.tsx
+++ b/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>}
       </>