From f7f78a9e35c853dc8c08f950f43da580ff924ef7 Mon Sep 17 00:00:00 2001
From: Jakub Korytko <jakub@korytko.me>
Date: Fri, 4 Apr 2025 17:41:25 +0200
Subject: [PATCH] Add hook to check if new table view should render action

---
 src/pages/home/report/PureReportActionItem.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx
index 97af1f500f74..7a2685c1e9d9 100644
--- a/src/pages/home/report/PureReportActionItem.tsx
+++ b/src/pages/home/report/PureReportActionItem.tsx
@@ -325,6 +325,18 @@ type PureReportActionItemProps = {
 const emptyHTML = <RenderHTML html="" />;
 const isEmptyHTML = <T extends React.JSX.Element>({props: {html}}: T): boolean => typeof html === 'string' && html.length === 0;
 
+const useNewTableReportViewActionRenderConditionals = ({childMoneyRequestCount, childVisibleActionCount, pendingAction, actionName}: OnyxTypes.ReportAction) => {
+    const previousChildMoneyRequestCount = usePrevious(childMoneyRequestCount);
+
+    return !(
+        actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW &&
+        pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE &&
+        childMoneyRequestCount === 0 &&
+        (childVisibleActionCount ?? 0) > 0 &&
+        (previousChildMoneyRequestCount ?? 0) > 0
+    );
+};
+
 /**
  * This is a pure version of ReportActionItem, used in ReportActionList and Search result chat list items.
  * Since the search result has a separate Onyx key under the 'snapshot_' prefix, we should not connect this component with Onyx.
@@ -387,7 +399,7 @@ function PureReportActionItem({
     const [isEmojiPickerActive, setIsEmojiPickerActive] = useState<boolean | undefined>();
     const [isPaymentMethodPopoverActive, setIsPaymentMethodPopoverActive] = useState<boolean | undefined>();
     const {canUseTableReportView} = usePermissions();
-
+    const shouldRenderViewBasedOnAction = useNewTableReportViewActionRenderConditionals(action);
     const [isHidden, setIsHidden] = useState(false);
     const [moderationDecision, setModerationDecision] = useState<OnyxTypes.DecisionName>(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
     const reactionListRef = useContext(ReactionListContext);
@@ -1128,8 +1140,8 @@ function PureReportActionItem({
     const renderReportActionItem = (hovered: boolean, isWhisper: boolean, hasErrors: boolean): React.JSX.Element => {
         const content = renderItemContent(hovered || isContextMenuActive || isEmojiPickerActive, isWhisper, hasErrors);
 
-        if (canUseTableReportView && isEmptyHTML(content)) {
-            return content;
+        if (canUseTableReportView && (isEmptyHTML(content) || (!shouldRenderViewBasedOnAction && !isClosedExpenseReportWithNoExpenses))) {
+            return emptyHTML;
         }
 
         if (draftMessage !== undefined) {