[Notifications P1] Comment Moderation View

[alpavanoglu]

Refs #https://github.com/Automattic/wordpress-mobile/issues/33

Description

This PR adds a customisable moderation view for all moderation states. This component will be used in the following Comment Moderation Tickets [#https://github.com/Automattic/wordpress-mobile/issues/33, #https://github.com/Automattic/wordpress-mobile/issues/34, #https://github.com/Automattic/wordpress-mobile/issues/35, #https://github.com/Automattic/wordpress-mobile/issues/36]

Testing Steps

Actions are not yet implemented other than causing the state & UI to change. ViewModel is in place to allow further implementation. UI is not attached to the flow so testing is possible via Previews.

Go to CommentModerationView.swift file and enable canvas (comment out didFinishLaunchingWithOptions and willFinishLaunchingWithOptions functions in WordPressAppDelegate and select WordPress as build target instead of Jetpack). Scrolling horizontally will reveal all possible states. Each one is interactive. Verify if the designs match to yWt5gg3nWORhu079Qfv3mS-fi-1118_2402 (the button colors are updated to sync with Design System Component).

Screenshot Reference

The tertiary button is blue instead of Jetpack green due to running WordPress build for Previews. The dyanmic Design System color is used.

Screen.Recording.2024-04-30.at.18.27.02.mov

Regression Notes

1. Potential unintended areas of impact

2. What I did to test those areas of impact (or what existing automated tests I relied on)

3. What automated tests I added (or what prevented me from doing so)

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:

• 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
⚠️	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]

📲 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	pr23127-dca0bf6
	Version	24.8
	Bundle ID	org.wordpress.alpha
	Commit	dca0bf6
	App Center Build	WPiOS - One-Offs #9854

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	pr23127-dca0bf6
	Version	24.8
	Bundle ID	com.jetpack.alpha
	Commit	dca0bf6
	App Center Build	jetpack-installable-builds #8902

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

[salimbraksa]

Hey @alpavanoglu There was a small regression when I pushed this commit fc2c176

Suggested change

	private let insertionAnimationDelay = 0.8
	private var insertionAnimationDelay: TimeInterval {
	return animationDuration * 0.8
	}

[alpavanoglu]

Resolved in: e1b1031

LMK if it is fine now. If so we can merge

[salimbraksa]

LGTM! 🚀