How can I interact with the DownloadUrl Plugin programmatically?

[sspieker-cc]

• OS: swaggerapi/swagger-ui:latest docker image (Linux)
• Browser: Chrome
• Version: 113
• Method of installation: docker build, ADD files to overwrite standard package
• Swagger-UI version: 3.18.3
• Swagger/OpenAPI version: Swagger 2.0, OpenAPI 3.0

Content & configuration

I have created a kubernetes deployment for the swagger-ui container. I have added a menu system that will allow for the selection of the swagger.json definition files for the various services that we produce for internal consumption / documentation.

When a user selects a service and version from the menu, I would like the UI to reload the page pointed at by this link's URL.

So far, I have been able to update the download-url-input field with the link's URL, however, I cannot seem to get the form to submit nor the explore button to behave with a programmatic "click()" call:

Example markup:

X.X.X

Example Javascript function being called with the link's onclick script:
function chooseSwaggerFile(href) {
document.getElementsByClassName('download-url-input')[0].value = href;
// The following does not work...
document.getElementsByClassName('download-url-wrapper')[0].submit();
// Nor does this...
document.getElementsByClassName('download-url-button')[0].click();
}

Is there a method or mechanism to allow me to just "Use" the DownloadUrl plugin and let the page be reloaded with the newly selected spec?

Thanks,
Scott

[sspieker-cc]

Example Markup:
<li><a href="#" name="Actual_HREF" onClick="chooseSwaggerFile(this.name)">X.X.X</a></li>

[hkosova]

Have you considered using the urls config option instead? It's the built-in option to display multiple OpenAPI definitions with a dropdown to switch between them.

[sspieker-cc]

I have looked into this option, however, I have multiple versions of the same service that needs to be accessible at any given time. The organization of a single drop-down list will make this display and navigation a bit difficult to navigate and more unfriendly than it needs to be.

I have a DEV, QA, Staging and Production environment that various service changes are moving through in their lifecycle. So the need for supporting multiple versions is required in this instance.

Is there perhaps a method that is being exposed that might be called as a part of the onClick event? It seems that the downloadUrl plugin would be wonderful if there is a mechanism to allow access to this functionality.

[sspieker-cc]

Okay, so here is a solution that I had found after googling for various aspects of what I was attempting to accomplish. I am posting this here in the event that someone else has a need for such an approach with interacting with React Components from their custom code.

Essentially the issue that I had been facing was related to the EventListener that had been applied to the download-url-input field and the download-url-button button. My code would allow the input value to the updated but the explore button, once clicked, did NOT fire the downloadUrl method within the component. So this had lead me to attempting to call the events specifically on the elements, which did not work either. The end result was to interact with the prototypes of each element and trigger the events with the appropriate Event object type.

Here is the code snippet that allows for the input and button to work as expected with the event models:

`const downloadUrlInput = "#swagger-ui > section > div.topbar > div > div > form > input";
const downloadUrlButton = "#swagger-ui > section > div.topbar > div > div > form > button";

// ****************************************************************************************************************
// Function to handle form submission from swagger document menu link
// ****************************************************************************************************************
function chooseSwaggerFile(href) {
// We have to use these operations in order to interact with the React components that are outside of the context.
var inputField = document.getElementsByClassName('download-url-input')[0];
var inputButton = document.getElementsByClassName('download-url-button')[0];

var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(inputField, href);

var inputEvent = new Event('input', { bubbles: true});
var clickEvent = new Event('click', { bubbles: true});

inputField.dispatchEvent(inputEvent);
inputButton.dispatchEvent(clickEvent);

}`