Revert "Merge pull request #38722 from rayane-djouah/Feat-Redesign-thread-ancestry"

mountiny · mountiny · commit 6a85f5a6ff95 · 2024-03-29T21:43:21.000Z
This reverts commit 903fe8a, reversing changes made to d6fc25a.
diff --git a/assets/images/thread.svg b/assets/images/thread.svg
diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
@@ -141,7 +141,6 @@ function AvatarWithDisplayName({
                             <ParentNavigationSubtitle
                                 parentNavigationSubtitleData={parentNavigationSubtitleData}
                                 parentReportID={report?.parentReportID}
-                                parentReportActionID={report?.parentReportActionID}
                                 pressableStyles={[styles.alignSelfStart, styles.mw100]}
                             />
                         )}
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
@@ -141,7 +141,6 @@ 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';
@@ -231,7 +230,6 @@ export {
     Folder,
     Tag,
     Tax,
-    Thread,
     Gallery,
     Gear,
     Globe,
diff --git a/src/components/ParentNavigationSubtitle.tsx b/src/components/ParentNavigationSubtitle.tsx
@@ -15,14 +15,11 @@ type ParentNavigationSubtitleProps = {
     /** parent Report ID */
     parentReportID?: string;
 
-    /** parent Report Action ID */
-    parentReportActionID?: string;
-
     /** PressableWithoutFeedack additional styles */
     pressableStyles?: StyleProp<ViewStyle>;
 };
 
-function ParentNavigationSubtitle({parentNavigationSubtitleData, parentReportActionID, parentReportID = '', pressableStyles}: ParentNavigationSubtitleProps) {
+function ParentNavigationSubtitle({parentNavigationSubtitleData, parentReportID = '', pressableStyles}: ParentNavigationSubtitleProps) {
     const styles = useThemeStyles();
     const {workspaceName, reportName} = parentNavigationSubtitleData;
 
@@ -31,7 +28,7 @@ function ParentNavigationSubtitle({parentNavigationSubtitleData, parentReportAct
     return (
         <PressableWithoutFeedback
             onPress={() => {
-                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID, parentReportActionID));
+                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(parentReportID));
             }}
             accessibilityLabel={translate('threads.parentNavigationSummary', {reportName, workspaceName})}
             role={CONST.ROLE.LINK}
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2415,7 +2415,6 @@ 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
@@ -2907,7 +2907,6 @@ 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
@@ -423,6 +423,7 @@ type Ancestor = {
     report: Report;
     reportAction: ReportAction;
     shouldDisplayNewMarker: boolean;
+    shouldHideThreadDividerLine: boolean;
 };
 
 type AncestorIDs = {
@@ -5477,7 +5478,7 @@ function shouldDisableThread(reportAction: OnyxEntry<ReportAction>, reportID: st
     );
 }
 
-function getAllAncestorReportActions(report: Report | null | undefined): Ancestor[] {
+function getAllAncestorReportActions(report: Report | null | undefined, shouldHideThreadDividerLine: boolean): Ancestor[] {
     if (!report) {
         return [];
     }
@@ -5487,6 +5488,7 @@ function getAllAncestorReportActions(report: Report | null | undefined): Ancesto
 
     // Store the child of parent report
     let currentReport = report;
+    let currentUnread = shouldHideThreadDividerLine;
 
     while (parentReportID) {
         const parentReport = getReport(parentReportID);
@@ -5501,11 +5503,14 @@ function getAllAncestorReportActions(report: Report | null | undefined): Ancesto
             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;
         if (!isEmptyObject(parentReport)) {
             currentReport = parentReport;
+            currentUnread = isParentReportActionUnread;
         }
     }
 
diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
@@ -252,7 +252,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                                 <ParentNavigationSubtitle
                                     parentNavigationSubtitleData={parentNavigationSubtitleData}
                                     parentReportID={report?.parentReportID}
-                                    parentReportActionID={report?.parentReportActionID}
                                     pressableStyles={[styles.mt1, styles.mw100]}
                                 />
                             )}
diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
@@ -272,7 +272,6 @@ function HeaderView({report, personalDetails, parentReport, parentReportAction,
                                             <ParentNavigationSubtitle
                                                 parentNavigationSubtitleData={parentNavigationSubtitleData}
                                                 parentReportID={report.parentReportID}
-                                                parentReportActionID={report.parentReportActionID}
                                                 pressableStyles={[styles.alignSelfStart, styles.mw100]}
                                             />
                                         )}
diff --git a/src/pages/home/report/RepliesDivider.tsx b/src/pages/home/report/RepliesDivider.tsx
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
@@ -860,7 +860,7 @@ 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)}>
                             <OfflineWithFeedback
                                 onClose={() => ReportActions.clearAllRelatedReportActionErrors(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
@@ -13,9 +13,7 @@ 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 */
@@ -39,9 +37,6 @@ type ReportActionItemParentActionProps = {
 
     /** Report actions belonging to the report's parent */
     parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
-
-    /** Whether we should display "Replies" divider */
-    shouldDisplayReplyDivider: boolean;
 };
 
 function ReportActionItemParentAction({
@@ -51,7 +46,6 @@ function ReportActionItemParentAction({
     parentReportAction,
     index = 0,
     shouldHideThreadDividerLine = false,
-    shouldDisplayReplyDivider,
 }: ReportActionItemParentActionProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -67,15 +61,15 @@ function ReportActionItemParentAction({
                 onyxSubscribe({
                     key: `${ONYXKEYS.COLLECTION.REPORT}${ancestorReportID}`,
                     callback: () => {
-                        setAllAncestors(ReportUtils.getAllAncestorReportActions(report));
+                        setAllAncestors(ReportUtils.getAllAncestorReportActions(report, shouldHideThreadDividerLine));
                     },
                 }),
             );
             unsubscribeReportActions.push(
                 onyxSubscribe({
                     key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${ancestorReportID}`,
                     callback: () => {
-                        setAllAncestors(ReportUtils.getAllAncestorReportActions(report));
+                        setAllAncestors(ReportUtils.getAllAncestorReportActions(report, shouldHideThreadDividerLine));
                     },
                 }),
             );
@@ -101,9 +95,8 @@ function ReportActionItemParentAction({
                     errorRowStyles={[styles.ml10, styles.mr2]}
                     onClose={() => Report.navigateToConciergeChatAndDeleteReport(ancestor.report.reportID)}
                 >
-                    <ThreadDivider ancestor={ancestor} />
                     <ReportActionItem
-                        onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.parentReportID ?? '', ancestor.reportAction.reportActionID))}
+                        onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.reportID))}
                         parentReportAction={parentReportAction}
                         report={ancestor.report}
                         reportActions={reportActions}
@@ -114,9 +107,9 @@ function ReportActionItemParentAction({
                         shouldDisplayNewMarker={ancestor.shouldDisplayNewMarker}
                         index={index}
                     />
+                    {!ancestor.shouldHideThreadDividerLine && <View style={[styles.threadDividerLine]} />}
                 </OfflineWithFeedback>
             ))}
-            {shouldDisplayReplyDivider && <RepliesDivider shouldHideThreadDividerLine={shouldHideThreadDividerLine} />}
         </View>
     );
 }
diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx
@@ -532,7 +532,6 @@ function ReportActionsList({
                 mostRecentIOUReportActionID={mostRecentIOUReportActionID}
                 shouldHideThreadDividerLine={shouldHideThreadDividerLine}
                 shouldDisplayNewMarker={shouldDisplayNewMarker(reportAction, index)}
-                shouldDisplayReplyDivider={sortedReportActions.length > 1}
             />
         ),
         [
diff --git a/src/pages/home/report/ReportActionsListItemRenderer.tsx b/src/pages/home/report/ReportActionsListItemRenderer.tsx
@@ -40,9 +40,6 @@ type ReportActionsListItemRendererProps = {
 
     /** Linked report action ID */
     linkedReportActionID?: string;
-
-    /** Whether we should display "Replies" divider */
-    shouldDisplayReplyDivider: boolean;
 };
 
 function ReportActionsListItemRenderer({
@@ -57,7 +54,6 @@ function ReportActionsListItemRenderer({
     shouldHideThreadDividerLine,
     shouldDisplayNewMarker,
     linkedReportActionID = '',
-    shouldDisplayReplyDivider,
 }: ReportActionsListItemRendererProps) {
     const shouldDisplayParentAction =
         reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED && ReportUtils.isChatThread(report) && !ReportActionsUtils.isTransactionThread(parentReportAction);
@@ -131,7 +127,6 @@ function ReportActionsListItemRenderer({
     return shouldDisplayParentAction ? (
         <ReportActionItemParentAction
             shouldHideThreadDividerLine={shouldDisplayParentAction && shouldHideThreadDividerLine}
-            shouldDisplayReplyDivider={shouldDisplayReplyDivider}
             parentReportAction={parentReportAction}
             reportID={report.reportID}
             report={report}
diff --git a/src/pages/home/report/ThreadDivider.tsx b/src/pages/home/report/ThreadDivider.tsx
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -1898,6 +1898,7 @@ const styles = (theme: ThemeColors) =>
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
             lineHeight: variables.lineHeightXLarge,
             maxWidth: '100%',
+            ...cursor.cursorAuto,
             ...whiteSpace.preWrap,
             ...wordBreak.breakWord,
         },
@@ -2742,8 +2743,7 @@ const styles = (theme: ThemeColors) =>
             height: 1,
             backgroundColor: theme.border,
             flexGrow: 1,
-            marginLeft: 8,
-            marginRight: 20,
+            marginHorizontal: 20,
         },
 
         unreadIndicatorText: {
@@ -2754,12 +2754,6 @@ 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
@@ -1451,7 +1451,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     /**
      * Generate the styles for the ReportActionItem wrapper view.
      */
-    getReportActionItemStyle: (isHovered = false, isClickable = false): ViewStyle =>
+    getReportActionItemStyle: (isHovered = 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
         ({
@@ -1462,7 +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,
-            ...(isClickable ? styles.cursorPointer : styles.cursorInitial),
+            ...styles.cursorInitial,
         }),
 
     /**
diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js
