diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx index 9fe1088c9809..e44d3ef97df6 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext.tsx @@ -2,6 +2,7 @@ import {createContext} from 'react'; type MentionReportContextProps = { currentReportID: string; + exactlyMatch?: boolean; }; const MentionReportContext = createContext({ diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx index 7aa0f5eca22a..3ab907dc767d 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/index.tsx @@ -3,7 +3,7 @@ import React, {useContext, useMemo} from 'react'; import type {TextStyle} from 'react-native'; import {StyleSheet} from 'react-native'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {CustomRendererProps, TPhrasing, TText} from 'react-native-render-html'; import {ShowContextMenuContext} from '@components/ShowContextMenuContext'; import Text from '@components/Text'; @@ -18,12 +18,7 @@ import type {Report} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import MentionReportContext from './MentionReportContext'; -type MentionReportOnyxProps = { - /** All reports shared with the user */ - reports: OnyxCollection; -}; - -type MentionReportRendererProps = MentionReportOnyxProps & CustomRendererProps; +type MentionReportRendererProps = CustomRendererProps; const removeLeadingLTRAndHash = (value: string) => value.replace(CONST.UNICODE.LTR, '').replace('#', ''); @@ -53,11 +48,12 @@ const getMentionDetails = (htmlAttributeReportID: string, currentReport: OnyxEnt return {reportID, mentionDisplayText}; }; -function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defaultRendererProps}: MentionReportRendererProps) { +function MentionReportRenderer({style, tnode, TDefaultRenderer, ...defaultRendererProps}: MentionReportRendererProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const htmlAttributeReportID = tnode.attributes.reportid; - const {currentReportID: currentReportIDContext} = useContext(MentionReportContext); + const {currentReportID: currentReportIDContext, exactlyMatch} = useContext(MentionReportContext); + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); const currentReportID = useCurrentReportID(); const currentReportIDValue = currentReportIDContext || currentReportID?.currentReportID; @@ -86,7 +82,7 @@ function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defa // eslint-disable-next-line react/jsx-props-no-spreading {...defaultRendererProps} style={ - isGroupPolicyReport + isGroupPolicyReport && (!exactlyMatch || navigationRoute) ? [styles.link, styleWithoutColor, StyleUtils.getMentionStyle(isCurrentRoomMention), {color: StyleUtils.getMentionTextColor(isCurrentRoomMention)}] : [] } @@ -111,17 +107,4 @@ function MentionReportRenderer({style, tnode, TDefaultRenderer, reports, ...defa MentionReportRenderer.displayName = 'MentionReportRenderer'; -const chatReportSelector = (report: OnyxEntry): Report => - (report && { - reportID: report.reportID, - reportName: report.reportName, - displayName: report.displayName, - policyID: report.policyID, - }) as Report; - -export default withOnyx({ - reports: { - key: ONYXKEYS.COLLECTION.REPORT, - selector: chatReportSelector, - }, -})(MentionReportRenderer); +export default MentionReportRenderer; diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index e51b8e36704a..4c84f7daacb0 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -10,6 +10,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView import DelegateNoAccessModal from '@components/DelegateNoAccessModal'; import DisplayNames from '@components/DisplayNames'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; @@ -736,6 +737,9 @@ function ReportDetailsPage({policies, report, route}: ReportDetailsPageProps) { isTransactionDeleted.current = true; }, [caseID, iouTransactionID, moneyRequestReport?.reportID, report, requestParentReportAction, isSingleTransactionView]); + + const mentionReportContextValue = useMemo(() => ({currentReportID: report.reportID, exactlyMatch: true}), [report.reportID]); + return ( @@ -755,17 +759,19 @@ function ReportDetailsPage({policies, report, route}: ReportDetailsPageProps) { {shouldShowReportDescription && ( - Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID, Navigation.getActiveRoute()))} - /> + + Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID, Navigation.getActiveRoute()))} + /> + )}