Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-30 22:34:01 -05:00
Code Issues Activity

Added data-member-uuid attribute to each comment

Browse source 
closes https://linear.app/ghost/issue/PLG-268

- allows for external scripts to more easily decorate individual comments
This commit is contained in:
Kevin Ansfield 2024-12-12 20:58:01 +00:00
parent 27e79a3a3d
commit ab2058ee1d
2 changed files with 26 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
apps/comments-ui/src/components/content/Comment.test.jsx
View file

@ -38,6 +38,28 @@ describe('<CommentComponent>', function () {
expect(screen.getByText('First reply')).toBeInTheDocument();
});
it('outputs member uuid data attribute for published comments', function () {
const comment = buildComment({
status: 'published',
member: {uuid: '123'}
});
const appContext = {comments: [comment]};
const {container} = contextualRender(<CommentComponent comment={comment} />, {appContext});
expect(container.querySelector('[data-member-uuid="123"]')).toBeInTheDocument();
});
it('does not output member uuid data attribute for unpublished comments', function () {
const comment = buildComment({
status: 'hidden',
member: {uuid: '123'}
});
const appContext = {comments: [comment]};
const {container} = contextualRender(<CommentComponent comment={comment} />, {appContext});
expect(container.querySelector('[data-member-uuid="123"]')).not.toBeInTheDocument();
});
});
describe('<RepliedToSnippet>', function () {

7
apps/comments-ui/src/components/content/Comment.tsx
View file

@ -126,7 +126,7 @@ const PublishedComment: React.FC<PublishedCommentProps> = ({comment, parent, ope
const avatar = (<Avatar comment={comment} />);
return (
<CommentLayout avatar={avatar} className={hiddenClass} hasReplies={hasReplies}>
<CommentLayout avatar={avatar} className={hiddenClass} hasReplies={hasReplies} memberUuid={comment.member?.uuid}>
<div>
{isInEditMode ? (
<>
@ -419,10 +419,11 @@ type CommentLayoutProps = {
avatar: React.ReactNode;
hasReplies: boolean;
className?: string;
memberUuid?: string;
}
const CommentLayout: React.FC<CommentLayoutProps> = ({children, avatar, hasReplies, className = ''}) => {
const CommentLayout: React.FC<CommentLayoutProps> = ({children, avatar, hasReplies, className = '', memberUuid = ''}) => {
return (
<div className={`flex w-full flex-row ${hasReplies === true ? 'mb-0' : 'mb-7'}`} data-testid="comment-component">
<div className={`flex w-full flex-row ${hasReplies === true ? 'mb-0' : 'mb-7'}`} data-member-uuid={memberUuid} data-testid="comment-component">
<div className="mr-2 flex flex-col items-center justify-start sm:mr-3">
<div className={`flex-0 mb-3 sm:mb-4 ${className}`}>
{avatar}