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