Follow+Notes: Implement Grant Activity card component in Grant Details view

[TylerHendrickson]

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

Blocked by

• 3205

• 3405

• 3399

• 3411

Blocks

• 3407

• 3428

Definition of Done

See Figma designs

When the followNotesEnabled feature flag is true, the "Team Status" component in the Grant Details view is replaced by a new "Grant Activity" component that provides 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
  • The Follower information will conditionally display Followed by {{Follower Name}} and {{Count Other Followers }} others according to the following rules:
    • If there are no followers for the grant, this text should not display
    • If there is exactly 1 follower, only Followed by {{ Follower Name }} should display
    • If the user represented by {{ Follower Name }} is the current user, {{ Follower Name }} should be you, e.g. Followed by you
    • {{ Count Other Followers }} = {{ Paginated Result Count }} - 1
    • If {{ Count Other Followers }} is greater than 0 and less than 50, the and {{Count Other Followers }} others text should display
    • If {{ Count Other Followers }} is greater than or equal to 50, and {{ Count Other Followers }}+ others text should display (note the inclusion of + sign), e.g. and 50+ others
    • The word "others" should be pluralized according to {{ Count Other Followers }}, e.g. and 1 other vs and 2 others
  • The Notes Information will conditionally display {{ Count Notes }} notes
    • If there are no notes for the grant, this text should not display
    • If there are less than 50 notes for the grant, {{ Count Notes }} notes should display
    • If there are 50 or more notes for the grant, {{ Count Notes }}+ notes should display (note the inclusion of the + sign), e.g. 50+ notes
    • The word "notes" should be pluralized based on {{ Count Notes }}, e.g. 1 note vs 2 notes
  • If both Follower Information and Notes Information should be displayed (according to the rules listed above), they will be separated by a bullet point, e.g. Followed by Firstname Lastname and 26 others • 4 notes

Implementation details

• This UI change should only take effect when the followNotesEnabled feature flag is enabled (evaluates to true)
  • See issue for implementation of this feature flag: #3405
  • See documentation for client-side feature flags

• The GET /api/organizations/:organizationId/grants/:grantId/followers route implemented in #3399 supports requests to fetch (paginated) followers of a grant within the same organization as the currently-authenticated user. This endpoint should be requested with query parameters of ?limit=51 so that the response contains a maximum of 51 followers. The response body from this endpoint provides information for displaying the latest follower ({{ Follower Name }}) as well as the total number of followers ({{ Count Followers }}). Consider the following pseudocode as an illustration of how to derive the Follower Information display text:

  const responseData = getJsonForFollowersResponse(grantId);  // Not a real function
  const latestFollow = responseData.followers[0];
  let displayText;
  if (latestFollow) { 
      displayText = `Followed by ${latestFollow.user.id == currentUser.id ? 'you' : latestFollow.user.name}`;
  
      const countOtherFollowers = responseData.followers.length - 1;
      if (countOtherFollowers > 0 && countOtherFollowers < 50) {
          displayText = `${displayText} and ${countOtherFollowers} ${ countOtherFollowers > 1 ? 'others' : 'other' }`;
      } else if (countOtherFollowers >= 50) {
          displayText = `${displayText} and ${countOtherFollowers}+ others`;
      }
  }

• The GET /api/organizations/:organizationId/grants/:grantId/follow route implemented in #3411 supports requests to fetch a record that indicates whether the currently-authenticated user is a follower of a particular grant.
  • When the response status code is 200, it indicates that the current user does follow the grant, and the response body provides data about the follow record.
  • When the response status is 404, it indicates that the current user does not follow the grant.
• The GET /api/organizations/:organizationId/grants/:grantId/notes route implemented in #3205 supports requests to fetch (paginated) notes for a particular grant submitted by users within the same organization as the currently-authenticated user. This endpoint should be requested with query parameters of ?limit=50 so that the response contains a maximum of 50 followers. The response body from this endpoint provides information for displaying the current count of notes ({{ Count Notes }}), capped at 50.

[ClaireValdivia]

@greg-adams seeing a PR for this issue in staging and just want to confirm if I should be expecting that PR to address all aspects of this issue? a couple quick notes of what I'm seeing:

• the card itself looks great! button, help text looking as expected.
• However, I get an error whenever I go to any grant details page, and additional errors when I try clicking the follow button
• are you planning to do a separate PR for the follow button to work as expected and for activities to display?

[greg-adams]

@ClaireValdivia Looks like we just needed to migrate the latest DB push - I smoke tested, and it should be good to test now

[ClaireValdivia]

@greg-adams thanks so much - this is looking so good and I'm not seeing these errors pop up anymore!

a few items I noticed:

• I'm not sure if this will be addressed by #3429, but I was surprised to see that the "Share" section is not displaying anymore, but the "status" section is. I was expecting that all three sections would show before #3429 is implemented to hide the status section (but still show activity & share
• Noting the grant activity box is not aligned vertically, and I can make a separate issue for this if helpful!

[greg-adams]

@ClaireValdivia thanks for taking a look - just some things to note:

• The text above asks that the "Share Grant" component be replaced by this new one. No problem to include all 3 cards, please let me know the correct order vertically.

• The grant activity card has some extra space at the bottom to hold a footer where the forthcoming notes feed section https://github.com/usdigitalresponse/usdr-gost/issues/3428 will go.

[ClaireValdivia]

Ah, that is 100% our bad. sorry about that! - it is the "Status" section that should be replaced. What we expect to see when the feature flag is on is that Grant Activity and Share sections shows (and Status does not), matching the designs here: figma designs