Add a Drag & Drop UI API workflow builder & runner

[ashitaprasad]

Tell us about the task you want to perform and are unable to do so because the feature is not available Adding an API Workflow Builder in API Dash can simplify API testing and automation by offering a visual interface for creating, managing, and executing test workflows. With drag-and-drop functionality, users can design complex scenarios involving multiple API requests, data transformations, and validations without writing extensive code. The tool should include the capability of dynamic data handling and iteration over datasets for the test workflows to run at scale. Comprehensive monitoring and reporting capabilities should also be included to provide insights into test execution results and performance metrics, aiding in analysis and decision-making.

This will be a completely new section accessible via a new item in the navigation rail on the left.

[ShRudra88]

Hi @ashitaprasad I am new in this project. Please tell me details what I have to do?

[animator]

@ShRudra88 Are you familiar with Zapier or Node-RED. Something along those lines to build drag & Drop API workflows.

[thesakshidiggikar]

I would like to contribute to this project as I thoroughly went through documentation. did some research about the project notes about what are the pros and cons of the project. made setup at my desktop also but to whom should I communicate? about it , like i would like to discuss issues which I have @ashitaprasad

[ashitaprasad]

@thesakshidiggikar , please feel free to raise issues, highlight your research in the issues and then you can work on it and send across a PR for review.

[chiragtyagi2003]

Hi Maintainers, I have reviewed the issue and have some ideas about how they can be implemented in Flutter. Please provide what do you require for review.

[animator]

@chiragtyagi2003 you can add your mockups and how will you implement the feature in this issue thread. We will review it and provide feedback.

[chiragtyagi2003]

Hi @animator and @ashitaprasad , I apologize I had some other time-bound engagements and was searching some ways to implement this new feature. Starting with the drag and drop feature:

1. I propose to use Flutter's built in functionality for gesture detection to detect drag and drop actions and allowing the users to interact with custom Draggable widgets into the drop zones for which we can build some custom DragTarget Widgets.
2. For State Management I propose to use "bloc", keeping in mind the performance factor from early design and development stages.
3. I also reviewed NODE-RED and Zapier as @animator has mentioned above, using JSON to store the flows and thus making them easier to import/export, in my opinion would be better.

These are only some starting points, kindly review them so I could get a more clear idea of your expectations and thus tailor the proposal to your needs. Thanks.

[animator]

@chiragtyagi2003 We use riverpod for state management and we will stick to it. You can send across a PR with some prototype implementation and we can discuss further on your approach.

[chiragtyagi2003]

@animator OK sure, I will incorporate Riverpod.

[chiragtyagi2003]

Hi @animator, I am currently developing this drag and drop feature for the mobile app, is that fine?

[animator]

@chiragtyagi2003 We currently do not have a mobile app. You can add the feature to work on our current desktop app and send across a PR.

[Bis-hop]

Happy to be here, this is something I have always wanted to dive in but didn't have that opportunity and starting point.Have followed up the conversation and now I feel at home

[PratyushChauhan]

I think this is a cool feature, I'm working a bit on the design in my spare time.

Check here : https://www.figma.com/file/UmieMf0iLVp5sS6unVM8z3/apiDashWorkflowBuilder?type=design&node-id=0%3A1&mode=design&t=I9wLYOy4q33ilYLN-1

[ashitaprasad]

@PratyushChauhan Looks good ... is it possible to write some code to implement what you showcased in Figma.

[PratyushChauhan]

@ashitaprasad Yeah I believe it can be done. I will be experimenting with this library to implement the editor window widget:

[ashitaprasad]

@PratyushChauhan you can also take a look at this package - https://pub.dev/packages/node_editor