Skip to content

Commit

Permalink
feat: improving comment styles and functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrewgolovanov
andrewgolovanov committed Jan 24, 2025
1 parent b78f619 commit 0cd3eb6
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 100 deletions.
48 changes: 24 additions & 24 deletions packages/ui/src/views/repo/pull-request/components/pull-request-diff-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
TranslationStore,
TypesPullReqActivity
} from '@/views'
import { Avatar, AvatarFallback, Layout, Text } from '@components/index'
import { Avatar, AvatarFallback, Layout } from '@components/index'
import { DiffFile, DiffModeEnum, DiffView, DiffViewProps, SplitSide } from '@git-diff-view/react'
import { getInitials, timeAgo } from '@utils/utils'
import { DiffBlock } from 'diff2html/lib/types'
Expand Down Expand Up @@ -49,7 +49,6 @@ interface PullRequestDiffviewerProps {
useTranslationStore: () => TranslationStore
commentId?: string
onCopyClick?: (commentId?: number) => void
onCommentSaveAndStatusChange?: (comment: string, status: string, parentId?: number) => void
suggestionsBatch?: CommitSuggestion[]
onCommitSuggestion?: (suggestion: CommitSuggestion) => void
addSuggestionToBatch?: (suggestion: CommitSuggestion) => void
Expand Down Expand Up @@ -79,7 +78,6 @@ const PullRequestDiffViewer = ({
useTranslationStore,
commentId,
onCopyClick,
onCommentSaveAndStatusChange,
suggestionsBatch,
onCommitSuggestion,
addSuggestionToBatch,
Expand Down Expand Up @@ -342,7 +340,7 @@ const PullRequestDiffViewer = ({
if (!threads) return <></>

return (
<div className="w- rounded border bg-background">
<div className="rounded border bg-background">
{threads.map(thread => {
const parent = thread.parent
const componentId = `activity-code-${parent?.id}`
Expand All @@ -356,20 +354,28 @@ const PullRequestDiffViewer = ({
parentCommentId={parent.id}
handleSaveComment={handleSaveComment}
isLast={true}
contentClassName="px-4 py-2 w-[calc(100%-38px)]"
contentClassName="w-[calc(100%-38px)]"
header={[]}
currentUser={currentUser}
isComment
replyBoxClassName="py-4"
replyBoxClassName="p-4"
hideReplyHere={hideReplyHeres[parent?.id]}
setHideReplyHere={state => toggleReplyBox(state, parent?.id)}
isResolved={!!parent.payload?.resolved}
toggleConversationStatus={toggleConversationStatus}
onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
onQuoteReply={handleQuoteReply}
quoteReplyText={quoteReplies[parent.id]?.text || ''}
contentHeader={
!!parent.payload?.resolved && (
<div className="flex items-center gap-x-1">
{/* TODO: need to identify the author who resolved the conversation */}
<span className="text-foreground-8 font-medium">{parent.author}</span>
<span className="text-foreground-4">marked this conversation as resolved</span>
</div>
)
}
content={
<div className="flex-col">
<div className="flex-col px-4 pt-4">
<PullRequestTimelineItem
titleClassName="!flex max-w-full"
parentCommentId={parent.id}
Expand All @@ -389,22 +395,20 @@ const PullRequestDiffViewer = ({
icon={
<Avatar className="size-6 rounded-full p-0">
<AvatarFallback>
<Text size={1} color="tertiaryBackground">
{parentInitials}
</Text>
<span className="text-12 text-foreground-3">{parentInitials}</span>
</AvatarFallback>
</Avatar>
}
header={[
{
name: parent.author,
description: (
<Layout.Horizontal>
<span className="text-foreground-3">{timeAgo(parent?.created as number)}</span>
<Layout.Horizontal className="text-foreground-4">
<span>{timeAgo(parent?.created as number)}</span>
{parent?.deleted ? (
<>
<span className="text-foreground-3">&nbsp;|&nbsp;</span>
<span className="text-foreground-3">{t('views:pullRequests.deleted')} </span>
<span>&nbsp;|&nbsp;</span>
<span>{t('views:pullRequests.deleted')} </span>
</>
) : null}
</Layout.Horizontal>
Expand Down Expand Up @@ -474,22 +478,20 @@ const PullRequestDiffViewer = ({
icon={
<Avatar className="size-6 rounded-full p-0">
<AvatarFallback>
<Text size={1} color="tertiaryBackground">
{replyInitials}
</Text>
<span className="text-12 text-foreground-3">{replyInitials}</span>
</AvatarFallback>
</Avatar>
}
header={[
{
name: reply.author,
description: (
<Layout.Horizontal>
<span className="text-foreground-3">{timeAgo(reply?.created as number)}</span>
<Layout.Horizontal className="text-foreground-4">
<span>{timeAgo(reply?.created as number)}</span>
{reply?.deleted ? (
<>
<span className="text-foreground-3">&nbsp;|&nbsp;</span>
<span className="text-foreground-3">{t('views:pullRequests.deleted')} </span>
<span>&nbsp;|&nbsp;</span>
<span>{t('views:pullRequests.deleted')} </span>
</>
) : null}
</Layout.Horizontal>
Expand All @@ -505,7 +507,6 @@ const PullRequestDiffViewer = ({
<PullRequestCommentBox
handleUpload={handleUpload}
isEditMode
isResolved={!!parent?.payload?.resolved}
onSaveComment={() => {
if (reply?.id) {
updateComment?.(reply?.id, editComments[replyComponentId])
Expand All @@ -520,7 +521,6 @@ const PullRequestDiffViewer = ({
setComment={text =>
setEditComments(prev => ({ ...prev, [replyComponentId]: text }))
}
onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
/>
) : (
<PRCommentView
Expand Down
59 changes: 15 additions & 44 deletions .../ui/src/views/repo/pull-request/details/components/conversation/pull-request-overview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useCallback, useMemo, useState } from 'react'

import { Avatar, AvatarFallback, Icon, Layout, Text } from '@components/index'
import { Avatar, AvatarFallback, Icon, Layout } from '@components/index'
import { DiffModeEnum } from '@git-diff-view/react'
import { getInitials } from '@utils/stringUtils'
import { timeAgo } from '@utils/utils'
Expand Down Expand Up @@ -50,7 +50,6 @@ interface PullRequestOverviewProps extends RoutingProps {
repoId: string
diffData?: { text: string; numAdditions?: number; numDeletions?: number; data?: string; title: string; lang: string }
onCopyClick: (commentId?: number) => void
onCommentSaveAndStatusChange?: (comment: string, status: string, parentId?: number) => void
suggestionsBatch: CommitSuggestion[]
onCommitSuggestion: (suggestion: CommitSuggestion) => void
addSuggestionToBatch: (suggestion: CommitSuggestion) => void
Expand Down Expand Up @@ -82,7 +81,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
useTranslationStore,
onCopyClick,
handleUpload,
onCommentSaveAndStatusChange,
suggestionsBatch,
onCommitSuggestion,
addSuggestionToBatch,
Expand All @@ -93,7 +91,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
toCommitDetails
}) => {
const { t } = useTranslationStore()

const {
// mode,
// setMode,
Expand Down Expand Up @@ -254,7 +251,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
currentUser={currentUser?.display_name}
replyBoxClassName="p-4"
toggleConversationStatus={toggleConversationStatus}
onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
isResolved={!!payload?.resolved}
icon={<Icon name="pr-review" size={12} />}
isLast={(data && data?.length - 1 === index) ?? false}
Expand All @@ -264,13 +260,11 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
{
avatar: (
<Avatar className="size-6 rounded-full p-0">
{/* <AvatarImage src={AvatarUrl} /> */}

<AvatarFallback>
<Text size={1} color="tertiaryBackground">
<span className="text-12 text-foreground-3">
{/* TODO: fix fallback string */}
{getInitials((payload?.author as PayloadAuthor)?.display_name || '')}
</Text>
</span>
</AvatarFallback>
</Avatar>
),
Expand All @@ -279,13 +273,9 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
description: payload?.created && `reviewed ${timeAgo(payload?.created)}`
}
]}
contentHeader={<span>{(payload?.code_comment as PayloadCodeComment)?.path}</span>}
content={
<div className="flex flex-col pt-2">
<div className="flex w-full items-center justify-between px-4 pb-2">
<Text size={3} color="primary">
{(payload?.code_comment as PayloadCodeComment)?.path}
</Text>
</div>
<div className="flex flex-col">
{startingLine ? (
<div className="bg-[--diff-hunk-lineNumber--]">
<div className="ml-16 w-full px-8 py-1">{startingLine}</div>
Expand Down Expand Up @@ -334,21 +324,18 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
contentClassName="border-transparent"
replyBoxClassName="p-4"
toggleConversationStatus={toggleConversationStatus}
onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
icon={
<Avatar className="size-6 rounded-full p-0">
{/* <AvatarImage src={AvatarUrl} /> */}

<AvatarFallback>
<Text size={1} color="tertiaryBackground">
<span className="text-12 text-foreground-3">
{/* TODO: fix fallback string */}
{getInitials(
(
(commentItem as unknown as TypesPullReqActivity)?.payload
?.author as PayloadAuthor
)?.display_name || ''
)}
</Text>
</span>
</AvatarFallback>
</Avatar>
}
Expand All @@ -360,16 +347,12 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
)?.display_name,
// TODO: fix comment to tell between comment or code comment?
description: (
<Layout.Horizontal>
<span className="text-foreground-3">
{timeAgo((commentItem as unknown as PayloadCreated)?.created)}
</span>
<Layout.Horizontal className="text-foreground-4">
<span>{timeAgo((commentItem as unknown as PayloadCreated)?.created)}</span>
{commentItem?.deleted ? (
<>
<span className="text-foreground-3">&nbsp;|&nbsp;</span>
<span className="text-foreground-3">
{t('views:pullRequests.deleted')}{' '}
</span>
<span>&nbsp;|&nbsp;</span>
<span>{t('views:pullRequests.deleted')}</span>
</>
) : null}
</Layout.Horizontal>
Expand All @@ -385,7 +368,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
<PullRequestCommentBox
isEditMode
handleUpload={handleUpload}
isResolved={!!payload?.resolved}
onSaveComment={() => {
if (commentItem?.id) {
handleUpdateComment?.(commentItem?.id, editComments[componentId])
Expand All @@ -400,8 +382,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
setComment={text =>
setEditComments(prev => ({ ...prev, [componentId]: text }))
}
onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
parentCommentId={payload?.id}
/>
) : (
<PRCommentView
Expand Down Expand Up @@ -442,18 +422,15 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
replyBoxClassName="p-4"
isResolved={!!payload?.resolved}
toggleConversationStatus={toggleConversationStatus}
onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
header={[
{
avatar: (
<Avatar className="size-6 rounded-full p-0">
{/* <AvatarImage src={AvatarUrl} /> */}

<AvatarFallback>
<Text size={1} color="tertiaryBackground">
<span className="text-12 text-foreground-3">
{/* TODO: fix fallback string */}
{getInitials((payload?.author as PayloadAuthor)?.display_name || '')}
</Text>
</span>
</AvatarFallback>
</Avatar>
),
Expand Down Expand Up @@ -485,7 +462,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
onQuoteReply={handleQuoteReply}
parentCommentId={payload?.id}
toggleConversationStatus={toggleConversationStatus}
onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
titleClassName="!flex max-w-full"
currentUser={currentUser?.display_name}
isLast={commentItems.length - 1 === idx}
Expand All @@ -502,18 +478,16 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
key={`${commentItem.id}-${commentItem.author}-pr-comment`}
icon={
<Avatar className="size-6 rounded-full p-0">
{/* <AvatarImage src={AvatarUrl} /> */}

<AvatarFallback>
<Text size={1} color="tertiaryBackground">
<span className="text-12 text-foreground-3">
{/* TODO: fix fallback string */}
{getInitials(
(
(commentItem as unknown as TypesPullReqActivity)?.payload
?.author as PayloadAuthor
).display_name || ''
)}
</Text>
</span>
</AvatarFallback>
</Avatar>
}
Expand Down Expand Up @@ -549,7 +523,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
<PullRequestCommentBox
handleUpload={handleUpload}
isEditMode
isResolved={!!payload?.resolved}
onSaveComment={() => {
if (commentItem?.id) {
handleUpdateComment?.(commentItem?.id, editComments[componentId])
Expand All @@ -562,8 +535,6 @@ const PullRequestOverview: React.FC<PullRequestOverviewProps> = ({
}}
comment={editComments[componentId]}
setComment={text => setEditComments(prev => ({ ...prev, [componentId]: text }))}
onCommentSaveAndStatusChange={onCommentSaveAndStatusChange}
parentCommentId={payload?.id}
/>
) : (
<PRCommentView
Expand Down
Loading

0 comments on commit 0cd3eb6

Please sign in to comment.