Add a showTutorial hint to the popup tutorial

[eatyourgreens]

• Add a showTutorial prop to the classifier, which controls whether the ModalTutorial component can be rendered.
• Set showTutorial in the Classify page, based on the value of canClassify page state. This should stop tutorials from being shown if we haven't started classifying yet.
• Refactor classifierProps to use useState. That should avoid page renders where classifierProps is set to an empty object, while the workflow is in the process of changing.

Package:
app-project
lib-classifier

Closes #2936.

It's probably easiest to test this while not logged in, so that the popup tutorial will always appear when you start to classify on a workflow. Here are some test workflows, both of which have tutorials.

• a branching workflow:
  https://local.zooniverse.org:3000/projects/eatyourgreens/-project-testing-ground/classify/workflow/3488?env=staging&demo=true
• a grouped workflow with subject set selection before you can start classifying:
  https://local.zooniverse.org:3000/projects/eatyourgreens/-project-testing-ground/classify/workflow/3586?env=staging&demo=true

On the second workflow, you should be able to choose a subject set and load a subject in the classifier before the tutorial opens. It shouldn’t appear while you’re choosing a subject set.

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]

This mostly works but there can be an annoying flash of the old tutorial when changing workflows from the Classify menu on the Classify page itself.

Screen.Recording.2022-03-03.at.10.26.01.mov

[eatyourgreens]

Persisting classifierProps with useState might avoid that flash, by avoiding renders where classifierProps is an empty object while the workflow is in the process of changing.

[eatyourgreens]

Adding this to Engaging Crowds because classifierProps came out of that project, and it's those projects that are affected.

[goplayoutside3]

PR Review

I compiled a list of user actions I tested in Chrome based on the bug described in #2909 and links provided in the PR description. I found buggy tutorial modal behavior with this branch. In each case below, if the tutorial modal was open, I dismissed it by clicking “Get Started”. To test, I ran yarn bootstrap and then ran app-project locally.

Starting Signed-in with My User Account

Project Testing Ground

• Shown a tutorial modal when visiting the first workflow I have not seen before ✔️
• Refreshing the page does not open tutorial modal ✔️
• Clicked Classify in the nav bar, WorkflowSelector modal opened, I chose a new workflow I had not seen before, the tutorial modal appeared ✔️
• Clicked Classify and chose the same workflow, nothing new happened ✔️
• Navigated to project About pages, clicked Classify in the nav bar, and the previously viewed workflow loads along with the WorkflowSelector modal ✔️
• Navigated to the project About pages, clicked Classify in the nav bar, choose a different workflow I have not yet seen, and the tutorial modal appears ✔️
• Navigated to the project Home page, selected a workflow I have already seen from the WorkflowSelector in the Hero, and the tutorial modal does not appear ✔️
• Navigated to the project Home page, selected a workflow I have not yet seen from the WorkflowSelector in the Hero, and the tutorial modal did not appear 🚨
• While signed-in on a workflow I have already seen, I signed-out of my account, clicked “Sign In” and the tutorial modal appeared on top of the AuthModal 🚨
• From the previous bullet point, once I successfully signed in again, the tutorial modal does not appear ✔️
• I visited the IIIF grouped workflow (which my user account has not seen before), and I’m able to select a subject set. However, once I select a subject set, the tutorial modal does not appear. While signed in to my user that has never viewed this particular workflow, I never saw the tutorial modal 🚨

TESS

• While signed in, I clicked the workflow I have already seen from the project Home page and did not see a tutorial modal ✔️
• While signed-in on the workflow I have already seen, I signed-out of my account, clicked “Sign In” and the tutorial modal appears on top of the AuthModal 🚨

Starting Signed-Out in a Private Browsing Window

TESS

• From the Home page, I clicked Classify in the nav bar, and the tutorial modal appeared ✔️
• Refreshed the page and the tutorial modal appeared ✔️
• Navigated to the project About page, then clicked Classify in the nav bar, and the tutorial modal appeared ✔️
• Navigated to the project Home page, clicked the available workflow in the Hero, and the tutorial modal appeared ✔️
• When I clicked “Sign In”, the AuthModal opens and the tutorial modal did not ✔️
• From the last bullet point, I successfully signed in while viewing a workflow I have already seen, and the tutorial modal appeared 🚨 Note that this is different behavior from a project that has multiple workflows like Project Testing Ground detailed above

End Notes

Based on the user actions tested above, my impression is this tutorial bug is heavily related to the user account instead of modals handled by app-project. While it’s true we don’t want to show a tutorial modal if the classifier isn’t ready, the fix in this branch does not completely address the bug described in #2909.

[eatyourgreens]

I've opened #2936 for the tutorial interrupting workflow and subject set selection. That should be fixed by this PR.

Navigated to the project Home page, selected a workflow I have not yet seen from the WorkflowSelector in the Hero, and the tutorial modal did not appear.

That's weird. I linked up tutorials to both of the test workflows for this PR. Most of the other workflows on my test project don't have tutorials. I think I put the tutorial IDs into the text for both these tutorials too, so that you can inspect your UPP and see if they've been set.

• without the Engaging Crowds indexing tools: https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3488?env=staging&demo=true
• with the Engaging Crowds indexing tools: https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3586?env=staging&demo=true

EDIT: Both those workflows use tutorial 254. Once you've seen a given tutorial ID, it won't show up again according to the logic in the Tutorial model.

front-end-monorepo/packages/lib-classifier/src/store/TutorialStore/Tutorial/Tutorial.js

Lines 25 to 28 in b5e71f5

	if (upp) {
	const seenTime = upp.preferences.tutorials_completed_at?.[self.id]
	return !(seenTime)
	}

Linking a single tutorial to multiple workflows is a pattern that's used by a few live transcription projects, including Davy Notebooks and African American Civil War Soldiers. Once you've worked through the tutorial for your first workflow, you aren't shown it again on subsequent workflows.

[goplayoutside3]

EDIT: Both those workflows use tutorial 254. Once you've seen a given tutorial ID, it won't show up again according to the logic in the Tutorial model.

I see. That explains why I sometimes never saw a tutorial on a workflow I hadn't seen yet 👍

[goplayoutside3]

As far as review, the following cases are the ones still of concern:

TESS (started signed-in)

• While signed-in on the workflow I have already seen, I signed-out of my account, clicked “Sign In” and the tutorial modal appears on top of the AuthModal 🚨

TESS (started signed-out)

• When I clicked “Sign In”, the AuthModal opens and the tutorial modal did not ✔️
  From the last bullet point, I successfully signed in while viewing a workflow I have already seen, and the tutorial modal appeared 🚨

Coming here from #2924 (comment). While the two cases above are not unique to this branch, I think this PR is an incomplete fix and should be converted to a draft if addressing bug #2909 is being put on pause. However, I'm going to tag @shaunanoordin in for a second set of eyes on that decision.

[goplayoutside3]

Wait, I missed that the PR description has been updated to close #2936 instead.

I think I would still like a second set of eyes on this strategy of using ClassifyPage to control modal visibility.

[eatyourgreens]

In the classifier, is it possible to detect when you are signing in or signing out? We added a check against UPP loading state in #2893 but that doesn’t seem to be working.

As far as I can tell, #2909 is happening because UPP loading state is already set to success if you sign in after the classifier has mounted.

However, it’s also possible for you to be signed in, and for tutorial.hasNotBeenSeen to be true, while the parent page is still picking what to work on. That wouldn’t trigger #2909 (auth state is fine) but would trigger #2936 (the classifier will interrupt whatever you’re doing in the parent page as soon as hasNotBeenSeen switches to true.)

That’s as far as I’ve got with figuring this out. I don’t have any more free time to look at the tutorial but we do have new projects coming up for beta, that do use subject set selection and will be impacted by #2936. I’d be grateful for any ideas about also fixing #2909 or, even better, a PR.

[eatyourgreens]

When I clicked “Sign In”, the AuthModal opens and the tutorial modal did not ✔️
From the last bullet point, I successfully signed in while viewing a workflow I have already seen, and the tutorial modal appeared 🚨

I've opened #2954 for this. It seems to be a bug in user loading state. The classifier doesn't track the logged-in user, that's expected to be handled by the containing app, so the tutorial is checking the state of user project preferences. That check doesn't seem to be working as expected if you log in after the store has been created.

[eatyourgreens]

I'm going to vote against expanding this PR to include bugs in user loading state. That seems like a big change, particularly since the classifier store does not track the current user. If #2954 can be closed by a quick change to the classifier's UPP store, then I'll open another PR for that today.

Here. I'd prefer to focus on bugs in workflow selection state, to keep the PR tightly scoped.

[eatyourgreens]

I've added a usePanoptesUser hook to the classifier in #2940. That might also be useful for tutorial bugs that depend on knowing the current logged-in user state. There'd still be bugs where user state (logged-in or not logged-in) is known, but we don't know whether the user is in the process of logging in. I think that's an important distinction to make.

[eatyourgreens]

#2963 should have fixed one of those bugs where the tutorial blocks signing in.

[goplayoutside3]

I still see buggy behavior with this branch. I revisited your IIIF workflow in project testing ground. The tutorial modal does not appear before choosing a subject set which is good, but choosing a subject set does not refresh the classifier as expected. The following was testing while signed-out.

While viewing the project on frontend.preview: https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3586?env=staging

• I click Classify in the nav bar, choose IIIF Manifests, choose IIIF British Library set of 319 subjects, and the classifier loads the correct subject set which I can see in the url is set 4986 ✔️
• Then, I click Classify in the nav bar, choose IIIF Manifests, choose IIIF Collection of Playbills with 360 subjects, and the classifier refreshes to load subject set 4925 ✔️

While viewing the project with this branch locally:

• I click Classify in the nav bar, choose IIIF Manifests, choose IIIF British Library set of 319 subjects, and the classifier loads the correct subject set which I can see in the url is set 4986 ✔️
• Then, I click Classify in the nav bar, choose IIIF Manifests, choose IIIF Collection of Playbills with 360 subjects, and the classifier does NOT refresh. The tutorial modal opens, and the previous subject set is still shown ❌
• At this point, the url indicates I'm supposed to be seeing subject set 4925, but the subject viewer shows a subject and a banner belonging to set 4986 ❌

[eatyourgreens]

That's my fault. I should have written tests for the Classifier props before making changes in the most recent commit. Right now, changes in the URL are not being passed down to the classifier as props. 🤦

EDIT: I've added failing tests, which catch that bug.

[eatyourgreens]

Looking at the test workflow in production, the tutorial should show when you first enter the workflow, but should probably stay hidden once you've dismissed it, including when you change to a new subject set.
https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3586?env=staging

NB. it might not be possible to track that if you aren't logged in and you leave the classifier to go and choose a new subject set from the project home page. Unmounting and mounting the classifier will always run the tutorial set-up code, including a check to see if tutorial preferences are loaded.

[eatyourgreens]

I've started on an update to this branch, to fix those failing tests.

EDIT: tests are fixed and classifier props should be updating properly when the URL changes.

[eatyourgreens]

I think the only other open tutorial bug is #2954. I have a local branch that fixes that, but it involves making a change to loading state behaviour for all the classifier resource store models, so I'm holding off on pushing that branch up at the moment (#2954 is triggered when you sign in after the classifier store is already loaded, and UPP.loadingState is already set to 'success'.)

[eatyourgreens]

I've opened #2968 to fix the tutorial opening after you log in, even if you've already seen it. I couldn't find any obvious problems with resetting loading state whenever a store resets. 🤞

[goplayoutside3]

I re-reviewed this PR in the context of fixing #2936 and can confirm the tutorial does not appear until after subject set selection in the IIIF test workflow and In The Spotlight project used as an example in #2936.