@upendra19/swagger-ui-custom 1.0.0

package/src/core/containers/OperationContainer.jsx

@@ -0,0 +1,267 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+import { opId } from "swagger-client/es/helpers"
+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,
+      executeInProgress: false
+    }
+  }
+
+  static propTypes = {
+    op: PropTypes.instanceOf(Iterable).isRequired,
+    tag: PropTypes.string.isRequired,
+    path: PropTypes.string.isRequired,
+    method: PropTypes.string.isRequired,
+    operationId: PropTypes.string.isRequired,
+    showSummary: PropTypes.bool.isRequired,
+    isShown: PropTypes.bool.isRequired,
+    jumpToKey: PropTypes.string.isRequired,
+    allowTryItOut: PropTypes.bool,
+    displayOperationId: PropTypes.bool,
+    isAuthorized: PropTypes.bool,
+    displayRequestDuration: PropTypes.bool,
+    response: PropTypes.instanceOf(Iterable),
+    request: PropTypes.instanceOf(Iterable),
+    security: PropTypes.instanceOf(Iterable),
+    isDeepLinkingEnabled: PropTypes.bool.isRequired,
+    specPath: ImPropTypes.list.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    authActions: PropTypes.object,
+    oas3Actions: PropTypes.object,
+    oas3Selectors: PropTypes.object,
+    authSelectors: PropTypes.object,
+    specActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+    layoutSelectors: PropTypes.object.isRequired,
+    fn: PropTypes.object.isRequired,
+    getConfigs: PropTypes.func.isRequired
+  }
+
+  static defaultProps = {
+    showSummary: true,
+    response: null,
+    allowTryItOut: true,
+    displayOperationId: false,
+    displayRequestDuration: false
+  }
+
+  mapStateToProps(nextState, props) {
+    const { op, layoutSelectors, getConfigs } = props
+    const { docExpansion, deepLinking, displayOperationId, displayRequestDuration, supportedSubmitMethods, operationsCollapsible } = getConfigs()
+    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 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: deepLinking,
+      showSummary,
+      displayOperationId,
+      displayRequestDuration,
+      allowTryItOut,
+      security,
+      isAuthorized: props.authSelectors.isAuthorized(security),
+      // Force operations to always be shown (expanded)
+      isShown: true,
+      jumpToKey: `paths.${props.path}.${props.method}`,
+      response: props.specSelectors.responseFor(props.path, props.method),
+      request: props.specSelectors.requestFor(props.path, props.method)
+    }
+  }
+
+  componentDidMount() {
+    const { isShown } = this.props
+    const resolvedSubtree = this.getResolvedSubtree()
+
+    if(isShown && resolvedSubtree === undefined) {
+      this.requestResolvedSubtree()
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const { response, isShown } = this.props
+    const resolvedSubtree = this.getResolvedSubtree()
+  
+    if (response !== prevProps.response) {
+      this.setState({ executeInProgress: false })
+    }
+  
+    if (isShown && resolvedSubtree === undefined && !prevProps.isShown) {
+      this.requestResolvedSubtree()
+    }
+  }
+
+  toggleShown =() => {
+    // Accordion functionality disabled - operations always stay expanded
+    return
+  }
+
+  onCancelClick=() => {
+    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
+  }
+
+  onTryoutClick =() => {
+    this.setState({tryItOutEnabled: !this.state.tryItOutEnabled})
+  }
+
+  onResetClick = (pathMethod) => {
+    const defaultRequestBodyValue = this.props.oas3Selectors.selectDefaultRequestBodyValue(...pathMethod)
+    const contentType = this.props.oas3Selectors.requestContentType(...pathMethod)
+
+    if (contentType === "application/x-www-form-urlencoded" || contentType === "multipart/form-data") {
+      const jsonRequestBodyValue = JSON.parse(defaultRequestBodyValue)
+      Object.entries(jsonRequestBodyValue).forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+          jsonRequestBodyValue[key] = jsonRequestBodyValue[key].map((val) => {
+            if (typeof val === "object") {
+              return JSON.stringify(val, null, 2)
+            } 
+            return val
+          })
+        } else if (typeof value === "object") {
+          jsonRequestBodyValue[key] = JSON.stringify(jsonRequestBodyValue[key], null, 2)
+        }
+      })
+      this.props.oas3Actions.setRequestBodyValue({ value: fromJS(jsonRequestBodyValue), pathMethod })
+    } else {
+      this.props.oas3Actions.setRequestBodyValue({ value: defaultRequestBodyValue, pathMethod })
+    }
+  }
+
+  onExecute = () => {
+    this.setState({ executeInProgress: true })
+  }
+
+  getResolvedSubtree = () => {
+    const {
+      specSelectors,
+      path,
+      method,
+      specPath
+    } = this.props
+
+    if(specPath) {
+      return specSelectors.specResolvedSubtree(specPath.toJS())
+    }
+
+    return specSelectors.specResolvedSubtree(["paths", path, method])
+  }
+
+  requestResolvedSubtree = () => {
+    const {
+      specActions,
+      path,
+      method,
+      specPath
+    } = this.props
+
+
+    if(specPath) {
+      return specActions.requestResolvedSubtree(specPath.toJS())
+    }
+
+    return specActions.requestResolvedSubtree(["paths", path, method])
+  }
+
+  render() {
+    let {
+      op: unresolvedOp,
+      tag,
+      path,
+      method,
+      security,
+      isAuthorized,
+      operationId,
+      showSummary,
+      isShown,
+      jumpToKey,
+      allowTryItOut,
+      response,
+      request,
+      displayOperationId,
+      displayRequestDuration,
+      isDeepLinkingEnabled,
+      specPath,
+      specSelectors,
+      specActions,
+      getComponent,
+      getConfigs,
+      layoutSelectors,
+      layoutActions,
+      authActions,
+      authSelectors,
+      oas3Actions,
+      oas3Selectors,
+      fn
+    } = this.props
+
+    const Operation = getComponent( "operation" )
+
+    const resolvedSubtree = this.getResolvedSubtree() || Map()
+
+    const operationProps = fromJS({
+      op: resolvedSubtree,
+      tag,
+      path,
+      summary: unresolvedOp.getIn(["operation", "summary"]) || "",
+      deprecated: resolvedSubtree.get("deprecated") || unresolvedOp.getIn(["operation", "deprecated"]) || false,
+      method,
+      security,
+      isAuthorized,
+      operationId,
+      originalOperationId: resolvedSubtree.getIn(["operation", "__originalOperationId"]),
+      showSummary,
+      isShown,
+      jumpToKey,
+      allowTryItOut,
+      request,
+      displayOperationId,
+      displayRequestDuration,
+      isDeepLinkingEnabled,
+      executeInProgress: this.state.executeInProgress,
+      tryItOutEnabled: this.state.tryItOutEnabled
+    })
+
+    return (
+      <Operation
+        operation={operationProps}
+        response={response}
+        request={request}
+        isShown={isShown}
+
+        toggleShown={this.toggleShown}
+        onTryoutClick={this.onTryoutClick}
+        onResetClick={this.onResetClick}
+        onCancelClick={this.onCancelClick}
+        onExecute={this.onExecute}
+        specPath={specPath}
+
+        specActions={ specActions }
+        specSelectors={ specSelectors }
+        oas3Actions={oas3Actions}
+        oas3Selectors={oas3Selectors}
+        layoutActions={ layoutActions }
+        layoutSelectors={ layoutSelectors }
+        authActions={ authActions }
+        authSelectors={ authSelectors }
+        getComponent={ getComponent }
+        getConfigs={ getConfigs }
+        fn={fn}
+      />
+    )
+  }
+
+}

