closes https://linear.app/ghost/issue/PLG-297
- we were setting the comment count Admin API browse comments response meta pagination data which will never be correct because it only counts top-level comments for pagination purposes
- we have a public comment counts endpoint that is already fetched, there's no need to override that when using the Admin API because the overall count doesn't change across API's, even when the Admin API includes hidden comments because those don't impact the visible count
- updated test setup so the title and count is shown so it can be asserted against
- updated mocked api to correctly return count of all published comments+replies
ref https://linear.app/ghost/issue/PLG-296/
When logged in as an Admin, comments-ui switches comment reads from the Members API over to the Admin API so that hidden comments can be displayed to allow moderation activities. However, the Admin API not using member authentication and CORS preventing the front-end members auth cookie being passed over to the Admin API domain meant that the logged-in member's likes were missing when fetching via the Admin API as there is no available reference to the logged in member.
This change works around the problem by introducing an `impersonate_member_uuid` param to the comments read/browse endpoints of the Admin API. When passed, the provided uuid is used to simulate that member being logged in so that likes are correctly shown.
- Introduced `impersonation_member_id` parameter to resolve issues with admin API not returning correct "liked" status for comments when an admin is logged in.
- Updated API endpoints in `comment-replies.js` and `comments.js` to handle `impersonation_member_id`.
- Adjusted `CommentsController` to validate and process the `impersonation_member_id` parameter before passing it to database queries.
- Enhanced test coverage to ensure proper handling of the new parameter and accurate "liked" status behavior.
no issue
- `MockedApi.browseComments` only worked on top-level comments, it couldn't find replies when passed `filter:'id:123'` such is used when liking and editing replies
- fixed missing get handler for fetching single comment via Admin API (used after showing a hidden comment)
- added `flattenComments` and `findCommentById` helper functions to facilitate easier finding of a comment or reply within the nested structure
- added tests for liking and hiding replies
no issue
- expanded e2e test behaviour to route Admin requests through our MockedApi instance so we have the same test experience for normal and admin comments requests
- extracted page route method bodies to enable request methods to be spied on
- updated admin moderation tests to properly use admin requests
ref PLG-270
- Updated the getCommentByID service to filter out hidden and deleted
replies.
- Ensured all replies are loaded before applying the filter.
- Simplified logic to handle non-paginated routes by directly removing
unwanted replies.
- Wired up new Admin Endpoint that shows hidden replies but not deleted
replies.
- Updated comments-ui client
- Added unit tests for mocking apiClient event listeners.
- added eventlistener playwright tests to ensure it fires on UI clicks.
closes https://linear.app/ghost/issue/PLG-265
- wrapped the async part of `dispatchAction` in a Promise so code that calls it can await the action completion
- this was a regression introduced a long time ago when we switched to Typescript and React hooks
- added a `setDelay()` method to our `MockedApi` class to make it easier to test interstitial loading states
ref https://linear.app/ghost/issue/PLG-230
When clicking "Reply" on a reply we now show an "In reply to" reference on the form and when saved show that reference in the rendered view, making it easier to follow discussions within comment replies.
- updated calls to `openCommentForm` action when opening a reply to add the in-reply-to data to the `openForm` instance
- updated Form comment to use the `openForm` instance data when rendering the in-reply-to reference
- updated Comment component to render the in-reply-to reference from the API-provided data
- includes click handler to scroll to the referenced comment
- added `getCommentInReplyToSnippet` helper function so strip a comment back to plaintext for display in the reply-to reference on the comment form (snippets on other comments are generated server-side)
---------
Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
no issue
- running tests locally, especially in UI mode, would often result in an avatar saturation test failing
- the cause was calculating saturation for an element that still had it's opacity animating in
- added a test util function that waits for an element in a frame to reach full opacity
- used function in test to ensure we have a stable element before calculating the color saturation
ref PLG-227
- Behind flags
- Changed Comments API for members and guests to not return hidden or
removed comments - with the only exception being if a hidden or removed
comment have published replies, in which case it will be greyed out as
per the previous version on the UI.
- Wired up a new admin API endpoint for comment to receive all comments.
It's on par with the members / guests endpoint, with the difference
being that it it shows hidden comment's content, where previously the
html property was nullified.
ref PLG-229
- Previously we had no way of using Ghost labs flags in Comments UI.
- With this change, we now get Labs data from the existing content
settings endpoint.
- Additionally, we have a `useLabs` hook that can be accessed from
anywhere in the App to put those awesome new features behind a flag
for staging
- And we can pass labs params to the initialiser for testing.
For more details: https://ghost.slack.com/archives/C06TQR9SHSM/p1726133527960489
ref MOM-135 MOM-211 MOM-213
- Bumped up the default comments count from 5 to 20 comments before
pagination kicks in.
- Moved the pagination (`Show X previous comments)` to bottom of the
page (soon to be reworded to `Show x more comments`)
- Updated tests and added a new helper for adding multiple comments easier.
closes https://linear.app/tryghost/issue/ENG-739
- `props.innerRef` in `<IFrame>` was inadvertently assumed to always exist, sometimes throwing an error on render when certain popups like the profile settings modal were opened resulting in the app crashing and the whole comments block disappearing
- added a guard to ensure the ref exists before trying to set it
- updated tests so the profile modal route is tested
closes https://linear.app/tryghost/issue/ENG-721
ref https://linear.app/tryghost/issue/ENG-708
Comments-UI loads `/ghost/admin-frame/` in an iframe to check if a Staff User is authenticated in order to show moderation options. That iframe request loads a HTML page which in turn contains a script that fires off an API request that attempts to fetch the logged-in user details, resulting in a 403 "error" showing up when not authenticated. In the vast majority of cases there will be no staff user authenticated so lots of extra requests and "errors" are seen unnecessarily.
- adjusted the `/ghost/auth-frame/` endpoint to check if the request contains an Admin session cookie
- if it does, continue as before with rendering the HTML page so the script is loaded
- if it doesn't, return an empty 204 response avoiding the script request and subsequent 403-generating API request
- eliminates the 403 error being generated for all typical visitor traffic, the error should only be seen when an Admin was previously logged in but their cookie is no longer valid (either from logging out, or going past the 6month validity period)
refs https://linear.app/tryghost/issue/ENG-676/
Now we have the case that there is no filter param, the simple string
approach fails. Instead we build up a URLSearchParams object which
makes it easier to handle conditional params & stringify it at the end.
closes ENG-678
The comments block is typically shown at the bottom of a post so it doesn't make sense to eagerly fetch comments from the API when we don't know if the comments block will even be viewed. By lazy-loading the data only when the comments block comes into view we can reduce both data usage for visitors and load on the site.
- uses IntersectionObserver API to delay comments app initialisation until the comments block has scrolled into view
- updated all iframe-related components to forward a `ref` so we can use the `<iframe>` element reference inside the `App` component
refs https://github.com/TryGhost/Product/issues/3504
- App component now uses React hooks intead of React class component
- App is now written in TypeScript
- All JavaScript is now removed from the Comments-UI project
- Removed `PopupNotification` because these were never displayed
- Removed `action` from AppContext (never used)
- Moved options parsing out of `index.ts` into a separate utility file,
similar to the signup-form
- Improved reliability of some editor tests by always waiting for the
editor to be focused (was not always the case) + added an utility method
for this
refs https://github.com/TryGhost/Product/issues/3504
- When you are logged in as an admin, but not as a member, no buttons
showed (discovered in new e2e tests)
- Added E2E tests for admin actions
refs https://github.com/TryGhost/Team/issues/3504
This migrates comments-ui to TypeScript. Only `App.js` is left to
migrate, but since this isn't using hooks yet, it will need a bigger
rewrite so this will need to happen in a separate PR.
