[Notification Refresh] Replace the old Comment Detail header with the new Content Preview component

[salimbraksa]

Fixes https://github.com/Automattic/wordpress-mobile/issues/29

Post Preview	Comment Preview	Comment Preview without avatar

Test Instructions

Post Reply Notification

1. Run Jetpack and login
2. Navigate to the Notifications screen
3. Find a Post Reply notification and click it
4. The header should be the same as the design
5. Click on the header, it should keep the original behavior

Comment Reply Notification

1. Run Jetpack and login
2. Navigate to the Notifications screen
3. Find a Comment Reply notification and click it
4. The header should be the same as the design
5. Click on the header, it should keep the original behavior

Regression Notes

1. Potential unintended areas of impact
   The behavior when the header is tapped should be maintained.

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

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

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)

[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	pr23083-e8a5b25
	Version	24.7
	Bundle ID	org.wordpress.alpha
	Commit	e8a5b25
	App Center Build	WPiOS - One-Offs #9713

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	pr23083-e8a5b25
	Version	24.7
	Bundle ID	com.jetpack.alpha
	Commit	e8a5b25
	App Center Build	jetpack-installable-builds #8757

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

[justtwago]

Great job, Salim! 🎸
I tested it on different notifications and found an unusual case. There is a case when a comment is opened by ReaderCommentsViewController on top of CommentDetailViewController. I assume it happens when your original comment was posted to a blog you don't have moderation permissions.
As a result such a notification has the old design:

Screenshots

In addition, I opened a PR when replaced the navigation icons: #23107
Feel free to create a follow up PR with this change if you wish.

[salimbraksa]

There is a case when a comment is opened by ReaderCommentsViewController on top of CommentDetailViewController.

This behavior was developed in the 1st phase where we redirect the user directly to Reader Comments screen if they don't permission to moderate the comment.

Also based on the View Debugger screenshot you shared, the Reader Comments screen is a child of NotificafionCommentDetailViewController, not CommentDetailViewController, which are 2 different view controllers.

As for old header design in the Reader Comments, I intentionally avoided redesigning it because I think it's out of scope of this phase. 🤔

[justtwago]

This behavior was developed in the 1st phase where we redirect the user directly to Reader Comments screen if they don't permission to moderate the comment.

Yeah, totally understand it, but the screen looks like a notification detail and does even have navigation buttons on the toolbar. That's why it looks confusing and not organically within the brand-new design system. 🤔

[justtwago]

The PR looks and works good to me. We can discuss the issue from above asynchronously.