UI: Add custom JS editor in create test screen

[NivLipetz]

Is your feature request related to a problem? Please describe.
In order to run custom JS in a test, there are too many steps:

1. First needed to create a processor in the UI/API and insert there the custom JS
2. Select this processor in the create test menu
3. For each scenario/step, choose the correct function that's defined in the processor.

Since the custom JS is directly related to the step/scenario written - this flow should be initiated directly from the create test screen.

Describe the solution you'd like
Add another tab to the step/scenario screen when creating a test that will open up a similar JS file editor that is currently implemented in the processors part of the UI.

1. If the tab is for a scenario, have the following function signatures in the JS editor:

function beforeScenario(context, ee, next) {
    return next(); // MUST be called for the scenario to continue
}
function afterScenario(context, ee, next) {
    return next(); // MUST be called for the scenario to continue
}

2. if the tab is for a step, have the following function signatures in the JS editor:

function beforeRequest(requestParams, context, ee, next) {
    return next(); // MUST be called for the step to continue
}
function afterResponse(requestParams, response, context, ee, next) {
    return next(); // MUST be called for the step to continue
}

Additional context
Current create test screen:

The JS icon should be to the left of the duplicate icon
Icon to use:

https://fontawesome.com/icons/node-js?style=brands with smallest size and with same color as the other icons next to it

[alexandravassova]

Hey. I would like to work on this issue. Can you assign me please?

[NivLipetz]

Hi @alexandravassova of course that would be great! We are available on our Slack workspace if you want to stop by say hello and if have any questions

[NivLipetz]

Hi @alexandravassova, have you had a chance to start this issue yet? Can I help in any way?

[alexandravassova]

Yes, I have started working on it. However, I'm not sure if my task is just to prepare a tab, which will open JS editor after clicking on it, or also to do something with data inside JS Editor after clicking on submit ?

[NivLipetz]

It's a good question and you're right the issue's description didn't take this into account.

Let's split this feature to two issues:

1. This current issue that creates the JS editors (what you are currently implementing)
2. Another issue that maps the JS for each step and scenario that the user writes and creates/updates the processor in the backend.

Would be awesome if after this issue you could also continue to the second one that will be opened once this is merged. Let me know if have any more questions :)

[alexandravassova]

hey, i have problems with showing this JS font awesome icon, because this icon is not available in font-awesome 4.7.0 npm library https://www.npmjs.com/package/font-awesome, which is used in this project. i am confused how to add this JS icon to the project correctly. Could you give me some advice please?

[NivLipetz]

you're right that's my bad, let's use this icon then: https://fontawesome.com/v4.7.0/icon/code please 🙏