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>
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
- 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
closes https://linear.app/ghost/issue/PLG-266
- the reply form is a child of the parent comment component but we have different comment components for published vs unpublished with the bug coming from the latter missing the logic to display the form
- added missing form display and added a regression test
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>
closes https://linear.app/ghost/issue/PLG-260
ref https://github.com/TryGhost/Ghost/pull/21621
- in a recent refactor, a `comment` prop started being passed through to `<Form>` inside of `<ReplyForm>` which had an unexpected side-effect of changing the avatar image to the comment's member instead of the logged-in member
- removed the prop passthrough and updated test to catch future regressios
ref https://linear.app/ghost/issue/PLG-230
closes https://linear.app/ghost/issue/PLG-256
Adding an in-reply-to reference link/snippet to reply forms was proving difficult with the previous setup due the amount of data that needed to be passed up and down a deeply nested component tree. This refactor lays the groundwork for making that easier and aims to make form autoclose behaviour more centralised by keeping the open form state in app context and the opening/closing of forms in actions so there's less need for messy local state and to drill functions down the component tree.
- replaces `openFormCount` context state with an `openCommentForms` array
- keeping detailed open form references in the application state means the display of forms is centrally managed rather than managed via local state inside components
- it simplifies some of the problems faced with the `<PublishedComment>` component that previously managed form display. That component is re-used for both the top-level comment as well as replies even though replying on a reply puts the top-level comment into reply mode meaning we had a mess of local state and passed-through functions to work around the component having varying behaviour depending on nesting level
- `openFormCount` is still available on the application state via `useMemo` on the provider meaning the implementation of `openCommentForms` is hidden from app code that just needs to know if forms are open
- removes `<AutocloseForm>` as the autoclose behaviour is now controlled via the `openCommentForm` action
- updated `<Form>` so it manages the "has unsaved changes" properties on `openFormComments` ready for use by `openCommentForm`'s autoclosing behaviour
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.
closes https://linear.app/tryghost/issue/PLG-221
- added `toggleParentReplyMode()` to comment component's props so clicking Reply on a reply opens the reply form on the top-level parent to emphasise we only support 1-level deep replies and avoid unexpected nesting
- adjusted conditional so "Reply" button is shown in `<CommentMenu>` when a parent is present (behind labs flag)
- updated `useLabs()` to always return an object so we don't need to add nullish checks everywhere
# Conflicts:
# apps/comments-ui/test/e2e/actions.test.ts
no issue
- a change in browser version/dependency versions/playwright/something else has made this test flaky because the reply editor form loses focus when the expertise field gains focus (this doesn't happen in the browser) meaning when we get to our assertions the elements we care about are missing
- forcing focus back puts us into a known state for our assertions
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
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
