diff --git a/package.json b/package.json index 02383b29..a42621c9 100644 --- a/package.json +++ b/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", diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx index 268ef46c..6cd909bb 100644 --- a/src/core/components/layouts/base.jsx +++ b/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,6 +37,7 @@ 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) @@ -35,6 +45,7 @@ export default class BaseLayout extends React.Component { 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 { ) : null } + { servers && servers.size ? ( +
+ + + +
+ + ) : null} + { filter === null || filter === false ? null :
diff --git a/src/core/plugins/oas3/actions.js b/src/core/plugins/oas3/actions.js new file mode 100644 index 00000000..4a5bf9ac --- /dev/null +++ b/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 } + } +} diff --git a/src/core/plugins/oas3/components/index.js b/src/core/plugins/oas3/components/index.js index 8186ce8e..642c6689 100644 --- a/src/core/plugins/oas3/components/index.js +++ b/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 } diff --git a/src/core/plugins/oas3/components/request-body-editor.jsx b/src/core/plugins/oas3/components/request-body-editor.jsx new file mode 100644 index 00000000..62f91a52 --- /dev/null +++ b/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 ( +
+ { + isEditBox && isExecute + ?