feat: add tryItOutEnabled configuration (#6865)

* feat: add tryItOutEnabled configuration

allow users to set tryItOutEnabled: true to display
the "Try it out" section by default

tryItOutEnabled to take === "true" for the
query string value or === true if someone
implements query string type parsing in the query

Author: kyle-apex

docker/configurator/variables.js

@@ -91,6 +91,10 @@ const standardVariables = {
     type: "array",
     name: "supportedSubmitMethods"
   },
+  TRY_IT_OUT_ENABLED: {
+    type: "boolean",
+    name: "tryItOutEnabled"
+  },
   VALIDATOR_URL: {
     type: "string",
     name: "validatorUrl"

docs/usage/configuration.md

@@ -64,6 +64,7 @@ Parameter name | Docker variable | Description
 <a name="syntaxHighlight"></a>`syntaxHighlight` | _Unavailable_ | Set to `false` to deactivate syntax highlighting of payloads and cURL command, can be otherwise an object with the `activate` and `theme` properties.
 <a name="syntaxHighlight.activate"></a>`syntaxHighlight.activate` | _Unavailable_ | `Boolean=true`. Whether syntax highlighting should be activated or not.
 <a name="syntaxHighlight.theme"></a>`syntaxHighlight.theme` | _Unavailable_ | `String=["agate"*, "arta", "monokai", "nord", "obsidian", "tomorrow-night"]`. [Highlight.js](https://highlightjs.org/static/demo/) syntax coloring theme to use. (Only these 6 styles are available.)
+<a name="tryItOutEnabled"></a>`tryItOutEnabled` | `TRY_IT_OUT_ENABLED` | `Boolean=false`. Controls whether the "Try it out" section should be enabled by default.
 
 ##### Network
 

flavors/swagger-ui-react/README.md

@@ -113,6 +113,12 @@ An array of functions that augment and modify Swagger UI's functionality. See Sw
 
 ⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
 
+#### `tryItOutEnabled`: PropTypes.bool
+
+Controls whether the "Try it out" section should start enabled. The default is false.
+
+⚠️ This prop is currently only applied once, on mount. Changes to this prop's value will not be propagated to the underlying Swagger UI instance. A future version of this module will remove this limitation, and the change will not be considered a breaking change.
+
 ## Limitations
 
 * Not all configuration bindings are available.

flavors/swagger-ui-react/index.js renamed to flavors/swagger-ui-react/index.jsx

@@ -23,6 +23,7 @@ export default class SwaggerUI extends React.Component {
       supportedSubmitMethods: this.props.supportedSubmitMethods,
       defaultModelExpandDepth: this.props.defaultModelExpandDepth,
       displayOperationId: this.props.displayOperationId,
+      tryItOutEnabled: this.props.tryItOutEnabled,
       showMutatedRequest: typeof this.props.showMutatedRequest === "boolean" ? this.props.showMutatedRequest : true,
       deepLinking: typeof this.props.deepLinking === "boolean" ? this.props.deepLinking : false,
     })
@@ -101,6 +102,7 @@ SwaggerUI.propTypes = {
   defaultModelsExpandDepth: PropTypes.number,
   presets: PropTypes.arrayOf(PropTypes.func),
   deepLinking: PropTypes.bool,
+  tryItOutEnabled: PropTypes.bool
 }
 
 SwaggerUI.defaultProps = {

src/core/containers/OperationContainer.jsx

@@ -7,8 +7,11 @@ import { Iterable, fromJS, Map } from "immutable"
 export default class OperationContainer extends PureComponent {
   constructor(props, context) {
     super(props, context)
+
+    const { tryItOutEnabled } = props.getConfigs()
+
     this.state = {
-      tryItOutEnabled: false,
+      tryItOutEnabled: tryItOutEnabled === true || tryItOutEnabled === "true",
       executeInProgress: false
     }
   }

src/core/index.js

@@ -43,6 +43,7 @@ export default function SwaggerUI(opts) {
     displayOperationId: false,
     displayRequestDuration: false,
     deepLinking: false,
+    tryItOutEnabled: false,
     requestInterceptor: (a => a),
     responseInterceptor: (a => a),
     showMutatedRequest: true,

src/core/oauth2-authorize.js

@@ -63,7 +63,7 @@ export default function authorize ( { auth, authActions, errActions, configs, au
     scopesArray = scopes.toArray()
   }
 
-  if (scopesArray.length > 0)  {
+  if (scopesArray.length > 0) {
     let scopeSeparator = authConfigs.scopeSeparator || " "
 
     query.push("scope=" + encodeURIComponent(scopesArray.join(scopeSeparator)))

test/e2e-cypress/static/documents/features/try-it-out-enabled.yaml

@@ -0,0 +1,13 @@
+openapi: 3.0.2
+info:
+  title: try it out enabled test
+  version: 0.0.1
+  description: |-
+    a simple test to ensure tryItOutEnabled=true expands "Try it out"
+paths:
+  /:
+    get:
+      summary: an operation
+      responses:
+        "200":
+          description: OK

test/e2e-cypress/tests/features/try-it-out-enabled.js

@@ -0,0 +1,22 @@
+describe("Try it out enabled configuration", () => {
+    it("should enable the try it out section when true", () => {
+
+      cy
+        .visit("?tryItOutEnabled=true&url=/documents/features/try-it-out-enabled.yaml")
+        .get("#operations-default-get_")
+        .click()
+        .get(".try-out__btn")
+        .should("have.text","Cancel")
+    })
+
+    it("should disable the try it out section when false", () => {
+
+        cy
+          .visit("?tryItOutEnabled=false&url=/documents/features/try-it-out-enabled.yaml")
+          .get("#operations-default-get_")
+          .click()
+          .get(".try-out__btn")
+          .should("have.text","Try it out ")
+      })
+  })
+  

test/unit/docker/translator.js

@@ -245,6 +245,7 @@ describe("docker: env translator", function() {
         OAUTH2_REDIRECT_URL: "http://google.com/",
         SHOW_MUTATED_REQUEST: "true",
         SUPPORTED_SUBMIT_METHODS: `["get", "post"]`,
+        TRY_IT_OUT_ENABLED: "true",
         VALIDATOR_URL: "http://smartbear.com/"
       }
 
@@ -270,6 +271,7 @@ describe("docker: env translator", function() {
       oauth2RedirectUrl: "http://google.com/",
       showMutatedRequest: true,
       supportedSubmitMethods: ["get", "post"],
+      tryItOutEnabled: true,
       validatorUrl: "http://smartbear.com/",`
       ).trim())
     })
@@ -299,6 +301,7 @@ describe("docker: env translator", function() {
         OAUTH2_REDIRECT_URL: "http://google.com/",
         SHOW_MUTATED_REQUEST: "true",
         SUPPORTED_SUBMIT_METHODS: `["get", "post"]`,
+        TRY_IT_OUT_ENABLED: "false",
         VALIDATOR_URL: "http://smartbear.com/"
       }
 
@@ -331,6 +334,7 @@ describe("docker: env translator", function() {
       oauth2RedirectUrl: "http://google.com/",
       showMutatedRequest: true,
       supportedSubmitMethods: ["get", "post"],
+      tryItOutEnabled: false,
       validatorUrl: "http://smartbear.com/",`
       ).trim())
     })