Merge pull request #2880 from HSLdevcom/DT-3115

DT-3115

app/component/AlertList.js

@@ -53,14 +53,17 @@ const AlertList = ({
   disableScrolling,
   showExpired,
   serviceAlerts,
+  showRouteNameLink,
 }) => {
   const getRoute = alert => alert.route || {};
   const getMode = alert => getRoute(alert).mode;
   const getShortName = alert => getRoute(alert).shortName;
+  const getRouteGtfsId = alert => getRoute(alert).gtfsId;
 
   const getStop = alert => alert.stop || {};
   const getVehicleMode = alert => getStop(alert).vehicleMode;
   const getCode = alert => getStop(alert).code;
+  const getStopGtfsId = alert => getStop(alert).gtfsId;
 
   const getGroupKey = alert =>
     `${alert.severityLevel}${(hasRoute(alert) && `route_${getMode(alert)}`) ||
@@ -115,6 +118,10 @@ const AlertList = ({
       route:
         (hasRoute(alert) && {
           mode: getMode(alert),
+          routeGtfsId: alerts
+            .sort(alertCompare)
+            .map(getRouteGtfsId)
+            .join(','),
           shortName: alerts
             .sort(alertCompare)
             .map(getShortName)
@@ -123,6 +130,10 @@ const AlertList = ({
         undefined,
       stop:
         (hasStop(alert) && {
+          stopGtfsId: alerts
+            .sort(alertCompare)
+            .map(getStopGtfsId)
+            .join(','),
           code: alerts
             .sort(alertCompare)
             .map(getCode)
@@ -132,7 +143,6 @@ const AlertList = ({
         undefined,
     };
   });
-
   return (
     <div className={cx({ 'momentum-scroll': !disableScrolling })}>
       <div className="route-alerts-list">
@@ -144,9 +154,9 @@ const AlertList = ({
                 description,
                 expired,
                 header,
-                route: { color, mode, shortName } = {},
+                route: { color, mode, shortName, routeGtfsId } = {},
                 severityLevel,
-                stop: { code, vehicleMode } = {},
+                stop: { code, vehicleMode, stopGtfsId } = {},
                 url,
                 validityPeriod: { startTime, endTime },
               },
@@ -169,6 +179,8 @@ const AlertList = ({
                 severityLevel={severityLevel}
                 startTime={startTime}
                 url={url}
+                gtfsIds={routeGtfsId || stopGtfsId}
+                showRouteNameLink={showRouteNameLink}
               />
             ),
           )}
@@ -203,6 +215,7 @@ AlertList.propTypes = {
   disableScrolling: PropTypes.bool,
   serviceAlerts: PropTypes.arrayOf(alertShape),
   showExpired: PropTypes.bool,
+  showRouteNameLink: PropTypes.bool,
 };
 
 AlertList.defaultProps = {

app/component/DisruptionListContainer.js

@@ -79,7 +79,6 @@ function DisruptionListContainer({ breakpoint, currentTime, root }, { intl }) {
   const stopAlertsToShow = stopAlerts.filter(
     showDisruptions ? isDisruption : isInfo,
   );
-
   return (
     <div className="disruption-list-container">
       <div
@@ -145,15 +144,23 @@ function DisruptionListContainer({ breakpoint, currentTime, root }, { intl }) {
             <div>
               <FormattedMessage id="routes" tagName="h2" />
             </div>
-            <AlertList disableScrolling serviceAlerts={routeAlertsToShow} />
+            <AlertList
+              disableScrolling
+              showRouteNameLink
+              serviceAlerts={routeAlertsToShow}
+            />
           </React.Fragment>
         )}
         {stopAlertsToShow.length > 0 && (
           <React.Fragment>
             <div>
               <FormattedMessage id="stops" tagName="h2" />
             </div>
-            <AlertList disableScrolling serviceAlerts={stopAlertsToShow} />
+            <AlertList
+              disableScrolling
+              showRouteNameLink
+              serviceAlerts={stopAlertsToShow}
+            />
           </React.Fragment>
         )}
       </div>
@@ -198,10 +205,12 @@ const containerComponent = Relay.createContainer(
             color
             mode
             shortName
+            gtfsId
           }
           stop {
             code
             vehicleMode
+            gtfsId
           }
         }
       }

app/component/RouteAlertsContainer.js

@@ -56,7 +56,11 @@ function RouteAlertsContainer({ route, patternId }, { intl }) {
   ];
 
   return (
-    <AlertList cancelations={cancelations} serviceAlerts={serviceAlerts} />
+    <AlertList
+      showRouteNameLink={false}
+      cancelations={cancelations}
+      serviceAlerts={serviceAlerts}
+    />
   );
 }
 

app/component/RouteAlertsRow.js

@@ -4,13 +4,15 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { intlShape } from 'react-intl';
+import { Link } from 'react-router';
 
 import ComponentUsageExample from './ComponentUsageExample';
 import ExternalLink from './ExternalLink';
 import IconWithBigCaution from './IconWithBigCaution';
 import RouteNumber from './RouteNumber';
 import ServiceAlertIcon from './ServiceAlertIcon';
 import { AlertSeverityLevelType } from '../constants';
+import { PREFIX_ROUTES, PREFIX_STOPS } from '../util/path';
 
 export const getTimePeriod = ({ currentTime, startTime, endTime, intl }) => {
   const at = intl.formatMessage({
@@ -48,6 +50,8 @@ export default function RouteAlertsRow(
     severityLevel,
     startTime,
     url,
+    gtfsIds,
+    showRouteNameLink,
   },
   { intl },
 ) {
@@ -57,6 +61,35 @@ export default function RouteAlertsRow(
     startTime &&
     endTime &&
     currentTime;
+  const gtfsIdList = gtfsIds ? gtfsIds.split(',') : [];
+  const routeLinks =
+    entityType === 'route' && entityIdentifier && gtfsIds
+      ? entityIdentifier.split(',').map((identifier, i) => (
+          <Link
+            key={gtfsIdList[i]}
+            to={`/${PREFIX_ROUTES}/${gtfsIdList[i]}/pysakit/${gtfsIdList[i]}/`}
+            className="route-alert-row-link"
+          >
+            {' '}
+            {identifier}{' '}
+          </Link>
+        ))
+      : [];
+
+  const stopLinks =
+    entityType === 'stop' && entityIdentifier && gtfsIds
+      ? entityIdentifier.split(',').map((identifier, i) => (
+          <Link
+            key={gtfsIdList[i]}
+            to={`/${PREFIX_STOPS}/${gtfsIdList[i]}`}
+            className="route-alert-row-link"
+          >
+            {' '}
+            {identifier}{' '}
+          </Link>
+        ))
+      : [];
+
   return (
     <div className={cx('route-alert-row', { expired })}>
       {(entityType === 'route' &&
@@ -83,9 +116,23 @@ export default function RouteAlertsRow(
       <div className="route-alert-contents">
         {(entityIdentifier || url) && (
           <div className="route-alert-top-row">
-            {entityIdentifier && (
-              <div className={entityMode}>{entityIdentifier}</div>
-            )}
+            {entityIdentifier &&
+              ((entityType === 'route' &&
+                showRouteNameLink &&
+                routeLinks.length > 0 && (
+                  <div className={entityMode}>{routeLinks}</div>
+                )) ||
+                (!showRouteNameLink && (
+                  <div className={entityMode}>{entityIdentifier} </div>
+                )) ||
+                ((entityType === 'stop' &&
+                  showRouteNameLink &&
+                  stopLinks.length > 0 && (
+                    <div className={entityMode}>{stopLinks}</div>
+                  )) ||
+                  (!showRouteNameLink && (
+                    <div className={entityMode}>{entityIdentifier}</div>
+                  ))))}
             {url && (
               <ExternalLink className="route-alert-url" href={url}>
                 {intl.formatMessage({ id: 'extra-info' })}
@@ -123,6 +170,8 @@ RouteAlertsRow.propTypes = {
   severityLevel: PropTypes.string,
   startTime: PropTypes.number,
   url: PropTypes.string,
+  gtfsIds: PropTypes.string,
+  showRouteNameLink: PropTypes.bool,
 };
 
 RouteAlertsRow.contextTypes = {
@@ -154,6 +203,7 @@ RouteAlertsRow.description = () => (
           }
           entityMode="tram"
           entityIdentifier="2"
+          gtfsIds="HSL:1002"
           expired={false}
         />
       </ComponentUsageExample>
@@ -167,6 +217,7 @@ RouteAlertsRow.description = () => (
           }
           entityMode="tram"
           entityIdentifier="2"
+          gtfsIds="HSL:1002"
           expired
         />
       </ComponentUsageExample>
@@ -184,6 +235,7 @@ RouteAlertsRow.description = () => (
           header="Lähijunat välillä Pasila-Leppävaara peruttu"
           description="Suurin osa lähijunista välillä Pasila-Leppävaara on peruttu asetinlaitevian vuoksi"
           entityIdentifier="Y, S, U, L, E, A"
+          gtfsIds="HSL:3002Y, HSL:3002S, HSL:3002U, HSL:3002L, HSL:3002E, HSL:3002A"
           entityMode="rail"
           severityLevel="WARNING"
           expired
@@ -201,6 +253,7 @@ RouteAlertsRow.description = () => (
           header="Lähijunat välillä Pasila-Leppävaara peruttu"
           description="Suurin osa lähijunista välillä Pasila-Leppävaara on peruttu asetinlaitevian vuoksi"
           entityIdentifier="Y, S, U, L, E, A"
+          gtfsIds="HSL:3002Y, HSL:3002S, HSL:3002U, HSL:3002L, HSL:3002E, HSL:3002A"
           entityMode="rail"
           severityLevel="WARNING"
         />
@@ -219,6 +272,7 @@ RouteAlertsRow.description = () => (
           header="Lähijunat välillä Pasila-Leppävaara peruttu"
           description="Suurin osa lähijunista välillä Pasila-Leppävaara on peruttu asetinlaitevian vuoksi"
           entityIdentifier="Y, S, U, L, E, A"
+          gtfsIds="HSL:3002Y, HSL:3002S, HSL:3002U, HSL:3002L, HSL:3002E, HSL:3002A"
           entityMode="rail"
           severityLevel="WARNING"
         />
@@ -239,6 +293,7 @@ RouteAlertsRow.description = () => (
           header="Lähijunat välillä Pasila-Leppävaara peruttu"
           description="Suurin osa lähijunista välillä Pasila-Leppävaara on peruttu asetinlaitevian vuoksi"
           entityIdentifier="Y, S, U, L, E, A"
+          gtfsIds="HSL:3002Y, HSL:3002S, HSL:3002U, HSL:3002L, HSL:3002E, HSL:3002A"
           entityMode="rail"
           severityLevel="WARNING"
         />
@@ -248,6 +303,7 @@ RouteAlertsRow.description = () => (
           header="Pysäkki H4461 siirtyy"
           description="Leikkikujan pysäkki H4461 siirtyy tilapäisesti kulkusuunnassa 100 metriä taaksepäin."
           entityIdentifier="97N"
+          gtfsIds="HSL:1097N"
           entityMode="bus"
           severityLevel="INFO"
           url="https://www.hsl.fi"
@@ -258,6 +314,7 @@ RouteAlertsRow.description = () => (
           header="Pysäkki H4461 siirtyy"
           description="Leikkikujan pysäkki H4461 siirtyy tilapäisesti kulkusuunnassa 100 metriä taaksepäin."
           entityIdentifier="4461"
+          gtfsIds="HSL%3A1471151"
           entityMode="bus"
           entityType="stop"
           severityLevel="INFO"

app/component/StopAlertsContainer.js

@@ -48,7 +48,11 @@ const StopAlertsContainer = ({ stop }, { intl }) => {
   ];
 
   return (
-    <AlertList cancelations={cancelations} serviceAlerts={serviceAlerts} />
+    <AlertList
+      showRouteNameLink={false}
+      cancelations={cancelations}
+      serviceAlerts={serviceAlerts}
+    />
   );
 };
 

app/component/route.scss

@@ -933,7 +933,10 @@ div.route-tabs {
     display: flex;
     padding: 0.8em 0.8em 0.8em 0.8em;
     position: relative;
-
+    .route-alert-row-link {
+       padding-right: 1px;
+       padding-left: 1px;
+    }
     + .route-alert-row {
       border-top: 1px solid $light-gray;
     }

test/unit/component/RouteAlertsContainer.test.js

@@ -41,6 +41,7 @@ describe('<RouteAlertsContainer />', () => {
     expect(wrapper.find(AlertList).props()).to.deep.equal({
       cancelations: [],
       serviceAlerts: [],
+      showRouteNameLink: false,
     });
   });
 
@@ -77,6 +78,7 @@ describe('<RouteAlertsContainer />', () => {
     expect(wrapper.find(AlertList).props()).to.deep.equal({
       cancelations: [],
       serviceAlerts: [],
+      showRouteNameLink: false,
     });
   });
 

test/unit/component/RouteAlertsRow.test.js

@@ -46,6 +46,8 @@ describe('<RouteAlertsRow />', () => {
     const props = {
       entityMode: 'BUS',
       entityType: 'stop',
+      identifier: '7922',
+      gtfsIds: 'HSL:27922',
       expired: false,
     };
     const wrapper = shallowWithIntl(<RouteAlertsRow {...props} />);
@@ -85,10 +87,33 @@ describe('<RouteAlertsRow />', () => {
 
   it('should render the identifier', () => {
     const props = {
+      entityType: 'route',
+      entityMode: 'bus',
       entityIdentifier: '97N',
+      gtfsIds: 'HSL:2097N',
     };
     const wrapper = shallowWithIntl(<RouteAlertsRow {...props} />);
-    expect(wrapper.find('.route-alert-top-row').text()).to.equal('97N');
+    expect(wrapper.find('.bus')).to.have.lengthOf(1);
+  });
+
+  it('should not render the identifier if gtfsIds not provided', () => {
+    const props = {
+      entityType: 'route',
+      entityMode: 'bus',
+      entityIdentifier: '97N',
+      showRouteNameLink: true,
+    };
+    const wrapper = shallowWithIntl(<RouteAlertsRow {...props} />);
+    expect(wrapper.find('.bus')).to.have.lengthOf(0);
+  });
+
+  it('should not render the identifier if entityIdentifier not provided', () => {
+    const props = {
+      entityType: 'route',
+      entityMode: 'bus',
+    };
+    const wrapper = shallowWithIntl(<RouteAlertsRow {...props} />);
+    expect(wrapper.find('.bus')).to.have.lengthOf(0);
   });
 
   it('should render the url', () => {

test/unit/component/StopAlertsContainer.test.js

@@ -36,6 +36,7 @@ describe('<StopAlertsContainer />', () => {
     expect(wrapper.find(AlertList).props()).to.deep.equal({
       cancelations: [],
       serviceAlerts: [],
+      showRouteNameLink: false,
     });
   });