Added disable/enable commenting to member detail screen#26222
Merged
Conversation
Contributor
📝 WalkthroughWalkthroughAdds per-member commenting controls: model attrs, feature flag, member UI (indicator, enable link, menu actions), a disable-commenting modal component with task/API calls and cache invalidation, controller actions for enable/disable, styles, and E2E tests/page-object locators. Changes
Sequence DiagramsequenceDiagram
actor User
participant UI as Member Details UI
participant Controller as Member Controller
participant Modal as DisableCommentingModal
participant API as Ghost API
participant Cache as React Query Cache
rect rgba(100, 150, 255, 0.5)
Note over User,UI: Disable commenting flow
User->>UI: Click "Disable commenting"
UI->>Controller: confirmDisableCommenting()
Controller->>UI: Open DisableCommentingModal
User->>Modal: Toggle "Hide comments" (optional)
User->>Modal: Click Confirm
Modal->>API: POST /members/{id}/disable-commenting {hide_comments}
API-->>Modal: 200 OK
Modal->>Cache: Invalidate CommentsResponseType
Modal->>Cache: Invalidate MembersResponseType
Modal->>Controller: afterDisable callback (refresh)
Controller->>UI: Re-render member (canComment=false)
end
sequenceDiagram
actor User
participant UI as Member Details UI
participant Controller as Member Controller
participant API as Ghost API
participant Cache as React Query Cache
rect rgba(150, 255, 100, 0.5)
Note over User,UI: Enable commenting flow
User->>UI: Click "Enable" (menu or link)
UI->>Controller: confirmEnableCommenting()
Controller->>API: POST /members/{id}/enable-commenting
API-->>Controller: 200 OK
Controller->>Cache: Invalidate CommentsResponseType
Controller->>Cache: Invalidate MembersResponseType
Controller->>UI: Refresh member (canComment=true)
end
Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
rob-ghost
requested review from
jonatansberg,
kevinansfield,
peterzimon and
weylandswart
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@ghost/admin/app/styles/layouts/members.css`:
- Around line 806-827: The visibility of the “Enable” link is currently only
toggled on hover, making it inaccessible to keyboard users; update the CSS so
the rule that sets opacity: 1 applies on keyboard focus as well by adding a
:focus-within state to the container selector (i.e., change the selector
targeting .gh-member-commenting-disabled:hover .gh-member-details-enable-link to
also include .gh-member-commenting-disabled:focus-within
.gh-member-details-enable-link) and ensure the existing
.gh-member-details-enable-link button remains keyboard-focusable and visually
clear when focused.
In `@ghost/admin/app/templates/member.hbs`:
- Around line 81-103: Add the new admin UI strings used in member.hbs ("Disable
commenting" and "Enable commenting") to the English locale file so they are
localizable; update ghost/i18n/locales/en/ghost.json by adding appropriate keys
(e.g., "members.disable_commenting" and "members.enable_commenting") and include
the matching string values, then replace the hardcoded text in the template
(member.hbs) with calls to the i18n helper referencing those keys (targets: the
label text currently inside the <span> elements for the buttons).
🧹 Nitpick comments (3)
e2e/helpers/pages/admin/members/member-details-page.ts (1)
79-84: Prefer a role-based checkbox locator for reliability.
getByTexttargets the label text, which can be brittle forisChecked/toBeCheckedassertions.♻️ Suggested change
- this.hideCommentsCheckbox = this.disableCommentingModal.getByText('Hide all previous comments'); + this.hideCommentsCheckbox = this.disableCommentingModal.getByRole('checkbox', {name: 'Hide all previous comments'});e2e/tests/admin/members/disable-commenting.test.ts (2)
15-231: Add explicit AAA sections for readability.
Consider splitting each test into clear Arrange / Act / Assert sections (even with minimal separators) to align with the E2E test standard.As per coding guidelines Use the AAA Pattern (Arrange, Act, Assert) in E2E tests with clear sections.
74-75: UsegetByRole('checkbox', {name: 'Hide all previous comments'})for higher priority semantic locator.The current implementation uses
getByText(), which is semantic but lower priority.getByRole()should be the primary choice for checkbox elements to improve stability and accessibility alignment with Playwright best practices.
rob-ghost
force-pushed
the
feat/ber-3184-ban-members-screen
branch
from
db7c830 to
0e3017c
Compare
weylandswart
approved these changes
Feb 4, 2026
Contributor
weylandswart
left a comment
weylandswart
left a comment
There was a problem hiding this comment.
Looks good to me. Some minor things that I think should be squared up.
ghost/admin/app/components/members/modals/disable-commenting.hbs
Outdated
Show resolved
Hide resolved
rob-ghost
force-pushed
the
feat/ber-3184-ban-members-screen
branch
from
0e3017c to
e2158ac
Compare
ref https://linear.app/tryghost/issue/BER-3184/ Adds gear menu actions, confirmation modal with hide-comments checkbox, sidebar indicator, and React Query cache invalidation so the comments list stays in sync when commenting is toggled from the Ember member detail page. Behind the disableMemberCommenting labs flag.
rob-ghost
force-pushed
the
feat/ber-3184-ban-members-screen
branch
from
e2158ac to
e443ae2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Admins need the ability to disable commenting for individual members directly from the member detail screen, rather than only from the comments moderation list. This adds that capability behind the
disableMemberCommentinglabs flag as part of the broader member banning feature (BER-3184).The implementation adds "Disable commenting" and "Enable commenting" actions to the member detail gear menu. Clicking "Disable commenting" opens a confirmation modal that shows the member's name, explains the consequence, and offers a "Hide all previous comments" checkbox. Disabling swaps the menu item to "Enable commenting" and shows a "Comments disabled — Enable" indicator in the member details sidebar. The enable link appears on hover for a clean default look. Re-enabling is immediate (no modal) matching the comments moderation list behaviour.
Because the comments moderation list is a React app using React Query while the member detail page is Ember, disabling/enabling commenting from the Ember side doesn't automatically invalidate the React Query cache. This PR bridges that gap by calling
window.adminXQueryClient.invalidateQueries()for bothCommentsResponseTypeandMembersResponseTypeafter the API calls, following the same pattern used by the billing iframe. An E2E test specifically verifies this cross-navigation cache invalidation by disabling commenting from the member page and then checking the comments page reflects the change.Summary by CodeRabbit
New Features
Style
Tests