no issue
- contains two edge-case bug fixes, one related to pagination when deleting a comment and another that works around issues arising from potentially unstable API sorting
closes https://linear.app/ghost/issue/PLG-305
- adds deduplication of comments when fetching top-level pages
- avoids problems where the underlying sort is unstable (e.g. "best" as likes are changing) resulting in an already loaded comment appearing on a later-loaded page
- doesn't solve for missing comments between pages but does prevent invalid local state that can lead to buggy UI
closes https://linear.app/ghost/issue/PLG-304
- added a refresh of the comments list when a top-level comment with no replies is deleted so the pagination resets and replies aren't missed when loading more due to a shift in the underlying paginated data
no issue
- contains two minor bug fixes for edit name/expertise buttons on the main form and incorrect replies-left-to-load counts after deleting replies
closes https://linear.app/ghost/issue/PLG-303
- when deleting a reply our "replies left" calculation was getting out of sync because the `count.replies` state on the parent comment wasn't being updated, the result was for each comment deleted we were displaying 1 more reply that was still to load
- updated the `deleteComment` action to also modify the parent comment's `count.replies` value when a reply was deleted ensuring our "replies left" calculation remains correct
closes https://linear.app/ghost/issue/PLG-302
- switching from `onClick` to `onMouseDown` allows the button events to fire and be picked up by the popup-opening handler before the click causes a blur event on the main form to fire which removes the expertise buttons
- we have a test for adding expertise via the main form which was giving us a false positive due to the way Playwright handles events, unfortunately I couldn't find a way to adjust that to match the real-world behaviour without ending up with a test that always fails
ref https://linear.app/ghost/issue/PLG-267
- updated delete comment action so it removes comments rather than just updating their status to `'deleted'`
- deleted comments that still have replies have their status updated so the replies remain visible
- matches updated API behaviour where deleted comments are not shown at all
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
closes https://linear.app/ghost/issue/PLG-273
- removed previous fix which only worked on last comment but not last reply
- keeping track of last comment/reply spread a lot of domain knowledge around for a UI-only concern and wouldn't scale if we have other dropdowns in the future
- added `useOutOfViewportClasses` hook
- accepts an object with top/bottom/right/left containing default and outOfViewPort classes
- applies the correct classes using the DOM rather than React so that we avoid re-renders and associated flickering or broken rendering
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.
REF https://linear.app/ghost/issue/PLG-298/
- When you're typing a comment, and exit the input field, it collapses into a non-editable state; you first have to click on it again to "open" the form. This means you can't select the text or instantly start typing again. When the input has a value, we should stop it from closing.
- added custom `useEditor` hook that wraps TipTap and exposes both the `editor` and `hasContent` props keeping logic out of the consuming components
---------
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
ref https://github.com/TryGhost/Ghost/pull/21788#discussion_r1869802093
- Introduced `setCommentsIsLoading` action to handle the loading state
of comments dynamically.
- Updated `setOrder` function to dispatch the `setCommentsIsLoading`
action, ensuring proper UI feedback during asynchronous operations.
closes https://linear.app/ghost/issue/PLG-294
- making the `replied to: [removed]` text a link was a bit confusing because clicking it does nothing
- if the replied-to comment doesn't exist (e.g. hidden/deleted and not returned in API response) or has been unpublished we replace the `<a>` with a `<span>` to remove the link behaviour
no issue
- keeps logic inside `<CommentHeader>` single-purpose
- allows for cleaner code when adding logic to remove the link when the replied-to comment is removed
- switched `queryByText` to `getByText` in the test to make debugging easier, the latter will print the current DOM if it fails to find an element
# Conflicts:
# apps/comments-ui/src/components/content/Comment.tsx
REF https://linear.app/ghost/issue/PLG-284
When clicking on a replied-to reference, you scroll up to the parent comment. To guide the eye, the parent comment is highlighted with a yellow background.
- added `dispatchAction` to the `ActionHandler` function call arguments, allowing actions to call other actions
- added `commentIdToHighlight` app context state and associated `highlightComment` action to set it
- updated `Comment` (and related sub-components) to match `commentIdToHighlight` when rendering to determine whether to apply highlighting of comment contents
- for the highlight, `<mark>` is used to wrap any paragraphs inside the comment contents and appropriate tailwind highlight animation classes applied
- uses the inline `<mark>` element so that background highlight only applies to the text bounding boxes rather than the entire wrapping element
---------
Co-authored-by: Ronald Langeveld <hi@ronaldlangeveld.com>
PLG-280
- Added a loading state implementation when changing the ordering of
comments.
- This improves the overall UX particularly with slower connections.
- Due to the nature of how comments and ordering are handled, we
approached it with a simple state that determines whether it's done
loading or not around the API query.
---------
Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
no issue
- bumped minor to delay comments-ui update until next Ghost release
- includes numerous styling fixes, display of replies when editing a comment, and updates to in-reply-to snippets when deleting/hiding comments
closes https://linear.app/ghost/issue/PLG-263/
When hiding a reply as an Admin, if there were other replies that referenced it then those snippets would still show the hidden content because there was no immediate update in the comments-ui client. This made it look like hidden content would still be visible even though at the API level snippets were entirely removed so no other user would see it.
- added client-side handling so in-reply-to snippets immediately show `[hidden/removed]` which means we don't have to fetch every reply from the API
- updated the API to use `[hidden/removed]` as the snippet when referencing a hidden reply instead of removing all `in_reply_to_` data
- keeping `in_reply_to_id` and `in_reply_to_snippet` means comments-ui still displays the replied-to reference text (albeit not directly showing the API-supplied string so `[hidden/removed]` can be translated)
- returns the full `in_reply_to_snippet` text for Admin API requests so that showing a comment that has been loaded from the API can immediately show the contents for any displayed references to the comment
REF https://linear.app/ghost/issue/PLG-274/
- Currently, replies are hidden when the parent comment is being edited. This PR ensures that replies remain visible when the parent comment is being edited.
- To achieve this, the `CommentComponent` now checks if the parent comment is being edited. If so, the comment content is swapped by the EditForm, while the comment's avatar, header, menu, and replies remain visible.
- The Form component now only renders the FormEditor. A FormWrapper component is used to wrap the avatar and comment header.
- This Form component is used in the EditForm without the FormWrapper, as it is already wrapped in the CommentComponent.
- The ReplyForm and the MainForm use the FormWrapper.
- The Avatar component now also accepts a `member` prop, which is used to display the avatar image. This is because it's no longer used inside the Form component.
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.
no issue
- repeated use of the same init data made tests longer than they needed to be, especially as the number of tests grows
- added `initializeTest()` function to remove unnecessary duplication
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.
