Migrate project activity to LFNext

[longrunningprocess]

Description

This PR seeks to migrate the project activity capability to LFNext. While at it, discussion arose about a "Project landing page". That is also included in this work. Refer to #1394 for further discussion

Fixes #1393

Type of Change

Only keep lines below that describe this change, then delete the rest.

• New feature (non-breaking change which adds functionality)
• UI change

Screenshots

This video runs through the look of it, mobile views and all of the links back into this page.

Screen.Recording.2022-06-02.at.3.17.04.PM.mov

forgot to include some of the h-scroll behavior of the activity table on mobile, that demo is here:

Screen.Recording.2022-06-02.at.3.37.44.PM.mov

Testing on your branch

• Start a new project without any activity and ensure the activity table reflects that.
• With your new project, add a word and some activity to ensure the most recent data shows up on the activity table.
• Pick a project with known activity and ensure only the last 30 days is initially shown
• When viewing a project with activity, ensure the data is sorted by date, then by user within the same date
• When viewing a project with activity, ensure clicking "show all" retrieves all activity
• Ensure the project link under the "My Projects" dropdown in the header takes you to the correct project landing page
• Ensure while on the project landing page, when you click "work on this project" you are taken to the editor view for the correct project
• Ensure the project links from under the "My Projects" page (/app/projects) takes you to the correct project landing page
• Ensure the project link in the breadcrumb takes you to the correct project landing page
• Ensure you cannot see the activity for a project when you are not logged in
• Ensure you cannot see the activity for a project you are not allowed to view
• Create a link for sharing the project and ensure when the link is used it redirects to the correct project's landing page
• Create a project via upload and check the activity pages for it

Checklist

• I have performed a self-review of my own code
• I have reviewed the title/description of this PR which will be used as the squashed PR commit message
• I have commented my code, particularly in hard-to-understand areas
• I have added tests that prove my fix is effective or that my feature works

qa.languageforge.org testing

Reviewers: add/replace your name below and check the box to sign-off/attest the feature works as expected on qa.languageforge.org

• Joseph (2022-09-23 15:30)
• Reviewer2 (YYYY-MM-DD HH:MM)

[github-actions]

Unit Test Results

368 tests   368 ✔️  12s ⏱️
    1 suites      0 💤
    1 files        0 ❌

Results for commit 12914e4.

♻️ This comment has been updated with latest results.

[rmunn]

Just built this branch locally and ran it, and it didn't find activity from 5 months ago on one of my test projects. Here's what happens when I clicked the "Activity Feed" button on one entry from my test-rmunn-05 project:

Note the date: January 3, 2022, quite a bit more than 30 days ago. If I understand the "When viewing a project with activity, ensure clicking "show all" retrieves all activity" bullet point correctly, that should have produced a "See all" button, but it wasn't visible:

(I trimmed that screenshot horizontally so as to fit into the GitHub comments UI, but there were no buttons other than the "Work on this project" button).

@longrunningprocess, I'll send you the raw Mongo data for this project if you want to use it for testing.

[rmunn]

Haven't yet looked closely at the Svelte / Svelte-Kit stuff — that's next — but I have some comments on the rest of the code. For the Svelte-Kit stuff, I plan to look at the code in context inside VS Code rather than reading only the changes in the GitHub review UI, as I think I'll understand it better that way and therefore be able to review this more fully. But there's no reason to make you wait for my initial reactions.

[longrunningprocess]

Just built this branch locally and ran it, and it didn't find activity from 5 months ago on one of my test projects. Here's what happens when I clicked the "Activity Feed" button on one entry from my test-rmunn-05 project:

Note the date: January 3, 2022, quite a bit more than 30 days ago. If I understand the "When viewing a project with activity, ensure clicking "show all" retrieves all activity" bullet point correctly, that should have produced a "See all" button, but it wasn't visible:

(I trimmed that screenshot horizontally so as to fit into the GitHub comments UI, but there were no buttons other than the "Work on this project" button).

@longrunningprocess, I'll send you the raw Mongo data for this project if you want to use it for testing.

