[Notifications P2] Commen Moderation #23225

alpavanoglu · 2024-05-17T20:38:18Z

Fixes #https://github.com/Automattic/wordpress-mobile/issues/34
Fixes #https://github.com/Automattic/wordpress-mobile/issues/35
Fixes #https://github.com/Automattic/wordpress-mobile/issues/36

Description

This PR connects the moderation actions to Network along with tracks. It also improves the loading state for the buttons.
I moved a bunch of code from CommentDetailViewController to CommentModerationViewModel. We should follow that up with tests to make it nicer since now it is possible. I'll try to do another PR for some tests.

Screen Recording

Simulator.Screen.Recording.-.iPhone.15.-.2024-05-17.at.22.24.30.mp4

Testing Steps

Install & Login to Jetpack App
Navigate to Notifications

Every test step will proceed from this point.

Approve Comment

Select a Pending State notification
Tap on "Approve Comment"
✅ Expect the state to change to "Approved" and moderation UI to update.
Verify Track: 🔵 Tracked: notifications_comment_approved

Like & Unlike

Select an Approved Notification
Tap on "Like" button.
✅ Expect the button to update to a Liked state.
Verify Track: 🔵 Tracked: notifications_comment_liked
✅ Go back and verify if the notification appears liked in the Notifications screen.
✅ Unlike the notification from the list and tap on it again. Verify if the state matches in the Detail screen.

Trash

Tap on the ••• context menu from the detail screen.
Change Status
Select "Trash"
✅ Verify the UI to update and button title should read "Delete Permanently".
✅ Tap on Delete. Expect the comment to be deleted and navigate back to the notifications list.
Verify Track: 🔵 Tracked: comment_trashed
✅ Verify that the notification is not listed there either.

Spam

Tap on the ••• context menu from the detail screen.
Change Status
Select "Spam"
✅ Verify the UI to update and button title should read "Delete Permanently".
✅ Tap on Delete. Expect the comment to be deleted and navigate back to the notifications list.
Verify Track: 🔵 Tracked: comment_trashed
✅ Verify that the notification is not listed there either.

PR submission checklist:

I have completed the Regression Notes.
I have considered adding unit tests for my changes.
I have considered adding accessibility improvements for my changes.
I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Testing checklist:

dangermattic · 2024-05-17T20:38:53Z

	1 Warning
⚠️	This PR is larger than 500 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

wpmobilebot · 2024-05-17T20:47:05Z

📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.

	App Name	WordPress Alpha
	Configuration	Release-Alpha
	Build Number	pr23225-85386dd
	Version	24.8
	Bundle ID	org.wordpress.alpha
	Commit	`85386dd`
	App Center Build	WPiOS - One-Offs #9983

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

wpmobilebot · 2024-05-17T20:47:13Z

📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Alpha
	Configuration	Release-Alpha
	Build Number	pr23225-85386dd
	Version	24.8
	Bundle ID	com.jetpack.alpha
	Commit	`85386dd`
	App Center Build	jetpack-installable-builds #9033

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

salimbraksa · 2024-05-21T12:39:44Z

WordPress/Classes/ViewRelated/Comments/CommentDetailViewController.swift

-
-    private weak var changeStatusViewController: BottomSheetViewController?
+    weak var changeStatusViewController: BottomSheetViewController?
+    private var commentModerationViewModel: CommentModerationViewModel?


Nit: this viewModel can be non-optional by making it lazy:

private lazy var commentModerationViewModel: CommentModerationViewModel = createCommentModerationViewModel()

salimbraksa · 2024-05-21T14:02:23Z

Hey @alpavanoglu,

I've noticed a UI glitch in the moderations view where the hosting view doesn't properly resize when the state changes. While the SwiftUI view itself resizes, the hosting view fails to adjust accordingly. Here's how you can reproduce the issue:

Have a comment in either the Trash or Spam state.
Navigate to that notification comment.
Change its status to "Approved."
Observe that the view height doesn't adjust correctly.
Go back to the previous screen.
Navigate to the same comment again.
Notice that the view height is now correct.

This resizing issue occurs when changing to any state but is most noticeable when switching between "Approved" and "Trash/Spam."

I encountered a similar issue in the past, and it was tricky to adjust the hosting view's height without breaking the animation. I think a simple fix for our case would be to set a fixed height for all states.

Actual	Expected

...ress/Classes/ViewRelated/Notifications/Comment Moderation/CommentModerationOptionsView.swift

WordPress/Classes/ViewRelated/Notifications/Comment Moderation/CommentModerationViewModel.swift

salimbraksa · 2024-05-21T16:03:06Z

WordPress/Classes/ViewRelated/Notifications/Comment Moderation/CommentModerationViewModel.swift