package/src/core/containers/authorize-btn.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class AuthorizeBtnContainer extends React.Component {
+
+  static propTypes = {
+    specActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    authActions: PropTypes.object.isRequired,
+    authSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired
+  }
+
+  render () {
+    const { authActions, authSelectors, specSelectors, getComponent} = this.props
+    
+    const securityDefinitions = specSelectors.securityDefinitions()
+    const authorizableDefinitions = authSelectors.definitionsToAuthorize()
+
+    const AuthorizeBtn = getComponent("authorizeBtn")
+
+    return securityDefinitions ? (
+      <AuthorizeBtn
+        onClick={() => authActions.showDefinitions(authorizableDefinitions)}
+        isAuthorized={!!authSelectors.authorized().size}
+        showPopup={!!authSelectors.shownDefinitions()}
+        getComponent={getComponent}
+      />
+    ) : null
+  }
+}

package/src/core/containers/filter.jsx

@@ -0,0 +1,44 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class FilterContainer extends React.Component {
+
+  static propTypes = {
+    specSelectors: PropTypes.object.isRequired,
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+  }
+
+  onFilterChange = (e) => {
+    const {target: {value}} = e
+    this.props.layoutActions.updateFilter(value)
+  }
+
+  render () {
+    const {specSelectors, layoutSelectors, getComponent} = this.props
+    const Col = getComponent("Col")
+
+    const isLoading = specSelectors.loadingStatus() === "loading"
+    const isFailed = specSelectors.loadingStatus() === "failed"
+    const filter = layoutSelectors.currentFilter()
+
+    const classNames = ["operation-filter-input"]
+    if (isFailed) classNames.push("failed")
+    if (isLoading) classNames.push("loading")
+
+    return (
+      <div>
+        {filter === false ? 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={typeof filter === "string" ? filter : ""}
+                     disabled={isLoading}/>
+            </Col>
+          </div>
+        }
+      </div>
+    )
+  }
+}

