[STORY]: Update 'Status' to 'Follow + Note' feature

[ekhoffman]

Full User Story

As an organization, we would like to foster more collaboration between our users to allow for the sharing of knowledge and resources to empower them to more efficiently and effectively apply for the grants discovered on our platform.

As a grantseeker, I want to be able to easily share grants I’ve discovered with my team.

As a grantseeker, I want to be able to easily find collaborators who may be able to help me when preparing and applying for grants.

As a grantseeker, I want to be able to quickly see what grants my team members are interested in.

As an admin, I want to be able to easily surface and resolve issues and blockers my team is running into.

Why is this issue important?

We have observed that the 'Status' feature is very underused as it currently stands. We've additionally received feedback from our partners that they believe one of the most valuable uses for our tool would be to aid in building collaborative networks. Our goal in shifting from 'Status' to 'Follow + Note' is to help increase usage and visibility at the individual level to help inspire collaboration.

Action Plan

• Initial design drafted
• Initial acceptance criteria drafted
• High level technical approach & feature flag use determined
• Designs & Acceptance criteria finalized
• Eng task breakout complete
• Assessment of whether partner training & communication actions are needed
• Acceptance criteria testing completed & passed in staging
• Feature flags enabled in production
• Feature flags are removed once the feature is deemed stable

Engineering Tasks

• Follow+Notes: Add grant notes tables to database #3200
• Follow+Notes: Create backend library for grants collaboration management #3201
• Follow+Notes: Add grant followers management to collaboration library #3203
• Follow+Notes: Expose grant notes creation in Finder API #3204
• Follow+Notes: Expose grant notes retrieval in Finder API #3205
• Follow+Notes: Expose ability to follow a grant via Finder API #3206
• Follow+Notes: Expose ability to un-follow a grant via Finder API #3207
• Follow+Notes: Expose ability to retrieve grant followers via Finder API #3399
• Follow+Notes: Expose ability to retrieve current user's follower status for a grant via Finder API #3411
• Follow+Notes: Create client-side feature flag #3405
• Follow+Notes: Implement Grant Activity card component in Grant Details view #3406
• Follow+Notes: Implement Grant Followers modal component #3407
• Follow+Notes: Retrieve note(s) for grant by a specific user via Finder API #3426
• Follow+Notes: Implement note input and note feed on Grant Details view #3428
• Follow+Notes: Conditionally hide the Team Status Section based on feature flag #3429

Acceptance Criteria

Designs

Grant Details Page

1. Remove the current 'Status' section including the drop-down box and 'Submit' button.
2. Add 'Grant Activity' section that includes the following:
   • 'Grant Activity' header.
   • A section description of:
     • Stay up to date with this grant.
     • to the right of the text, an info icon (circle with an "i") will display - on hover, the following text will display within a tool tip: "Follow this grant to receive an email notification when others follow or leave a note." Use the tool tip component from the design library here
   • 'Follow' button
     • The button will have two states, primary and secondary, and appear differently based on the current state.
       • If the User has not yet followed, they will see the primary button state of a blue button with white text.
       • If Primary, button text will be a white circle with a checkmark and the text "Follow".
       • If the User has followed, they will see the secondary button state with a green button with white text.
       • If Secondary, button text will be a white circle with a green checkmark and "Following".
       • The User will be able to click the Secondary version of the button to un-follow the grant. This will return the button to the Primary state.
   • Grant Activity Summary
     • This will display below the Follow button and include both Follower information AND a count of notes. (If both have values, they will be separated by a bullet point.)
     • The Follower information will display the following:
       • "Followed by {{Follower Name}} and {{Count Followers - 1}} others" - the follower name displayed here should be the most recent follower (Note: If there are notes related to the grant, this will be followed by a bullet point and count of notes. If there are no followers we will suppress this link fully.)
       • All of the text will also be a link that will open a modal the Grant Followers modal that allows you to see a full list of followers for the grant.
       • If the count of followers exceeds 50, it will display "Followed by {{Follower Name}} and 50+ others"
       • If the count of notes exceeds 50, it will display "50+ Notes"
3. Grant Followers Modal
   - Modal Design Link
   - The Grant Followers modal will include the following:
   - A header of 'Grant Followers'
   - A list of all followers should display based on how recently they followed the grant, with most recently followed displaying first
   - User Avatar, User Name, User Team Name, User Email Address, date followed (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)
   - To the right of each follower's name will be a "Copy Email" button. Clicking the button will copy the email address for the individual user to clipboard
   - At the bottom of the modal there will be a button that allows users to copy all emails to their clipboard. (This should copy as a comma separated list of emails.)
   - The count of notes will display as: "{{# of Notes total}} Notes" Note: If there are followers on the grant, this will be proceeded by the Follower information above and a bullet point. If there are no notes, this element will not appear at all.
4. Below the Follow button and Grant Activity Summary there will be a Note Input box.
   • This will allow the user to leave a note associated to the grant. It will display 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.
     • When a user enters a note, it will pin to the top of the Notes Feed, become read only, and be highlighted with light blue. Additionally, it will update force the Follow button into its secondary state and the user will be following the grant.
     • An edit button will also be displayed in the bottom right corner.
       - Upon clicking this button, options to Edit or Delete will appear.
       - Clicking edit will show the Note in edit mode again
       - Clicking Delete will remove the note.
