Redesign Layout of Submissions Page

vilagshe commented 1 year ago

Problem/Why

The current Submissions page does not show enough information for a submitter to be able to get information about each of their submissions without clicking into each one individually. There is also a lack of representation of recent activity on the Submissions page.

Goal/What

Implement an updated design for the Submissions page that displays the following information about submissions:

ID Number
Title
Publication
Status

There should also be a section to represent the latest comment activity on submissions that the authenticated user is associated with, including both inline and overall comments, ordered chronologically. These comments should show the following information:

Submission Title
Commenter Display Label (Username or Name)
Timestamp
Comment Body Snippet/Preview
Style Criteria (for inline comments)

Solution/How

Use the SubmissionTable component to present submission information as a table. Add a New Comments section to display the latest inline and overall comments. Extend the GraphQL endpoint as necessary to support a query for the latest 4 comments that combines both inline and overall comments. Create a new Vue component for to render comment data as comment previews.

To Do / Acceptance Criteria

[x] Implement the SubmissionTable component on the Submissions page
[x] Extend the Submissions page with a "New Comments" section
[x] Extend the GraphQL endpoint for querying the latest inline and overall comments
[x] Create a component for comment previews
[x] Add Jest testing to assert that the amount of expected comment previews appear
[x] Make "View Comment" buttons functional
[x] Update Cypress testing for the new layout

Review Checklist

[ ] Submissions are displayed in a table
[ ] Latest comments can be viewed on the submissions page

Accessibility Checklist

[ ] Comment previews can be interacted with solely via keyboard
[ ] Comment previews can be parsed by screen readers
[ ] axe DevTools detects no additional a11y violations introduced
[ ] Any added copy uses plain language

sattler9 commented 1 year ago

Hey team! Please add your planning poker estimate with Zenhub @gmeben @stephanievaskomsu @vilagshe @wreality

gmeben commented 1 year ago

I forgot about having to make "View Comment" buttons of comment previews functional according to what we've agreed upon as a team and what's implied by the design. Also, there was an unexpected but entirely reasonable disruption caused by the redesign to the existing Cypress testing that will need to be rectified.

gmeben commented 1 year ago

The "View Comment" buttons have been temporarily made into "Go To Review" buttons until the functionality that will be defined in a separate issue is completed.

gmeben commented 1 year ago

I defined that issue here: https://app.zenhub.com/workspaces/pilcrow-development-5ff39ba363391e0019713c87/issues/gh/mesh-research/pilcrow/1812

MESH-Research / Pilcrow