refactor(transformation results): show new transform results

Author: philip-cline

i18n/english.yml

@@ -1300,6 +1300,17 @@ components:
     title: Timetable editor keyboard shortcuts
   TimezoneSelect:
     placeholder: Select timezone...
+  TransformationsViewer:
+    columnsAdded: "Custom columns added: %columns%"
+    noTransformationApplied: No transformations applied.
+    rowsAdded: "Rows added: %rows%"
+    rowsDeleted: "Rows deleted: %rows%"
+    rowsUpdated: "Rows updated: %rows%"
+    tableModified: Table Modified 
+    tableAdded: Table Added
+    tableReplaced: Table Replaced
+    tableDeleted: TableDeleted
+    transformationsTitle: Transformations
   TripSeriesModal:
     close: Close
     createTripSeriesBody: Enter the start and end time for the trip series (24 hour time) and headway between trips. Click generate to create the series of trips. 

i18n/german.yml

@@ -1322,6 +1322,17 @@ components:
     title: Abfahrtszeiten-Editor Tastatur-Shortcuts
   TimezoneSelect:
     placeholder: Zeitzone auswählen...
+  TransformationsViewer:
+    columnsAdded: "Custom columns added: %columns%"
+    noTransformationApplied: No transformations applied.
+    rowsAdded: "Rows added: %rows%"
+    rowsDeleted: "Rows deleted: %rows%"
+    rowsUpdated: "Rows updated: %rows%"
+    tableModified: Table Modified 
+    tableAdded: Table Added
+    tableReplaced: Table Replaced
+    tableDeleted: TableDeleted
+    transformationsTitle: Transformations
   UserAccount:
     account:
       title: Konto

i18n/polish.yml

@@ -1298,6 +1298,17 @@ components:
     title: Timetable editor keyboard shortcuts
   TimezoneSelect:
     placeholder: Select timezone...
+  TransformationsViewer:
+    columnsAdded: "Custom columns added: %columns%"
+    noTransformationApplied: No transformations applied.
+    rowsAdded: "Rows added: %rows%"
+    rowsDeleted: "Rows deleted: %rows%"
+    rowsUpdated: "Rows updated: %rows%"
+    tableModified: Table Modified 
+    tableAdded: Table Added
+    tableReplaced: Table Replaced
+    tableDeleted: TableDeleted
+    transformationsTitle: Transformations
   UserAccount:
     account:
       title: Account

lib/manager/components/TransformationsViewer.js

@@ -4,23 +4,25 @@ import React, { Component } from 'react'
 import Icon from '@conveyal/woonerf/components/icon'
 import { Col, ListGroup, Panel, Row, ListGroupItem, Label as BsLabel } from 'react-bootstrap'
 
+import { getComponentMessages } from '../../common/util/config'
 import type { FeedVersion, TableTransformResult } from '../../types'
 
 type Props = {
   version: FeedVersion,
 }
 
 export default class TransformationsViewer extends Component<Props> {
+  messages = getComponentMessages('TransformationsViewer')
   _getBadge (transformResult: TableTransformResult) {
     switch (transformResult.transformType) {
       case 'TABLE_MODIFIED':
-        return <BsLabel bsStyle='primary'>Table Modified</BsLabel>
+        return <BsLabel bsStyle='primary'>{this.messages('tableModified')}</BsLabel>
       case 'TABLE_ADDED':
-        return <BsLabel bsStyle='success'>Table Added</BsLabel>
+        return <BsLabel bsStyle='success'>{this.messages('tableAdded')}</BsLabel>
       case 'TABLE_REPLACED':
-        return <BsLabel bsStyle='warning'>Table Replaced</BsLabel>
+        return <BsLabel bsStyle='warning'>{this.messages('tableReplaced')}</BsLabel>
       case 'TABLE_DELETED':
-        return <BsLabel bsStyle='danger'>Table Deleted</BsLabel>
+        return <BsLabel bsStyle='danger'>{this.messages('tableDeleted')}</BsLabel>
     }
   }
 
@@ -34,26 +36,28 @@ export default class TransformationsViewer extends Component<Props> {
       const transformContent = tableTransformResults.map(res => {
         const badge = this._getBadge(res)
         return (
-          <ListGroupItem key={res.tableName} style={{maxWidth: '720px'}}>
+          <ListGroupItem key={res.tableName}>
             <h4 style={{marginTop: '5px'}}>{res.tableName} {badge}</h4>
-            <Row style={{textAlign: 'center'}}>
-              <Col xs={4}><Icon type='plus-square' />Rows added: {res.addedCount}</Col>
-              <Col xs={4}><Icon type='minus-square' />Rows deleted: {res.deletedCount}</Col>
-              <Col xs={4}><Icon type='exchange' />Rows updated: {res.updatedCount}</Col>
+            <Row style={{maxWidth: '950px', textAlign: 'center'}}>
+              {/* Use toString on numbers to make flow happy */}
+              <Col xs={3}><Icon type='plus-square' />{this.messages('rowsAdded').replace('%rows%', res.addedCount.toString())}</Col>
+              <Col xs={3}><Icon type='minus-square' />{this.messages('rowsDeleted').replace('%rows%', res.deletedCount.toString())}</Col>
+              <Col xs={3}><Icon type='exchange' />{this.messages('rowsUpdated').replace('%rows%', res.updatedCount.toString())}</Col>
+              <Col xs={3}><Icon type='user-plus' />{this.messages('columnsAdded').replace('%columns%', res.customColumnsAdded.toString())}</Col>
             </Row>
           </ListGroupItem>
         )
       })
       return (
         <Panel>
-          <Panel.Heading><Panel.Title componentClass='h3'>Transformations</Panel.Title></Panel.Heading>
+          <Panel.Heading><Panel.Title componentClass='h3'>{this.messages('transformationsTitle')}</Panel.Title></Panel.Heading>
           <ListGroup>
             {transformContent}
           </ListGroup>
         </Panel>
       )
     } else {
-      return <h3>No transformations applied.</h3>
+      return <h3>{this.messages('noTransformationApplied')}</h3>
     }
   }
 }

lib/types/index.js

@@ -509,6 +509,7 @@ export type SummarizedFeedVersion = {
 
 export type TableTransformResult = {
   addedCount: number,
+  customColumnsAdded: number,
   deletedCount: number,
   tableName: string,
   transformType: 'TABLE_ADDED' | 'TABLE_REPLACED' | 'TABLE_DELETED' | 'TABLE_MODIFIED',