Percy: GraphQL Mock Server

.github/workflows/codespell.yml

@@ -15,4 +15,4 @@ jobs:
           # skip git, yarn, pixel test script and HAR file, and all i18n resources.
           # Also, the a11y test file has a false positive and the ignore list does not work
           # see https://github.com/opentripplanner/otp-react-redux/pull/436/checks?check_run_id=3369380014
-          skip: ./.git,yarn.lock,./a11y/a11y.test.js,./a11y/mocks,./percy/percy.test.js,./percy/mock.har,./i18n,./__tests__/mocks
+          skip: ./.git,yarn.lock,./a11y/a11y.test.js,./a11y/mocks,./percy/percy.test.js,./percy/mock.har,./i18n,./__tests__/mocks,otpSchema.json,./percy/mocks/*.json

example-config.yml

@@ -326,6 +326,10 @@ itinerary:
   # One fare will always be shown by default
   defaultFareType: { mediumId: null, riderCategoryId: null }
 
+  # List of OTP2 errors to not display. Can be a list
+  # mutedErrors:
+  #   - NO_TRANSIT_CONNECTION_IN_SEARCH_WINDOW
+
   # The following settings must be set to these values to use the new
   # "Metro" UI. The settings can be used without the Metro UI, but
   # this may have unexpected effects.
@@ -352,6 +356,8 @@ itinerary:
   # This flag disables the dot between legs in the metro itnerary summary, replacing it with
   # a gray background
   disableMetroSeperatorDot: false
+  # If enabled, always shows departures as times ("10pm" instead of "3 min") unless realtime data is present
+  onlyShowCountdownForRealtime: true
   # Show the number of minutes of delay or early beneath a time in the itinerary body
   showScheduleDeviation: true
   # Shows the duration of a leg below the leg in the metro itinerary summary

i18n/en-US.yml

@@ -359,6 +359,7 @@ components:
     companyBicycle: "{company} Bike"
     companyScooter: "{company} Scooter"
     error: An error occurred loading nearby amenities.
+    header: Nearby View
     nothingNearby: There are no places nearby.
     spacesAvailable: "{spacesAvailable} empty spaces available"
   NewAccountWizard:

lib/actions/api.js

@@ -494,7 +494,7 @@ export function findStopTimesForStop(params) {
     const { date, stopId, ...otherParams } = params
     let datePath = ''
     if (date) {
-      const dateWithoutDashes = date.replace('-', '')
+      const dateWithoutDashes = date.replace(/-/g, '')
       datePath = `/${dateWithoutDashes}`
     }
 

lib/actions/form.js

@@ -55,6 +55,7 @@ export function resetForm(full = false) {
       // If fully resetting form, also clear the active search, from/to
       // locations, and query params.
       dispatch(clearActiveSearch())
+      dispatch(settingQueryParam({ departArrive: 'NOW' }))
       dispatch(setLocation({ location: null, locationType: 'from' }))
       dispatch(setLocation({ location: null, locationType: 'to' }))
       // Get query params. Delete everything except sessionId.

lib/actions/plan.js

@@ -11,7 +11,7 @@ import { getFirstStopId } from '../util/itinerary'
 import { routingQuery } from './api'
 import { setQueryParam } from './form'
 
-const SERVICE_BREAK = '03:00'
+const SERVICE_BREAK = '03:30'
 const NINETY_SECONDS = 90000
 
 function updateParamsAndPlan(params) {

lib/components/admin/mailables-window.js

@@ -48,11 +48,6 @@ class SelectedMailable extends Component {
     updateField(index, 'largeFormat', evt.target.checked)
   }
 
-  _changeSmallFormat = (evt) => {
-    const { index, updateField } = this.props
-    updateField(index, 'smallFormat', evt.target.checked)
-  }
-
   _changeQuantity = (evt) => {
     const { index, updateField } = this.props
     updateField(index, 'quantity', evt.target.value)
@@ -62,8 +57,7 @@ class SelectedMailable extends Component {
 
   render() {
     const { index, mailable } = this.props
-    const largeId = `largeFormat-${index}`
-    const smallId = `smallFormat-${index}`
+    const id = `largeFormat-${index}`
     return (
       <SelectedMailableContainer>
         <MailableLabel mailable={mailable} />
@@ -76,26 +70,15 @@ class SelectedMailable extends Component {
             type="number"
             value={mailable.quantity}
           />
-          <div style={{ marginTop: '5px' }}>
-            <input
-              checked={mailable.smallFormat}
-              id={smallId}
-              onChange={this._changeSmallFormat}
-              type="checkbox"
-            />
-            <label htmlFor={smallId} style={{ marginLeft: '5px' }}>
-              Small format?
-            </label>
-          </div>
           {mailable.largePrint && (
             <div style={{ marginTop: '5px' }}>
               <input
-                checked={mailable.largeFormat}
-                id={largeId}
+                id={id}
                 onChange={this._changeLargeFormat}
                 type="checkbox"
+                value={mailable.largeFormat}
               />
-              <label htmlFor={largeId} style={{ marginLeft: '5px' }}>
+              <label htmlFor={id} style={{ marginLeft: '5px' }}>
                 Large format?
               </label>
             </div>
@@ -122,11 +105,9 @@ class MailablesWindow extends Component {
   }
 
   _addMailable = (mailable) => {
-    if (!this.state.mailables.find((m) => m.name === mailable.name)) {
-      const mailables = [...this.state.mailables]
-      mailables.push({ ...mailable, quantity: 1, smallFormat: true })
-      this.setState({ mailables })
-    }
+    const mailables = [...this.state.mailables]
+    mailables.push({ ...mailable, quantity: 1 })
+    this.setState({ mailables })
   }
 
   _removeMailable = (mailable) => {
@@ -156,9 +137,9 @@ class MailablesWindow extends Component {
     const { mailables: selectedMailables } = this.state
     const { items } = mailablesConfig
     if (!callTaker.mailables.visible) return null
-    const selectableMailables = items.filter(
-      (m) => !selectedMailables.find((mailable) => mailable.name === m.name)
-    )
+    // If items should not be addable twice, then this line can be amended
+    const selectableMailables = items
+
     return (
       <DraggableWindow
         footer={

lib/components/admin/query-record.js

@@ -40,9 +40,7 @@ class QueryRecordLayout extends Component {
           onClick={this._viewQuery}
         >
           <CallRecordIcon type="search" />
-          {time}
-          <br />
-          {params.from.name} to {params.to.name}
+          {params.from.name} to {params.to.name} at {time}
         </CallRecordButton>
       </li>
     )

lib/components/mobile/main.js

@@ -15,6 +15,7 @@ import MobileRouteViewer from './route-viewer'
 import MobileStopViewer from './stop-viewer'
 import MobileTripViewer from './trip-viewer'
 import MobileWelcomeScreen from './welcome-screen'
+import NearbyView from '../viewers/nearby/nearby-view'
 
 class MobileMain extends Component {
   static propTypes = {
@@ -62,14 +63,15 @@ class MobileMain extends Component {
       return <MobilePatternViewer />
     }
 
+    if (uiState.mainPanelContent === MainPanelContent.NEARBY_VIEW) {
+      return <NearbyView mobile />
+    }
+
     // check for viewed stop
     if (uiState.viewedStop) return <MobileStopViewer />
 
     // check for viewed trip
-    if (
-      uiState.viewedTrip ||
-      uiState.mainPanelContent === MainPanelContent.TRIP_VIEWER
-    )
+    if (uiState.mainPanelContent === MainPanelContent.TRIP_VIEWER)
       return <MobileTripViewer />
 
     switch (uiState.mobileScreen) {

lib/components/narrative/default/default-itinerary.js

@@ -20,8 +20,7 @@ import {
   getAccessibilityScoreForItinerary,
   itineraryHasAccessibilityScores
 } from '../../../util/accessibility-routing'
-import { getFare, getTotalFare } from '../../../util/state'
-import { getFirstLegStartTime } from '../../../util/itinerary'
+import { getFare, getFirstLegStartTime } from '../../../util/itinerary'
 import { Icon, StyledIconWrapperTextAlign } from '../../util/styledIcon'
 import { localizeGradationMap } from '../utils'
 import FieldTripGroupSize from '../../admin/field-trip-itinerary-group-size'

lib/components/narrative/default/itinerary.css

@@ -198,6 +198,8 @@
 .otp .option.default-itin > .header .title > .summary > .mode-block {
   height: 18px;
   width: 18px;
+  color: #eee;
+  fill: #eee;
 }
 
 .otp .option.default-itin > .header .title > .summary > .arrow-block {

lib/components/narrative/line-itin/itin-summary.tsx

@@ -1,12 +1,13 @@
 import { connect } from 'react-redux'
+import { FareProductSelector, Itinerary, Leg } from '@opentripplanner/types'
 import { FormattedMessage, FormattedNumber } from 'react-intl'
 import coreUtils from '@opentripplanner/core-utils'
 import React, { Component } from 'react'
 import styled from 'styled-components'
-import type { Itinerary, Leg } from '@opentripplanner/types'
 
+import { AppReduxState } from '../../../util/state-types'
 import { ComponentContext } from '../../../util/contexts'
-import { getFare } from '../../../util/state'
+import { getFare } from '../../../util/itinerary'
 import FormattedDuration from '../../util/formatted-duration'
 
 // TODO: make this a prop
@@ -77,7 +78,7 @@ const ShortName = styled.div<{ leg: Leg }>`
 
 type Props = {
   currency?: string
-  defaultFareType: string
+  defaultFareType?: FareProductSelector
   itinerary: Itinerary
   onClick: () => void
 }
@@ -236,7 +237,7 @@ function getRouteColorForBadge(leg: Leg): string {
   return leg.routeColor ? '#' + leg.routeColor : defaultRouteColor
 }
 
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: AppReduxState) => {
   return {
     defaultFareType: state.otp.config.itinerary?.defaultFareType
   }

lib/components/narrative/metro/departure-times-list.tsx

@@ -1,30 +1,21 @@
 import { FormattedList, useIntl } from 'react-intl'
-import { Itinerary, Leg } from '@opentripplanner/types'
 import React, { MouseEvent, useCallback } from 'react'
 
 import { firstTransitLegIsRealtime } from '../../../util/viewer'
 import {
   getFirstLegStartTime,
-  getLastLegEndTime
+  getLastLegEndTime,
+  ItineraryStartTime,
+  ItineraryWithIndex
 } from '../../../util/itinerary'
 import InvisibleA11yLabel from '../../util/invisible-a11y-label'
 
-interface ItineraryWithIndex extends Itinerary {
-  index: number
-}
-
-interface StartTime {
-  itinerary: ItineraryWithIndex
-  legs: Leg[]
-  realtime: boolean
-}
-
 export type SetActiveItineraryHandler = (payload: { index: number }) => void
 
 type DepartureTimesProps = {
   expanded?: boolean
   itinerary: ItineraryWithIndex & {
-    allStartTimes?: StartTime[]
+    allStartTimes?: ItineraryStartTime[]
   }
   setActiveItinerary: SetActiveItineraryHandler
   showArrivals?: boolean

lib/components/narrative/metro/metro-error-renderer.tsx

@@ -1,8 +1,10 @@
+import { connect } from 'react-redux'
 import { ExclamationCircle } from '@styled-icons/fa-solid/ExclamationCircle'
 import { FormattedMessage, useIntl } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
 
+import { AppReduxState } from '../../../util/state-types'
 import { Icon } from '../../util/styledIcon'
 
 type Error = Record<string, string[]>
@@ -38,25 +40,34 @@ const Container = styled.li`
   }
 `
 
-const ErrorRenderer = ({ errors }: { errors: Error }): JSX.Element => {
+const ErrorRenderer = ({
+  errors,
+  mutedErrors
+}: {
+  errors: Error
+  mutedErrors?: string[]
+}): JSX.Element => {
   const intl = useIntl()
 
   return (
     <List>
       {Object.keys(errors).map((error: string) => {
+        // The search window is hardcoded in otp-rr and can't be changed by the user.
+        // Do not tell them what's happening as they can't act on the issue.
+        if (error === 'NO_TRANSIT_CONNECTION_IN_SEARCH_WINDOW') {
+          return null
+        }
+
+        // Don't show errors that have been muted in the config
+        if (mutedErrors?.includes(error)) return null
+
         const localizedInputFieldList = Array.from(errors[error])?.map(
           (inputField) =>
             intl.formatMessage({
               id: `components.OTP2ErrorRenderer.inputFields.${inputField}`
             })
         )
 
-        // The search window is hardcoded in otp-rr and can't be changed by the user.
-        // Do not tell them what's happening as they can't act on the issue.
-        if (error === 'NO_TRANSIT_CONNECTION_IN_SEARCH_WINDOW') {
-          return null
-        }
-
         return (
           <Container key={error}>
             <Icon Icon={ExclamationCircle} size="3x" />
@@ -81,5 +92,10 @@ const ErrorRenderer = ({ errors }: { errors: Error }): JSX.Element => {
   )
 }
 
-export default ErrorRenderer
+const mapStateToProps = (state: AppReduxState) => {
+  const { itinerary } = state.otp.config
+  return { mutedErrors: itinerary?.mutedErrors }
+}
+export default connect(mapStateToProps)(ErrorRenderer)
+
 export type { Error }

lib/components/narrative/metro/metro-itinerary.tsx

@@ -12,13 +12,15 @@ import React from 'react'
 import styled, { keyframes } from 'styled-components'
 
 import * as uiActions from '../../../actions/ui'
+import { AppReduxState } from '../../../util/state-types'
 import { ComponentContext } from '../../../util/contexts'
 import { FlexIndicator } from '../default/flex-indicator'
 import {
   getAccessibilityScoreForItinerary,
   itineraryHasAccessibilityScores
 } from '../../../util/accessibility-routing'
-import { getActiveSearch, getFare } from '../../../util/state'
+import { getActiveSearch } from '../../../util/state'
+import { getFare } from '../../../util/itinerary'
 import { IconWithText } from '../../util/styledIcon'
 import { ItineraryDescription } from '../default/itinerary-description'
 import { ItineraryView } from '../../../util/ui'
@@ -451,8 +453,7 @@ class MetroItinerary extends NarrativeItinerary {
   }
 }
 
-// TODO: state type
-const mapStateToProps = (state: any, ownProps: Props) => {
+const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
   const activeSearch = getActiveSearch(state)
 
   return {