Display Pending Feed Versions

__tests__/test-utils/mock-data/manager.js

@@ -153,6 +153,10 @@ export const mockFeedWithVersion = {
     tripCount: 415
   },
   latestVersionId: 'mock-feed-version-id',
+  // Include version as sometimes, this object is used as a FeedSourceSummary too.
+  latestVersion: {
+    lastUpdated: 1543389038810
+  },
   labelIds: [],
   name: 'test feed with a version',
   noteCount: 0,
@@ -398,6 +402,7 @@ mockProjectWithDeployment.name = 'mock-project-with-deployments'
 
 export const mockDeployment = makeMockDeployment(
   mockProjectWithDeployment,
+  // $FlowFixMe, Passing partial data under FeedSourceSummary.latestVersion
   [mockFeedVersion]
 )
 export const mockDeploymentSummary = makeMockDeploymentSummary()

lib/manager/components/FeedSourceTableRow.js

@@ -24,13 +24,14 @@ import WatchButton from '../../common/containers/WatchButton'
 import FeedLabel from '../../common/components/FeedLabel'
 import LabelAssignerModal from '../components/LabelAssignerModal'
 import type { Props as ContainerProps } from '../containers/FeedSourceTableRow'
-import type { Feed, ValidationSummary, Project } from '../../types'
+import type { Feed, FeedVersionSummary, ValidationSummary, Project } from '../../types'
 import type {
   FeedSourceTableComparisonColumns,
   ManagerUserState
 } from '../../types/reducers'
 
 import { PublishStatus } from './PublishStatus'
+import Status from './FeedStatus'
 
 type Props = ContainerProps & {
   comparisonColumn: FeedSourceTableComparisonColumns,
@@ -45,6 +46,15 @@ type Props = ContainerProps & {
   user: ManagerUserState
 }
 
+type VersionData = {
+  className: string,
+  endDate?: string,
+  errorCount: number | string,
+  icon: string,
+  startDate?: string,
+  status: string
+}
+
 const statusAttributeLookup = {
   'active': {
     className: 'status-active',
@@ -94,6 +104,13 @@ export default class FeedSourceTableRow extends PureComponent<Props> {
   messages = getComponentMessages('FeedSourceTableRow')
   dateFormat = this.messages('dateFormat')
 
+  getLastUpdateRelative (lastUpdated?: any) {
+    const lastVersionUpdate = !!lastUpdated && relativeDuration(lastUpdated)
+    return lastVersionUpdate
+      ? this.messages('lastUpdated').replace('%lastVersionUpdate%', lastVersionUpdate)
+      : ''
+  }
+
   /**
    * Get some UI data from a ValidationSummary
    */
@@ -126,16 +143,11 @@ export default class FeedSourceTableRow extends PureComponent<Props> {
   }
 
   /**
-   * This method generates the variables and used to live in the render method,
-   * but was extracted to appease the eslint complexity rule
+   * Generate the variables for comparing published/deployed version vs. latest version.
    */
   generateFeedSourceLabelRenderVars (feedSource: Feed, comparisonValidationSummary: ?ValidationSummary) {
     // data for feed source info column
-    let lastVersionUpdate = !!feedSource.lastUpdated &&
-        relativeDuration(feedSource.lastUpdated)
-    lastVersionUpdate = lastVersionUpdate
-      ? this.messages('lastUpdated').replace('%lastVersionUpdate%', lastVersionUpdate)
-      : ''
+    const lastVersionUpdate = this.getLastUpdateRelative(feedSource.lastUpdated)
 
     // data for comparison column
     const comparisonData = comparisonValidationSummary &&
@@ -166,6 +178,37 @@ export default class FeedSourceTableRow extends PureComponent<Props> {
     }
   }
 
+  renderDetailCells (versionData: VersionData, publishedVersion?: FeedVersionSummary) {
+    const { className, endDate, errorCount, icon, startDate, status } = versionData
+    const { lastUpdated } = publishedVersion || {}
+    const lastVersionUpdate = this.getLastUpdateRelative(lastUpdated)
+    return (
+      <>
+        <td className='feed-version-column'>
+          <Status
+            icon={icon}
+            dateFormat={this.dateFormat}
+            statusSpanClass={className}
+            statusText={this.messages(`status.${status}`)}
+            subtext={lastVersionUpdate}
+          />
+        </td>
+        <td className='feed-version-column'>
+          {startDate}
+          {startDate && ' -'}
+          {endDate && <br />}
+          {endDate}
+        </td>
+        <td className='feed-version-column'>{errorCount}</td>
+        {isExtensionEnabled('mtc') && (
+          <td className='feed-version-column'>
+            <PublishStatus version={publishedVersion} />
+          </td>
+        )}
+      </>
+    )
+  }
+
   // eslint-disable-next-line complexity
   render () {
     const {
@@ -177,7 +220,6 @@ export default class FeedSourceTableRow extends PureComponent<Props> {
     } = this.props
 
     const {
-      lastVersionUpdate,
       comparisonSubtext,
       comparisonData,
       comparisonSubtextDate
@@ -187,67 +229,67 @@ export default class FeedSourceTableRow extends PureComponent<Props> {
     )
 
     // data for latest validation columns
-    const currentVersionData = this.getVersionDisplayData(feedSource.latestValidation)
-    const latestVersionId = feedSource.latestValidation && feedSource.latestValidation.feedVersionId
-    const comparisonVersionId = comparisonValidationSummary && comparisonValidationSummary.feedVersionId
+    const { latestActiveFeedValidation, latestActiveVersion, latestValidation, latestVersion } = feedSource
+    const defaultVersion = latestActiveVersion || latestVersion
+    const defaultValidation = latestActiveFeedValidation || latestValidation
+    const { feedVersionId: latestVersionId } = latestValidation || {}
+    const { feedVersionId: activeVersionId } = defaultValidation || {}
 
-    if (latestVersionId && latestVersionId === comparisonVersionId) {
-      currentVersionData.status = comparisonColumn === 'DEPLOYED'
+    const { endDate, feedVersionId: comparisonVersionId, startDate } = comparisonValidationSummary || {}
+    const hasComparisonDates = startDate && endDate
+
+    const latestVersionData = this.getVersionDisplayData(latestValidation)
+    const activeVersionData = this.getVersionDisplayData(defaultValidation)
+
+    if (activeVersionId && activeVersionId === comparisonVersionId) {
+      activeVersionData.status = comparisonColumn === 'DEPLOYED'
         ? 'same-as-deployed'
         : 'same-as-published'
     }
 
+    const hasPendingVersion = activeVersionId !== latestVersionId
+    const rowsRequired = hasPendingVersion ? 2 : 1
+
+    // Render the active or expired version first.
+    // If there is a future version, show it underneath.
     return (
-      <tr key={feedSource.id} className='feed-source-table-row'>
-        <td className='feed-source-info'>
-          <FeedInfo feedSource={feedSource} project={project} user={user} />
-        </td>
-        {comparisonColumn &&
-          <td className='comparison-column'>
-            {comparisonData
-              ? (
-                <Status
-                  icon={comparisonData.icon}
-                  dateFormat={this.dateFormat}
-                  statusSpanClass={comparisonData.className}
-                  statusText={this.messages(`status.${comparisonData.status}`)}
-                  subtext={comparisonSubtext}
-                  subtextDate={comparisonSubtextDate}
-                />
-              )
-              : <span className='feed-status-subtext'>
-                {comparisonColumn === 'PUBLISHED'
-                  ? this.messages('status.feedNotPublished')
-                  : this.messages('status.feedNotInDeployment')}
-              </span>
-            }
+      <>
+        <tr className='feed-source-table-row'>
+          <td className='feed-source-info' rowSpan={rowsRequired}>
+            <FeedInfo feedSource={feedSource} project={project} user={user} />
           </td>
-        }
-        <td className='feed-version-column'>
-          <Status
-            icon={currentVersionData.icon}
-            dateFormat={this.dateFormat}
-            statusSpanClass={currentVersionData.className}
-            statusText={this.messages(`status.${currentVersionData.status}`)}
-            subtext={lastVersionUpdate}
-          />
-        </td>
-        <td className='feed-version-column'>
-          {currentVersionData.startDate}
-          {currentVersionData.startDate && ' -'}
-          {currentVersionData.endDate && <br />}
-          {currentVersionData.endDate}
-        </td>
-        <td className='feed-version-column'>{currentVersionData.errorCount}</td>
-        {isExtensionEnabled('mtc') &&
-          <td className='feed-version-column'>
-            <PublishStatus publishState={feedSource.publishState != null ? feedSource.publishState : ''} latestSentToExternalPublisher={feedSource.latestSentToExternalPublisher != null ? feedSource.latestSentToExternalPublisher : 0} />
+          {comparisonColumn &&
+            <td className='comparison-column' rowSpan={rowsRequired}>
+              {comparisonData && hasComparisonDates
+                ? (
+                  <Status
+                    icon={comparisonData.icon}
+                    dateFormat={this.dateFormat}
+                    statusSpanClass={comparisonData.className}
+                    statusText={this.messages(`status.${comparisonData.status}`)}
+                    subtext={comparisonSubtext}
+                    subtextDate={comparisonSubtextDate}
+                  />
+                )
+                : <span className='feed-status-subtext'>
+                  {comparisonColumn === 'PUBLISHED'
+                    ? this.messages('status.feedNotPublished')
+                    : this.messages('status.feedNotInDeployment')}
+                </span>
+              }
+            </td>
+          }
+          {this.renderDetailCells(activeVersionData, defaultVersion)}
+          <td rowSpan={rowsRequired}>
+            <FeedActionsDropdown {...this.props} />
           </td>
+        </tr>
+        {hasPendingVersion &&
+          <tr className='feed-source-table-row' key={`${feedSource.id}-extra`}>
+            {this.renderDetailCells(latestVersionData, latestVersion)}
+          </tr>
         }
-        <td>
-          <FeedActionsDropdown {...this.props} />
-        </td>
-      </tr>
+      </>
     )
   }
 }
@@ -348,32 +390,6 @@ class FeedInfo extends PureComponent<{ feedSource: Feed, project: Project, user:
   }
 }
 
-class Status extends PureComponent<{
-  dateFormat: string,
-  icon: string,
-  statusSpanClass: string,
-  statusText: string,
-  subtext: ?string,
-  subtextDate?: string
-}> {
-  render () {
-    const {icon, dateFormat, subtext, statusSpanClass, statusText, subtextDate} = this.props
-    return (
-      <div>
-        <span className={`feed-status ${statusSpanClass}`}>
-          <Icon type={icon} />
-          {statusText}
-        </span>
-        <div className='feed-status-subtext'>
-          {subtext}
-          {subtextDate && <br />}
-          {subtextDate && `(${moment(subtextDate).format(dateFormat)})`}
-        </div>
-      </div>
-    )
-  }
-}
-
 class FeedActionsDropdown extends PureComponent<Props> {
   messages = getComponentMessages('FeedActionsDropdown')
 

lib/manager/components/FeedStatus.js

@@ -0,0 +1,37 @@
+// @flow
+
+import Icon from '@conveyal/woonerf/components/icon'
+import moment from 'moment'
+import React from 'react'
+
+type Props = {
+  dateFormat?: string,
+  icon: string,
+  statusSpanClass: string,
+  statusText: string,
+  subtext?: string,
+  subtextDate?: string
+}
+
+export default function FeedStatus ({
+  dateFormat,
+  icon,
+  statusSpanClass,
+  statusText,
+  subtext,
+  subtextDate
+}: Props) {
+  return (
+    <div>
+      <span className={`feed-status ${statusSpanClass}`}>
+        <Icon type={icon} />
+        {statusText}
+      </span>
+      <div className='feed-status-subtext'>
+        {subtext}
+        {subtextDate && <br />}
+        {subtextDate && dateFormat && `(${moment(subtextDate).format(dateFormat)})`}
+      </div>
+    </div>
+  )
+}