package/src/core/containers/info.jsx

@@ -0,0 +1,35 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default class InfoContainer extends React.Component {
+
+  static propTypes = {
+    specActions: PropTypes.object.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    getConfigs: PropTypes.func, // Optional
+    oas3Selectors: PropTypes.func.isRequired,
+  }
+
+  render () {
+    const {specSelectors, getComponent, getConfigs, oas3Selectors} = this.props
+
+    const info = specSelectors.info()
+    const url = specSelectors.url()
+    const basePath = specSelectors.basePath()
+    const host = specSelectors.host()
+    const externalDocs = specSelectors.externalDocs()
+    const selectedServer = oas3Selectors.selectedServer()
+
+    const Info = getComponent("info")
+
+    return (
+      <div>
+        {info && info.count() ? (
+          <Info info={info} url={url} host={host} basePath={basePath} externalDocs={externalDocs}
+                getComponent={getComponent} getConfigs={getConfigs} selectedServer={selectedServer} />
+        ) : null}
+      </div>
+    )
+  }
+}

package/src/core/index.js

@@ -0,0 +1,174 @@
+/**
+ * @prettier
+ */
+import System from "./system"
+// presets
+import BasePreset from "./presets/base"
+import ApisPreset from "./presets/apis"
+// plugins
+import AuthPlugin from "./plugins/auth/"
+import ConfigsPlugin from "./plugins/configs"
+import DeepLinkingPlugin from "./plugins/deep-linking"
+import ErrPlugin from "./plugins/err"
+import FilterPlugin from "./plugins/filter"
+import IconsPlugin from "./plugins/icons"
+import JSONSchema5Plugin from "./plugins/json-schema-5"
+import JSONSchema202012Plugin from "./plugins/json-schema-2020-12"
+import JSONSchema202012SamplesPlugin from "./plugins/json-schema-2020-12-samples"
+import LayoutPlugin from "./plugins/layout"
+import LogsPlugin from "./plugins/logs"
+import OpenAPI30Plugin from "./plugins/oas3"
+import OpenAPI31Plugin from "./plugins/oas3"
+import OnCompletePlugin from "./plugins/on-complete"
+import RequestSnippetsPlugin from "./plugins/request-snippets"
+import JSONSchema5SamplesPlugin from "./plugins/json-schema-5-samples"
+import SpecPlugin from "./plugins/spec"
+import SwaggerClientPlugin from "./plugins/swagger-client"
+import UtilPlugin from "./plugins/util"
+import ViewPlugin from "./plugins/view"
+import ViewLegacyPlugin from "core/plugins/view-legacy"
+import DownloadUrlPlugin from "./plugins/download-url"
+import SyntaxHighlightingPlugin from "core/plugins/syntax-highlighting"
+import VersionsPlugin from "core/plugins/versions"
+import SafeRenderPlugin from "./plugins/safe-render"
+
+import {
+  defaultOptions,
+  optionsFromQuery,
+  optionsFromURL,
+  optionsFromRuntime,
+  mergeOptions,
+  inlinePluginOptionsFactorization,
+  systemOptionsFactorization,
+  typeCastOptions,
+  typeCastMappings,
+} from "./config"
+
+function SwaggerUI(userOptions) {
+  const queryOptions = optionsFromQuery()(userOptions)
+  const runtimeOptions = optionsFromRuntime()()
+  const mergedOptions = SwaggerUI.config.merge(
+    {},
+    SwaggerUI.config.defaults,
+    runtimeOptions,
+    userOptions,
+    queryOptions
+  )
+  const systemOptions = systemOptionsFactorization(mergedOptions)
+  const InlinePlugin = inlinePluginOptionsFactorization(mergedOptions)
+
+  const unboundSystem = new System(systemOptions)
+  unboundSystem.register([mergedOptions.plugins, InlinePlugin])
+  const system = unboundSystem.getSystem()
+
+  const persistConfigs = (options) => {
+    unboundSystem.setConfigs(options)
+    system.configsActions.loaded()
+  }
+  const updateSpec = (options) => {
+    if (
+      !queryOptions.url &&
+      typeof options.spec === "object" &&
+      Object.keys(options.spec).length > 0
+    ) {
+      system.specActions.updateUrl("")
+      system.specActions.updateLoadingStatus("success")
+      system.specActions.updateSpec(JSON.stringify(options.spec))
+    } else if (
+      typeof system.specActions.download === "function" &&
+      options.url &&
+      !options.urls
+    ) {
+      system.specActions.updateUrl(options.url)
+      system.specActions.download(options.url)
+    }
+  }
+  const render = (options) => {
+    if (options.domNode) {
+      system.render(options.domNode, "App")
+    } else if (options.dom_id) {
+      const domNode = document.querySelector(options.dom_id)
+      system.render(domNode, "App")
+    } else if (options.dom_id === null || options.domNode === null) {
+      /**
+       * noop
+       *
+       * SwaggerUI instance can be created without any rendering involved.
+       * This is also useful for lazy rendering or testing.
+       */
+    } else {
+      console.error("Skipped rendering: no `dom_id` or `domNode` was specified")
+    }
+  }
+
+  // if no configUrl is provided, we can safely persist the configs and render
+  if (!mergedOptions.configUrl) {
+    persistConfigs(mergedOptions)
+    updateSpec(mergedOptions)
+    render(mergedOptions)
+
+    return system
+  }
+
+  // eslint-disable-next-line no-extra-semi
+  ;(async () => {
+    const { configUrl: url } = mergedOptions
+    const urlOptions = await optionsFromURL({ url, system })(mergedOptions)
+    const urlMergedOptions = SwaggerUI.config.merge(
+      {},
+      mergedOptions,
+      urlOptions,
+      queryOptions
+    )
+
+    persistConfigs(urlMergedOptions)
+    if (urlOptions !== null) updateSpec(urlMergedOptions)
+    render(urlMergedOptions)
+  })()
+
+  return system
+}
+
+SwaggerUI.System = System
+
+SwaggerUI.config = {
+  defaults: defaultOptions,
+  merge: mergeOptions,
+  typeCast: typeCastOptions,
+  typeCastMappings,
+}
+
+SwaggerUI.presets = {
+  base: BasePreset,
+  apis: ApisPreset,
+}
+
+SwaggerUI.plugins = {
+  Auth: AuthPlugin,
+  Configs: ConfigsPlugin,
+  DeepLining: DeepLinkingPlugin,
+  Err: ErrPlugin,
+  Filter: FilterPlugin,
+  Icons: IconsPlugin,
+  JSONSchema5: JSONSchema5Plugin,
+  JSONSchema5Samples: JSONSchema5SamplesPlugin,
+  JSONSchema202012: JSONSchema202012Plugin,
+  JSONSchema202012Samples: JSONSchema202012SamplesPlugin,
+  Layout: LayoutPlugin,
+  Logs: LogsPlugin,
+  OpenAPI30: OpenAPI30Plugin,
+  OpenAPI31: OpenAPI31Plugin,
+  OnComplete: OnCompletePlugin,
+  RequestSnippets: RequestSnippetsPlugin,
+  Spec: SpecPlugin,
+  SwaggerClient: SwaggerClientPlugin,
+  Util: UtilPlugin,
+  View: ViewPlugin,
+  ViewLegacy: ViewLegacyPlugin,
+  DownloadUrl: DownloadUrlPlugin,
+  SyntaxHighlighting: SyntaxHighlightingPlugin,
+  Versions: VersionsPlugin,
+  SafeRender: SafeRenderPlugin,
+}
+
+export default SwaggerUI

package/src/core/oauth2-authorize.js

@@ -0,0 +1,137 @@
+import parseUrl from "url-parse"
+import Im from "immutable"
+import { btoa, generateCodeVerifier, createCodeChallenge } from "core/utils"
+import { sanitizeUrl } from "core/utils/url"
+
+export default function authorize ( { auth, authActions, errActions, configs, authConfigs={}, currentServer } ) {
+  let { schema, scopes, name, clientId } = auth
+  let flow = schema.get("flow")
+  let query = []
+
+  switch (flow) {
+    case "password":
+      authActions.authorizePassword(auth)
+      return
+
+    case "application":
+      authActions.authorizeApplication(auth)
+      return
+
+    case "accessCode":
+      query.push("response_type=code")
+      break
+
+    case "implicit":
+      query.push("response_type=token")
+      break
+
+    case "clientCredentials":
+    case "client_credentials":
+      // OAS3
+      authActions.authorizeApplication(auth)
+      return
+
+    case "authorizationCode":
+    case "authorization_code":
+      // OAS3
+      query.push("response_type=code")
+      break
+  }
+
+  if (typeof clientId === "string") {
+    query.push("client_id=" + encodeURIComponent(clientId))
+  }
+
+  let redirectUrl = configs.oauth2RedirectUrl
+
+  // todo move to parser
+  if (typeof redirectUrl === "undefined") {
+    errActions.newAuthErr( {
+      authId: name,
+      source: "validation",
+      level: "error",
+      message: "oauth2RedirectUrl configuration is not passed. Oauth2 authorization cannot be performed."
+    })
+    return
+  }
+  query.push("redirect_uri=" + encodeURIComponent(redirectUrl))
+
+  let scopesArray = []
+  if (Array.isArray(scopes)) {
+    scopesArray = scopes
+  } else if (Im.List.isList(scopes)) {
+    scopesArray = scopes.toArray()
+  }
+
+  if (scopesArray.length > 0) {
+    let scopeSeparator = authConfigs.scopeSeparator || " "
+
+    query.push("scope=" + encodeURIComponent(scopesArray.join(scopeSeparator)))
+  }
+
+  let state = btoa(new Date())
+
+  query.push("state=" + encodeURIComponent(state))
+
+  if (typeof authConfigs.realm !== "undefined") {
+    query.push("realm=" + encodeURIComponent(authConfigs.realm))
+  }
+
+  if ((flow === "authorizationCode" || flow === "authorization_code" || flow === "accessCode") && authConfigs.usePkceWithAuthorizationCodeGrant) {
+      const codeVerifier = generateCodeVerifier()
+      const codeChallenge = createCodeChallenge(codeVerifier)
+
+      query.push("code_challenge=" + codeChallenge)
+      query.push("code_challenge_method=S256")
+
+      // storing the Code Verifier so it can be sent to the token endpoint
+      // when exchanging the Authorization Code for an Access Token
+      auth.codeVerifier = codeVerifier
+  }
+
+  let { additionalQueryStringParams } = authConfigs
+
+  for (let key in additionalQueryStringParams) {
+    if (typeof additionalQueryStringParams[key] !== "undefined") {
+      query.push([key, additionalQueryStringParams[key]].map(encodeURIComponent).join("="))
+    }
+  }
+
+  const authorizationUrl = schema.get("authorizationUrl")
+  let sanitizedAuthorizationUrl
+  if (currentServer) {
+    // OpenAPI 3
+    sanitizedAuthorizationUrl = parseUrl(
+      sanitizeUrl(authorizationUrl),
+      currentServer,
+      true
+    ).toString()
+  } else {
+    sanitizedAuthorizationUrl = sanitizeUrl(authorizationUrl)
+  }
+  let url = [sanitizedAuthorizationUrl, query.join("&")].join(
+    typeof authorizationUrl === "string" && !authorizationUrl.includes("?")
+      ? "?"
+      : "&"
+  )
+
+  // pass action authorizeOauth2 and authentication data through window
+  // to authorize with oauth2
+
+  let callback
+  if (flow === "implicit") {
+    callback = authActions.preAuthorizeImplicit
+  } else if (authConfigs.useBasicAuthenticationWithAccessCodeGrant) {
+    callback = authActions.authorizeAccessCodeWithBasicAuthentication
+  } else {
+    callback = authActions.authorizeAccessCodeWithFormParams
+  }
+
+  authActions.authPopup(url, {
+    auth: auth,
+    state: state,
+    redirectUrl: redirectUrl,
+    callback: callback,
+    errCb: errActions.newAuthErr
+  })
+}