From c5563d69bb8e130877c539800e21dddc35285ccf Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 00:42:13 +0100 Subject: [PATCH 01/12] Redesign thread ancestry --- assets/images/thread.svg | 3 ++ src/components/Icon/Expensicons.ts | 2 + src/languages/en.ts | 1 + src/languages/es.ts | 1 + src/libs/ReportUtils.ts | 3 -- src/pages/home/report/RepliesDivider.tsx | 36 +++++++++++++ src/pages/home/report/ReportActionItem.tsx | 2 +- .../report/ReportActionItemParentAction.tsx | 12 +++-- src/pages/home/report/ThreadDivider.tsx | 51 +++++++++++++++++++ src/styles/index.ts | 9 +++- src/styles/utils/index.ts | 4 +- 11 files changed, 114 insertions(+), 10 deletions(-) create mode 100644 assets/images/thread.svg create mode 100644 src/pages/home/report/RepliesDivider.tsx create mode 100644 src/pages/home/report/ThreadDivider.tsx diff --git a/assets/images/thread.svg b/assets/images/thread.svg new file mode 100644 index 000000000000..3b8f334fafdd --- /dev/null +++ b/assets/images/thread.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index 73a091815460..91e311f5e6ea 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -139,6 +139,7 @@ import Sync from '@assets/images/sync.svg'; import Tag from '@assets/images/tag.svg'; import Task from '@assets/images/task.svg'; import Tax from '@assets/images/tax.svg'; +import Thread from '@assets/images/thread.svg'; import ThreeDots from '@assets/images/three-dots.svg'; import ThumbsUp from '@assets/images/thumbs-up.svg'; import Transfer from '@assets/images/transfer.svg'; @@ -228,6 +229,7 @@ export { Folder, Tag, Tax, + Thread, Gallery, Gear, Globe, diff --git a/src/languages/en.ts b/src/languages/en.ts index 54dcb8717a6d..ff26cb20bd12 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -2332,6 +2332,7 @@ export default { hiddenMessage: '[Hidden message]', }, threads: { + thread: 'Thread', replies: 'Replies', reply: 'Reply', from: 'From', diff --git a/src/languages/es.ts b/src/languages/es.ts index 8e8e3356476c..d4fa33e4f6a9 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2820,6 +2820,7 @@ export default { hiddenMessage: '[Mensaje oculto]', }, threads: { + thread: 'Hilo', replies: 'Respuestas', reply: 'Respuesta', from: 'De', diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index b5351e13ea6c..1069414bc873 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -418,7 +418,6 @@ type Ancestor = { report: Report; reportAction: ReportAction; shouldDisplayNewMarker: boolean; - shouldHideThreadDividerLine: boolean; }; type AncestorIDs = { @@ -5233,8 +5232,6 @@ function getAllAncestorReportActions(report: Report | null | undefined, shouldHi report: currentReport, reportAction: parentReportAction, shouldDisplayNewMarker: isParentReportActionUnread, - // We should hide the thread divider line if the previous ancestor action is unread - shouldHideThreadDividerLine: currentUnread, }); parentReportID = parentReport?.parentReportID; parentReportActionID = parentReport?.parentReportActionID; diff --git a/src/pages/home/report/RepliesDivider.tsx b/src/pages/home/report/RepliesDivider.tsx new file mode 100644 index 000000000000..55d1219ea3ff --- /dev/null +++ b/src/pages/home/report/RepliesDivider.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import {View} from 'react-native'; +import Icon from '@components/Icon'; +import * as Expensicons from '@components/Icon/Expensicons'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import variables from '@styles/variables'; + +type RepliesDividerProps = { + /** Whether we should hide thread divider line **/ + shouldHideThreadDividerLine: boolean; +}; + +function RepliesDivider({shouldHideThreadDividerLine}: RepliesDividerProps) { + const styles = useThemeStyles(); + const theme = useTheme(); + const {translate} = useLocalize(); + + return ( + + + {translate('threads.replies')} + {!shouldHideThreadDividerLine && } + + ); +} + +RepliesDivider.displayName = 'RepliesDivider'; +export default RepliesDivider; diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index f0280b27efa0..088e92ad2d95 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -820,7 +820,7 @@ function ReportActionItem({ checkIfContextMenuActive={toggleContextMenuFromActiveReportAction} setIsEmojiPickerActive={setIsEmojiPickerActive} /> - + ReportActions.clearReportActionErrors(report.reportID, action)} // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 7185ab728ccd..34685fb265c8 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -13,7 +13,9 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; +import RepliesDivider from './RepliesDivider'; import ReportActionItem from './ReportActionItem'; +import ThreadDivider from './ThreadDivider'; type ReportActionItemParentActionProps = { /** Flag to show, hide the thread divider line */ @@ -73,7 +75,7 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh - {allAncestors.map((ancestor) => ( + {allAncestors.map((ancestor, index) => ( Report.navigateToConciergeChatAndDeleteReport(ancestor.report.reportID)} > + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.reportID))} + onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''))} parentReportAction={parentReportAction} report={ancestor.report} action={ancestor.reportAction} @@ -92,9 +98,9 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh shouldDisplayNewMarker={ancestor.shouldDisplayNewMarker} index={index} /> - {!ancestor.shouldHideThreadDividerLine && } ))} + ); } diff --git a/src/pages/home/report/ThreadDivider.tsx b/src/pages/home/report/ThreadDivider.tsx new file mode 100644 index 000000000000..812f23734183 --- /dev/null +++ b/src/pages/home/report/ThreadDivider.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import {StyleProp, View, ViewStyle} from 'react-native'; +import * as Expensicons from '@components/Icon/Expensicons'; +import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Navigation from '@libs/Navigation/Navigation'; +import type {Ancestor} from '@libs/ReportUtils'; +import variables from '@styles/variables'; +import CONST from '@src/CONST'; +import ROUTES from '@src/ROUTES'; +import Icon from '../../../components/Icon'; +import {PressableWithoutFeedback} from '../../../components/Pressable'; +import Text from '../../../components/Text'; + +type ThreadDividerProps = { + /** Thread ancestor **/ + ancestor: Ancestor; + + /** Extra styles to pass to View wrapper */ + style?: StyleProp; +}; + +function ThreadDivider({ancestor, style}: ThreadDividerProps) { + const styles = useThemeStyles(); + const theme = useTheme(); + const {translate} = useLocalize(); + + return ( + + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor?.report?.parentReportID ?? ''))} + accessibilityLabel={translate('threads.thread')} + role={CONST.ROLE.BUTTON} + style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]} + > + + {translate('threads.thread')} + + {!ancestor.shouldDisplayNewMarker && } + + ); +} + +ThreadDivider.displayName = 'ThreadDivider'; +export default ThreadDivider; diff --git a/src/styles/index.ts b/src/styles/index.ts index 8a65cabaf19f..f0fd878aee01 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2752,7 +2752,8 @@ const styles = (theme: ThemeColors) => height: 1, backgroundColor: theme.border, flexGrow: 1, - marginHorizontal: 20, + marginLeft: 8, + marginRight: 20, }, unreadIndicatorText: { @@ -2763,6 +2764,12 @@ const styles = (theme: ThemeColors) => textTransform: 'capitalize', }, + threadDividerText: { + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, + fontSize: variables.fontSizeSmall, + textTransform: 'capitalize', + }, + flipUpsideDown: { transform: `rotate(180deg)`, }, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 4c66967f52b9..085633e828b5 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1439,7 +1439,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ /** * Generate the styles for the ReportActionItem wrapper view. */ - getReportActionItemStyle: (isHovered = false): ViewStyle => + getReportActionItemStyle: (isHovered = false, isClickable = false): ViewStyle => // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337) // eslint-disable-next-line @typescript-eslint/no-unsafe-return ({ @@ -1450,7 +1450,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ : // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android theme.transparent, opacity: 1, - ...styles.cursorInitial, + ...(isClickable ? styles.cursorPointer : styles.cursorInitial), }), /** From 2da0db8e1668b30adaf2bf1b88194780c7f98b59 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 01:01:13 +0100 Subject: [PATCH 02/12] fix lint errors --- src/libs/ReportUtils.ts | 2 -- src/pages/home/report/RepliesDivider.tsx | 2 +- .../home/report/ReportActionItemParentAction.tsx | 4 ++-- src/pages/home/report/ThreadDivider.tsx | 11 ++++++----- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 1069414bc873..c90561012747 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -5217,7 +5217,6 @@ function getAllAncestorReportActions(report: Report | null | undefined, shouldHi // Store the child of parent report let currentReport = report; - let currentUnread = shouldHideThreadDividerLine; while (parentReportID) { const parentReport = getReport(parentReportID); @@ -5237,7 +5236,6 @@ function getAllAncestorReportActions(report: Report | null | undefined, shouldHi parentReportActionID = parentReport?.parentReportActionID; if (!isEmptyObject(parentReport)) { currentReport = parentReport; - currentUnread = isParentReportActionUnread; } } diff --git a/src/pages/home/report/RepliesDivider.tsx b/src/pages/home/report/RepliesDivider.tsx index 55d1219ea3ff..7ab361cc0d86 100644 --- a/src/pages/home/report/RepliesDivider.tsx +++ b/src/pages/home/report/RepliesDivider.tsx @@ -9,7 +9,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; type RepliesDividerProps = { - /** Whether we should hide thread divider line **/ + /** Whether we should hide thread divider line */ shouldHideThreadDividerLine: boolean; }; diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 34685fb265c8..a05ba76126bc 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -75,7 +75,7 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh - {allAncestors.map((ancestor, index) => ( + {allAncestors.map((ancestor, ancestorIndex) => ( Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''))} diff --git a/src/pages/home/report/ThreadDivider.tsx b/src/pages/home/report/ThreadDivider.tsx index 812f23734183..8d371dcefdda 100644 --- a/src/pages/home/report/ThreadDivider.tsx +++ b/src/pages/home/report/ThreadDivider.tsx @@ -1,6 +1,10 @@ import React from 'react'; -import {StyleProp, View, ViewStyle} from 'react-native'; +import {View} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; +import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; +import {PressableWithoutFeedback} from '@components/Pressable'; +import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -9,12 +13,9 @@ import type {Ancestor} from '@libs/ReportUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; -import Icon from '../../../components/Icon'; -import {PressableWithoutFeedback} from '../../../components/Pressable'; -import Text from '../../../components/Text'; type ThreadDividerProps = { - /** Thread ancestor **/ + /** Thread ancestor */ ancestor: Ancestor; /** Extra styles to pass to View wrapper */ From d4e5d3cda0defa2aba5ca98542089312ef292c57 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 12:18:55 +0100 Subject: [PATCH 03/12] fix lint errors --- src/libs/ReportUtils.ts | 2 +- src/pages/home/report/ReportActionItemParentAction.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index c90561012747..0ce405eaa98b 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -5207,7 +5207,7 @@ function shouldDisableThread(reportAction: OnyxEntry, reportID: st ); } -function getAllAncestorReportActions(report: Report | null | undefined, shouldHideThreadDividerLine: boolean): Ancestor[] { +function getAllAncestorReportActions(report: Report | null | undefined): Ancestor[] { if (!report) { return []; } diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index a05ba76126bc..18bb4c82249f 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -50,7 +50,7 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh onyxSubscribe({ key: `${ONYXKEYS.COLLECTION.REPORT}${ancestorReportID}`, callback: () => { - setAllAncestors(ReportUtils.getAllAncestorReportActions(report, shouldHideThreadDividerLine)); + setAllAncestors(ReportUtils.getAllAncestorReportActions(report)); }, }), ); @@ -58,7 +58,7 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh onyxSubscribe({ key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestorReportID}`, callback: () => { - setAllAncestors(ReportUtils.getAllAncestorReportActions(report, shouldHideThreadDividerLine)); + setAllAncestors(ReportUtils.getAllAncestorReportActions(report)); }, }), ); From 24f7d3d19690891c1bc0f539496c7f71c7c85835 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 12:19:08 +0100 Subject: [PATCH 04/12] fix failing test --- tests/unit/ReportUtilsTest.js | 31 +++++-------------------------- 1 file changed, 5 insertions(+), 26 deletions(-) diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js index 9fbea1df862e..22a85c0f7656 100644 --- a/tests/unit/ReportUtilsTest.js +++ b/tests/unit/ReportUtilsTest.js @@ -673,34 +673,13 @@ describe('ReportUtils', () => { it('should return correctly all ancestors of a thread report', () => { const resultAncestors = [ - {report: reports[1], reportAction: reportActions[0], shouldDisplayNewMarker: false, shouldHideThreadDividerLine: false}, - {report: reports[2], reportAction: reportActions[1], shouldDisplayNewMarker: false, shouldHideThreadDividerLine: false}, - {report: reports[3], reportAction: reportActions[2], shouldDisplayNewMarker: false, shouldHideThreadDividerLine: false}, - {report: reports[4], reportAction: reportActions[3], shouldDisplayNewMarker: false, shouldHideThreadDividerLine: false}, + {report: reports[1], reportAction: reportActions[0], shouldDisplayNewMarker: false}, + {report: reports[2], reportAction: reportActions[1], shouldDisplayNewMarker: false}, + {report: reports[3], reportAction: reportActions[2], shouldDisplayNewMarker: false}, + {report: reports[4], reportAction: reportActions[3], shouldDisplayNewMarker: false}, ]; - expect(ReportUtils.getAllAncestorReportActions(reports[4], false)).toEqual(resultAncestors); - }); - - it('should hide thread divider line of the nearest ancestor if the first action of thread report is unread', () => { - const allAncestors = ReportUtils.getAllAncestorReportActions(reports[4], true); - expect(allAncestors.reverse()[0].shouldHideThreadDividerLine).toBe(true); - }); - - it('should hide thread divider line of the previous ancestor and display unread marker of the current ancestor if the current ancestor action is unread', () => { - let allAncestors = ReportUtils.getAllAncestorReportActions(reports[4], false); - expect(allAncestors[0].shouldHideThreadDividerLine).toBe(false); - expect(allAncestors[1].shouldDisplayNewMarker).toBe(false); - - Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}2`, { - lastReadTime: '2024-02-01 04:42:28.001', - }) - .then(() => waitForBatchedUpdates()) - .then(() => { - allAncestors = ReportUtils.getAllAncestorReportActions(reports[4], false); - expect(allAncestors[0].shouldHideThreadDividerLine).toBe(true); - expect(allAncestors[1].shouldDisplayNewMarker).toBe(true); - }); + expect(ReportUtils.getAllAncestorReportActions(reports[4])).toEqual(resultAncestors); }); }); }); From b3c01636766fbcbb90e63a82adcd526eb2b4d9ba Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 20:39:37 +0100 Subject: [PATCH 05/12] make first thread padding consistet with the rest of threads --- src/pages/home/report/ReportActionItemParentAction.tsx | 7 ++----- src/pages/home/report/ThreadDivider.tsx | 8 ++------ 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 18bb4c82249f..57fe54bc2047 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -75,7 +75,7 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh - {allAncestors.map((ancestor, ancestorIndex) => ( + {allAncestors.map((ancestor) => ( Report.navigateToConciergeChatAndDeleteReport(ancestor.report.reportID)} > - + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''))} parentReportAction={parentReportAction} diff --git a/src/pages/home/report/ThreadDivider.tsx b/src/pages/home/report/ThreadDivider.tsx index 8d371dcefdda..083129e15e6d 100644 --- a/src/pages/home/report/ThreadDivider.tsx +++ b/src/pages/home/report/ThreadDivider.tsx @@ -1,6 +1,5 @@ import React from 'react'; import {View} from 'react-native'; -import type {StyleProp, ViewStyle} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import {PressableWithoutFeedback} from '@components/Pressable'; @@ -17,18 +16,15 @@ import ROUTES from '@src/ROUTES'; type ThreadDividerProps = { /** Thread ancestor */ ancestor: Ancestor; - - /** Extra styles to pass to View wrapper */ - style?: StyleProp; }; -function ThreadDivider({ancestor, style}: ThreadDividerProps) { +function ThreadDivider({ancestor}: ThreadDividerProps) { const styles = useThemeStyles(); const theme = useTheme(); const {translate} = useLocalize(); return ( - + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor?.report?.parentReportID ?? ''))} accessibilityLabel={translate('threads.thread')} From 9b1c348916d58f02dd413cf86ed9318630064734 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Thu, 21 Mar 2024 22:20:44 +0100 Subject: [PATCH 06/12] show the replies divider only when there is at least one reply --- src/pages/home/report/ReportActionItemParentAction.tsx | 7 +++++-- src/pages/home/report/ReportActionsList.tsx | 1 + src/pages/home/report/ReportActionsListItemRenderer.tsx | 5 +++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 57fe54bc2047..c6bc181bdbe7 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -33,9 +33,12 @@ type ReportActionItemParentActionProps = { /** Report actions belonging to the report's parent */ parentReportAction: OnyxEntry; + + /** Whether we should display "Replies" divider */ + shouldDisplayReplyDivider: boolean; }; -function ReportActionItemParentAction({report, parentReportAction, index = 0, shouldHideThreadDividerLine = false}: ReportActionItemParentActionProps) { +function ReportActionItemParentAction({report, parentReportAction, index = 0, shouldHideThreadDividerLine = false, shouldDisplayReplyDivider}: ReportActionItemParentActionProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {isSmallScreenWidth} = useWindowDimensions(); @@ -97,7 +100,7 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh /> ))} - + {shouldDisplayReplyDivider && } ); } diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index bcbb7a98c8c5..a68f7057483c 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -522,6 +522,7 @@ function ReportActionsList({ mostRecentIOUReportActionID={mostRecentIOUReportActionID} shouldHideThreadDividerLine={shouldHideThreadDividerLine} shouldDisplayNewMarker={shouldDisplayNewMarker(reportAction, index)} + shouldDisplayReplyDivider={sortedReportActions.length > 1} /> ), [report, linkedReportActionID, sortedReportActions, mostRecentIOUReportActionID, shouldHideThreadDividerLine, shouldDisplayNewMarker, parentReportAction], diff --git a/src/pages/home/report/ReportActionsListItemRenderer.tsx b/src/pages/home/report/ReportActionsListItemRenderer.tsx index fb51753e3eb7..4ea395c61100 100644 --- a/src/pages/home/report/ReportActionsListItemRenderer.tsx +++ b/src/pages/home/report/ReportActionsListItemRenderer.tsx @@ -34,6 +34,9 @@ type ReportActionsListItemRendererProps = { /** Linked report action ID */ linkedReportActionID?: string; + + /** Whether we should display "Replies" divider */ + shouldDisplayReplyDivider: boolean; }; function ReportActionsListItemRenderer({ @@ -46,6 +49,7 @@ function ReportActionsListItemRenderer({ shouldHideThreadDividerLine, shouldDisplayNewMarker, linkedReportActionID = '', + shouldDisplayReplyDivider, }: ReportActionsListItemRendererProps) { const shouldDisplayParentAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED && ReportUtils.isChatThread(report) && !ReportActionsUtils.isTransactionThread(parentReportAction); @@ -119,6 +123,7 @@ function ReportActionsListItemRenderer({ return shouldDisplayParentAction ? ( Date: Thu, 21 Mar 2024 22:37:38 +0100 Subject: [PATCH 07/12] Display the pointer cursor when hovering over any part of the message --- src/styles/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index f0fd878aee01..aa5d7865629f 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1890,7 +1890,6 @@ const styles = (theme: ThemeColors) => fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, lineHeight: variables.lineHeightXLarge, maxWidth: '100%', - ...cursor.cursorAuto, ...whiteSpace.preWrap, ...wordBreak.breakWord, }, From e8fbd0d29a7e8f4c4ffbd3a9bbbda0ad46566a1f Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 23 Mar 2024 16:00:34 +0100 Subject: [PATCH 08/12] fix replies divider margins --- src/pages/home/report/RepliesDivider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/RepliesDivider.tsx b/src/pages/home/report/RepliesDivider.tsx index 7ab361cc0d86..deac38596c99 100644 --- a/src/pages/home/report/RepliesDivider.tsx +++ b/src/pages/home/report/RepliesDivider.tsx @@ -19,7 +19,7 @@ function RepliesDivider({shouldHideThreadDividerLine}: RepliesDividerProps) { const {translate} = useLocalize(); return ( - + Date: Tue, 26 Mar 2024 14:49:02 +0100 Subject: [PATCH 09/12] fix lint warning --- src/pages/home/report/ReportActionsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 43f14ab853b3..d54ff8ad68f5 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -525,7 +525,7 @@ function ReportActionsList({ shouldDisplayReplyDivider={sortedReportActions.length > 1} /> ), - [report, linkedReportActionID, sortedVisibleReportActions, mostRecentIOUReportActionID, shouldHideThreadDividerLine, shouldDisplayNewMarker, parentReportAction], + [report, linkedReportActionID, sortedVisibleReportActions, sortedReportActions.length, mostRecentIOUReportActionID, shouldHideThreadDividerLine, shouldDisplayNewMarker, parentReportAction], ); // Native mobile does not render updates flatlist the changes even though component did update called. From 9b0c3fe0bd1643f029e2e1012deca68621cd3aeb Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 26 Mar 2024 14:59:27 +0100 Subject: [PATCH 10/12] prettier --- src/pages/home/report/ReportActionsList.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index d54ff8ad68f5..3b001d859ed8 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -525,7 +525,16 @@ function ReportActionsList({ shouldDisplayReplyDivider={sortedReportActions.length > 1} /> ), - [report, linkedReportActionID, sortedVisibleReportActions, sortedReportActions.length, mostRecentIOUReportActionID, shouldHideThreadDividerLine, shouldDisplayNewMarker, parentReportAction], + [ + report, + linkedReportActionID, + sortedVisibleReportActions, + sortedReportActions.length, + mostRecentIOUReportActionID, + shouldHideThreadDividerLine, + shouldDisplayNewMarker, + parentReportAction, + ], ); // Native mobile does not render updates flatlist the changes even though component did update called. From 242ead9413a569a7375a415666f944ca113df269 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 26 Mar 2024 15:00:40 +0100 Subject: [PATCH 11/12] make sure all the links are deep links back to the specific comment in the ancestry, both in the ancestry and the header --- src/components/ParentNavigationSubtitle.tsx | 7 +++++-- src/pages/home/HeaderView.tsx | 1 + src/pages/home/report/ReportActionItemParentAction.tsx | 2 +- src/pages/home/report/ThreadDivider.tsx | 2 +- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/ParentNavigationSubtitle.tsx b/src/components/ParentNavigationSubtitle.tsx index 3109453ca6b0..d36a2e93f5b3 100644 --- a/src/components/ParentNavigationSubtitle.tsx +++ b/src/components/ParentNavigationSubtitle.tsx @@ -15,11 +15,14 @@ type ParentNavigationSubtitleProps = { /** parent Report ID */ parentReportID?: string; + /** parent Report Action ID */ + parentReportActionID?: string; + /** PressableWithoutFeedack additional styles */ pressableStyles?: StyleProp; }; -function ParentNavigationSubtitle({parentNavigationSubtitleData, parentReportID = '', pressableStyles}: ParentNavigationSubtitleProps) { +function ParentNavigationSubtitle({parentNavigationSubtitleData, parentReportActionID, parentReportID = '', pressableStyles}: ParentNavigationSubtitleProps) { const styles = useThemeStyles(); const {workspaceName, reportName} = parentNavigationSubtitleData; @@ -28,7 +31,7 @@ function ParentNavigationSubtitle({parentNavigationSubtitleData, parentReportID return ( { - Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID)); + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID, parentReportActionID)); }} accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})} role={CONST.ROLE.LINK} diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 9d620472bf3a..acf57dd68fe7 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -272,6 +272,7 @@ function HeaderView({report, personalDetails, parentReport, parentReportAction, )} diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index c6bc181bdbe7..7dc5ace631fa 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -89,7 +89,7 @@ function ReportActionItemParentAction({report, parentReportAction, index = 0, sh > Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''))} + onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? '', ancestor.reportAction.reportActionID))} parentReportAction={parentReportAction} report={ancestor.report} action={ancestor.reportAction} diff --git a/src/pages/home/report/ThreadDivider.tsx b/src/pages/home/report/ThreadDivider.tsx index 083129e15e6d..f2f929091f93 100644 --- a/src/pages/home/report/ThreadDivider.tsx +++ b/src/pages/home/report/ThreadDivider.tsx @@ -26,7 +26,7 @@ function ThreadDivider({ancestor}: ThreadDividerProps) { return ( Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor?.report?.parentReportID ?? ''))} + onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor?.report?.parentReportID ?? '', ancestor.reportAction.reportActionID))} accessibilityLabel={translate('threads.thread')} role={CONST.ROLE.BUTTON} style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]} From 89400173ebc84af0d7655fb3ceec61e3e01c083d Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 26 Mar 2024 15:34:20 +0100 Subject: [PATCH 12/12] add deep linking to the header links of the IOU and transaction reports, so they can directly link to their previews --- src/components/AvatarWithDisplayName.tsx | 1 + src/pages/ReportDetailsPage.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx index 396c10151fbf..f6afb4dae2d6 100644 --- a/src/components/AvatarWithDisplayName.tsx +++ b/src/components/AvatarWithDisplayName.tsx @@ -141,6 +141,7 @@ function AvatarWithDisplayName({ )} diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index f06b40af8851..80563fcf7b1b 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -252,6 +252,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD )}