diff --git a/src/components/HeaderWithBackButton/types.ts b/src/components/HeaderWithBackButton/types.ts index 939b2530fa3d..99e93e8d18d2 100644 --- a/src/components/HeaderWithBackButton/types.ts +++ b/src/components/HeaderWithBackButton/types.ts @@ -18,7 +18,7 @@ type ThreeDotsMenuItems = { onSelected: () => void; }; -type HeaderWithBackButtonProps = ChildrenProps & { +type HeaderWithBackButtonProps = Partial & { /** Title of the Header */ title?: string; diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index f75e3390136a..fc4f05eefd22 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -135,7 +135,7 @@ function OptionRowLHN(props) { props.reportID, '0', props.reportID, - '', + undefined, () => {}, () => setIsContextMenuActive(false), false, diff --git a/src/components/ShowContextMenuContext.js b/src/components/ShowContextMenuContext.js index 28822451956d..04ccd5002b60 100644 --- a/src/components/ShowContextMenuContext.js +++ b/src/components/ShowContextMenuContext.js @@ -35,7 +35,7 @@ function showContextMenuForReport(event, anchor, reportID, action, checkIfContex reportID, action.reportActionID, ReportUtils.getOriginalReportID(reportID, action), - '', + undefined, checkIfContextMenuActive, checkIfContextMenuActive, isArchivedRoom, diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 4a875ea7bf84..6a4914f44121 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -16,6 +16,7 @@ import ROUTES from '@src/ROUTES'; import {Beta, Login, PersonalDetails, PersonalDetailsList, Policy, Report, ReportAction, ReportMetadata, Session, Transaction} from '@src/types/onyx'; import {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; import {IOUMessage, OriginalMessageActionName, OriginalMessageCreated} from '@src/types/onyx/OriginalMessage'; +import {Status} from '@src/types/onyx/PersonalDetails'; import {NotificationPreference} from '@src/types/onyx/Report'; import {Message, ReportActionBase, ReportActions} from '@src/types/onyx/ReportAction'; import {Receipt, WaypointCollection} from '@src/types/onyx/Transaction'; @@ -329,7 +330,7 @@ type OptionData = { login?: string | null; accountID?: number | null; pronouns?: string; - status?: string | null; + status?: Status | null; phoneNumber?: string | null; isUnread?: boolean | null; isUnreadWithMention?: boolean | null; @@ -1179,7 +1180,7 @@ function formatReportLastMessageText(lastMessageText: string, isModifiedExpenseM if (isModifiedExpenseMessage) { return String(lastMessageText).trim().replace(CONST.REGEX.LINE_BREAK, '').trim(); } - return String(lastMessageText).trim().replace(CONST.REGEX.AFTER_FIRST_LINE_BREAK, '').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim(); + return String(lastMessageText).trim().replace(CONST.REGEX.LINE_BREAK, ' ').substring(0, CONST.REPORT.LAST_MESSAGE_TEXT_MAX_LENGTH).trim(); } /** diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index 06c0316a40b5..ef24b64ce7c7 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -1355,10 +1355,16 @@ function editReportComment(reportID: string, originalReportAction: OnyxEntry { // Add all migrations to an array so they are executed in order - const migrationPromises = [PersonalDetailsByAccountID, RenameReceiptFilename, KeyReportActionsDraftByReportActionID, TransactionBackupsToCollection]; + const migrationPromises = [PersonalDetailsByAccountID, RenameReceiptFilename, KeyReportActionsDraftByReportActionID, TransactionBackupsToCollection, RemoveEmptyReportActionsDrafts]; // Reduce all promises down to a single promise. All promises run in a linear fashion, waiting for the // previous promise to finish before moving onto the next one. diff --git a/src/libs/migrations/RemoveEmptyReportActionsDrafts.ts b/src/libs/migrations/RemoveEmptyReportActionsDrafts.ts new file mode 100644 index 000000000000..d8816198e537 --- /dev/null +++ b/src/libs/migrations/RemoveEmptyReportActionsDrafts.ts @@ -0,0 +1,76 @@ +import _ from 'lodash'; +import Onyx, {OnyxEntry} from 'react-native-onyx'; +import Log from '@libs/Log'; +import ONYXKEYS from '@src/ONYXKEYS'; +import {ReportActionsDraft, ReportActionsDrafts} from '@src/types/onyx'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; + +type ReportActionsDraftsKey = `${typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${string}`; + +/** + * This migration removes empty drafts from reportActionsDrafts, which was previously used to mark a draft as being non-existent (e.g. upon cancel). + */ +export default function (): Promise { + return new Promise((resolve) => { + const connectionID = Onyx.connect({ + key: ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS, + waitForCollectionCallback: true, + callback: (allReportActionsDrafts) => { + Onyx.disconnect(connectionID); + + if (!allReportActionsDrafts) { + Log.info('[Migrate Onyx] Skipped migration RemoveEmptyReportActionsDrafts because there were no reportActionsDrafts'); + return resolve(); + } + + const newReportActionsDrafts: Record> = {}; + Object.entries(allReportActionsDrafts).forEach(([onyxKey, reportActionDrafts]) => { + const newReportActionsDraftsForReport: Record = {}; + + // Whether there is at least one draft in this report that has to be migrated + let hasUnmigratedDraft = false; + + if (reportActionDrafts) { + Object.entries(reportActionDrafts).forEach(([reportActionID, reportActionDraft]) => { + // If the draft is a string, it means it hasn't been migrated yet + if (typeof reportActionDraft === 'string') { + hasUnmigratedDraft = true; + Log.info(`[Migrate Onyx] Migrating draft for report action ${reportActionID}`); + + if (_.isEmpty(reportActionDraft)) { + Log.info(`[Migrate Onyx] Removing draft for report action ${reportActionID}`); + return; + } + + newReportActionsDraftsForReport[reportActionID] = {message: reportActionDraft}; + } else { + // We've already migrated this draft, so keep the existing value + newReportActionsDraftsForReport[reportActionID] = reportActionDraft; + } + }); + } + + if (isEmptyObject(newReportActionsDraftsForReport)) { + Log.info('[Migrate Onyx] NO REMAINING'); + // Clear if there are no drafts remaining + newReportActionsDrafts[onyxKey as ReportActionsDraftsKey] = null; + } else if (hasUnmigratedDraft) { + // Only migrate if there are unmigrated drafts, there's no need to overwrite this onyx key with the same data + newReportActionsDrafts[onyxKey as ReportActionsDraftsKey] = newReportActionsDraftsForReport; + } + }); + + if (isEmptyObject(newReportActionsDrafts)) { + Log.info('[Migrate Onyx] Skipped migration RemoveEmptyReportActionsDrafts because there are no actions drafts to migrate'); + return resolve(); + } + + Log.info(`[Migrate Onyx] Updating drafts for ${Object.keys(newReportActionsDrafts).length} reports`); + Onyx.multiSet(newReportActionsDrafts).then(() => { + Log.info('[Migrate Onyx] Ran migration RemoveEmptyReportActionsDrafts successfully'); + resolve(); + }); + }, + }); + }); +} diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js index 7365d673dc50..b2e74a2b7cbf 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.js +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js @@ -380,7 +380,13 @@ export default [ Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(childReportID)); return; } - const editAction = () => Report.saveReportActionDraft(reportID, reportAction, _.isEmpty(draftMessage) ? getActionText(reportAction) : ''); + const editAction = () => { + if (_.isUndefined(draftMessage)) { + Report.saveReportActionDraft(reportID, reportAction, getActionText(reportAction)); + } else { + Report.deleteReportActionDraft(reportID, reportAction); + } + }; if (closePopover) { // Hide popover, then call editAction diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js index 30c68dd52a14..1c93c3bc90c7 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js @@ -17,7 +17,7 @@ function PopoverReportActionContextMenu(_props, ref) { const reportActionIDRef = useRef('0'); const originalReportIDRef = useRef('0'); const selectionRef = useRef(''); - const reportActionDraftMessageRef = useRef(''); + const reportActionDraftMessageRef = useRef(undefined); const cursorRelativePosition = useRef({ horizontal: 0, @@ -226,7 +226,7 @@ function PopoverReportActionContextMenu(_props, ref) { } selectionRef.current = ''; - reportActionDraftMessageRef.current = ''; + reportActionDraftMessageRef.current = undefined; setIsPopoverVisible(false); }; diff --git a/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts b/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts index b269bc276b55..1e1fc700d8e0 100644 --- a/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts +++ b/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts @@ -98,7 +98,7 @@ function showContextMenu( reportID = '0', reportActionID = '0', originalReportID = '0', - draftMessage = '', + draftMessage = undefined, onShow = () => {}, onHide = () => {}, isArchivedRoom = false, diff --git a/src/pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes.js b/src/pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes.js index 3d8667e44e62..b9f892c1b9ff 100644 --- a/src/pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes.js +++ b/src/pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes.js @@ -28,7 +28,7 @@ const defaultProps = { isMini: false, isVisible: false, selection: '', - draftMessage: '', + draftMessage: undefined, }; export {propTypes, defaultProps}; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 0edee4b48241..c2e8234ab23f 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -5,6 +5,7 @@ import {findNodeHandle, InteractionManager, NativeModules, View} from 'react-nat import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import Composer from '@components/Composer'; +import {PopoverContext} from '@components/PopoverProvider'; import withKeyboardState from '@components/withKeyboardState'; import useDebounce from '@hooks/useDebounce'; import useLocalize from '@hooks/useLocalize'; @@ -106,6 +107,7 @@ function ComposerWithSuggestions({ // For testing children, }) { + const {isOpen: isPopoverOpen} = React.useContext(PopoverContext); const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -427,9 +429,15 @@ function ComposerWithSuggestions({ * @param {Boolean} [shouldDelay=false] Impose delay before focusing the composer * @memberof ReportActionCompose */ - const focus = useCallback((shouldDelay = false) => { - focusComposerWithDelay(textInputRef.current)(shouldDelay); - }, []); + const focus = useCallback( + (shouldDelay = false) => { + if (isPopoverOpen) { + return; + } + focusComposerWithDelay(textInputRef.current)(shouldDelay); + }, + [isPopoverOpen], + ); const setUpComposeFocusManager = useCallback(() => { // This callback is used in the contextMenuActions to manage giving focus back to the compose input. diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index e2a345d33a32..a7972b97f5c1 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -120,7 +120,7 @@ const propTypes = { }; const defaultProps = { - draftMessage: '', + draftMessage: undefined, preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE, emojiReactions: {}, shouldShowSubscriptAvatar: false, @@ -197,7 +197,7 @@ function ReportActionItem(props) { }, [isDeletedParentAction, props.action.reportActionID]); useEffect(() => { - if (prevDraftMessage || !props.draftMessage) { + if (!_.isUndefined(prevDraftMessage) || _.isUndefined(props.draftMessage)) { return; } @@ -219,10 +219,10 @@ function ReportActionItem(props) { }, [props.action, props.report.reportID]); useEffect(() => { - if (!props.draftMessage || !ReportActionsUtils.isDeletedAction(props.action)) { + if (_.isUndefined(props.draftMessage) || !ReportActionsUtils.isDeletedAction(props.action)) { return; } - Report.saveReportActionDraft(props.report.reportID, props.action, ''); + Report.deleteReportActionDraft(props.report.reportID, props.action); }, [props.draftMessage, props.action, props.report.reportID]); // Hide the message if it is being moderated for a higher offense, or is hidden by a moderator @@ -260,7 +260,7 @@ function ReportActionItem(props) { const showPopover = useCallback( (event) => { // Block menu on the message being Edited or if the report action item has errors - if (props.draftMessage || !_.isEmpty(props.action.errors)) { + if (!_.isUndefined(props.draftMessage) || !_.isEmpty(props.action.errors)) { return; } @@ -426,7 +426,7 @@ function ReportActionItem(props) { const hasBeenFlagged = !_.contains([CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING], moderationDecision); children = ( - {!props.draftMessage ? ( + {_.isUndefined(props.draftMessage) ? ( Number(accountID)); - const draftMessageRightAlign = props.draftMessage ? styles.chatItemReactionsDraftRight : {}; + const draftMessageRightAlign = !_.isUndefined(props.draftMessage) ? styles.chatItemReactionsDraftRight : {}; return ( <> {children} {Permissions.canUseLinkPreviews() && !isHidden && !_.isEmpty(props.action.linkMetadata) && ( - + !_.isEmpty(item))} /> )} @@ -542,7 +542,7 @@ function ReportActionItem(props) { const renderReportActionItem = (hovered, isWhisper, hasErrors) => { const content = renderItemContent(hovered || isContextMenuActive, isWhisper, hasErrors); - if (props.draftMessage) { + if (!_.isUndefined(props.draftMessage)) { return {content}; } @@ -550,7 +550,7 @@ function ReportActionItem(props) { return ( ${props.translate('parentReportAction.deletedTask')}`} /> @@ -664,13 +664,13 @@ function ReportActionItem(props) { onPressIn={() => props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} onPressOut={() => ControlSelection.unblock()} onSecondaryInteraction={showPopover} - preventDefaultContextMenu={!props.draftMessage && !hasErrors} + preventDefaultContextMenu={_.isUndefined(props.draftMessage) && !hasErrors} withoutFocusOnSecondaryInteraction accessibilityLabel={props.translate('accessibilityHints.chatMessage')} > {(hovered) => ( @@ -681,14 +681,14 @@ function ReportActionItem(props) { originalReportID={originalReportID} isArchivedRoom={ReportUtils.isArchivedRoom(props.report)} displayAsGroup={props.displayAsGroup} - isVisible={hovered && !props.draftMessage && !hasErrors} + isVisible={hovered && _.isUndefined(props.draftMessage) && !hasErrors} draftMessage={props.draftMessage} isChronosReport={ReportUtils.chatIncludesChronos(originalReport)} /> - + ReportActions.clearReportActionErrors(props.report.reportID, props.action)} - pendingAction={props.draftMessage ? null : props.action.pendingAction} + pendingAction={!_.isUndefined(props.draftMessage) ? null : props.action.pendingAction} shouldHideOnDelete={!ReportActionsUtils.isThreadParentMessage(props.action, props.report.reportID)} errors={props.action.errors} errorRowStyles={[styles.ml10, styles.mr2]} @@ -744,7 +744,7 @@ export default compose( transformValue: (drafts, props) => { const originalReportID = ReportUtils.getOriginalReportID(props.report.reportID, props.action); const draftKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`; - return lodashGet(drafts, [draftKey, props.action.reportActionID], ''); + return lodashGet(drafts, [draftKey, props.action.reportActionID, 'message']); }, }), withOnyx({ diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index d2b22921a15d..dbd3262f30d5 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -270,16 +270,10 @@ function ReportActionItemMessageEdit(props) { draftRef.current = newDraft; - // This component is rendered only when draft is set to a non-empty string. In order to prevent component - // unmount when user deletes content of textarea, we set previous message instead of empty string. - if (newDraft.trim().length > 0) { - // We want to escape the draft message to differentiate the HTML from the report action and the HTML the user drafted. - debouncedSaveDraft(_.escape(newDraft)); - } else { - debouncedSaveDraft(props.action.message[0].html); - } + // We want to escape the draft message to differentiate the HTML from the report action and the HTML the user drafted. + debouncedSaveDraft(_.escape(newDraft)); }, - [props.action.message, debouncedSaveDraft, debouncedUpdateFrequentlyUsedEmojis, props.preferredSkinTone, preferredLocale, selection.end], + [debouncedSaveDraft, debouncedUpdateFrequentlyUsedEmojis, props.preferredSkinTone, preferredLocale, selection.end], ); useEffect(() => { @@ -292,7 +286,7 @@ function ReportActionItemMessageEdit(props) { */ const deleteDraft = useCallback(() => { debouncedSaveDraft.cancel(); - Report.saveReportActionDraft(props.reportID, props.action, ''); + Report.deleteReportActionDraft(props.reportID, props.action); if (isActive()) { ReportActionComposeFocusManager.clear(); diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.tsx similarity index 57% rename from src/pages/home/report/ReportActionItemSingle.js rename to src/pages/home/report/ReportActionItemSingle.tsx index c47274fa5f94..69bbd924caef 100644 --- a/src/pages/home/report/ReportActionItemSingle.js +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -1,8 +1,5 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import React, {useCallback, useMemo} from 'react'; -import {View} from 'react-native'; -import _ from 'underscore'; +import {StyleProp, View, ViewStyle} from 'react-native'; import Avatar from '@components/Avatar'; import MultipleAvatars from '@components/MultipleAvatars'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; @@ -12,7 +9,7 @@ import SubscriptAvatar from '@components/SubscriptAvatar'; import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -21,112 +18,136 @@ import DateUtils from '@libs/DateUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as UserUtils from '@libs/UserUtils'; -import reportPropTypes from '@pages/reportPropTypes'; -import stylePropTypes from '@styles/stylePropTypes'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; +import type {Report, ReportAction} from '@src/types/onyx'; +import {AvatarType} from '@src/types/onyx/OnyxCommon'; import ReportActionItemDate from './ReportActionItemDate'; import ReportActionItemFragment from './ReportActionItemFragment'; -import reportActionPropTypes from './reportActionPropTypes'; -const propTypes = { +type ReportActionItemSingleProps = { /** All the data of the action */ - action: PropTypes.shape(reportActionPropTypes).isRequired, + action: ReportAction; /** Styles for the outermost View */ - wrapperStyle: stylePropTypes, + wrapperStyle?: StyleProp; /** Children view component for this action item */ - children: PropTypes.node.isRequired, + children: React.ReactNode; /** Report for this action */ - report: reportPropTypes, + report: Report; /** IOU Report for this action, if any */ - iouReport: reportPropTypes, + iouReport?: Report; /** Show header for action */ - showHeader: PropTypes.bool, + showHeader?: boolean; /** Determines if the avatar is displayed as a subscript (positioned lower than normal) */ - shouldShowSubscriptAvatar: PropTypes.bool, + shouldShowSubscriptAvatar?: boolean; /** If the message has been flagged for moderation */ - hasBeenFlagged: PropTypes.bool, + hasBeenFlagged?: boolean; /** If the action is being hovered */ - isHovered: PropTypes.bool, - - ...withLocalizePropTypes, + isHovered?: boolean; }; -const defaultProps = { - wrapperStyle: undefined, - showHeader: true, - shouldShowSubscriptAvatar: false, - hasBeenFlagged: false, - report: undefined, - iouReport: undefined, - isHovered: false, +type SubAvatar = { + /** Avatar source to display */ + source: UserUtils.AvatarSource; + + /** Denotes whether it is a user avatar or a workspace avatar */ + type: AvatarType; + + /** Owner of the avatar. If user, displayName. If workspace, policy name */ + name: string; + + /** Avatar id */ + id?: number | string; + + /** A fallback avatar icon to display when there is an error on loading avatar from remote URL */ + fallbackIcon?: UserUtils.AvatarSource; }; -const showUserDetails = (accountID) => { +const showUserDetails = (accountID: string) => { Navigation.navigate(ROUTES.PROFILE.getRoute(accountID)); }; -const showWorkspaceDetails = (reportID) => { +const showWorkspaceDetails = (reportID: string) => { Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID)); }; -function ReportActionItemSingle(props) { +function ReportActionItemSingle({ + action, + children, + wrapperStyle, + showHeader = true, + shouldShowSubscriptAvatar = false, + hasBeenFlagged = false, + report, + iouReport, + isHovered = false, +}: ReportActionItemSingleProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; - const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID : props.action.actorAccountID; + const {translate} = useLocalize(); + const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT; + const actorAccountID = action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport ? iouReport.managerID : action.actorAccountID; let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID); - const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID] || {}; - let actorHint = (login || displayName || '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''); - const displayAllActors = useMemo(() => props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport, [props.action.actionName, props.iouReport]); - const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(props.report) && (!actorAccountID || displayAllActors); - let avatarSource = UserUtils.getAvatar(avatar, actorAccountID); + const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID ?? -1] ?? {}; + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + let actorHint = (login || (displayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, ''); + const displayAllActors = useMemo(() => action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport, [action.actionName, iouReport]); + const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors); + let avatarSource = UserUtils.getAvatar(avatar ?? '', actorAccountID); if (isWorkspaceActor) { - displayName = ReportUtils.getPolicyName(props.report); + displayName = ReportUtils.getPolicyName(report); actorHint = displayName; - avatarSource = ReportUtils.getWorkspaceAvatar(props.report); - } else if (props.action.delegateAccountID && personalDetails[props.action.delegateAccountID]) { + avatarSource = ReportUtils.getWorkspaceAvatar(report); + } else if (action.delegateAccountID && personalDetails[action.delegateAccountID]) { // We replace the actor's email, name, and avatar with the Copilot manually for now. And only if we have their // details. This will be improved upon when the Copilot feature is implemented. - const delegateDetails = personalDetails[props.action.delegateAccountID]; - const delegateDisplayName = delegateDetails.displayName; - actorHint = `${delegateDisplayName} (${props.translate('reportAction.asCopilot')} ${displayName})`; + const delegateDetails = personalDetails[action.delegateAccountID]; + const delegateDisplayName = delegateDetails?.displayName; + actorHint = `${delegateDisplayName} (${translate('reportAction.asCopilot')} ${displayName})`; displayName = actorHint; - avatarSource = UserUtils.getAvatar(delegateDetails.avatar, props.action.delegateAccountID); + avatarSource = UserUtils.getAvatar(delegateDetails?.avatar ?? '', Number(action.delegateAccountID)); } // If this is a report preview, display names and avatars of both people involved - let secondaryAvatar = {}; + let secondaryAvatar: SubAvatar; const primaryDisplayName = displayName; if (displayAllActors) { // The ownerAccountID and actorAccountID can be the same if the a user requests money back from the IOU's original creator, in that case we need to use managerID to avoid displaying the same user twice - const secondaryAccountId = props.iouReport.ownerAccountID === actorAccountID ? props.iouReport.managerID : props.iouReport.ownerAccountID; - const secondaryUserDetails = personalDetails[secondaryAccountId] || {}; + const secondaryAccountId = iouReport?.ownerAccountID === actorAccountID ? iouReport?.managerID : iouReport?.ownerAccountID; + const secondaryUserAvatar = personalDetails?.[secondaryAccountId ?? -1]?.avatar ?? ''; const secondaryDisplayName = ReportUtils.getDisplayNameForParticipant(secondaryAccountId); displayName = `${primaryDisplayName} & ${secondaryDisplayName}`; secondaryAvatar = { - source: UserUtils.getAvatar(secondaryUserDetails.avatar, secondaryAccountId), + source: UserUtils.getAvatar(secondaryUserAvatar, secondaryAccountId), type: CONST.ICON_TYPE_AVATAR, - name: secondaryDisplayName, + name: secondaryDisplayName ?? '', id: secondaryAccountId, }; } else if (!isWorkspaceActor) { - const avatarIconIndex = props.report.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(props.report) ? 0 : 1; - const reportIcons = ReportUtils.getIcons(props.report, {}); + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + const avatarIconIndex = report.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1; + const reportIcons = ReportUtils.getIcons(report, {}); secondaryAvatar = reportIcons[avatarIconIndex]; + } else { + secondaryAvatar = {name: '', source: '', type: 'avatar'}; } - const icon = {source: avatarSource, type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR, name: primaryDisplayName, id: isWorkspaceActor ? '' : actorAccountID}; + const icon = { + source: avatarSource, + type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR, + name: primaryDisplayName ?? '', + id: isWorkspaceActor ? '' : actorAccountID, + }; // Since the display name for a report action message is delivered with the report history as an array of fragments // we'll need to take the displayName from personal details and have it be in the same format for now. Eventually, @@ -138,29 +159,29 @@ function ReportActionItemSingle(props) { text: displayName, }, ] - : props.action.person; + : action.person; - const reportID = props.report && props.report.reportID; - const iouReportID = props.iouReport && props.iouReport.reportID; + const reportID = report?.reportID; + const iouReportID = iouReport?.reportID; const showActorDetails = useCallback(() => { if (isWorkspaceActor) { showWorkspaceDetails(reportID); } else { // Show participants page IOU report preview - if (displayAllActors) { + if (iouReportID && displayAllActors) { Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(iouReportID)); return; } - showUserDetails(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID); + showUserDetails(action.delegateAccountID ? action.delegateAccountID : String(actorAccountID)); } - }, [isWorkspaceActor, reportID, actorAccountID, props.action.delegateAccountID, iouReportID, displayAllActors]); + }, [isWorkspaceActor, reportID, actorAccountID, action.delegateAccountID, iouReportID, displayAllActors]); const shouldDisableDetailPage = useMemo( () => actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS || - (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID)), - [props.action, isWorkspaceActor, actorAccountID], + (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(action.delegateAccountID ? Number(action.delegateAccountID) : actorAccountID ?? -1)), + [action, isWorkspaceActor, actorAccountID], ); const getAvatar = () => { @@ -170,17 +191,15 @@ function ReportActionItemSingle(props) { icons={[icon, secondaryAvatar]} isInReportAction shouldShowTooltip - secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.hoverComponentBG) : undefined]} + secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.hoverComponentBG) : undefined]} /> ); } - if (props.shouldShowSubscriptAvatar) { + if (shouldShowSubscriptAvatar) { return ( ); @@ -188,7 +207,7 @@ function ReportActionItemSingle(props) { return ( @@ -203,13 +222,13 @@ function ReportActionItemSingle(props) { ); }; - const hasEmojiStatus = !displayAllActors && status && status.emojiCode; - const formattedDate = DateUtils.getStatusUntilDate(lodashGet(status, 'clearAfter')); - const statusText = lodashGet(status, 'text', ''); + const hasEmojiStatus = !displayAllActors && status?.emojiCode; + const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? ''); + const statusText = status?.text ?? ''; const statusTooltipText = formattedDate ? `${statusText ? `${statusText} ` : ''}(${formattedDate})` : statusText; return ( - + - {getAvatar()} + {getAvatar()} - {props.showHeader ? ( + {showHeader ? ( - {_.map(personArray, (fragment, index) => ( + {personArray?.map((fragment, index) => ( @@ -249,20 +269,18 @@ function ReportActionItemSingle(props) { {`${status.emojiCode}`} + >{`${status?.emojiCode}`} )} - + ) : null} - {props.children} + {children} ); } -ReportActionItemSingle.propTypes = propTypes; -ReportActionItemSingle.defaultProps = defaultProps; ReportActionItemSingle.displayName = 'ReportActionItemSingle'; -export default withLocalize(ReportActionItemSingle); +export default ReportActionItemSingle; diff --git a/src/types/onyx/PersonalDetails.ts b/src/types/onyx/PersonalDetails.ts index 9f613cbf4f1e..03aa7e4ec928 100644 --- a/src/types/onyx/PersonalDetails.ts +++ b/src/types/onyx/PersonalDetails.ts @@ -12,6 +12,17 @@ type Timezone = { automatic?: boolean; }; +type Status = { + /** The emoji code of the status */ + emojiCode: string; + + /** The text of the draft status */ + text?: string; + + /** The timestamp of when the status should be cleared */ + clearAfter: string; // ISO 8601 format; +}; + type PersonalDetails = { /** ID of the current user from their personal details */ accountID: number; @@ -70,11 +81,11 @@ type PersonalDetails = { fallbackIcon?: string; /** Status of the current user from their personal details */ - status?: string; + status?: Status; }; type PersonalDetailsList = Record; export default PersonalDetails; -export type {Timezone, SelectedTimezone, PersonalDetailsList}; +export type {Timezone, Status, SelectedTimezone, PersonalDetailsList}; diff --git a/src/types/onyx/ReportActionsDraft.ts b/src/types/onyx/ReportActionsDraft.ts new file mode 100644 index 000000000000..41a701f16e71 --- /dev/null +++ b/src/types/onyx/ReportActionsDraft.ts @@ -0,0 +1,7 @@ +type ReportActionsDraft = + | { + message: string; + } + | string; + +export default ReportActionsDraft; diff --git a/src/types/onyx/ReportActionsDrafts.ts b/src/types/onyx/ReportActionsDrafts.ts index e40007b6b47a..ad2782111144 100644 --- a/src/types/onyx/ReportActionsDrafts.ts +++ b/src/types/onyx/ReportActionsDrafts.ts @@ -1,3 +1,5 @@ -type ReportActionsDrafts = Record; +import ReportActionsDraft from './ReportActionsDraft'; + +type ReportActionsDrafts = Record; export default ReportActionsDrafts; diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts index 3d4eef500f1d..efa1ae1fe630 100644 --- a/src/types/onyx/index.ts +++ b/src/types/onyx/index.ts @@ -36,6 +36,7 @@ import ReimbursementAccountDraft from './ReimbursementAccountDraft'; import Report from './Report'; import ReportAction, {ReportActions} from './ReportAction'; import ReportActionReactions from './ReportActionReactions'; +import ReportActionsDraft from './ReportActionsDraft'; import ReportActionsDrafts from './ReportActionsDrafts'; import ReportMetadata from './ReportMetadata'; import ReportNextStep from './ReportNextStep'; @@ -105,6 +106,7 @@ export type { ReportAction, ReportActionReactions, ReportActions, + ReportActionsDraft, ReportActionsDrafts, ReportMetadata, ReportNextStep, diff --git a/tests/unit/CalendarPickerTest.js b/tests/unit/CalendarPickerTest.js index 9c5ea4bc72f6..e1c11fbb8ca8 100644 --- a/tests/unit/CalendarPickerTest.js +++ b/tests/unit/CalendarPickerTest.js @@ -1,5 +1,5 @@ import {fireEvent, render, within} from '@testing-library/react-native'; -import {addMonths, addYears, subYears} from 'date-fns'; +import {addMonths, addYears, subMonths, subYears} from 'date-fns'; import CalendarPicker from '../../src/components/DatePicker/CalendarPicker'; import CONST from '../../src/CONST'; import DateUtils from '../../src/libs/DateUtils'; @@ -73,7 +73,7 @@ describe('CalendarPicker', () => { fireEvent.press(getByTestId('prev-month-arrow')); - const prevMonth = new Date().getMonth() - 1; + const prevMonth = subMonths(new Date(), 1).getMonth(); expect(getByText(monthNames[prevMonth])).toBeTruthy(); });