Fix - Chat - Hidden Attachment is shown when navigating through attachments

src/CONST.ts

@@ -1788,6 +1788,7 @@ const CONST = {
     YOUR_LOCATION_TEXT: 'Your Location',
 
     ATTACHMENT_MESSAGE_TEXT: '[Attachment]',
+    ATTACHMENT_REGEX: /<video |<img /,
     ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source',
     ATTACHMENT_ID_ATTRIBUTE: 'data-attachment-id',
     ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE: 'data-optimistic-src',

src/components/Attachments/AttachmentCarousel/CarouselItem.tsx

@@ -34,13 +34,14 @@ function CarouselItem({item, onPress, isFocused, isModalHovered, reportID}: Caro
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isAttachmentHidden} = useContext(ReportAttachmentsContext);
-    const [isHidden, setIsHidden] = useState(() => (item.reportActionID ? isAttachmentHidden(item.reportActionID) : item.hasBeenFlagged));
+    const [isHidden, setIsHidden] = useState(() => (item.reportActionID && isAttachmentHidden(item.reportActionID)) ?? item.hasBeenFlagged);
 
     const renderButton = (style: StyleProp<ViewStyle>) => (
         <Button
             small
             style={style}
             onPress={() => setIsHidden(!isHidden)}
+            testID="moderationButton"
         >
             <Text
                 style={[styles.buttonSmallText, styles.userSelectNone]}

src/components/Attachments/AttachmentCarousel/extractAttachments.ts

@@ -39,13 +39,14 @@ function extractAttachments(
 
                 const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${source}`);
                 attachments.unshift({
+                    reportActionID: attribs['data-id'],
                     attachmentID: attribs[CONST.ATTACHMENT_ID_ATTRIBUTE],
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     isAuthTokenRequired: !!attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE],
                     file: {name: fileName},
                     duration: Number(attribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]),
                     isReceipt: false,
-                    hasBeenFlagged: false,
+                    hasBeenFlagged: attribs['data-flagged'] === 'true',
                 });
                 return;
             }
@@ -114,7 +115,9 @@ function extractAttachments(
 
         const decision = getReportActionMessage(action)?.moderationDecision?.decision;
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
-        const html = getReportActionHtml(action).replaceAll('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
+        const html = getReportActionHtml(action)
+            .replaceAll('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`)
+            .replaceAll('<video ', `<video data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}" `);
         htmlParser.write(getHtmlWithAttachmentID(html, action.reportActionID));
     });
     htmlParser.end();

src/pages/home/report/PureReportActionItem.tsx

@@ -417,7 +417,7 @@ function PureReportActionItem({
         (isHiddenValue: boolean) => {
             setIsHidden(isHiddenValue);
             const message = Array.isArray(action.message) ? action.message?.at(-1) : action.message;
-            const isAttachment = isReportMessageAttachment(message);
+            const isAttachment = CONST.ATTACHMENT_REGEX.test(message?.html ?? '') || isReportMessageAttachment(message);
             if (!isAttachment) {
                 return;
             }

src/pages/home/report/ReportAttachmentsContext.tsx

@@ -20,7 +20,7 @@ function ReportAttachmentsProvider({children}: ChildrenProps) {
         // We only want to store the attachment visibility for the current report.
         // If the current report ID changes, clear the ref.
         hiddenAttachments.current = {};
-    }, [currentReportID]);
+    }, [currentReportID?.currentReportID]);
 
     const contextValue = useMemo(
         () => ({

tests/unit/CarouselItemTest.tsx

@@ -0,0 +1,43 @@
+import {render, screen} from '@testing-library/react-native';
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import CarouselItem from '@components/Attachments/AttachmentCarousel/CarouselItem';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import OnyxProvider from '@components/OnyxProvider';
+import {PlaybackContextProvider} from '@components/VideoPlayerContexts/PlaybackContext';
+import {translateLocal} from '@libs/Localize';
+import {ReportAttachmentsProvider} from '@pages/home/report/ReportAttachmentsContext';
+import ONYXKEYS from '@src/ONYXKEYS';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+
+describe('CarouselItem', () => {
+    beforeAll(() => {
+        Onyx.init({keys: ONYXKEYS});
+    });
+    it('should hide flagged attachments initially', async () => {
+        // Given a CarouselItem component with a valid attributes
+        render(
+            <OnyxProvider>
+                <LocaleContextProvider>
+                    <PlaybackContextProvider>
+                        <ReportAttachmentsProvider>
+                            <CarouselItem
+                                item={{
+                                    reportActionID: '1',
+                                    attachmentID: '1_1',
+                                    source: 'img.jpeg',
+                                    hasBeenFlagged: true,
+                                }}
+                                isFocused
+                            />
+                        </ReportAttachmentsProvider>
+                    </PlaybackContextProvider>
+                </LocaleContextProvider>
+            </OnyxProvider>,
+        );
+        await waitForBatchedUpdates();
+
+        // Then initially the attachment should be hidden so the reveal button should be displayed.
+        expect(screen.getByTestId('moderationButton')).toHaveTextContent(translateLocal('moderation.revealMessage'));
+    });
+});