Pages Editor: UI tweaks, improved Workflow Settings

[shaunanoordin]

PR Overview

Part of: Pages Editor MVP project and FEM Lab super-project Follows #7088 Staging branch URL: https://pr-7093.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging

This PR combines a number of UI tweaks and updates to the Workflow Settings. The UI changes makes the visual presentation closer to Sean's intended design, while the Workflow Settings changes make that tab ⭐ on par with the Project Builder FEM Lab's functionality. (comparative link)

Part 1: UI changes

• Workflow ID moved to Workflow Settings tab
• Workflow Version added, and also displays a spinner 🕐 to indicate loading/fetching activity
• TasksPage: now displays a "you have no tasks" notice if you have no tasks.

➡️

➡️

Part 2: Workflow Settings Tab

• Subject Retirement rule now locked to Classification Count, with no ability to specify how many to retirement.
• Multi Image Options rules added
  • Enable "Allow Separate Frames View" to show additional options.
• Image Display Options now includes "Allow users to flip color"
• Hidden features:
  • you can now access the Workflow Settings tab directly by adding ?tab=settings to the URL
  • you can now access "removed options" (i.e. workflow options that are valid in the API but removed to keep things in line with Project Builder FEM Lab) by adding ~?tab=settings&showRemovedOptions=true~ ?tab=settings&advanced=true to the URL

Misc Changes

• ❗ DataManager: the data memo is now updated when the ready/fetching/updating status value changes. This wasn't tracked previously!
  • Since I'm updating the data manager, I need to pay extra attention that that changes are being committed to the API properly, and updates from the API are being fetched properly. Reviewer: I'd appreciate eyes on this as well.
• The Experimental/Debug Panel's "Reset" button now also resets workflow.configuration
• Icons added: WrenchIcon, LoadingIcon (spinner)

Update 1 (link)

• ⭐ Workflows are now linear.
• New advanced mode hidden behind ?advanced=true. (Use this to enable manual/non-linear workflows, and the Experimental Panel)
• Fix: classifications count no longer hidden

Testing

No specific tests recommended. Just check that general functionality is maintained, and the code makes sense.

• Open the Test URL
• Make general changes to the workflow on the Tasks tab:
  • If no tasks, "you have no tasks" notification should appear
  • You should be able to add tasks/pages, edit them, etc
• Check the Workflow Settings Tab:
  • You should be able to change workflow-level settings, e.g. change the workflow's name.
  • The amount of workflow-level settings you can change should match the FEM Lab (?femLab=true) version of the Project Builder: https://master.pfe-preview.zooniverse.org/lab/1982/workflows/3711?femLab=true&env=staging
• Reload the page to confirm changes are made.

Status

Ready for review. 👌

Requires 7088 to be merged first before this can be merged.

[shaunanoordin]

PR Update

• ⭐ New behaviour: workflows are now linear.
  • Each (non-branching) page's "next page" will always be the next page in visual order.
  • This matches Sean's initial, more elegant design, so UI has been updated accordingly.
• New hidden option: add ?advanced=true to the URL to...
  • switch from linear workflows to manual workflows (where you need to explicitly spell out the "next page" for each non-branching page.
  • shows Experimental Panel
• Fix: classifications count for "retirement" setting is now no longer hidden.

[coveralls]

coverage: 56.994%. remained the same when pulling 669589a1b29e60f4c1869498a2b8870d31229419 on pages-editor-pt22 into 614ec1b6c3fd2f124a87983cbadca4c2c3bae3f9 on master.

[shaunanoordin]

Thanks Delilah! 👍

Updates & responses:

Item 1: should the ?tab= in the URL change when the tab changes? For the moment, the ?tab=settings is just a hidden shortcut that for developers, but I see this may actually be a useful thing for project owners as well. I'll look into this in a future update

Item 2: when "Separate Frames" options are enabled, the "single column" layout should be the default. Done 👍 The "single column" is now shown to be the default, though the actual multi_image_layout data value isn't updated.

In practice (and following PFE logic) this means that, if multi_image_mode = 'separate', then multi_image_layout = undefined is treated the same as multi_image_layout = 'col'. Shaun TODO: confirm that this logic is consistent across PFELab/FEMLab project builder, Pages Editor, PFE Classifier, and FEM Classifier.

Item 3: the small help text in the "Separate Frames I've cranked up the fontsize, but to 14px instead of 16px for now. 🤔 I think that small help text should be somehow separate from the main text; I'll ask Sean for a designer's look-through after 7105 gets merged.

Item 4: how do workflow versions work in regards to workflow.steps? 🤷 I guess we'll find out! https://github.com/zooniverse/panoptes/issues/4340