Oops, adds validation error display to InputURI.

__tests__/__fixtures__/OnlyEquivalent.json

@@ -4,7 +4,7 @@
   "id": "resourceTemplate:bf2:OnlyEquivalent",
   "propertyTemplates": [
     {
-      "mandatory": "false",
+      "mandatory": "true",
       "repeatable": "true",
       "type": "resource",
       "resourceTemplates": [],

__tests__/components/editor/property/InputURI.test.js

@@ -213,3 +213,16 @@ describe('when there is a default literal value in the property template', () =>
     })
   })
 })
+
+describe('Errors', () => {
+  const errors = ['Required']
+  const wrapper = shallow(<InputURI.WrappedComponent displayValidations={true} errors={errors} {...plProps}/>)
+
+  it('displays the errors', () => {
+    expect(wrapper.find('span.help-block').text()).toEqual('Required')
+  })
+
+  it('sets the has-error class', () => {
+    expect(wrapper.exists('div.has-error')).toEqual(true)
+  })
+})

src/components/editor/property/InputURI.jsx

@@ -6,8 +6,11 @@ import SinopiaPropTypes from 'SinopiaPropTypes'
 import { connect } from 'react-redux'
 import shortid from 'shortid'
 import { removeItem, itemsSelected } from 'actions/index'
-import { findNode, getDisplayValidations, getPropertyTemplate } from 'selectors/resourceSelectors'
+import {
+  findNode, getDisplayValidations, getPropertyTemplate, findErrors,
+} from 'selectors/resourceSelectors'
 import { booleanPropertyFromTemplate, isValidURI } from 'Utilities'
+import _ from 'lodash'
 
 const InputURI = (props) => {
   // Don't render if don't have property templates yet.
@@ -72,8 +75,6 @@ const InputURI = (props) => {
    * @return {bool} true if the field should be marked as required (e.g. not all obligations met)
    */
   const required = booleanPropertyFromTemplate(props.propertyTemplate, 'mandatory', false)
-      && props.formData.errors
-      && props.formData.errors.length !== 0
 
   const items = props.items || []
 
@@ -103,13 +104,13 @@ const InputURI = (props) => {
     </div>
   })
 
-  const error = props.displayValidations && required ? 'Required' : undefined
+  let error
   let groupClasses = 'form-group'
 
-  if (error) {
+  if (props.displayValidations && !_.isEmpty(props.errors)) {
     groupClasses += ' has-error'
+    error = props.errors.join(',')
   }
-
   return (
     <div className={groupClasses}>
       <input
@@ -143,6 +144,7 @@ InputURI.propTypes = {
   handleRemoveItem: PropTypes.func,
   reduxPath: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   displayValidations: PropTypes.bool,
+  errors: PropTypes.array,
 }
 
 const mapStateToProps = (state, props) => {
@@ -154,12 +156,14 @@ const mapStateToProps = (state, props) => {
   // items has to be its own prop or rerendering won't occur when one is removed
   const items = formData.items
   const propertyTemplate = getPropertyTemplate(state, resourceTemplateId, propertyURI)
+  const errors = findErrors(state.selectorReducer, reduxPath)
 
   return {
     formData,
     items,
     propertyTemplate,
     displayValidations,
+    errors,
   }
 }