Merge pull request #882 from opentripplanner/dev

Release: May 2, 2023

.babelrc

@@ -1,5 +1,9 @@
 {
-  "plugins": ["babel-plugin-add-module-exports", "babel-plugin-lodash"],
+  "plugins": [
+    "babel-plugin-add-module-exports",
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-lodash"
+  ],
   "presets": [
     "@babel/preset-env",
     "@babel/preset-typescript",

.github/pull_request_template.md

@@ -0,0 +1,14 @@
+<!--Please provide a brief description of what this PR accomplishes and note if it should be considered/merged with any related PR(s)-->
+**Description:**
+
+<!--Check the following are met before requesting a review. Leave unchecked if unapplicable-->
+**PR Checklist:**
+- [ ] Does the code follow accessibility standards (WCAG 2.1 AA Compliant)?
+- [ ] Are all languages supported (Internationalization/Localization)?
+- [ ] Are appropriate Typescript types implemented?
+
+<!--(Optional) Before and after screenshots for visual changes:-->
+<!--| Before | After |
+    |--------|-------|
+    |        |       | -->
+

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,74 @@
+# This file was generated by GitHub
+
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "dev", master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "dev" ]
+  schedule:
+    - cron: '23 11 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

.github/workflows/codespell.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: codespell-project/actions-codespell@master
         with:
           check_filenames: true
-          # skip git, yarn, and i18n non-english resources. 
+          # skip git, yarn, pixel test script, 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,./i18n/fr*
+          skip: ./.git,yarn.lock,./a11y/a11y.test.js,./a11y/mocks,./percy/percy.test.js,./i18n

.github/workflows/percy.yml

@@ -0,0 +1,84 @@
+name: Percy
+
+on:
+  push:
+    branches:
+      - master
+      - dev
+  pull_request:
+
+jobs:
+  run-pixel-tests-with-otp1-real-server:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          # This allows us to work with the repository during the lint step
+          fetch-depth: 2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
+      - name: Install npm packages using cache
+        uses: bahmutov/npm-install@v1
+      - name: Download OTP1 config file
+        run: curl $PERCY_OTP1_CONFIG_URL --output /tmp/otp1config.yml
+        env:
+          PERCY_OTP1_CONFIG_URL: ${{ secrets.PERCY_OTP1_CONFIG_URL_METRO }}
+      - name: Take Percy Snapshots
+        # Move everything from latest commit back to staged
+        run: npx percy exec -- npx jest percy/percy.test.js --force-exit
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_OTP_CONFIG_OVERRIDE: /tmp/otp1config.yml
+  run-pixel-tests-with-otp2-real-server:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          # This allows us to work with the repository during the lint step
+          fetch-depth: 2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
+      - name: Install npm packages using cache
+        uses: bahmutov/npm-install@v1
+      - name: Download OTP2 config file
+        run: curl $PERCY_OTP2_CONFIG_URL --output /tmp/otp2config.yml
+        env:
+          PERCY_OTP2_CONFIG_URL: ${{ secrets.PERCY_OTP2_CONFIG_URL_METRO }}
+      - name: Take Percy Snapshots
+        # Move everything from latest commit back to staged
+        run: npx percy exec -- npx jest percy/percy.test.js --force-exit
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_OTP2 }}
+          PERCY_OTP_CONFIG_OVERRIDE: /tmp/otp2config.yml
+          OTP_RR_PERCY_MOBILE: true
+  run-pixel-tests-with-otp2-real-server-call-taker:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          # This allows us to work with the repository during the lint step
+          fetch-depth: 2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
+      - name: Install npm packages using cache
+        uses: bahmutov/npm-install@v1
+      - name: Download OTP2 config file
+        run: curl $PERCY_OTP2_CONFIG_URL --output /tmp/otp2config.yml
+        env:
+          PERCY_OTP2_CONFIG_URL: ${{ secrets.PERCY_OTP2_CONFIG_URL_METRO }}
+      - name: Take Percy Snapshots
+        # Move everything from latest commit back to staged
+        run: npx percy exec -- npx jest percy/percy.test.js --force-exit
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_CALL_TAKER_OTP2 }}
+          PERCY_OTP_CONFIG_OVERRIDE: /tmp/otp2config.yml
+          OTP_RR_PERCY_CALL_TAKER: true

.gitignore

@@ -19,3 +19,4 @@ dist
 *config.yml
 !example-config.yml
 !test-config.yml
+!har-mock-config.yml

README.md

@@ -34,6 +34,89 @@ The same environment variables which affect the behavior of `yarn start` also af
 env JS_CONFIG=my-custom-js.js CUSTOM_CSS=my-custom-css.css yarn build
 ```
 
+## Internationalization
+
+OTP-react-redux uses `react-intl` from the [`formatjs`](https://github.com/formatjs/formatjs) library for internationalization.
+Both `react-intl` and `formatjs` take advantage of native internationalization features provided by web browsers.
+
+### `i18n` Folder
+
+Language-specific content is located in YML files under the `i18n` folder
+(e.g. `en-US.yml` for American English, `fr.yml` for generic French, etc.).
+
+In each of these files:
+  - Messages are organized in various categories and sub-categories.
+  - A component or JS module can use messages from one or more categories.
+  - In the code, messages are retrieved using an ID that is simply the path to the message.
+    Use the dot '.' to separate categories and sub-categories in the path.
+    For instance, for the message defined in YML below:
+    ```yaml
+    common
+      modes
+        subway: Metro
+    ```
+    then use the snippet below with the corresponding message id:
+    ```jsx
+    <FormattedMessage id="common.modes.subway" /> // renders "Metro".
+    ```
+
+In these YML files, it is important that message ids in the code be consistent with
+the categories in this file. Below are some general guidelines:
+  - For starters, there are an `actions`, `common`, `components`, and `config`
+    categories. Additional categories may be added as needed.
+  - Each sub-category under `components` denotes a React component and
+    should contain messages that are used only by that component (e.g. button captions).
+  - In contrast, some strings are common to multiple components,
+    so it makes sense to group them by theme (e.g. accessModes) under the `common` category.
+
+Note: Do not put comments in the YML files! They will be removed by `yaml-sort`.
+Instead, comments for other developers should be placed in the corresponding js/jsx/ts/tsx file.
+Comments for translators should be entered into Weblate (see [Contributing Translations](#contributing-translations))
+
+### Internationalizable content in the configuration file
+
+Most textual content from the `i18n` folder can also be customized on a per-configuration basis
+using the `language` section of `config.yml`, whether for all languages at once,
+or for each supported individual language.
+
+### Using internationalizable content in the code
+
+Use message id **literals** (no variables or other dynamic content) with either
+```jsx
+<FormattedMessage id="..." />
+```
+or
+```js
+intl.formatMessage({ id: ... })
+```
+
+The reason for passing **literals** to `FormattedMessage` and `intl.formatMessage` is that we have a checker script `yarn check:i18n` that is based on the `formatJS` CLI and that detects unused messages in the code and exports translation tables.
+Passing variables or dynamic content will cause the `formatJS` CLI and the checker to ignore the corresponding messages and
+incorrectly claim that a string is unused or missing from a translation file.
+
+One exception to this rule concerns configuration settings where message ids can be constructed dynamically.
+
+### Contributing translations
+
+OTP-react-redux now uses [Hosted Weblate](https://www.weblate.org) to manage translations!
+
+<figure>
+  <a href="https://hosted.weblate.org/engage/otp-react-redux/">
+    <img src="https://hosted.weblate.org/widgets/otp-react-redux/-/horizontal-auto.svg" alt="Translation status" />
+  </a>
+  <figcaption>Translation status for
+    <a href="https://hosted.weblate.org/engage/otp-react-redux/">OTP-react-redux and OTP-UI on Hosted Weblate</a>
+  </figcaption>
+</figure>
+
+
+Translations from the community are welcome and very much appreciated,
+please see instructions at https://hosted.weblate.org/projects/otp-react-redux/.
+Community input from Weblate will appear as pull requests with changes to files in the `i18n` folder for our review.
+(Contributions may be edited or rejected to remain in line with long-term project goals.)
+
+If changes to a specific language file is needed but not enabled in Weblate, please open an issue or a pull request with the changes needed.
+
 ## Library Documentation
 
 More coming soon...

__tests__/actions/__snapshots__/api.js.snap

@@ -56,7 +56,7 @@ Array [
         "error": [Error: Received error from server],
         "requestId": "abcd1238",
         "searchId": "abcd1236",
-        "url": "http://mock-host.com:80/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1236",
+        "url": "http://mock-host.com:80/api/plan?fromPlace=%2812%2C34%29%3A%3A12%2C34&toPlace=%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1236",
       },
       "type": "ROUTING_ERROR",
     },
@@ -99,4 +99,4 @@ Array [
 ]
 `;
 
-exports[`actions > api routingQuery should make a query to OTP: OTP Query Path 1`] = `"/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1234"`;
+exports[`actions > api routingQuery should make a query to OTP: OTP Query Path 1`] = `"/api/plan?fromPlace=%2812%2C34%29%3A%3A12%2C34&toPlace=%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT&ignoreRealtimeUpdates=false&batchId=abcd1234"`;

__tests__/actions/api.js

@@ -2,13 +2,27 @@
 
 import nock from 'nock'
 
+import '../test-utils/mock-window-url'
 import * as api from '../../lib/actions/api'
 
 // Use mocked randId function and pass in searchId for routingQuery calls so that
 // snapshots are deterministic (i.e., the random IDs don't change).
 let idCounter = 1234
 const randId = () => `abcd${idCounter++}`
 
+/**
+ * Sets the requestId values as needed to deterministic IDs.
+ */
+function setMockRequestIds(calls) {
+  calls.forEach((call) => {
+    call.forEach((action) => {
+      if (action.payload && action.payload.requestId) {
+        action.payload.requestId = randId()
+      }
+    })
+  })
+}
+
 describe('actions > api', () => {
   describe('routingQuery', () => {
     const defaultState = {
@@ -64,16 +78,3 @@ describe('actions > api', () => {
     })
   })
 })
-
-/**
- * Sets the requestId values as needed to deterministic IDs.
- */
-function setMockRequestIds (calls) {
-  calls.forEach(call => {
-    call.forEach(action => {
-      if (action.payload && action.payload.requestId) {
-        action.payload.requestId = randId()
-      }
-    })
-  })
-}