Merge pull request #3648 from swagger-api/ft/oas3-tio

OAS3: Try-It-Out

Author: shockey

package.json

@@ -75,7 +75,7 @@
     "scroll-to-element": "^2.0.0",
     "serialize-error": "2.0.0",
     "shallowequal": "0.2.2",
-    "swagger-client": "3.0.20",
+    "swagger-client": "swagger-api/swagger-js#ft/oas3-tio",
     "url-parse": "^1.1.8",
     "whatwg-fetch": "0.11.1",
     "worker-loader": "^0.7.1",

src/core/components/layouts/base.jsx

@@ -8,6 +8,8 @@ export default class BaseLayout extends React.Component {
     errActions: PropTypes.object.isRequired,
     specActions: PropTypes.object.isRequired,
     specSelectors: PropTypes.object.isRequired,
+    oas3Selectors: PropTypes.object.isRequired,
+    oas3Actions: PropTypes.object.isRequired,
     layoutSelectors: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired,
     getComponent: PropTypes.func.isRequired
@@ -19,7 +21,14 @@ export default class BaseLayout extends React.Component {
   }
 
   render() {
-    let { specSelectors, specActions, getComponent, layoutSelectors } = this.props
+    let {
+      specSelectors,
+      specActions,
+      getComponent,
+      layoutSelectors,
+      oas3Selectors,
+      oas3Actions
+    } = this.props
 
     let info = specSelectors.info()
     let url = specSelectors.url()
@@ -28,13 +37,15 @@ export default class BaseLayout extends React.Component {
     let securityDefinitions = specSelectors.securityDefinitions()
     let externalDocs = specSelectors.externalDocs()
     let schemes = specSelectors.schemes()
+    let servers = specSelectors.servers()
 
     let Info = getComponent("info")
     let Operations = getComponent("operations", true)
     let Models = getComponent("Models", true)
     let AuthorizeBtn = getComponent("authorizeBtn", true)
     let Row = getComponent("Row")
     let Col = getComponent("Col")
+    let Servers = getComponent("Servers")
     let Errors = getComponent("errors", true)
 
     let isLoading = specSelectors.loadingStatus() === "loading"
@@ -82,6 +93,22 @@ export default class BaseLayout extends React.Component {
               </div>
             ) : null }
 
+            { servers && servers.size ? (
+              <div className="server-container">
+                <Col className="servers wrapper" mobile={12}>
+                  <Servers
+                    servers={servers}
+                    currentServer={oas3Selectors.selectedServer()}
+                    setSelectedServer={oas3Actions.setSelectedServer}
+                    setServerVariableValue={oas3Actions.setServerVariableValue}
+                    getServerVariable={oas3Selectors.serverVariableValue}
+                    getEffectiveServerValue={oas3Selectors.serverEffectiveValue}
+                    />
+                </Col>
+              </div>
+
+            ) : null}
+
             {
               filter === null || filter === false ? null :
                 <div className="filter-container">

src/core/plugins/oas3/actions.js

@@ -0,0 +1,35 @@
+// Actions conform to FSA (flux-standard-actions)
+// {type: string,payload: Any|Error, meta: obj, error: bool}
+
+export const UPDATE_SELECTED_SERVER = "oas3_set_servers"
+export const UPDATE_REQUEST_BODY_VALUE = "oas3_set_request_body_value"
+export const UPDATE_REQUEST_CONTENT_TYPE = "oas3_set_request_content_type"
+export const UPDATE_SERVER_VARIABLE_VALUE = "oas3_set_server_variable_value"
+
+export function setSelectedServer (selectedServerUrl) {
+  return {
+    type: UPDATE_SELECTED_SERVER,
+    payload: selectedServerUrl
+  }
+}
+
+export function setRequestBodyValue ({ value, pathMethod }) {
+  return {
+    type: UPDATE_REQUEST_BODY_VALUE,
+    payload: { value, pathMethod }
+  }
+}
+
+export function setRequestContentType ({ value, pathMethod }) {
+  return {
+    type: UPDATE_REQUEST_CONTENT_TYPE,
+    payload: { value, pathMethod }
+  }
+}
+
+export function setServerVariableValue ({ server, key, val }) {
+  return {
+    type: UPDATE_SERVER_VARIABLE_VALUE,
+    payload: { server, key, val }
+  }
+}

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

@@ -1,9 +1,13 @@
 import Callbacks from "./callbacks"
 import RequestBody from "./request-body"
 import OperationLink from "./operation-link.jsx"
+import Servers from "./servers"
+import RequestBodyEditor from "./request-body-editor"
 
 export default {
   Callbacks,
   RequestBody,
+  Servers,
+  RequestBodyEditor,
   operationLink: OperationLink
 }

src/core/plugins/oas3/components/request-body-editor.jsx

@@ -0,0 +1,114 @@
+import React, { PureComponent } from "react"
+import PropTypes from "prop-types"
+import { fromJS } from "immutable"
+import { getSampleSchema } from "core/utils"
+
+const NOOP = Function.prototype
+
+export default class RequestBodyEditor extends PureComponent {
+
+  static propTypes = {
+    requestBody: PropTypes.object.isRequired,
+    mediaType: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    getComponent: PropTypes.func.isRequired,
+    isExecute: PropTypes.bool,
+    specSelectors: PropTypes.object.isRequired,
+  };
+
+  static defaultProps = {
+    mediaType: "application/json",
+    requestBody: fromJS({}),
+    onChange: NOOP,
+  };
+
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      isEditBox: false,
+      value: ""
+    }
+  }
+
+  componentDidMount() {
+    this.setValueToSample.call(this)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if(this.props.mediaType !== nextProps.mediaType) {
+      // media type was changed
+      this.setValueToSample(nextProps.mediaType)
+    }
+
+    if(!this.props.isExecute && nextProps.isExecute) {
+      // we just entered execute mode,
+      // so enable editing for convenience
+      this.setState({ isEditBox: true })
+    }
+  }
+
+  setValueToSample = (explicitMediaType) => {
+    this.onChange(this.sample(explicitMediaType))
+  }
+
+  sample = (explicitMediaType) => {
+    let { requestBody, mediaType } = this.props
+    let schema = requestBody.getIn(["content", explicitMediaType || mediaType, "schema"]).toJS()
+
+    return getSampleSchema(schema, explicitMediaType || mediaType, {
+      includeWriteOnly: true
+    })
+  }
+
+  onChange = (value) => {
+    this.setState({value})
+    this.props.onChange(value)
+  }
+
+  handleOnChange = e => {
+    const { mediaType } = this.props
+    const isJson = /json/i.test(mediaType)
+    const inputValue = isJson ? e.target.value.trim() : e.target.value
+
+    this.onChange(inputValue)
+  }
+
+  toggleIsEditBox = () => this.setState( state => ({isEditBox: !state.isEditBox}))
+
+  render() {
+    let {
+      isExecute,
+      getComponent,
+    } = this.props
+
+    const Button = getComponent("Button")
+    const TextArea = getComponent("TextArea")
+    const HighlightCode = getComponent("highlightCode")
+
+    let { value, isEditBox } = this.state
+
+    return (
+      <div className="body-param">
+        {
+          isEditBox && isExecute
+            ? <TextArea className={"body-param__text"} value={value} onChange={ this.handleOnChange }/>
+            : (value && <HighlightCode className="body-param__example"
+                               value={ value }/>)
+        }
+        <div className="body-param-options">
+          {
+            !isExecute ? null
+                       : <div className="body-param-edit">
+                        <Button className={isEditBox ? "btn cancel body-param__example-edit" : "btn edit body-param__example-edit"}
+                                 onClick={this.toggleIsEditBox}>{ isEditBox ? "Cancel" : "Edit"}
+                         </Button>
+                         </div>
+          }
+        </div>
+
+      </div>
+    )
+
+  }
+}

src/core/plugins/oas3/components/request-body.jsx

@@ -2,24 +2,25 @@ import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { OrderedMap } from "immutable"
-import { getSampleSchema } from "core/utils"
 
-
-const RequestBody = ({ requestBody, getComponent, specSelectors, contentType }) => {
+const RequestBody = ({
+  requestBody,
+  getComponent,
+  specSelectors,
+  contentType,
+  isExecute,
+  onChange
+}) => {
   const Markdown = getComponent("Markdown")
   const ModelExample = getComponent("modelExample")
-  const HighlightCode = getComponent("highlightCode")
+  const RequestBodyEditor = getComponent("RequestBodyEditor")
 
   const requestBodyDescription = (requestBody && requestBody.get("description")) || null
   const requestBodyContent = (requestBody && requestBody.get("content")) || new OrderedMap()
   contentType = contentType || requestBodyContent.keySeq().first()
 
   const mediaTypeValue = requestBodyContent.get(contentType)
 
-  const sampleSchema = getSampleSchema(mediaTypeValue.get("schema").toJS(), contentType, {
-    includeWriteOnly: true
-  })
-
   return <div>
     { requestBodyDescription &&
       <Markdown source={requestBodyDescription} />
@@ -28,8 +29,16 @@ const RequestBody = ({ requestBody, getComponent, specSelectors, contentType })
       getComponent={ getComponent }
       specSelectors={ specSelectors }
       expandDepth={1}
+      isExecute={isExecute}
       schema={mediaTypeValue.get("schema")}
-      example={<HighlightCode value={sampleSchema} />}
+      example={<RequestBodyEditor
+        requestBody={requestBody}
+        onChange={onChange}
+        mediaType={contentType}
+        getComponent={getComponent}
+        isExecute={isExecute}
+        specSelectors={specSelectors}
+        />}
       />
   </div>
 }
@@ -38,7 +47,9 @@ RequestBody.propTypes = {
   requestBody: ImPropTypes.orderedMap.isRequired,
   getComponent: PropTypes.func.isRequired,
   specSelectors: PropTypes.object.isRequired,
-  contentType: PropTypes.string.isRequired
+  contentType: PropTypes.string.isRequired,
+  isExecute: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired
 }
 
 export default RequestBody