yes, that is a great find, I did not think that condition through properly. I'll put in a fix for it.

[josephmyers]

After starting in on the review, I pretty quickly realized I wasn't going to be able to contribute much on the code side. But in testing, I have a couple comments about the UI (since that's what I'm good at), and you can feel free to disregard them or split them out as out-of-scope:

• What's the recommended way to reach the Activity page? In my usage, given navigation tree "My Projects / Project / Edit", I wanted "Project" to take me to some sort of home page or Activity page, not the page I was already on.
• At what point do the entries cut off and make the Show All button useful? I made ~50 entries and was still able to see all w/o clicking the button
• Additionally, (you've probably thought of this) but I'm sure the list of entries will become quite overwhelming. is there some intermediate stage between showing some and showing all, e.g. pages?
• Would it be helpful to linkify the entries/users?
• It's weird to me that the Activity page uses a different, non-interactive "logo" for Language Forge at the top-left. is this part WIP?
• General design: what do you think about altering slightly the look of the clickable/interactive items to indicate to the user they're different from simple text? as someone unfamiliar with the program, i found myself clicking around a lot on random things. this is especially important on pointer-less mobile platforms

[longrunningprocess]

After starting in on the review, I pretty quickly realized I wasn't going to be able to contribute much on the code side. But in testing, I have a couple comments about the UI (since that's what I'm good at), and you can feel free to disregard them or split them out as out-of-scope:

Excellent, thank you!

• What's the recommended way to reach the Activity page? In my usage, given navigation tree "My Projects / Project / Edit", I wanted "Project" to take me to some sort of home page or Activity page, not the page I was already on.

via the breadcrumbs (the project name link in "My Projects / / Edit" will take you to the project "landing" page which includes the activity...the hope is that page will evolve to include dashboard type info about the project)... it occurs to me as I'm writing this that maybe you tested this in staging already where the old code is still running... the code in this branch won't be in staging until the PR is approved. I initially thought maybe you were testing this locally).

