Merge pull request temando#76 from brendo/issue-13-render-constraints

Support constraints!

Author: quangkhoa

docs/schema.md

@@ -0,0 +1,54 @@
+# Schema support
+
+The `Schema` object in [Open API v3 spec][oaschema] describes several properties
+that are shared from JSON Schema, deviations from JSON Schema, or in addition
+to JSON Schema. The document descibes this project's support for these
+properties.
+
+## Properties
+
+The following properties are supported, and implemented according to the
+[JSON Schema Validation spec][jsschema]:
+
+- [x] multipleOf
+- [x] maximum
+- [x] exclusiveMaximum
+- [x] minimum
+- [x] exclusiveMinimum
+- [x] maxLength
+- [x] minLength
+- [x] pattern
+- [x] maxItems
+- [x] minItems
+- [x] uniqueItems
+- [x] maxProperties
+- [x] minProperties
+- [x] format
+- [x] required
+- [x] enum
+
+## Adjusted JSON Schema Properties
+
+The OpenAPI specification also supports several additional properties from JSON
+Schema, with some adjustments. This project attempts to honor these adjustments,
+with any exceptions outlined below:
+
+- [x] type - Value may be an array, multiple types are supported.
+- [x] allOf
+- [ ] oneOf
+- [ ] anyOf
+- [ ] not
+- [x] items
+- [x] properties
+- [ ] additionalProperties
+- [x] description
+- [x] format
+- [x] default
+
+## Fixed Fields
+
+At this time, the project supports no [fixed fields][ff].
+
+[ff]: https://github.com/OAI/OpenAPI-Specification/blob/OpenAPI.next/versions/3.0.md#fixed-fields-20
+[jsschema]: http://json-schema.org/latest/json-schema-validation.html#rfc.section.6
+[oaschema]: https://github.com/OAI/OpenAPI-Specification/blob/OpenAPI.next/versions/3.0.md#schemaObject

src/components/BodySchema/BodySchema.js

