Merge branch 'dev' into date-restricted-requests

a11y/a11y.test.js

@@ -58,7 +58,7 @@ beforeAll(async () => {
   })
   // Web security is disabled to allow requests to the mock OTP server
   browser = await puppeteer.launch({
-    args: ['--disable-web-security']
+    args: ['--disable-web-security', '--no-sandbox']
   })
 })
 

example-config.yml

@@ -268,7 +268,11 @@ modes:
       iconName: wheelchair
       type: CHECKBOX # Possible options: CHECKBOX, SUBMODE, SLIDER, DROPDOWN
   transitModes:
-    - mode: BUS
+      # Mode can be a string or an array of strings.
+    - mode: ["TROLLEYBUS", "BUS"]
+      # When mode is an array an overrideMode must be provided.
+      # This specifies the displayed mode used for icon and URL param.
+      overrideMode: BUS
       label: Bus
       # A mode color can be added, used throughout the application,
       # most notably in the enhanced stop viewer bubble

i18n/en-US.yml

@@ -628,6 +628,8 @@ components:
     oneHour: 1 hour
     realtimeAlertFlagged: There is a realtime alert flagged on my journey
     timeBefore: "{time} before"
+  TripPreviewLayout:
+    previewTrip: Preview Trip
   TripStatus:
     alerts: "{alerts, plural, one {# alert!} other {# alerts!}}"
     deleteTrip: Delete Trip

i18n/fr.yml

@@ -661,6 +661,8 @@ components:
     oneHour: 1 heure
     realtimeAlertFlagged: Une alerte en temps réel affecte mon trajet
     timeBefore: "{time} avant"
+  TripPreviewLayout:
+    previewTrip: Aperçu du trajet
   TripStatus:
     alerts: "{alerts, plural, =0 {# alerte !} one {# alerte !} other {# alertes !}}"
     deleteTrip: Supprimer le trajet

lib/actions/apiV2.js

@@ -1162,7 +1162,11 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
                         }
                       }
                     })
-                    ?.map(convertGraphQLResponseToLegacy)
+                    ?.map((leg) => ({
+                      ...convertGraphQLResponseToLegacy(leg),
+                      route: leg.transitLeg ? leg.route : undefined
+                    })),
+                  otp2QueryParams: query.variables
                 })
               )
 

lib/actions/form.js

@@ -43,7 +43,7 @@ export function resetForm(full = false) {
       const options = getTripOptionsFromQuery(defaultQuery)
       // Default mode is currently WALK,TRANSIT. We need to update this value
       // here to match the list of modes, otherwise the form will break.
-      options.mode = ['WALK', ...transitModes.map((m) => m.mode)].join(',')
+      options.mode = ['WALK', ...transitModes.flatMap((m) => m.mode)].join(',')
       dispatch(settingQueryParam(options))
     }
     if (full) {

lib/actions/user.js

@@ -6,6 +6,7 @@ import isEqual from 'lodash.isequal'
 import qs from 'qs'
 import toast from 'react-hot-toast'
 
+import { applyRouteModeOverrides } from '../util/itinerary'
 import {
   convertToPlace,
   getPersistenceMode,
@@ -129,6 +130,11 @@ export function fetchMonitoredTrips() {
       'GET'
     )
     if (status === 'success') {
+      const { routeModeOverrides } = getState().otp.config
+      trips.data.forEach((trip) => {
+        applyRouteModeOverrides(trip.itinerary, routeModeOverrides)
+      })
+
       dispatch(setCurrentUserMonitoredTrips(trips.data))
     }
   }
@@ -169,14 +175,33 @@ function convertRequestToSearch(config) {
   }
 }
 