• At what point do the entries cut off and make the Show All button useful? I made ~50 entries and was still able to see all w/o clicking the button
• Additionally, (you've probably thought of this) but I'm sure the list of entries will become quite overwhelming. is there some intermediate stage between showing some and showing all, e.g. pages?

The default activity is for the last 30 days... there is no intelligence to this for now, e.g., give me the last 30 days but no more than 20 rows of activity. That would be nice if it's an issue for projects, I'm not sure what to expect from users yet since I'm not aware of this activity even being used very much today. UPDATE @josephmyers 30 days/max 50 rows implemented in 23118a0

• Would it be helpful to linkify the entries/users?

Possibly at a future date. I think I'm inclined to get the first pass of this page in front of users to start getting some of their feedback before we begin building links away. Right now the basic use case is to start on the project landing page -> begin working on it. I'd like to keep talking about other use cases though, thanks for thinking about that.

• It's weird to me that the Activity page uses a different, non-interactive "logo" for Language Forge at the top-left. is this part WIP?

I find the interactivity of that link a little strange as it is in the legacy app, i.e., when I click it I would expect to go to the home page but it actually puts me in the editor... 🤷🏻 I'd like to talk about it more though. The simpler approach to me is just to leave it as informative/orienting rather than functional. Functional things, like linking away, are currently found in the right-hand menu.

• General design: what do you think about altering slightly the look of the clickable/interactive items to indicate to the user they're different from simple text? as someone unfamiliar with the program, I found myself clicking around a lot on random things. this is especially important on pointer-less mobile platforms

I hear that, let's discuss the design system around those more. I'm going with the defaults at this point but things like that can be changed at an app-wide level: https://daisyui.com/components/link and/or https://daisyui.com/components/button

[rmunn]

Was able to get back to testing this again, and here are a few other issues that I found:

• Date column isn't sorted (one 2020 item appeared at the top, above the 2022 items). Apparently we don't have a sort order in the Mongo query, and instead do the sorting afterwards in the sortActivity method of ActivityListDto.php. That method has been removed in the current version of the PR, and should probably be put back, along with the uasort calls that reference it.
• Two activity types (add_lex_reply and add_lex_comment) don't have a human-readable version yet, so the programmatic IDs leaked through into the UI.

Thanks for all your work so far, and sorry that I took nearly three weeks to look at this again!

[rmunn]

@longrunningprocess See #1430 for a few fixes for some TypeScript errors. There were just enough changes that I didn't really want to put this as a code suggestion in GitHub as that would have involved a bunch of files. I created it as a PR onto your branch, rather than just pushing a commit onto your branch, since I know you rebase often and I didn't want to mess up your rebase workflow by having a commit of mine on your branch that you weren't expecting.

[longrunningprocess]

• Two activity types (add_lex_reply and add_lex_comment) don't have a human-readable version yet, so the programmatic IDs leaked through into the UI.

thank you, I corrected these in 62f498c. My plan was to simply update those as they appear since I can't really tell which of them in src/Api/Model/Shared/ActivityModel.php are actually used still or relevant.

[longrunningprocess]

• Date column isn't sorted (one 2020 item appeared at the top, above the 2022 items). Apparently we don't have a sort order in the Mongo query, and instead do the sorting afterwards in the sortActivity method of ActivityListDto.php. That method has been removed in the current version of the PR, and should probably be put back, along with the uasort calls that reference it.

I'd like to discuss this more. I'm actually doing the sorting client side (https://github.com/sillsdev/web-languageforge/blob/next/project-activity/next-app/src/routes/projects/%5Bproject_code%5D/_components/Activity.svelte#L29) and I thought using epoch was a safe approach, maybe not... I thought I looked into the multi-level sort in mongo and didn't go with it for some reason I can't remember at this point.

[rmunn]

I'm actually doing the sorting client side (https://github.com/sillsdev/web-languageforge/blob/next/project-activity/next-app/src/routes/projects/%5Bproject_code%5D/_components/Activity.svelte#L29) and I thought using epoch was a safe approach, maybe not... I thought I looked into the multi-level sort in mongo and didn't go with it for some reason I can't remember at this point.

Figured it out during our standup meeting: it's sorting by the locale date string, meaning that the string "6/27/2020" was sorting as "larger" than the string "3/1/2022" because 6 > 3. I agree with the idea of sorting by date first, then user, then time, but we should make sure the date being sorted on is a Javascript date and not a locale-formatted date string. (Unless the locale is YYYY-MM-DD, which would have sorted correctly :-) ).

[megahirt]

Per our discussion standup, some meta project information that we can add to the project dashboard are:

• Number of Users (this may require adding to the back end)
• Number of Entries (PHP backend - lex_dbeDtoFull)
• Number of unresolved comments (PHP backend - lex_dbeDtoFull)
• Number of entries with pictures (derived. Example client filter JS code editor-data.service.ts L516)
• Number of entries with audio

[longrunningprocess]

Figured it out during our standup meeting: it's sorting by the locale date string, meaning that the string "6/27/2020" was sorting as "larger" than the string "3/1/2022" because 6 > 3. I agree with the idea of sorting by date first, then user, then time, but we should make sure the date being sorted on is a Javascript date and not a locale-formatted date string. (Unless the locale is YYYY-MM-DD, which would have sorted correctly :-) ).

I believe I've addressed this in 1f34a60...04d9b23, please let me know what you think @rmunn .

[megahirt]

This is an incomplete code-review. I've read through about half of it and made some comments. I've run out of time after the kids are in bed...so will pick this up again tomorrow. Great job so far @longrunningprocess !

[megahirt]

I have finished going through the code...Now I just need to run it up on my machine :)

[josephmyers]

I forgot to actually approve this after we talked in July. From the UI side of things, this is good to go

[megahirt]

Good to go @longrunningprocess !

We should check on package-lock.json after this merges to see if we need to re-create it. I don't have full confidence in git merge to just assume it will be fine.

[longrunningprocess]

Good to go @longrunningprocess !

We should check on package-lock.json after this merges to see if we need to re-create it. I don't have full confidence in git merge to just assume it will be fine.

I've merged it and all tests seem to be good, maybe once we test it a bit in staging we can have confidence in git's merge?