Merge pull request #3152 from slate-studio/master

Add operationId to be shown for each operation

README.md

@@ -120,6 +120,7 @@ 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
 modelPropertyMacro | MUST be a function. Function to set default values to each property in model. Accepts one argument modelPropertyMacro(property), property is immutable
 docExpansion | Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing). The default is 'list'.
+displayOperationId | Controls the display of operationId in operations list. The default is `false`.
 
 ### Plugins
 

src/core/components/operation.jsx

@@ -17,6 +17,8 @@ export default class Operation extends React.Component {
 
     allowTryItOut: PropTypes.bool,
 
+    displayOperationId: PropTypes.bool,
+
     response: PropTypes.object,
     request: PropTypes.object,
 
@@ -35,6 +37,7 @@ export default class Operation extends React.Component {
     showSummary: true,
     response: null,
     allowTryItOut: true,
+    displayOperationId: false,
   }
 
   constructor(props, context) {
@@ -108,6 +111,7 @@ export default class Operation extends React.Component {
       response,
       request,
       allowTryItOut,
+      displayOperationId,
 
       fn,
       getComponent,
@@ -126,6 +130,7 @@ export default class Operation extends React.Component {
     let produces = operation.get("produces")
     let schemes = operation.get("schemes")
     let parameters = getList(operation, ["parameters"])
+    let operationId = operation.get("__originalOperationId")
 
     const Responses = getComponent("responses")
     const Parameters = getComponent( "parameters" )
@@ -162,6 +167,8 @@ export default class Operation extends React.Component {
                 </div>
             }
 
+            { displayOperationId && operationId ? <span className="opblock-summary-path">{operationId}</span> : null }
+
             {
               (!security || !security.count()) ? null :
                 <AuthorizeOperationBtn authActions={ authActions }

src/core/components/operations.jsx

@@ -13,10 +13,6 @@ export default class Operations extends React.Component {
     getConfigs: PropTypes.func.isRequired
   };
 
-  static defaultProps = {
-
-  };
-
   render() {
     let {
       specSelectors,
@@ -36,7 +32,7 @@ export default class Operations extends React.Component {
     const Collapse = getComponent("Collapse")
 
     let showSummary = layoutSelectors.showSummary()
-    let { docExpansion } = getConfigs()
+    let { docExpansion, displayOperationId } = getConfigs()
 
     return (
         <div>
@@ -90,6 +86,8 @@ export default class Operations extends React.Component {
                           request={ request }
                           allowTryItOut={allowTryItOut}
 
+                          displayOperationId={displayOperationId}
+
                           specActions={ specActions }
                           specSelectors={ specSelectors }
 

src/core/index.js

@@ -8,7 +8,7 @@ import { parseSeach, filterConfigs } from "core/utils"
 
 const CONFIGS = [ "url", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
     "apisSorter", "operationsSorter", "supportedSubmitMethods", "dom_id", "defaultModelRendering", "oauth2RedirectUrl",
-    "showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro" ]
+    "showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro", "displayOperationId" ]
 
 // eslint-disable-next-line no-undef
 const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION } = buildInfo
@@ -28,6 +28,7 @@ module.exports = function SwaggerUI(opts) {
     validatorUrl: "https://online.swagger.io/validator",
     configs: {},
     custom: {},
+    displayOperationId: false,
 
     // Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance.
     // Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest.

src/style/_layout.scss

@@ -209,9 +209,10 @@ body
     }
 
     .opblock-summary-path,
+    .opblock-summary-operation-id,
     .opblock-summary-path__deprecated
     {
-        font-size: 16px;
+        font-size: 13px;
 
         display: flex;
 
@@ -247,6 +248,16 @@ body
         text-decoration: line-through;
     }
 
+    .opblock-summary-path
+    {
+        font-size: 13px;
+    }
+
+    .opblock-summary-operation-id
+    {
+        font-size: 16px;
+    }
+
     .opblock-summary-description
     {
         font-size: 13px;