Pages Editor: add Drawing Task (#7100)

* pages-editor-pt23: fill in missing strings in TaskItem

* Add UnknownTask

* EditStepDialog: restyle TaskItem children

* Tasks: change 'Main Text' title if step has many tasks

* SingleQuestionTask, TextTask: add proptypes

* Renamed SingleQuestionTask to QuestionTask. Restyle padding of EditTaskForm

* Add DrawingTask, based on QuestionTask

* QuestionTask: rename some stray 'single-question-task' ids

* DrawingTask: remove 'required' checkbox

* Restyle label/span.big elements

* Minor refactor and documentation

* DrawingTask: add option to change tool type and color

* DrawingTask: style grid items

* DrawingTasks: add min/max for tools

* DrawingTask: set up tool type options

* Minor restyle

* DrawingTask: add color preview

* DrawingTask: add default value for new tool

* DrawingTask: restyle/reposition

* Add DrawingToolIcon. Minor code cleanup.

* DrawingIcon: add specific icons for specific tools

* TaskItem: add placeholders for DrawingTask

app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx

@@ -94,7 +94,7 @@ export default function TasksPage() {
    */
   function updateTask(taskKey, task) {
     if (!workflow || !taskKey) return;
-    const newTasks = structuredClone(workflow.tasks);  // Copy tasks
+    const newTasks = structuredClone(workflow.tasks);  // Copy tasks.
     newTasks[taskKey] = task;
     update({ tasks: newTasks });
   }
@@ -114,11 +114,11 @@ export default function TasksPage() {
     if (!confirmed) return;
 
     // Delete the task.
-    const newTasks = structuredClone(workflow.tasks) || {};
+    const newTasks = structuredClone(workflow.tasks) || {};  // Copy tasks.
     delete newTasks[taskKey];
 
     // Delete the task reference in steps.
-    const newSteps = structuredClone(workflow.steps) || [];
+    const newSteps = structuredClone(workflow.steps) || [];  // Copy steps.
     newSteps.forEach(step => {
       const stepBody = step[1] || {};
       stepBody.taskKeys = (stepBody?.taskKeys || []).filter(key => key !== taskKey);
@@ -215,7 +215,7 @@ export default function TasksPage() {
     const answer = task?.answers[answerIndex];
     if (!task || !answer) return;
 
-    const newTasks = structuredClone(workflow.tasks);  // Copy tasks
+    const newTasks = structuredClone(workflow.tasks);  // Copy tasks.
     const newAnswers = task.answers.with(answerIndex, { ...answer, next })  // Copy, then modify, answers
     newTasks[taskKey] = {  // Insert modified answers into the task inside the copied tasks. Phew!
       ...task,

app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditStepDialog.jsx

@@ -6,8 +6,8 @@ import CloseIcon from '../../../../icons/CloseIcon.jsx';
 
 const taskNames = {
   'drawing': 'Drawing',
-  'multiple': 'Multiple Answer Question',
-  'single': 'Single Answer Question',
+  'multiple': 'Question',
+  'single': 'Question',
   'text': 'Text',
 }
 
@@ -50,7 +50,8 @@ function EditStepDialog({
 
   const firstTask = allTasks?.[taskKeys?.[0]]
   const taskName = taskNames[firstTask?.type] || '???';
-  const title = taskKeys?.length > 1
+  const stepHasManyTasks = taskKeys?.length > 1
+  const title = stepHasManyTasks
     ? 'Edit A Multi-Task Page'
     : `Edit ${taskName} Task`;
 
@@ -79,15 +80,17 @@ function EditStepDialog({
         className="dialog-body"
         onSubmit={onSubmit}
       >
-        {taskKeys.map((taskKey) => {
+        {taskKeys.map((taskKey, index) => {
           const task = allTasks[taskKey];
           return (
             <EditTaskForm
               key={`editTaskForm-${taskKey}`}
               deleteTask={deleteTask}
               enforceLimitedBranchingRule={enforceLimitedBranchingRule}
+              stepHasManyTasks={stepHasManyTasks}
               task={task}
               taskKey={taskKey}
+              taskIndexInStep={index}
               updateTask={updateTask}
             />
           );

app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditTaskForm.jsx

@@ -1,24 +1,29 @@
 import PropTypes from 'prop-types';
 
-import SingleQuestionTask from './types/SingleQuestionTask.jsx';
+import DrawingTask from './types/DrawingTask.jsx';
+import QuestionTask from './types/QuestionTask.jsx';
 import TextTask from './types/TextTask.jsx';
+import UnknownTask from './types/UnknownTask.jsx';
 
 const taskTypes = {
-  'multiple': SingleQuestionTask,  // Shared with single answer question task
-  'single': SingleQuestionTask,
+  'drawing': DrawingTask,
+  'multiple': QuestionTask,  // Shared with single answer question task
+  'single': QuestionTask,
   'text': TextTask
 };
 
 function EditTaskForm({  // It's not actually a form, but a fieldset that's part of a form.
   deleteTask,
   enforceLimitedBranchingRule,
+  stepHasManyTasks,
   task,
   taskKey,
+  taskIndexInStep,
   updateTask
 }) {
   if (!task || !taskKey) return <li>ERROR: could not render Task</li>;
 
-  const TaskForm = taskTypes[task.type];
+  const TaskForm = taskTypes[task.type] || UnknownTask;
 
   return (
     <fieldset
@@ -29,6 +34,7 @@ function EditTaskForm({  // It's not actually a form, but a fieldset that's part
         ? <TaskForm
             deleteTask={deleteTask}
             enforceLimitedBranchingRule={enforceLimitedBranchingRule}
+            stepHasManyTasks={stepHasManyTasks}
             task={task}
             taskKey={taskKey}
             updateTask={updateTask}
@@ -46,9 +52,11 @@ EditTaskForm.propTypes = {
     stepHasOneTask: PropTypes.bool,
     stepHasManyTasks: PropTypes.bool
   }),
+  stepHasManyTasks: PropTypes.bool,
   task: PropTypes.object,
   taskKey: PropTypes.string,
+  taskIndexInStep: PropTypes.number,
   updateTask: PropTypes.func
-}
+}              
 
 export default EditTaskForm;