Provide additional Requirement details to users in a drawer when selecting a Requirement from the listing

As a user, I want to be able to see additional details regarding a Requirement from the list view, so that I can stay in context and perform simple actions without needing to go to a full detail page.

JTBD

When viewing a list of Requirements for a given project,
I want to be able to view additional details regarding a requirement without navigating away from the list,
So that I can remain in context with what I am doing

When viewing a list of Requirements for a given project,
I want to be able to edit Requirement details without navigating away from the list,
So that I can remain in context with what I am doing and not jump back and forth between list and detail pages

Development Details

When selecting a Requirement row (anywhere within the row except the buttons)...

  • Highlight the row in blue
  • Open a slide out drawer showing a read-only state of the fields (ID, Title & Description)

When viewing a Requirement in the slide out drawer...

  • Show an Edit (pencil) icon/button next to the Title, which when selected would turn the Title & Description fields editable (showing Title input and Description textarea) along with Save and Cancel actions.
  • Show a (x)Close button at the top of the drawer, which when selected dismisses/closes the drawer and removes the blue highlight from the Requirement row
  • On hitting ESC, close the drawer and remove the blue highlight from the Requirement row
  • On selecting a different Requirement listing row, change the content of the drawer to the selected Requirement details

When selecting the Edit (pencil) icon/button next to the Title in the drawer...

  • Turn the Title & Description fields editable (showing Title input and Description textarea) along with Save and Cancel actions
  • On Saving Changes to the Title & Description, show a toast message confirming the action, and change back to the read-only state of the Title & Description in the drawer
  • On Cancel, change back to the read-only state of the Title & Description in the drawer

When selecting the Edit (pencil) icon/button within a Requirement listing row item...

  • Highlight the row in blue
  • Open a slide out drawer showing the edit state of the fields (Title & Description) along with the Save and Cancel actions
Edited by Nick Brandt