[Issue]: Follow/Notes updates to Dashboard

[ClaireValdivia]

Why is this issue important?

We want the dashboard to reflect the activity associated with the new follow/notes feature

Current State

The dashboard currently shows Recent Activity and displays a log of recent shared and status updates across the organization.

Expected State

Dashboard design

• 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
• Below the title "Active Grants in Your Network" the text "Past 30 days" should display
• A grant should display in the list if in the last 30 days if 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
• 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)
• 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.
• Up to 5 grants should display as the default. If there are more than 5 grants, a "Load More" button should display. If there are not additional grants from what is displayed, the "Load More" button will not display. Clicking "Load More" will display a full list of all active grants in the past 30 days.
• A grant will not display more than once
• 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

Implementation Plan

Use the followNotesEnabled feature flag - #3405

In packages/server/src/routes/grants.js, define a new GET /recentActivity API route handler as follows:

• Require authentication.

• If a ?cursor query parameter is provided in the request, and that value is a non-null/undefined value (timestamp), the main query should be limited to results where activity date is older than that value.

• If a ?limit query parameter is provided in the request the main query should be limited by this value. If non-null/undefined value is provided and not a valid integer between 1 and 100, respond with 400 Bad Request. A default value of 50 can be used otherwise.

• Performs a query for grant activity for the current users tenant (user.tenant_id) in previous 30 days:

  • Data queries should be created in src/lib/grantsCollaboration module.
  • [STORY]: Grant Activity digest email trigger #3571 (under “Querying for grant activity”) includes thorough discussion/example for collecting note (grant_notes) and follow (grant_followers) activity.
  • getGrantsInterested in src/db contains example query for collecting share activity (grants_interested table).
  • Query should use forward looking lead (limit + 1) to determine if an additional set of records is available. If found, we can ignore the lead and return the cursor for the last record in the response under pagination.next. E.g.
    • a limit of 50 where 80 records exist returns the cursor for record 50.
    • a limit of 50 where 30 records exist returns null

• This should return an object that generally matches the following structure:

  {
    grants: [{
      id: grant.id,
      activityAt: grant.activity_at,
      name: grant.title
      followersCount: 99,
      notesCount: 99,
      sharesCount: 99
    }]
    pagination: {
      next: hasMore ? grants[grants.length - 1].activity_at : null
    }
  }
  

• Create a new component to be used in DashboardView to fetch/display paginated activity.

  • Date formatting can re-use exported formatActivityDate as located in GrantNote.vue, or relocate it to a shared helper file.
  • Default limit for pagination should be set in feature flag module (to allow easy testing). See grantNotesLimit in src/helpers/featureFlags for an example.

Relevant Code Snippets

No response