Pages Editor: add Drawing Task

[shaunanoordin]

PR Overview

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

This PR adds the Drawing Task to the list of supported Tasks in the Pages Editor. Some miscellaneous cleanup was also performed.

Main:

• New Feature: Drawing Task
  • You can add a Drawing Task by going to Tasks Page -> Add a new Task -> Drawing
  • Each Drawing Task can have any number of Drawing Tools.
  • The supported drawing tools need to meet two criteria: 1. the tool works in FEM Classifier, and 2. it's not an experimental tool (i.e. already exposed to project owners on FEM Lab Project Builder)
  • i.e. 'circle', 'ellipse', 'line', 'point', 'polygon', 'rectangle', 'rotateRectangle'
  • ❗ Please note that subtasks are not supported at this time. This will be a future (phase 2?) addition, due to the complexity it adds.
  • All other settings (including choice of colours) match the FEM Lab Project Builder.
  • NOTE: only the 'point' tool has a "size" parameter.
• DrawingToolIcon added.
  • The icons' svg code is pulled from the FEM codebase.
  • ⚠️ REMINDER TO SHAUN: write documentation for migrating Pages Editor to the FEM codebase, notably with information on the things in /icons

Misc Cleanup:

• (UI) Pages Editor now supports "Unknown Tasks", i.e. the editor uses a default placeholder when task.type isn't one of drawing/multiple/single/text
• (UI) when a Page has multiple Tasks, the label "Main Text" (aka instructions) changes to the name of the Task
• (code cleanup) SingleQuestionTask now renamed to QuestionTask, since it supports both task.type = multiple and single
• (code cleanup) added missing component.propTypes to various components
• (design) various visual tweaks

Screenshot: example of a Drawing Task with 2 drawing tools

Dev Notes

• Typing a tool name seems to trigger several API calls. I need to find a way to debounce the DrawingTask.update() call.

Testing

• Open the test workflow in the Pages Editor using the Staging Branch URL. (Or pick any workflow of your choice, really.)
• Add a Drawing Task.
  • Change multiple task field values, e.g. main text and help text.
  • Add multiple different tools to that drawing task.
  • e.g. Red Large Point tool with min 2, Cyan Rectangle tool with max 4, etc.
• Reload to confirm changes have been saved.
• Click on "Preview Workflow" and try to make Drawing Task classifications on the FEM Classifier.

Status

Ready for review. 🖊️

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

[coveralls]

coverage: 56.994% (+0.003%) from 56.991% when pulling ede1d82392f07f9d5c6a3d4f9964c69081839493 on pages-editor-pt23 into 1ca8532782371676b72df4a07bc2ab88a15235ec on master.

[shaunanoordin]

Thanks Travis!

Noted on the ability to create a Drawing Task with 0 Tools. That's technically valid (data-wise), but doesn't make sense (volunteer-wise). (The same applies to other questions like a Question Task with 0 Answers.) We didn't implement any programmatic guardrails for nonsensical workflows yet, we're just assuming project owners would know not to do this - I'd be interested to see the feedback we get from testers on this.