From 63847ff3b6e2fa14ec4376c35fe075433e723dd5 Mon Sep 17 00:00:00 2001 From: Harjeet Singh Date: Thu, 19 Apr 2018 16:34:32 -0700 Subject: [PATCH] added editor with sample --- demo/playground/hmr-playground.tsx | 4 +- package.json | 4 +- src/components/Console/ConsoleEditor.tsx | 70 ++++++++++++++++++++++++ src/components/Console/ConsoleViewer.tsx | 36 ++++++++++++ src/components/Operation/Operation.tsx | 5 +- src/utils/loadAndBundleSpec.ts | 17 ++++-- tsconfig.json | 2 +- yarn.lock | 28 +++++++++- 8 files changed, 157 insertions(+), 9 deletions(-) create mode 100644 src/components/Console/ConsoleEditor.tsx create mode 100644 src/components/Console/ConsoleViewer.tsx diff --git a/demo/playground/hmr-playground.tsx b/demo/playground/hmr-playground.tsx index 66d9389b..664e60b2 100644 --- a/demo/playground/hmr-playground.tsx +++ b/demo/playground/hmr-playground.tsx @@ -19,7 +19,9 @@ const renderRoot = (props: RedocProps) => const big = window.location.search.indexOf('big') > -1; const swagger = window.location.search.indexOf('swagger') > -1; // compatibility mode ? -const specUrl = swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml'; +let specUrl = swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml'; +specUrl = 'intent.json'; +//specUrl = 'swagger.yaml'; let store; const options: RedocRawOptions = { nativeScrollbars: false }; diff --git a/package.json b/package.json index 11c3ff97..9ce0bd36 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "babel-loader": "8.0.0-beta.2", "babel-plugin-styled-components": "^1.5.1", "beautify-benchmark": "^0.2.4", + "brace": "^0.11.1", "bundlesize": "^0.17.0", "conventional-changelog-cli": "^1.3.17", "copy-webpack-plugin": "^4.5.1", @@ -88,12 +89,13 @@ "fork-ts-checker-webpack-plugin": "^0.4.1", "html-webpack-plugin": "^3.1.0", "jest": "^22.4.3", - "lodash": "^4.17.4", + "lodash": "^4.17.5", "prettier": "^1.5.3", "prettier-eslint": "^8.8.1", "puppeteer": "^1.2.0", "raf": "^3.4.0", "react": "^16.3.0-alpha.2", + "react-ace": "^6.0.0", "react-dom": "^16.3.0-alpha.2", "rimraf": "^2.6.2", "shelljs": "^0.8.1", diff --git a/src/components/Console/ConsoleEditor.tsx b/src/components/Console/ConsoleEditor.tsx new file mode 100644 index 00000000..598af352 --- /dev/null +++ b/src/components/Console/ConsoleEditor.tsx @@ -0,0 +1,70 @@ +import { observer } from 'mobx-react'; +import * as React from 'react'; + +import AceEditor from 'react-ace'; + +import 'brace/mode/json'; +import 'brace/mode/curly'; +import 'brace/theme/github'; +import 'brace/theme/monokai'; + + +import { MediaTypeModel } from '../../services/models'; +import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch'; + +import { MediaTypeSamples } from '../PayloadSamples/MediaTypeSamples'; + +import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel'; +import { InvertedSimpleDropdown, MimeLabel } from '../PayloadSamples/styled.elements'; + +export interface ConsoleEditorProps { + mediaTypes: MediaTypeModel[] +} + +@observer +export class ConsoleEditor extends React.Component { + render() { + const { mediaTypes } = this.props; + + if (!mediaTypes.length) { + return null; + } + let sample = {}; + for (let mediaType of mediaTypes) { + if (mediaType.name.indexOf('json') > -1) { + if (mediaType.examples) { + sample = mediaType.examples && mediaType.examples.default; + } + break; + } + } + + + /* + let body = {}; + if(mimeContent.mediaTypes && mimeContent.mediaTypes.length>0){ + body = mimeContent.mediaTypes[0]; + if(body.examples && body.examples.default) { + + } + } + */ + return ( +
+

ConsoleEditor

