Fixes for redesign thread ancestry feature

src/components/ParentNavigationSubtitle.tsx

@@ -30,6 +30,11 @@ function ParentNavigationSubtitle({parentNavigationSubtitleData, parentReportAct
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
 
+    // We should not display the parent navigation subtitle if the user does not have access to the parent chat (the reportName is empty in this case)
+    if (!reportName) {
+        return;
+    }
+
     return (
         <PressableWithoutFeedback
             onPress={() => {

src/libs/ReportUtils.ts

@@ -5965,6 +5965,13 @@ function isReportParticipant(accountID: number, report: OnyxEntry<Report>): bool
     return possibleAccountIDs.includes(accountID);
 }
 
+/**
+ * Check to see if the current user has access to view the report.
+ */
+function canCurrentUserOpenReport(report: OnyxEntry<Report>): boolean {
+    return (isReportParticipant(currentUserAccountID ?? 0, report) || isPublicRoom(report)) && canAccessReport(report, allPolicies, allBetas);
+}
+
 function shouldUseFullTitleToDisplay(report: OnyxEntry<Report>): boolean {
     return (
         isMoneyRequestReport(report) || isPolicyExpenseChat(report) || isChatRoom(report) || isChatThread(report) || isTaskReport(report) || isGroupChat(report) || isInvoiceReport(report)
@@ -6493,6 +6500,7 @@ export {
     canBeAutoReimbursed,
     canCreateRequest,
     canCreateTaskInReport,
+    canCurrentUserOpenReport,
     canDeleteReportAction,
     canEditFieldOfMoneyRequest,
     canEditMoneyRequest,

src/pages/home/report/RepliesDivider.tsx

@@ -7,6 +7,7 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 
 type RepliesDividerProps = {
     /** Whether we should hide thread divider line */
@@ -19,14 +20,17 @@ function RepliesDivider({shouldHideThreadDividerLine}: RepliesDividerProps) {
     const {translate} = useLocalize();
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.ml5, styles.mt3, styles.mb1]}>
+        <View
+            style={[styles.flexRow, styles.alignItemsCenter, styles.ml5, styles.mt3, styles.mb1, styles.userSelectNone]}
+            dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+        >
             <Icon
                 src={Expensicons.Thread}
                 fill={theme.icon}
                 width={variables.iconSizeExtraSmall}
                 height={variables.iconSizeExtraSmall}
             />
-            <Text style={[styles.threadDividerText, styles.textSupporting, styles.ml1]}>{translate('threads.replies')}</Text>
+            <Text style={[styles.threadDividerText, styles.textSupporting, styles.ml1, styles.userSelectNone]}>{translate('threads.replies')}</Text>
             {!shouldHideThreadDividerLine && <View style={[styles.threadDividerLine]} />}
         </View>
     );

src/pages/home/report/ReportActionItem.tsx

@@ -955,7 +955,12 @@ function ReportActionItem({
                             checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
                             setIsEmojiPickerActive={setIsEmojiPickerActive}
                         />
-                        <View style={StyleUtils.getReportActionItemStyle(hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || draftMessage !== undefined, !!onPress)}>
+                        <View
+                            style={StyleUtils.getReportActionItemStyle(
+                                hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || draftMessage !== undefined,
+                                draftMessage === undefined && !!onPress,
+                            )}
+                        >
                             <OfflineWithFeedback
                                 onClose={() => ReportActions.clearAllRelatedReportActionErrors(report.reportID, action)}
                                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

src/pages/home/report/ReportActionItemParentAction.tsx

@@ -112,17 +112,24 @@ function ReportActionItemParentAction({
                     errorRowStyles={[styles.ml10, styles.mr2]}
                     onClose={() => Report.navigateToConciergeChatAndDeleteReport(ancestor.report.reportID)}
                 >
-                    <ThreadDivider ancestor={ancestor} />
+                    <ThreadDivider
+                        ancestor={ancestor}
+                        isLinkDisabled={!ReportUtils.canCurrentUserOpenReport(ReportUtils.getReport(ancestor?.report?.parentReportID))}
+                    />
                     <ReportActionItem
-                        onPress={() => {
-                            const isVisibleAction = ReportActionsUtils.shouldReportActionBeVisible(ancestor.reportAction, ancestor.reportAction.reportActionID ?? '');
-                            // Pop the thread report screen before navigating to the chat report.
-                            Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''));
-                            if (isVisibleAction && !isOffline) {
-                                // Pop the chat report screen before navigating to the linked report action.
-                                Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? '', ancestor.reportAction.reportActionID));
-                            }
-                        }}
+                        onPress={
+                            ReportUtils.canCurrentUserOpenReport(ReportUtils.getReport(ancestor?.report?.parentReportID))
+                                ? () => {
+                                      const isVisibleAction = ReportActionsUtils.shouldReportActionBeVisible(ancestor.reportAction, ancestor.reportAction.reportActionID ?? '');
+                                      // Pop the thread report screen before navigating to the chat report.
+                                      Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''));
+                                      if (isVisibleAction && !isOffline) {
+                                          // Pop the chat report screen before navigating to the linked report action.
+                                          Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? '', ancestor.reportAction.reportActionID));
+                                      }
+                                  }
+                                : undefined
+                        }
                         parentReportAction={parentReportAction}
                         report={ancestor.report}
                         reportActions={reportActions}

src/pages/home/report/ReportActionsList.tsx

@@ -555,7 +555,7 @@ function ReportActionsList({
                 mostRecentIOUReportActionID={mostRecentIOUReportActionID}
                 shouldHideThreadDividerLine={shouldHideThreadDividerLine}
                 shouldDisplayNewMarker={shouldDisplayNewMarker(reportAction, index)}
-                shouldDisplayReplyDivider={sortedReportActions.length > 1}
+                shouldDisplayReplyDivider={sortedVisibleReportActions.length > 1}
                 isFirstVisibleReportAction={firstVisibleReportActionID === reportAction.reportActionID}
                 shouldUseThreadDividerLine={shouldUseThreadDividerLine}
             />
@@ -564,7 +564,6 @@ function ReportActionsList({
             report,
             linkedReportActionID,
             sortedVisibleReportActions,
-            sortedReportActions.length,
             mostRecentIOUReportActionID,
             shouldHideThreadDividerLine,
             shouldDisplayNewMarker,

src/pages/home/report/ThreadDivider.tsx

@@ -18,38 +18,56 @@ import ROUTES from '@src/ROUTES';
 type ThreadDividerProps = {
     /** Thread ancestor */
     ancestor: Ancestor;
+
+    /** Whether the link is disabled */
+    isLinkDisabled?: boolean;
 };
 
-function ThreadDivider({ancestor}: ThreadDividerProps) {
+function ThreadDivider({ancestor, isLinkDisabled = false}: ThreadDividerProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.ml5, styles.mt3, styles.mb1]}>
-            <PressableWithoutFeedback
-                onPress={() => {
-                    const isVisibleAction = ReportActionsUtils.shouldReportActionBeVisible(ancestor.reportAction, ancestor.reportAction.reportActionID ?? '');
-                    // Pop the thread report screen before navigating to the chat report.
-                    Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''));
-                    if (isVisibleAction && !isOffline) {
-                        // Pop the chat report screen before navigating to the linked report action.
-                        Navigation.goBack(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]}
-            >
-                <Icon
-                    src={Expensicons.Thread}
-                    fill={theme.link}
-                    width={variables.iconSizeExtraSmall}
-                    height={variables.iconSizeExtraSmall}
-                />
-                <Text style={[styles.threadDividerText, styles.link]}>{translate('threads.thread')}</Text>
-            </PressableWithoutFeedback>
+        <View
+            style={[styles.flexRow, styles.alignItemsCenter, styles.ml5, styles.mt3, styles.mb1, styles.userSelectNone]}
+            dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+        >
+            {isLinkDisabled ? (
+                <>
+                    <Icon
+                        src={Expensicons.Thread}
+                        fill={theme.icon}
+                        width={variables.iconSizeExtraSmall}
+                        height={variables.iconSizeExtraSmall}
+                    />
+                    <Text style={[styles.threadDividerText, styles.textSupporting, styles.ml1, styles.userSelectNone]}>{translate('threads.thread')}</Text>
+                </>
+            ) : (
+                <PressableWithoutFeedback
+                    onPress={() => {
+                        const isVisibleAction = ReportActionsUtils.shouldReportActionBeVisible(ancestor.reportAction, ancestor.reportAction.reportActionID ?? '');
+                        // Pop the thread report screen before navigating to the chat report.
+                        Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''));
+                        if (isVisibleAction && !isOffline) {
+                            // Pop the chat report screen before navigating to the linked report action.
+                            Navigation.goBack(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]}
+                >
+                    <Icon
+                        src={Expensicons.Thread}
+                        fill={theme.link}
+                        width={variables.iconSizeExtraSmall}
+                        height={variables.iconSizeExtraSmall}
+                    />
+                    <Text style={[styles.threadDividerText, styles.link]}>{translate('threads.thread')}</Text>
+                </PressableWithoutFeedback>
+            )}
             {!ancestor.shouldDisplayNewMarker && <View style={[styles.threadDividerLine]} />}
         </View>
     );