Merge branch 'master' into organisation-talk

.eslintrc

@@ -5,7 +5,7 @@
     "browser": true,
     "mocha": true
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "rules": {
     "react/jsx-boolean-value": ["error","always"],
     "react/prefer-es6-class": 0,

.github/dependabot.yml

@@ -6,7 +6,6 @@ updates:
     interval: daily
     time: "10:00"
   open-pull-requests-limit: 10
-  versioning-strategy: lockfile-only
   ignore:
   - dependency-name: eslint-plugin-promise
     versions:

.github/workflows/ci-tests.yml

@@ -3,7 +3,7 @@ name: CI Tests
 on:
   pull_request:
   push:
-    branches:    
+    branches:
       - master
   workflow_dispatch:
 jobs:
@@ -12,12 +12,11 @@ jobs:
 
    steps:
     # See: https://help.github.com/en/actions/automating-your-workflow-with-github-actions/configuring-a-workflow#using-the-checkout-action
-    - uses: actions/checkout@v2
-
-    - name: Use Node.js 16
-      uses: actions/setup-node@v2
+    - uses: actions/checkout@v3
+    - name: Use Node.js 18
+      uses: actions/setup-node@v3
       with:
-        node-version: '16.13.x'
+        node-version: 'lts/hydrogen'
         cache: 'npm'
 
     - run: npm ci

.github/workflows/codeql-analysis.yml

@@ -1,3 +1,14 @@
+# 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: "Code scanning - action"
 
 on:
@@ -10,46 +21,54 @@ on:
     - cron: '0 13 * * 3'
 
 jobs:
-  CodeQL-Build:
-
-    # CodeQL runs on ubuntu-latest and windows-latest
+  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@v2
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
-
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
-
+      uses: actions/checkout@v3
+
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      # Override language selection by uncommenting this and choosing your languages
-      # with:
-      #   languages: go, javascript, csharp, python, cpp, java
+      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@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+    # 📚 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
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+    #   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: |
-    #   make bootstrap
-    #   make release
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/deploy_branch.yml

@@ -10,7 +10,7 @@ jobs:
     uses: zooniverse/ci-cd/.github/workflows/npm_build.yaml@main
     with:
       commit_id: ${{ github.sha }}
-      node_version: '16.13.x'
+      node_version: 'lts/hydrogen'
       output: 'dist'
       script: 'build-production'
   deploy_staging_branch:
@@ -22,16 +22,3 @@ jobs:
       target: 'preview.zooniverse.org/panoptes-front-end/pr-${{ github.event.number }}'
     secrets:
       creds: ${{ secrets.AZURE_STATIC_SITES }}
-  slack_notification:
-    name: Send Slack notification
-    uses: zooniverse/ci-cd/.github/workflows/slack_notification.yaml@main
-    needs: deploy_staging_branch
-    if: always()
-    with:
-      commit_id: ${{ github.sha }}
-      job_name: Build staging branch / build
-      status: ${{ needs.deploy_staging_branch.result }}
-      title: 'Deploy https://pr-${{ github.event.number }}.pfe-preview.zooniverse.org'
-      title_link: 'https://pr-${{ github.event.number }}.pfe-preview.zooniverse.org'
-    secrets:
-      slack_webhook_url: ${{ secrets.SLACK_WEBHOOK_URL }}

.github/workflows/deploy_production.yml

@@ -15,7 +15,7 @@ jobs:
     uses: zooniverse/ci-cd/.github/workflows/npm_build.yaml@main
     with:
       commit_id: ${{ github.sha }}
-      node_version: '16.13.x'
+      node_version: 'lts/hydrogen'
       output: 'dist'
       script: 'build-production'
   deploy_production:
@@ -27,16 +27,3 @@ jobs:
       target: 'www.zooniverse.org'
     secrets:
       creds: ${{ secrets.AZURE_STATIC_SITES }}
-  slack_notification:
-    name: Send Slack notification
-    uses: zooniverse/ci-cd/.github/workflows/slack_notification.yaml@main
-    needs: deploy_production
-    if: always()
-    with:
-      commit_id: ${{ github.sha }}
-      job_name: Build production / build
-      status: ${{ needs.deploy_production.result }}
-      title: 'PFE Production deploy complete'
-      title_link: 'https://www.zooniverse.org'
-    secrets:
-      slack_webhook_url: ${{ secrets.SLACK_WEBHOOK_URL }}

.github/workflows/deploy_staging.yml

@@ -12,7 +12,7 @@ jobs:
     uses: zooniverse/ci-cd/.github/workflows/npm_build.yaml@main
     with:
       commit_id: ${{ github.sha }}
-      node_version: '16.13.x'
+      node_version: 'lts/hydrogen'
       output: 'dist'
       script: 'build-production'
   deploy_staging:
@@ -24,16 +24,3 @@ jobs:
       target: 'preview.zooniverse.org/panoptes-front-end/master'
     secrets:
       creds: ${{ secrets.AZURE_STATIC_SITES }}
-  slack_notification:
-    name: Send Slack notification
-    uses: zooniverse/ci-cd/.github/workflows/slack_notification.yaml@main
-    needs: deploy_staging
-    if: always()
-    with:
-      commit_id: ${{ github.sha }}
-      job_name: Build staging / build
-      status: ${{ needs.deploy_staging.result }}
-      title: 'PFE Staging deploy complete'
-      title_link: 'https://master.pfe-preview.zooniverse.org'
-    secrets:
-      slack_webhook_url: ${{ secrets.SLACK_WEBHOOK_URL }}

.npmrc

@@ -1 +1,2 @@
 save-prefix=~
+legacy-peer-deps

Dockerfile

@@ -1,14 +1,13 @@
-FROM node:16
+FROM node:18-alpine
 
 WORKDIR /src
 RUN chown -R node:node /src
 
-RUN apk add --no-cache git
-
 USER node
 
 ADD package.json /src/
 ADD package-lock.json /src/
+ADD .npmrc /src/
 
 RUN npm ci
 

README.md

@@ -13,7 +13,7 @@ We are no longer actively developing features for this app. PRs will be accepted
 To avoid having to install Node.js or any other dependencies, you can run
 everything with Docker and Docker Compose.
 
-- `docker-compose build` will build a local Docker image and run `npm install`. Run this whenever you
+- `docker-compose build` will build a local Docker image and run `npm ci`. Run this whenever you
 change dependencies in `package.json`.
 
 - `docker-compose up` starts a development web server that listens on port 3735.
@@ -26,10 +26,34 @@ change dependencies in `package.json`.
 
 Make sure you have Node 8 and `npm` 5 or greater. It's recommended you manage your Node installations with **nvm**.
 
-- `npm install` installs dependencies.
+- `npm ci` installs dependencies.
 
 - `npm start` builds and runs the site locally.
 
+⚠️ **Note 1:** _[npm ci](https://docs.npmjs.com/cli/v8/commands/npm-ci)_ (clean install) is preferred over _npm install,_ as it doesn't modify the package lock.
+
+⚠️ **Note 2:** as of Node 16.15, running _npm ci_ results in errors such as _npm ERR! ERESOLVE could not resolve_ and _Conflicting peer dependency: [email protected]_ You can bypass this problem by instead running `npm ci --legacy-peer-deps`. Please see [issue 6155](https://github.com/zooniverse/Panoptes-Front-End/issues/6155) for more details.
+
+### Viewing the Website
+
+Open your web browser of choice and go to `https://localhost:3735/`
+
+If you want to _login_ via the Panoptes API and _view authenticated pages,_ then you'll need to set up and use `https://local.zooniverse.org:3735` instead of using localhost:3735. Otherwise, you'll run into CORS errors. (You need to add the hostname to your hosts file, pointing to local. Instructions are on [our Stackoverflow](https://stackoverflow.com/c/zooniverse/questions/109).)
+
+**Troubleshooting: web browser blocks local website**
+
+The problem: when attempting to view _localhost:3735_ or _local.zooniverse.org:3735,_ my web browser stops me and shows a warning screen.
+
+Example errors: "Your connection is not private / NET::ERR_CERT_AUTHORITY_INVALID" on Chrome 104; "Warning: Potential Security Risk Ahead" on Firefox 103; "This connection is not private" on Safari 15.4.
+
+The cause: the local web server is running HTTPS, and it's using a self-signed certificate. Modern web browsers consider these certificates very untrustworthy, and a possible indicator of a man-in-the-middle attack.
+
+The solution(s):
+- For Firefox or Safari, open the _advanced options_ on the warning page, and then click whatever's the equivalent of _"accept risk and continue"._
+- For Chrome, type in the _interstitial bypass keyword_ (`thisisunsafe`) anywhere on the window to temporarily bypass the warning; or ⚠️ manually add the SSL cert to your computer's list of trusted certificates. [See Stackoverflow for additional details.](https://stackoverflow.com/questions/7580508/getting-chrome-to-accept-self-signed-localhost-certificate)
+
+⚠️ Warning: please be careful if you do change your web browser's or computer's security settings.
+
 ### Configuration
 
 The app can be configured using the following environment variables:
@@ -60,7 +84,7 @@ While editing, do your best to follow style and architecture conventions already
 
 ### What to do if it doesn't run
 
-Try `rm -rf ./node_modules && npm install` to freshen up your dependencies. And read the warnings, they should tell you if you're using the wrong version of Node or npm or if you're missing any dependencies. If you use `docker-compose` to build and test the site, you shouldn't run into any problems with the Node version, but `docker-compose build` will build a new image with a fresh `npm install`.
+Try `npm ci` to freshen up your dependencies. And read the warnings, they should tell you if you're using the wrong version of Node or npm or if you're missing any dependencies. If you use `docker-compose` to build and test the site, you shouldn't run into any problems with the Node version, but `docker-compose build` will build a new image with a fresh `npm ci`.
 
 ## Testing
 
@@ -76,7 +100,7 @@ Deployment is handled by Github Action.
 
 On opening of pull requests, a Github Action is triggered to deploy to a branch staging location. The blob storage location depends on the pull request number, e.g. `https://pr-5926.pfe-preview.zooniverse.org`.
 
-On push to master, a Github Action is triggered to deploy to master staging found at `https://master.pfe-preview.zooniverse.org`. 
+On push to master, a Github Action is triggered to deploy to master staging found at `https://master.pfe-preview.zooniverse.org`.
 
 ### Production
 

app/classifier/annotation-renderer/svg.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Draggable from '../../lib/draggable';
 import tasks from '../tasks';
-import getSubjectLocation from '../../lib/get-subject-location';
+import getSubjectLocation from '../../lib/getSubjectLocation';
 import SVGImage from '../../components/svg-image';
 import SVGTransparentRect from '../../components/svg-transparent-rect';
 

app/classifier/annotation-renderer/text.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import tasks from '../tasks';
-import getSubjectLocation from '../../lib/get-subject-location';
+import getSubjectLocation from '../../lib/getSubjectLocation';
 
 export default class TextRenderer extends React.Component {