+ +
+ ); + } + +} diff --git a/src/components/Console/ConsoleViewer.tsx b/src/components/Console/ConsoleViewer.tsx new file mode 100644 index 00000000..e50a2bf3 --- /dev/null +++ b/src/components/Console/ConsoleViewer.tsx @@ -0,0 +1,36 @@ +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { OperationModel } from '../../services/models'; +import { PayloadSamples } from '../PayloadSamples/PayloadSamples'; +import { SourceCodeWithCopy } from '../SourceCode/SourceCode'; +import { ConsoleEditor } from './ConsoleEditor'; + +export interface ConsoleViewerProps { + operation: OperationModel; +} + +@observer +export class ConsoleViewer extends React.Component { + operation: OperationModel; + visited = new Set(); + + render() { + const { operation } = this.props; + const requestBodyContent = operation.requestBody && operation.requestBody.content && operation.requestBody.content; + const hasBodySample = requestBodyContent && requestBodyContent.hasSample; + const samples = operation.codeSamples; + const mediaTypes = (requestBodyContent && requestBodyContent.mediaTypes) ? requestBodyContent.mediaTypes : []; + + return ( +
+

Console

+ {hasBodySample && ( + + )} + {samples.map(sample => ( + + ))} +
+ ); + } +} diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index 5e3d8fe4..480f0790 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -15,6 +15,7 @@ import { Parameters } from '../Parameters/Parameters'; import { RequestSamples } from '../RequestSamples/RequestSamples'; import { ResponsesList } from '../Responses/ResponsesList'; import { ResponseSamples } from '../ResponseSamples/ResponseSamples'; +import { ConsoleViewer } from '../Console/ConsoleViewer'; import { OperationModel as OperationType } from '../../services/models'; @@ -96,7 +97,9 @@ export class Operation extends React.Component { {!options.pathInMiddlePanel && } {executeMode && -
Execute Mode
+
+ +
} {!executeMode && diff --git a/src/utils/loadAndBundleSpec.ts b/src/utils/loadAndBundleSpec.ts index 66b7fdde..a88f4470 100644 --- a/src/utils/loadAndBundleSpec.ts +++ b/src/utils/loadAndBundleSpec.ts @@ -1,18 +1,27 @@ import * as JsonSchemaRefParser from 'json-schema-ref-parser'; import { convertObj } from 'swagger2openapi'; import { OpenAPISpec } from '../types'; +import { cloneDeep } from 'lodash'; export async function loadAndBundleSpec(specUrlOrObject: object | string): Promise { const parser = new JsonSchemaRefParser(); - const spec = await parser.bundle(specUrlOrObject, { + let spec = await parser.bundle(specUrlOrObject, { resolve: { http: { withCredentials: false } }, } as object); + let v2Specs = spec; if (spec.swagger !== undefined) { - return convertSwagger2OpenAPI(spec); - } else { - return spec; + v2Specs = await convertSwagger2OpenAPI(spec); } + + // we can derefrence the schema here for future use. + // const derefrencedSpec = await parser.dereference(cloneDeep(spec)); + const derefed = await parser.dereference(v2Specs, { + resolve: { http: { withCredentials: false } }, + } as object); + + return derefed; + } export function convertSwagger2OpenAPI(spec: any): Promise { diff --git a/tsconfig.json b/tsconfig.json index 04950bbc..d58c8994 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -39,4 +39,4 @@ "./src/standalone.tsx", "demo/*.tsx" ] -} +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 3a37ff43..d9c0cffc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1589,6 +1589,10 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" +brace@^0.11.0, brace@^0.11.1: + version "0.11.1" + resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58" + braces@^1.8.2: version "1.8.5" resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7" @@ -2970,6 +2974,10 @@ detect-node@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127" +diff-match-patch@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.0.tgz#1cc3c83a490d67f95d91e39f6ad1f2e086b63048" + diff@^3.1.0, diff@^3.2.0, diff@^3.3.1, diff@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" @@ -5947,6 +5955,14 @@ lodash.flattendeep@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2" +lodash.get@^4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" + +lodash.isequal@^4.1.1: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" + lodash.isfunction@^3.0.8: version "3.0.9" resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051" @@ -7553,7 +7569,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.6.0: +prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0: version "15.6.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" dependencies: @@ -7747,6 +7763,16 @@ rc@^1.1.6, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-ace@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-6.0.0.tgz#c211c21825f27343a7392f102493dc3ae099886d" + dependencies: + brace "^0.11.0" + diff-match-patch "^1.0.0" + lodash.get "^4.4.2" + lodash.isequal "^4.1.1" + prop-types "^15.5.8" + react-dom@^16.3.0-alpha.2: version "16.3.0-alpha.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.0-alpha.2.tgz#a970b6185684941e89a568c09321d22643457cb6"