[No QA] Refactor: "Report attachments" route rename and refactor

src/ROUTES.ts

@@ -477,7 +477,7 @@ const ROUTES = {
             return getUrlWithBackToParam(`${baseRoute}${queryString}` as const, backTo);
         },
     },
-    ATTACHMENTS: {
+    REPORT_ATTACHMENTS: {
         route: 'attachment',
         getRoute: (params?: ReportAttachmentsRouteParams) => getAttachmentModalScreenRoute('attachment', params),
     },
@@ -3312,11 +3312,11 @@ const SHARED_ROUTE_PARAMS: Partial<Record<Screen, string[]>> = {
 export {PUBLIC_SCREENS_ROUTES, SHARED_ROUTE_PARAMS, VERIFY_ACCOUNT};
 export default ROUTES;
 
-type ReportAttachmentsRoute = typeof ROUTES.ATTACHMENTS.route;
+type ReportAttachmentsRoute = typeof ROUTES.REPORT_ATTACHMENTS.route;
 type ReportAddAttachmentRoute = `r/${string}/attachment/add`;
 type AttachmentRoutes = ReportAttachmentsRoute | ReportAddAttachmentRoute;
 
-type ReportAttachmentsRouteParams = RootNavigatorParamList[typeof SCREENS.ATTACHMENTS];
+type ReportAttachmentsRouteParams = RootNavigatorParamList[typeof SCREENS.REPORT_ATTACHMENTS];
 type ReportAddAttachmentRouteParams = RootNavigatorParamList[typeof SCREENS.REPORT_ADD_ATTACHMENT];
 
 function getAttachmentModalScreenRoute(url: AttachmentRoutes, params?: ReportAttachmentsRouteParams | ReportAddAttachmentRouteParams) {

src/SCREENS.ts

@@ -7,7 +7,7 @@ import type DeepValueOf from './types/utils/DeepValueOf';
 const PROTECTED_SCREENS = {
     HOME: 'Home',
     CONCIERGE: 'Concierge',
-    ATTACHMENTS: 'Attachments',
+    REPORT_ATTACHMENTS: 'ReportAttachments',
     REPORT_ADD_ATTACHMENT: 'ReportAddAttachment',
     TRACK_EXPENSE: 'TrackExpense',
     SUBMIT_EXPENSE: 'SubmitExpense',

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx

@@ -104,7 +104,7 @@ function ImageRenderer({tnode}: CustomRendererProps<TBlock>) {
                                 }
 
                                 const attachmentLink = tnode.parent?.attributes?.href;
-                                const route = ROUTES.ATTACHMENTS?.getRoute({
+                                const route = ROUTES.REPORT_ATTACHMENTS?.getRoute({
                                     attachmentID,
                                     reportID,
                                     type,

src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx

@@ -46,7 +46,15 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                                     return;
                                 }
                                 const isAuthTokenRequired = !!htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE];
-                                const route = ROUTES.ATTACHMENTS.getRoute({attachmentID, reportID: report?.reportID, type, source: sourceURL, accountID, isAuthTokenRequired, hashKey});
+                                const route = ROUTES.REPORT_ATTACHMENTS.getRoute({
+                                    attachmentID,
+                                    reportID: report?.reportID,
+                                    type,
+                                    source: sourceURL,
+                                    accountID,
+                                    isAuthTokenRequired,
+                                    hashKey,
+                                });
                                 Navigation.navigate(route);
                             }}
                         />

src/components/VideoPlayerContexts/PlaybackContext/playbackContextReportIDUtils.ts

@@ -47,7 +47,7 @@ const getCurrentRouteReportID: (url: string) => string | ProtectedCurrentRouteRe
     return isFocusedRouteAChatThread ? firstReportThatHasURLInAttachments : focusedRouteReportID;
 };
 
-const screensWithReportID = [SCREENS.SEARCH.REPORT_RHP, SCREENS.REPORT, SCREENS.SEARCH.MONEY_REQUEST_REPORT, SCREENS.ATTACHMENTS];
+const screensWithReportID = [SCREENS.SEARCH.REPORT_RHP, SCREENS.REPORT, SCREENS.SEARCH.MONEY_REQUEST_REPORT, SCREENS.REPORT_ATTACHMENTS];
 
 function hasReportIdInRouteParams(route: SearchRoute): route is RouteWithReportIDInParams<SearchRoute> {
     return !!route && !!route.params && !!screensWithReportID.find((screen) => screen === route.name) && 'reportID' in route.params;

src/components/VideoPlayerPreview/index.tsx

@@ -50,7 +50,7 @@ type VideoPlayerPreviewProps = {
     isDeleted?: boolean;
 };
 
-const isOnAttachmentRoute = () => Navigation.getActiveRouteWithoutParams() === `/${ROUTES.ATTACHMENTS.route}`;
+const isOnAttachmentRoute = () => Navigation.getActiveRouteWithoutParams() === `/${ROUTES.REPORT_ATTACHMENTS.route}`;
 
 function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDimensions, videoDuration, onShowModalPress, isDeleted}: VideoPlayerPreviewProps) {
     const styles = useThemeStyles();

src/hooks/useCheckIfRouteHasRemainedUnchanged.ts

@@ -33,7 +33,7 @@ function useCheckIfRouteHasRemainedUnchanged(videoUrl: string) {
         // If on AttachmentModal, only play when the source parameters match videoUrl ensures correct play VideoPlayer share for this one
         const currentRoute = navigationRef.getCurrentRoute();
         if (
-            currentRoute?.name === SCREENS.ATTACHMENTS &&
+            currentRoute?.name === SCREENS.REPORT_ATTACHMENTS &&
             currentRoute?.params &&
             'source' in currentRoute.params &&
             currentRoute.params.source === videoUrl &&
@@ -57,7 +57,7 @@ function useCheckIfRouteHasRemainedUnchanged(videoUrl: string) {
             const route = navigationRef.getCurrentRoute();
             // If the app is launched with the attachment route, it will always remain on the report screen.
             // Thus, it can be considered as still being on the rendered route.
-            isOnInitialRenderedRouteRef.current = navigation.isFocused() || route?.name === SCREENS.ATTACHMENTS;
+            isOnInitialRenderedRouteRef.current = navigation.isFocused() || route?.name === SCREENS.REPORT_ATTACHMENTS;
         });
         // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -71,7 +71,7 @@ function useCheckIfRouteHasRemainedUnchanged(videoUrl: string) {
         const unsubscribeBlur = navigation.addListener('blur', () => {
             const route = navigationRef.getCurrentRoute();
 
-            if (route?.name === SCREENS.ATTACHMENTS) {
+            if (route?.name === SCREENS.REPORT_ATTACHMENTS) {
                 // Skip route update when attachment modal is opened
                 return;
             }

src/hooks/useSearchState.ts

@@ -30,7 +30,7 @@ const useSearchState = (): SearchStateResult => {
             return {isOnSearch: false, hashKey: undefined};
         }
 
-        const isSearchAttachmentModal = route?.name === SCREENS.ATTACHMENTS && type === CONST.ATTACHMENT_TYPE.SEARCH;
+        const isSearchAttachmentModal = route?.name === SCREENS.REPORT_ATTACHMENTS && type === CONST.ATTACHMENT_TYPE.SEARCH;
         const queryJSON = q ? buildSearchQueryJSON(q) : ({} as Partial<SearchQueryJSON>);
         // for attachment modal the hashKey is passed through route params, fallback to it if not found in queryJSON
         const hashKey = queryJSON?.hash ? queryJSON.hash : (hashKeyFromRoute ?? undefined);

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -549,7 +549,7 @@ function AuthScreens() {
                     getComponent={loadSubmitExpensePage}
                 />
                 <RootStack.Screen
-                    name={SCREENS.ATTACHMENTS}
+                    name={SCREENS.REPORT_ATTACHMENTS}
                     options={attachmentModalScreenOptions}
                     getComponent={loadAttachmentModalScreen}
                     listeners={modalScreenListeners}

src/libs/Navigation/AppNavigator/createRootStackNavigator/GetStateForActionHandlers.ts

@@ -19,7 +19,7 @@ const MODAL_ROUTES_TO_DISMISS: string[] = [
     NAVIGATORS.SHARE_MODAL_NAVIGATOR,
     NAVIGATORS.TEST_DRIVE_MODAL_NAVIGATOR,
     SCREENS.NOT_FOUND,
-    SCREENS.ATTACHMENTS,
+    SCREENS.REPORT_ATTACHMENTS,
     SCREENS.REPORT_ADD_ATTACHMENT,
     SCREENS.TRANSACTION_RECEIPT,
     SCREENS.MONEY_REQUEST.RECEIPT_PREVIEW,

src/libs/Navigation/helpers/linkTo/index.ts

@@ -50,7 +50,7 @@ function shouldCheckFullScreenRouteMatching(action: StackNavigationAction): acti
 }
 
 function isNavigatingToAttachmentScreen(focusedRouteName?: string) {
-    return focusedRouteName === SCREENS.ATTACHMENTS;
+    return focusedRouteName === SCREENS.REPORT_ATTACHMENTS;
 }
 
 function isNavigatingToReportWithSameReportID(currentRoute: NavigationPartialRoute, newRoute: NavigationPartialRoute) {

src/libs/Navigation/linkingConfig/config.ts

@@ -24,7 +24,7 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
         [SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP]: ROUTES.GOOGLE_SIGN_IN,
         [SCREENS.SAML_SIGN_IN]: ROUTES.SAML_SIGN_IN,
         [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: ROUTES.DESKTOP_SIGN_IN_REDIRECT,
-        [SCREENS.ATTACHMENTS]: ROUTES.ATTACHMENTS.route,
+        [SCREENS.REPORT_ATTACHMENTS]: ROUTES.REPORT_ATTACHMENTS.route,
         [SCREENS.REPORT_ADD_ATTACHMENT]: ROUTES.REPORT_ADD_ATTACHMENT.route,
         [SCREENS.PROFILE_AVATAR]: ROUTES.PROFILE_AVATAR.route,
         [SCREENS.WORKSPACE_AVATAR]: ROUTES.WORKSPACE_AVATAR.route,

src/libs/Navigation/types.ts

@@ -1911,7 +1911,7 @@ type ReportsSplitNavigatorParamList = {
         referrer?: string;
         backTo?: Routes;
     };
-    [SCREENS.ATTACHMENTS]: AttachmentModalScreensParamList[typeof SCREENS.ATTACHMENTS];
+    [SCREENS.REPORT_ATTACHMENTS]: AttachmentModalScreensParamList[typeof SCREENS.REPORT_ATTACHMENTS];
 };
 
 type SettingsSplitNavigatorParamList = {
@@ -2170,7 +2170,7 @@ type PublicScreensParamList = SharedScreensParamList & {
 };
 
 type AttachmentModalScreensParamList = {
-    [SCREENS.ATTACHMENTS]: AttachmentModalContainerModalProps & {
+    [SCREENS.REPORT_ATTACHMENTS]: AttachmentModalContainerModalProps & {
         source?: AvatarSource;
         reportID?: string;
         accountID?: number;

src/pages/media/AttachmentModalScreen/index.tsx

@@ -3,8 +3,8 @@ import SCREENS from '@src/SCREENS';
 import AttachmentModalContext from './AttachmentModalContext';
 import ProfileAvatarModalContent from './routes/ProfileAvatarModalContent';
 import ReportAddAttachmentModalContent from './routes/report/ReportAddAttachmentModalContent';
+import ReportAttachmentModalContent from './routes/report/ReportAttachmentModalContent';
 import ReportAvatarModalContent from './routes/report/ReportAvatarModalContent';
-import ReportAttachmentModalContent from './routes/ReportAttachmentModalContent';
 import TransactionReceiptModalContent from './routes/TransactionReceiptModalContent';
 import WorkspaceAvatarModalContent from './routes/WorkspaceAvatarModalContent';
 import type {AttachmentModalScreenProps, AttachmentModalScreenType} from './types';
@@ -27,11 +27,11 @@ function AttachmentModalScreen<Screen extends AttachmentModalScreenType>({route,
         return route;
     }, [attachmentsContext, route]);
 
-    if (route.name === SCREENS.ATTACHMENTS) {
+    if (route.name === SCREENS.REPORT_ATTACHMENTS) {
         return (
             <ReportAttachmentModalContent
-                route={routeWithContext as RouteType<typeof SCREENS.ATTACHMENTS>}
-                navigation={navigation as NavigationType<typeof SCREENS.ATTACHMENTS>}
+                route={routeWithContext as RouteType<typeof SCREENS.REPORT_ATTACHMENTS>}
+                navigation={navigation as NavigationType<typeof SCREENS.REPORT_ATTACHMENTS>}
             />
         );
     }

src/pages/media/AttachmentModalScreen/routes/ReportAttachmentModalContent.tsx → src/pages/media/AttachmentModalScreen/routes/report/ReportAttachmentModalContent.tsx

@@ -10,17 +10,17 @@ import {isReportNotFound} from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import type {AttachmentModalBaseContentProps} from '@pages/media/AttachmentModalScreen/AttachmentModalBaseContent/types';
 import AttachmentModalContainer from '@pages/media/AttachmentModalScreen/AttachmentModalContainer';
+import useDownloadAttachment from '@pages/media/AttachmentModalScreen/routes/hooks/useDownloadAttachment';
+import useNavigateToReportOnRefresh from '@pages/media/AttachmentModalScreen/routes/hooks/useNavigateToReportOnRefresh';
+import useReportAttachmentModalType from '@pages/media/AttachmentModalScreen/routes/hooks/useReportAttachmentModalType';
 import type {AttachmentModalScreenProps} from '@pages/media/AttachmentModalScreen/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import useDownloadAttachment from './hooks/useDownloadAttachment';
-import useNavigateToReportOnRefresh from './hooks/useNavigateToReportOnRefresh';
-import useReportAttachmentModalType from './hooks/useReportAttachmentModalType';
 
-function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreenProps<typeof SCREENS.ATTACHMENTS>) {
+function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreenProps<typeof SCREENS.REPORT_ATTACHMENTS>) {
     const {attachmentID, type, source: sourceParam, isAuthTokenRequired, attachmentLink, originalFileName, accountID, reportID, hashKey, headerTitle, onShow, onClose} = route.params;
 
     const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
@@ -70,7 +70,7 @@ function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreen
 
     const onCarouselAttachmentChange = useCallback(
         (attachment: Attachment) => {
-            const routeToNavigate = ROUTES.ATTACHMENTS.getRoute({
+            const routeToNavigate = ROUTES.REPORT_ATTACHMENTS.getRoute({
                 reportID,
                 attachmentID: attachment.attachmentID,
                 type,
@@ -115,7 +115,7 @@ function ReportAttachmentModalContent({route, navigation}: AttachmentModalScreen
     );
 
     return (
-        <AttachmentModalContainer<typeof SCREENS.ATTACHMENTS>
+        <AttachmentModalContainer<typeof SCREENS.REPORT_ATTACHMENTS>
             navigation={navigation}
             contentProps={contentProps}
             modalType={modalType}

src/pages/media/AttachmentModalScreen/types.ts

@@ -39,7 +39,7 @@ type AttachmentModalContainerModalProps = {
 };
 
 const ATTACHMENT_MODAL_SCREENS = [
-    SCREENS.ATTACHMENTS,
+    SCREENS.REPORT_ATTACHMENTS,
     SCREENS.REPORT_ADD_ATTACHMENT,
     SCREENS.REPORT_AVATAR,
     SCREENS.PROFILE_AVATAR,

tests/ui/ReportAttachments.tsx

@@ -39,13 +39,13 @@ jest.mock('@react-native-community/geolocation', () => ({
 }));
 jest.mock('@src/components/Attachments/AttachmentCarousel/Pager/usePageScrollHandler', () => jest.fn());
 
-const renderPage = (initialRouteName: typeof SCREENS.ATTACHMENTS, initialParams: AuthScreensParamList[typeof SCREENS.ATTACHMENTS]) => {
+const renderPage = (initialRouteName: typeof SCREENS.REPORT_ATTACHMENTS, initialParams: AuthScreensParamList[typeof SCREENS.REPORT_ATTACHMENTS]) => {
     return render(
         <ComposeProviders components={[OnyxListItemProvider, LocaleContextProvider, AttachmentModalContextProvider, CurrentReportIDContextProvider, PortalProvider, PlaybackContextProvider]}>
             <NavigationContainer>
                 <Stack.Navigator initialRouteName={initialRouteName}>
                     <Stack.Screen
-                        name={SCREENS.ATTACHMENTS}
+                        name={SCREENS.REPORT_ATTACHMENTS}
                         component={AttachmentModalScreen}
                         initialParams={initialParams}
                     />
@@ -181,7 +181,7 @@ describe('ReportAttachments', () => {
         await waitForBatchedUpdatesWithAct();
 
         // Given the report attachments params
-        const params: AuthScreensParamList[typeof SCREENS.ATTACHMENTS] = {
+        const params: AuthScreensParamList[typeof SCREENS.REPORT_ATTACHMENTS] = {
             source: 'https://staging.expensify.com/chat-attachments/7006877151048865417/w_d060af4fb7ac4a815e6ed99df9ef8dd216fdd8c7.png',
             type: 'r',
             reportID: '7487537791562875',
@@ -191,7 +191,7 @@ describe('ReportAttachments', () => {
         };
 
         // And ReportAttachments is opened
-        renderPage(SCREENS.ATTACHMENTS, params);
+        renderPage(SCREENS.REPORT_ATTACHMENTS, params);
 
         await waitForBatchedUpdatesWithAct();
 
@@ -201,7 +201,7 @@ describe('ReportAttachments', () => {
     });
     it('should fetch the report id, if the report has not yet been opened by the user', async () => {
         // Given the report attachments params
-        const params: AuthScreensParamList[typeof SCREENS.ATTACHMENTS] = {
+        const params: AuthScreensParamList[typeof SCREENS.REPORT_ATTACHMENTS] = {
             source: 'https://staging.expensify.com/chat-attachments/7006877151048865417/w_d060af4fb7ac4a815e6ed99df9ef8dd216fdd8c7.png',
             type: 'r',
             reportID: '7487537791562875',
@@ -211,7 +211,7 @@ describe('ReportAttachments', () => {
         };
 
         // And ReportAttachments is opened
-        renderPage(SCREENS.ATTACHMENTS, params);
+        renderPage(SCREENS.REPORT_ATTACHMENTS, params);
         await waitForBatchedUpdatesWithAct();
 
         const openReportRequest = getFetchMockCalls(WRITE_COMMANDS.OPEN_REPORT).find((request) => {