Projects: Add subject index pages

[eatyourgreens]

Add subject index pages for /classify/workflow/[workflowID]/subject-set/[subjectSetID]/subject/[subjectID] and /classify/workflow/[workflowID]/subject/[subjectID]. Pass the subject ID down to the classifier as a prop.

Package:
app-project

Review Checklist

General

• Are the tests passing locally and on Travis?
• Is the documentation up to date?

Components

• Has a storybook story been created or updated?
• Is the component accessible?
  • Can it be used with a screen reader? BBC guide to testing with VoiceOver
  • Can it be used from the keyboard? WebAIM guide to keyboard testing
  • Is it passing accessibility checks in the storybook?

Apps

• Does it work in all major browsers: Firefox, Chrome, Edge, Safari?
• Does it work on mobile?
• Can you yarn panic && yarn bootstrap or docker-compose up --build and app works as expected?

Publishing

• Is the changelog updated?
• Are the dependencies updated for apps and libraries that are using the newly published library?

Post-merging

• Did the app deploy to https://frontend.preview.zooniverse.org/projects/:project-name/:owner or https://frontend.preview.zooniverse.org/about?
• Is the new feature working or bug now fixed?
  • Is there a Talk or blog post written to announce the new feature(s)?
• Is the design working across browsers (Firefox, Chrome, Edge, Safari) and mobile?
  • Is this approved by our designer?
• Is this ready for production deployment?

[eatyourgreens]

Note that client-side routing with getServerSideProps is broken in production, at the moment, because it makes requests to zooniverse.org/_next/data. See #1826.

[eatyourgreens]

We should give pages like these unique titles, so that they can be distinguished in the browser history, or when bookmarked, or in link previews. Returning a title from getServerSideProps, in the page props, would do that but probably requires #1823 first (and support for getServerSideProps in production.)

[eatyourgreens]

If a volunteer bookmarks one of these pages, what happens when they come back? Should they get the specified subject, but with an 'Already Seen' banner?

[beckyrother]

Returning to an already-classified subject would display the Already Seen banner and a modal explaining why they can still look at this subject; same with a retired subject.

• Already seen
• Retired

The modal has two options: to return to the project home page or to choose another subject from the subject set. Choosing another subject opens the modal to choose another subject within the classify page: https://projects.invisionapp.com/d/main#/console/12924056/440898093/preview

Should be able to reuse the modal from the project home page on the classify pages, but should not include the 'back to workflow selection' button and has different text ('choose a subject' rather than 'choose a subject to get started').

[eatyourgreens]

@beckyrother we already have subject banners in the classifier. At the moment, there isn't really a mechanism to show different banners for different projects or workflows.

[beckyrother]

Wishful thinking I guess. Let's just show those current banners. It would be nice to have a quick way to go back to subject selection like the modal would do, but if that's not possible they'll just have to go back.

[eatyourgreens]

We could maybe change the messaging depending on the type of workflow that you're working on. I'm not sure how flexible those banners are.

[shaunanoordin]

PR Review

Package: app-project
Context: AFAIU, the Engaging Crowds project (2020-2021) is introducing sequential Subjects, and this is part of the larger solution.

This PR adds new possible paths for the front end. Specifically, these paths allow us to specify specific Subjects IDs for the Classifier to serve.

• Example paths:
  • http://localhost:3000/projects/darkeshard/transformers/classify/workflow/3453/subject/48406
  • http://localhost:3000/projects/darkeshard/transformers/classify/workflow/3453/subject-set/4042/subject/48406
  • (emphasis on the /subject/48406 for specifying Subject 48406)

This PR is part of a larger solution. The SubjectID is being passed down to the Classifier, but the Classifier doesn't do anything with it - yet.

Testing

Basic path testing on mac OS 10 + Chrome 88. Opening the example paths listed above lead to the Classifier and not a 404, which is all I'm looking for. No other paths are affected.

Status

LGTM 👍