Report Attachments Modal Route

src/ROUTES.js

@@ -68,6 +68,8 @@ export default {
     getReportRoute: (reportID) => `r/${reportID}`,
     REPORT_WITH_ID_DETAILS_SHARE_CODE: 'r/:reportID/details/shareCode',
     getReportShareCodeRoute: (reportID) => `r/${reportID}/details/shareCode`,
+    REPORT_ATTACHMENTS: 'r/:reportID/attachment',
+    getReportAttachmentRoute: (reportID, source) => `r/${reportID}/attachment?source=${encodeURI(source)}`,
     SELECT_YEAR: 'select-year',
     getYearSelectionRoute: (minYear, maxYear, currYear, backTo) => `select-year?min=${minYear}&max=${maxYear}&year=${currYear}&backTo=${backTo}`,
 

src/SCREENS.js

@@ -6,6 +6,7 @@ export default {
     HOME: 'Home',
     LOADING: 'Loading',
     REPORT: 'Report',
+    REPORT_ATTACHMENTS: 'ReportAttachments',
     NOT_FOUND: 'not-found',
     TRANSITION_FROM_OLD_DOT: 'TransitionFromOldDot',
 };

src/components/AttachmentCarousel/index.js

@@ -177,6 +177,9 @@ class AttachmentCarousel extends React.Component {
             throw new Error('Attachment not found');
         }
 
+        // Update the parent modal's state with the source and name from the mapped attachments
+        this.props.onNavigate(attachments[page]);
+
         return {
             page,
             attachments,

src/components/AttachmentModal.js

@@ -36,6 +36,9 @@ const propTypes = {
     /** Optional callback to fire when we want to preview an image and approve it for use. */
     onConfirm: PropTypes.func,
 
+    /** Whether the modal should be open by default */
+    defaultOpen: PropTypes.bool,
+
     /** Optional callback to fire when we want to do something after modal show. */
     onModalShow: PropTypes.func,
 
@@ -46,7 +49,7 @@ const propTypes = {
     originalFileName: PropTypes.string,
 
     /** A function as a child to pass modal launching methods to */
-    children: PropTypes.func.isRequired,
+    children: PropTypes.func,
 
     /** Whether source url requires authentication */
     isAuthTokenRequired: PropTypes.bool,
@@ -68,7 +71,9 @@ const propTypes = {
 const defaultProps = {
     source: '',
     onConfirm: null,
+    defaultOpen: false,
     originalFileName: '',
+    children: null,
     isAuthTokenRequired: false,
     allowDownload: false,
     headerTitle: null,
@@ -82,7 +87,7 @@ class AttachmentModal extends PureComponent {
         super(props);
 
         this.state = {
-            isModalOpen: false,
+            isModalOpen: this.props.defaultOpen,
             shouldLoadAttachment: false,
             isAttachmentInvalid: false,
             isAuthTokenRequired: props.isAuthTokenRequired,
@@ -337,12 +342,13 @@ class AttachmentModal extends PureComponent {
                     shouldShowCancelButton={false}
                 />
 
-                {this.props.children({
-                    displayFileInModal: this.validateAndDisplayFileToUpload,
-                    show: () => {
-                        this.setState({isModalOpen: true});
-                    },
-                })}
+                {this.props.children &&
+                    this.props.children({
+                        displayFileInModal: this.validateAndDisplayFileToUpload,
+                        show: () => {
+                            this.setState({isModalOpen: true});
+                        },
+                    })}
             </>
         );
     }

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -1,13 +1,14 @@
 import React from 'react';
+import Navigation from '../../../libs/Navigation/Navigation';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
-import AttachmentModal from '../../AttachmentModal';
 import styles from '../../../styles/styles';
 import ThumbnailImage from '../../ThumbnailImage';
 import PressableWithoutFocus from '../../PressableWithoutFocus';
 import CONST from '../../../CONST';
 import {ShowContextMenuContext, showContextMenuForReport} from '../../ShowContextMenuContext';
 import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
 import * as ReportUtils from '../../../libs/ReportUtils';
+import ROUTES from '../../../ROUTES';
 
 const ImageRenderer = (props) => {
     const htmlAttribs = props.tnode.attributes;
@@ -30,7 +31,6 @@ const ImageRenderer = (props) => {
     //           control and thus require no authToken to verify access.
     //
     const isAttachment = Boolean(htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]);
-    const originalFileName = htmlAttribs['data-name'];
 
     // Files created/uploaded/hosted by App should resolve from API ROOT. Other URLs aren't modified
     const previewSource = tryResolveUrlFromApiRoot(htmlAttribs.src);
@@ -51,29 +51,22 @@ const ImageRenderer = (props) => {
     ) : (
         <ShowContextMenuContext.Consumer>
             {({anchor, report, action, checkIfContextMenuActive}) => (
-                <AttachmentModal
-                    allowDownload
-                    reportID={report.reportID}
-                    source={source}
-                    isAuthTokenRequired={isAttachment}
-                    originalFileName={originalFileName}
+                <PressableWithoutFocus
+                    style={styles.noOutline}
+                    onPress={() => {
+                        const route = ROUTES.getReportAttachmentRoute(report.reportID, source);
+                        Navigation.navigate(route);
+                    }}
+                    onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
                 >
-                    {({show}) => (
-                        <PressableWithoutFocus
-                            style={styles.noOutline}
-                            onPress={show}
-                            onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
-                        >
-                            <ThumbnailImage
-                                previewSourceURL={previewSource}
-                                style={styles.webViewStyles.tagStyles.img}
-                                isAuthTokenRequired={isAttachment}
-                                imageWidth={imageWidth}
-                                imageHeight={imageHeight}
-                            />
-                        </PressableWithoutFocus>
-                    )}
-                </AttachmentModal>
+                    <ThumbnailImage
+                        previewSourceURL={previewSource}
+                        style={styles.webViewStyles.tagStyles.img}
+                        isAuthTokenRequired={isAttachment}
+                        imageWidth={imageWidth}
+                        imageHeight={imageHeight}
+                    />
+                </PressableWithoutFocus>
             )}
         </ShowContextMenuContext.Consumer>
     );

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -250,6 +250,18 @@ class AuthScreens extends React.Component {
                         return ConciergePage;
                     }}
                 />
+                <RootStack.Screen
+                    name={SCREENS.REPORT_ATTACHMENTS}
+                    options={{
+                        headerShown: false,
+                        presentation: 'transparentModal',
+                    }}
+                    getComponent={() => {
+                        const ReportAttachments = require('../../../pages/home/report/ReportAttachments').default;
+                        return ReportAttachments;
+                    }}
+                    listeners={modalScreenListeners}
+                />
                 <RootStack.Screen
                     name={NAVIGATORS.FULL_SCREEN_NAVIGATOR}
                     options={defaultScreenOptions}

src/libs/Navigation/Navigation.js

@@ -11,6 +11,7 @@ import navigationRef from './navigationRef';
 import NAVIGATORS from '../../NAVIGATORS';
 import originalGetTopmostReportId from './getTopmostReportId';
 import getStateFromPath from './getStateFromPath';
+import SCREENS from '../../SCREENS';
 
 let resolveNavigationIsReadyPromise;
 const navigationIsReadyPromise = new Promise((resolve) => {
@@ -132,19 +133,24 @@ function dismissModal(targetReportID) {
     }
     const rootState = navigationRef.getRootState();
     const lastRoute = _.last(rootState.routes);
-    if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || lastRoute.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR) {
-        // if we are not in the target report, we need to navigate to it after dismissing the modal
-        if (targetReportID && targetReportID !== getTopmostReportId(rootState)) {
-            const state = getStateFromPath(ROUTES.getReportRoute(targetReportID));
-
-            const action = getActionFromState(state, linkingConfig.config);
-            action.type = 'REPLACE';
-            navigationRef.current.dispatch(action);
-        } else {
-            navigationRef.current.dispatch(StackActions.pop());
+    switch (lastRoute.name) {
+        case NAVIGATORS.RIGHT_MODAL_NAVIGATOR:
+        case NAVIGATORS.FULL_SCREEN_NAVIGATOR:
+        case SCREENS.REPORT_ATTACHMENTS:
+            // if we are not in the target report, we need to navigate to it after dismissing the modal
+            if (targetReportID && targetReportID !== getTopmostReportId(rootState)) {
+                const state = getStateFromPath(ROUTES.getReportRoute(targetReportID));
+
+                const action = getActionFromState(state, linkingConfig.config);
+                action.type = 'REPLACE';
+                navigationRef.current.dispatch(action);
+            } else {
+                navigationRef.current.dispatch(StackActions.pop());
+            }
+            break;
+        default: {
+            Log.hmmm('[Navigation] dismissModal failed because there is no modal stack to dismiss');
         }
-    } else {
-        Log.hmmm('[Navigation] dismissModal failed because there is no modal stack to dismiss');
     }
 }
 

src/libs/Navigation/linkingConfig.js

@@ -14,6 +14,7 @@ export default {
             UnlinkLogin: ROUTES.UNLINK_LOGIN,
             [SCREENS.TRANSITION_FROM_OLD_DOT]: ROUTES.TRANSITION_FROM_OLD_DOT,
             Concierge: ROUTES.CONCIERGE,
+            [SCREENS.REPORT_ATTACHMENTS]: ROUTES.REPORT_ATTACHMENTS,
 
             // Sidebar
             [SCREENS.HOME]: {

src/pages/home/report/ReportAttachments.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import _ from 'underscore';
+import PropTypes from 'prop-types';
+import AttachmentModal from '../../../components/AttachmentModal';
+import Navigation from '../../../libs/Navigation/Navigation';
+
+const propTypes = {
+    /** Navigation route context info provided by react navigation */
+    route: PropTypes.shape({
+        /** Route specific parameters used on this screen */
+        params: PropTypes.shape({
+            /** The report ID which the attachment is associated with */
+            reportID: PropTypes.string.isRequired,
+            /** The uri encoded source of the attachment */
+            source: PropTypes.string.isRequired,
+        }).isRequired,
+    }).isRequired,
+};
+
+function ReportAttachments(props) {
+    const reportID = _.get(props, ['route', 'params', 'reportID']);
+    const source = decodeURI(_.get(props, ['route', 'params', 'source']));
+
+    return (
+        <AttachmentModal
+            allowDownload
+            defaultOpen
+            reportID={reportID}
+            source={source}
+            onModalHide={() => Navigation.dismissModal(reportID)}
+        />
+    );
+}
+
+ReportAttachments.propTypes = propTypes;
+ReportAttachments.displayName = 'ReportAttachments';
+
+export default ReportAttachments;