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 PLG-227
- Updated logic that allows Admin Users on comments to interact with
some endpoints from a specific admin-only route.
- It pulls 2 admin specific routes:
- 1. an admin specific 'browse' route that includes hidden comments that
would otherwise be hidden from regular users and members.
- 2. A specific replies route, that would also include hidden comments
- This was needed in order to get accurate pagination.
- Additionally, it wires up the routes via `message-handler` that deal
with the potential cors issues.
- Includes style updates
---------
Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
ref https://linear.app/ghost/issue/PLG-235
- Any comments older than yesterday are now shown with the date instead of relative time
- Comments from the current year are now shown with just the month and day
---------
Co-authored-by: Kevin Ansfield <kevin@ghost.org>
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
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-251
- Fixed comments placeholder to change from "Start the conversation" to
"Join the discussion" when there's more than 1 comment.
- Previously, it only worked after a refresh. This fix ensures it's
reactive and would update the placeholder without the need for a
refresh.
REF PLG-246
- Whenever a user clicks the like button and they are not allowed to
like comments (either not signed in or not a paid member) we now show a
CTA popup asking them to sign in or upgrade to a paid membership.
---------
Co-authored-by: Kevin Ansfield <kevin@ghost.org>
no issue
- Dev Containers let you work on Ghost in a consistent, isolated
environment with all the necessary development dependencies
pre-installed. VSCode (or Cursor) can effectively run _inside_ the
container, providing a local quality development environment while
working in a well-defined, isolated environment.
- For now the default setup only works with "Clone repository in
Container Volume" or "Clone PR in Container Volume" — this allows for a
super quick and simple setup. We can also introduce another
configuration to allow opening an existing local checkout in a Dev
Container, but that's not quite ready yet.
- This PR also added the `yarn clean:hard` command which: deletes all
node_modules, cleans the yarn cache, and cleans the NX cache. This will
be necessary for opening a local checkout in a Dev Container.
- To learn more about Dev Containers, read this guide from VSCode:
https://code.visualstudio.com/docs/devcontainers/containers#_personalizing-with-dotfile-repositories
---------
Co-authored-by: Joe Grigg <joe@ghost.org>
Co-authored-by: Steve Larson <9larsons@gmail.com>
no ref
This change to vite.config.js fixes errors in the sodo-search,
signup-form, and comments packages, preventing inclusion of all of
i18n/locales. As the number of translated strings has gotten larger,
these builds have increased significantly in size, bloated with strings
that aren't actually present in them (in 58 different languages!)
No obvious build errors are present with these changes, but an extra
eyes would be appreciated. Vite isn't my forte.
---------
Co-authored-by: Steve Larson <9larsons@gmail.com>
no issue
- micro-refactor that came out of a bigger draft-replies refactor, splitting out early to keep main change cleaner
- adjusted nested ternary style and naming to improve clarity
- added unit tests to ensure the logic behaviour stayed consistent
- cleaned up useless dummy unit test file
REF PLG-225
- When editing a comment, the form was not aligned correctly.
- The form has more height by default now even when not focused, to
increase engagement.
REF PLG-225
- Updated placeholder text color to work in dark mode
- Fixed spacing for reply input field
- Changed comment input field styles
- Changed left border width from 3px to 1px
- Updated "Expertise" modal typography
- Updated CTA typography
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
