Pages Editor: add "Choose Starting Page" dropdown

[shaunanoordin]

PR Overview

Part of: Pages Editor MVP project and FEM Lab super-project Follows #7079 Staging branch URL: https://pr-7088.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging

This PR adds the ability for project owners to set the starting page/step of a workflow, by selecting the appropriate page/step in a dropdown.

NOTE: in this PR, the term "first page/step" means the "first item in the workflow.steps data array". The term "starting page/step" means the initial page/step a volunteer sees on the FEM Classifier for this workflow. Functionally, these are the same.

New changes in this PR:

• ⭐ Added "choose starting page" dropdown
  • Selecting a page/task in the "choose starting page" dropdown will now rearrange the target page/step so it's the first step.
  • Dropdown will clearly spell out which page/step is the "starting page".
  • (update) Dropdown is hidden when there are 0 steps.
• Workflow header rearrange and restyled.
  • "Preview Workflow" link now moved to the top of the page.
• Minor/misc:
  • several bit of code have existential safeties (e.g. e.target.name -> e?.target?.name) added.
  • ExperimentalPanel's functions now blanks out the first_task, to be safe.

Screenshot: "preview link" moved to the top of the page. The "choose starting page" dropdown (seen as "Starting Page: T0") is visible next to the "Add New Task" button.

Dev Notes

❗⚠️ Due to how the FEM Classifier defines the "starting page/step/task", "choosing the starting page" may not work the way you expect, if you came from PFE.

• History: in PFE, workflow.first_task is used to define the first Task a volunteer works on, on the PFE Classifier. (This older classifier organises by tasks, not by steps.)
• Observation: On FEM's Classifier, workflow.first_task is ignored if a workflow has (a non-empty) workflow.steps. This means explicitly setting workflow.first_task = 'P3' (step key) or workflow.first_task = 'T3' (task key, assuming the task is in the target page) does nothing.
• Observation: On FEM's Classifier, the first item in a (non-empty) workflow.steps array defines the starting page/step presented to the volunteer.
• Solution: when "choosing the starting page", the chosen page/step will become the first page/step in the workflow.steps array.

Testing

• Go to the testing URL.
• Click on "Quick Setup" in the debug panel, or create a multi-page workflow.
• The "choose starting page" dropdown should indicate which is the starting page (i.e. the first step/page in the array)
• Clicking on a Page option dropdown should 1. rearrange the workflow's steps so the target Page is now the first step, and 2. update the result in the dropdown accordingly.
• Clicking on "Preview Workflow" should take you to the FEM Classifier, where the first step/page is the starting step/page.

Other conditions:

• If a workflow has 0 Pages, the dropdown should just show the "Choose starting page" option. is hidden.
  • (🤔 thought: maybe I should make this invisible then.)
• If the "Choose starting page" (default) option is chosen for whatever reason... nothing happens.
• If a Page is manually rearranged (e.g. dragged-and-dropped) to be the first step/page in the array, the dropdown should also update its details accordingly.

Status

Ready for review. 👌

Requires 7079 to be merged first before this can be merged.

[shaunanoordin]

PR Update

• 🆕 "choose starting page" dropdown now hidden when there are no steps.

[coveralls]

coverage: 56.98%. remained the same when pulling 16b0df06b883782de5feaecb96b1fd6d89c69aae on pages-editor-pt21 into 229aeab50b1ac9b74fd065f4b12e54582ada78e9 on master.

[shaunanoordin]

Thanks again, Delilah!