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

2017-06-27 15:29:07 +02:00
parent 96673d1376
commit 4fe27786f4
5 changed files with 67 additions and 53 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ node_modules
 npm-debug.log*
 .eslintcache
 package-lock.json
+*.iml
--- a/README.md
+++ b/README.md
@@ -91,7 +91,10 @@ To use swagger-ui's bundles, you should take a look at the [source of swagger-ui
    plugins: [
      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.
 dom_id | The id of a dom element inside which SwaggerUi will put the user interface for swagger.
 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.
 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
--- a/dev-helpers/index.html
+++ b/dev-helpers/index.html
@@ -4,26 +4,26 @@
 <head>
  <meta charset="UTF-8">
  <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 rel="stylesheet" type="text/css" href="./swagger-ui.css" >
-  <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
-  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
+  <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-32x32.png" sizes="32x32"/>
+  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16"/>
  <style>
-    html
-    {
-        box-sizing: border-box;
-        overflow: -moz-scrollbars-vertical;
-        overflow-y: scroll;
+    html {
+      box-sizing: border-box;
+      overflow: -moz-scrollbars-vertical;
+      overflow-y: scroll;
    }
+
    *,
    *:before,
-    *:after
-    {
-        box-sizing: inherit;
+    *:after {
+      box-sizing: inherit;
    }

    body {
-      margin:0;
+      margin: 0;
      background: #fafafa;
    }
  </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">
  <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>
+      <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">
@@ -67,37 +67,38 @@

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

-<script src="./swagger-ui-bundle.js"> </script>
-<script src="./swagger-ui-standalone-preset.js"> </script>
+<script src="./swagger-ui-bundle.js"></script>
+<script src="./swagger-ui-standalone-preset.js"></script>
 <script>
-window.onload = function() {
-  window["SwaggerUIBundle"] = window["swagger-ui-bundle"]
-  window["SwaggerUIStandalonePreset"] = window["swagger-ui-standalone-preset"]
-  // Build a system
-  const ui = SwaggerUIBundle({
-    url: "http://petstore.swagger.io/v2/swagger.json",
-    dom_id: '#swagger-ui',
-    presets: [
-      SwaggerUIBundle.presets.apis,
-      SwaggerUIStandalonePreset
-    ],
-    plugins: [
-      SwaggerUIBundle.plugins.DownloadUrl
-    ],
-    layout: "StandaloneLayout"
-  })
+  window.onload = () => {
+    window[ "SwaggerUIBundle" ] = window[ "swagger-ui-bundle" ];
+    window[ "SwaggerUIStandalonePreset" ] = window[ "swagger-ui-standalone-preset" ];
+    // Build a system
+    const ui = window.ui = SwaggerUIBundle({
+      url: "http://petstore.swagger.io/v2/swagger.json",
+      dom_id: '#swagger-ui',
+      presets: [
+        SwaggerUIBundle.presets.apis,
+        SwaggerUIStandalonePreset
+      ],
+      plugins: [
+        SwaggerUIBundle.plugins.DownloadUrl
+      ],
+      layout: "StandaloneLayout",
+      docExpansion: "none",
+      apisSorter: "alpha",
+      operationsSorter: "method"
+    });

-  window.ui = ui
-
-  ui.initOAuth({
-    clientId: "your-client-id",
-    clientSecret: "your-client-secret-if-required",
-    realm: "your-realms",
-    appName: "your-app-name",
-    scopeSeparator: " ",
-    additionalQueryStringParams: {}
-  })
-}
+    ui.initOAuth({
+      clientId: "your-client-id",
+      clientSecret: "your-client-secret-if-required",
+      realm: "your-realms",
+      appName: "your-app-name",
+      scopeSeparator: " ",
+      additionalQueryStringParams: {}
+    })
+  };
 </script>
 </body>

--- a/src/core/plugins/spec/selectors.js
+++ b/src/core/plugins/spec/selectors.js
@@ -197,16 +197,21 @@ export const operationsWithTags = createSelector(
  }
 )

-export const taggedOperations = ( state ) =>( { getConfigs } ) => {
-  let { operationsSorter }= getConfigs()
+export const taggedOperations = (state) => ({ getConfigs }) => {
+  let { apisSorter, operationsSorter } = getConfigs();

-  return operationsWithTags(state).map((ops, tag) => {
-    let sortFn = typeof operationsSorter === "function" ? operationsSorter
-                                                        : sorters.operationsSorter[operationsSorter]
-    let operations = !sortFn ? ops : ops.sort(sortFn)
+  return operationsWithTags(state)
+    .sort((operationA, operationB) => {
+      let sortFn = (typeof apisSorter === "function" ? apisSorter : sorters.apisSorter[ apisSorter ]);
+      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(
  state,
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -562,8 +562,11 @@ export const sorters = {
  operationsSorter: {
    alpha: (a, b) => a.get("path").localeCompare(b.get("path")),
    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) => {
  let formArr = []