Pages Editor: Basic Styling & Simple Workflow Settings Page #6822

shaunanoordin · 2023-09-12T16:08:58Z

PR Overview

Part of: Pages Editor MVP project and FEM Lab super-project
Follows #6795
Staging Example: https://pr-6822.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging
Sean's designs: on Figma

The original intent of this PR is to add some basic styling and the Workflow Settings Page, but I had to scale back some ambition as even this stage had a lot going on.

Styling:

added lab-pages-editor.styl: all our styling goes in here. It's gonna be a megalith.

Components:

added PagesEditor's PagesEditor: the main component has been extracted out of index.jsx
added WorkflowSettingsPage
- 🅰️ this should follow HTML <form> standards
- Changes are saved to Panoptes after click and blur events. (Not on change events)
reworked WorkflowHeader
- not implemented: the Task and Workflow Settings buttons don't switch pages yet.

Other:

Documentation: README updated with information on how we want PagesEditor to be as standalone as possible.
custom icons added: this will make replacing them with Grommet icons or etc in the future much easier.
all text organised into strings.json

Minor stuff:

re-modified router.jsx: OK, fine, lets use the standardised capital "ID" in workflowID
modified main.styl 🍐

🍐 indicates code that sits outside the /lab-pages-editor folder.
🅰️ indicate components that should have accessibility checks/reviews. Please flag any issues noted.

Dev Notes

My initial idea of "just create the Workflow Config Page, it'll be easy!" has run arse-first into the reality that adding Subject Sets to Workflows can be a bit complex. (see Subject Set Linker) Probably linking Tutorials too.

Anyway,

the PagesEditor needs to figure out which project it's editing, which means that variable either needs to be passed down from the parent (is there a parent?) or the DataManager needs a fetchProject() function and share that on the context. HMMM.
but that's for a separate PR.
so for now, the Workflow Settings Page in this PR will be simpler than originally intended: it's everything you see on Sean's design, minus Tutorials and Subject Sets.

Status

WIP

coveralls · 2023-09-12T16:11:34Z

coverage: 57.19%. remained the same when pulling bc5ca19 on pages-editor-pt3 into 52757cd on master.

shaunanoordin · 2023-09-12T16:15:15Z

Note to self: I think form.onSubmit and input.onBlur can both trigger update(). Eventually, when updating the DataManager PR, remember to test this and make sure a queueing and/or debounce function is in place.

shaunanoordin · 2023-09-15T20:58:30Z

PR Update

OK, this is now ready! I've got the basic styles done, and project owners can adjust a few Workflow settings... which ain't much at this stage.

Styles:
- added a baseline for common elements (input controls, accent colours, etc) and common layout settings (flex-row, etc)
- accent colour for everything on this page is teal, hurrah!
- (Note to self: did I overthink the layout classes? Hmm.)
Workflow Settings Page:
- You can now edit Workflow title, subject viewer, and subject retirement.
- Note: you shouldn't be able to edit the subject retirement criteria, but I added it here anyway as a POC.
- Note: also, the list of subject viewers is a bit truncated - i.e. the deprecated options are removed.
- You can't edit anything else yet, but QuickTalk and Classification Tools are set up to show how checkbox & radio inputs look, and to evaluate the HTML for accessibility.
- Also, I filed the Multi-Image Options group under "let's make that its own PR once we sort out how checkboxes & radio inputs should done via the QuickTalk & Classification Tools placeholders"
⚠️ Workflow Header is still a bit wonky, please don't mind it.

Accessibility:

I'd appreciate a pass on making sure the WorkflowSettingsPage form is acceptable.
⚠️ I just realised that the doUpdate function would trigger quite often when tab-navigating, due to onBlur. 🤦 I'll look into this in a separate PR.

Testing Notes

Staging Example: https://pr-6822.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging

As a project owner,

you should be able to view the selected Workflow's title, retirement details, and subject viewer
you should be able to change these values, with the changes being saved to Panoptes on either on a 'blur' event (if a text/number input) or 'change' event (for anything else).
Accessibility: you should be able to navigate the page with tab-navigation
Accessibility/HTML: a screen reader should be able to see sensible details on the page.

Status

Ready for review!

eatyourgreens · 2023-09-15T21:49:56Z

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

+              aria-label="Subject viewer"
+              className="flex-item"
+              data-updaterule="undefined_if_empty"
+              defaultValue={workflow?.configuration?.subject_viewer || ''}


This should default to the viewer that's automatically set for you, but that requires a bunch of code that's buried in @zooniverse/classifier in the monorepo.

eatyourgreens

Looks good to me. The tabs will need to be marked up as tabs at some point.

eatyourgreens · 2023-09-18T12:49:08Z

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

+      <div className="flex-row flex-item justify-around">
+        <button className="unselected" type="button" onClick={onClick}>
+          {strings.PagesEditor.components.WorkflowHeader.tasks}
+        </button>
+        <button className="selected" type="button" onClick={onClick}>
+          {strings.PagesEditor.components.WorkflowHeader.workflow_settings}
+        </button>
+      </div>


These are styled visually as tabs but aren't marked up to use the Tabs pattern.

eatyourgreens · 2023-09-18T12:50:59Z

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

+/* eslint-disable no-console */
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable react/require-default-props */
+/* eslint-disable radix */


I think these can be added to .eslintrc.

…ding

shaunanoordin marked this pull request as ready for review September 15, 2023 20:58

shaunanoordin force-pushed the pages-editor-pt3 branch from 2df7dd7 to 431b947 Compare September 15, 2023 20:58

shaunanoordin requested review from eatyourgreens and a team September 15, 2023 20:58

eatyourgreens self-assigned this Sep 15, 2023

eatyourgreens reviewed Sep 15, 2023

View reviewed changes

eatyourgreens approved these changes Sep 18, 2023

View reviewed changes

shaunanoordin enabled auto-merge (squash) September 18, 2023 14:47

shaunanoordin added 19 commits September 18, 2023 22:50

PagesEditor: rename index.jsx into its own PagesEditor component

3fe897d

PagesEditor: add stylesheet

043b6f7

Lab: add exception for PagesEditor styling

8607970

PagesEditor: update README to include notes on other PFE files affected

3014d9d

PagesEditor: attempt to style workflow header

debc6ed

PagesEditor: minor changes to workflowId and projectId use

3e805fe

WorkflowHeader: minor changes to strings and icons

d1da6c3

WorkflowHeader: add placeholder onClick buttons

fa92dcf

PagesEditor: add WorkflowSettingsPage

972bdaa

PagesEditor: remove Tester

240ed49

PagesEditor: add styles for workflow config page

429ab53

PagesEditor: establish structure for styling constants

8c6b39a

WorkflowSettingsPage: add first column

a3b51c5

WorkflowSettingsPage: add grid layout

99859d6

WorkflowSettingsPage: style hr

fbcb410

WorkflowSettingsPage: fix font sizes

47b1d9a

PagesEditor: refactor layout styles

92063e9

WorkflowSettingsPage: add Subject Retirement Count update functionality

4aca541

WorkflowSettingsPage: minor refactors

e4ac285

shaunanoordin added 8 commits September 18, 2023 22:50

WorkflowSettingsPage: Subject Viewer selection now works

3df724d

PagesEditor: refactor styling sizes

c51c2f1

WorkflowSettingsPage: add styling for .disabled

34de3ff

WorkflowSettingsPage: add tests for checkboxes and radio

43b0291

WorkflowSettingsPage: add align-item styles

a3c3d56

WorkflowSettingsPage: add accent colour to controls

a2d31b7

WorkflowSettingsPage: minor layout width change to compensate for pad…

857f491

…ding

PageEditor: restyle header to match design, add new layout stylings

bc5ca19

shaunanoordin force-pushed the pages-editor-pt3 branch from 431b947 to bc5ca19 Compare September 18, 2023 14:50

shaunanoordin merged commit 34f8fab into master Sep 18, 2023
4 checks passed

shaunanoordin deleted the pages-editor-pt3 branch September 18, 2023 14:53

shaunanoordin mentioned this pull request Sep 19, 2023

Pages Editor: improve Workflow Header with Tabs pattern #6836

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pages Editor: Basic Styling & Simple Workflow Settings Page #6822

Pages Editor: Basic Styling & Simple Workflow Settings Page #6822

shaunanoordin commented Sep 12, 2023 •

edited

Loading

coveralls commented Sep 12, 2023 •

edited

Loading

shaunanoordin commented Sep 12, 2023

shaunanoordin commented Sep 15, 2023

eatyourgreens Sep 15, 2023

eatyourgreens left a comment

eatyourgreens Sep 18, 2023

eatyourgreens Sep 18, 2023

Pages Editor: Basic Styling & Simple Workflow Settings Page #6822

Pages Editor: Basic Styling & Simple Workflow Settings Page #6822

Conversation

shaunanoordin commented Sep 12, 2023 • edited Loading

PR Overview

Dev Notes

Status

coveralls commented Sep 12, 2023 • edited Loading

shaunanoordin commented Sep 12, 2023

shaunanoordin commented Sep 15, 2023

PR Update

Testing Notes

Status

eatyourgreens Sep 15, 2023

Choose a reason for hiding this comment

eatyourgreens left a comment

Choose a reason for hiding this comment

eatyourgreens Sep 18, 2023

Choose a reason for hiding this comment

eatyourgreens Sep 18, 2023

Choose a reason for hiding this comment

shaunanoordin commented Sep 12, 2023 •

edited

Loading

coveralls commented Sep 12, 2023 •

edited

Loading