fix(config): cast configuration values into proper types

src/core/components/live-response.jsx

@@ -73,10 +73,10 @@ export default class LiveResponse extends React.Component {
 
     return (
       <div>
-        { curlRequest && (requestSnippetsEnabled === true || requestSnippetsEnabled === "true"
+        { curlRequest && requestSnippetsEnabled 
           ? <RequestSnippets request={ curlRequest }/>
           : <Curl request={ curlRequest } />
-        )}
+        }
         { url && <div>
             <div className="request-url">
               <h4>Request URL</h4>

src/core/components/operation-tag.jsx

@@ -47,8 +47,6 @@ export default class OperationTag extends React.Component {
       deepLinking,
     } = getConfigs()
 
-    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
-
     const Collapse = getComponent("Collapse")
     const Markdown = getComponent("Markdown", true)
     const DeepLink = getComponent("DeepLink")
@@ -80,7 +78,7 @@ export default class OperationTag extends React.Component {
           data-is-open={showTag}
         >
           <DeepLink
-            enabled={isDeepLinkingEnabled}
+            enabled={deepLinking}
             isShown={showTag}
             path={createDeepLinkPath(tag)}
             text={tag} />

src/core/config/merge.js

@@ -13,6 +13,7 @@
  * TODO([email protected]): remove deep-extend in favor of lodash.merge
  */
 import deepExtend from "deep-extend"
+import typeCast from "./type-cast"
 
 const merge = (target, ...sources) => {
   let domNode = Symbol.for("domNode")
@@ -51,7 +52,7 @@ const merge = (target, ...sources) => {
     merged.urls.primaryName = primaryName
   }
 
-  return merged
+  return typeCast(merged)
 }
 
 export default merge

src/core/config/type-cast/index.js

@@ -0,0 +1,22 @@
+/**
+ * @prettier
+ */
+import has from "lodash/has"
+import get from "lodash/get"
+import set from "lodash/set"
+
+import typeCasters from "./type-casters"
+
+const typeCast = (options) => {
+  return Object.entries(typeCasters).reduce(
+    (acc, [option, typeCaster]) => {
+      if (has(acc, option)) {
+        acc = set(acc, option, typeCaster(get(acc, option)))
+      }
+      return acc
+    },
+    { ...options }
+  )
+}
+
+export default typeCast

src/core/config/type-cast/type-casters/boolean.js

@@ -0,0 +1,11 @@
+/**
+ * @prettier
+ */
+const booleanTypeCaster = (value) =>
+  value === "true" || value === "1" || value === 1
+    ? true
+    : value === "false" || value === "0" || value === 0
+      ? false
+      : value
+
+export default booleanTypeCaster

src/core/config/type-cast/type-casters/combined.js

@@ -0,0 +1,7 @@
+/**
+ * @prettier
+ */
+const combinedTypeCaster = (firstTypeCaster, secondTypeCaster) => (value) =>
+  secondTypeCaster(firstTypeCaster(value))
+
+export default combinedTypeCaster

src/core/config/type-cast/type-casters/false.js

@@ -0,0 +1,7 @@
+/**
+ * @prettier
+ */
+const falseTypeCaster = (value) =>
+  value === "false" || value === "0" || value === 0 ? false : value
+
+export default falseTypeCaster

src/core/config/type-cast/type-casters/index.js

@@ -0,0 +1,36 @@
+/**
+ * @prettier
+ */
+
+import booleanTypeCaster from "./boolean"
+import combinedTypeCaster from "./combined"
+import falseTypeCaster from "./false"
+import nullTypeCaster from "./null"
+import numberTypeCaster from "./number"
+import undefinedTypeCaster from "./undefined"
+
+const typeCasters = {
+  deepLinking: booleanTypeCaster,
+  defaultModelExpandDepth: numberTypeCaster,
+  defaultModelsExpandDepth: numberTypeCaster,
+  displayOperationId: booleanTypeCaster,
+  displayRequestDuration: booleanTypeCaster,
+  dom_id: nullTypeCaster,
+  domNode: nullTypeCaster,
+  filter: combinedTypeCaster(nullTypeCaster, booleanTypeCaster),
+  maxDisplayedTags: combinedTypeCaster(nullTypeCaster, numberTypeCaster),
+  oauth2RedirectUrl: undefinedTypeCaster,
+  persistAuthorization: booleanTypeCaster,
+  requestSnippetsEnabled: booleanTypeCaster,
+  showCommonExtensions: booleanTypeCaster,
+  showExtensions: booleanTypeCaster,
+  showMutatedRequest: booleanTypeCaster,
+  syntaxHighlight: falseTypeCaster,
+  "syntaxHighlight.activated": booleanTypeCaster,
+  tryItOutEnabled: booleanTypeCaster,
+  urls: nullTypeCaster,
+  validatorUrl: nullTypeCaster,
+  withCredentials: combinedTypeCaster(undefinedTypeCaster, booleanTypeCaster),
+}
+
+export default typeCasters

src/core/config/type-cast/type-casters/null.js

@@ -0,0 +1,6 @@
+/**
+ * @prettier
+ */
+const nullTypeCaster = (value) => (value === "null" ? null : value)
+
+export default nullTypeCaster

src/core/config/type-cast/type-casters/number.js

@@ -0,0 +1,9 @@
+/**
+ * @prettier
+ */
+const numberTypeCaster = (value) => {
+  const parsedValue = parseInt(value)
+  return isNaN(parsedValue) ? value : parsedValue
+}
+
+export default numberTypeCaster

src/core/config/type-cast/type-casters/undefined.js

@@ -0,0 +1,7 @@
+/**
+ * @prettier
+ */
+const undefinedTypeCaster = (value) =>
+  value === "undefined" ? undefined : value
+
+export default undefinedTypeCaster

src/core/containers/OperationContainer.jsx

@@ -11,7 +11,7 @@ export default class OperationContainer extends PureComponent {
     const { tryItOutEnabled } = props.getConfigs()
 
     this.state = {
-      tryItOutEnabled: tryItOutEnabled === true || tryItOutEnabled === "true",
+      tryItOutEnabled,
       executeInProgress: false
     }
   }
@@ -61,14 +61,13 @@ export default class OperationContainer extends PureComponent {
     const showSummary = layoutSelectors.showSummary()
     const operationId = op.getIn(["operation", "__originalOperationId"]) || op.getIn(["operation", "operationId"]) || opId(op.get("operation"), props.path, props.method) || op.get("id")
     const isShownKey = ["operations", props.tag, operationId]
-    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
     const allowTryItOut = supportedSubmitMethods.indexOf(props.method) >= 0 && (typeof props.allowTryItOut === "undefined" ?
       props.specSelectors.allowTryItOutFor(props.path, props.method) : props.allowTryItOut)
     const security = op.getIn(["operation", "security"]) || props.specSelectors.security()
 
     return {
       operationId,
-      isDeepLinkingEnabled,
+      isDeepLinkingEnabled: deepLinking,
       showSummary,
       displayOperationId,
       displayRequestDuration,

src/core/containers/filter.jsx

@@ -29,11 +29,11 @@ export default class FilterContainer extends React.Component {
 
     return (
       <div>
-        {filter === null || filter === false || filter === "false" ? null :
+        {!filter ? null :
           <div className="filter-container">
             <Col className="filter wrapper" mobile={12}>
               <input className={classNames.join(" ")} placeholder="Filter by tag" type="text"
-                     onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter}
+                     onChange={this.onFilterChange} value={filter === true ? "" : filter}
                      disabled={isLoading}/>
             </Col>
           </div>

src/core/plugins/layout/spec-extensions/wrap-selector.js

@@ -9,7 +9,7 @@ export const taggedOperations = (oriSelector, system) => (state, ...args) => {
   // Filter, if requested
   let filter = layoutSelectors.currentFilter()
   if (filter) {
-    if (filter !== true && filter !== "true" && filter !== "false") {
+    if (filter !== true) {
       taggedOps = fn.opsFilter(taggedOps, filter)
     }
   }

src/core/plugins/swagger-client/configs-wrap-actions.js

@@ -3,6 +3,6 @@ export const loaded = (ori, system) => (...args) => {
   const value = system.getConfigs().withCredentials
 
   if(value !== undefined) {
-    system.fn.fetch.withCredentials = typeof value === "string" ? (value === "true") : !!value
+    system.fn.fetch.withCredentials = value
   }
 }

src/core/plugins/syntax-highlighting/wrap-components/SyntaxHighlighter.jsx

@@ -8,7 +8,7 @@ import get from "lodash/get"
 const SyntaxHighlighterWrapper = (Original, system) => {
   const SyntaxHighlighter = ({ renderPlainText, children, ...rest }) => {
     const configs = system.getConfigs()
-    const canSyntaxHighlight = !!get(configs, "syntaxHighlight.activated")
+    const canSyntaxHighlight = get(configs, "syntaxHighlight.activated")
     const PlainTextViewer = system.getComponent("PlainTextViewer")
 
     if (!canSyntaxHighlight && typeof renderPlainText === "function") {

test/unit/core/config/type-cast/index.js

@@ -0,0 +1,72 @@
+/**
+ * @prettier
+ */
+import typeCast from "core/config/type-cast"
+
+describe("typeCast", () => {
+  it("should convert stringified `true` and `false` values to `boolean`", () => {
+    const config = {
+      deepLinking: "true",
+      tryItOutEnabled: "false",
+      withCredentials: "true",
+      filter: "false",
+    }
+
+    const expectedConfig = {
+      deepLinking: true,
+      tryItOutEnabled: false,
+      withCredentials: true,
+      filter: false,
+    }
+
+    expect(typeCast(config)).toStrictEqual(expectedConfig)
+  })
+
+  it("should convert stringified `number` values to `number`", () => {
+    const config = {
+      defaultModelExpandDepth: "5",
+      defaultModelsExpandDepth: "-1",
+      maxDisplayedTags: "1",
+    }
+
+    const expectedConfig = {
+      defaultModelExpandDepth: 5,
+      defaultModelsExpandDepth: -1,
+      maxDisplayedTags: 1,
+    }
+
+    expect(typeCast(config)).toStrictEqual(expectedConfig)
+  })
+
+  it("should convert stringified `null` values to `null`", () => {
+    const config = {
+      validatorUrl: "null",
+      maxDisplayedTags: "null",
+      filter: "null",
+    }
+
+    const expectedConfig = {
+      validatorUrl: null,
+      maxDisplayedTags: null,
+      filter: null,
+    }
+
+    expect(typeCast(config)).toStrictEqual(expectedConfig)
+  })
+
+  it("should convert stringified `undefined` values to `undefined`", () => {
+    const config = { withCredentials: "undefined" }
+
+    const expectedConfig = { withCredentials: undefined }
+
+    expect(typeCast(config)).toStrictEqual(expectedConfig)
+  })
+
+  it("should not convert `string` values", () => {
+    const config = { defaultModelRendering: "model", filter: "pet" }
+
+    const expectedConfig = { defaultModelRendering: "model", filter: "pet" }
+
+    expect(typeCast(config)).toStrictEqual(expectedConfig)
+  })
+})

test/unit/core/plugins/swagger-js/withCredentials.js

@@ -49,44 +49,6 @@ describe("swagger-client plugin - withCredentials", () => {
     const loadedFn = loaded(oriExecute, system)
     loadedFn()
 
-    expect(oriExecute.mock.calls.length).toBe(1)
-    expect(system.fn.fetch.withCredentials).toBe(false)
-  })
-
-   it("should allow setting flag to true via config as string", () => {
-    // for query string config
-    const system = {
-      fn: {
-        fetch: jest.fn().mockImplementation(() => Promise.resolve())
-      },
-      getConfigs: () => ({
-        withCredentials: "true"
-      })
-    }
-    const oriExecute = jest.fn()
-
-    const loadedFn = loaded(oriExecute, system)
-    loadedFn()
-
-    expect(oriExecute.mock.calls.length).toBe(1)
-    expect(system.fn.fetch.withCredentials).toBe(true)
-  })
-
-  it("should allow setting flag to false via config as string", () => {
-    // for query string config
-    const system = {
-      fn: {
-        fetch: jest.fn().mockImplementation(() => Promise.resolve())
-      },
-      getConfigs: () => ({
-        withCredentials: "false"
-      })
-    }
-    const oriExecute = jest.fn()
-
-    const loadedFn = loaded(oriExecute, system)
-    loadedFn()
-
     expect(oriExecute.mock.calls.length).toBe(1)
     expect(system.fn.fetch.withCredentials).toBe(false)
   })