refactor(MobilityDataValidationResult): show rules from rules.json

lib/manager/components/validation/GtfsValidationViewer.js

@@ -270,15 +270,15 @@ export default class GtfsValidationViewer extends Component<Props, State> {
           <Panel.Heading><Panel.Title componentClass='h2'>{this.messages('title')}</Panel.Title></Panel.Heading>
           {validationContent}
         </Panel>
-        <Panel><Panel.Heading>Mobility Data</Panel.Heading>
-        <ListGroup>
-        {version.mobilityDataResult && version.mobilityDataResult.notices.map(notice => (
+        <Panel><Panel.Heading>Mobility Data Validation Issues</Panel.Heading>
+          <ListGroup>
+            {version.mobilityDataResult && version.mobilityDataResult.notices.map(notice => (
               <MobilityDataValidationResult notice={notice} />
-            )) }
-          <ListGroupItem className='validation-item'>
-            This is the no validation errors message that should only appear if there are none.
-          </ListGroupItem>
-        </ListGroup>
+            ))}
+            {!version.mobilityDataResult || version.mobilityDataResult.notices.length === 0 && <ListGroupItem className='validation-item'>
+              This is the no validation errors message that should only appear if there are none.
+            </ListGroupItem>}
+          </ListGroup>
         </Panel>
       </div>
     )

lib/manager/components/validation/MobilityDataValidationResult.js

@@ -1,10 +1,12 @@
 import React from 'react'
 import { ListGroupItem } from 'react-bootstrap'
+import rules from './rules.json'
 
 const MobilityDataValidationResult = (props) => {
-    const {notice} = props
+    const { notice } = props
+    const rule = rules.find(rd => rd.rule === notice.code)
 
-    return <ListGroupItem><h4>{notice.code}</h4></ListGroupItem>
+    return <ListGroupItem><h4>{notice.code}</h4><p>{rule.description}</p></ListGroupItem>
 }
 
 export default MobilityDataValidationResult