Skip to content

Commit

Permalink
Merge pull request Expensify#49769 from nkdengineer/fix/49494
Browse files Browse the repository at this point in the history 
fix: Room mention in the message is not highlighted
  • Loading branch information
@mjasikowski
mjasikowski authored Oct 3, 2024
2 parents e61ee7f + 52c3de1 commit efa3274
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 90 deletions.
89 changes: 47 additions & 42 deletions src/components/SelectionList/ChatListItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import React, {useMemo} from 'react';
import {View} from 'react-native';
import {AttachmentContext} from '@components/AttachmentContext';
import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
import MultipleAvatars from '@components/MultipleAvatars';
import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
import TextWithTooltip from '@components/TextWithTooltip';
Expand Down Expand Up @@ -54,6 +55,8 @@ function ChatListItem<TItem extends ListItem>({
const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;

const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? '-1'}), [item.reportID]);

return (
<BaseListItem
item={item}
Expand All @@ -77,49 +80,51 @@ function ChatListItem<TItem extends ListItem>({
hoverStyle={item.isSelected && styles.activeComponentBG}
>
{(hovered) => (
<ShowContextMenuContext.Provider value={contextValue}>
<AttachmentContext.Provider value={attachmentContextValue}>
<MultipleAvatars
icons={icons}
shouldShowTooltip={showTooltip}
secondAvatarStyle={[
StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
]}
/>
<View style={[styles.chatItemRight]}>
<View style={[styles.chatItemMessageHeader]}>
<View style={[styles.flexShrink1, styles.mr1]}>
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={reportActionItem.formattedFrom}
style={[
styles.chatItemMessageHeaderSender,
isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
styles.sidebarLinkTextBold,
styles.pre,
]}
/>
<MentionReportContext.Provider value={mentionReportContextValue}>
<ShowContextMenuContext.Provider value={contextValue}>
<AttachmentContext.Provider value={attachmentContextValue}>
<MultipleAvatars
icons={icons}
shouldShowTooltip={showTooltip}
secondAvatarStyle={[
StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
]}
/>
<View style={[styles.chatItemRight]}>
<View style={[styles.chatItemMessageHeader]}>
<View style={[styles.flexShrink1, styles.mr1]}>
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={reportActionItem.formattedFrom}
style={[
styles.chatItemMessageHeaderSender,
isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
styles.sidebarLinkTextBold,
styles.pre,
]}
/>
</View>
<ReportActionItemDate created={reportActionItem.created ?? ''} />
</View>
<View style={styles.chatItemMessage}>
{reportActionItem.message.map((fragment, index) => (
<ReportActionItemFragment
// eslint-disable-next-line react/no-array-index-key
key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
fragment={fragment}
actionName={reportActionItem.actionName}
source=""
accountID={from.accountID}
isFragmentContainingDisplayName={index === 0}
/>
))}
</View>
<ReportActionItemDate created={reportActionItem.created ?? ''} />
</View>
<View style={styles.chatItemMessage}>
{reportActionItem.message.map((fragment, index) => (
<ReportActionItemFragment
// eslint-disable-next-line react/no-array-index-key
key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
fragment={fragment}
actionName={reportActionItem.actionName}
source=""
accountID={from.accountID}
isFragmentContainingDisplayName={index === 0}
/>
))}
</View>
</View>
</AttachmentContext.Provider>
</ShowContextMenuContext.Provider>
</AttachmentContext.Provider>
</ShowContextMenuContext.Provider>
</MentionReportContext.Provider>
)}
</BaseListItem>
);
Expand Down
101 changes: 53 additions & 48 deletions src/pages/home/report/ReportActionItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {AttachmentContext} from '@components/AttachmentContext';
import Button from '@components/Button';
import DisplayNames from '@components/DisplayNames';
import Hoverable from '@components/Hoverable';
import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import InlineSystemMessage from '@components/InlineSystemMessage';
Expand Down Expand Up @@ -392,6 +393,8 @@ function ReportActionItem({

const attachmentContextValue = useMemo(() => ({reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [reportID]);

const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? '-1'}), [report?.reportID]);

const actionableItemButtons: ActionableItem[] = useMemo(() => {
if (ReportActionsUtils.isActionableAddPaymentCard(action) && shouldRenderAddPaymentCard()) {
return [
Expand Down Expand Up @@ -689,59 +692,61 @@ function ReportActionItem({
![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) &&
!ReportActionsUtils.isPendingRemove(action);
children = (
<ShowContextMenuContext.Provider value={contextValue}>
<AttachmentContext.Provider value={attachmentContextValue}>
{draftMessage === undefined ? (
<View style={displayAsGroup && hasBeenFlagged ? styles.blockquote : {}}>
<ReportActionItemMessage
reportID={reportID}
action={action}
displayAsGroup={displayAsGroup}
isHidden={isHidden}
/>
{hasBeenFlagged && (
<Button
small
style={[styles.mt2, styles.alignSelfStart]}
onPress={() => updateHiddenState(!isHidden)}
>
<Text
style={[styles.buttonSmallText, styles.userSelectNone]}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
<MentionReportContext.Provider value={mentionReportContextValue}>
<ShowContextMenuContext.Provider value={contextValue}>
<AttachmentContext.Provider value={attachmentContextValue}>
{draftMessage === undefined ? (
<View style={displayAsGroup && hasBeenFlagged ? styles.blockquote : {}}>
<ReportActionItemMessage
reportID={reportID}
action={action}
displayAsGroup={displayAsGroup}
isHidden={isHidden}
/>
{hasBeenFlagged && (
<Button
small
style={[styles.mt2, styles.alignSelfStart]}
onPress={() => updateHiddenState(!isHidden)}
>
{isHidden ? translate('moderation.revealMessage') : translate('moderation.hideMessage')}
</Text>
</Button>
)}
{/**
<Text
style={[styles.buttonSmallText, styles.userSelectNone]}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
>
{isHidden ? translate('moderation.revealMessage') : translate('moderation.hideMessage')}
</Text>
</Button>
)}
{/**
These are the actionable buttons that appear at the bottom of a Concierge message
for example: Invite a user mentioned but not a member of the room
https://github.com/Expensify/App/issues/32741
*/}
{actionableItemButtons.length > 0 && (
<ActionableItemButtons
items={actionableItemButtons}
layout={ReportActionsUtils.isActionableTrackExpense(action) ? 'vertical' : 'horizontal'}
/>
)}
</View>
) : (
<ReportActionItemMessageEdit
action={action}
draftMessage={draftMessage}
reportID={reportID}
policyID={report?.policyID}
index={index}
ref={textInputRef}
shouldDisableEmojiPicker={
(ReportUtils.chatIncludesConcierge(report) && User.isBlockedFromConcierge(blockedFromConcierge)) ||
ReportUtils.isArchivedRoom(report, reportNameValuePairs)
}
isGroupPolicyReport={!!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE}
/>
)}
</AttachmentContext.Provider>
</ShowContextMenuContext.Provider>
{actionableItemButtons.length > 0 && (
<ActionableItemButtons
items={actionableItemButtons}
layout={ReportActionsUtils.isActionableTrackExpense(action) ? 'vertical' : 'horizontal'}
/>
)}
</View>
) : (
<ReportActionItemMessageEdit
action={action}
draftMessage={draftMessage}
reportID={reportID}
policyID={report?.policyID}
index={index}
ref={textInputRef}
shouldDisableEmojiPicker={
(ReportUtils.chatIncludesConcierge(report) && User.isBlockedFromConcierge(blockedFromConcierge)) ||
ReportUtils.isArchivedRoom(report, reportNameValuePairs)
}
isGroupPolicyReport={!!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE}
/>
)}
</AttachmentContext.Provider>
</ShowContextMenuContext.Provider>
</MentionReportContext.Provider>
);
}
const numberOfThreadReplies = action.childVisibleActionCount ?? 0;
Expand Down

0 comments on commit efa3274

Please sign in to comment.