Internal User: View Work Items Within Case

[JessicaMarine]

As a Petitions Clerk, Docket Clerk, and Senior Attorney (all internal users created to date), I need to view all work items within a case, in order to know what work has been done and what outstanding work items remain.

In addition to work items being displayed on work queues (already built), those work items also need to appear in the case detail page, and document detail page, so that ALL internal users can see what is going on within any given case.

Pre-Conditions:

• Internal user is logged into the system
• A work item is associated with a case
• A message thread exists with multiple messages

Acceptance Criteria:

• Only most recent message in work item thread appears in Section work queue
• Only most recent message in work item thread appears in individual work queue
• Only most recent message in work item thread appears in case detail
• Only most recent message in work item thread appears in document detail
• History/thread of work item is viewable
• User must be able to complete and/or forward any work item from the document detail

Notes

Moved to comments section below. (1/8) When user hits send they are returned back to the thing they were looking at previously. Leave as is for now. Most of the time users will likely be looking at their individual queue anyway. No need to spend time trying to force it.

Tasks

• [x] Design the message appearance in the Case Detail (Kristen, Natalie)
• [x] Design the message thread in the document view (Kristen, Natalie)
• [x] Ensure consistency in fonts, table styles, etc by updating CSS (Eric)
• [x] Design how message text display in Work Queues
• [x] Discuss the data entity model regarding Activity item vs Work item entities
• [x] Review the data points based upon the design and revise the entity relationship (if applicable)
• [x] Document test scenarios
• [x] Develop behavior-driven test scenarios
• [x] Modify the Case Detail screen and the Document detail screen (Cody)
• [x] make "complete" button work by updating the completedAt timestamp
  • [x] update views per design to add message input, complete button and cancel button (will)
  • [x] create new sequence to call from view (will)
  • [x] create new action to call from sequence (will)
  • [x] add completedAt to workitem entity (will)
  • [x] update views to filter out completedAt workitems (cody)
• [x] implement hover style over workitem rows (kris)
• [x] implement click event on workitem rows to expand row and include hover style (kris)
• [x] implement "no more messages" when completed with no more messages (will)
• [x] remove success message on complete and send (will)
• [x] review styles in relation to Figma updates (Eric)
• [x] Hide latest of history messages (Cody)
• [x] Create a new message on the work item when work item is assigned to the user (Cody)
• [x] button actions on the workItem need to reset on load of document detail
• [x] add date to the time on the workitem card (same format as date on case detail) (will)
• [x] when uploading files the selected file is not cleared when loading the form (Cody)
• [x] receivied not spelled right on case detail messages section, dateformat in case detail messages should be month/day/year, am/pm should be lowercase (check documentdetail view date might be wrong there) (will)
• [x] forward button on send to for workitem should be labelled Send (will)
• [x] work queue hover styles (revealing button) must work in Internet Explorer 11 (kris)
• [x] add all internalUsers to sendTo dropdown on workitem (will)
• [x] remove items assigned to anyone other than docketclerks or Unassigned from docketclerk queue (cody)
• [x] sort queues by most recently updated workitem (kris)
• [x] return to work queue after send and add a success alert (low priority) (will)

Test Scenarios

• [x] As an internal user, after any party has uploaded a document, I shall be able to view the system generated message on the case details page
• [x] As an internal user, after a message was forwarded to the senior attorney, the message displayed shall be the latest on all of the case detail page, document detail page AND it will appear in the correct individual work queue and section work queue.
• [x] As an internal user, I shall be able to navigate to the document detail page via selecting the document link on the case detail work item
• [x] As an internal user, I shall be able to view a history of a pending message thread on the documents detail page
• [x] As an internal user, I shall be able to complete and add a message to a pending message thread
• [x] As an internal user, after a message thread has been marked as completed, it should no longer appear on the case detail page, document detail page, and correct individual work queue or section work queue. (Cody)

Definition of Done

• [x] acceptance criteria have been met
• [x] all code changes have been reviewed, approved, and merged and deployed to develop
• [x] all automated unit tests are passing on all supported browsers with coverage > 90%
• [x] run the browser stack scripts to verify that application is usable in Chrome, Firefox, Safari, Edge and Internet Explorer
• [x] all automated a11y checks are passing - no new WCAG2.1 or AA contrast issues present
• [x] 0 errors reported in manual a11y testing
• [x] all new functionality verified to work with keyboard and osx voiceover
• [x] all code quality checks are passing - sonar, eslint, html validation, etc.
• [x] code refactored for clarity and to remove any known technical debt
• [x] application can be deployed to multiple regions
• [x] README, other appropriate docs, and swagger/APIs fully updated - all code functions documented with jsdocs
• [x] performance tests successfully completed and no new significant performance issues found
• [x] alerting and monitoring for new functionality in place and successfully exercised
• [x] ui should be touch optimized and responsive (functions on supported mobile devices and optimized for screen sizes as required)
• [x] usability has been validated
• [x] npm audit for CVE’s in production library/module dependencies identified and resolved
• [x] library/module dependencies are up-to-date and are at the latest resolvable version

