From 54b383a7d2c6587663626fd5f29af7f02f98810d Mon Sep 17 00:00:00 2001 From: Matthew Seal Date: Tue, 15 Aug 2017 18:02:17 -0700 Subject: [PATCH 01/26] Updated docs for correct usage of SWAGGER_JSON --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c543541a..10d87701 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Will start nginx with swagger-ui on port 80. Or you can provide your own swagger.json on your host ``` -docker run -p 80:8080 -e "SWAGGER_JSON=/foo/swagger.json" -v /bar:/foo swaggerapi/swagger-ui +docker run -p 80:8080 -e SWAGGER_JSON=/foo/swagger.json -v /bar:/foo swaggerapi/swagger-ui ``` ##### Prerequisites From 7a2c7d2cdc7c58591a0ad11dd31c2e404c9bee44 Mon Sep 17 00:00:00 2001 From: Kyle Shockey Date: Tue, 5 Sep 2017 13:59:31 -0700 Subject: [PATCH 02/26] Squash commit: OAS3 Try-It-Out changes --- src/core/components/layouts/base.jsx | 29 +++- src/core/plugins/oas3/actions.js | 35 ++++ src/core/plugins/oas3/components/index.js | 4 + .../oas3/components/request-body-editor.jsx | 114 +++++++++++++ .../plugins/oas3/components/request-body.jsx | 25 ++- src/core/plugins/oas3/components/servers.jsx | 155 ++++++++++++++++++ src/core/plugins/oas3/index.js | 14 +- src/core/plugins/oas3/reducers.js | 23 +++ src/core/plugins/oas3/selectors.js | 54 ++++++ .../plugins/oas3/spec-extensions/selectors.js | 50 ++++++ .../{ => spec-extensions}/wrap-selectors.js | 7 +- .../plugins/oas3/wrap-components/index.js | 2 - .../oas3/wrap-components/parameters.jsx | 17 +- .../wrap-components/try-it-out-button.jsx | 5 - src/core/plugins/spec/actions.js | 85 ++++++---- src/style/_layout.scss | 71 ++++++++ 16 files changed, 631 insertions(+), 59 deletions(-) create mode 100644 src/core/plugins/oas3/actions.js create mode 100644 src/core/plugins/oas3/components/request-body-editor.jsx create mode 100644 src/core/plugins/oas3/components/servers.jsx create mode 100644 src/core/plugins/oas3/reducers.js create mode 100644 src/core/plugins/oas3/selectors.js create mode 100644 src/core/plugins/oas3/spec-extensions/selectors.js rename src/core/plugins/oas3/{ => spec-extensions}/wrap-selectors.js (92%) delete mode 100644 src/core/plugins/oas3/wrap-components/try-it-out-button.jsx 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..f277d7b4 --- /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, 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 ( +
+ { + isEditBox && isExecute + ?