@@ -38,19 +38,20 @@ export default class BodySchema extends Component {
             if (properties.length === iterator) {
               isLast = true;
             }
-            if (property.type === 'array' && expandedProp.indexOf(property.name) !== -1 && property.properties !== undefined) {
+
+            if (property.type.includes('array') && expandedProp.includes(property.name) && property.properties !== undefined) {
               return createFragment({
                 property: this.renderPropertyRow(property, isLast, true),
                 subset: this.renderSubsetProperties(property, true)
               });
-            } else if (property.type === 'array' && property.properties !== undefined) {
+            } else if (property.type.includes('array') && property.properties !== undefined) {
               return this.renderPropertyRow(property, isLast, false);
-            } else if (property.type === 'object' && expandedProp.indexOf(property.name) !== -1 && property.properties !== undefined) {
+            } else if (property.type.includes('object') && expandedProp.includes(property.name) && property.properties !== undefined) {
               return createFragment({
                 property: this.renderPropertyRow(property, isLast, true),
                 subset: this.renderSubsetProperties(property)
               });
-            } else if (property.type === 'object' && property.properties !== undefined) {
+            } else if (property.type.includes('object') && property.properties !== undefined) {
               return this.renderPropertyRow(property, isLast, false);
             } else {
               return this.renderPropertyRow(property, isLast);
@@ -71,6 +72,7 @@ export default class BodySchema extends Component {
         description={property.description}
         enumValues={property.enum}
         defaultValue={property.defaultValue}
+        constraints={property.constraints}
         onClick={this.onClick.bind(this, property.name)}
         isRequired={property.required}
         isOpen={isOpen}
@@ -110,7 +112,7 @@ export default class BodySchema extends Component {
 
   onClick(propertyName) {
     const { expandedProp } = this.state;
-    if (expandedProp.indexOf(propertyName) !== -1) {
+    if (expandedProp.includes(propertyName)) {
       const newExpanded = expandedProp.filter((prop) => prop !== propertyName);
       this.setState({ expandedProp: newExpanded });
     } else {

src/components/Method/Method.js

@@ -75,14 +75,7 @@ export default class Method extends Component {
     return (
       <div className="method-responses">
         <h4>Responses</h4>
-        {responses.map((response) => {
-          return (
-            <Response
-              key={response.code}
-              response={response}
-            />
-          );
-        })}
+        {responses.map((r) => <Response key={r.code} response={r} />)}
       </div>
     );
   }

src/components/Property/Property.js

@@ -4,12 +4,15 @@ import PropTypes from 'prop-types';
 
 import Description from '../Description/Description';
 import Indicator from '../Indicator/Indicator';
+import PropertyConstraints from '../PropertyConstraints/PropertyConstraints';
 
 import './Property.scss';
 
 export default class Property extends Component {
   render() {
-    const { name, type, description, isRequired, enumValues, defaultValue, onClick, isOpen, isLast } = this.props;
+    const {
+      name, type, description, constraints, isRequired, enumValues, defaultValue, onClick, isOpen, isLast
+    } = this.props;
 
     let subtype;
     if (type.includes('array')) {
@@ -20,6 +23,7 @@ export default class Property extends Component {
     if (isOpen !== undefined) {
       isClickable = true;
     }
+
     let status;
     if (isOpen) {
       status = 'open';
@@ -36,15 +40,17 @@ export default class Property extends Component {
           'property--isclickable': isClickable
         })}>
           <span>{name}</span>
-          {isClickable &&
-          <Indicator className="property-indicator" status={status}/>
-          }
+          {isClickable && <Indicator className="property-indicator" status={status}/>}
         </td>
         <td className="property-info">
-          <span>{type.join(', ')}</span>{subtype && <span> of {subtype}</span>}
-          {isRequired && <span className="property-required">Required</span>}
+          <span className="property-type">
+            {!subtype ? type.join(', ') : <span className="property-subtype">{subtype}[]</span>}
+            {!subtype && constraints && constraints.format &&
+              <span className="property-format">&lt;{constraints.format}&gt;</span>}
+          </span>
+          <PropertyConstraints constraints={constraints} type={type} isRequired={isRequired} />
           {enumValues && this.renderEnumValues(enumValues)}
-          {defaultValue && this.renderDefaultValue(defaultValue)}
+          {defaultValue !== undefined && this.renderDefaultValue(defaultValue)}
           {description && <Description description={description}/>}
         </td>
       </tr>
@@ -81,9 +87,8 @@ export default class Property extends Component {
     }
 
     return (
-      <div>
-        <span>Default: </span>
-        <span className="default">{displayValue}</span>
+      <div className="default">
+        Default: <span>{displayValue}</span>
       </div>
     );
   }
@@ -93,7 +98,24 @@ Property.propTypes = {
   name: PropTypes.string.isRequired,
   type: PropTypes.arrayOf(PropTypes.string).isRequired,
   subtype: PropTypes.string,
+  title: PropTypes.string,
   description: PropTypes.string,
+  constraints: PropTypes.shape({
+    format: PropTypes.string,
+    exclusiveMinimum: PropTypes.number,
+    exclusiveMaximum: PropTypes.number,
+    maximum: PropTypes.number,
+    maxItems: PropTypes.number,
+    maxLength: PropTypes.number,
+    maxProperties: PropTypes.number,
+    minimum: PropTypes.number,
+    minItems: PropTypes.number,
+    minLength: PropTypes.number,
+    minProperties: PropTypes.number,
+    multipleOf: PropTypes.number,
+    pattern: PropTypes.string,
+    uniqueItems: PropTypes.bool
+  }),
   enumValues: PropTypes.array,
   defaultValue: PropTypes.any,
   isRequired: PropTypes.bool,

src/components/PropertyConstraints/PropertyConstraints.js

@@ -0,0 +1,81 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { getConstraintHints as getArrayHints } from './../../parser/open-api/constraints/array';
+import { getConstraintHints as getNumericHints } from './../../parser/open-api/constraints/numeric';
+import { getConstraintHints as getObjectHints } from './../../parser/open-api/constraints/object';
+import { getConstraintHints as getStringHints } from './../../parser/open-api/constraints/string';
+
+export default class PropertyConstraints extends PureComponent {
+  render() {
+    const { type, isRequired, constraints } = this.props;
+
+    return (
+      <span className="property-constraints">
+        {isRequired && <span className="property-required">required</span>}
+        {constraints && ['number', 'integer'].some(t => type.includes(t)) && this.renderConstraints(constraints, 'numeric')}
+        {constraints && type.includes('string') && this.renderConstraints(constraints, 'string')}
+        {constraints && type.includes('array') && this.renderConstraints(constraints, 'array')}
+        {constraints && type.includes('object') && this.renderConstraints(constraints, 'object')}
+      </span>
+    );
+  }
+
+  /**
+   * Renders validation hints for the given constraints and type.
+   *
+   * @param {object} constraints
+   * @param {string} type
+   */
+  renderConstraints(constraints, type) {
+    let validations = [];
+
+    switch (type) {
+    case 'numeric':
+      validations = getNumericHints(constraints);
+      break;
+    case 'object':
+      validations = getObjectHints(constraints);
+      break;
+    case 'array':
+      validations = getArrayHints(constraints);
+      break;
+    case 'string':
+    default:
+      validations = getStringHints(constraints);
+    }
+
+    if (!validations.length) {
+      return null;
+    }
+
+    return (
+      <span>
+        {validations.map(constraint =>
+          <span key={constraint} className={`${type}-constraints`}>{constraint}</span>
+        )}
+      </span>
+    );
+  }
+}
+
+PropertyConstraints.propTypes = {
+  type: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isRequired: PropTypes.bool.isRequired,
+  constraints: PropTypes.shape({
+    format: PropTypes.string,
+    exclusiveMinimum: PropTypes.number,
+    exclusiveMaximum: PropTypes.number,
+    maximum: PropTypes.number,
+    maxItems: PropTypes.number,
+    maxLength: PropTypes.number,
+    maxProperties: PropTypes.number,
+    minimum: PropTypes.number,
+    minItems: PropTypes.number,
+    minLength: PropTypes.number,
+    minProperties: PropTypes.number,
+    multipleOf: PropTypes.number,
+    pattern: PropTypes.string,
+    uniqueItems: PropTypes.bool
+  })
+};

src/parser/open-api/constraints/array.js

@@ -0,0 +1,35 @@
+/**
+ * Returns an array of hints that relate to the constraints for an array,
+ * `maxItems`, `minItems` and `uniqueItems`.
+ *
+ * @param {object} constraints
+ * @return {array}
+ */
+export function getConstraintHints(constraints) {
+  if (!constraints) {
+    return [];
+  }
+
+  const { maxItems, minItems, uniqueItems } = constraints;
+  const validations = [];
+
+  if (uniqueItems) {
+    validations.push('unique items');
+  }
+
+  if (maxItems !== undefined && minItems !== undefined) {
+    // Be succint if the minItems is the same maxItems
+    // ie. value can only be of `x` length.
+    if (maxItems === minItems) {
+      validations.push(`${minItems} items`);
+    } else {
+      validations.push(`${minItems}-${maxItems} items`);
+    }
+  } else if (minItems !== undefined) {
+    validations.push(`at least ${minItems} items`);
+  } else if (maxItems !== undefined) {
+    validations.push(`at most ${maxItems} items`);
+  }
+
+  return validations;
+}

src/parser/open-api/constraints/constraintsParser.js

@@ -0,0 +1,46 @@
+// https://github.com/OAI/OpenAPI-Specification/blob/OpenAPI.next/versions/3.0.md#schema-object
+export const VALIDATION_KEYWORDS = [
+  'format',
+  'exclusiveMaximum',
+  'exclusiveMinimum',
+  'maximum',
+  'maxItems',
+  'maxLength',
+  'maxProperties',
+  'minimum',
+  'minItems',
+  'minLength',
+  'minProperties',
+  'multipleOf',
+  'pattern',
+  'uniqueItems'
+];
+
+/**
+ * Determines if the given property contains any validation keywords
+ *
+ * @param {Object} property
+ * @return {Boolean}
+ */
+export function hasConstraints(property) {
+  return Object.keys(property).some(
+    (key) => VALIDATION_KEYWORDS.includes(key)
+  );
+}
+
+/**
+ * Given a property, extract all the constraints from it and return a new
+ * object with those constraints.
+ *
+ * @param {Object} property
+ * @return {Object}
+ */
+export function getConstraints(property) {
+  return Object.keys(property).reduce((constraints, key) => {
+    if (VALIDATION_KEYWORDS.includes(key)) {
+      constraints[key] = property[key];
+    }
+
+    return constraints;
+  }, {});
+}