Follow+Notes: Implement note input and note feed on Grant Details view

[TylerHendrickson]

Subtask of [STORY]: Update 'Status' to 'Follow + Note' feature #2960

Blocked by

• 3204

• 3205

• 3426

• 3406

Blocks

N/A

Definition of Done

See Figma Designs

• Develop a new reusable GrantNote component, which displays as the following:
  • User's avatar, name, team name (truncated to fit) on the first line
  • User's email on the second line, as a hyperlink-style "Copy Button" component which copies the email address to the clipboard when clicked
  • Date of the note (this will show "Today", "[#] days ago" up to seven days, and more than seven days will show the date followed in the format "[Month] [Date]", i.e. May 4)
  • "Edit" link, which conditionally displays on the same line as the date (e.g. toggled via a boolean editable slot)
• On the Grant Details view, update the Grant Activity card to include the following:
  • Note Input, which displays as the following
  • The current user's icon.
  • A text entry box with the following example text 'Leave a note with tips or barriers to applying...' followed by a send icon.
  • Below the text entry box, the following description text: 'e.g. need co-applicants, we applied last year'
  • To the right of the description text, a character count will display - when nothing has been entered, it will show "0/300" - as the user types in the note box, the count will reflect the current characters (i.e. "50/300"). When the character count hits 300, the counter will show in red text as "300/300", and the user will not be able to enter any additional characters.
  • As the user types, the note box will expand to show the full note
  • Clicking return will also submit the note. Upon successful submission, the Note Input is replaced with a corresponding Pinned Note
  • Displays in the following cases:
    • When the current user has not previously submitted a note for the grant being viewed
    • When the current user clicks the "Edit" button on the Pinned Note, in which case the Pinned Note is replaced with Note Input, and the Note Input text entry box is prefilled with the text of the Pinned Note (see below)
  • Pinned Note
  • An occurrence of the GrantNote component, which displays an "Edit" link.
  • Displays only when the current user has previously submitted a note for the grant being viewed
  • When the "Edit" link is clicked, is replaced by Note Input (see above)
  • Notes feed
  • Zero or more occurrences of the GrantNote component, none of which display an "Edit" link
  • Only includes notes where the ID does not match that of the Pinned Note (i.e. users may only have one note for a grant at any given time, and note associated with the current user appears as the Pinned Note and is excluded from the feed)
  • Following the last note in the feed, provides a "Show More Notes" button which initiates a request for the next page of notes associated with the current grant. If the request for the next page of notes provides an empty page, the "Show More Notes" button should be hidden until the page is reloaded.

Implementation details

• As with the rest of the content in the Grant Activity card, everything implemented by this ticket should only display when the followNotesEnabled feature flag is true.
• API responses that retrieve notes and their associated data currently do not provide user's email addresses or preferred avatar colors, both of which are required to properly represent users in the notes feed. To include this data in API responses, make the following modifications to the getCurrentNoteRevisions() function defined in packages/server/src/lib/grantsCollaboration/notes.js:
  • Add users.avatar_color as user_avatar_color to the main database query's SELECT statement.
  • (Note: the query's SELECT statement already includes users.email as user_email.)
  • Update the function's return value so that the user_avatar_color value of each row in the query result set is mapped to notes[].user.avatar_color in the returned object.
  • Update the function's return value so that the user_email value of each row in the query result set is mapped to notes[].user.email in the returned object.
• Use the User Avatar component to display avatars in the GrantNote component.
• Use the Copy Button component to display emails in the GrantNote component, so that email addresses are copied to clipboard when clicked.
• To check for and fetch a note for the grant that was previously submitted by the current user, make a request to the GET /api/organizations/:organizationId/grants/:grantId/notes/:userId endpoint implemented in #3426, providing a query parameter of limit=1.
  • If the response data provides a non-empty notes array, this will be the note that was last submitted by the identified user for the identified grant.
  • If the response data provides an empty notes array, then the identified user has not yet submitted a note for the identified grant.
• The GET /api/organizations/:organizationId/grants/:grantId route implemented in #3205 supports requests to fetch (paginated) followers of a grant within the same organization as the currently-authenticated user.
  • This endpoint should provide all data necessary to populate the notes feed.
  • On initial page load, this endpoint should be requested with a query parameter of limit=3.
  • Subsequent requests that are initiated when the user clicks the "Show More Notes" button should provide query parameters of limit=10 and paginateFrom={{ fromId }}, where {{ fromId }} is the .paginate.from value provided by the response data in the previous request to this endpoint.
• When the Note Input text is submitted, make an API request to the PUT /api/organizations/:organizationId/grants/:grantId/notes/revision endpoint (implemented in #3204) to save the note.
  • If this request results in an error response, display the error to the user and do not toggle the Note Input to Pinned Note.
  • If this request is successful, hide the Note Input and replace it with Pinned Note, which should now reflect the submitted note's content.

[TylerHendrickson]

@greg-adams Just calling out this addition that I just made to this ticket's implementation notes, per https://github.com/usdigitalresponse/usdr-gost/issues/3407#issuecomment-2364259301:

• API responses that retrieve notes and their associated data currently do not provide user's email addresses or preferred avatar colors, both of which are required to properly represent users in the notes feed. To include this data in API responses, make the following modifications to the getCurrentNoteRevisions() function defined in packages/server/src/lib/grantsCollaboration/notes.js:
  • Add users.avatar_color as user_avatar_color to the main database query's SELECT statement.
  • (Note: the query's SELECT statement already includes users.email as user_email.)
  • Update the function's return value so that the user_avatar_color value of each row in the query result set is mapped to notes[].user.avatar_color in the returned object.
  • Update the function's return value so that the user_email value of each row in the query result set is mapped to notes[].user.email in the returned object.

Note that we also need user_email mapped here, in addition to the inclusion of user_avatar_color.

[ClaireValdivia]

So far this is looking really great! per slack discussion, designs are being updated to clarify how delete note should work - I will create a new ticket once that is clarified!

[ClaireValdivia]

closing this out as there are no outstanding functionality issues. If we find any bugs or adjustment needed in future bug bashing for this feature, we will open up new issues!