feat(app-project): remember current workflow in a same-site session cookie

[eatyourgreens]

• Store your selected workflow in a workflow_id session cookie on the zooniverse.org domain, scoped to the current project.
• Set that cookie when you choose a workflow with the WorkflowSelectButton component, or when you level up by following a workflow link in Gravity Spy.
• Read the cookie in the Project model, and store it as project.selectedWorkflow. Return the stored value from project.defaultWorkflow.
• Use project.defaultWorkflow on the Classify page, if there's no workflow in the URL.
• Use props.workflowID on the Classify page, if there is a workflow in the URL.
• Add the project context to tests.

Please request review from @zooniverse/frontend team or an individual member of that team.

Package

• app-project

Linked Issue and/or Talk Post

• fixes Client-side navigation in the project app doesn't remember my selected workflow #6218.
• https://www.zooniverse.org/talk/2354/3326062?comment=5610483 (part of a much longer discussion but I think @yshish summarised all the main problems with the current navigation there.)
• Fixes an issue for Black Hole Hunters and Gravity Spy where you are asked to choose a workflow after using Done & Talk to leave a comment.
• Black Hole Hunters Talk discussion: https://www.zooniverse.org/projects/cobalt-lensing/black-hole-hunters/talk/4564/3371395
• Gravity Spy discussions:
  • https://www.zooniverse.org/projects/zooniverse/gravity-spy/talk/730/3206987
  • https://www.zooniverse.org/projects/zooniverse/gravity-spy/talk/329/2928875?comment=4968315&page=5

How to Review

On a project with multiple workflows, clicking a link to choose a workflow should now set a project session cookie that remembers the workflow ID.

• when you leave the project to go to another Zooniverse page, and come back to /classify, it should use the cookie to load a workflow, then update the window location bar to show that workflow.
• when you leave the project and come back to /classify/workflow/[workflowID], it should respect the workflow in the URL.
• when you use client-side navigation within the project app, your selected workflow should be remembered when you go back to Classify.
• when you enter the project from outside the Zooniverse (eg. a link in an email), it should ignore the same-site cookie.

https://local.zooniverse.org:3000/projects/abbsta/south-coast-threatened-fauna-recovery-project?env=production
The big change here is that the Classify link in the project navigation should now reflect your selected workflow (either 21967 or 21968.) That workflow should also be remembered in a session cookie, when you leave the React app and return to https://local.zooniverse.org:3000/projects/abbsta/south-coast-threatened-fauna-recovery-project/classify?env=production

If you shut down the browser, then 'restore previous session', the browser will probably restore the session cookie too. Otherwise, ending your browser session should clear session cookies for all projects, and you'll be asked to choose a workflow when you next classify on a project.

I’ve tested with Gravity Spy and South Coast Threatened Fauna, but any project with more than one workflow should work.

Next.js turns off client-side navigation in development mode, so you’ll need to run the app in production mode to test the project navigation menu.

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

New Feature

• The PR creator has listed user actions to use when testing the new feature
• Unit tests are included for the new feature
• A storybook story has been created or updated
  • Example of SlideTutorial component with docgen comments, and its story

[coveralls]

coverage: 77.608% (+0.01%) from 77.596%
when pulling 0b1e5aa on eatyourgreens:project-selected-workflow
into b7b228d on zooniverse:master.

[eatyourgreens]

I'm probably missing something obvious, but self.selectedWorkflow here is sometimes empty, after setting the workflow_id cookie.

[eatyourgreens]

Fixed by making sure that selectedWorkflow is added to incoming project snapshots.

[eatyourgreens]

Client-side routing in Next.js applies a new project snapshot to the store, from page props, on each route change. The incoming snapshot overwrites any local changes you’ve made to the stored project.

[eatyourgreens]

Here's a short video of me navigating South Coast Threatened Fauna with these changes. Note that when I go to Talk, then /classify, my selected workflow is restored.

Screen.Recording.2024-08-18.at.08.58.54.mov

[goplayoutside3]

Thank you @eatyourgreens for your Issue and linked PR (also tagging @yshish as an fyi). As a heads up, the frontend team has a large backlog of work toward new features and code maintenance scheduled for the rest of the year. Please feel free to keep this Issue open / updated, but PR review will happen a few months from now. Apologies for the slow process.

[eatyourgreens]

SameSite=Strict means the cookie is only read while navigating the zooniverse.org domain. For example, it will work when going to Talk and back but it will be ignored if I enter the site from a link in an email, or a link on an external site. In those latter cases, I’ll be asked to choose a workflow, unless one is specified in the link.

That should protect against a case where a project team mails out a new link to their project, but recipients might have a stale workflow stored on their device.

[eatyourgreens]

This would be super useful for the Material Culture of Wills, which just launched. I'm constantly having to pick a workflow, even though I always work on the same workflow (Checking Transcriptions.)