Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pages Editor: organise Steps and Tasks in UI #6898

Merged
merged 10 commits into from
Nov 3, 2023
Merged

Conversation

shaunanoordin
Copy link
Member

@shaunanoordin shaunanoordin commented Oct 28, 2023

PR Overview

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

This PR updates the Tasks Page's UI so that it lists the workflow's Tasks, organised in Steps.

  • Previously, the UI was only listing each Task in the workflow and falsely showing that each Task was in a Step... mostly for demonstration purposes.
  • Code cleanup:
    • StepItem is now in its own file. TaskItem component created. Both are subcomponents of the TasksPage.
  • Additional UI updates.
    • Edit/Delete/Copy Step have been moved from the same visual level of each Task item element, to the same visual level as the Step's "reorder/grab handle" element.
    • Edit/Delete/Copy buttons now have a yellow border and white background

Screenshot: 3-page workflow with 1, 1, and 2 . Behind the scenes, the Steps are labelled ['P0', 'P1', 'S2'] - this is due to the first 2 Question tasks being added via Pages Editor, and the last Transcription Task added via project builder classic.

image

Note: this is a good sign that mixed-editor usage isn't causing any problems. (Yet.)

Testing

Testing has been done with macOS + Chrome. This is primarily a UI update, so ensure that the actual webpage matches the intended design.

Status

Ready for review

@shaunanoordin shaunanoordin requested a review from a team October 28, 2023 00:11
@coveralls
Copy link

coveralls commented Oct 28, 2023

Coverage Status

coverage: 57.079%. remained the same
when pulling 98cd23b on pages-editor-pt7
into f79d1a1 on master.

@eatyourgreens eatyourgreens self-assigned this Oct 28, 2023
@eatyourgreens
Copy link
Contributor

Small visual point. The yellow colour still makes the task keys look like they should be clickable.

@shaunanoordin
Copy link
Member Author

Small visual point. The yellow colour still makes the task keys look like they should be clickable.

Wait, nuts! That's an important point - Sean updated the Task Key visual design and I completely forgot I needed to update that, argh! Thanks for pointing that out, taking care of it now.

Screenshot: Sean's intended design, post-6868.

image

@shaunanoordin
Copy link
Member Author

PR Update

  • fixed Task Key's visual style 👌
image

Comment on lines +1 to +5
/* eslint-disable no-console */
/* eslint-disable react/react-in-jsx-scope */
/* eslint-disable react/require-default-props */
/* eslint-disable radix */
/* eslint-disable react/jsx-boolean-value */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could add these to the ESLint config, rather than add them to every file.

</select>
</div>
<ul className="steps-list" aria-label="Pages/Steps">
{/* WARNING: this should be workflow.steps */}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is workflow.steps now.

@shaunanoordin shaunanoordin enabled auto-merge (squash) November 3, 2023 17:45
@shaunanoordin shaunanoordin merged commit 1d15d25 into master Nov 3, 2023
4 checks passed
@shaunanoordin shaunanoordin deleted the pages-editor-pt7 branch November 3, 2023 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants