Workflow Editor phase 2, part 1: Task Funnel

[shaunanoordin]

PR Overview

Part of: Workflow Editor (aka Pages Editor) project phase 2
Related issue: #7240
Staging branch URL: https://pr-7245.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging

This PR is the first in a series of updates for the Workflow Editor project, phase 2. In this PR specifically, we're updating the UI to match Sean's new designs described in 7240 - a lot of the header elements have been redesigned.

Components:

• <WorkflowHeader> will now be split into multiple smaller components.
• No functional changes expected, only a lot of UI elements being rearranged.

Also:

• CSS classes will also be cleaned up to make the code more readable, and make more sense from an object/component-based POV (instead of a functional POV, so more class="confirm-button" and less class="button green-button flex-item fixed-position")
  • Experiment: we'll be using Stylus mixins to package common behaviour inside CSS classes.
  • ⚠️ This may or may not make the eventual migration to the FEM codebase easier or harder. Who knows! We've already earmarked the CSS/styling as one of the major things that needs to be addressed during migration.

Status

WIP

[coveralls]

coverage: 56.749% (-0.02%) from 56.77%
when pulling ab27a4d on pages-editor-2025-pt1
into 9d723fb on master.

[seanmiller26]

• Workflow title
  I believe this should this be set to H1. Thoughts?

• Task/Workflow Settings tabs
  The unselected tab should have a lighter font weight. Change to #5C5C5C for consistency. Hover state should match the new homepage, stats pages.

• Starting page dropdown
  Removed! As per our last discussion, this isn't necessary anymore due to the new visual design and the decision that Pages should renumber themselves according to their position in the funnel.

• Status/Version
  Adjust margin above and below to 10px. Also, checking in on this UX change from the issue:

UX improvement: increase timing of the loading icon to show for a longer duration after an update.

• Next task arrow
  After linear tasks. As discussed, this element should be included in this PR. (Note, this should only show between tasks, but not at the end of the funnel)

• Add a Task button
  Inspect in Figma for updated coloring and hover/click states. Match Figma font and icon size.

[shaunanoordin]

Thanks for the detailed items, @seanmiller26 !

OK, here's an update as of 44b180a:

• Workflow Title: this is now h1. ✔️
  • This makes sense, the workflow title is the defining text of the page (unless we add something more clunkily descriptive like "page editor: editing (workflow title)") so
  • Side note: I also did a check and turns out the only other headers on the page are the h2s in the left-hand PFE menu. I'm surprised.
• Task/Workflow Settings tabs: updated ✔️
  • To be specific, if a tab is selected, it has: color #404040, border-bottom 4px solid #D47811, font-weight 700 (as per Figma)
  • if a tab isn't selected, it has: color #5c5c5c (as per Github comment + Figma), border-bottom none, font-weight 500 (as per Figma)
  • 🆕 if a tab isn't selected AND is hovered on, it has: color #5c5c5c, border-bottom 4px solid #000000, font-weight 500
• Starting Page: removed ✔️
• Status/Version bit: margin top/bottom set to 10px... sort of. 🤨
  • Here's the technical thing: there's some invisible space above the first task that serves as a "drag-and-drop drop target. I've highlighted the drag-and-drop drop targets as green below, the workflow overview bar (the active/wf version bar) in red.
    
  • The workflow overview bar has margin 10px for the top, margin 0 elsewhere. The drop targets were previously 16px in height, now they're 10px in height.
  • Visually, this is fine. Functionally, there's now an unexpected change where the drag & drop drop targets is a bit smaller than previously. Is this something users will notice? Maybe not, but it's worth highlighting that part of that workflow overview bar's (active / workflow version) margins are affecting functionality outside of its own presentation. 🤷
• ⚠️ UX improvement: increase timing of the loading icon to show for a longer duration after an update. - this has NOT been implemented. ⚠️
  • This may need to be its own side quest. It's worth doing, but the effort needed is bigger than it seems.
  • The problem: the loading icon (component) is tied directly to the state of the workflow (data). The React code is set so that "if workflow is busy, show icon".
  • If we want to show the icon for longer, we need to change that logic to "if workflow is busy OR was busy recently, show icon". The logic of "was busy recently" requires implementing a set of timers in a React + network call context, which requires a fair amount of testing & planning to get right.
  • EDIT: I'll also need to look into CSS animations to see if there's a simpler solution there. UPDATE: still need some timers since the existence/non-existence of that loading icon has a small impact on page content.
• Next Task Arrows: implemented ✔️
  • Hang on, shouldn't these be called next PAGE arrows?
• Add a Task button: implemented ✔️

Did I miss anything? As usual, the preview's up at https://pr-7245.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging

[shaunanoordin]

PR Update

Come to think of it, I'm now confident that this PR is ready for review. Let's go!

What to expect from this PR:

• Design: a lot of page elements have been rearranged and restyled.
  • See Workflow Editor UI updates. Part 1: Task funnel page layout #7240 and this update comment for design specifics.
• Functionality: functionally, the Pages Editor should be mostly the same.
  • Exception: you can no longer set the staring page via a dropdown. The rule is, the first page in the Task funnel is the starting page.
• Code: the CSS code is in the process of being refactored to make it more readable to us.
  • Verbose "functional/atomic CSS class naming" like class="button green-button flex-item fixed-position" has been replaced with more "descriptive CSS class naming" like class="confirm-button"
  • A lot of earlier decisions no longer make sense, e.g. $sizeS = 8px; $sizeSM = 12px; etc fixed sizes don't work when the design is being fine-tuned with a more fluid spectrum of sizes from 8px, 10px, 12px, 14px, etc.

Note that a number of obvious improvements (e.g. page numbers) are queued for a separate PR, and that will follow issue #7241

Testing

For @seanmiller26: keep on reviewin' the way you've been reviewin' 👍

For devs:

• View the staging workflow: https://pr-7245.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging
  • This is safe to edit, as long as nobody else is testing the same time as you.
• There should be no major functional changes.
  • On the Tasks page, you should be able to
    • (1) create Tasks,
    • (2) edit Pages,
    • (3) edit Tasks,
    • (4) rearrange Pages,
    • (5) delete Pages, and
    • (6) delete Tasks, as per usual.
    • NOTE: minor functional change - you can no longer set the starting page via the dropdown, since that has been removed.
  • On the Workflow Settings page, you should be able to change any setting, e.g. workflow title.
  • General sanity checks:
    • the Pages Editor should present to you, the user, all the information on the workflow that you'd want to know.
    • accessibility shouldn't be worse than prior to this PR.
• To view advanced options: https://pr-7245.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging&advanced=1 (useful for resetting the workflow or quickly creating a standard test workflow)

Status

Ready for review

[shaunanoordin]

Derp, minor note: I only JUST pushed commit ab27a4d which added the Workflow Tab hover code. That was sitting on my local dev for the past day. 🤦