fix(GtfsPlusVersionSummary): Tame down changes

binh-dam-ibigroup · binh-dam-ibigroup · commit ade917adfd1c · 2020-04-10T16:18:44.000-04:00
diff --git a/lib/gtfsplus/components/GtfsPlusVersionSummary.js b/lib/gtfsplus/components/GtfsPlusVersionSummary.js
@@ -8,7 +8,6 @@ import {
   ButtonToolbar,
   Col,
   Glyphicon,
-  Label,
   Panel,
   Row,
   Table
@@ -18,7 +17,6 @@ import {browserHistory, Link} from 'react-router'
 import * as gtfsPlusActions from '../actions/gtfsplus'
 import {getGtfsPlusSpec} from '../../common/util/config'
 import type {Props as ContainerProps} from '../containers/ActiveGtfsPlusVersionSummary'
-import type {GtfsSpecTable} from '../../types'
 import type {GtfsPlusReducerState, ManagerUserState} from '../../types/reducers'
 
 type Issue = {
@@ -37,17 +35,11 @@ type Props = ContainerProps & {
   user: ManagerUserState
 }
 
-type State = {
-  expanded: boolean,
-  tableExpanded: any
-}
-
-type IssueFilter = Issue => boolean
+type State = { expanded: boolean }
 
 export default class GtfsPlusVersionSummary extends Component<Props, State> {
   state = {
-    expanded: false,
-    tableExpanded: {}
+    expanded: false
   }
 
   componentDidMount () {
@@ -75,18 +67,12 @@ export default class GtfsPlusVersionSummary extends Component<Props, State> {
   }
 
   _getTableLevelIssues = (tableId: string): ?Array<Issue> => {
-    return this._getIssues(tableId, issue => issue.rowIndex === -1)
-  }
-
-  _getIssues = (tableId: string, filter: ?IssueFilter): ?Array<Issue> => {
     const {issuesForTable} = this.props
     if (!issuesForTable) return null
     if (!(tableId in issuesForTable)) return null
-
-    // Filter table level issues or row issues using the specified filter.
-    filter = filter || (() => true)
-    const issues = issuesForTable[tableId].filter(filter)
-    return (issues.length > 0 ? issues : null)
+    // Table level issues are identified by not having -1 for row index.
+    const tableLevelIssues = issuesForTable[tableId].filter(issue => issue.rowIndex === -1)
+    return tableLevelIssues.length > 0 ? tableLevelIssues : null
   }
 
   feedStatus () {
@@ -124,68 +110,6 @@ export default class GtfsPlusVersionSummary extends Component<Props, State> {
     this.setState({ expanded: !expanded })
   }
 
-  _toggleTableExpanded = (tableName: string): void => {
-    const { tableExpanded } = this.state
-    const newTableExpanded = Object.assign(tableExpanded)
-    newTableExpanded[tableName] = !newTableExpanded[tableName]
-
-    this.setState({ tableExpanded: newTableExpanded })
-  }
-
-  renderIssues = (table: GtfsSpecTable) => {
-    const { tableExpanded } = this.state
-    const isExpanded = tableExpanded[table.name]
-    const issueCount = this.validationIssueCount(table.id)
-    const tableLevelIssues = this._getTableLevelIssues(table.id)
-    const allIssues = this._getIssues(table.id)
-    allIssues && allIssues.sort(
-      (issue1, issue2) => issue1.rowIndex - issue2.rowIndex
-    )
-
-    return (
-      <div>
-        <small>
-          <Button
-            bsSize='small'
-            bsStyle='link'
-            onClick={() => this._toggleTableExpanded(table.name)}
-          >
-            <small>
-              <Glyphicon
-                glyph={isExpanded ? 'triangle-bottom' : 'triangle-right'}
-                style={{marginRight: '0.5em'}} />
-            </small>
-            {issueCount} validation {issueCount !== 1 ? 'issues' : 'issue' }
-            {tableLevelIssues && issueCount && ` (${tableLevelIssues.length}/${issueCount} blocking)`}
-          </Button>
-
-          {isExpanded && <Table condensed style={{margin: 0}}>
-            <thead>
-              <tr>
-                <th>Line</th>
-                <th>Column</th>
-                <th>Issue</th>
-              </tr>
-            </thead>
-            <tbody>
-              {allIssues && allIssues.map((issue, index) =>
-                <tr key={index}>
-                  <td>{issue.rowIndex + 2}</td> {/* This is the line number in the file */}
-                  <td>{issue.fieldName}</td>
-                  <td>
-                    {issue.description}
-                    {' '}
-                    {issue.rowIndex === -1 && <Label bsStyle='danger' htmlFor>BLOCKING</Label>}
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </Table>}
-        </small>
-      </div>
-    )
-  }
-
   render () {
     const {
       gtfsplus,
@@ -274,7 +198,7 @@ export default class GtfsPlusVersionSummary extends Component<Props, State> {
         <Row>
           <Col xs={12}>
             <Panel>
-              <Table fill>
+              <Table striped fill>
                 <thead>
                   <tr>
                     <th>Table</th>
@@ -283,51 +207,44 @@ export default class GtfsPlusVersionSummary extends Component<Props, State> {
                     <th>Validation Issues</th>
                   </tr>
                 </thead>
-                {/* FIXME: reinstate this <tbody> after switching to React 16. */}
-                {/**
-                    * Change the behavior as follows:
-                    * - Table-level issues are still critical and blocking and and displayed in red.
-                    * - Per-row issues are still amber warnings and non-blocking,
-                    *   but will now be displayed individually instead of being aggregated.
-                    *   Maybe only display the first 25 issues to avoid long rendering times???
-                    * - Issues are displayed on a full-width sub-table for better readability,
-                    *   in the same "row" as the issue summary.
-                    * - Tables are sorted alphabetically.
-                    */}
-                {getGtfsPlusSpec()
-                  .sort((table1, table2) => table1.name.localeCompare(table2.name))
-                  .map((table, index) => {
-                    const issueCount = this.validationIssueCount(table.id)
-                    const tableLevelIssues = this._getTableLevelIssues(table.id)
-                    const hasIssues = +issueCount > 0
-                    const className = tableLevelIssues
-                      ? 'danger'
-                      : (hasIssues ? 'warning' : '')
+                <tbody>
+                  {getGtfsPlusSpec()
+                    .sort((table1, table2) => table1.name.localeCompare(table2.name))
+                    .map((table, index) => {
+                      const issueCount = this.validationIssueCount(table.id)
+                      const tableLevelIssues = this._getTableLevelIssues(table.id)
 
-                    return (
-                      // FIXME: Use <React.Fragment key={index}> (React 16+ only.)
-                      <tbody key={index}>
+                      return (
                         <tr
-                          className={className}
-                          rowSpan={hasIssues ? 2 : 1}
+                          rowSpan={tableLevelIssues ? 2 : 1}
+                          key={index}
+                          className={tableLevelIssues
+                            ? 'danger'
+                            : +issueCount > 0 && 'warning'
+                          }
                           style={{ color: this.isTableIncluded(table.id) === 'Yes' ? 'black' : 'lightGray' }}>
-                          <td>{table.name}</td>
+                          <td>
+                            {table.name}
+                            {tableLevelIssues
+                              ? <small>
+                                <br />
+                                {tableLevelIssues.length} critical table issue(s):
+                                <ul>
+                                  {tableLevelIssues.map((issue, i) =>
+                                    <li key={i}>{issue.fieldName}: {issue.description}</li>)}
+                                </ul>
+                              </small>
+                              : null
+                            }
+                          </td>
                           <td>{this.isTableIncluded(table.id)}</td>
                           <td>{this.tableRecordCount(table.id)}</td>
                           <td>{issueCount}</td>
+                          <td />
                         </tr>
-                        {hasIssues && (
-                          <tr className={className}>
-                            <td colSpan='4' style={{borderTop: 'none'}}>
-                              {this.renderIssues(table)}
-                            </td>
-                          </tr>
-                        )}
-                      </tbody>
-                      // </React.Fragment>
-                    )
-                  })}
-                {/* </tbody> */}
+                      )
+                    })}
+                </tbody>
               </Table>
             </Panel>
           </Col>
