Hide flagged attachment in attachment carousel

src/App.js

@@ -24,6 +24,7 @@ import {CurrentReportIDContextProvider} from './components/withCurrentReportID';
 import {EnvironmentProvider} from './components/withEnvironment';
 import * as Session from './libs/actions/Session';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
+import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
 
 // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
 if (window && Environment.isDevelopment()) {
@@ -56,6 +57,7 @@ function App() {
                     KeyboardStateProvider,
                     PopoverContextProvider,
                     CurrentReportIDContextProvider,
+                    ReportAttachmentsProvider,
                     PickerStateProvider,
                     EnvironmentProvider,
                     ThemeProvider,

src/components/Attachments/AttachmentCarousel/CarouselItem.js

@@ -0,0 +1,117 @@
+import React, {useContext, useState} from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import CONST from '../../../CONST';
+import styles from '../../../styles/styles';
+import useLocalize from '../../../hooks/useLocalize';
+import PressableWithoutFeedback from '../../Pressable/PressableWithoutFeedback';
+import Text from '../../Text';
+import Button from '../../Button';
+import AttachmentView from '../AttachmentView';
+import SafeAreaConsumer from '../../SafeAreaConsumer';
+import ReportAttachmentsContext from '../../../pages/home/report/ReportAttachmentsContext';
+
+const propTypes = {
+    /** Attachment required information such as the source and file name */
+    item: PropTypes.shape({
+        /** Report action ID of the attachment */
+        reportActionID: PropTypes.string,
+
+        /** Whether source URL requires authentication */
+        isAuthTokenRequired: PropTypes.bool,
+
+        /** The source (URL) of the attachment */
+        source: PropTypes.string,
+
+        /** File additional information of the attachment */
+        file: PropTypes.shape({
+            /** File name of the attachment */
+            name: PropTypes.string,
+        }),
+
+        /** Whether the attachment has been flagged */
+        hasBeenFlagged: PropTypes.bool,
+    }).isRequired,
+
+    /** Whether the attachment is currently being viewed in the carousel */
+    isFocused: PropTypes.bool.isRequired,
+
+    /** onPress callback */
+    onPress: PropTypes.func,
+};
+
+const defaultProps = {
+    onPress: undefined,
+};
+
+function CarouselItem({item, isFocused, onPress}) {
+    const {translate} = useLocalize();
+    const {isAttachmentHidden} = useContext(ReportAttachmentsContext);
+    const [isHidden, setIsHidden] = useState(() => {
+        const isAttachmentHiddenValue = isAttachmentHidden[item.reportActionID];
+        return isAttachmentHiddenValue === undefined ? item.hasBeenFlagged : isAttachmentHiddenValue;
+    });
+
+    const renderButton = (style) => (
+        <Button
+            small
+            style={style}
+            onPress={() => setIsHidden(!isHidden)}
+        >
+            <Text
+                style={styles.buttonSmallText}
+                selectable={false}
+                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+            >
+                {isHidden ? translate('moderation.revealMessage') : translate('moderation.hideMessage')}
+            </Text>
+        </Button>
+    );
+
+    if (isHidden) {
+        const children = (
+            <>
+                <Text style={[styles.textLabelSupporting, styles.textAlignCenter, styles.lh20]}>{translate('moderation.flaggedContent')}</Text>
+                {renderButton([styles.mt2])}
+            </>
+        );
+        return onPress ? (
+            <PressableWithoutFeedback
+                style={[styles.attachmentRevealButtonContainer]}
+                onPress={onPress}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                accessibilityLabel={item.file.name || translate('attachmentView.unknownFilename')}
+            >
+                {children}
+            </PressableWithoutFeedback>
+        ) : (
+            <View style={[styles.attachmentRevealButtonContainer]}>{children}</View>
+        );
+    }
+
+    return (
+        <View style={[styles.flex1]}>
+            <View style={[styles.flex1]}>
+                <AttachmentView
+                    source={item.source}
+                    file={item.file}
+                    isAuthTokenRequired={item.isAuthTokenRequired}
+                    isFocused={isFocused}
+                    onPress={onPress}
+                    isUsedInCarousel
+                />
+            </View>
+
+            {item.hasBeenFlagged && (
+                <SafeAreaConsumer>
+                    {({safeAreaPaddingBottomStyle}) => <View style={[styles.appBG, safeAreaPaddingBottomStyle]}>{renderButton([styles.m4, styles.alignSelfCenter])}</View>}
+                </SafeAreaConsumer>
+            )}
+        </View>
+    );
+}
+
+CarouselItem.propTypes = propTypes;
+CarouselItem.defaultProps = defaultProps;
+
+export default CarouselItem;

src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js

@@ -28,10 +28,12 @@ function extractAttachmentsFromReport(report, reportActions) {
             // By iterating actions in chronological order and prepending each attachment
             // we ensure correct order of attachments even across actions with multiple attachments.
             attachments.unshift({
+                reportActionID: attribs['data-id'],
                 source: tryResolveUrlFromApiRoot(expensifySource || attribs.src),
                 isAuthTokenRequired: Boolean(expensifySource),
                 file: {name: attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE]},
                 isReceipt: false,
+                hasBeenFlagged: attribs['data-flagged'] === 'true',
             });
         },
     });
@@ -62,7 +64,10 @@ function extractAttachmentsFromReport(report, reportActions) {
             }
         }
 
-        htmlParser.write(_.get(action, ['message', 0, 'html']));
+        const decision = _.get(action, ['message', 0, 'moderationDecision', 'decision'], '');
+        const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
+        const html = _.get(action, ['message', 0, 'html'], '').replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
+        htmlParser.write(html);
     });
     htmlParser.end();
 

src/components/Attachments/AttachmentCarousel/index.js

@@ -5,7 +5,6 @@ import _ from 'underscore';
 import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import styles from '../../../styles/styles';
 import CarouselActions from './CarouselActions';
-import AttachmentView from '../AttachmentView';
 import withWindowDimensions from '../../withWindowDimensions';
 import CarouselButtons from './CarouselButtons';
 import extractAttachmentsFromReport from './extractAttachmentsFromReport';
@@ -15,6 +14,7 @@ import withLocalize from '../../withLocalize';
 import compose from '../../../libs/compose';
 import useCarouselArrows from './useCarouselArrows';
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import CarouselItem from './CarouselItem';
 import Navigation from '../../../libs/Navigation/Navigation';
 import BlockingView from '../../BlockingViews/BlockingView';
 import * as Illustrations from '../../Icon/Illustrations';
@@ -143,21 +143,20 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
     /**
      * Defines how a single attachment should be rendered
      * @param {Object} item
+     * @param {String} item.reportActionID
      * @param {Boolean} item.isAuthTokenRequired
      * @param {String} item.source
      * @param {Object} item.file
      * @param {String} item.file.name
+     * @param {Boolean} item.hasBeenFlagged
      * @returns {JSX.Element}
      */
     const renderItem = useCallback(
         ({item}) => (
-            <AttachmentView
-                source={item.source}
-                file={item.file}
-                isAuthTokenRequired={item.isAuthTokenRequired}
+            <CarouselItem
+                item={item}
                 isFocused={activeSource === item.source}
                 onPress={canUseTouchScreen ? () => setShouldShowArrows(!shouldShowArrows) : undefined}
-                isUsedInCarousel
             />
         ),
         [activeSource, setShouldShowArrows, shouldShowArrows],

src/components/Attachments/AttachmentCarousel/index.native.js

@@ -5,11 +5,11 @@ import _ from 'underscore';
 import AttachmentCarouselPager from './Pager';
 import styles from '../../../styles/styles';
 import CarouselButtons from './CarouselButtons';
-import AttachmentView from '../AttachmentView';
 import ONYXKEYS from '../../../ONYXKEYS';
 import {propTypes, defaultProps} from './attachmentCarouselPropTypes';
 import extractAttachmentsFromReport from './extractAttachmentsFromReport';
 import useCarouselArrows from './useCarouselArrows';
+import CarouselItem from './CarouselItem';
 import Navigation from '../../../libs/Navigation/Navigation';
 import BlockingView from '../../BlockingViews/BlockingView';
 import * as Illustrations from '../../Icon/Illustrations';
@@ -85,17 +85,14 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose,
 
     /**
      * Defines how a single attachment should be rendered
-     * @param {{ isAuthTokenRequired: Boolean, source: String, file: { name: String } }} item
+     * @param {{ reportActionID: String, isAuthTokenRequired: Boolean, source: String, file: { name: String }, hasBeenFlagged: Boolean }} item
      * @returns {JSX.Element}
      */
     const renderItem = useCallback(
         ({item}) => (
-            <AttachmentView
-                source={item.source}
-                file={item.file}
-                isAuthTokenRequired={item.isAuthTokenRequired}
+            <CarouselItem
+                item={item}
                 isFocused={activeSource === item.source}
-                isUsedInCarousel
                 onPress={() => setShouldShowArrows(!shouldShowArrows)}
             />
         ),

src/pages/home/report/ReportActionItem.js

@@ -67,6 +67,7 @@ import * as BankAccounts from '../../../libs/actions/BankAccounts';
 import usePrevious from '../../../hooks/usePrevious';
 import ReportScreenContext from '../ReportScreenContext';
 import Permissions from '../../../libs/Permissions';
+import ReportAttachmentsContext from './ReportAttachmentsContext';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
@@ -129,13 +130,23 @@ function ReportActionItem(props) {
     const [isHidden, setIsHidden] = useState(false);
     const [moderationDecision, setModerationDecision] = useState(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
     const {reactionListRef} = useContext(ReportScreenContext);
+    const {isAttachmentHidden, updateIsAttachmentHidden} = useContext(ReportAttachmentsContext);
     const textInputRef = useRef();
     const popoverAnchorRef = useRef();
     const downloadedPreviews = useRef([]);
     const prevDraftMessage = usePrevious(props.draftMessage);
     const originalReportID = ReportUtils.getOriginalReportID(props.report.reportID, props.action);
     const originalReport = props.report.reportID === originalReportID ? props.report : ReportUtils.getReport(originalReportID);
 
+    useEffect(() => {
+        const isAttachment = ReportUtils.isReportMessageAttachment(_.last(props.action.message));
+        // To prevent unnecessary re-render, skip updating the state if the value is the same
+        if (!isAttachment || Boolean(isAttachmentHidden[props.action.reportActionID]) === isHidden) {
+            return;
+        }
+        updateIsAttachmentHidden(props.action.reportActionID, isHidden);
+    }, [props.action.reportActionID, props.action.message, isHidden, isAttachmentHidden, updateIsAttachmentHidden]);
+
     useEffect(
         () => () => {
             // ReportActionContextMenu, EmojiPicker and PopoverReactionList are global components,

src/pages/home/report/ReportAttachmentsContext.js

@@ -0,0 +1,37 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import PropTypes from 'prop-types';
+import useCurrentReportID from '../../../hooks/useCurrentReportID';
+
+const ReportAttachmentsContext = React.createContext();
+
+const propTypes = {
+    /** Rendered child component */
+    children: PropTypes.node.isRequired,
+};
+
+function ReportAttachmentsProvider(props) {
+    const currentReportID = useCurrentReportID();
+    const [isAttachmentHidden, setIsAttachmentHidden] = useState({});
+
+    useEffect(() => {
+        // We only want to store the attachment visibility for the current report.
+        // If the current report ID changes, clear the state.
+        setIsAttachmentHidden({});
+    }, [currentReportID]);
+
+    const contextValue = useMemo(
+        () => ({
+            isAttachmentHidden,
+            updateIsAttachmentHidden: (reportActionID, value) => setIsAttachmentHidden((state) => ({...state, [reportActionID]: value})),
+        }),
+        [isAttachmentHidden],
+    );
+
+    return <ReportAttachmentsContext.Provider value={contextValue}>{props.children}</ReportAttachmentsContext.Provider>;
+}
+
+ReportAttachmentsProvider.propTypes = propTypes;
+ReportAttachmentsProvider.displayName = 'ReportAttachmentsProvider';
+
+export default ReportAttachmentsContext;
+export {ReportAttachmentsProvider};

src/styles/styles.js

@@ -2545,6 +2545,13 @@ const styles = {
         position: 'absolute',
     },
 
+    attachmentRevealButtonContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...spacing.ph4,
+    },
+
     arrowIcon: {
         height: 40,
         width: 40,