Merge pull request #175 from quangkhoa/issue-157-support-servers-functionality

Handle servers functionality. Closes #157

Author: brendo

docs/open-api-v3-support.md

@@ -26,7 +26,7 @@ This document outlines this project's support for visualising the [Open API V3][
 
 - [ ] openapi
 - [x] [info](#info-object)
-- [ ] [servers](#servers-object)
+- [x] [servers](#servers-object)
 - [x] [paths](#paths-object)
 - [ ] [components](#components-object)
 - [x] [security](#security-requirement-object)
@@ -55,8 +55,8 @@ This document outlines this project's support for visualising the [Open API V3][
 
 ### [Server](https://github.com/OAI/OpenAPI-Specification/blob/OpenAPI.next/versions/3.0.md#server-object) object
 
-- [ ] url
-- [ ] description
+- [x] url
+- [x] description
 - [ ] [variables](#server-variable-object)
 
 ### [Server Variable](https://github.com/OAI/OpenAPI-Specification/blob/OpenAPI.next/versions/3.0.md#server-variable-object) object
@@ -251,7 +251,7 @@ The OpenAPI specification also supports several additional properties from JSON
 - [ ] not
 - [x] items
 - [x] properties
-- [ ] additionalProperties
+- [x] additionalProperties
 - [x] description
 - [x] format
 - [x] default

src/components/Endpoints/Endpoint.js

@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { styles } from './Endpoint.style'
+
+@styles
+export default class Endpoint extends PureComponent {
+  constructor (props) {
+    super(props)
+
+    this.handleFocus = this.handleFocus.bind(this)
+  }
+
+  render () {
+    const {url, description, classes} = this.props
+
+    return (
+      <div className={classes.endpoint}>
+        {description && <div><label>{description}</label></div>}
+        <input className={classes.readonly} defaultValue={url} readOnly onFocus={this.handleFocus} />
+      </div>
+    )
+  }
+
+  handleFocus (event) {
+    event.target.select()
+  }
+}
+
+Endpoint.propTypes = {
+  url: PropTypes.string,
+  description: PropTypes.string,
+  classes: PropTypes.object
+}

src/components/Endpoints/Endpoint.style.js

@@ -0,0 +1,13 @@
+import { createSheet } from '../../theme'
+
+export const styles = createSheet(({borders, text, sizes}) => ({
+  endpoint: {
+    lineHeight: '200%'
+  },
+  readonly: {
+    width: '100%',
+    '&:focus': {
+      outline: 'none'
+    }
+  }
+}))

src/components/Endpoints/Endpoints.js

@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Endpoint from './Endpoint'
+import { styles } from './Endpoints.style'
+
+@styles
+export default class Endpoints extends PureComponent {
+  render () {
+    const {endpoints, classes} = this.props
+
+    if (!endpoints || endpoints.length === 0) {
+      return null
+    }
+
+    return (
+      <div className={classes.endpoints}>
+        {endpoints.map(endpoint => <Endpoint key={endpoint.url} url={endpoint.url} description={endpoint.description} />)}
+      </div>
+    )
+  }
+}
+
+Endpoints.propTypes = {
+  endpoints: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    description: PropTypes.string
+  })),
+  classes: PropTypes.object
+}

src/components/Endpoints/Endpoints.style.js

@@ -0,0 +1,10 @@
+import { createSheet } from '../../theme'
+import c from 'color'
+
+export const styles = createSheet(({borders, backgrounds, text, sizes}) => ({
+  endpoints: {
+    minWidth: '300px',
+    backgroundColor: `${c(backgrounds.schema).darken(0.1)}`,
+    padding: '15px'
+  }
+}))

src/components/Method/Method.js

@@ -1,26 +1,26 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 import ScrollableAnchor from 'react-scrollable-anchor'
 import BodyContent from '../BodyContent/BodyContent'
 import Description from '../Description/Description'
 import Parameters from '../Parameters/Parameters'
 import Response from '../Response/Response'
+import MethodEndpoints from './MethodEndpoints'
 import { styles } from './Method.styles'
 
 @styles
 export default class Method extends PureComponent {
   render () {
-    const { method, classes, initialSchemaTreeDepth } = this.props
-    const { title, type, description, parameters, request, responses } = method
+    const {method, classes, initialSchemaTreeDepth} = this.props
+    const {title, type, path, endpoints, description, parameters, request, responses} = method
 
     return (
       <ScrollableAnchor id={method.link}>
         <div className={classes.method}>
           <h3>
             {title}
-            <span className={classNames(classes.type, `${method.type}`)}>{type}</span>
           </h3>
+          <MethodEndpoints type={type} path={path} endpoints={endpoints} />
           <div>
             {description && <Description description={description} />}
             {parameters && <Parameters parameters={parameters} initialSchemaTreeDepth={initialSchemaTreeDepth} />}
@@ -33,7 +33,7 @@ export default class Method extends PureComponent {
   }
 
   renderRequest (request, initialSchemaTreeDepth) {
-    const { schema, examples } = request
+    const {schema, examples} = request
 
     if (!schema) {
       return null
@@ -65,7 +65,9 @@ Method.propTypes = {
     description: PropTypes.string,
     parameters: PropTypes.object,
     request: PropTypes.object,
-    responses: PropTypes.array
+    responses: PropTypes.array,
+    path: PropTypes.string,
+    endpoints: PropTypes.array
   }),
   classes: PropTypes.object,
   initialSchemaTreeDepth: PropTypes.number

src/components/Method/Method.styles.js

@@ -8,25 +8,8 @@ export const styles = createSheet(({ borders, text, sizes }) => ({
     padding: '1rem 2rem',
 
     '& > h3': {
-      marginBottom: '15px',
-      '& > span': {
-        fontFamily: 'monospace',
-        textTransform: 'uppercase',
-        marginLeft: '10px',
-
-        '&.get': {
-          color: `${text.get}`
-        },
-        '&.post': {
-          color: `${text.post}`
-        },
-        '&.put': {
-          color: `${text.put}`
-        },
-        '&.delete': {
-          color: `${text.delete}`
-        }
-      }
+      display: 'inline-block',
+      marginBottom: '15px'
     },
 
     '& h4': {

src/components/Method/MethodEndpoints.js

@@ -0,0 +1,61 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import Endpoints from '../Endpoints/Endpoints'
+import Indicator from '../Indicator/Indicator'
+import { styles } from './MethodEndpoints.styles'
+
+@styles
+export default class MethodEndpoints extends PureComponent {
+  constructor (props) {
+    super(props)
+
+    this.onClickPath = this.onClickPath.bind(this)
+
+    this.state = {
+      isServersExpanded: false
+    }
+  }
+
+  render () {
+    const {type, path, endpoints, classes} = this.props
+
+    let indicatorDirection = 'downn'
+    if (this.state.isServersExpanded) {
+      indicatorDirection = 'up'
+    }
+
+    return (
+      <div className={classNames(classes.methodPath)}>
+        <div onClick={this.onClickPath}>
+          <span className={classNames(type, 'methodType')}>{type}</span>
+          <span className='path'>{path}</span>
+          <Indicator direction={indicatorDirection} />
+        </div>
+        {endpoints &&
+          <div className={classNames(classes.methodServers, {
+            [classes.expanded]: this.state.isServersExpanded
+          })}>
+            <Endpoints endpoints={endpoints} />
+          </div>
+        }
+      </div>
+    )
+  }
+
+  onClickPath () {
+    this.setState({
+      isServersExpanded: !this.state.isServersExpanded
+    })
+  }
+}
+
+MethodEndpoints.propTypes = {
+  type: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+  endpoints: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string.isRequired,
+    description: PropTypes.string
+  })),
+  classes: PropTypes.object
+}

src/components/Method/MethodEndpoints.styles.js

@@ -0,0 +1,39 @@
+import { createSheet } from '../../theme'
+
+export const styles = createSheet(({borders, text, sizes}) => ({
+  methodPath: {
+    display: 'inline-block',
+    fontFamily: 'monospace',
+    marginLeft: '30px',
+    position: 'relative',
+
+    '& .methodType': {
+      textTransform: 'uppercase',
+      marginRight: '10px',
+      '&.get': {
+        color: `${text.get}`
+      },
+      '&.post': {
+        color: `${text.post}`
+      },
+      '&.put': {
+        color: `${text.put}`
+      },
+      '&.delete': {
+        color: `${text.delete}`
+      },
+      '&.path': {
+        textTransform: 'none'
+      }
+    }
+  },
+  methodServers: {
+    display: 'none'
+  },
+  expanded: {
+    // outline: '1px solid red',
+    display: 'block',
+    position: 'absolute',
+    backgroundColor: 'white'
+  }
+}))

src/parser/open-api/v3/navigationParser.js

@@ -34,16 +34,18 @@ export function getNavigationMethod (path, method, tag) {
  * a response for the given `method`.
  *
  * @param {string} path
+ * @param {Array} servers
  * @param {object} method
  * @param {object} request
  * @param {object} params
  * @param {object} responses
  */
-export function getServicesMethod ({ path, method, request, params, responses }) {
+export function getServicesMethod ({path, servers, method, request, params, responses}) {
   const servicesMethod = {
     type: method.type,
     title: method.summary,
     link: getPermalink(path, method.type),
+    path,
     request,
     responses
   }
@@ -56,5 +58,19 @@ export function getServicesMethod ({ path, method, request, params, responses })
     servicesMethod.parameters = params
   }
 
+  if (servers && servers.length > 0) {
+    servicesMethod.endpoints = servers.map(server => {
+      const endpoint = {
+        url: server.url + path
+      }
+
+      if (server.description) {
+        endpoint.description = server.description
+      }
+
+      return endpoint
+    })
+  }
+
   return servicesMethod
 }