Ideas/ Feature Requests for Keploy Cross Platform Extensions

[Akash-Singh04]

Hey people! This discussion thread is to serve as Ideas/Features request for Keploy's VsCode Extension.

Here is a link to the prototype extension: https://marketplace.visualstudio.com/items?itemName=Akash-Singh04.heykeploy

Note: It is a prototype extension to serve as a proof of concept to better understand the challenges we can face while developing this.

Project Goals

DEVELOP CROSS-PLATFORM EXTENSIONS

The objective of this proposal is to develop and deploy VS Code and IntelliJ plugins amongst other IDE plugins which are compatible across different operating systems and architectures via adapting to Docker functionality to facilitate deployment and operations in environments where native support for Keploy is not available yet.

STREAMLINED KEPLOY CLI OPERATIONS

The primary goal of the cross-platform extensions is to enhance user experience by integrating and managing Keploy’s CLI actions directly from the extension. This can be achieved via user generated config files, an implementation of which is given in the proposal using a Golang backend for unified CLI command execution.

• Extension as Keploy API Client for Recording and Replay:

The cross platform extensions are to serve as a client for seamless CLI actions of Keploy such as Recording and Testing directly from their preferred development environment via API calls to a custom GraphQL Server built using Golang.

• Interactive UI Elements with Widgets and Buttons:

The goal is to develop a user-friendly interface using the latest web technologies such as Svelte and Tailwind for Vs Code and using Java with Java Chromium Embedded Framework (JCEF) in combination with Native IDE Widgets to develop a maintainable UI for interacting with Keploy.

• Marketplace Deployment and Continuous Integration (CI):

The goal is to deploy extensions to various Marketplaces and implement a CI pipeline for automated testing, versioning, and releases. This goal has already been completed using Github Actions and the implementation is further elaborated upon below.

This thread will also contain Figma Designs to better improve the UI/UX. We can use the information gathered from this discussion to further build an IntelliJ Plugin for the same.

We can look at developing extensions for the following platforms:

• Vscode : Using Svelte, Tailwind, Typescript
• IntelliJ : Using Scala + Java Chromium Embedded Framework (JCEF)
• NeoVim : Using Lua

Please feel free to drop in suggestions/ references to developing extensions for these platforms.

Feel free to drop in UI improvements / Feature Requests / Idea suggestions to improve upon this.

[Sarthak160]

Hey @Akash-Singh04 ! The above goals seems to be VS Code specific. From couple of initial few lines. Overall we have to make extensions for other popular IDEs also like Jetbrain's IntelliJ.

For the UI/UX we can have a figma to outline of how the extension would look across the IDE's! Additionally, for the IntelliJ, the pre-requisite would be basic knowledge of JAVA.

[Sonichigo]

I think we should create milestones, and moving forward go step by step specifically for this project! Wdyt ?

[Akash-Singh04]

I agree with this. Let me re-iterate through the project goals to ensure we are correctly accomodating and planning for IntelliJ extensions as well. I am well versed with Java and have taken two university courses on java and built projects with it.

[Akash-Singh04]

I think since a proof of concept for Vscode is now ready,i can move onto building a sample deliverable for Intellij Plugin as well. It would better help me understand the challenges we will face during this project

[Sonichigo]

I think it's better to stablizie one first before moving to Intellij! Right now there are still issues with ui/ux, and functionality with VS Code extension! I think it's better to focus on one item at a time, and in parallel you can explore the how Intellij plugin works, pre-requisites and how to build one on a bit slower pace!

CC: @Sarthak160

[Akash-Singh04]

On top of IntelliJ extensions, Do you think this project scope can be expanded to include extension for NeoVIm as well? In which case the prerequisite would be Lua. What do you guys think?

[Sonichigo]

Definitely, it can be expanded to NeoVim, Replit, Zed etc... Although we may first need to check if root access can be provided by them or not through extensions! Secondly, what framework is required to build those extensions!

[Akash-Singh04]

This will require extensive research and building prototypes for them. Only then can we understand the challenges effectively in my opinion.

[Akash-Singh04]

As per my research, since neovim is a terminal based editor, we cant employ a webview in the extension. In which case, could we build a terminal based extension for Neovim? Then again, how would that necessarily improve the user experience in comparison to just running keploy on the terminal?

I suppose we can include some quick shortcuts to keploy commands which will allow the user to quickly select the folder and enter the app command and we can run keploy from the extension and then display the results/recorded test cases for them.

Let me know what improvements can be made here/is it a feasible addition to the project goals

CC: @Sonichigo @Sarthak160

[Akash-Singh04]

I had a doubt regarding the implementation of this. When the extension makes an API Call to Keploy, would we want to have the terminal instance run in the development environment's terminal (Such as Vscode's terminal) or in a separate terminal window?

Deciding this would be crucial as to how we design the workflow of the extension. In my prototype, we are runnning it on Vscode's native terminal but it has certain limitations such as having to develop separate bash scripts for getting terminal output, performance issues etc.

Moreover, if we plan on using a separate terminal window, a uniform Golang backend can be made that serves API endpoints, which would help us developing cross-platform extensions much more easily.

As a matter of fact, developing a backend script using Golang here would help us develop more extensions on various platforms without having to worry about platform specific requirements on each one as it would require only API calls to the server.

Let me know your thoughts on this, @Sarthak160 @Sonichigo

[Akash-Singh04]

[Sonichigo]

I think this was discussed here:- https://github.com/orgs/keploy/discussions/1654#discussioncomment-8695485

