@upendra19/swagger-ui-custom 1.0.0

package/src/core/plugins/oas3/components/servers.jsx

@@ -0,0 +1,153 @@
+/**
+ * @prettier
+ */
+import React, { useCallback, useEffect } from "react"
+import { OrderedMap } from "immutable"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+const Servers = ({
+  servers,
+  currentServer,
+  setSelectedServer,
+  setServerVariableValue,
+  getServerVariable,
+  getEffectiveServerValue,
+}) => {
+  const currentServerDefinition =
+    servers.find((s) => s.get("url") === currentServer) || OrderedMap()
+  const currentServerVariableDefs =
+    currentServerDefinition.get("variables") || OrderedMap()
+  const shouldShowVariableUI = currentServerVariableDefs.size !== 0
+
+  useEffect(() => {
+    if (currentServer) return
+
+    // fire 'change' event to set default 'value' of select
+    setSelectedServer(servers.first()?.get("url"))
+  }, [])
+
+  useEffect(() => {
+    // server has changed, we may need to set default values
+    const currentServerDefinition = servers.find(
+      (server) => server.get("url") === currentServer
+    )
+    if (!currentServerDefinition) {
+      setSelectedServer(servers.first().get("url"))
+      return
+    }
+
+    const currentServerVariableDefs =
+      currentServerDefinition.get("variables") || OrderedMap()
+    currentServerVariableDefs.map((val, key) => {
+      setServerVariableValue({
+        server: currentServer,
+        key,
+        val: val.get("default") || "",
+      })
+    })
+  }, [currentServer, servers])
+
+  const handleServerChange = useCallback(
+    (e) => {
+      setSelectedServer(e.target.value)
+    },
+    [setSelectedServer]
+  )
+
+  const handleServerVariableChange = useCallback(
+    (e) => {
+      const variableName = e.target.getAttribute("data-variable")
+      const newVariableValue = e.target.value
+
+      setServerVariableValue({
+        server: currentServer,
+        key: variableName,
+        val: newVariableValue,
+      })
+    },
+    [setServerVariableValue, currentServer]
+  )
+
+  return (
+    <div className="servers">
+      <label htmlFor="servers">
+        <select
+          onChange={handleServerChange}
+          value={currentServer}
+          id="servers"
+        >
+          {servers
+            .valueSeq()
+            .map((server) => (
+              <option value={server.get("url")} key={server.get("url")}>
+                {server.get("url")}
+                {server.get("description") && ` - ${server.get("description")}`}
+              </option>
+            ))
+            .toArray()}
+        </select>
+      </label>
+      {shouldShowVariableUI && (
+        <div>
+          <div className={"computed-url"}>
+            Computed URL:
+            <code>{getEffectiveServerValue(currentServer)}</code>
+          </div>
+          <h4>Server variables</h4>
+          <table>
+            <tbody>
+              {currentServerVariableDefs.entrySeq().map(([name, val]) => {
+                return (
+                  <tr key={name}>
+                    <td>{name}</td>
+                    <td>
+                      {val.get("enum") ? (
+                        <select
+                          data-variable={name}
+                          onChange={handleServerVariableChange}
+                        >
+                          {val.get("enum").map((enumValue) => {
+                            return (
+                              <option
+                                selected={
+                                  enumValue ===
+                                  getServerVariable(currentServer, name)
+                                }
+                                key={enumValue}
+                                value={enumValue}
+                              >
+                                {enumValue}
+                              </option>
+                            )
+                          })}
+                        </select>
+                      ) : (
+                        <input
+                          type={"text"}
+                          value={getServerVariable(currentServer, name) || ""}
+                          onChange={handleServerVariableChange}
+                          data-variable={name}
+                        ></input>
+                      )}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
+Servers.propTypes = {
+  servers: ImPropTypes.list.isRequired,
+  currentServer: PropTypes.string.isRequired,
+  setSelectedServer: PropTypes.func.isRequired,
+  setServerVariableValue: PropTypes.func.isRequired,
+  getServerVariable: PropTypes.func.isRequired,
+  getEffectiveServerValue: PropTypes.func.isRequired,
+}
+
+export default Servers

package/src/core/plugins/oas3/fn.js

@@ -0,0 +1,35 @@
+/**
+ * @prettier
+ */
+import { Map } from "immutable"
+import isPlainObject from "lodash/isPlainObject"
+
+export const makeIsFileUploadIntended = (getSystem) => {
+  const isFileUploadIntended = (schema, mediaType = null) => {
+    const { getConfigs, fn } = getSystem()
+    const { fileUploadMediaTypes } = getConfigs()
+    const isFileUploadMediaType =
+      typeof mediaType === "string" &&
+      fileUploadMediaTypes.some((fileUploadMediaType) =>
+        mediaType.startsWith(fileUploadMediaType)
+      )
+
+    if (isFileUploadMediaType) {
+      return true
+    }
+
+    const isSchemaImmutable = Map.isMap(schema)
+
+    if (!isSchemaImmutable && !isPlainObject(schema)) {
+      return false
+    }
+
+    const format = isSchemaImmutable ? schema.get("format") : schema.format
+
+    return (
+      fn.hasSchemaType(schema, "string") && ["binary", "byte"].includes(format)
+    )
+  }
+
+  return isFileUploadIntended
+}

package/src/core/plugins/oas3/helpers.jsx

@@ -0,0 +1,48 @@
+/**
+ * @prettier
+ */
+import React from "react"
+
+export function isOAS30(jsSpec) {
+  const oasVersion = jsSpec.get("openapi")
+
+  return (
+    typeof oasVersion === "string" && /^3\.0\.(?:[1-9]\d*|0)$/.test(oasVersion)
+  )
+}
+
+export function isSwagger2(jsSpec) {
+  const swaggerVersion = jsSpec.get("swagger")
+
+  return typeof swaggerVersion === "string" && swaggerVersion === "2.0"
+}
+
+export function OAS3ComponentWrapFactory(Component) {
+  return (Ori, system) => (props) => {
+    if (typeof system.specSelectors?.isOAS3 === "function") {
+      if (system.specSelectors.isOAS3()) {
+        return <Component {...props} {...system} Ori={Ori}></Component>
+      } else {
+        return <Ori {...props}></Ori>
+      }
+    } else {
+      console.warn("OAS3 wrapper: couldn't get spec")
+      return null
+    }
+  }
+}
+
+export function OAS30ComponentWrapFactory(Component) {
+  return (Ori, system) => (props) => {
+    if (typeof system.specSelectors?.isOAS30 === "function") {
+      if (system.specSelectors.isOAS30()) {
+        return <Component {...props} {...system} Ori={Ori}></Component>
+      } else {
+        return <Ori {...props}></Ori>
+      }
+    } else {
+      console.warn("OAS30 wrapper: couldn't get spec")
+      return null
+    }
+  }
+}

package/src/core/plugins/oas3/index.js

@@ -0,0 +1,39 @@
+/**
+ * @prettier
+ */
+import * as specWrapSelectors from "./spec-extensions/wrap-selectors"
+import * as authWrapSelectors from "./auth-extensions/wrap-selectors"
+import * as specSelectors from "./spec-extensions/selectors"
+import components from "./components"
+import wrapComponents from "./wrap-components"
+import * as actions from "./actions"
+import * as selectors from "./selectors"
+import reducers from "./reducers"
+import { makeIsFileUploadIntended } from "./fn"
+
+export default function ({ getSystem }) {
+  const isFileUploadIntended = makeIsFileUploadIntended(getSystem)
+
+  return {
+    components,
+    wrapComponents,
+    statePlugins: {
+      spec: {
+        wrapSelectors: specWrapSelectors,
+        selectors: specSelectors,
+      },
+      auth: {
+        wrapSelectors: authWrapSelectors,
+      },
+      oas3: {
+        actions: { ...actions },
+        reducers,
+        selectors: { ...selectors },
+      },
+    },
+    fn: {
+      isFileUploadIntended,
+      isFileUploadIntendedOAS30: isFileUploadIntended,
+    },
+  }
+}

package/src/core/plugins/oas3/reducers.js

@@ -0,0 +1,111 @@
+import { fromJS, Map } from "immutable"
+
+import {
+  UPDATE_SELECTED_SERVER,
+  UPDATE_REQUEST_BODY_VALUE,
+  UPDATE_REQUEST_BODY_INCLUSION,
+  UPDATE_ACTIVE_EXAMPLES_MEMBER,
+  UPDATE_REQUEST_CONTENT_TYPE,
+  UPDATE_SERVER_VARIABLE_VALUE,
+  UPDATE_RESPONSE_CONTENT_TYPE,
+  SET_REQUEST_BODY_VALIDATE_ERROR,
+  CLEAR_REQUEST_BODY_VALIDATE_ERROR,
+  CLEAR_REQUEST_BODY_VALUE, UPDATE_REQUEST_BODY_VALUE_RETAIN_FLAG,
+} from "./actions"
+
+export default {
+  [UPDATE_SELECTED_SERVER]: (state, { payload: { selectedServerUrl, namespace } } ) =>{
+    const path = namespace ? [ namespace, "selectedServer"] : [ "selectedServer"]
+    return state.setIn( path, selectedServerUrl)
+  },
+  [UPDATE_REQUEST_BODY_VALUE]: (state, { payload: { value, pathMethod } } ) =>{
+    let [path, method] = pathMethod
+    if (!Map.isMap(value)) {
+      // context: application/json is always a String (instead of Map)
+      return state.setIn( [ "requestData", path, method, "bodyValue" ], value)
+    }
+    let currentVal = state.getIn(["requestData", path, method, "bodyValue"]) || Map()
+    if (!Map.isMap(currentVal)) {
+      // context: user switch from application/json to application/x-www-form-urlencoded
+      currentVal = Map()
+    }
+    let newVal = currentVal
+    const [...valueKeys] = value.keys()
+    valueKeys.forEach((valueKey) => {
+      let valueKeyVal = value.getIn([valueKey])
+      // there is no previous value for this key or the new value is received from user input as a string
+      if (!newVal.has(valueKey) || !Map.isMap(valueKeyVal)) {
+        newVal = newVal.setIn([valueKey, "value"], valueKeyVal)
+      }
+    })
+    return state.setIn(["requestData", path, method, "bodyValue"], newVal)
+  },
+  [UPDATE_REQUEST_BODY_VALUE_RETAIN_FLAG]: (state, { payload: { value, pathMethod } } ) =>{
+    let [path, method] = pathMethod
+    return state.setIn(["requestData", path, method, "retainBodyValue"], value)
+  },
+  [UPDATE_REQUEST_BODY_INCLUSION]: (state, { payload: { value, pathMethod, name } } ) =>{
+    let [path, method] = pathMethod
+    return state.setIn( [ "requestData", path, method, "bodyInclusion", name ], value)
+  },
+  [UPDATE_ACTIVE_EXAMPLES_MEMBER]: (state, { payload: { name, pathMethod, contextType, contextName } } ) =>{
+    let [path, method] = pathMethod
+    return state.setIn( [ "examples", path, method, contextType, contextName, "activeExample" ], name)
+  },
+  [UPDATE_REQUEST_CONTENT_TYPE]: (state, { payload: { value, pathMethod } } ) =>{
+    let [path, method] = pathMethod
+    return state.setIn( [ "requestData", path, method, "requestContentType" ], value)
+  },
+  [UPDATE_RESPONSE_CONTENT_TYPE]: (state, { payload: { value, path, method } } ) =>{
+    return state.setIn( [ "requestData", path, method, "responseContentType" ], value)
+  },
+  [UPDATE_SERVER_VARIABLE_VALUE]: (state, { payload: { server, namespace, key, val } } ) =>{
+    const path = namespace ? [ namespace, "serverVariableValues", server, key ] : [ "serverVariableValues", server, key ]
+    return state.setIn(path, val)
+  },
+  [SET_REQUEST_BODY_VALIDATE_ERROR]: (state, { payload: { path, method, validationErrors } } ) => {
+    let errors = []
+    errors.push("Required field is not provided")
+    if (validationErrors.missingBodyValue) {
+      // context: is application/json or application/xml, where typeof (missing) bodyValue = String
+      return state.setIn(["requestData", path, method, "errors"], fromJS(errors))
+    }
+    if (validationErrors.missingRequiredKeys && validationErrors.missingRequiredKeys.length > 0) {
+      // context: is application/x-www-form-urlencoded, with list of missing keys
+      const { missingRequiredKeys } = validationErrors
+      return state.updateIn(["requestData", path, method, "bodyValue"], fromJS({}), missingKeyValues => {
+        return missingRequiredKeys.reduce((bodyValue, currentMissingKey) => {
+          return bodyValue.setIn([currentMissingKey, "errors"], fromJS(errors))
+        }, missingKeyValues)
+      })
+    }
+    console.warn("unexpected result: SET_REQUEST_BODY_VALIDATE_ERROR")
+    return state
+  },
+  [CLEAR_REQUEST_BODY_VALIDATE_ERROR]: (state, { payload: { path, method } }) => {
+    const requestBodyValue = state.getIn(["requestData", path, method, "bodyValue"])
+    if (!Map.isMap(requestBodyValue)) {
+      return state.setIn(["requestData", path, method, "errors"], fromJS([]))
+    }
+    const [...valueKeys] = requestBodyValue.keys()
+    if (!valueKeys) {
+      return state
+    }
+    return state.updateIn(["requestData", path, method, "bodyValue"], fromJS({}), bodyValues => {
+      return valueKeys.reduce((bodyValue, curr) => {
+        return bodyValue.setIn([curr, "errors"], fromJS([]))
+      }, bodyValues)
+    })
+  },
+  [CLEAR_REQUEST_BODY_VALUE]: (state, { payload: { pathMethod }}) => {
+    let [path, method] = pathMethod
+    const requestBodyValue = state.getIn(["requestData", path, method, "bodyValue"])
+    if (!requestBodyValue) {
+      return state
+    }
+    if (!Map.isMap(requestBodyValue)) {
+      return state.setIn(["requestData", path, method, "bodyValue"], "")
+    }
+    return state.setIn(["requestData", path, method, "bodyValue"], Map())
+  }
+}

package/src/core/plugins/oas3/selectors.js

@@ -0,0 +1,308 @@
+/**
+ * @prettier
+ */
+import { OrderedMap, Map, List } from "immutable"
+import escapeRegExp from "lodash/escapeRegExp"
+import constant from "lodash/constant"
+
+import { getDefaultRequestBodyValue } from "./components/request-body"
+import { stringify } from "core/utils"
+
+// Helpers
+
+const onlyOAS3 =
+  (selector) =>
+  (state, ...args) =>
+  (system) => {
+    if (system.getSystem().specSelectors.isOAS3()) {
+      const selectedValue = selector(state, ...args)
+      return typeof selectedValue === "function"
+        ? selectedValue(system)
+        : selectedValue
+    } else {
+      return null
+    }
+  }
+
+function validateRequestBodyIsRequired(selector) {
+  return (...args) =>
+    (system) => {
+      const specJson = system.getSystem().specSelectors.specJson()
+      const argsList = [...args]
+      // expect argsList[0] = state
+      let pathMethod = argsList[1] || []
+      let isOas3RequestBodyRequired = specJson.getIn([
+        "paths",
+        ...pathMethod,
+        "requestBody",
+        "required",
+      ])
+
+      if (isOas3RequestBodyRequired) {
+        return selector(...args)
+      } else {
+        // validation pass b/c not required
+        return true
+      }
+    }
+}
+
+const validateRequestBodyValueExists = (state, pathMethod) => {
+  pathMethod = pathMethod || []
+  let oas3RequestBodyValue = state.getIn([
+    "requestData",
+    ...pathMethod,
+    "bodyValue",
+  ])
+  // context: bodyValue can be a String, or a Map
+  if (!oas3RequestBodyValue) {
+    return false
+  }
+  // validation pass if String is not empty, or if Map exists
+  return true
+}
+
+export const selectedServer = onlyOAS3((state, namespace) => {
+  const path = namespace ? [namespace, "selectedServer"] : ["selectedServer"]
+  return state.getIn(path) || ""
+})
+
+export const requestBodyValue = onlyOAS3((state, path, method) => {
+  return state.getIn(["requestData", path, method, "bodyValue"]) || null
+})
+
+export const shouldRetainRequestBodyValue = onlyOAS3((state, path, method) => {
+  return state.getIn(["requestData", path, method, "retainBodyValue"]) || false
+})
+
+export const selectDefaultRequestBodyValue =
+  (state, path, method) => (system) => {
+    const { oas3Selectors, specSelectors, fn } = system.getSystem()
+
+    if (specSelectors.isOAS3()) {
+      const currentMediaType = oas3Selectors.requestContentType(path, method)
+      if (currentMediaType) {
+        return getDefaultRequestBodyValue(
+          specSelectors.specResolvedSubtree([
+            "paths",
+            path,
+            method,
+            "requestBody",
+          ]),
+          currentMediaType,
+          oas3Selectors.activeExamplesMember(
+            path,
+            method,
+            "requestBody",
+            "requestBody"
+          ),
+          fn
+        )
+      }
+    }
+    return null
+  }
+
+export const hasUserEditedBody = onlyOAS3((state, path, method) => (system) => {
+  const { oas3Selectors, specSelectors, fn } = system
+
+  let userHasEditedBody = false
+  const currentMediaType = oas3Selectors.requestContentType(path, method)
+  let userEditedRequestBody = oas3Selectors.requestBodyValue(path, method)
+  const requestBody = specSelectors.specResolvedSubtree([
+    "paths",
+    path,
+    method,
+    "requestBody",
+  ])
+
+  /**
+   * The only request body that can currently be edited is for Path Items that are direct values of OpenAPI.paths.
+   * Path Item contained within the Callback Object or OpenAPI.webhooks (OpenAPI 3.1.0) have `Try it out`
+   * disabled and thus body cannot be edited.
+   */
+  if (!requestBody) {
+    return false
+  }
+
+  if (Map.isMap(userEditedRequestBody)) {
+    // context is not application/json media-type
+    userEditedRequestBody = stringify(
+      userEditedRequestBody
+        .mapEntries((kv) =>
+          Map.isMap(kv[1]) ? [kv[0], kv[1].get("value")] : kv
+        )
+        .toJS()
+    )
+  }
+  if (List.isList(userEditedRequestBody)) {
+    userEditedRequestBody = stringify(userEditedRequestBody)
+  }
+
+  if (currentMediaType) {
+    const currentMediaTypeDefaultBodyValue = getDefaultRequestBodyValue(
+      requestBody,
+      currentMediaType,
+      oas3Selectors.activeExamplesMember(
+        path,
+        method,
+        "requestBody",
+        "requestBody"
+      ),
+      fn
+    )
+    userHasEditedBody =
+      !!userEditedRequestBody &&
+      userEditedRequestBody !== currentMediaTypeDefaultBodyValue
+  }
+  return userHasEditedBody
+})
+
+export const requestBodyInclusionSetting = onlyOAS3((state, path, method) => {
+  return state.getIn(["requestData", path, method, "bodyInclusion"]) || Map()
+})
+
+export const requestBodyErrors = onlyOAS3((state, path, method) => {
+  return state.getIn(["requestData", path, method, "errors"]) || null
+})
+
+export const activeExamplesMember = onlyOAS3(
+  (state, path, method, type, name) => {
+    return (
+      state.getIn(["examples", path, method, type, name, "activeExample"]) ||
+      null
+    )
+  }
+)
+
+export const requestContentType = onlyOAS3((state, path, method) => {
+  return (
+    state.getIn(["requestData", path, method, "requestContentType"]) || null
+  )
+})
+
+export const responseContentType = onlyOAS3((state, path, method) => {
+  return (
+    state.getIn(["requestData", path, method, "responseContentType"]) || null
+  )
+})
+
+export const serverVariableValue = onlyOAS3((state, locationData, key) => {
+  let path
+
+  // locationData may take one of two forms, for backwards compatibility
+  // Object: ({server, namespace?}) or String:(server)
+  if (typeof locationData !== "string") {
+    const { server, namespace } = locationData
+    if (namespace) {
+      path = [namespace, "serverVariableValues", server, key]
+    } else {
+      path = ["serverVariableValues", server, key]
+    }
+  } else {
+    const server = locationData
+    path = ["serverVariableValues", server, key]
+  }
+
+  return state.getIn(path) || null
+})
+
+export const serverVariables = onlyOAS3((state, locationData) => {
+  let path
+
+  // locationData may take one of two forms, for backwards compatibility
+  // Object: ({server, namespace?}) or String:(server)
+  if (typeof locationData !== "string") {
+    const { server, namespace } = locationData
+    if (namespace) {
+      path = [namespace, "serverVariableValues", server]
+    } else {
+      path = ["serverVariableValues", server]
+    }
+  } else {
+    const server = locationData
+    path = ["serverVariableValues", server]
+  }
+
+  return state.getIn(path) || OrderedMap()
+})
+
+export const serverEffectiveValue = onlyOAS3((state, locationData) => {
+  var varValues, serverValue
+
+  // locationData may take one of two forms, for backwards compatibility
+  // Object: ({server, namespace?}) or String:(server)
+  if (typeof locationData !== "string") {
+    const { server, namespace } = locationData
+    serverValue = server
+    if (namespace) {
+      varValues = state.getIn([namespace, "serverVariableValues", serverValue])
+    } else {
+      varValues = state.getIn(["serverVariableValues", serverValue])
+    }
+  } else {
+    serverValue = locationData
+    varValues = state.getIn(["serverVariableValues", serverValue])
+  }
+
+  varValues = varValues || OrderedMap()
+  let str = serverValue
+
+  varValues.map((val, key) => {
+    str = str.replace(new RegExp(`{${escapeRegExp(key)}}`, "g"), val)
+  })
+
+  return str
+})
+
+export const validateBeforeExecute = validateRequestBodyIsRequired(
+  (state, pathMethod) => validateRequestBodyValueExists(state, pathMethod)
+)
+
+export const validateShallowRequired = (
+  state,
+  {
+    oas3RequiredRequestBodyContentType,
+    oas3RequestContentType,
+    oas3RequestBodyValue,
+  }
+) => {
+  let missingRequiredKeys = []
+  // context: json => String; urlencoded, form-data => Map
+  if (!Map.isMap(oas3RequestBodyValue)) {
+    return missingRequiredKeys
+  }
+  let requiredKeys = []
+  // Cycle through list of possible contentTypes for matching contentType and defined requiredKeys
+  Object.keys(oas3RequiredRequestBodyContentType.requestContentType).forEach(
+    (contentType) => {
+      if (contentType === oas3RequestContentType) {
+        let contentTypeVal =
+          oas3RequiredRequestBodyContentType.requestContentType[contentType]
+        contentTypeVal.forEach((requiredKey) => {
+          if (requiredKeys.indexOf(requiredKey) < 0) {
+            requiredKeys.push(requiredKey)
+          }
+        })
+      }
+    }
+  )
+  requiredKeys.forEach((key) => {
+    let requiredKeyValue = oas3RequestBodyValue.getIn([key, "value"])
+    if (!requiredKeyValue) {
+      missingRequiredKeys.push(key)
+    }
+  })
+  return missingRequiredKeys
+}
+
+export const validOperationMethods = constant([
+  "get",
+  "put",
+  "post",
+  "delete",
+  "options",
+  "head",
+  "patch",
+  "trace",
+])