+/**
+ * Determines whether two GraphQL sets of variables are for the same trip request/search.
+ *
+ * Modes are excluded from the comparison because the UI triggers multiple queries
+ * with the same GraphQL variables but with different combinations of modes.
+ * Modes exclusion also means that if someone makes the same search with different mode settings
+ * (e.g. excludes/adds transit modes), that search will also be combined with the previous ones.
+ */
+function areRequestsSameExceptModes(qp1, qp2) {
+  const { modes: modes1, ...otherParams1 } = qp1
+  const { modes: modes2, ...otherParams2 } = qp2
+  return isEqual(otherParams1, otherParams2)
+}
+
 /**
  * Removes duplicate requests so that only one request is displayed per "batch".
  */
 function removeDuplicateRequests(filtered, tripRequest) {
   // Compare one trip request to the next one.
   if (filtered.length === 0) {
     filtered.push(tripRequest)
-  } else if (!isEqual(filtered[filtered.length - 1].query, tripRequest.query)) {
+  } else if (
+    !areRequestsSameExceptModes(
+      filtered[filtered.length - 1].query,
+      tripRequest.query
+    )
+  ) {
     filtered.push(tripRequest)
   } else {
     filtered[filtered.length - 1].query.modes.push(...tripRequest.query.modes)

lib/components/app/print-layout.tsx

@@ -1,164 +1,75 @@
-import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
 import { Itinerary } from '@opentripplanner/types'
-import { Map } from '@styled-icons/fa-solid/Map'
-import { Print } from '@styled-icons/fa-solid/Print'
-import { Times } from '@styled-icons/fa-solid/Times'
-// @ts-expect-error not typescripted yet
-import PrintableItinerary from '@opentripplanner/printable-itinerary'
 import React, { Component } from 'react'
 
 import * as apiActions from '../../actions/api'
 import * as formActions from '../../actions/form'
-import {
-  addPrintViewClassToRootHtml,
-  clearClassFromRootHtml
-} from '../../util/print'
-import { ComponentContext } from '../../util/contexts'
+import { AppReduxState } from '../../util/state-types'
 import { getActiveItinerary, getActiveSearch } from '../../util/state'
-import { IconWithText } from '../util/styledIcon'
 import { summarizeQuery } from '../form/user-settings-i18n'
+import { User } from '../user/types'
 import DefaultMap from '../map/default-map'
-import PageTitle from '../util/page-title'
-import SpanWithSpace from '../util/span-with-space'
-import TripDetails from '../narrative/connected-trip-details'
+
+import TripPreviewLayoutBase from './trip-preview-layout-base'
 
 type Props = {
   // TODO: Typescript activeSearch type
   activeSearch: any
-  // TODO: Typescript config type
-  config: any
-  currentQuery: any
   intl: IntlShape
   itinerary: Itinerary
   location?: { search?: string }
   parseUrlQueryString: (params?: any, source?: string) => any
-  // TODO: Typescript user type
-  user: any
-}
-
-type State = {
-  mapVisible?: boolean
+  user: User
 }
 
-class PrintLayout extends Component<Props, State> {
-  static contextType = ComponentContext
-
-  constructor(props: Props) {
-    super(props)
-    this.state = {
-      mapVisible: true
-    }
-  }
-
-  _toggleMap = () => {
-    this.setState({ mapVisible: !this.state.mapVisible })
-  }
-
-  _print = () => {
-    window.print()
-  }
-
+class PrintLayout extends Component<Props> {
   _close = () => {
     window.location.replace(String(window.location).replace('print/', ''))
   }
 
   componentDidMount() {
     const { itinerary, location, parseUrlQueryString } = this.props
 
-    // Add print-view class to html tag to ensure that iOS scroll fix only applies
-    // to non-print views.
-    addPrintViewClassToRootHtml()
     // Parse the URL query parameters, if present
     if (!itinerary && location && location.search) {
       parseUrlQueryString()
     }
-
-    // TODO: use currentQuery to pan/zoom to the correct part of the map
-  }
-
-  componentWillUnmount() {
-    clearClassFromRootHtml()
   }
 
   render() {
-    const { activeSearch, config, intl, itinerary, user } = this.props
-    const { LegIcon } = this.context
+    const { activeSearch, intl, itinerary, user } = this.props
     const printVerb = intl.formatMessage({ id: 'common.forms.print' })
 
     return (
-      <div className="otp print-layout">
-        <PageTitle
-          title={[
-            printVerb,
-            activeSearch &&
-              summarizeQuery(activeSearch.query, intl, user.savedLocations)
-          ]}
-        />
-        {/* The header bar, including the Toggle Map and Print buttons */}
-        <div className="header">
-          <div style={{ float: 'right' }}>
-            <SpanWithSpace margin={0.25}>
-              <Button
-                aria-expanded={this.state.mapVisible}
-                bsSize="small"
-                onClick={this._toggleMap}
-              >
-                <IconWithText Icon={Map}>
-                  <FormattedMessage id="components.PrintLayout.toggleMap" />
-                </IconWithText>
-              </Button>
-            </SpanWithSpace>
-            <SpanWithSpace margin={0.25}>
-              <Button bsSize="small" onClick={this._print}>
-                <IconWithText Icon={Print}>{printVerb}</IconWithText>
-              </Button>
-            </SpanWithSpace>
-            <Button bsSize="small" onClick={this._close} role="link">
-              <IconWithText Icon={Times}>
-                <FormattedMessage id="common.forms.close" />
-              </IconWithText>
-            </Button>
-          </div>
-          <FormattedMessage id="components.PrintLayout.itinerary" />
-        </div>
-
-        {/* The map, if visible */}
-        {this.state.mapVisible && (
+      <TripPreviewLayoutBase
+        header={<FormattedMessage id="components.PrintLayout.itinerary" />}
+        itinerary={itinerary}
+        mapElement={
           <div className="map-container">
             {/* FIXME: Improve reframing/setting map bounds when itinerary is received. */}
             <DefaultMap />
           </div>
-        )}
-
-        {/* The main itinerary body */}
-        {itinerary && (
-          <>
-            <PrintableItinerary
-              config={config}
-              itinerary={itinerary}
-              LegIcon={LegIcon}
-            />
-            <TripDetails className="percy-hide" itinerary={itinerary} />
-          </>
-        )}
-      </div>
+        }
+        onClose={this._close}
+        subTitle={
+          activeSearch &&
+          summarizeQuery(activeSearch.query, intl, user.savedLocations)
+        }
+        title={printVerb}
+      />
     )
   }
 }
 
 // connect to the redux store
 
-// TODO: Typescript state
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: AppReduxState) => {
   const activeSearch = getActiveSearch(state)
   const { localUser, loggedInUser } = state.user
   const user = loggedInUser || localUser
   return {
     activeSearch,
-    config: state.otp.config,
-    currentQuery: state.otp.currentQuery,
     itinerary: getActiveItinerary(state) as Itinerary,
     user
   }

lib/components/app/responsive-webapp.js

@@ -33,6 +33,7 @@ import BeforeSignInScreen from '../user/before-signin-screen'
 import Map from '../map/map'
 import MobileMain from '../mobile/main'
 import printRoutes from '../../util/webapp-print-routes'
+import tripPreviewRoutes from '../../util/webapp-trip-preview-routes'
 import webAppRoutes from '../../util/webapp-routes'
 import withLoggedInUserSupport from '../user/with-logged-in-user-support'
 import withMap from '../map/with-map'
@@ -43,7 +44,7 @@ import SessionTimeout from './session-timeout'
 
 const { isMobile } = coreUtils.ui
 
-const routes = [...webAppRoutes, ...printRoutes]
+const routes = [...webAppRoutes, ...printRoutes, ...tripPreviewRoutes]
 
 class ResponsiveWebapp extends Component {
   static propTypes = {