Pages Editor: implement basic "Add Tasks" functionality (#6888)

* TasksPage: add helper functions for creating new Steps & Tasks. Also style buttons.

* TasksPage: implement createTask and createStep functions

* TasksPage: prepare update payload. Add safety check in case tasks/steps not generated.

* TasksPage: implement functional 'Add Tasks' button

* TasksPage: add temporary reset button

* TasksPage: cleanup. Move functions to own helpers dir

* createStep: add missing stepKey

Co-authored-by: Jim O'Donnell <[email protected]>

* createTask: use default tasks from PFE code

* Cleanup: remove minor console log

* convertKeyToIndex: simplify

---------

Co-authored-by: Jim O'Donnell <[email protected]>

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

@@ -5,19 +5,45 @@
 /* eslint-disable react/jsx-boolean-value */
 
 import { useWorkflowContext } from '../context.js';
+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 strings from '../strings.json'; // TODO: move all text into strings
 
 import GripIcon from '../icons/GripIcon.jsx';
 
 export default function TasksPage() {
-  const { workflow } = useWorkflowContext();
+  const { workflow, update } = useWorkflowContext();
   const isActive = true; // TODO
 
-  function placeholderEventHandler() {
-    console.log('+++ TODO');
+  // Automatically adds one pre-built Text Task
+  function experimentalAddNewTaskWithStep() {
+    const newTaskKey = getNewTaskKey(workflow?.tasks);
+    const newStepKey = getNewStepKey(workflow?.steps);
+    const newTask = createTask('text');
+    const newStep = createStep(newStepKey, [newTaskKey]);
+
+    if (!newTaskKey || !newStepKey || !newTask || !newStep) {
+      console.error('TasksPage: could not create Task');
+      return;
+    }
+
+    const tasks = {
+      ...workflow.tasks,
+      [newTaskKey]: newTask
+    };
+    const steps = [...workflow.steps, newStep];
+
+    update({ tasks, steps });
   }
 
-  console.log('+++ workflow: ', workflow);
+  function experimentalReset() {
+    update({
+      tasks: {},
+      steps: []
+    });
+  }
 
   if (!workflow) return null;
 
@@ -33,7 +59,7 @@ export default function TasksPage() {
         <div className="flex-row">
           <button
             className="flex-item big primary"
-            onClick={placeholderEventHandler}
+            onClick={experimentalAddNewTaskWithStep}
             type="button"
           >
             Add a new Task +
@@ -55,6 +81,13 @@ export default function TasksPage() {
             />
           ))}
         </ul>
+        <button
+          className="big primary"
+          onClick={experimentalReset}
+          type="button"
+        >
+          RESET
+        </button>
       </section>
     </div>
   );

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

@@ -0,0 +1,2 @@
+export const TASK_KEY_PREFIX = 'T';
+export const STEP_KEY_PREFIX = 'P'; // Steps are known as Pages to users

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

@@ -0,0 +1,10 @@
+/*
+Transforms "T1234" (string) to 1234 (number).
+Returns 0 by default.
+ */
+/* eslint-disable radix */
+
+export default function convertKeyToIndex(taskKeyOrStepKey = '') {
+  const indexStr = taskKeyOrStepKey?.replace(/^(\D)+/g, '');
+  return parseInt(indexStr) || 0;
+}

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

@@ -0,0 +1,7 @@
+/*
+Creates a Step, with tasks, that's ready to be inserted into a Workflow.
+ */
+
+export default function createStep(stepKey, taskKeys = []) {
+  return [stepKey, { stepKey, taskKeys }];
+}

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

@@ -0,0 +1,12 @@
+/*
+Creates an empty/placeholder Task that's ready to be inserted into a Workflow.
+NOTE: the Task Key isn't handled by this function. Whatever's calling this
+function needs to assign the appropriate Task Key to this Task, and then add it
+to the Workflow.
+ */
+
+import tasks from '../../../classifier/tasks';
+
+export default function createTask(taskType) {
+  return tasks[taskType]?.getDefaultTask();
+}

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

@@ -0,0 +1,20 @@
+/*
+Searches the Workflow's existing Steps and finds the next available Step Key.
+- Goes through workflow.steps and finds steps in the format of P0, P1, P2, etc
+- Finds the LARGEST/HIGHEST key and returns one higher.
+- e.g. if given [P0, P1, P5], this will return P6.
+- Return P0 by default.
+ */
+
+import { STEP_KEY_PREFIX } from './constants.js';
+import convertKeyToIndex from './convertKeyToIndex.js';
+
+export default function getNewStepKey(steps = []) {
+  let newIndex = 0;
+  const stepKeys = steps.map((step) => (step[0] || '')).filter((step) => (step.length > 0));
+  stepKeys.forEach((stepKey) => {
+    const index = convertKeyToIndex(stepKey);
+    newIndex = (newIndex <= index) ? index + 1 : newIndex;
+  });
+  return `${STEP_KEY_PREFIX}${newIndex}`;
+}

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

@@ -0,0 +1,20 @@
+/*
+Searches the Workflow's existing Tasks and finds the next available Task Key.
+- Goes through workflow.tasks and finds keys in the format of T0, T1, T2, etc
+- Finds the LARGEST/HIGHEST key and returns one higher.
+- e.g. if given [T0, T1, T5], this will return T6.
+- Return T0 by default.
+ */
+
+import { TASK_KEY_PREFIX } from './constants.js';
+import convertKeyToIndex from './convertKeyToIndex.js';
+
+export default function getNewTaskKey(tasks = {}) {
+  let newIndex = 0;
+  const taskKeys = Object.keys(tasks);
+  taskKeys.forEach((taskKey) => {
+    const index = convertKeyToIndex(taskKey);
+    newIndex = (newIndex <= index) ? index + 1 : newIndex;
+  });
+  return `${TASK_KEY_PREFIX}${newIndex}`;
+}

css/lab-pages-editor.styl

@@ -73,6 +73,7 @@ $fontWeightBoldPlus = 700
 
   button
     color: $black
+    cursor: pointer
     font-family: $fontFamilies
 
     &.big