-
-
Notifications
You must be signed in to change notification settings - Fork 396
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add threads to host applications (#10580)
* Add small variant to comment threads * Fix typing of canComment function * Update collapsable html component style * Add withdraw application action * Redesign and add comment threads to host application pages * Apply new comment thread variant to dashboard expense drawers * Fix lint issues * OCF banner * Click pending tab in e2e test * Add missing pending click in e2e * Add private notes to host applications * fix prettier * Adjust tailwind classes and style * update graphql * Update langs * fix lint issues
- Loading branch information
Showing
51 changed files
with
2,548 additions
and
1,256 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import React from 'react'; | ||
| import clsx from 'clsx'; | ||
| import { Lock } from 'lucide-react'; | ||
| import { FormattedMessage } from 'react-intl'; | ||
|
|
||
| import commentTypes from '../../lib/constants/commentTypes'; | ||
|
|
||
| import { AccountHoverCard } from '../AccountHoverCard'; | ||
| import Avatar from '../Avatar'; | ||
| import DateTime from '../DateTime'; | ||
| import HTMLContent from '../HTMLContent'; | ||
| import InlineEditField from '../InlineEditField'; | ||
| import RichTextEditor from '../RichTextEditor'; | ||
|
|
||
| import CommentActions from './CommentActions'; | ||
| import { editCommentMutation, mutationOptions } from './graphql'; | ||
| import type { CommentProps } from './types'; | ||
|
|
||
| export default function SmallComment(props: CommentProps) { | ||
| const [isEditing, setEditing] = React.useState(false); | ||
| const hasActions = !isEditing; | ||
| const comment = props.comment; | ||
| const anchorHash = `comment-${new Date(comment.createdAt).getTime()}`; | ||
| const isPrivateNote = comment.type === commentTypes.PRIVATE_NOTE; | ||
|
|
||
| return ( | ||
| <div | ||
| className="relative w-full border-slate-200 py-4 first:border-none first:pt-0 [&:last-child_.timeline-indicator]:-bottom-4 [&:last-child_.timeline-separator]:hidden" | ||
| data-cy="comment" | ||
| id={anchorHash} | ||
| > | ||
| <div className="timeline-separator absolute bottom-0 left-[20px] right-0 border-b" /> | ||
| <div className="flex justify-between"> | ||
| <div className="flex gap-4"> | ||
| <div className="relative"> | ||
| <div | ||
| className={clsx('timeline-indicator absolute bottom-[-16px] left-[20px] top-[-16px] border-l', { | ||
| 'border-blue-400': isPrivateNote, | ||
| })} | ||
| /> | ||
| <AccountHoverCard | ||
| account={comment.fromAccount} | ||
| trigger={ | ||
| <div className="relative"> | ||
| <Avatar collective={comment.fromAccount} radius={40} /> | ||
| {isPrivateNote && ( | ||
| <div className="absolute bottom-[-4px] right-[-4px] flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow"> | ||
| <Lock size={16} className="text-blue-400" /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| } | ||
| /> | ||
| </div> | ||
| <div> | ||
| <div className="mb-1 text-sm font-medium leading-5">{comment.fromAccount.name}</div> | ||
| <div className="text-sm leading-4 text-[#75777A]"> | ||
| <DateTime dateStyle="medium" value={comment.createdAt} /> | ||
| </div> | ||
| <div className="mt-4"> | ||
| <InlineEditField | ||
| mutation={editCommentMutation} | ||
| mutationOptions={mutationOptions} | ||
| values={comment} | ||
| field="html" | ||
| canEdit={props.canEdit} | ||
| canDelete={props.canDelete} | ||
| isEditing={isEditing} | ||
| showEditIcon={false} | ||
| prepareVariables={(comment, html) => ({ comment: { id: comment.id, html } })} | ||
| disableEditor={() => setEditing(false)} | ||
| warnIfUnsavedChanges | ||
| required | ||
| > | ||
| {({ isEditing, setValue, setUploading }) => | ||
| !isEditing ? ( | ||
| <HTMLContent | ||
| fontSize="14px" | ||
| maxCollapsedHeight={140} | ||
| collapsable | ||
| collapsePadding={22} | ||
| content={comment.html} | ||
| data-cy="comment-body" | ||
| readMoreMessage={<FormattedMessage defaultMessage="Read more" id="ContributeCard.ReadMore" />} | ||
| /> | ||
| ) : ( | ||
| <RichTextEditor | ||
| kind="COMMENT" | ||
| defaultValue={comment.html} | ||
| onChange={e => setValue(e.target.value)} | ||
| fontSize="14px" | ||
| autoFocus | ||
| setUploading={setUploading} | ||
| /> | ||
| ) | ||
| } | ||
| </InlineEditField> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {hasActions && ( | ||
| <CommentActions | ||
| comment={comment} | ||
| anchorHash={anchorHash} | ||
| isConversationRoot={props.isConversationRoot} | ||
| canEdit={props.canEdit} | ||
| canDelete={props.canDelete} | ||
| canReply={props.canReply} | ||
| onDelete={props.onDelete} | ||
| onEditClick={() => setEditing(true)} | ||
| onReplyClick={() => { | ||
| props.onReplyClick(comment); | ||
| }} | ||
| /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.