kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding apisSorter options, taking a string or a function as a configuration value

Browse Source
This commit is contained in:
Raphaël MARQUES
2017-06-27 15:29:07 +02:00
parent 96673d1376
commit 4fe27786f4
5 changed files with 67 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -5,3 +5,4 @@ node_modules
npm-debug.log* npm-debug.log*
.eslintcache .eslintcache
package-lock.json package-lock.json
*.iml

6
README.md
View File

@@ -91,7 +91,10 @@ To use swagger-ui's bundles, you should take a look at the [source of swagger-ui
plugins: [ plugins: [
SwaggerUIBundle.plugins.DownloadUrl SwaggerUIBundle.plugins.DownloadUrl
], ],
layout: "StandaloneLayout" layout: "StandaloneLayout",
docExpansion: "none",
apisSorter: "alpha",
operationsSorter: "method"
}) })
``` ```
@@ -133,6 +136,7 @@ spec | A JSON object describing the OpenAPI Specification. When used, the `url`
validatorUrl | By default, Swagger-UI attempts to validate specs against swagger.io's online validator. You can use this parameter to set a different validator URL, for example for locally deployed validators ([Validator Badge](https://github.com/swagger-api/validator-badge)). Setting it to `null` will disable validation. validatorUrl | By default, Swagger-UI attempts to validate specs against swagger.io's online validator. You can use this parameter to set a different validator URL, for example for locally deployed validators ([Validator Badge](https://github.com/swagger-api/validator-badge)). Setting it to `null` will disable validation.
dom_id | The id of a dom element inside which SwaggerUi will put the user interface for swagger. dom_id | The id of a dom element inside which SwaggerUi will put the user interface for swagger.
oauth2RedirectUrl | OAuth redirect URL oauth2RedirectUrl | OAuth redirect URL
apisSorter | Apply a sort to the tag list of each API. It can be 'alpha' (sort by paths alphanumerically) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
operationsSorter | Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged. operationsSorter | Apply a sort to the operation list of each API. It can be 'alpha' (sort by paths alphanumerically), 'method' (sort by HTTP method) or a function (see Array.prototype.sort() to know how sort function works). Default is the order returned by the server unchanged.
configUrl | Configs URL configUrl | Configs URL
parameterMacro | MUST be a function. Function to set default value to parameters. Accepts two arguments parameterMacro(operation, parameter). Operation and parameter are objects passed for context, both remain immutable parameterMacro | MUST be a function. Function to set default value to parameters. Accepts two arguments parameterMacro(operation, parameter). Operation and parameter are objects passed for context, both remain immutable

87
dev-helpers/index.html
View File

@@ -4,26 +4,26 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Swagger UI</title> <title>Swagger UI</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
<link rel="stylesheet" type="text/css" href="./swagger-ui.css" > 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="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" /> <link rel="stylesheet" type="text/css" href="./swagger-ui.css">
<link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" /> <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16"/>
<style> <style>
html html {
{ box-sizing: border-box;
box-sizing: border-box; overflow: -moz-scrollbars-vertical;
overflow: -moz-scrollbars-vertical; overflow-y: scroll;
overflow-y: scroll;
} }
*, *,
*:before, *:before,
*:after *:after {
{ box-sizing: inherit;
box-sizing: inherit;
} }
body { body {
margin:0; margin: 0;
background: #fafafa; background: #fafafa;
} }
</style> </style>
@@ -34,7 +34,7 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
<defs> <defs>
<symbol viewBox="0 0 20 20" id="unlocked"> <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> <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>
<symbol viewBox="0 0 20 20" id="locked"> <symbol viewBox="0 0 20 20" id="locked">
@@ -67,37 +67,38 @@
<div id="swagger-ui"></div> <div id="swagger-ui"></div>
<script src="./swagger-ui-bundle.js"> </script> <script src="./swagger-ui-bundle.js"></script>
<script src="./swagger-ui-standalone-preset.js"> </script> <script src="./swagger-ui-standalone-preset.js"></script>
<script> <script>
window.onload = function() { window.onload = () => {
window["SwaggerUIBundle"] = window["swagger-ui-bundle"] window[ "SwaggerUIBundle" ] = window[ "swagger-ui-bundle" ];
window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"] window[ "SwaggerUIStandalonePreset" ] = window[ "swagger-ui-standalone-preset" ];
// Build a system // Build a system
const ui = SwaggerUIBundle({ const ui = window.ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json", url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui', dom_id: '#swagger-ui',
presets: [ presets: [
SwaggerUIBundle.presets.apis, SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset SwaggerUIStandalonePreset
], ],
plugins: [ plugins: [
SwaggerUIBundle.plugins.DownloadUrl SwaggerUIBundle.plugins.DownloadUrl
], ],
layout: "StandaloneLayout" layout: "StandaloneLayout",
}) docExpansion: "none",
apisSorter: "alpha",
operationsSorter: "method"
});
window.ui = ui ui.initOAuth({
clientId: "your-client-id",
ui.initOAuth({ clientSecret: "your-client-secret-if-required",
clientId: "your-client-id", realm: "your-realms",
clientSecret: "your-client-secret-if-required", appName: "your-app-name",
realm: "your-realms", scopeSeparator: " ",
appName: "your-app-name", additionalQueryStringParams: {}
scopeSeparator: " ", })
additionalQueryStringParams: {} };
})
}
</script> </script>
</body> </body>

21
src/core/plugins/spec/selectors.js
View File

@@ -197,16 +197,21 @@ export const operationsWithTags = createSelector(
} }
) )
export const taggedOperations = ( state ) =>( { getConfigs } ) => { export const taggedOperations = (state) => ({ getConfigs }) => {
let { operationsSorter }= getConfigs() let { apisSorter, operationsSorter } = getConfigs();
return operationsWithTags(state).map((ops, tag) => { return operationsWithTags(state)
let sortFn = typeof operationsSorter === "function" ? operationsSorter .sort((operationA, operationB) => {
: sorters.operationsSorter[operationsSorter] let sortFn = (typeof apisSorter === "function" ? apisSorter : sorters.apisSorter[ apisSorter ]);
let operations = !sortFn ? ops : ops.sort(sortFn) return (!sortFn ? null : sortFn(operationA, operationB));
})
.map((ops, tag) => {
let sortFn = (typeof operationsSorter === "function" ? operationsSorter : sorters.operationsSorter[ operationsSorter ]);
let operations = (!sortFn ? ops : ops.sort(sortFn));
return Map({tagDetails: tagDetails(state, tag), operations: operations})}) return Map({ tagDetails: tagDetails(state, tag), operations: operations });
} });
};
export const responses = createSelector( export const responses = createSelector(
state, state,

5
src/core/utils.js
View File

@@ -562,8 +562,11 @@ export const sorters = {
operationsSorter: { operationsSorter: {
alpha: (a, b) => a.get("path").localeCompare(b.get("path")), alpha: (a, b) => a.get("path").localeCompare(b.get("path")),
method: (a, b) => a.get("method").localeCompare(b.get("method")) method: (a, b) => a.get("method").localeCompare(b.get("method"))
},
apisSorter: {
alpha: (a, b) => a.getIn([0, "operation", "tags", 0]).localeCompare(b.getIn([0, "operation", "tags", 0]))
} }
} };
export const buildFormData = (data) => { export const buildFormData = (data) => {
let formArr = [] let formArr = []