Have Xwiki any plugin or macro to untegrate Swagger (openAPI)?

Help / Discuss
#1

Is there some way to insert yaml or json and get the display as in Swagger UI? Something like a Swagger UI for Confluence. Or another method to beauty display swagger.

1 Like
#2

I installed Swagger-ui WebJAR. But i don’t how i can use it for display openapi file on wiki page. Anybody can help me?

#3

Not sure what you expect. XWiki doesn’t support Swagger ATM.

You’ll need to modify the source code to implement the feature and make XWiki generate a swagger JSON file. Since XWiki users Restlet see for example: https://stackoverflow.com/a/31132027/153102

What’s your use case?

#4

Oh, no i don’t wanna to generate json file for API, i only want to display openapi file into wiki page. I try to use swager-ui to display, but it doesn’t work

#5

What does that mean? What is an openapi file? Where is it stored? How do you plan to display it in a wiki page?

#6

I don’t know anything about Swagger, but you can find information on how to reference a resource coming from a webjar on WebJars API (XWiki.org).

#7

Thanks for the help. Sorry for forgetting to explain. This is my mistake.

OpenApi is a specification of the WEB API REST format.
It is a json or yaml file. (for example, like here https://petstore.swagger.io/v2/swagger.json)

Swagger-ui allows you to visually display this file in the browser (see figure)

fig

swagger-ui/dist at master · swagger-api/swagger-ui · GitHub allows you to include 2 JS libraries, 1 CSS file, and add a little html to display an openapi file on any page of the site as in the specified picture.
Here is an example index.html

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="./swagger-ui.css" />

  </head>

  <body>
    <div id="swagger-ui"></div>

    <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
    <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
    <script>
    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        url: "https://petstore.swagger.io/v2/swagger.json",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      });
      // End Swagger UI call region

      window.ui = ui;
    };
  </script>
  </body>
</html>

I tried to insert the code from the js libraries into the XWIKI directly into the article , and in the html macro, I tried to insert it into the skin extension, I even installed swagger-ui via WebJars, but nothing is displayed on the article page.

#8

Hello thanks, i saw this page, but i can’t understand how can i use this API to execute JS libraries from index.html example from this page.

#9

Hi @vmassol!

This task is very important for me too, but i think that’s your 1st interlocutor didnt explain what he needs to do.
I think i can do some example for this in attach, cause we cant do it like extention and wiki doesnt support embedding swagger ui (or we can?)
imgswagger

1 Like
#10

Hello All, i have some progress. I intalled webjars for: swagger-ui and esprima and created JSX with next code:

require(["$services.webjars.url('esprima','4.0.1/dist/esprima.js')","$services.webjars.url('swagger-ui','swagger-ui-bundle.js')","$services.webjars.url('swagger-ui','swagger-ui-standalone-preset.js')"], 
        function() {

    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        url: "https://petstore.swagger.io/v2/swagger.json",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      });
      // End Swagger UI call region

      window.ui = ui;
    };

});

but it’s get an error:

require.min.js?r=1:5 Uncaught Error: Script error for “esprima”, needed by: /webjars/wiki%3Axwiki/swagger-ui/3.44.0/swagger-ui-bundle.js?r=1, /webjars/wiki%3Axwiki/swagger-ui/3.44.0/swagger-ui-standalone-preset.js?r=1
Common Errors
at makeError (require.min.js?r=1:5)
at HTMLScriptElement.onScriptError (require.min.js?r=1:5)

i think what swagger-ui scripts don’t see esprima. i don’t know how to fix it.

#11

I made it.

You need to create JS extension in object editor with following code

  require.config({

paths: { "esprima": "https://unpkg.com/esprima@~4.0/dist/esprima" },

  });  
  
require(["esprima","$services.webjars.url('swagger-ui','swagger-ui-bundle.js')","$services.webjars.url('swagger-ui','swagger-ui-standalone-preset.js')"], 
        function(esprima,SwaggerUIBundle,SwaggerUIStandalonePreset) {
 
    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        url: "https://petstore.swagger.io/v2/swagger.json",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      });
      // End Swagger UI call region

      window.ui = ui;
    };

});

and create Stylesheet extension object with css code from swagger-ui.css

result will be like as this image
image

1 Like
#12

@urs19work WOW U ARE BEST TY!!! :heart_eyes: :heart_eyes:

1 Like
#13

Has anyone done any further investigation on this? I didn’t find any extension.