[Notifications P2] Commen Moderation

[alpavanoglu]

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

https://github.com/wordpress-mobile/WordPress-iOS/assets/15968946/acb3d1ff-9183-497a-a018-cb8a54bc6b25

Testing Steps

Install & Login to Jetpack App Navigate to Notifications

Every test step will proceed from this point.

Approve Comment

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

Like & Unlike

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

Trash

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

Spam

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

PR submission checklist:

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

Testing checklist:

• [ ] WordPress.com sites and self-hosted Jetpack sites.
• [ ] Portrait and landscape orientations.
• [ ] Light and dark modes.
• [ ] Fonts: Larger, smaller and bold text.
• [ ] High contrast.
• [ ] VoiceOver.
• [ ] Languages with large words or with letters/accents not frequently used in English.
• [ ] Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• [ ] iPhone and iPad.
• [ ] Multi-tasking: Split view and Slide over. (iPad)

[dangermattic]

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

Generated by :no_entry_sign: Danger

[wpmobilebot]

📲 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	85386dd8a130fe5f81aa99d2ca283e3b9d71c938
	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]

📲 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	85386dd8a130fe5f81aa99d2ca283e3b9d71c938
	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]

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:

1. Have a comment in either the Trash or Spam state.
2. Navigate to that notification comment.
3. Change its status to "Approved."
4. Observe that the view height doesn't adjust correctly.
5. Go back to the previous screen.
6. Navigate to the same comment again.
7. 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

[alpavanoglu]

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.

[alpavanoglu]

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.