[$500] Feature Request: Add full screen expand button when editing a messge

[kavimuru]

Held on #16078
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Problem:

When there's multiple lines being edited, there is a "full-screen expand" button in the upper-left of the compose window, but not when editing an existin

Solution:

Add the full-screen expand button to the upper-left when editing an existing comment

Context/Examples/Screenshots/Notes:

Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

full.screen.expand.button.mp4

Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1677476774053969

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e878e8c8ed91741e
• Upwork Job ID: 1632674482135707648
• Last Price Increase: 2024-11-19

Issue Owner

Current Issue Owner: @s77rt

[MelvinBot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[sonialiap]

On web, when editing a message the edit composer opens to show the entire message if it's <=16 lines. The editor does not currently expand beyond 16 lines.

[sonialiap]

I can't think of a reason for why we wouldn't want to allow expanding the editor to full screen 👍

[MelvinBot]

Triggered auto assignment to @cristipaval (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[cristipaval]

This could be external.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01e878e8c8ed91741e

[MelvinBot]

Current assignee @sonialiap is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @s77rt (External)

[MelvinBot]

Current assignee @cristipaval is eligible for the External assigner, not assigning anyone new.

[s77rt]

@tienifr I believe this still requires proposals to follow the template.

[tienifr]

Edited by proposal-police: This proposal was edited at 2024-10-03 09:28:01 UTC.

@s77rt Sure, here's my proposal.

Proposal

Please re-state the problem that we are trying to solve in this issue.

When there's multiple lines being edited, there is a "full-screen expand" button in the upper-left of the compose window, but not when editing an existing.

What is the root cause of that problem?

This is because we don't have that feature yet when editing the message.

What changes do you think we should make in order to solve the problem?

We can add this component

App/src/pages/home/report/ReportActionCompose.js

Line 519 in f2bded2

<TouchableOpacity

that is already in ReportActionComposer into the src/pages/home/report/ReportActionItemMessageEdit.js. Specifically above this component:

App/src/pages/home/report/ReportActionItemMessageEdit.js

Line 232 in aafc79f

<Composer

The logic should be similar as well:

• There'll be a new setIsEditComposerFullSize to indicate which edit composer is currently full size (similar to the setIsComposerFullSize)
• The full size state needs to be passed into the ReportActionItemMessageEdit by using useOnyx

    const [isComposerFullSize] = useOnyx(`reportActionsDrafts_ ${reportID}`, {
        selector: (actionDraft) => {
            return actionDraft?.[action.reportActionID].isFullSize;
        },
        initialValue: false
    });

• We'll apply full size style to the composer using the full size state here

style={[styles.chatItemMessage, styles.flexRow, isComposerFullSize && {
                    height: windowHeight - HEADER_HEIGHT - (shouldShowComposeInput && mainComposerHeight) - 16 // padding
                }]}

We can store the main composer height in Onyx and get its value a.k.a mainComposerHeight in ReportActionItemMessageEdit

• Enable isFullSize when users press Expand button
• Disable isFullSize when users press Collapse button or dismiss edit mode
• Hide main composer if isFullSize (from reportActionsDrafts_) is true and the edit composer is focused (from ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT)

What alternative solutions did you explore? (Optional)

NA

Result

This is a very draft screenshot of me implementing the change above, the exact design will depend on the design team.

web-resize.mp4

[s77rt]

Thanks for the proposal @tienifr. One thing I'm concerned about is how will you make the composer take full height being a FlatList item.

[s77rt]

Still no proposals yet

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[QichenZhu]

@s77rt Could you summarize the reasons the previous proposals were not accepted, as this discussion is quite long?

Still waiting for proposals... (even for proposals that just make this work without Onyx)

What other key characteristics should new proposals have compared to the old ones?

Thanks!

[s77rt]

@QichenZhu When clicking on the expand button the following are expected:

• Message view takes full height
• The focus and the cursor position are not lost
• The unread indicator functions normally i.e. if someone sends you a message it should be marked as unread after you close the edit composer
• Save state in onyx I don't think we should focus on this one as it's the reason we didn't move forward so far

[s77rt]

cc @tienifr I think your proposal would work too if we omit the save in onyx feature, would you be able to double check your proposal as well

[melvin-bot]

@s77rt, @sonialiap, @cristipaval Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[s77rt]

Still looking for proposals

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@s77rt, @sonialiap, @cristipaval Whoops! This issue is 2 days overdue. Let's get this updated quick!

[s77rt]

Same ^

[sonialiap]

@Expensify/design what do you guys think, should we update the behavior of how the comment editor window looks to add a full screen expand button? (OP is current)

Asking because this has been open since March so I wanted to double check whether this is something we want to update or if we're happy with the current functionality and I should close this issue.

[dannymcclain]

I kinda don't see why we wouldn't. Curious for other design team thoughts but I feel like the "composer" should basically always be the same.

[shawnborton]

I don't feel strongly really. I can see the argument for consistency but I can also see where this one might be complicated to pull off correctly since the message that is being edited might not necessarily be docked to the bottom of the view or anything.

[dannymcclain]

I'd be fine doing nothing for now and coming back to it if it comes up as a problem for users.

[cristipaval]

Thanks, @sonialiap and @Expensify/design! I'll close the issue for now and come back to it if the users want it, given the ton of other priorities we have atm.