Fixes for redesign thread ancestry feature

src/components/ParentNavigationSubtitle.tsx

@@ -25,6 +25,11 @@ function ParentNavigationSubtitle({parentNavigationSubtitleData, parentReportID
 
     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

@@ -5357,6 +5357,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);
 }
@@ -5933,6 +5940,7 @@ export {
     getChildReportNotificationPreference,
     getAllAncestorReportActions,
     isReportParticipant,
+    canCurrentUserOpenReport,
     isValidReport,
     getReportDescriptionText,
     isReportFieldOfTypeTitle,

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

@@ -865,7 +865,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

@@ -101,9 +101,16 @@ 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) as OnyxTypes.Report)}
+                    />
                     <ReportActionItem
-                        onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''))}
+                        onPress={
+                            ReportUtils.canCurrentUserOpenReport(ReportUtils.getReport(ancestor?.report?.parentReportID) as OnyxTypes.Report)
+                                ? () => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? ''))
+                                : undefined
+                        }
                         parentReportAction={parentReportAction}
                         report={ancestor.report}
                         reportActions={reportActions}

src/pages/home/report/ReportActionsList.tsx

@@ -532,14 +532,13 @@ function ReportActionsList({
                 mostRecentIOUReportActionID={mostRecentIOUReportActionID}
                 shouldHideThreadDividerLine={shouldHideThreadDividerLine}
                 shouldDisplayNewMarker={shouldDisplayNewMarker(reportAction, index)}
-                shouldDisplayReplyDivider={sortedReportActions.length > 1}
+                shouldDisplayReplyDivider={sortedVisibleReportActions.length > 1}
             />
         ),
         [
             report,
             linkedReportActionID,
             sortedVisibleReportActions,
-            sortedReportActions.length,
             mostRecentIOUReportActionID,
             shouldHideThreadDividerLine,
             shouldDisplayNewMarker,

src/pages/home/report/ThreadDivider.tsx

@@ -16,29 +16,47 @@ 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();
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.ml5, styles.mt3, styles.mb1]}>
-            <PressableWithoutFeedback
-                onPress={() => 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]}
-            >
-                <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={() => 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]}
+                >
+                    <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>
     );

src/styles/utils/index.ts

@@ -1462,6 +1462,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,
+            // eslint-disable-next-line no-nested-ternary
             ...(isClickable ? styles.cursorPointer : styles.cursorInitial),
         }),