5. Below the Note Entry box there will be a Notes Feed.
   • The Notes Feed will display user information and note content for all notes left on the grant. (Note: If the current user has left a note, this will appear pinned to the top of the feed for easier edit access.)
   • By default, display the 3 most recent notes. Below this, we will have a button for 'Show More Notes.'
   • Clicking 'Show More Notes' will expand the Notes Feed and display the full feed of notes.
   • Each note will show: the user's avatar, user name, user's team name (truncated if it reaches the enter of one line), the user's email, full text of the note which will wrap text, and the date the note was posted or edited (whichever is most recent). The date 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
   • The notes will be sorted from most recent by either post or last edited date (whichever is most recent)
   • The user's email will be a link - if you hover, it will be underlined, and if you click it, the toast "Copied" will display and the email will be copied to clipboard
   • If a note is edited, the text "(edited)" will display on the note after the date, and the date will be updated to show the date it was last edited - see design here for example
   • If a user is deleted, we will hard delete their notes - the note will be removed from the grant details page
   • We do not need to store past versions of notes - if we get indicators of frequent "Edit" actions in datadog, we will likely want to start storing, but we will wait to see user behavior here.

My Grants

1. "Interested" will become "Followed by My Team" and should be a filtered list of all grants followed by the user and/or any other user in their team.
2. "Assigned" will become "Shared with My Team." This will continue to display the table of grants shared with the user's team.
3. The current tabs for Not Applying and Applied should be removed
4. The grants table column "Interested Teams" should be renamed "Followed By"
5. Both "Followed by" and "Viewed by" should display the full team name if any user in the user's team has followed the grant (rather than current state of showing abbreviation). Team name text should wrap if needed.
6. If more than one team member follows or views a grant, the team name should only appear once in the respective column
7. If other teams view or follow the grant, all team names where someone follows the grant should display in comma separated list (i.e. US Digital Response, State of Nevada, Department of Education)
8. Export to CSV - the exported file should reflect the renamed column of "Followed By", and the full team name(s) should display in a comma separated list for both Viewed by and Followed by.

Dashboard
Dashboard Design

1. Rename 'Recent Activity' feed to be 'Active Grants in Your Network'. This section should display per the designs without the outline and to cover more width of the page than before
2. Below the title "Active Grants in Your Network" the text "Past 30 days" should display, with "Export to CVS" button to the right
3. A grant should display in the list if in the last 30 days, one or more of the following actions has been taken by one or more users in the organization: Someone has left a note, Someone has edited a note, Someone has followed a grant, Someone has shared the grant
4. Each grant on the list should include: Name of grant (links to grant details page, text wraps as needed to show full name); Current number of followers, Notes, Shares with relevant icon per designs; Date of last action (either leaving note, editing note, followed, or shared) that any user in the org took on the grant (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)
5. If a recent grant has more than 50 followers, "50+ Followers" will display as the count If it has more than 50 notes, "50+ Notes" will display as the count. If more than 50 shares, "50+ Shares" will display as the count.
6. Clicking "Show More Grants" will display a full list of all active grants in the past 30 days
7. A grant will not display more than once
8. The grants will display in order of most recent activity_For now, we will NOT include "export to csv" button on Dashboard - will revisit after we determine a path forward for [STORY]: Follow & Notes Product Analytics #3146 and assess if there is a low lift way to also provide an export of activity to users _

[ClaireValdivia]

Note - one outstanding requirement here on Dashboard for csv export - curious to know about complexity of csv export

[TylerHendrickson]

@ClaireValdivia Clarifying question: on the Grant Details Page views, are we only showing followers and notes to other users in the same organization? Are there any other restrictions (e.g. team) that need to be taken into consideration?

[ClaireValdivia]

@TylerHendrickson You can see followers and notes across the entire organization, no restrictions by Team! You can't see anything from a different organization.

[TylerHendrickson]

@ClaireValdivia / @caitlinwinner – re

• Grant Activity Summary
  - This will display below the Follow button and include both Follower information AND a count of notes. (If both have values, they will be separated by a bullet point.)
  - The Follower information will display the following:
  - "Followed by {{Follower Name}} and {{Count Followers - 1}} others" (Note: If there are notes related to the grant, this will be followed by a bullet point and count of notes. If there are no followers we will suppress this link fully.)

What determines {{ Follower Name }}? Is oldest follower (who is still following), the most recent follower, a random follower, or some other determining factor? From a technical standpoint, any of those implementations should all be about the same LoE (although using the name of the most-recent follower would optimize how results are fetched by the front-end client). From a UX perspective, I'm wondering if the first person to follow a grant would want to be "memorialized" on that grant henceforth (with no way to take their name down other than unfollowing), and potentially the same situation (although more impacted by follower activity) for the last person. Is there a reason to (not) favor consistently showing the same name on a grant?

If no UX preference, I propose that we display the name of the most-recent follower.

[TylerHendrickson]

@ClaireValdivia / @caitlinwinner – re

• The Grant Followers modal will include the following:
  • A header of 'Grant Followers'
  • A list of all followers sorted alphabetically in ascending order by name.

Just seeking confirmation that this is the sort order we want for the modal. The designs also seem to imply that the sort order is based on "most-recently followed first".

[ClaireValdivia]

I don't have a strong opinion here, but Ty's recommendation of most recent follower for the linked text, and displaying the followers in order of most-recently-followed (rather than alphabetical) makes sense to me. @caitlinwinner @Samcbehrens curious for your thoughts!

[samserif23]

I agree that the recency approach seems more helpful than an alphabetical approach.

[TylerHendrickson]

@ClaireValdivia / @caitlinwinner / @samserif23 Thanks for confirming the display order for followers!

Separate request: can someone clarify when the "Leave a note with..." textbox is supposed to display? I'm unclear from the current designs whether it should show up to a the user who is not currently following the grant. And if the textbox does appear for non-followers, does leaving a note automatically make the user a follower?

[ClaireValdivia]

@TylerHendrickson I just updated the issue to reflect the display order.

The "leave a note with" textbox should display for all users who have not submitted a note. Once they submit a note, their not displays at the top instead of the textbox; if they delete their note, it goes back to displaying the text box.