Squash commit: OAS3 Try-It-Out changes

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, List } 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

@@ -5,10 +5,17 @@ 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()
@@ -16,10 +23,6 @@ const RequestBody = ({ requestBody, getComponent, specSelectors, contentType })
 
   const mediaTypeValue = requestBodyContent.get(contentType)
 
-  const sampleSchema = getSampleSchema(mediaTypeValue.get("schema").toJS(), contentType, {
-    includeWriteOnly: true
-  })
-
   return <div>
     { requestBodyDescription &&
       <Markdown source={requestBodyDescription} />
@@ -28,8 +31,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>
 }

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

@@ -0,0 +1,155 @@
+import React from "react"
+import { OrderedMap } from "immutable"
+import PropTypes from "prop-types"
+import ImPropTypes from "react-immutable-proptypes"
+
+export default class Servers extends React.Component {
+
+  static 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
+  }
+
+  componentDidMount() {
+    let { servers } = this.props
+
+    //fire 'change' event to set default 'value' of select
+    this.setServer(servers.first().get("url"))
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let {
+      servers,
+      setServerVariableValue,
+      getServerVariable
+    } = this.props
+
+    if(this.props.currentServer !== nextProps.currentServer) {
+      // Server has changed, we may need to set default values
+      let currentServerDefinition = servers
+        .find(v => v.get("url") === nextProps.currentServer) || OrderedMap()
+
+      let currentServerVariableDefs = currentServerDefinition.get("variables") || OrderedMap()
+
+      currentServerVariableDefs.map((val, key) => {
+        let currentValue = getServerVariable(nextProps.currentServer, key)
+        // only set the default value if the user hasn't set one yet
+        if(!currentValue) {
+          setServerVariableValue({
+            server: nextProps.currentServer,
+            key,
+            val: val.get("default") || ""
+          })
+        }
+      })
+    }
+  }
+
+  onServerChange =( e ) => {
+    this.setServer( e.target.value )
+
+    // set default variable values
+  }
+
+  onServerVariableValueChange = ( e ) => {
+    let {
+      setServerVariableValue,
+      currentServer
+    } = this.props
+
+    let variableName = e.target.getAttribute("data-variable")
+    let newVariableValue = e.target.value
+
+    if(typeof setServerVariableValue === "function") {
+      setServerVariableValue({
+        server: currentServer,
+        key: variableName,
+        val: newVariableValue
+      })
+    }
+  }
+
+  setServer = ( value ) => {
+    let { setSelectedServer } = this.props
+
+    setSelectedServer(value)
+  }
+
+  render() {
+    let { servers,
+      currentServer,
+      getServerVariable,
+      getEffectiveServerValue
+    } = this.props
+
+    let currentServerDefinition = servers.find(v => v.get("url") === currentServer) || OrderedMap()
+
+    let currentServerVariableDefs = currentServerDefinition.get("variables") || OrderedMap()
+
+    let shouldShowVariableUI = currentServerVariableDefs.size !== 0
+
+    return (
+      <div>
+        <label htmlFor="servers">
+          <span className="servers-title">Servers</span>
+          <select onChange={ this.onServerChange }>
+            { servers.valueSeq().map(
+              ( server ) =>
+              <option
+                value={ server.get("url") }
+                key={ server.get("url") }>
+                { server.get("url") }
+              </option>
+            ).toArray()}
+          </select>
+        </label>
+        { shouldShowVariableUI ?
+          <div>
+          <h4>Server variables</h4>
+            <div className={"computed-url"}>
+              Computed URL:
+              <code>
+                {getEffectiveServerValue(currentServer)}
+              </code>
+            </div>
+            <table>
+              <tbody>
+                {
+                  currentServerVariableDefs.map((val, name) => {
+                    return <tr key={name}>
+                      <td>{name}</td>
+                      <td>
+                        { val.get("enum") ?
+                          <select data-variable={name} onChange={this.onServerVariableValueChange}>
+                            {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={this.onServerVariableValueChange}
+                            data-variable={name}
+                            ></input>
+                        }
+                      </td>
+                    </tr>
+                  })
+                }
+              </tbody>
+            </table>
+          </div>: null
+        }
+      </div>
+    )
+  }
+}