search

swagger-api / swagger-ui

Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.
https://swagger.io
Apache License 2.0
26.35k stars 8.92k forks source link

Hierarchical Tags with laravel api #7735

Open nerpianicolindo opened 2 years ago

nerpianicolindo commented 2 years ago

Hello @kael-shipman. I have a problem with Hierarchical Tags in my laravel api. I can't make it work successfully. I make a screenshot and give all information i have. I don't know where is the problem exactly. In console, this message appears:

Content & configuration

Swagger-UI configuration options:


SwaggerUI({
  dom_id: '#swagger-ui',

    url: "{!! $urlToDocs !!}",
    operationsSorter: {!! isset($operationsSorter) ? '"' . $operationsSorter . '"' : 'null' !!},
    configUrl: {!! isset($configUrl) ? '"' . $configUrl . '"' : 'null' !!},
    validatorUrl: {!! isset($validatorUrl) ? '"' . $validatorUrl . '"' : 'null' !!},
    oauth2RedirectUrl: "{{ route('l5-swagger.'.$documentation.'.oauth2_callback') }}",

    requestInterceptor: function(request) {
      request.headers['X-CSRF-TOKEN'] = '{{ csrf_token() }}';
      return request;
    },

    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],

    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl,
      HierarchicalTagsPlugin
    ],

    layout: "StandaloneLayout",

    persistAuthorization: {!! config('l5-swagger.defaults.persist_authorization') ? 'true' : 'false' !!},
})
kael-shipman commented 2 years ago

Ah, I see I made some poor assumptions in my readme for the plugin. I had assumed this would be incorporated into the standard plugin library soon enough, but I don't think it ever will be. I've just updated the README with more specific instructions. Please try it with those new instructions and let me know if that helps.

nerpianicolindo commented 2 years ago

Hello again @kael-shipman. I try to follow the steps bellow but still not working.... Probably is my fault but i dont know what is happening.... I include this in my swagger instance: image (1)

And this is my .npmrc file: image (2)

After this, this error appears: image (3)

I hope this can help you to solve my problem. If you need something more, just tell me

kael-shipman commented 2 years ago

Not sure if this is just an example, but I'm seeing two things.

First, you should put the authToken... line in an .npmrc file in your home directory, not the one in your repo. If you don't, you'll end up checking sensitive credentials into your got repo.

Second, you need to replace MY_TOKEN in that line with your actual GitHub auth token. I've linked to a tutorial for generating those in my readme. After that, make sure to run npm install --save @kael-shipman/swagger-ui-plugin-hierarchical-tags. Lemme know if that helps.

kael-shipman commented 2 years ago

Ah... Just realized your use of MY_TOKEN was likely just to obscure your actual token. Sorry for the bad assumption on my part.

You should still move that to the other npmrc file if you haven't already.

Aside from that, I see that the real problem is your use of require, which doesn't exist in your browser environment. I would normally be setting all this up using a bundler, in which case you would require these packages in the standard nodejs way. Honestly, I'm not totally sure how you would do it in an HTML file as you're attempting to do here.

nerpianicolindo commented 2 years ago

I'm working with ubuntu 20.04 operating system, I don't know exactly where to put the npmrc file... I have put the file in the / home directory but it still doesn't work, the problem is still the require. It is a .blade.php file, i don't know if that can help you.

Maybe i need to set the include into any file of vendor folder?

kael-shipman commented 2 years ago

To be honest, I think this is gonna be a little hard for you because of your setup. My package is set up as an unminified/unbundled set of files to be included via standard require-based workflows, and you're using a php framework that doesn't appear set up for building JS files (although I would imagine this is a feature of Laravel somewhere).

There are two things I can think to do:

  1. Look around in the Laravel docs for a better understanding of how to manage javascript development within Laravel; and
  2. Just clone my repo at this branch, run npm install and then npm run build to build the plugin yourself. That will output a js file in the build folder which you can then just copy over into your Laravel app and include via <script> tag as you were trying to do to begin with.
kael-shipman commented 2 years ago

Update: I've now published this via unpkg, so the following snippet should work, and you should be able to easily integrate this into your project, if you're still interested in it:

<!doctype html>
<html>
  <head>
    <!-- Load Swagger UI -->
    <script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script> 

    <!-- Load the HierarchicalTags Plugin -->
    <script src="https://unpkg.com/swagger-ui-plugin-hierarchical-tags"></script>

    <!-- Load styles -->
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist/swagger-ui.css" />

    <script>
      window.onload = function() {
        SwaggerUIBundle({
          url: "https://unpkg.com/swagger-ui-plugin-hierarchical-tags/example/pet-store.json",
          dom_id: "#swagger",
          plugins: [
            HierarchicalTagsPlugin
          ]
        })
      }
    </script>
  </head>
  <body>
    <div id="swagger"></div>
  </body>
</html>
nerpianicolindo commented 2 years ago

Of course i'm still interested. I will try this and update later

nerpianicolindo commented 2 years ago

Seems to work!!!! I have adapted your code into mine and this is my solution

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{config('l5-swagger.documentations.'.$documentation.'.api.title')}}</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="{{ l5_swagger_asset($documentation, 'swagger-ui.css') }}" >
  <link rel="icon" type="image/png" href="{{ l5_swagger_asset($documentation, 'favicon-32x32.png') }}" sizes="32x32" />
  <link rel="icon" type="image/png" href="{{ l5_swagger_asset($documentation, 'favicon-16x16.png') }}" sizes="16x16" />
  <style>
    html
    {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
    }
    *,
    *:before,
    *:after
    {
        box-sizing: inherit;
    }

    body {
      margin:0;
      background: #fafafa;
    }
  </style>
</head>

<body>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
  <defs>
    <symbol viewBox="0 0 20 20" id="unlocked">
          <path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
    </symbol>

    <symbol viewBox="0 0 20 20" id="locked">
      <path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"/>
    </symbol>

    <symbol viewBox="0 0 20 20" id="close">
      <path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"/>
    </symbol>

    <symbol viewBox="0 0 20 20" id="large-arrow">
      <path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
    </symbol>

    <symbol viewBox="0 0 20 20" id="large-arrow-down">
      <path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
    </symbol>

    <symbol viewBox="0 0 24 24" id="jump-to">
      <path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"/>
    </symbol>

    <symbol viewBox="0 0 24 24" id="expand">
      <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
    </symbol>

  </defs>
</svg>

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

<script src="{{ l5_swagger_asset($documentation, 'swagger-ui-bundle.js') }}"> </script>
<script src="{{ l5_swagger_asset($documentation, 'swagger-ui-standalone-preset.js') }}"> </script>
<!-- Load the HierarchicalTags Plugin -->
<script src="https://unpkg.com/swagger-ui-plugin-hierarchical-tags"></script>
<script>
window.onload = function() {
  //const HierarchicalTagsPlugin = require('@kael-shipman/swagger-ui-plugin-hierarchical-tags');
  // Build a system
  const ui = SwaggerUIBundle({
    dom_id: '#swagger-ui',

    url: "{!! $urlToDocs !!}",
    operationsSorter: {!! isset($operationsSorter) ? '"' . $operationsSorter . '"' : 'null' !!},
    configUrl: {!! isset($configUrl) ? '"' . $configUrl . '"' : 'null' !!},
    validatorUrl: {!! isset($validatorUrl) ? '"' . $validatorUrl . '"' : 'null' !!},
    oauth2RedirectUrl: "{{ route('l5-swagger.'.$documentation.'.oauth2_callback') }}",

    requestInterceptor: function(request) {
      request.headers['X-CSRF-TOKEN'] = '{{ csrf_token() }}';
      return request;
    },

    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],

    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl,
      HierarchicalTagsPlugin
    ],

    layout: "StandaloneLayout",

    persistAuthorization: {!! config('l5-swagger.defaults.persist_authorization') ? 'true' : 'false' !!},
  })

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

</html>

The only problem i see is i'm not able to extract <script src="https://unpkg.com/swagger-ui-plugin-hierarchical-tags"></script> into a single file for include it into my project. Thanks you so much for your help. If you find something for the last trouble i will need to pay you a dinner in Spain if u came one day jaja

kael-shipman commented 2 years ago

Great! Glad to hear it moved you forward :D.