+        isLoading = true
+        coordinator.didSelectOption()
+        commentService.approve(comment, success: { [weak self] in
+            self?.handleStatusChangeSuccess(state: .approved(liked: false))


Same comment as this one

alpavanoglu · 2024-05-22T14:03:16Z

Hey, @salimbraksa
This resizing issue seem to only happen when I directly open a trashed comment and approve it from the menu. But doesn't happen when I open an approved comment, trash it, approve it, trash so on and so forth.
So it does work but something breaks when we first open a trashed state comment. That tells me that we should be able to solve this somehow without assigning fixed heights as they don't work great with dynamic fonts.

justtwago

Tested it and it works cool!
I'm confirming that the resizing issue happens when entering to the notification with ether "Spam" or "Trash" status.
One more minor thing is a clickable comment's author bar between Comment Approved and Like comment sections. It's clickable but is not actionable. Are there any plans for that or we can disable the click animation?

alpavanoglu · 2024-05-23T09:10:25Z

One more minor thing is a clickable comment's author bar between Comment Approved and Like comment sections. It's clickable but is not actionable. Are there any plans for that or we can disable the click animation?

If you mean the reply component, that will be replaced with the new reply component once it is built.

salimbraksa · 2024-05-23T11:57:28Z

WordPress/Classes/ViewRelated/Notifications/Comment Moderation/CommentModerationViewModel.swift

+        if initialIsLiked {
+            track(withEvent: .notificationsCommentLiked) { comment in
+                CommentAnalytics.trackCommentUnLiked(comment: comment)
+            }


⚠️ Based on the previous implementation, the event to trigger here should be notificationsCommentUnliked

justtwago

LG2M! 🚢

salimbraksa

LGTM! 🚀

alpavanoglu added 7 commits May 17, 2024 16:39

Add callback from the view model

63fcfc8

Move viewModel instance to CommenDetailViewController

b56c770

Add like logic

3e4ec3f

Add delete logic

013c64c

Remove obsolete button cells & moderation logic

c782632

Add pop logic to dismiss after deletion

d897c96

Add loading state to buttons

b898d25

alpavanoglu added Notifications [Type] Task labels May 17, 2024

alpavanoglu requested review from salimbraksa and justtwago May 17, 2024 20:38

salimbraksa reviewed May 21, 2024

View reviewed changes

...ress/Classes/ViewRelated/Notifications/Comment Moderation/CommentModerationOptionsView.swift Outdated Show resolved Hide resolved

salimbraksa reviewed May 21, 2024

View reviewed changes

...ress/Classes/ViewRelated/Notifications/Comment Moderation/CommentModerationOptionsView.swift Outdated Show resolved Hide resolved

salimbraksa reviewed May 21, 2024

View reviewed changes

WordPress/Classes/ViewRelated/Notifications/Comment Moderation/CommentModerationViewModel.swift Outdated Show resolved Hide resolved

salimbraksa self-requested a review May 21, 2024 16:01

salimbraksa reviewed May 21, 2024

View reviewed changes

alpavanoglu added 3 commits May 22, 2024 13:20

Revert unnecessary @StateObject change on ViewModel

e1a9a45

Pass in isLiked to approved state

758bd35

Rename didChangeState function as didSelectState

396c2bc

salimbraksa self-requested a review May 22, 2024 11:57

justtwago reviewed May 22, 2024

View reviewed changes

Update commentModerationViewModel as lazy var

ebfed09

salimbraksa reviewed May 23, 2024

View reviewed changes

Fix wrong unLike track event

85386dd

justtwago approved these changes May 23, 2024

View reviewed changes

salimbraksa approved these changes May 24, 2024

View reviewed changes

alpavanoglu merged commit 8704144 into feature/notifications_refresh_p2 May 24, 2024
24 checks passed

alpavanoglu deleted the notifications_comment-moderation-approved branch May 24, 2024 09:52

alpavanoglu mentioned this pull request May 28, 2024

[Notifications P2] Remove obsolete code #23268

Merged

14 tasks

salimbraksa mentioned this pull request May 29, 2024

[Notifications Refresh] Resolve an issue where the comment moderation sheet not resizing properly when comment status changes #23272

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Notifications P2] Commen Moderation #23225

[Notifications P2] Commen Moderation #23225

alpavanoglu commented May 17, 2024

dangermattic commented May 17, 2024

wpmobilebot commented May 17, 2024 •

edited

wpmobilebot commented May 17, 2024 •

edited

salimbraksa May 21, 2024 •

edited

salimbraksa commented May 21, 2024

salimbraksa May 21, 2024

alpavanoglu commented May 22, 2024

justtwago left a comment

alpavanoglu commented May 23, 2024

salimbraksa May 23, 2024 •

edited

alpavanoglu May 23, 2024

justtwago left a comment

salimbraksa left a comment

[Notifications P2] Commen Moderation #23225

[Notifications P2] Commen Moderation #23225

Conversation

alpavanoglu commented May 17, 2024

Description

Screen Recording

Testing Steps

Approve Comment

Like & Unlike

Trash

Spam

dangermattic commented May 17, 2024

wpmobilebot commented May 17, 2024 • edited

wpmobilebot commented May 17, 2024 • edited

salimbraksa May 21, 2024 • edited

Choose a reason for hiding this comment

salimbraksa commented May 21, 2024

salimbraksa May 21, 2024

Choose a reason for hiding this comment

alpavanoglu commented May 22, 2024

justtwago left a comment

Choose a reason for hiding this comment

alpavanoglu commented May 23, 2024

salimbraksa May 23, 2024 • edited

Choose a reason for hiding this comment

alpavanoglu May 23, 2024

Choose a reason for hiding this comment

justtwago left a comment

Choose a reason for hiding this comment

salimbraksa left a comment

Choose a reason for hiding this comment

wpmobilebot commented May 17, 2024 •

edited

wpmobilebot commented May 17, 2024 •

edited

salimbraksa May 21, 2024 •

edited

salimbraksa May 23, 2024 •

edited