Pages Editor: link Steps together (#6939)

* PagesEditor: add linkStepsInWorkflow helper

* TasksPage: add experimental buttons

* Minor restyle

* Implement linkStepsInWorkflow()

* TasksPage: experimentalAddNewTaskWithStep() now links Steps

* TasksPage: when linking Steps, check if it CAN branch, not if it does

* TasksPage: experimentalLinkSteps now updates WF

* Minor: rename isFinalStep var

* Minor: cleanup, feedback

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

@@ -9,6 +9,7 @@ import getNewTaskKey from '../../helpers/getNewTaskKey.js';
 import getNewStepKey from '../../helpers/getNewStepKey.js';
 import createTask from '../../helpers/createTask.js';
 import createStep from '../../helpers/createStep.js';
+import linkStepsInWorkflow from '../../helpers/linkStepsInWorkflow.js';
 // import strings from '../../strings.json'; // TODO: move all text into strings
 
 import NewTaskButtonAndDialog from './components/NewTaskButtonAndDialog.jsx';
@@ -33,7 +34,7 @@ export default function TasksPage() {
       ...workflow.tasks,
       [newTaskKey]: newTask
     };
-    const steps = [...workflow.steps, newStep];
+    const steps = linkStepsInWorkflow([...workflow.steps, newStep]);
 
     update({ tasks, steps });
   }
@@ -45,6 +46,11 @@ export default function TasksPage() {
     });
   }
 
+  function experimentalLinkSteps() {
+    const newSteps = linkStepsInWorkflow(workflow?.steps, workflow?.tasks);
+    update({ steps: newSteps });
+  }
+
   if (!workflow) return null;
 
   return (
@@ -77,13 +83,32 @@ export default function TasksPage() {
             />
           ))}
         </ul>
-        <button
-          className="big primary"
-          onClick={experimentalReset}
-          type="button"
+
+        {/* EXPERIMENTAL */}
+        <div
+          style={{
+            padding: '16px',
+            margin: '8px 0',
+            border: '2px dashed #c04040'
+          }}
         >
-          RESET
-        </button>
+          <button
+            className="big"
+            onClick={experimentalReset}
+            type="button"
+            style={{ margin: '0 4px' }}
+          >
+            RESET
+          </button>
+          <button
+            className="big"
+            onClick={experimentalLinkSteps}
+            type="button"
+            style={{ margin: '0 4px' }}
+          >
+            LINK
+          </button>
+        </div>
       </section>
     </div>
   );

app/pages/lab-pages-editor/helpers/linkStepsInWorkflow.js

@@ -0,0 +1,54 @@
+/*
+Links Steps in a Workflow together.
+
+- Input: array of Steps, and Tasks object.
+- Output: COPY of array of Steps, with their `step.next`s updated.
+
+Rules for linking steps:
+- If a Step *can* branch, then step.next = undefined.
+- If a Step is the final step in the array, then step.next = undefined. 
+- Otherwise, each Step's step.next will be the ID of the next Step in the array.
+ */
+
+export default function linkStepsInWorkflow(steps = [], tasks = {}) {
+  const newSteps = steps.map((step, index) => {
+    const [stepId, stepBody] = step;
+
+    const isFinalStepInArray = index === (steps.length - 1);
+    const canBranch = canStepBranch(step, tasks);
+    const nextStep = (isFinalStepInArray || canBranch) ? undefined : steps[index+1]?.[0];
+
+    const newStepBody = {
+      ...stepBody,
+      next: nextStep
+    };
+
+    return [stepId, newStepBody];
+  })
+
+  return newSteps;
+}
+
+/*
+Checks if a step can branch. We're not asking if the step IS branching, but if it *can.*
+- If yes, returns Task ID of the Task that's causing the branch.
+  - If multiple Tasks qualify, only return the FIRST.
+- If no, returns false.
+ */
+function canStepBranch(step = [], tasks = {}) {
+  // TODO/QUESTION: what happens when a Step has multiple branching Questions?
+  // TODO/CHECK: if a Question Task has 0 answers, is it still considered 'branching'? Check what happens with FEM Classifier
+  const [stepId, stepBody] = step;
+  const tasksInStep = stepBody?.taskKeys?.map(taskKey => tasks[taskKey] ? [taskKey, tasks[taskKey]]: undefined).filter(task => !!task) || []
+  return tasksInStep.find(canTaskBranch)?.[0] || false;
+}
+
+/*
+Checks if a task can branch.
+- Returns true or false.
+- At the moment, only "Single Question" tasks can branch. 
+- Compare with "isTaskBranching" in https://github.com/zooniverse/front-end-monorepo/blob/master/packages/lib-classifier/src/store/helpers/convertWorkflowToUseSteps/convertWorkflowToUseSteps.js
+ */
+function canTaskBranch([taskKey, task]) {
+  return task?.type === 'single';
+}