[klohman]

@dubharmonic @sadlerw @JessicaMarine @uxforgood

Here is the updated Case Detail page design - now with the Pending Messages section. Also added this to the Figma file: https://www.figma.com/file/Z2MXE2BHNyNKK8rILSWkLCAX/USTC-For-devs?node-id=237%3A6

Notes:

• Changed Docket Number in header to a link to the Case Detail page (in this case will link to itself)
• all messages related to any of the case documents should display here
• messages will display oldest to newest
• received date is the date the message was created - date and time
• If there are no pending messages for the case, the section heading remains, with a standard message " No pending messages" below.

[klohman]

@JessicaMarine @uxforgood

Proposed message display on internal work queues (petition, docket, etc.).

On hover, the row will display with blue border.

Each table row should be clickable. On click anywhere in the row EXCEPT the document link, the row will expand to show the message.

On hover state of the expanded row.

Clicking anywhere in the expanded row or message (except the document link) would collapse the row.

[uxforgood]

@dubharmonic @klohman @JessicaMarine

Proposed design for document detail message view.

Each message thread shows the message in a different state for illustration purposes, and what information would appear when the user clicked on that "action item". On page load, all would be in the default state.

• Default when page loads
• After user clicks View History
• After user clicks Complete
• After user clicks Send to

The action items function like three sep toggles - first click is "selected" state, next click is "unselected" state. If ABC is selected and XYZ is then clicked, XYZ would become selected and ABC unselected, as well.

When it's clicked to a selected state, information under it appears.

Scrolling

This story brought up something we hadn't really probed on yet, which is scrolling within this page. Our recommendation for MVP is that:

1. The PDF is a fixed height with a scrolling frame (because some of these will be hundreds of pages and you don't want to scroll down the page to see them).

2. The messages don't have any scrolling frame and are just stacked on top of each other down the page. Since these are only open/pending messages and not completed ones, there shouldn't be too many stacked. The user can scroll down the page to see them as needed. Granted, they may scroll down the page further than where the PDF is displayed but that it's easy for them to scroll back to the PDF if needed. Not ideal, but the simplest solution for MVP in our opinion.

Interaction states for action items

[mariahkannenberg]

Design notes from previous meetings:

• Not addressing Case Locking in this story
• (12/27) Due date is not relevant in pending messages section
• (12/27) More than 10 pending messages would be an edge case. Not developing at this time.
• (12/27) Pending Message Design. Jessica envisions pending due dates would be added to the page, potentially between pending messages and docket record. She's leaning toward table design for pending message.
• (12/27) Oldest message on top for pending messages.
• (12/27) User will click on pending message to get to the document.
• (12/27) No need to show unread count or any other indicator for pending messages at this time. It's not vital to getting the job done and could be a post MVP item if needed.
• (12/27) Jessica likes the calendared/trial/location,etc section on the design with tables.
• (12/27) Petitions clerk may have unique view of doc detail page. (E.g. show metadata)
• (12/27) Would be helpful if user could see an abbreviated view of all documents within the document detail page. So, user can easily navigate to the next document. However, this is not part of MVP, but it's where we want to end up in the future.
• (12/27) History/Complete/Forward - Per Jessica, move Complete to the left of the history IF hitting complete is a final action.
• (12/27) "Docket Number" - Jessica says word "number" is needed. Or we could use "No." or "#" UX prefers to just spell it out.
• (12/27) Keep PDF constant with what they're looking at in messages. Either make message box fixed or move PDF down as they scroll.
• (12/28) Messages section on doc page. In previous design, conflating tab with expansion, which is confusing to the user. Jessica and Tina prefer design with three sections as "expandable"

[uxforgood]

@sadlerw here's the hover state for those tabs

Text and blue bar are #205493

[klohman]

@sadlerw @JessicaMarine @uxforgood

Document Detail page: If there are no pending messages for a document, display text: There are no pending messages associated with this document."

[klohman]

@JessicaMarine @kkoskelin

Updated design for expandable rows in docket queues:

On hover state- when user hovers on a work item row OR when user tabs into a row, a blue vertical bar will display on the left border of the row.

Width: 5px Color: #0071BC

User may click on the blue bar OR anywhere within the row (except for the Document link) to expand the message. The expanded row will change to a blue background (#F1F9FC).

On hover or tab into an expanded row, the blue vertical bar displays. User may click on the blue bar OR anywhere within the row (except for the Document link) to collapse the message.

Notes:

• Once a user expands a message, it remains expanded until they click the row to collapse.
• Multiple rows may be displayed as expanded at one time

[vbey]

Design Decision : Work Queue Navigation

When a user submits a petition, and they have navigated to the petition from the Work Queue, the user will be returned to the tab they had previously been working on in their Work Queue, either My Queue or Section Queue after the petition has been submitted.

If the user navigates to the petition from somewhere other than the Work Queue, after they have submitted the petition they will be taken to the most recently accessed tab in their Work Queue.

This decision was made and mutually agreed upon by design, dev and Jessica during our design review meeting on Jan 8 2019