Pages Editor: add "Add Task to existing Page" functionality

shaunanoordin commented 3 months ago

PR Overview

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

This PR implements the "Add Task" functionality, but to an existing Page. Prior to this PR, the "Add Task" functionality can only be triggered at the Tasks Page's top level, creating a new Step alongside the new Task.

Code changes:

code of interest:
- addTask() (previously addTaskWithStep()) now asks for the Step to which the task needs to be added. If no Step is specified, it creates a new Step.
- NewStepDialog needs to be rewired so that it functions similarly; a "target Step" should be specified when it opens.
⚠️ A large amount of code has been refactored, so that may make the code a bit harder to review in this PR, but should make the overall Pages Editor code easier to read.

Considerations: (separate PR? I don't know)

Tasks need to be delete-able
- If a Step/Page has no Task, it should be deleted.
Rule: a Step should not be able to have more than 1 branching Task (aka Single Answer Question Task)

Status

~~WIP~~

Update 5 Apr 17:45 BST: ready for review.

shaunanoordin commented 3 months ago

PR Update

The basic "Add Task to existing Page" functionality is now ready.

New Feature: new "Add New Task" button is available on the Edit Step modal.
- This modal is visible either (i) after Adding a Task or (ii) clicking on the Edit button on a Step item on the Tasks page.
- Clicking on "Add New Task" will open the same "choose your task type" modal.
- Pressing Esc key or closing the modal will return you to the original Edit Step modal with no changes.
- Choosing a task type will add a Task of that type to the step, and return you to the original Edit Step modal.

Other:

Style update: Yellow "Next Step/Page" arrow now has no padding and no arrowhead by default... so it's just a line now.
Style update: spacing between tasks in step/page improved.

⚠️ NOT included in this PR:

Rules for restricting types of Tasks in a Step not implemented. (TODO in a separate PR: a branching Step can only have 1x branching task; a branching Task can only exist in a Step with no other tasks.)
Delete Task in a Step not implemented. (TODO in a separate PR: Steps with no Tasks must also be deleted.)

Testing Steps

Go to the testing URL: https://pr-7065.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging
Click on "Quick Setup" in the debug panel to quickly setup a pre-fabricated workflow.
Click on "Add a New Task +" on the Tasks page and choose a task type
- This will create a new Task with a new Step/Page, and open the Edit Step modal for that new Step.
- Click on "Add a New Task" at the bottom of the modal, and choose another task type. Repeat if you'd like.
- Edit all Tasks in the Step.
- Close the Edit Step modal.
Click on "Edit Step/Page" (pencil icon) button on any Step/Page
- Click on "Add a New Task" at the bottom of the modal, and choose another task type. Repeat if you'd like.
- Edit all Tasks in the Step.
- Close the Edit Step modal.
Refresh the page to confirm changes.

Status

This PR is now ready for review.

coveralls commented 3 months ago

coverage: 56.955%. remained the same when pulling f34307c1af7dc5a70c70d79099f17ddc2d10fc97 on pages-editor-pt18 into ef9e1d89347e27bda25bff241d7c4e32fda1ba7d on master.

shaunanoordin commented 2 months ago

Thanks Delilah! 👍

I'm going to merge this first, and add the font size question to the list for the upcoming design update PR

zooniverse / Panoptes-Front-End