From 39a397d2628ea1da928a241af261d085ff2526af Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Mon, 20 Jan 2025 11:44:29 +0000
Subject: [PATCH] Add progress vertical bars to pipeline steps

---
 .../ApprovalWorkflows/WorkflowStep.tsx        | 90 ++++++++++---------
 .../ApprovalWorkflows/WorkflowStepNumber.tsx  |  2 +-
 .../ApprovalWorkflows/WorkflowStepSelects.tsx |  4 +-
 src/pages/approval-workflows/[id].tsx         |  2 +-
 4 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/components/ApprovalWorkflows/WorkflowStep.tsx b/src/components/ApprovalWorkflows/WorkflowStep.tsx
index f17a8574..7d6adf9f 100644
--- a/src/components/ApprovalWorkflows/WorkflowStep.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStep.tsx
@@ -57,61 +57,65 @@ export default function WorkflowStep({
     }
 
     return (
-        <div
-            className={clsx(
-                'flex items-center space-x-3 w-[800px] p-5 rounded-2xl border-2 border-mti-purple-ultralight',
-                { 'bg-mti-purple-ultralight': isSelected }
-            )}
-        >
-            <div className="flex w-full items-center">
-                <div className="flex items-center space-x-3">
-                    <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
-                    {stepNumber !== 1 && !finalStep &&
-                        <LuGripHorizontal className="cursor-grab active:cursor-grabbing" size={25} />
-                    }
-                </div>
 
-                {/* Only show selects if editView === true and stepType === 'approval-by' */}
-                {showSelects && (
-                    <div className="ml-auto">
-                        <WorkflowStepSelects
-                            // Provide any relevant options:
-                            leftOptions={teacherOptions}
-                            rightOptions={teacherOptions}
-                            leftValue={leftValue}
-                            rightValue={rightValue}
-                            onLeftChange={setLeftValue}
-                            onRightChange={setRightValue}
-                            leftPlaceholder={leftPlaceholder}
-                            rightPlaceholder={rightPlaceholder}
-                        />
-                    </div>
+        <div className="flex w-full">
+            <div className="flex flex-col items-center">
+                <WorkflowStepNumber number={stepNumber} isSelected={isSelected} />
+
+                {/* Vertical Bar connecting steps */}
+                {!finalStep && (
+                    <div className="w-1 h-10 bg-mti-purple-dark"></div>
                 )}
+            </div>
 
-                {stepNumber === 1 && (
-                    <div className="ml-auto">
-                        <div className={"flex flex-row gap-0"}>
-                            <div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-l-2xl border-mti-gray-platinum">
-                                <FaWpforms size={20} />
-                                <span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
-                            </div>
-                            <div className="flex items-center gap-0 text-mti-gray-dim w-[275px] px-5 py-3 border rounded-r-2xl border-mti-gray-platinum">
-                                <span className="text-sm font-normal focus:outline-none">Prof. X</span>
-                            </div>
+            {stepNumber !== 1 && !finalStep
+                ? <LuGripHorizontal className="ml-3 mt-2 cursor-grab active:cursor-grabbing" size={25} />
+                : <div className="ml-3 mt-2" style={{ width: 25, height: 25 }}></div>
+            }
+
+            {/* Only show selects if editView === true and stepType === 'approval-by' */}
+            {showSelects && (
+                <div className="ml-10">
+                    <WorkflowStepSelects
+                        leftOptions={teacherOptions}
+                        rightOptions={teacherOptions}
+                        leftValue={leftValue}
+                        rightValue={rightValue}
+                        onLeftChange={setLeftValue}
+                        onRightChange={setRightValue}
+                        leftPlaceholder={leftPlaceholder}
+                        rightPlaceholder={rightPlaceholder}
+                    />
+                </div>
+            )}
+
+            {stepNumber === 1 && (
+                <div className="ml-10">
+                    <div className={"flex flex-row gap-0"}>
+                        {/* h-[40px] probably is not the best way to match the height with the select component, but for now should be ok */}
+                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-l-2xl border-mti-gray-platinum">
+                            <FaWpforms size={20} />
+                            <span className="px-3 text-sm font-normal focus:outline-none">Form Intake</span>
+                        </div>
+                        <div className="flex items-center text-mti-gray-dim w-[275px] px-5 h-[40px] border rounded-r-2xl border-mti-gray-platinum">
+                            <span className="text-sm font-normal focus:outline-none">Prof. X</span>
                         </div>
                     </div>
-                )}
+                </div>
+            )}
 
-                {editView && stepNumber !== 1 && !finalStep && (
+            {editView && stepNumber !== 1 && !finalStep && (
+                <div className="ml-4 mt-2">
                     <button
                         data-tip="Delete"
-                        className="ml-4 cursor-pointer tooltip"
+                        className="cursor-pointer tooltip"
                         onClick={onDelete}
                     >
                         <BsTrash className="size-6 hover:text-mti-purple-light transition ease-in-out duration-300" />
                     </button>
-                )}
-            </div>
+                </div>
+            )}
         </div>
+
     );
 };
\ No newline at end of file
diff --git a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
index 93e75ca8..393f19b9 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepNumber.tsx
@@ -12,7 +12,7 @@ export default function WorkflowStepNumber({ number, isSelected = false }: Props
     return (
         <div
             className={clsx(
-                'flex items-center justify-center w-10 h-10 rounded-full',
+                'flex items-center justify-center w-11 h-11 rounded-full',
                 {
                     'bg-mti-purple text-mti-purple-ultralight': isSelected,
                     'bg-mti-purple-ultralight text-gray-500': !isSelected,
diff --git a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
index 78c5b10c..f96e3fc2 100644
--- a/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
+++ b/src/components/ApprovalWorkflows/WorkflowStepSelects.tsx
@@ -34,7 +34,7 @@ export default function WorkflowStepSelects({
                     onChange={onLeftChange}
                     placeholder={leftPlaceholder}
                     flat
-                    className={"px-2 py-1 rounded-none rounded-l-2xl"}
+                    className={"px-2 rounded-none rounded-l-2xl"}
                 />
             </div>
             {/* Right Select */}
@@ -45,7 +45,7 @@ export default function WorkflowStepSelects({
                     onChange={onRightChange}
                     placeholder={rightPlaceholder}
                     flat
-                    className="px-2 py-1 rounded-none rounded-r-2xl"
+                    className="px-2 rounded-none rounded-r-2xl"
                 />
             </div>
         </div>
diff --git a/src/pages/approval-workflows/[id].tsx b/src/pages/approval-workflows/[id].tsx
index f9f0d42f..d35af5ce 100644
--- a/src/pages/approval-workflows/[id].tsx
+++ b/src/pages/approval-workflows/[id].tsx
@@ -180,7 +180,7 @@ export default function Home({ approvalWorkflow }: { approvalWorkflow: ApprovalW
                                     axis="y"
                                     values={steps}
                                     onReorder={handleReorder}
-                                    className="flex flex-col gap-4"
+                                    className="flex flex-col gap-0"
                                 >
 
                                     <AnimatePresence>