novu [NV-2610] 🏗️ Provide the ability to rearrange steps in a workflow

What?

WF editor steps order

Why?

Currently, users won't be able to rearrange step orders, so if they make a mistake and put a step into the wrong order, they may just create a new step in the desired place of a workflow. But he needs to fill in all the metadata for that step all over again. We assume that UX where UI prompts users to do double work in case they made a mistake with a steps order might be confusing.

How?

Allow users to reorder steps by drag and drop.

MECHANICS

User hover over a step
UI display D&D hover icon near a step
User clicks on the icon and drags it Up or Down
When the step becomes closer than distance 8px to its neighbor, they switch places.
The dragged step takes the place of its neighbor, the neighbor takes the place of a step that was dragged

Example

Re-order steps - Workflow create/edit (Figma)

_{From SyncLinear.com | NV-2610}

Jul 25 '23 15:07 scopsy

/bounty 70

Jul 25 '23 15:07 scopsy

💎 $70 bounty • Novu

Steps to solve:

Start working: Comment /attempt #3854 with your implementation plan
Submit work: Create a pull request including /claim #3854 in the PR body to claim the bounty
Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to novuhq/novu!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🔴 @Wholesomebruh	Jul 25, 2023, 3:26:05 PM	WIP
🔴 @Ashutosh-Bhadauriya	Jul 25, 2023, 5:11:41 PM	WIP
🔴 @feliciien	Jul 25, 2023, 9:16:06 PM	WIP
🟢 @Vivek7038	Jul 26, 2023, 3:57:29 PM	WIP
🟢 @madoyi	Aug 1, 2023, 5:53:38 PM	WIP
🟢 @KarthikRaju391	Aug 7, 2023, 6:10:54 AM	WIP
🟢 @gitstart	Aug 14, 2023, 2:11:14 PM	WIP
🔴 @kunal00000	Aug 26, 2023, 7:07:15 AM	WIP
🔴 @Sudarsh1010	Sep 1, 2023, 6:24:03 PM	WIP
🟢 @nitinshr135	Sep 20, 2023, 8:54:32 PM	WIP
🟢 @oceanofcode	Nov 9, 2023, 1:01:31 AM	WIP
🔴 @karthiknadar1204	Nov 23, 2023, 12:46:30 PM	WIP
🔴 @hrshkshri	Nov 28, 2023, 8:24:10 PM	WIP
🟢 @gtanchak	Dec 20, 2023, 3:16:26 PM	WIP
🟢 @oleksandr-shvets	Feb 28, 2024, 2:26:03 PM	WIP

Jul 25 '23 15:07 algora-pbc[bot]

can I work on this?

Jul 25 '23 16:07 feliciien

/attempt #3854

Jul 25 '23 17:07 Ashutosh-Bhadauriya

Note: The user @Wholesomebruh is already attempting to complete issue #3854 and claim the bounty. If you attempt to complete the same issue, there is a chance that @Wholesomebruh will complete the issue first, and be awarded the bounty. We recommend discussing with @Wholesomebruh and potentially collaborating on the same solution versus creating an alternate solution.

Jul 25 '23 17:07 algora-pbc[bot]

/attempt #3854

Jul 25 '23 21:07 feliciien

@Ashutosh-Bhadauriya please notice on the figma link with the design specification for this task 🙏 If access is missing please let me know

Jul 26 '23 09:07 scopsy

@scopsy thanks for asking. Yes, I have view access to the file.

Jul 26 '23 09:07 Ashutosh-Bhadauriya

/attempt #3854