| b69ab31 | | | 1 | /** |
| b69ab31 | | | 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. |
| b69ab31 | | | 3 | * |
| b69ab31 | | | 4 | * This source code is licensed under the MIT license found in the |
| b69ab31 | | | 5 | * LICENSE file in the root directory of this source tree. |
| b69ab31 | | | 6 | */ |
| b69ab31 | | | 7 | |
| b69ab31 | | | 8 | import type {DiffComment, SuggestedChange} from 'isl/src/types'; |
| b69ab31 | | | 9 | |
| b69ab31 | | | 10 | import * as stylex from '@stylexjs/stylex'; |
| b69ab31 | | | 11 | import {Badge} from 'isl-components/Badge'; |
| b69ab31 | | | 12 | import {Column, Row} from 'isl-components/Flex'; |
| b69ab31 | | | 13 | import {Icon} from 'isl-components/Icon'; |
| b69ab31 | | | 14 | import {AvatarImg} from 'isl/src/Avatar'; |
| b69ab31 | | | 15 | import {ArchivedReasonType, ArchivedStateType, CodePatchSuggestionStatus} from 'isl/src/types'; |
| b69ab31 | | | 16 | |
| b69ab31 | | | 17 | const styles = stylex.create({ |
| b69ab31 | | | 18 | avatarColumn: { |
| b69ab31 | | | 19 | flexShrink: 0, |
| b69ab31 | | | 20 | }, |
| b69ab31 | | | 21 | avatar: { |
| b69ab31 | | | 22 | marginBlock: '5px', |
| b69ab31 | | | 23 | }, |
| b69ab31 | | | 24 | commentColumn: { |
| b69ab31 | | | 25 | gap: 1, |
| b69ab31 | | | 26 | }, |
| b69ab31 | | | 27 | commentAuthorRow: { |
| b69ab31 | | | 28 | gap: 6, |
| b69ab31 | | | 29 | }, |
| b69ab31 | | | 30 | commentAuthor: { |
| b69ab31 | | | 31 | lineHeight: '17px', |
| b69ab31 | | | 32 | textWrap: 'nowrap', |
| b69ab31 | | | 33 | opacity: 0.75, |
| b69ab31 | | | 34 | }, |
| b69ab31 | | | 35 | versionAbbr: { |
| b69ab31 | | | 36 | opacity: 0.5, |
| b69ab31 | | | 37 | whiteSpace: 'nowrap', |
| b69ab31 | | | 38 | }, |
| b69ab31 | | | 39 | primaryBadge: { |
| b69ab31 | | | 40 | backgroundColor: 'var(--button-primary-background)', |
| b69ab31 | | | 41 | color: 'var(--button-primary-foreground)', |
| b69ab31 | | | 42 | }, |
| b69ab31 | | | 43 | suggestionBadge: { |
| b69ab31 | | | 44 | gap: '2px', |
| b69ab31 | | | 45 | }, |
| b69ab31 | | | 46 | }); |
| b69ab31 | | | 47 | |
| b69ab31 | | | 48 | function getSuggestionBadgeLabel( |
| b69ab31 | | | 49 | suggestedChange: SuggestedChange | undefined, |
| b69ab31 | | | 50 | ): {text: string; isPrimary: boolean} | undefined { |
| b69ab31 | | | 51 | if (suggestedChange?.patch == null) { |
| b69ab31 | | | 52 | return undefined; |
| b69ab31 | | | 53 | } |
| b69ab31 | | | 54 | if (suggestedChange.status === CodePatchSuggestionStatus.Declined) { |
| b69ab31 | | | 55 | return {text: 'Rejected', isPrimary: false}; |
| b69ab31 | | | 56 | } |
| b69ab31 | | | 57 | if (suggestedChange.archivedState === ArchivedStateType.ARCHIVED) { |
| b69ab31 | | | 58 | switch (suggestedChange.archivedReason) { |
| b69ab31 | | | 59 | case ArchivedReasonType.APPLIED_IN_EDITOR: |
| b69ab31 | | | 60 | return {text: 'Applied Inline', isPrimary: true}; |
| b69ab31 | | | 61 | case ArchivedReasonType.APPLIED_MERGED: |
| b69ab31 | | | 62 | case ArchivedReasonType.APPLIED_STACKED_DIFF: |
| b69ab31 | | | 63 | return {text: 'Merged', isPrimary: false}; |
| b69ab31 | | | 64 | case ArchivedReasonType.AUTHOR_DISCARDED: |
| b69ab31 | | | 65 | return {text: 'Rejected', isPrimary: false}; |
| b69ab31 | | | 66 | case ArchivedReasonType.STALE_DIFF_CLOSED: |
| b69ab31 | | | 67 | case ArchivedReasonType.STALE_FILE_CHANGED: |
| b69ab31 | | | 68 | return {text: 'Closed', isPrimary: false}; |
| b69ab31 | | | 69 | } |
| b69ab31 | | | 70 | } |
| b69ab31 | | | 71 | if (suggestedChange.status === CodePatchSuggestionStatus.Accepted) { |
| b69ab31 | | | 72 | return {text: 'Accepted', isPrimary: true}; |
| b69ab31 | | | 73 | } |
| b69ab31 | | | 74 | return {text: 'Suggestion', isPrimary: true}; |
| b69ab31 | | | 75 | } |
| b69ab31 | | | 76 | |
| b69ab31 | | | 77 | export function CommentCardBadge({ |
| b69ab31 | | | 78 | label, |
| b69ab31 | | | 79 | icon, |
| b69ab31 | | | 80 | }: { |
| b69ab31 | | | 81 | label: {text: string; isPrimary: boolean}; |
| b69ab31 | | | 82 | icon: string; |
| b69ab31 | | | 83 | }) { |
| b69ab31 | | | 84 | return ( |
| b69ab31 | | | 85 | <Badge xstyle={label.isPrimary && styles.primaryBadge}> |
| b69ab31 | | | 86 | <Row xstyle={styles.suggestionBadge}> |
| b69ab31 | | | 87 | <span> |
| b69ab31 | | | 88 | <Icon icon={icon} size="XS" /> |
| b69ab31 | | | 89 | </span> |
| b69ab31 | | | 90 | {label.text} |
| b69ab31 | | | 91 | </Row> |
| b69ab31 | | | 92 | </Badge> |
| b69ab31 | | | 93 | ); |
| b69ab31 | | | 94 | } |
| b69ab31 | | | 95 | |
| b69ab31 | | | 96 | export default function InlineCommentContent({ |
| b69ab31 | | | 97 | comment, |
| b69ab31 | | | 98 | isHeadComment = false, |
| b69ab31 | | | 99 | isHidden = false, |
| b69ab31 | | | 100 | isLatestVersion = true, |
| b69ab31 | | | 101 | versionAbbr, |
| b69ab31 | | | 102 | }: { |
| b69ab31 | | | 103 | comment: DiffComment; |
| b69ab31 | | | 104 | isHeadComment?: boolean; |
| b69ab31 | | | 105 | isHidden?: boolean; |
| b69ab31 | | | 106 | isLatestVersion?: boolean; |
| b69ab31 | | | 107 | versionAbbr?: string; |
| b69ab31 | | | 108 | }) { |
| b69ab31 | | | 109 | const label = getSuggestionBadgeLabel(comment.suggestedChange); |
| b69ab31 | | | 110 | return ( |
| b69ab31 | | | 111 | <Column alignStart xstyle={styles.commentColumn}> |
| b69ab31 | | | 112 | <Row xstyle={styles.commentAuthorRow}> |
| b69ab31 | | | 113 | <Column alignStart xstyle={styles.avatarColumn}> |
| b69ab31 | | | 114 | <AvatarImg |
| b69ab31 | | | 115 | username={comment.author} |
| b69ab31 | | | 116 | url={comment.authorAvatarUri} |
| b69ab31 | | | 117 | xstyle={styles.avatar} |
| b69ab31 | | | 118 | /> |
| b69ab31 | | | 119 | </Column> |
| b69ab31 | | | 120 | <div {...stylex.props(styles.commentAuthor)}>{comment.authorName}</div> |
| b69ab31 | | | 121 | {label && <CommentCardBadge label={label} icon="code" />} |
| b69ab31 | | | 122 | {isHidden && ( |
| b69ab31 | | | 123 | <CommentCardBadge label={{text: 'Hidden', isPrimary: false}} icon="eye-closed" /> |
| b69ab31 | | | 124 | )} |
| b69ab31 | | | 125 | {isHeadComment && !isLatestVersion && versionAbbr && ( |
| b69ab31 | | | 126 | <div {...stylex.props(styles.versionAbbr)}>[Original comment on {versionAbbr}]</div> |
| b69ab31 | | | 127 | )} |
| b69ab31 | | | 128 | </Row> |
| b69ab31 | | | 129 | <Row>{comment.content}</Row> |
| b69ab31 | | | 130 | </Column> |
| b69ab31 | | | 131 | ); |
| b69ab31 | | | 132 | } |