[Sarthak160]

Hey @Akash-Singh04, For now we can implement the record and replay functionality using CLI only. Later we can create a graphQL server which will send api calls to keploy for record and replay. Even now for coverage purposes we initialise a graphQL server which receives the api calls from different SDKs which start a test run along with native unit testing framework. But implementing graphql server before Gsoc might be overkill. So for now you can implement a UI/UX first and then run the cli commands instead.

[Akash-Singh04]

Thank you so much for the guidance! I now understand the course of action

[Akash-Singh04]

Hey @Sarthak160 , I was looking through graphQL server as you had mentioned. I can see that it receives API calls from different SDK's and then runs the relevant Keploy functions and returns the data. I was wondering how will we build a similar functionality for our extensions.

Logically the flow would be extension calls -> graphQL api -> executes keploy function -> returns data. The question being how exactly will we execute the keploy function? Through a spawned terminal or a hidden terminal where we execute the CLI command. Or rather we would bundle this GraphQL server with keploy so that it can listen for API calls and then record and replay?

Any guidance on how I can approach this would be greatly greatly appreciated! Thank you for your time

[Sarthak160]

Yes @Akash-Singh04 , We can add more functionality around the current graphql server which is already bundled with keploy through which we can send the API calls via our extension. Mainly when user will click on the record functionality of our extension, it will trigger keploy and which will then start the application. So user can provide it's app command or init script to extensions UI flow would be like-> keploy extension (will make API calls)-> Keploy Proxy -> start the application. Also have to think about this more if it would be flexible or just taking some inputs from the user through UI and executing it via VS code terminal (current approach) will look better .

[Akash-Singh04]

I agree @Sarthak160 . What i think we can do is have a combination of both the approaches. As of now we need to use custom scripts to get the data from the terminal such as recorded test cases or test results. If we employ the graphQL server, we can easily return the necessary data from the terminal to display it in the webview whilst running the terminal inside the development environment (vscode terminal or IntelliJ terminal).

[Akash-Singh04]

Hey @Sarthak160 @Sonichigo , I have prepared Figma Designs for the Vscode extension. Please have a look at it

Figma Link

[Sonichigo]

Have a couple of doubts on the functionailty part of Record/Test execution! What exactly user needs to provide (assuming he isn't using docker compose for database/application build) . Also the terminal will be of vscode or custom webview for Keploy ?

[Akash-Singh04]

According to the design and my experience in developing the prototype extension, The user would need to enter a minimum of

• The root folder containing the project (for example: samples-go/gin-mongo where the main.go file is located), this is acheived via opening a dialogue box and letting the user choose the path. Alternatively we can let the user enter the path manually in the input field as well.
• The app command to run the user application (for example: go run main.go app.go).

On top of this, we have an input field for setting flags is optional. After collecting all of these inputs the command to run keploy will be generated and run with the flag to serve the GraphQL server.

We can also

• Allow the user to run a specific test-suite for the test command.
• Allow the user to enter a custom command for Keploy to take care of docker cases.

If we are using a GraphQL server, we can use the terminal of Vscode as the GraphQL server will take care of returning the data from Keploy which was a limitation prior. After the recording/testing is completed, we will display the results on the extension webview.

I have updated the figma designs to include all of this as well. As soon as the design is approved from your end, i can work towards building it. Kindly have a look at it

[Akash-Singh04]

Also, According to my research we can use Java Chromium Embedded Framework (JCEF) in combination with Scala for building our IntelliJ plugin with Webviews similar to how we built our vscode extension.

Currently looking for a similar library/framework for Neovim!

[Akash-Singh04]

I also prepared a design for the IntelliJ Plugin, Please have a look

Figma

[Sarthak160]

In my opinion instead of asking each n every input from extension it's better to ask/select for the keploy config file path, Because config file can be environment or system related and can be easily shareable across. So second option is more preferable .

[Akash-Singh04]

@Sonichigo Incase it wasn't clear , the first design is for the vscode extension and the second design is for the IntelliJ extension. The reason for both of the designs having distinct themes is for them to fit well into the respective IDE's and follow the UI/UX guidelines provided by Microsoft/JetBrains.

[Akash-Singh04]

@Sarthak160 You are correct. If you notice, we do have an option for generating config file in the design above. If the config file is present, the user will have the option to use the configurations set to directly start the record/replay or enter the inputs manually.

[Akash-Singh04]

As you have approved the first design for vscode extension, i shall now proceed to implement it in the sample deliverable. It will give us a better idea of how it will look in vscode when it is finished.

[Sonichigo]

Yup we were talking about VSCode extension itself!

Here discussing which sidebarhome is better :)

Great looking forwards towards the finised extension!

[Akash-Singh04]

@Sarthak160 @Sonichigo The new Extension UI is finished and Deployed! Do have a look and let me know about necessary improvements!

[Sarthak160]

Hey @Akash-Singh04, Currently I saw that record and replay functionality of extension is disabled for now. Can you please add them back so that I can check the functionality ?

[Akash-Singh04]

Hey @Sarthak160 , I am not sure what you mean by the functionality being disabled? All of the features are enabled and working (On Ubuntu Linux and Windows according to my testing). Are you using the latest version of the extension from VsCode MarketPlace?

If so , please follow the following video to record and replay test cases:

Recording

Screencast.from.20-03-24.10.30.10.AM.IST.webm

Testing

Screencast.from.20-03-24.10.27.09.AM.IST.webm