apidash icon indicating copy to clipboard operation
apidash copied to clipboard

Add a Drag & Drop UI API workflow builder & runner

Open ashitaprasad opened this issue 1 year ago • 26 comments

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.

ashitaprasad avatar Feb 22 '24 00:02 ashitaprasad

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

ShRudra88 avatar Feb 23 '24 19:02 ShRudra88

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

animator avatar Feb 23 '24 23:02 animator

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

thesakshidiggikar avatar Mar 03 '24 06:03 thesakshidiggikar

@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.

ashitaprasad avatar Mar 03 '24 06:03 ashitaprasad

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.

chiragtyagi2003 avatar Mar 12 '24 09:03 chiragtyagi2003

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

animator avatar Mar 12 '24 09:03 animator

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.

chiragtyagi2003 avatar Mar 15 '24 10:03 chiragtyagi2003

@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.

animator avatar Mar 15 '24 10:03 animator

@animator OK sure, I will incorporate Riverpod.

chiragtyagi2003 avatar Mar 15 '24 17:03 chiragtyagi2003

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

chiragtyagi2003 avatar Mar 20 '24 13:03 chiragtyagi2003

@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.

animator avatar Mar 20 '24 18:03 animator

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

Bis-hop avatar Mar 24 '24 23:03 Bis-hop

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

PratyushChauhan avatar Apr 01 '24 10:04 PratyushChauhan

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

ashitaprasad avatar Apr 01 '24 15:04 ashitaprasad

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

PratyushChauhan avatar Apr 01 '24 15:04 PratyushChauhan

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

ashitaprasad avatar Apr 01 '24 16:04 ashitaprasad