v2 Prep: Add Swagger UI v4 and v5 (#73)

Also cleans up various custom additions to the UI as well

ci/scripts/build_local.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Change this to whatever python interpreter you use.
+PYTHON_INTERP="/opt/homebrew/python3.10"
+
+REPO="$( cd -- "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
+REPO=$(dirname "$REPO../")
+REPO=$(dirname "$REPO../")
+
+$PYTHON_INTERP -m build
+$PYTHON_INTERP -m pip uninstall Flask-OpenAPI3-UI
+$PYTHON_INTERP -m pip install $REPO/dist/Flask_OpenAPI3_UI-9.9.9-py3-none-any.whl

ci/tests/conftest.py

@@ -29,12 +29,12 @@ def get_specs_data(mod):
     # get all the specs defined for the example app
     else:
         try:
-            flasgger_config = mod.swag.config
+            ui_config = mod.swag.config
 
-            if flasgger_config.get("swagger_ui") is False:
+            if ui_config.get("swagger_ui") is False:
                 return specs_data
 
-            specs_route = flasgger_config.get("specs_route", "/apidocs/")
+            specs_route = ui_config.get("specs_route", "/apidocs/")
         except AttributeError:
             pass
 

pyproject.toml

@@ -6,21 +6,21 @@ build-backend = "setuptools.build_meta"
 name = "Flask-OpenAPI3-UI"
 dynamic = ["version"]
 license = { file = "LICENSE" }
-requires-python = ">=3.6.1"
+requires-python = ">=3.8.0"
+description = "Next generation OpenAPI v3 Integration for Flask based APIs. Based on Flasgger."
+readme = "README.md"
+keywords = ['flask', 'swagger', 'openapi', 'python', 'api', 'rest', 'openapi3']
 authors = [{ name = "Overflow Digital", email = "[email protected]" }]
 maintainers = [
     { name = "Katerina Tiddy", email = "[email protected]" },
     { name = "Joshua Thompson-Lindley", email = "[email protected]" },
 ]
-description = "Next generation OpenAPI v3 Integration for Flask based APIs. Based on Flasgger."
-readme = "README.md"
 classifiers = [
     "Development Status :: 5 - Production/Stable",
     "Intended Audience :: Developers",
     "Programming Language :: Python :: 3",
-    "Programming Language :: Python :: 3.6",
+    "Programming Language :: Python :: 3.8",
 ]
-keywords = ['flask', 'swagger', 'openapi', 'python', 'api', 'rest', 'openapi3']
 dependencies = [
     "Flask>=2.1.2",
     "PyYAML>=6.0",
@@ -42,7 +42,7 @@ platforms = ["any"]
 where = ['src']
 include = ['flask_openapi*']
 
-[tools.setuptools.package-data]
+[tool.setuptools.package-data]
 "*" = [
     "*.html",
     "*.js",
@@ -58,5 +58,5 @@ include = ['flask_openapi*']
     "*.map",
 ]
 
-[tools.setuptools.dynamic]
+[tool.setuptools.dynamic]
 version = { attr = "flask_openapi.__version__" }

src/flask_openapi/__init__.py

@@ -1,5 +1,7 @@
 # DO NOT CHANGE MANUALLY THIS IS CHANGED IN THE PIPELINES
-__version__ = "1.3.2"
+# 9.9.9 is required to build locally (bit of a hack)
+__version__ = "9.9.9"
+
 # Based on works of Bruno Rocha and the Flasgger open source community
 
 

src/flask_openapi/core/views.py

@@ -66,8 +66,9 @@ def get(self):
                 # calling with ?json returns specs
                 return jsonify(data)
             else:  # pragma: no cover
-                data["flasgger_config"] = self.config
+                data["ui_config"] = self.config
                 data["json"] = json
+                data["title"] = self.config.get("title", "API Docs")
                 data["flasgger_version"] = __version__
                 data["favicon"] = self.config.get(
                     "favicon",

src/flask_openapi/openapi.py

@@ -558,10 +558,10 @@ def wrap_view(view):
                 url_prefix=self.config.get("url_prefix", None),
                 subdomain=self.config.get("subdomain", None),
                 template_folder=self.config.get(
-                    "template_folder", "ui{0}/templates".format(uiversion)
+                    "template_folder", "ui/version_{0}/templates".format(uiversion)
                 ),
                 static_folder=self.config.get(
-                    "static_folder", "ui{0}/static".format(uiversion)
+                    "static_folder", "ui/version_{0}/static".format(uiversion)
                 ),
                 static_url_path=self.config.get("static_url_path", None),
             )

src/flask_openapi/ui2/templates/flask_openapi/index.html → src/flask_openapi/ui/version_2/templates/flask_openapi/index.html

@@ -57,7 +57,7 @@
         supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
         onComplete: function(swaggerApi, swaggerUi){
           if(typeof initOAuth == "function") {
-              let oauth_config = {{ flasgger_config.get("auth") | safe }};
+              let oauth_config = {{ ui_config.get("auth") | safe }};
               initOAuth(oauth_config);
           }
 
@@ -98,8 +98,8 @@
         onFailure: function(data) {
           log("Unable to Load SwaggerUI");
         },
-        {% if flasgger_config.doc_expansion -%}
-            docExpansion: "{{flasgger_config.doc_expansion | safe }}",
+        {% if ui_config.doc_expansion -%}
+            docExpansion: "{{ui_config.doc_expansion | safe }}",
         {%- else %}
            docExpansion: "none",
         {%- endif %}
@@ -147,6 +147,7 @@
 <div class="swagger-ui-wrap footer">
 <small style="font-size: 60%; color: #ccc;">
 [Powered by <a href="https://github.com/overflowdigital/Flask-OpenAPI">Flask OpenAPI3 UI</a>]
+[UI Version 2.0.0]
 </small>
 </div>
 </body>

src/flask_openapi/ui/version_3/templates/flask_openapi/footer.html

@@ -0,0 +1,17 @@
+<div class="swagger-ui">
+  <div class="wrapper">
+    <section class="clear flask-openapi-footer">
+      {{ui_config.footer_text | safe}}
+      <span style="float: right">
+        Powered by
+        <a
+          target="_blank"
+          href="https://github.com/overflowdigital/Flask-OpenAPI"
+          >Flask OpenAPI3 UI</a
+        >
+        v{{ flasgger_version }} &middot; Swagger UI {{ui_config.uiversion}}
+        <br />
+      </span>
+    </section>
+  </div>
+</div>

src/flask_openapi/ui/version_3/templates/flask_openapi/head.html

@@ -0,0 +1,41 @@
+<meta charset="UTF-8" />
+<title>{{ 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="{{ swagger_ui_css }}" />
+<link
+  rel="icon"
+  type="image/png"
+  href="{{ favicon }}"
+  sizes="64x64 32x32 16x16"
+/>
+<style>
+  html {
+    box-sizing: border-box;
+    overflow: -moz-scrollbars-vertical;
+    overflow-y: scroll;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  body {
+    margin: 0;
+    background: #fafafa;
+  }
+
+  .flask-openapi-footer {
+    background: #fafafa;
+    border-top: 1px solid #ddd;
+    padding: 10px;
+    margin-bottom: 10px !important;
+    height: 100%;
+    font-size: 12px;
+  }
+</style>
+{{ui_config.head_text | safe}}

src/flask_openapi/ui/version_3/templates/flask_openapi/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include 'flask_openapi/head.html' %}
+  </head>
+  <body>
+    <div class="swagger-ui">
+      <div class="wrapper">
+        <section class="clear">{{ui_config.top_text | safe}}</section>
+      </div>
+    </div>
+    <div id="swagger-ui">
+      <div data-reactroot="" class="swagger-ui">
+        <div class="information-container wrapper">
+          <section class="block col-12">
+            <div class="loading-container"><div class="loading"></div></div>
+          </section>
+        </div>
+      </div>
+    </div>
+    <div id="swagger-ui"></div>
+    <script src="{{ swagger_ui_bundle_js }}"></script>
+    <script src="{{ swagger_ui_standalone_preset_js }}"></script>
+    <script src="{{ jquery_js }}" type="text/javascript"></script>
+    {% include 'flask_openapi/swagger.html' %}
+    {% include 'flask_openapi/footer.html' %}
+  </body>
+</html>

src/flask_openapi/ui/version_3/templates/flask_openapi/swagger.html

@@ -0,0 +1,114 @@
+<script>
+  window.onload = function() {
+      {% if config.JWT_AUTH_URL_RULE -%}
+      var jwt_token;
+      {%- endif %}
+
+      const ui = SwaggerUIBundle(Object.assign({
+
+        {% if urls %}
+        urls: {{ urls | tojson }},
+        {% else %}
+        url: "{{ specs[0]['url'] }}",
+        {% endif %}
+
+        dom_id: '#swagger-ui',
+        validatorUrl: null,
+        displayOperationId: true,
+        deepLinking: true,
+        jsonEditor: true,
+
+        {% if ui_config.doc_expansion -%}
+        docExpansion: "{{ui_config.doc_expansion | safe }}",
+        {%- endif %}
+
+        apisSorter: "alpha",
+        presets: [
+            SwaggerUIBundle.presets.apis,
+            SwaggerUIStandalonePreset
+        ],
+        plugins: [
+            SwaggerUIBundle.plugins.DownloadUrl
+        ],
+
+        {% if config.JWT_AUTH_URL_RULE -%}
+        requestInterceptor: function(request) {
+            if (jwt_token) {
+                {% if config.JWT_AUTH_HEADER_NAME -%}
+                    var jwtAuthHeaderName = "{{ config.JWT_AUTH_HEADER_NAME }}";
+                {%- else %}
+                    var jwtAuthHeaderName = "Authorization";
+                {%- endif %}
+
+                {% if config.JWT_AUTH_HEADER_TYPE -%}
+                    var jwtAuthHeaderType = "{{ config.JWT_AUTH_HEADER_TYPE }}";
+                {%- else %}
+                    var jwtAuthHeaderType = "Bearer";
+                {%- endif %}
+
+                request.headers[jwtAuthHeaderName] = jwtAuthHeaderType + " " + jwt_token;
+            }
+            return request;
+        },
+        responseInterceptor: function(response) {
+            {% if config.JWT_AUTH_HEADER_TOKEN -%}
+                var jwtAuthHeaderToken = "{{ config.JWT_AUTH_HEADER_TOKEN }}";
+            {%- else %}
+                var jwtAuthHeaderToken = "jwt-token";
+            {%- endif %}
+
+            var tokenField = jwtAuthHeaderToken;
+            var headers = response.headers;
+
+            if (headers.hasOwnProperty(tokenField)) {
+             jwt_token = headers[tokenField];
+            }
+
+            return response;
+        },
+        {%- endif %}
+
+        {% if not ui_config.hide_top_bar -%}
+        layout: "StandaloneLayout",
+        {%- endif %}
+
+      },
+
+      {{ json.dumps(ui_config.get('ui_params', {})) | safe }}
+
+      {% if ui_config.ui_params_text -%}
+      , {{ ui_config.ui_params_text | safe }}
+      {%- endif %}
+
+      ));
+
+      {% if ui_config.oauth %}
+      ui.initOAuth({{ json.dumps(ui_config['oauth']) | safe }})
+      {%- endif %}
+
+      {% if ui_config.auth %}
+      let auth_config = {{ ui_config.get("auth") | safe }}
+      {%- endif %}
+
+      window.ui = ui
+
+      {% if not ui_config.hide_top_bar -%}
+      $(".topbar-wrapper .link span").replaceWith("<span>{{title}}</span>");
+      {%- endif %}
+
+    {% if ui_config.logo -%}
+              $(".topbar a img").replaceWith("<img src='{{ui_config.logo}}' alt='{{title}}' height='25'/>");
+    {%- endif %}
+
+    {% if ui_config.hide_url_bar -%}
+              $(".topbar form").remove();
+    {%- endif %}
+
+    {% if ui_config.top_bar_color -%}
+    $('.topbar').css('background-color', '{{ui_config.top_bar_color}}');
+    {%- endif %}
+
+
+
+  }
+</script>

src/flask_openapi/ui/version_4/templates/flask_openapi/footer.html

@@ -0,0 +1,17 @@
+<div class="swagger-ui">
+  <div class="wrapper">
+    <section class="clear flask-openapi-footer">
+      {{ui_config.footer_text | safe}}
+      <span style="float: right">
+        Powered by
+        <a
+          target="_blank"
+          href="https://github.com/overflowdigital/Flask-OpenAPI"
+          >Flask OpenAPI3 UI</a
+        >
+        v{{ flasgger_version }} &middot; Swagger UI {{ui_config.uiversion}}
+        <br />
+      </span>
+    </section>
+  </div>
+</div>

src/flask_openapi/ui/version_4/templates/flask_openapi/head.html

@@ -0,0 +1,41 @@
+<meta charset="UTF-8" />
+<title>{{ 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="{{ swagger_ui_css }}" />
+<link
+  rel="icon"
+  type="image/png"
+  href="{{ favicon }}"
+  sizes="64x64 32x32 16x16"
+/>
+<style>
+  html {
+    box-sizing: border-box;
+    overflow: -moz-scrollbars-vertical;
+    overflow-y: scroll;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  body {
+    margin: 0;
+    background: #fafafa;
+  }
+
+  .flask-openapi-footer {
+    background: #fafafa;
+    border-top: 1px solid #ddd;
+    padding: 10px;
+    margin-bottom: 10px !important;
+    height: 100%;
+    font-size: 12px;
+  }
+</style>
+{{ui_config.head_text | safe}}