diff --git a/demo/openapi.yaml b/demo/openapi.yaml index 07ab5349..16440bd2 100644 --- a/demo/openapi.yaml +++ b/demo/openapi.yaml @@ -38,7 +38,7 @@ info: OAuth2 - an open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications. - + version: 1.0.0 title: Swagger Petstore @@ -78,11 +78,11 @@ tags: - name: pet_model x-displayName: The Pet Model description: | - + - name: store_model x-displayName: The Order Model description: | - + x-tagGroups: - name: General tags: diff --git a/src/components/ObjectDescription/ObjectDescription.tsx b/src/components/ObjectDescription/ObjectDescription.tsx index 0c66a080..130bf94e 100644 --- a/src/components/ObjectDescription/ObjectDescription.tsx +++ b/src/components/ObjectDescription/ObjectDescription.tsx @@ -1,14 +1,15 @@ import * as React from 'react'; -import { Schema } from '../Schema'; import { DarkRightPanel, MiddlePanel, Row, Section } from '../../common-elements'; import { MediaTypeModel, OpenAPIParser, RedocNormalizedOptions } from '../../services'; +import styled from '../../styled-components'; import { OpenAPIMediaType } from '../../types'; import { MediaTypeSamples } from '../PayloadSamples/MediaTypeSamples'; +import { Schema } from '../Schema'; export interface ObjectDescriptionProps { schemaRef: string; - examplesRef?: string; + exampleRef?: string; showReadOnly?: boolean; showWriteOnly?: boolean; parser: OpenAPIParser; @@ -16,7 +17,7 @@ export interface ObjectDescriptionProps { } export class ObjectDescription extends React.PureComponent { - private static getMediaType(schemaRef, examplesRef): OpenAPIMediaType { + private static getMediaType(schemaRef: string, exampleRef?: string): OpenAPIMediaType { if (!schemaRef) { return {}; } @@ -25,33 +26,28 @@ export class ObjectDescription extends React.PureComponent - + + + ); } } + +const MediaSamplesWrap = styled.div` + background: ${({ theme }) => theme.codeSample.backgroundColor}; + & > div, + & > pre { + padding: ${props => props.theme.spacing.unit * 4}px; + margin: 0; + } + + & > div > pre { + padding: 0; + } +`; diff --git a/src/services/AppStore.ts b/src/services/AppStore.ts index d4044af5..1f3e0a50 100644 --- a/src/services/AppStore.ts +++ b/src/services/AppStore.ts @@ -13,8 +13,9 @@ import { SearchStore } from './SearchStore'; import { ObjectDescription } from '../components/ObjectDescription/ObjectDescription'; import { SecurityDefs } from '../components/SecuritySchemes/SecuritySchemes'; import { - OBJECT_DEFINTION_COMPONENT_NAME, + OBJECT_DEFINTION_JSX_NAME, SECURITY_DEFINITIONS_COMPONENT_NAME, + SECURITY_DEFINITIONS_JSX_NAME, } from '../utils/openapi'; export interface StoreState { @@ -155,10 +156,15 @@ const DEFAULT_OPTIONS: RedocRawOptions = { securitySchemes: store.spec.securitySchemes, }), }, - [OBJECT_DEFINTION_COMPONENT_NAME]: { - component: ObjectDescription, + [SECURITY_DEFINITIONS_JSX_NAME]: { + component: SecurityDefs, propsSelector: (store: AppStore) => ({ securitySchemes: store.spec.securitySchemes, + }), + }, + [OBJECT_DEFINTION_JSX_NAME]: { + component: ObjectDescription, + propsSelector: (store: AppStore) => ({ parser: store.spec.parser, options: store.options, }), diff --git a/src/services/MenuBuilder.ts b/src/services/MenuBuilder.ts index e1c74da4..1987ba10 100644 --- a/src/services/MenuBuilder.ts +++ b/src/services/MenuBuilder.ts @@ -59,16 +59,16 @@ export class MenuBuilder { */ static addMarkdownItems( description: string, - grandparent: GroupModel | undefined, + parent: GroupModel | undefined, initialDepth: number, options: RedocNormalizedOptions, ): ContentItemModel[] { const renderer = new MarkdownRenderer(options); const headings = renderer.extractHeadings(description || ''); - const mapHeadingsDeep = (parent, items, depth = 1) => + const mapHeadingsDeep = (_parent, items, depth = 1) => items.map(heading => { - const group = new GroupModel('section', heading, parent); + const group = new GroupModel('section', heading, _parent); group.depth = depth; if (heading.items) { group.items = mapHeadingsDeep(group, heading.items, depth + 1); @@ -84,7 +84,7 @@ export class MenuBuilder { return group; }); - return mapHeadingsDeep(grandparent, headings, initialDepth); + return mapHeadingsDeep(parent, headings, initialDepth); } /** diff --git a/src/utils/openapi.ts b/src/utils/openapi.ts index 4d09252f..6b667ee9 100644 --- a/src/utils/openapi.ts +++ b/src/utils/openapi.ts @@ -495,8 +495,10 @@ export function normalizeServers( }); } -export const OBJECT_DEFINTION_COMPONENT_NAME = 'object-description'; export const SECURITY_DEFINITIONS_COMPONENT_NAME = 'security-definitions'; +export const SECURITY_DEFINITIONS_JSX_NAME = 'SecurityDefinitions'; +export const OBJECT_DEFINTION_JSX_NAME = 'ObjectDescription'; + export let SECURITY_SCHEMES_SECTION_PREFIX = 'section/Authentication/'; export function setSecuritySchemePrefix(prefix: string) { SECURITY_SCHEMES_SECTION_PREFIX = prefix;