Authress-Engineering / openapi-explorer

OpenAPI Web component to generate a UI from the spec.
Apache License 2.0
304 stars 42 forks source link

Configurable Request Body Slot #95

Closed nikitapatel029 closed 1 year ago

nikitapatel029 commented 1 year ago

Hi,

I am looking for something like below image where we will show text input to user and that will convert it in json and will pass in request payload. Is it supportable? if yes may I get working demo link or something like that?

image

wparad commented 1 year ago

This is resolved in #94, you can check out the slot, check out the documentation added in the the PR and let me know if there is anything missing to support that.

nikitapatel029 commented 1 year ago

Ok, seems intersting. let us check and get back to you.

nikitapatel029 commented 1 year ago

@wparad We tried to put slot for body, but somehow that @request="requestInterceptor" (assigned event in openapi-explorer tag in index.html page) event is not getting executed. I tried to put that requestInterceptor js code in html file under script tag, also tried to put in openapi-exploer.js but didn't work either. Can you guide me at which place exactly we should put ?

wparad commented 1 year ago

Are you using vue, react, or vanillajs?

nikitapatel029 commented 1 year ago

I am using simple html and javascript(Vanilla Javascript/HTML), haven't integrated with react/vue or anything (just cloned ur code and started using same structure)

(fyi -making change in index.html file for this slot, though I suspect that @request keyword would be for react or vue so just wanted to know what would parameters needs to pass in html ?

wparad commented 1 year ago

It's an event listener, so you'll need to grab the openapi explorer from the DOM and addEventListener to it.

Does that make sense?

nikitapatel029 commented 1 year ago

yes, I am registering event same like this

document.getElementsByTagName("openapi-explorer")[0].addEventListener('requestInterceptor',function(){const textareaObject = document.getElementById("text-body-area-override"); event.detail.request.body = textareaObject.value});

Let me know if I am missing something here

nikitapatel029 commented 1 year ago

oh, found the issue! I was passing wrong name while registering event. It should be request not requestInterceptor :)

Thanks for the quick response! Let us explore more this on slot and if we found anything or need any help, will get back to you!

nikitapatel029 commented 1 year ago

That CLEAR button under request body doesn't make any changes in custom slot. if we make custom slot for body, in that situation either can we override the clear script(that will erase the data from modified fields from custom body) or if we can't do then maybe hide the button ?

wparad commented 1 year ago

Adding support for this, the specific documentation can be seen here: https://github.com/Rhosys/openapi-explorer/pull/103/files#diff-216f1a47489a5fc3af1e4dc316207ca25055a25c52b67dcfc31cbcc54cd73cf0R101

nikitapatel029 commented 1 year ago

Adding support for this, the specific documentation can be seen here: https://github.com/Rhosys/openapi-explorer/pull/103/files#diff-216f1a47489a5fc3af1e4dc316207ca25055a25c52b67dcfc31cbcc54cd73cf0R101

Custom event is getting called for all APIs in vanilla javascript, as in vanila we have grab open-exploere from documents and attached event and that's why it is getting hit every time when we click on clear button even for those api where we have not added custom body, we should get something unique like elementId or something on base we can differentiate which event of clear button got hit?

Fyi- same request event(requestInterceptor) I have used for custom body slot which is also getting called for all APIs but for that request under event object I am getting elementId (event detail.request.elementId) so based on that elemetId I've written the condition

wparad commented 1 year ago

no problem, this actually should be explorerLocation. This PR will add it in, and update the property to be explorerLocation so if you are using elementId that should be changed to maintain any functionality. elementId is what we use internally to call the property that, but externally it should always be called explorerLocation.

nikitapatel029 commented 1 year ago

Great., That sounds good.

One more thing, if tool has features to clear the item, it should have "redo option" /"fill with default values" something like that which will bring default example under body/query. As right now what is happening if we have given requestbody textarea and user by mistaken clicked on clear every thing gets erased(that's ok) but if they want to see again the default examples then they're not able to see anywhere untill and unless they refreshed the screen.

wparad commented 1 year ago

created #105, feel free to put a PR for that one if you feel up to it.