Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Conversation

salimbraksa
Copy link
Contributor

@salimbraksa salimbraksa commented May 29, 2024

Fixes #23225 (comment)

Description

This PR resolves an issue where the moderation view doesn't resize properly when the comment status changes.

Before  After
CleanShot.2024-05-29.at.13.10.58.mp4

Test Instructions

  1. Setup a comment in either the Trash or Spam state.
  2. Navigate to that notification comment.
  3. Change its status to Approved.
  4. Verify the moderation view height looks good and not squashed
  5. Go back to the previous screen.
  6. Navigate to the same comment again.
  7. Verify the moderation view height is the same as before

Regression Notes

  1. Potential unintended areas of impact
    Smoke test the comment moderation screen:
  • Verify the content preview at the top works as expected
  • Post a long comment and verify scrolling works
  • Tap the comment menu button
  1. What I did to test those areas of impact (or what existing automated tests I relied on)
    Manual testing

  2. 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)

@salimbraksa salimbraksa self-assigned this May 29, 2024
@salimbraksa salimbraksa changed the base branch from trunk to feature/notifications_refresh_p2 May 29, 2024 11:53
@wpmobilebot
Copy link
Contributor

wpmobilebot commented May 29, 2024

WordPress Alpha📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.
App NameWordPress Alpha WordPress Alpha
ConfigurationRelease-Alpha
Build Numberpr23272-304dfc9
Version24.8
Bundle IDorg.wordpress.alpha
Commit304dfc9
App Center BuildWPiOS - One-Offs #10056
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@wpmobilebot
Copy link
Contributor

wpmobilebot commented May 29, 2024

Jetpack Alpha📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
App NameJetpack Alpha Jetpack Alpha
ConfigurationRelease-Alpha
Build Numberpr23272-304dfc9
Version24.8
Bundle IDcom.jetpack.alpha
Commit304dfc9
App Center Buildjetpack-installable-builds #9105
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@salimbraksa salimbraksa marked this pull request as ready for review May 29, 2024 15:24
import UIKit
import SwiftUI

final class CommentModerationSheetHostingView: UIView {
Copy link
Contributor Author

@salimbraksa salimbraksa May 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the view that fixes this bug.

For context, the bug was occurring because the moderation hosting view was not resizing automatically when its content changed. This is a known issue in UIKit and SwiftUI integration, where the hosting view doesn't resize when the SwiftUI view's size changes.

While it's possible to resize the hosting view by calling hostingView.invalidateIntrinsicContentSize, the resize will occur without animation which might break the moderation view animation.

There is a workaround to resolve this issue and it works as following:

  1. Constrain the moderation hosting view to the edges of viewController.view so that it matches the size of its parent view.
  2. By default, the Hosting View will prevent touches from passing through. To allow touches outside the moderation view to pass through, we are overriding the hosting view hitTest method.
  3. Make the Hosting View transparent.
  4. Now the Bottom Sheet can resize freely, and the user doesn't see the “Hosting View”.

hitView === hostingView
else {
return super.hitTest(point, with: event)
}
Copy link
Contributor Author

@salimbraksa salimbraksa May 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the touch happens inside the moderation view (for example, if the user taps the Approve button or any other button), then everything will proceed as normal.

if let respondingView = subview.hitTest(point, with: event) {
return respondingView
}
}
Copy link
Contributor Author

@salimbraksa salimbraksa May 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the hosting view is tapped, the touch is forwarded to one of the hosting view's siblings. In the case of the CommentDetailViewController, the viewController.view has two subviews: the tableView and the hostingView. Therefore, the touch is forward to the tableView.

@@ -67,6 +67,7 @@ private extension CommentDetailContentTableViewCell {
hostingController.rootView = content
} else {
let hostingController = UIHostingController<CommentContentHeaderView>(rootView: content)
hostingController.view.setContentCompressionResistancePriority(.required, for: .vertical)
Copy link
Contributor Author

@salimbraksa salimbraksa May 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sometimes the comment cell header is compressed ( height is 0 ) and a constraints ambiguity warning is thrown in the console. Setting the compression resistance fixed this issue.

This change is not part of the fix, but I thought of including in this PR because it's just a 1 line.

self.hostingController = controller
}

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ I'm planning to unit test this method.

Copy link
Contributor Author

@salimbraksa salimbraksa May 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved in 7832ce2

@@ -187,9 +187,9 @@ class CommentDetailViewController: UIViewController, NoResultsViewHost {
override func viewDidLoad() {
super.viewDidLoad()
configureView()
configureReplyView()
// configureReplyView()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we delete these?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can delete the method call in this PR, but I want to keep the implementation until the "reply" logic is refactored.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved in e1e6826

self.hostingController = controller
}

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a short documentation to this would make sense I think as it isn't very obvious why it is needed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved in 304dfc9

@alpavanoglu
Copy link
Contributor

🧪 Tested and it works well! Thanks for the fix @salimbraksa !

Copy link
Contributor

@justtwago justtwago left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested it and it worked as expected 🎸
Thanks for the fix, Salim!

@salimbraksa salimbraksa force-pushed the task/fix-comment-moderation-height-animation branch from 9af6496 to 7832ce2 Compare May 31, 2024 15:39
@salimbraksa salimbraksa merged commit 02d452c into feature/notifications_refresh_p2 May 31, 2024
24 checks passed
@salimbraksa salimbraksa deleted the task/fix-comment-moderation-height-animation branch May 31, 2024 17:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants