From 1ec5cc30deb34c344afa1df1a167459ed528f636 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Fri, 5 Apr 2024 11:01:21 +0200 Subject: [PATCH 01/12] make icons optional inside mentions render component --- src/components/MentionSuggestions.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index 23040a242807..c7dd025e623a 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -22,7 +22,7 @@ type Mention = { login?: string; /** Array of icons of the user. We use the first element of this array */ - icons: Icon[]; + icons?: Icon[]; }; type MentionSuggestionsProps = { @@ -67,16 +67,18 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe return ( - - - + {item.icons && ( + + + + )} Date: Fri, 5 Apr 2024 11:23:42 +0200 Subject: [PATCH 02/12] implement room mentions suggestions --- .../ComposerWithSuggestions.tsx | 10 ++ .../ReportActionCompose.tsx | 3 + .../ReportActionCompose/SuggestionMention.tsx | 107 +++++++++++++++--- .../ReportActionCompose/Suggestions.tsx | 10 ++ 4 files changed, 116 insertions(+), 14 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index bfcef66e7c54..9369c3504c7d 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -171,6 +171,12 @@ type ComposerWithSuggestionsProps = ComposerWithSuggestionsOnyxProps & /** The parent report ID */ // eslint-disable-next-line react/no-unused-prop-types -- its used in the withOnyx HOC parentReportID: string | undefined; + + /** Whether chat is a room type */ + isChatRoom: boolean; + + /** policy ID of the report */ + policyID: string; }; const {RNTextInputReset} = NativeModules; @@ -217,6 +223,8 @@ function ComposerWithSuggestions( isEmptyChat, lastReportAction, parentReportActionID, + isChatRoom, + policyID, // Focus onFocus, @@ -769,6 +777,8 @@ function ComposerWithSuggestions( composerHeight={composerHeight} measureParentContainer={measureParentContainer} isAutoSuggestionPickerLarge={isAutoSuggestionPickerLarge} + isChatRoom={isChatRoom} + policyID={policyID} // Input value={value} setValue={setValue} diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 5f7f5adebfc9..b5ee6e2d03fa 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -342,6 +342,7 @@ function ReportActionCompose({ [], ); + const isChatRoom = useMemo(() => ReportUtils.isGroupPolicy(report), [report]); const reportRecipientAcountIDs = ReportUtils.getReportRecipientAccountIDs(report, currentUserPersonalDetails.accountID); const reportRecipient = personalDetails[reportRecipientAcountIDs[0]]; const shouldUseFocusedColor = !isBlockedFromConcierge && !disabled && isFocused; @@ -431,9 +432,11 @@ function ReportActionCompose({ isScrollLikelyLayoutTriggered={isScrollLikelyLayoutTriggered} raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered} reportID={reportID} + policyID={report?.policyID ?? ''} parentReportID={report?.parentReportID} parentReportActionID={report?.parentReportActionID} includeChronos={ReportUtils.chatIncludesChronos(report)} + isChatRoom={isChatRoom} isEmptyChat={isEmptyChat} lastReportAction={lastReportAction} isMenuVisible={isMenuVisible} diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 5bf172e82388..d81e1f09472d 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -1,7 +1,9 @@ import Str from 'expensify-common/lib/str'; import lodashSortBy from 'lodash/sortBy'; -import type {ForwardedRef} from 'react'; +import type {ForwardedRef, RefAttributes} from 'react'; import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxCollection} from 'react-native-onyx'; import * as Expensicons from '@components/Icon/Expensicons'; import type {Mention} from '@components/MentionSuggestions'; import MentionSuggestions from '@components/MentionSuggestions'; @@ -11,10 +13,13 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails' import useLocalize from '@hooks/useLocalize'; import * as LoginUtils from '@libs/LoginUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; +import * as ReportUtils from '@libs/ReportUtils'; import * as SuggestionsUtils from '@libs/SuggestionUtils'; import * as UserUtils from '@libs/UserUtils'; +import {isValidRoomName} from '@libs/ValidationUtils'; import CONST from '@src/CONST'; -import type {PersonalDetailsList} from '@src/types/onyx'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {PersonalDetailsList, Report} from '@src/types/onyx'; import type {SuggestionsRef} from './ReportActionCompose'; import type {SuggestionProps} from './Suggestions'; @@ -23,6 +28,12 @@ type SuggestionValues = { atSignIndex: number; shouldShowSuggestionMenu: boolean; mentionPrefix: string; + prefixType: string; +}; + +type RoomMentionOnyxProps = { + /** All reports shared with the user */ + reports: OnyxCollection; }; /** @@ -35,10 +46,22 @@ const defaultSuggestionsValues: SuggestionValues = { atSignIndex: -1, shouldShowSuggestionMenu: false, mentionPrefix: '', + prefixType: '', }; function SuggestionMention( - {value, selection, setSelection, updateComment, isAutoSuggestionPickerLarge, measureParentContainer, isComposerFocused}: SuggestionProps, + { + value, + selection, + setSelection, + updateComment, + isAutoSuggestionPickerLarge, + measureParentContainer, + isComposerFocused, + reports, + isChatRoom, + policyID, + }: SuggestionProps & RoomMentionOnyxProps, ref: ForwardedRef, ) { const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT; @@ -83,6 +106,17 @@ function SuggestionMention( [currentUserPersonalDetails.login], ); + const getMentionCode = useCallback( + (mention: Mention, mentionType: string): string => { + if (mentionType === '#') { + // room mention case + return mention.login ?? ''; + } + return mention.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT ? CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT : `@${formatLoginPrivateDomain(mention.login, mention.login)}`; + }, + [formatLoginPrivateDomain], + ); + /** * Replace the code of mention and update selection */ @@ -90,10 +124,7 @@ function SuggestionMention( (highlightedMentionIndexInner: number) => { const commentBeforeAtSign = value.slice(0, suggestionValues.atSignIndex); const mentionObject = suggestionValues.suggestedMentions[highlightedMentionIndexInner]; - const mentionCode = - mentionObject.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT - ? CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT - : `@${formatLoginPrivateDomain(mentionObject.login, mentionObject.login)}`; + const mentionCode = getMentionCode(mentionObject, suggestionValues.prefixType); const commentAfterMention = value.slice(suggestionValues.atSignIndex + suggestionValues.mentionPrefix.length + 1); updateComment(`${commentBeforeAtSign}${mentionCode} ${SuggestionsUtils.trimLeadingSpace(commentAfterMention)}`, true); @@ -108,7 +139,16 @@ function SuggestionMention( suggestedMentions: [], })); }, - [value, suggestionValues.atSignIndex, suggestionValues.suggestedMentions, suggestionValues.mentionPrefix, updateComment, setSelection, formatLoginPrivateDomain], + [ + value, + suggestionValues.atSignIndex, + suggestionValues.suggestedMentions, + suggestionValues.prefixType, + suggestionValues.mentionPrefix.length, + getMentionCode, + updateComment, + setSelection, + ], ); /** @@ -146,7 +186,7 @@ function SuggestionMention( [highlightedMentionIndex, insertSelectedMention, resetSuggestions, suggestionValues.suggestedMentions.length], ); - const getMentionOptions = useCallback( + const getUserMentionOptions = useCallback( (personalDetailsParam: PersonalDetailsList, searchValue = ''): Mention[] => { const suggestions = []; @@ -211,6 +251,30 @@ function SuggestionMention( [translate, formatPhoneNumber, formatLoginPrivateDomain], ); + const getRoomMentionOptions = useCallback( + (searchTerm: string, reportBatch: OnyxCollection): Mention[] => { + const filteredRoomMentions: Mention[] = []; + Object.values(reportBatch ?? {}).forEach((report) => { + if (report?.policyID !== policyID) { + return; + } + if (!ReportUtils.isGroupPolicy(report) || !isValidRoomName(report?.reportName ?? '')) { + // checking validity of room name removes Policy Expense Chats + return; + } + if (report?.reportName?.toLowerCase().includes(searchTerm.toLowerCase())) { + filteredRoomMentions.push({ + text: report.reportName, + login: report.reportName, + alternateText: report.reportName, + }); + } + }); + return filteredRoomMentions.slice(0, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS); + }, + [policyID], + ); + const calculateMentionSuggestion = useCallback( (selectionEnd: number) => { if (shouldBlockCalc.current || selectionEnd < 1 || !isComposerFocused) { @@ -239,13 +303,15 @@ function SuggestionMention( let atSignIndex: number | undefined; let suggestionWord = ''; let prefix: string; + let prefixType = ''; // Detect if the last two words contain a mention (two words are needed to detect a mention with a space in it) - if (lastWord.startsWith('@')) { + if (lastWord.startsWith('@') || lastWord.startsWith('#')) { atSignIndex = leftString.lastIndexOf(lastWord) + afterLastBreakLineIndex; suggestionWord = lastWord; prefix = suggestionWord.substring(1); + prefixType = suggestionWord.substring(0, 1); } else if (secondToLastWord && secondToLastWord.startsWith('@') && secondToLastWord.length > 1) { atSignIndex = leftString.lastIndexOf(secondToLastWord) + afterLastBreakLineIndex; suggestionWord = `${secondToLastWord} ${lastWord}`; @@ -259,23 +325,32 @@ function SuggestionMention( suggestedMentions: [], atSignIndex, mentionPrefix: prefix, + prefixType, }; const isCursorBeforeTheMention = valueAfterTheCursor.startsWith(suggestionWord); - if (!isCursorBeforeTheMention && isMentionCode(suggestionWord)) { - const suggestions = getMentionOptions(personalDetails, prefix); + if (!isCursorBeforeTheMention && isMentionCode(suggestionWord) && prefixType === '@') { + const suggestions = getUserMentionOptions(personalDetails, prefix); nextState.suggestedMentions = suggestions; nextState.shouldShowSuggestionMenu = !!suggestions.length; } + const shouldDisplayMenetionsSuggestions = (isValidRoomName(suggestionWord.toLowerCase()) || prefix === '') && isChatRoom; + if (!isCursorBeforeTheMention && prefixType === '#' && shouldDisplayMenetionsSuggestions) { + // filter reports by room name and current policy + const filteredRoomMentions = getRoomMentionOptions(prefix, reports); + nextState.suggestedMentions = filteredRoomMentions; + nextState.shouldShowSuggestionMenu = !!filteredRoomMentions.length; + } + setSuggestionValues((prevState) => ({ ...prevState, ...nextState, })); setHighlightedMentionIndex(0); }, - [getMentionOptions, personalDetails, resetSuggestions, setHighlightedMentionIndex, value, isComposerFocused], + [isComposerFocused, value, isChatRoom, setHighlightedMentionIndex, resetSuggestions, getUserMentionOptions, personalDetails, getRoomMentionOptions, reports], ); useEffect(() => { @@ -330,4 +405,8 @@ function SuggestionMention( SuggestionMention.displayName = 'SuggestionMention'; -export default forwardRef(SuggestionMention); +export default withOnyx, RoomMentionOnyxProps>({ + reports: { + key: ONYXKEYS.COLLECTION.REPORT, + }, +})(forwardRef(SuggestionMention)); diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.tsx b/src/pages/home/report/ReportActionCompose/Suggestions.tsx index 61026a792919..ed9050f686e2 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/Suggestions.tsx @@ -46,6 +46,12 @@ type SuggestionProps = { /** The height of the composer */ composerHeight?: number; + + /** if current composer is connected with chat room or not */ + isChatRoom: boolean; + + /** policy ID connected to current composer */ + policyID?: string; }; /** @@ -66,6 +72,8 @@ function Suggestions( measureParentContainer, isAutoSuggestionPickerLarge = true, isComposerFocused, + isChatRoom, + policyID, }: SuggestionProps, ref: ForwardedRef, ) { @@ -155,6 +163,8 @@ function Suggestions( isAutoSuggestionPickerLarge, measureParentContainer, isComposerFocused, + isChatRoom, + policyID, }; return ( From 23b1e92fb618809655499d2ab997ac1bfec2f139 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Tue, 9 Apr 2024 15:40:26 +0200 Subject: [PATCH 03/12] adress review comments --- src/components/MentionSuggestions.tsx | 4 ++-- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 8 ++++---- .../report/ReportActionCompose/ReportActionCompose.tsx | 4 ++-- .../home/report/ReportActionCompose/SuggestionMention.tsx | 6 +++--- src/pages/home/report/ReportActionCompose/Suggestions.tsx | 8 ++++---- 5 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index c7dd025e623a..8108929fc451 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -21,7 +21,7 @@ type Mention = { /** Email/phone number of the user */ login?: string; - /** Array of icons of the user. We use the first element of this array */ + /** Array of icons of the user. If present, we use the first element of this array. For room suggestions, the icons are not used */ icons?: Icon[]; }; @@ -67,7 +67,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe return ( - {item.icons && ( + {item.icons && !!item.icons.length && ( ReportUtils.isGroupPolicy(report), [report]); + const isGroupPolicyReport = useMemo(() => ReportUtils.isGroupPolicy(report), [report]); const reportRecipientAcountIDs = ReportUtils.getReportRecipientAccountIDs(report, currentUserPersonalDetails.accountID); const reportRecipient = personalDetails[reportRecipientAcountIDs[0]]; const shouldUseFocusedColor = !isBlockedFromConcierge && !disabled && isFocused; @@ -436,7 +436,7 @@ function ReportActionCompose({ parentReportID={report?.parentReportID} parentReportActionID={report?.parentReportActionID} includeChronos={ReportUtils.chatIncludesChronos(report)} - isChatRoom={isChatRoom} + isGroupPolicyReport={isGroupPolicyReport} isEmptyChat={isEmptyChat} lastReportAction={lastReportAction} isMenuVisible={isMenuVisible} diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index d81e1f09472d..5533a2a72af3 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -59,7 +59,7 @@ function SuggestionMention( measureParentContainer, isComposerFocused, reports, - isChatRoom, + isGroupPolicyReport, policyID, }: SuggestionProps & RoomMentionOnyxProps, ref: ForwardedRef, @@ -336,7 +336,7 @@ function SuggestionMention( nextState.shouldShowSuggestionMenu = !!suggestions.length; } - const shouldDisplayMenetionsSuggestions = (isValidRoomName(suggestionWord.toLowerCase()) || prefix === '') && isChatRoom; + const shouldDisplayMenetionsSuggestions = isGroupPolicyReport && (isValidRoomName(suggestionWord.toLowerCase()) || prefix === ''); if (!isCursorBeforeTheMention && prefixType === '#' && shouldDisplayMenetionsSuggestions) { // filter reports by room name and current policy const filteredRoomMentions = getRoomMentionOptions(prefix, reports); @@ -350,7 +350,7 @@ function SuggestionMention( })); setHighlightedMentionIndex(0); }, - [isComposerFocused, value, isChatRoom, setHighlightedMentionIndex, resetSuggestions, getUserMentionOptions, personalDetails, getRoomMentionOptions, reports], + [isComposerFocused, value, isGroupPolicyReport, setHighlightedMentionIndex, resetSuggestions, getUserMentionOptions, personalDetails, getRoomMentionOptions, reports], ); useEffect(() => { diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.tsx b/src/pages/home/report/ReportActionCompose/Suggestions.tsx index ed9050f686e2..d1abe0e3880c 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/Suggestions.tsx @@ -47,8 +47,8 @@ type SuggestionProps = { /** The height of the composer */ composerHeight?: number; - /** if current composer is connected with chat room or not */ - isChatRoom: boolean; + /** if current composer is connected with report from group policy */ + isGroupPolicyReport: boolean; /** policy ID connected to current composer */ policyID?: string; @@ -72,7 +72,7 @@ function Suggestions( measureParentContainer, isAutoSuggestionPickerLarge = true, isComposerFocused, - isChatRoom, + isGroupPolicyReport, policyID, }: SuggestionProps, ref: ForwardedRef, @@ -163,7 +163,7 @@ function Suggestions( isAutoSuggestionPickerLarge, measureParentContainer, isComposerFocused, - isChatRoom, + isGroupPolicyReport, policyID, }; From 398b32f1557872c3ff6239ffed7a0a67bcaae743 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Wed, 10 Apr 2024 09:28:57 +0200 Subject: [PATCH 04/12] use canReportBeMentionedWithinPolicy function --- src/libs/ReportUtils.ts | 9 +++++++++ .../report/ReportActionCompose/SuggestionMention.tsx | 6 +----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index c9241054e74c..df6e4c748553 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -5752,6 +5752,14 @@ function getOutstandingChildRequest(iouReport: OnyxEntry | EmptyObject): return {}; } +function canReportBeMentionedWithinPolicy(report: OnyxEntry, policyId: string): boolean { + if (report?.policyID !== policyId) { + return false; + } + + return isChatRoom(report) && !isThread(report); +} + export { getReportParticipantsTitle, isReportMessageAttachment, @@ -5978,6 +5986,7 @@ export { hasActionsWithErrors, getGroupChatName, getOutstandingChildRequest, + canReportBeMentionedWithinPolicy, }; export type { diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 5533a2a72af3..6118ef4f8139 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -255,11 +255,7 @@ function SuggestionMention( (searchTerm: string, reportBatch: OnyxCollection): Mention[] => { const filteredRoomMentions: Mention[] = []; Object.values(reportBatch ?? {}).forEach((report) => { - if (report?.policyID !== policyID) { - return; - } - if (!ReportUtils.isGroupPolicy(report) || !isValidRoomName(report?.reportName ?? '')) { - // checking validity of room name removes Policy Expense Chats + if (!ReportUtils.canReportBeMentionedWithinPolicy(report, policyID ?? '')) { return; } if (report?.reportName?.toLowerCase().includes(searchTerm.toLowerCase())) { From 3c6ff594c8b4ae00975f0b3a486e0413041958d6 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Wed, 10 Apr 2024 21:29:20 +0200 Subject: [PATCH 05/12] additional review changes (typos & variable name changes) --- src/libs/ReportUtils.ts | 4 ++-- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 2 +- .../home/report/ReportActionCompose/SuggestionMention.tsx | 4 ++-- src/pages/home/report/ReportActionCompose/Suggestions.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index df6e4c748553..9247b61c175c 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -5752,8 +5752,8 @@ function getOutstandingChildRequest(iouReport: OnyxEntry | EmptyObject): return {}; } -function canReportBeMentionedWithinPolicy(report: OnyxEntry, policyId: string): boolean { - if (report?.policyID !== policyId) { +function canReportBeMentionedWithinPolicy(report: OnyxEntry, policyID: string): boolean { + if (report?.policyID !== policyID) { return false; } diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 072a55ddb111..7c130bb445f6 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -172,7 +172,7 @@ type ComposerWithSuggestionsProps = ComposerWithSuggestionsOnyxProps & // eslint-disable-next-line react/no-unused-prop-types -- its used in the withOnyx HOC parentReportID: string | undefined; - /** Whether chat is a reoprt from group policy */ + /** Whether report is from group policy */ isGroupPolicyReport: boolean; /** policy ID of the report */ diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 6118ef4f8139..65db300a95f2 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -332,8 +332,8 @@ function SuggestionMention( nextState.shouldShowSuggestionMenu = !!suggestions.length; } - const shouldDisplayMenetionsSuggestions = isGroupPolicyReport && (isValidRoomName(suggestionWord.toLowerCase()) || prefix === ''); - if (!isCursorBeforeTheMention && prefixType === '#' && shouldDisplayMenetionsSuggestions) { + const shouldDisplayRoomMentionsSuggestions = isGroupPolicyReport && (isValidRoomName(suggestionWord.toLowerCase()) || prefix === ''); + if (!isCursorBeforeTheMention && prefixType === '#' && shouldDisplayRoomMentionsSuggestions) { // filter reports by room name and current policy const filteredRoomMentions = getRoomMentionOptions(prefix, reports); nextState.suggestedMentions = filteredRoomMentions; diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.tsx b/src/pages/home/report/ReportActionCompose/Suggestions.tsx index d1abe0e3880c..87f975bdc30e 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/Suggestions.tsx @@ -47,7 +47,7 @@ type SuggestionProps = { /** The height of the composer */ composerHeight?: number; - /** if current composer is connected with report from group policy */ + /** If current composer is connected with report from group policy */ isGroupPolicyReport: boolean; /** policy ID connected to current composer */ From 5dfe2b58834f763661d6b9ff4b5cbeb73670bc00 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Wed, 10 Apr 2024 21:32:12 +0200 Subject: [PATCH 06/12] Update update policyID comment Co-authored-by: Puneet Lath --- src/pages/home/report/ReportActionCompose/Suggestions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.tsx b/src/pages/home/report/ReportActionCompose/Suggestions.tsx index 87f975bdc30e..d7f745145c5e 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/Suggestions.tsx @@ -50,7 +50,7 @@ type SuggestionProps = { /** If current composer is connected with report from group policy */ isGroupPolicyReport: boolean; - /** policy ID connected to current composer */ + /** The policyID of the report connected to current composer */ policyID?: string; }; From 1af1b5819552beafdaa1aee347898d49aab2e0e3 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Wed, 10 Apr 2024 21:42:06 +0200 Subject: [PATCH 07/12] run prettier --- .../ComposerWithSuggestions/ComposerWithSuggestions.tsx | 2 +- src/pages/home/report/ReportActionCompose/Suggestions.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx index 7c130bb445f6..8f42da5a1575 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx @@ -172,7 +172,7 @@ type ComposerWithSuggestionsProps = ComposerWithSuggestionsOnyxProps & // eslint-disable-next-line react/no-unused-prop-types -- its used in the withOnyx HOC parentReportID: string | undefined; - /** Whether report is from group policy */ + /** Whether report is from group policy */ isGroupPolicyReport: boolean; /** policy ID of the report */ diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.tsx b/src/pages/home/report/ReportActionCompose/Suggestions.tsx index d7f745145c5e..8ebd52f62428 100644 --- a/src/pages/home/report/ReportActionCompose/Suggestions.tsx +++ b/src/pages/home/report/ReportActionCompose/Suggestions.tsx @@ -47,7 +47,7 @@ type SuggestionProps = { /** The height of the composer */ composerHeight?: number; - /** If current composer is connected with report from group policy */ + /** If current composer is connected with report from group policy */ isGroupPolicyReport: boolean; /** The policyID of the report connected to current composer */ From 8836cf2ae68317820098d2a127a3d4947f0d1bd1 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Thu, 11 Apr 2024 20:29:18 +0200 Subject: [PATCH 08/12] generalize mention type to be less user specific --- src/components/MentionSuggestions.tsx | 8 ++++---- .../home/report/ReportActionCompose/SuggestionMention.tsx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index 8108929fc451..ecb64fd3a0b8 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -12,14 +12,14 @@ import Avatar from './Avatar'; import Text from './Text'; type Mention = { - /** Display name of the user */ + /** Display name of the mention */ text: string; - /** The formatted email/phone number of the user */ + /** The formatted text of the mention */ alternateText: string; - /** Email/phone number of the user */ - login?: string; + /** handle of the mention */ + handle?: string; /** Array of icons of the user. If present, we use the first element of this array. For room suggestions, the icons are not used */ icons?: Icon[]; diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 65db300a95f2..604799ab9e1e 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -110,9 +110,9 @@ function SuggestionMention( (mention: Mention, mentionType: string): string => { if (mentionType === '#') { // room mention case - return mention.login ?? ''; + return mention.handle ?? ''; } - return mention.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT ? CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT : `@${formatLoginPrivateDomain(mention.login, mention.login)}`; + return mention.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT ? CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT : `@${formatLoginPrivateDomain(mention.handle, mention.handle)}`; }, [formatLoginPrivateDomain], ); @@ -261,7 +261,7 @@ function SuggestionMention( if (report?.reportName?.toLowerCase().includes(searchTerm.toLowerCase())) { filteredRoomMentions.push({ text: report.reportName, - login: report.reportName, + handle: report.reportName, alternateText: report.reportName, }); } From f8345309b4d0c59dff50789813611af771de8283 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Thu, 11 Apr 2024 23:13:35 +0200 Subject: [PATCH 09/12] sort room mentions --- .../home/report/ReportActionCompose/SuggestionMention.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 604799ab9e1e..0b22a318bc3e 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -266,7 +266,8 @@ function SuggestionMention( }); } }); - return filteredRoomMentions.slice(0, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS); + + return lodashSortBy(filteredRoomMentions, 'handle').slice(0, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS); }, [policyID], ); From 45cd559d2a4af67b8610a87bb472840da087cf80 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Fri, 12 Apr 2024 01:10:57 +0200 Subject: [PATCH 10/12] prettier --- .../home/report/ReportActionCompose/SuggestionMention.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index 0b22a318bc3e..147799ee118b 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -266,8 +266,8 @@ function SuggestionMention( }); } }); - - return lodashSortBy(filteredRoomMentions, 'handle').slice(0, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS); + + return lodashSortBy(filteredRoomMentions, 'handle').slice(0, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS); }, [policyID], ); From 117a0939d00621de6bda9b38c93788ad819ab744 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Fri, 12 Apr 2024 18:40:14 +0200 Subject: [PATCH 11/12] update mentions comments --- src/components/MentionSuggestions.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index ecb64fd3a0b8..fbfa0b3abc04 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -12,16 +12,26 @@ import Avatar from './Avatar'; import Text from './Text'; type Mention = { - /** Display name of the mention */ + /** + * Main display text of the mention + * always visible right after icon (if present) + */ text: string; - /** The formatted text of the mention */ + /** + * additional text for the mention + * visible if it's value is different than Mention.text value + * rendered after Mention.text + */ alternateText: string; - /** handle of the mention */ + /** + * handle of the mention + * used as a value for the mention (e.g. in for the filtering or putting the mention in the message) + */ handle?: string; - /** Array of icons of the user. If present, we use the first element of this array. For room suggestions, the icons are not used */ + /** Array of icons of the mention. If present, we use the first element of this array. For room suggestions, the icons are not used */ icons?: Icon[]; }; From 8b64eb2e0af25c13600e8a121da229412a366007 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Fri, 12 Apr 2024 19:23:19 +0200 Subject: [PATCH 12/12] Make capitalization consistent Co-authored-by: Puneet Lath --- src/components/MentionSuggestions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index fbfa0b3abc04..3866911fff9e 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -19,14 +19,14 @@ type Mention = { text: string; /** - * additional text for the mention + * Additional text for the mention * visible if it's value is different than Mention.text value * rendered after Mention.text */ alternateText: string; /** - * handle of the mention + * Handle of the mention * used as a value for the mention (e.g. in for the filtering or putting the mention in the message) */ handle?: string;