From 2cd5204bbbd70f823514019d94827be1e3b3ac20 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Mon, 17 Jun 2024 18:38:44 +0100
Subject: [PATCH 01/14] pages-editor-pt26: remove Safari fix which kills other
 browsers

---
 css/lab-pages-editor.styl | 1 -
 1 file changed, 1 deletion(-)

diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
index d558ef56ef..b8541ac4ac 100644
--- a/css/lab-pages-editor.styl
+++ b/css/lab-pages-editor.styl
@@ -85,7 +85,6 @@ $fontWeightBoldPlus = 700
     color: $black
     font-size: $fontSizeM
     padding: $sizeS
-    -webkit-appearance: none  // Remove gradient overlay in Safari
   
   button
     border-radius: $sizeXS

From 5d0a5adbd8913722138324c17743667d7be3ad2a Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Tue, 18 Jun 2024 22:46:32 +0100
Subject: [PATCH 02/14] TasksPage design: Add New Task button only takes 50%
 width when workflow is empty

---
 app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx
index 6061472180..31f18b4c5b 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx
@@ -296,7 +296,7 @@ export default function TasksPage() {
             aria-label="Choose starting Page"
             className="flex-item workflow-starting-page"
             onChange={handleChangeStartingPage}
-            style={(workflow?.steps?.length < 1) ? { display: 'none' } : undefined}
+            style={(workflow?.steps?.length < 1) ? { visibility: 'hidden' } : undefined}
             value={firstStepKey}
           >
             <option value="">Choose starting page</option>

From b42e07a749b2aa4cde1f67d9e6311468f3176b9f Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Tue, 18 Jun 2024 22:49:48 +0100
Subject: [PATCH 03/14] EditStepDialog design: Done button now has 33% min
 width

---
 css/lab-pages-editor.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
index b8541ac4ac..8e17092d13 100644
--- a/css/lab-pages-editor.styl
+++ b/css/lab-pages-editor.styl
@@ -359,6 +359,7 @@ $fontWeightBoldPlus = 700
 
         &.done
           border: 3px solid $teal
+          min-width: 33%
           padding: $sizeS $sizeXL
         
         &[disabled]

From 2719866f66666edd35a76da28f3c762c2d00c2b1 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Tue, 18 Jun 2024 22:54:27 +0100
Subject: [PATCH 04/14] NewTaskDialog design: center-align new Tasks button

---
 .../components/TasksPage/components/NewTaskDialog.jsx          | 2 +-
 css/lab-pages-editor.styl                                      | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx
index 037b2dbbfe..f488b5adc9 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx
@@ -85,7 +85,7 @@ function NewTaskDialog({
           A task is a unit of work you are asking volunteers to do.
           You can ask them to answer a question or mark an image.
         </p>
-        <div className="flex-row flex-wrap">
+        <div className="flex-row flex-wrap justify-center">
           <button
             aria-label="Add new Text Task"
             className="new-task-button"
diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
index 8e17092d13..88826b2d71 100644
--- a/css/lab-pages-editor.styl
+++ b/css/lab-pages-editor.styl
@@ -162,6 +162,9 @@ $fontWeightBoldPlus = 700
   .justify-around
     justify-content: space-around
   
+  .justify-center
+    justify-content: center
+  
   .position-relative
     position: relative
   

From 4a7bcf89b37ba05e59ae164e3436dff4f8c2d266 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Tue, 18 Jun 2024 22:57:05 +0100
Subject: [PATCH 05/14] Design: replace light teal with darker teal

---
 css/lab-pages-editor.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
index 88826b2d71..0fdb78bbc3 100644
--- a/css/lab-pages-editor.styl
+++ b/css/lab-pages-editor.styl
@@ -5,7 +5,7 @@ $grey4 = #979797
 $grey5 = #E2E5E9
 $grey6 = #EFF2F5
 $black = #000000
-$teal = #00979D
+$teal = #005D69  // Dark teal. Alternate is #00979D
 $darkGreen = #005D69
 $greenBright = #1ED359
 $redBright = #E45950

From ee6243b209245ebd7888eb5df0fce201de450382 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Fri, 21 Jun 2024 17:22:38 +0100
Subject: [PATCH 06/14] Tasks: add functionality to hide/show Help fields. Add
 Collapse/Expand Icons

---
 .../EditStepDialog/EditStepDialog.jsx         |  1 +
 .../EditStepDialog/EditTaskForm.jsx           |  3 ++
 .../EditStepDialog/types/DrawingTask.jsx      |  2 +
 .../EditStepDialog/types/QuestionTask.jsx     |  1 +
 .../EditStepDialog/types/TextTask.jsx         | 49 ++++++++++++++-----
 .../lab-pages-editor/icons/CollapseIcon.jsx   |  5 ++
 .../lab-pages-editor/icons/ExpandIcon.jsx     |  5 ++
 7 files changed, 54 insertions(+), 12 deletions(-)
 create mode 100644 app/pages/lab-pages-editor/icons/CollapseIcon.jsx
 create mode 100644 app/pages/lab-pages-editor/icons/ExpandIcon.jsx

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
index e5cfd4e2e6..39b6075436 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditStepDialog.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditStepDialog.jsx
@@ -87,6 +87,7 @@ function EditStepDialog({
               key={`editTaskForm-${taskKey}`}
               deleteTask={deleteTask}
               enforceLimitedBranchingRule={enforceLimitedBranchingRule}
+              isFirstTaskInStep={index === 0}
               stepHasManyTasks={stepHasManyTasks}
               task={task}
               taskKey={taskKey}
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
index 98f5da2e8b..bdc74afaf2 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditTaskForm.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditTaskForm.jsx
@@ -16,6 +16,7 @@ const taskTypes = {
 function EditTaskForm({  // It's not actually a form, but a fieldset that's part of a form.
   deleteTask,
   enforceLimitedBranchingRule,
+  isFirstTaskInStep = true,
   stepHasManyTasks,
   task,
   taskKey,
@@ -56,6 +57,7 @@ function EditTaskForm({  // It's not actually a form, but a fieldset that's part
         ? <TaskForm
             deleteTask={deleteTask}
             enforceLimitedBranchingRule={enforceLimitedBranchingRule}
+            isFirstTaskInStep={isFirstTaskInStep}
             stepHasManyTasks={stepHasManyTasks}
             task={task}
             taskKey={taskKey}
@@ -72,6 +74,7 @@ EditTaskForm.propTypes = {
   enforceLimitedBranchingRule: PropTypes.shape({
     stepHasBranch: PropTypes.bool
   }),
+  isFirstTaskInStep: PropTypes.bool,
   stepHasManyTasks: PropTypes.bool,
   task: PropTypes.object,
   taskKey: PropTypes.string,
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
index daf4e33994..d912ea8533 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
@@ -51,6 +51,7 @@ const TOOL_TYPE_OPTIONS = [
 
 function DrawingTask({
   deleteTask = DEFAULT_HANDLER,
+  isFirstTaskInStep = true,
   stepHasManyTasks = false,
   task,
   taskKey,
@@ -338,6 +339,7 @@ function DrawingTask({
 
 DrawingTask.propTypes = {
   deleteTask: PropTypes.func,
+  isFirstTaskInStep: PropTypes.bool,
   stepHasManyTasks: PropTypes.bool,
   task: PropTypes.object,
   taskKey: PropTypes.string,
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
index 36d225e41b..6772083056 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
@@ -199,6 +199,7 @@ QuestionTask.propTypes = {
   enforceLimitedBranchingRule: PropTypes.shape({
     stepHasBranch: PropTypes.bool
   }),
+  isFirstTaskInStep: PropTypes.bool,
   stepHasManyTasks: PropTypes.bool,
   task: PropTypes.object,
   taskKey: PropTypes.string,
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
index 4199f4d775..c128c9d7fe 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import CollapseIcon from '../../../../../icons/CollapseIcon.jsx';
 import DeleteIcon from '../../../../../icons/DeleteIcon.jsx';
+import ExpandIcon from '../../../../../icons/ExpandIcon.jsx';
 
 const DEFAULT_HANDLER = () => {};
 
 function TextTask({
   deleteTask = DEFAULT_HANDLER,
+  isFirstTaskInStep = true,
   stepHasManyTasks = false,
   task,
   taskKey,
@@ -15,6 +18,7 @@ function TextTask({
   const [ help, setHelp ] = useState(task?.help || '');
   const [ instruction, setInstruction ] = useState(task?.instruction || '');
   const [ required, setRequired ] = useState(!!task?.required);
+  const [ showHelpField, setShowHelpField ] = useState(isFirstTaskInStep || task?.help?.length > 0);
   const title = stepHasManyTasks ? 'Text Task' : 'Main Text';
   // Update is usually called manually onBlur, after user input is complete.
   function update() {
@@ -31,6 +35,10 @@ function TextTask({
     deleteTask(taskKey);
   }
 
+  function toggleShowHelpField() {
+    setShowHelpField(!showHelpField);
+  }
+
   // For inputs that don't have onBlur, update triggers automagically.
   // (You can't call update() in the onChange() right after setStateValue().)
   // TODO: useEffect() means update() is called on the first render, which is unnecessary. Clean this up.
@@ -81,18 +89,34 @@ function TextTask({
         </span>
       </div>
       <div className="input-row">
-        <label
-          className="big spacing-bottom-S"
-          htmlFor={`task-${taskKey}-help`}
-        >
-          Help Text
-        </label>
-        <textarea
-          id={`task-${taskKey}-help`}
-          value={help}
-          onBlur={update}
-          onChange={(e) => { setHelp(e?.target?.value) }}
-        />
+        <div className="flex-row spacing-bottom-S">
+          <label
+            className="big"
+            htmlFor={`task-${taskKey}-help`}
+          >
+            Help Text
+          </label>
+          <button
+            aria-label={`Show/Hide Help field`}
+            className="plain"
+            onClick={toggleShowHelpField}
+            type="button"
+          >
+            {showHelpField
+              ? <CollapseIcon />
+              : <ExpandIcon />
+            }
+          </button>
+        </div>
+        {showHelpField && (
+          <textarea
+            id={`task-${taskKey}-help`}
+            value={help}
+            onBlur={update}
+            onChange={(e) => { setHelp(e?.target?.value) }}
+          />
+        )}
+        
       </div>
     </div>
   );
@@ -100,6 +124,7 @@ function TextTask({
 
 TextTask.propTypes = {
   deleteTask: PropTypes.func,
+  isFirstTaskInStep: PropTypes.bool,
   stepHasManyTasks: PropTypes.bool,
   task: PropTypes.object,
   taskKey: PropTypes.string,
diff --git a/app/pages/lab-pages-editor/icons/CollapseIcon.jsx b/app/pages/lab-pages-editor/icons/CollapseIcon.jsx
new file mode 100644
index 0000000000..690d3c4c5a
--- /dev/null
+++ b/app/pages/lab-pages-editor/icons/CollapseIcon.jsx
@@ -0,0 +1,5 @@
+export default function CollapseIcon({ alt }) {
+  return (
+    <span className="icon fa fa-caret-up" aria-label={alt} role={!!alt ? 'img' : undefined} />
+  );
+}
diff --git a/app/pages/lab-pages-editor/icons/ExpandIcon.jsx b/app/pages/lab-pages-editor/icons/ExpandIcon.jsx
new file mode 100644
index 0000000000..b30fa81b2e
--- /dev/null
+++ b/app/pages/lab-pages-editor/icons/ExpandIcon.jsx
@@ -0,0 +1,5 @@
+export default function ExpandIcon({ alt }) {
+  return (
+    <span className="icon fa fa-caret-down" aria-label={alt} role={!!alt ? 'img' : undefined} />
+  );
+}

From 4e9762acfda90012e65a6efbd0bc5e04cc164df6 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Fri, 21 Jun 2024 17:28:22 +0100
Subject: [PATCH 07/14] Add collapsible Help field for Drawing and Question
 Tasks

---
 .../EditStepDialog/types/DrawingTask.jsx      | 46 +++++++++++++-----
 .../EditStepDialog/types/QuestionTask.jsx     | 47 ++++++++++++++-----
 .../EditStepDialog/types/TextTask.jsx         |  3 +-
 3 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
index d912ea8533..693dc1fd25 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import CollapseIcon from '../../../../../icons/CollapseIcon.jsx';
 import DeleteIcon from '../../../../../icons/DeleteIcon.jsx';
 import DrawingToolIcon from '../../../../../icons/DrawingToolIcon.jsx';
+import ExpandIcon from '../../../../../icons/ExpandIcon.jsx';
 import MinusIcon from '../../../../../icons/MinusIcon.jsx';
 import PlusIcon from '../../../../../icons/PlusIcon.jsx';
 
@@ -141,6 +143,11 @@ function DrawingTask({
     return false;
   }
 
+  const [ showHelpField, setShowHelpField ] = useState(isFirstTaskInStep || task?.help?.length > 0);
+  function toggleShowHelpField() {
+    setShowHelpField(!showHelpField);
+  }
+
   // For inputs that don't have onBlur, update triggers automagically.
   // (You can't call update() in the onChange() right after setStateValue().)
   // TODO: useEffect() means update() is called on the first render, which is unnecessary. Clean this up.
@@ -320,18 +327,33 @@ function DrawingTask({
         </span>
       </div>
       <div className="input-row">
-        <label
-          className="big spacing-bottom-S"
-          htmlFor={`task-${taskKey}-help`}
-        >
-          Help Text
-        </label>
-        <textarea
-          id={`task-${taskKey}-help`}
-          value={help}
-          onBlur={update}
-          onChange={(e) => { setHelp(e?.target?.value) }}
-        />
+        <div className="flex-row spacing-bottom-S">
+          <label
+            className="big"
+            htmlFor={`task-${taskKey}-help`}
+          >
+            Help Text
+          </label>
+          <button
+            aria-label={`Show/Hide Help field`}
+            className="plain"
+            onClick={toggleShowHelpField}
+            type="button"
+          >
+            {showHelpField
+              ? <CollapseIcon />
+              : <ExpandIcon />
+            }
+          </button>
+        </div>
+        {showHelpField && (
+          <textarea
+            id={`task-${taskKey}-help`}
+            value={help}
+            onBlur={update}
+            onChange={(e) => { setHelp(e?.target?.value) }}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
index 6772083056..5c112f5f77 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import CollapseIcon from '../../../../../icons/CollapseIcon.jsx';
 import DeleteIcon from '../../../../../icons/DeleteIcon.jsx';
+import ExpandIcon from '../../../../../icons/ExpandIcon.jsx';
 import MinusIcon from '../../../../../icons/MinusIcon.jsx';
 import PlusIcon from '../../../../../icons/PlusIcon.jsx';
 
@@ -10,6 +12,7 @@ const DEFAULT_HANDLER = () => {};
 function QuestionTask({
   deleteTask = DEFAULT_HANDLER,
   enforceLimitedBranchingRule,
+  isFirstTaskInStep = true,
   stepHasManyTasks = false,
   task,
   taskKey,
@@ -73,6 +76,11 @@ function QuestionTask({
     return false;
   }
 
+  const [ showHelpField, setShowHelpField ] = useState(isFirstTaskInStep || task?.help?.length > 0);
+  function toggleShowHelpField() {
+    setShowHelpField(!showHelpField);
+  }
+
   // For inputs that don't have onBlur, update triggers automagically.
   // (You can't call update() in the onChange() right after setStateValue().)
   // TODO: useEffect() means update() is called on the first render, which is unnecessary. Clean this up.
@@ -177,18 +185,33 @@ function QuestionTask({
         </ul>
       </div>
       <div className="input-row">
-        <label
-          className="big spacing-bottom-S"
-          htmlFor={`task-${taskKey}-help`}
-        >
-          Help Text
-        </label>
-        <textarea
-          id={`task-${taskKey}-help`}
-          value={help}
-          onBlur={update}
-          onChange={(e) => { setHelp(e?.target?.value) }}
-        />
+        <div className="flex-row spacing-bottom-S">
+          <label
+            className="big"
+            htmlFor={`task-${taskKey}-help`}
+          >
+            Help Text
+          </label>
+          <button
+            aria-label={`Show/Hide Help field`}
+            className="plain"
+            onClick={toggleShowHelpField}
+            type="button"
+          >
+            {showHelpField
+              ? <CollapseIcon />
+              : <ExpandIcon />
+            }
+          </button>
+        </div>
+        {showHelpField && (
+          <textarea
+            id={`task-${taskKey}-help`}
+            value={help}
+            onBlur={update}
+            onChange={(e) => { setHelp(e?.target?.value) }}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
index c128c9d7fe..d64ebf5cef 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
@@ -18,7 +18,6 @@ function TextTask({
   const [ help, setHelp ] = useState(task?.help || '');
   const [ instruction, setInstruction ] = useState(task?.instruction || '');
   const [ required, setRequired ] = useState(!!task?.required);
-  const [ showHelpField, setShowHelpField ] = useState(isFirstTaskInStep || task?.help?.length > 0);
   const title = stepHasManyTasks ? 'Text Task' : 'Main Text';
   // Update is usually called manually onBlur, after user input is complete.
   function update() {
@@ -35,6 +34,7 @@ function TextTask({
     deleteTask(taskKey);
   }
 
+  const [ showHelpField, setShowHelpField ] = useState(isFirstTaskInStep || task?.help?.length > 0);
   function toggleShowHelpField() {
     setShowHelpField(!showHelpField);
   }
@@ -116,7 +116,6 @@ function TextTask({
             onChange={(e) => { setHelp(e?.target?.value) }}
           />
         )}
-        
       </div>
     </div>
   );

From 9fd1672c8aee5ae98cf30496f2f0e411651cd19a Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Fri, 21 Jun 2024 17:53:59 +0100
Subject: [PATCH 08/14] Lab Workflows: set certain projects to use PagesEditor

---
 app/pages/lab/workflows-table.jsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/pages/lab/workflows-table.jsx b/app/pages/lab/workflows-table.jsx
index 8c54cebcc9..b37fb25152 100644
--- a/app/pages/lab/workflows-table.jsx
+++ b/app/pages/lab/workflows-table.jsx
@@ -2,6 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 
+// TEMPORARY HACK: Pages Editor
+// (@shaunanoordin 2024.06.21)
+const TEST_PROJECTS_THAT_SHOULD_USE_PAGES_EDITOR = ['23976'];  // Production IDs.
+// WARNING: doesn't differentiate between production and staging projects
+
 const WorkflowsTable = ({
   handleSetStatsCompletenessType,
   handleWorkflowStatusChange,
@@ -11,6 +16,7 @@ const WorkflowsTable = ({
   project,
   workflows
 }) => {
+  const shouldUsePagesEditor = TEST_PROJECTS_THAT_SHOULD_USE_PAGES_EDITOR.includes(project?.id + '')
   return (
     <table className="standard-table">
       <thead>
@@ -31,10 +37,14 @@ const WorkflowsTable = ({
             statsVisible = !workflow.configuration.stats_hidden;
           }
 
+          const viewWorkflowUrl = shouldUsePagesEditor
+            ? labPath(`/workflows/editor/${workflow.id}`)
+            : labPath(`/workflows/${workflow.id}`);  // Default
+
           return (
             <tr key={workflow.id}>
               <td>
-                <Link key={workflow.id} to={labPath(`/workflows/${workflow.id}`)} activeClassName="active">
+                <Link key={workflow.id} to={viewWorkflowUrl} activeClassName="active">
                   {workflow.display_name}
                   {' '}(#{workflow.id})
                   {(project.configuration && workflow.id === project.configuration.default_workflow) && (

From 4f000d23a2ec35d2c1685207e947a891a59d6a4b Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Mon, 24 Jun 2024 17:47:40 +0100
Subject: [PATCH 09/14] Accessibility: hidden fields now use HTML hidden

---
 .../EditStepDialog/types/DrawingTask.jsx          | 15 +++++++--------
 .../EditStepDialog/types/QuestionTask.jsx         | 15 +++++++--------
 .../components/EditStepDialog/types/TextTask.jsx  | 15 +++++++--------
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
index 693dc1fd25..b79964583d 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
@@ -346,14 +346,13 @@ function DrawingTask({
             }
           </button>
         </div>
-        {showHelpField && (
-          <textarea
-            id={`task-${taskKey}-help`}
-            value={help}
-            onBlur={update}
-            onChange={(e) => { setHelp(e?.target?.value) }}
-          />
-        )}
+        <textarea
+          id={`task-${taskKey}-help`}
+          hidden={!showHelpField}
+          value={help}
+          onBlur={update}
+          onChange={(e) => { setHelp(e?.target?.value) }}
+        />
       </div>
     </div>
   );
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
index 5c112f5f77..94f44b82f9 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
@@ -204,14 +204,13 @@ function QuestionTask({
             }
           </button>
         </div>
-        {showHelpField && (
-          <textarea
-            id={`task-${taskKey}-help`}
-            value={help}
-            onBlur={update}
-            onChange={(e) => { setHelp(e?.target?.value) }}
-          />
-        )}
+        <textarea
+          id={`task-${taskKey}-help`}
+          hidden={!showHelpField}
+          value={help}
+          onBlur={update}
+          onChange={(e) => { setHelp(e?.target?.value) }}
+        />
       </div>
     </div>
   );
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
index d64ebf5cef..ec04cc06ba 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
@@ -108,14 +108,13 @@ function TextTask({
             }
           </button>
         </div>
-        {showHelpField && (
-          <textarea
-            id={`task-${taskKey}-help`}
-            value={help}
-            onBlur={update}
-            onChange={(e) => { setHelp(e?.target?.value) }}
-          />
-        )}
+        <textarea
+          id={`task-${taskKey}-help`}
+          hidden={!showHelpField}
+          value={help}
+          onBlur={update}
+          onChange={(e) => { setHelp(e?.target?.value) }}
+        />
       </div>
     </div>
   );

From 1d6b945a6ed4444cb69d326f4b40baea11569ed1 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaunanoordin@users.noreply.github.com>
Date: Mon, 24 Jun 2024 22:02:49 +0100
Subject: [PATCH 10/14] Accessibility: show/hide Help field button indicates
 change of state

Co-authored-by: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
---
 .../TasksPage/components/EditStepDialog/types/DrawingTask.jsx   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
index b79964583d..b8a0501fa1 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
@@ -336,6 +336,8 @@ function DrawingTask({
           </label>
           <button
             aria-label={`Show/Hide Help field`}
+            aria-controls={`task-${taskKey}-help`}
+            aria-expanded={showHelpField ? 'true' : 'false'}
             className="plain"
             onClick={toggleShowHelpField}
             type="button"

From f72bb8fac1d220a509e4e5206f9719d34959dce9 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaunanoordin@users.noreply.github.com>
Date: Mon, 24 Jun 2024 22:03:02 +0100
Subject: [PATCH 11/14] Accessibility: show/hide Help field button indicates
 change of state

Co-authored-by: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
---
 .../TasksPage/components/EditStepDialog/types/QuestionTask.jsx  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
index 94f44b82f9..d9b2a3fe9a 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
@@ -194,6 +194,8 @@ function QuestionTask({
           </label>
           <button
             aria-label={`Show/Hide Help field`}
+            aria-controls={`task-${taskKey}-help`}
+            aria-expanded={showHelpField ? 'true' : 'false'}
             className="plain"
             onClick={toggleShowHelpField}
             type="button"

From 8d1be63b9cca9b85e87103b2a4b0a8c0fdd56309 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaunanoordin@users.noreply.github.com>
Date: Mon, 24 Jun 2024 22:03:12 +0100
Subject: [PATCH 12/14] Accessibility: show/hide Help field button indicates
 change of state

Co-authored-by: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
---
 .../TasksPage/components/EditStepDialog/types/TextTask.jsx      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
index ec04cc06ba..6fdd622b1c 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
@@ -98,6 +98,8 @@ function TextTask({
           </label>
           <button
             aria-label={`Show/Hide Help field`}
+            aria-controls={`task-${taskKey}-help`}
+            aria-expanded={showHelpField ? 'true' : 'false'}
             className="plain"
             onClick={toggleShowHelpField}
             type="button"

From 1f9d10dfe0cc493ff6397b84e8f477bcd53263b6 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Mon, 24 Jun 2024 22:24:15 +0100
Subject: [PATCH 13/14] Tasks: restyle Help field label

---
 .../components/EditStepDialog/types/DrawingTask.jsx          | 2 +-
 .../components/EditStepDialog/types/QuestionTask.jsx         | 2 +-
 .../TasksPage/components/EditStepDialog/types/TextTask.jsx   | 2 +-
 app/pages/lab-pages-editor/icons/CollapseIcon.jsx            | 2 +-
 app/pages/lab-pages-editor/icons/ExpandIcon.jsx              | 2 +-
 css/lab-pages-editor.styl                                    | 5 +++++
 6 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
index b8a0501fa1..64f4af4968 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
@@ -329,7 +329,7 @@ function DrawingTask({
       <div className="input-row">
         <div className="flex-row spacing-bottom-S">
           <label
-            className="big"
+            className="medium"
             htmlFor={`task-${taskKey}-help`}
           >
             Help Text
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
index d9b2a3fe9a..03f1f6ba4d 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
@@ -187,7 +187,7 @@ function QuestionTask({
       <div className="input-row">
         <div className="flex-row spacing-bottom-S">
           <label
-            className="big"
+            className="medium"
             htmlFor={`task-${taskKey}-help`}
           >
             Help Text
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
index 6fdd622b1c..7b63a18a44 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
@@ -91,7 +91,7 @@ function TextTask({
       <div className="input-row">
         <div className="flex-row spacing-bottom-S">
           <label
-            className="big"
+            className="medium"
             htmlFor={`task-${taskKey}-help`}
           >
             Help Text
diff --git a/app/pages/lab-pages-editor/icons/CollapseIcon.jsx b/app/pages/lab-pages-editor/icons/CollapseIcon.jsx
index 690d3c4c5a..a158433866 100644
--- a/app/pages/lab-pages-editor/icons/CollapseIcon.jsx
+++ b/app/pages/lab-pages-editor/icons/CollapseIcon.jsx
@@ -1,5 +1,5 @@
 export default function CollapseIcon({ alt }) {
   return (
-    <span className="icon fa fa-caret-up" aria-label={alt} role={!!alt ? 'img' : undefined} />
+    <span className="icon fa fa-angle-up" aria-label={alt} role={!!alt ? 'img' : undefined} />
   );
 }
diff --git a/app/pages/lab-pages-editor/icons/ExpandIcon.jsx b/app/pages/lab-pages-editor/icons/ExpandIcon.jsx
index b30fa81b2e..8fcac25ef7 100644
--- a/app/pages/lab-pages-editor/icons/ExpandIcon.jsx
+++ b/app/pages/lab-pages-editor/icons/ExpandIcon.jsx
@@ -1,5 +1,5 @@
 export default function ExpandIcon({ alt }) {
   return (
-    <span className="icon fa fa-caret-down" aria-label={alt} role={!!alt ? 'img' : undefined} />
+    <span className="icon fa fa-angle-down" aria-label={alt} role={!!alt ? 'img' : undefined} />
   );
 }
diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
index 0fdb78bbc3..4e3bf5a8b1 100644
--- a/css/lab-pages-editor.styl
+++ b/css/lab-pages-editor.styl
@@ -429,6 +429,11 @@ $fontWeightBoldPlus = 700
             font-size: $fontSizeL
             text-transform: uppercase
           
+          label.medium
+            display: block
+            font-size: $fontSizeM
+            text-transform: uppercase
+          
           label.narrow, span.narrow
             > *
               vertical-align: middle

From 46db5b5a726f8e8b099bc70074de7e914669a981 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Thu, 27 Jun 2024 15:58:39 +0100
Subject: [PATCH 14/14] Feedback: dynamically alter aria description of
 show/hide help field button

---
 .../TasksPage/components/EditStepDialog/types/DrawingTask.jsx   | 2 +-
 .../TasksPage/components/EditStepDialog/types/QuestionTask.jsx  | 2 +-
 .../TasksPage/components/EditStepDialog/types/TextTask.jsx      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
index 64f4af4968..d1d0c541e7 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
@@ -335,7 +335,7 @@ function DrawingTask({
             Help Text
           </label>
           <button
-            aria-label={`Show/Hide Help field`}
+            aria-label={showHelpField ? 'Hide Help field' : 'Show Help field'}
             aria-controls={`task-${taskKey}-help`}
             aria-expanded={showHelpField ? 'true' : 'false'}
             className="plain"
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
index 03f1f6ba4d..b4ec90564f 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
@@ -193,7 +193,7 @@ function QuestionTask({
             Help Text
           </label>
           <button
-            aria-label={`Show/Hide Help field`}
+            aria-label={showHelpField ? 'Hide Help field' : 'Show Help field'}
             aria-controls={`task-${taskKey}-help`}
             aria-expanded={showHelpField ? 'true' : 'false'}
             className="plain"
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
index 7b63a18a44..a5da523ebb 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
@@ -97,7 +97,7 @@ function TextTask({
             Help Text
           </label>
           <button
-            aria-label={`Show/Hide Help field`}
+            aria-label={showHelpField ? 'Hide Help field' : 'Show Help field'}
             aria-controls={`task-${taskKey}-help`}
             aria-expanded={showHelpField ? 'true' : 'false'}
             className="plain"