Merge pull request #90912 from margelo/@chrispader/composer-editing-regression-admin-only-room

[CP Staging] fix: Allow editing sent messages when chat "Who can post" in chat is set to "Admins only"

Author: mountiny

src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx

@@ -25,10 +25,14 @@ import ComposerProvider from './ComposerProvider';
 import ComposerSendButton from './ComposerSendButton';
 
 type ReportActionComposeProps = {
+    /** Report ID */
     reportID: string;
+
+    /** Whether the composer is edit only */
+    isEditOnly?: boolean;
 };
 
-function ComposerInner({reportID}: ReportActionComposeProps) {
+function ComposerInner({reportID, isEditOnly = false}: ReportActionComposeProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isEditingInComposer} = useComposerEditState();
@@ -57,22 +61,27 @@ function ComposerInner({reportID}: ReportActionComposeProps) {
                             <Composer.SendButton reportID={reportID} />
                         </Composer.Box>
                     </Composer.DropZone>
-                    <Composer.Footer>
-                        {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
-                        <Composer.TypingIndicator reportID={reportID} />
-                        <Composer.ExceededLength />
-                    </Composer.Footer>
+                    {!isEditOnly && (
+                        <Composer.Footer>
+                            {!shouldUseNarrowLayout && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
+                            <Composer.TypingIndicator reportID={reportID} />
+                            <Composer.ExceededLength />
+                        </Composer.Footer>
+                    )}
                 </OfflineWithFeedback>
                 <Composer.ImportedState />
             </View>
         </View>
     );
 }
 
-function Composer({reportID}: ReportActionComposeProps) {
+function Composer({reportID, ...restProps}: ReportActionComposeProps) {
     return (
         <ComposerProvider reportID={reportID}>
-            <ComposerInner reportID={reportID} />
+            <ComposerInner
+                reportID={reportID}
+                {...restProps}
+            />
         </ComposerProvider>
     );
 }

src/pages/inbox/report/ReportActionsList.tsx

@@ -79,6 +79,7 @@ import ShowPreviousMessagesButton from './ShowPreviousMessagesButton';
 import StaticReportActionsPreview from './StaticReportActionsPreview';
 import useReportActionsNewActionLiveTail from './useReportActionsNewActionLiveTail';
 import useReportUnreadMessageScrollTracking from './useReportUnreadMessageScrollTracking';
+import useShouldShowComposerForActiveEditDraft from './useShouldShowComposerForActiveEditDraft';
 
 type ReportActionsListProps = {
     /** The report currently being looked at */
@@ -841,7 +842,8 @@ function ReportActionsList({
         () => [shouldUseNarrowLayout ? unreadMarkerReportActionID : undefined, isArchivedNonExpenseReport(report, isReportArchived), draftReportAction?.reportActionID, draftMessageHTML],
         [draftMessageHTML, draftReportAction?.reportActionID, unreadMarkerReportActionID, shouldUseNarrowLayout, report, isReportArchived],
     );
-    const hideComposer = !canUserPerformWriteAction(report, isReportArchived);
+    const shouldShowComposerForActiveEditDraft = useShouldShowComposerForActiveEditDraft();
+    const hideComposer = !canUserPerformWriteAction(report, isReportArchived) && !shouldShowComposerForActiveEditDraft;
     const shouldShowReportRecipientLocalTime = canShowReportRecipientLocalTime(personalDetailsList, report, currentUserAccountID) && !isComposerFullSize;
     const canShowHeader = isOffline || hasHeaderRendered.current;
 

src/pages/inbox/report/ReportFooter.tsx

@@ -33,6 +33,7 @@ import {isLoadingInitialReportActionsSelector} from '@src/selectors/ReportMetaDa
 import type * as OnyxTypes from '@src/types/onyx';
 import ReportActionCompose from './ReportActionCompose/ReportActionCompose';
 import SystemChatReportFooterMessage from './SystemChatReportFooterMessage';
+import useShouldShowComposerForActiveEditDraft from './useShouldShowComposerForActiveEditDraft';
 
 const policyRoleSelector = (policy: OnyxEntry<OnyxTypes.Policy>) => policy?.role;
 
@@ -77,6 +78,7 @@ function ReportFooter() {
     const canWriteInReport = canWriteInReportUtil(report);
     const isSystemChat = isSystemChatUtil(report);
     const isAdminsOnlyPostingRoom = isAdminsOnlyPostingRoomUtil(report);
+    const shouldShowComposerForActiveEditDraft = useShouldShowComposerForActiveEditDraft();
 
     if (!isCurrentReportLoadedFromOnyx || !report || !reportIDFromRoute) {
         return null;
@@ -88,9 +90,7 @@ function ReportFooter() {
     if (!shouldHideComposer) {
         return (
             <View style={[chatFooterStyles, isComposerFullSize && styles.chatFooterFullCompose]}>
-                <SwipeableView onSwipeDown={Keyboard.dismiss}>
-                    <ReportActionCompose reportID={reportIDFromRoute} />
-                </SwipeableView>
+                <ComposerSwipeable reportID={reportIDFromRoute} />
             </View>
         );
     }
@@ -151,12 +151,22 @@ function ReportFooter() {
         );
     }
 
-    // Admins-only room
+    // Admins-only room — keep the banner visible; mount the composer above it while editing on narrow screens.
     if (isAdminsOnlyPostingRoom && !isUserPolicyAdmin) {
+        const isEditingWithComposer = shouldShowComposerForActiveEditDraft;
+
         return (
-            <View style={[styles.chatFooter, styles.mt4, shouldUseNarrowLayout && styles.mb5]}>
+            <View style={[styles.chatFooter, !isEditingWithComposer && styles.mt4, shouldUseNarrowLayout && styles.mb5]}>
+                {isEditingWithComposer && (
+                    <View style={[isComposerFullSize ? styles.chatFooterFullCompose : undefined, styles.mb2]}>
+                        <ComposerSwipeable
+                            reportID={reportIDFromRoute}
+                            isEditOnly
+                        />
+                    </View>
+                )}
                 <Banner
-                    containerStyles={[styles.chatFooterBanner]}
+                    containerStyles={[styles.chatFooterBanner, isEditingWithComposer && styles.mt2]}
                     text={translate('adminOnlyCanPost')}
                     icon={expensifyIcons.Lightbulb}
                     shouldShowIcon
@@ -197,4 +207,15 @@ function ReportFooter() {
     return null;
 }
 
+function ComposerSwipeable({reportID, isEditOnly = false}: {reportID: string; isEditOnly?: boolean}) {
+    return (
+        <SwipeableView onSwipeDown={Keyboard.dismiss}>
+            <ReportActionCompose
+                reportID={reportID}
+                isEditOnly={isEditOnly}
+            />
+        </SwipeableView>
+    );
+}
+
 export default ReportFooter;

src/pages/inbox/report/useShouldShowComposerForActiveEditDraft.ts

@@ -0,0 +1,11 @@
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import {useReportActionActiveEdit} from './ReportActionEditMessageContext';
+
+/** Narrow-screen edits use the bottom composer (#90516); mount it when a draft exists even if posting is admin-only. */
+function useShouldShowComposerForActiveEditDraft() {
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {editingReportActionID} = useReportActionActiveEdit();
+    return shouldUseNarrowLayout && editingReportActionID !== null;
+}
+
+export default useShouldShowComposerForActiveEditDraft;