TasksPage: expand enforceLimitedBranchingRule to 3 sub-rules

zooniverse · Apr 25, 2024 · 571f1af · 571f1af
1 parent b1c71e1
commit 571f1af
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 15 deletions.
diff --git a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx
@@ -193,11 +193,14 @@ export default function TasksPage() {
   // Limited Branching Rule:
   // 0. a Step can only have 1 branching task (single answer question task)
   // 1. if a Step has a branching task, it can't have any other tasks.
-  // 2. if a Step already has tasks, any added question task must be a multiple answer question task.
+  // 2. if a Step already has at least one task, any added question task must be a multiple answer question task.
+  // 3. if a Step already has many tasks, any multiple answer question task can't be transformed into a single answer question task. 
   const activeStep = workflow?.steps?.[activeStepIndex]
-  const enforceLimitedBranchingRule1 = !!canStepBranch(activeStep, workflow?.tasks)
-  const enforceLimitedBranchingRule2 = activeStep?.[1]?.taskKeys?.length > 0
-
+  const enforceLimitedBranchingRule = {
+    stepHasBranch: !!canStepBranch(activeStep, workflow?.tasks),
+    stepHasOneTask: activeStep?.[1]?.taskKeys?.length > 0,
+    stepHasManyTasks: activeStep?.[1]?.taskKeys?.length > 1
+  }
   const previewEnv = getPreviewEnv();
   const previewUrl = `https://frontend.preview.zooniverse.org/projects/${project?.slug}/classify/workflow/${workflow?.id}${previewEnv}`;
   if (!workflow) return null;
@@ -250,14 +253,14 @@ export default function TasksPage() {
         <NewTaskDialog
           ref={newTaskDialog}
           addTask={addTask}
-          enforceLimitedBranchingRule={enforceLimitedBranchingRule2}
+          enforceLimitedBranchingRule={enforceLimitedBranchingRule}
           openEditStepDialog={openEditStepDialog}
           stepIndex={activeStepIndex}
         />
         <EditStepDialog
           ref={editStepDialog}
           allTasks={workflow.tasks}
-          enforceLimitedBranchingRule={enforceLimitedBranchingRule1}
+          enforceLimitedBranchingRule={enforceLimitedBranchingRule}
           onClose={handleCloseEditStepDialog}
           openNewTaskDialog={openNewTaskDialog}
           step={workflow.steps[activeStepIndex]}

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditStepDialog.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditStepDialog.jsx
@@ -16,7 +16,7 @@ const DEFAULT_HANDLER = () => {};
 function EditStepDialog({
   allTasks = {},
   deleteTask,
-  enforceLimitedBranchingRule = false,
+  enforceLimitedBranchingRule,
   onClose = DEFAULT_HANDLER,
   openNewTaskDialog = DEFAULT_HANDLER,
   step = [],
@@ -85,6 +85,7 @@ function EditStepDialog({
             <EditTaskForm
               key={`editTaskForm-${taskKey}`}
               deleteTask={deleteTask}
+              enforceLimitedBranchingRule={enforceLimitedBranchingRule}
               task={task}
               taskKey={taskKey}
               updateTask={updateTask}
@@ -95,7 +96,7 @@ function EditStepDialog({
       <div className="dialog-footer flex-row">
         <button
           className="big flex-item"
-          disabled={!!enforceLimitedBranchingRule}
+          disabled={!!enforceLimitedBranchingRule?.stepHasBranch}
           onClick={handleClickAddTaskButton}
           type="button"
         >
@@ -116,7 +117,11 @@ function EditStepDialog({
 EditStepDialog.propTypes = {
   allTasks: PropTypes.object,
   deleteTask: PropTypes.func,
-  enforceLimitedBranchingRule: PropTypes.bool,
+  enforceLimitedBranchingRule: PropTypes.shape({
+    stepHasBranch: PropTypes.bool,
+    stepHasOneTask: PropTypes.bool,
+    stepHasManyTasks: PropTypes.bool
+  }),
   onClose: PropTypes.func,
   step: PropTypes.object,
   stepIndex: PropTypes.number,

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditTaskForm.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditTaskForm.jsx
@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 import SingleQuestionTask from './types/SingleQuestionTask.jsx';
 import TextTask from './types/TextTask.jsx';
 
@@ -7,8 +9,9 @@ const taskTypes = {
   'text': TextTask
 };
 
-export default function EditTaskForm({  // It's not actually a form, but a fieldset that's part of a form.
+function EditTaskForm({  // It's not actually a form, but a fieldset that's part of a form.
   deleteTask,
+  enforceLimitedBranchingRule,
   task,
   taskKey,
   updateTask
@@ -25,6 +28,7 @@ export default function EditTaskForm({  // It's not actually a form, but a field
       {(TaskForm)
         ? <TaskForm
             deleteTask={deleteTask}
+            enforceLimitedBranchingRule={enforceLimitedBranchingRule}
             task={task}
             taskKey={taskKey}
             updateTask={updateTask}
@@ -35,4 +39,16 @@ export default function EditTaskForm({  // It's not actually a form, but a field
   );
 }
 
+EditTaskForm.propTypes = {
+  deleteTask: PropTypes.func,
+  enforceLimitedBranchingRule: PropTypes.shape({
+    stepHasBranch: PropTypes.bool,
+    stepHasOneTask: PropTypes.bool,
+    stepHasManyTasks: PropTypes.bool
+  }),
+  task: PropTypes.object,
+  taskKey: PropTypes.string,
+  updateTask: PropTypes.func
+}
 
+export default EditTaskForm;
diff --git a/...-pages-editor/components/TasksPage/components/EditStepDialog/types/SingleQuestionTask.jsx b/...-pages-editor/components/TasksPage/components/EditStepDialog/types/SingleQuestionTask.jsx
@@ -7,10 +7,11 @@ import PlusIcon from '../../../../../icons/PlusIcon.jsx';
 const DEFAULT_HANDLER = () => {};
 
 export default function SingleQuestionTask({
+  enforceLimitedBranchingRule,
+  deleteTask = DEFAULT_HANDLER,
   task,
   taskKey,
-  deleteTask = DEFAULT_HANDLER,
-  updateTask = DEFAULT_HANDLER
+  updateTask = DEFAULT_HANDLER  
 }) {
   const [ answers, setAnswers ] = useState(task?.answers || []);
   const [ help, setHelp ] = useState(task?.help || '');
@@ -132,6 +133,7 @@ export default function SingleQuestionTask({
               id={`task-${taskKey}-multiple`}
               type="checkbox"
               checked={isMultiple}
+              disabled={enforceLimitedBranchingRule?.stepHasManyTasks && isMultiple /* If rule is enforced, you can't switch a Multi Question Task to a Single Question Task. */}
               onChange={(e) => {
                 setIsMultiple(!!e?.target?.checked);
               }}

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx
@@ -9,7 +9,7 @@ const DEFAULT_HANDLER = () => {};
 
 function NewTaskDialog({
   addTask = DEFAULT_HANDLER,
-  enforceLimitedBranchingRule = false,
+  enforceLimitedBranchingRule,
   openEditStepDialog = DEFAULT_HANDLER,
   stepIndex = -1
 }, forwardedRef) {
@@ -55,7 +55,7 @@ function NewTaskDialog({
 
   // The Question Task is either a Single Answer Question Task, or a Multiple Answer Question Task.
   // By default, this is 'single', but under certain conditions, a new Question Task will be created as a Multiple Answer Question Task.
-  const questionTaskType = (!enforceLimitedBranchingRule) ? 'single' : 'multiple'
+  const questionTaskType = (!enforceLimitedBranchingRule?.stepHasOneTask) ? 'single' : 'multiple'
 
   return (
     <dialog
@@ -124,7 +124,11 @@ function NewTaskDialog({
 
 NewTaskDialog.propTypes = {
   addTask: PropTypes.func,
-  enforceLimitedBranchingRule: PropTypes.bool,
+  enforceLimitedBranchingRule: PropTypes.shape({
+    stepHasBranch: PropTypes.bool,
+    stepHasOneTask: PropTypes.bool,
+    stepHasManyTasks: PropTypes.bool
+  }),
   openEditStepDialog: PropTypes.func,
   stepIndex: PropTypes.number
 };