[$250] Web - Chat - Composer is expanded briefly when returning to chat after creating new workspace

[lanitochka17]

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

---

Version Number: 1.4.58-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Profile > Workspaces
3. Create a new workspace
4. Click back button on the top left
5. Click Chat icon on the bottom left

Expected Result:

The composer will not appear expanded when returning to chat

Actual Result:

The composer appears expanded briefly when returning to chat after creating a new workspace

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6431596_1711719926703.composer_expand.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0187883d3354706f5f
• Upwork Job ID: 1776300112459137024
• Last Price Increase: 2024-04-12

[melvin-bot]

Triggered auto assignment to @thienlnam (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[ZhenjaHorbach]

Proposal

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

Web - Chat - Composer is expanded briefly when returning to chat after creating new workspace

What is the root cause of that problem?

Problem related with the fact that when we get isComposerFullSize from onyx it equals {}

App/src/pages/home/ReportScreen.tsx

Lines 693 to 696 in 540c5dd

	isComposerFullSize: {
	key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`,
	initialValue: false,
	},

And then we get true from {}

App/src/pages/home/ReportScreen.tsx

Line 649 in 540c5dd

isComposerFullSize={!!isComposerFullSize}

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

So maybe the problem is related to onyx
But as an alternative we can add a check for object using selector and return false in this case

App/src/pages/home/ReportScreen.tsx

Lines 693 to 696 in 540c5dd

	isComposerFullSize: {
	key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`,
	initialValue: false,
	},

What alternative solutions did you explore? (Optional)

NA

[thienlnam]

Not a blocker - added to the main tracking issue

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0187883d3354706f5f

[thienlnam]

Opening this to external contributors!

[melvin-bot]

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

[mananjadhav]

So maybe the problem is related to onyx

@ZhenjaHorbach Sorry I didn't understand what you mean by this ^.

@lanitochka17 Can you confirm if this is only for Web or all platforms?

[ZhenjaHorbach]

So maybe the problem is related to onyx

@ZhenjaHorbach Sorry I didn't understand what you mean by this ^.

@lanitochka17 Can you confirm if this is only for Web or all platforms?

I wanted to say that this is unexpected behavior that onyx returns us an empty object instead of a boolean value when opening a report first time

But after testing it seems to me that this is no longer reproducible

[lingniker]

it's return enpty string .

App/src/pages/home/ReportScreen.tsx

Lines 101 to 106 in 540c5dd

	/** Get the currently viewed report ID as number */
	function getReportID(route: ReportScreenNavigationProps['route']): string {
	// The report ID is used in an onyx key. If it's an empty string, onyx will return
	// a collection instead of an individual report.
	return String(route.params?.reportID || '');
	}

we get isComposerFullSize from onyx it equals {} ， instead of an individual report.

App/src/pages/home/ReportScreen.tsx

Lines 693 to 696 in 540c5dd

	isComposerFullSize: {
	key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`,
	initialValue: false,
	},

so !!isComperFullSize = true . This is wrong. Resulting in a problem with sub-component rendering.

App/src/pages/home/ReportScreen.tsx

Line 649 in 540c5dd

isComposerFullSize={!!isComposerFullSize}

The latest code has fixed this problem.
return String(route.params?.reportID || 0);

App/src/pages/home/ReportScreen.tsx

Lines 102 to 107 in 564933c

	/** Get the currently viewed report ID as number */
	function getReportID(route: ReportScreenNavigationProps['route']): string {
	// The report ID is used in an onyx key. If it's an empty string, onyx will return
	// a collection instead of an individual report.
	return String(route.params?.reportID || 0);
	}

[melvin-bot]

📣 @lingniker! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[ZhenjaHorbach]

it's return enpty string .

App/src/pages/home/ReportScreen.tsx

Lines 101 to 106 in 540c5dd

	/** Get the currently viewed report ID as number */
	function getReportID(route: ReportScreenNavigationProps['route']): string {
	// The report ID is used in an onyx key. If it's an empty string, onyx will return
	// a collection instead of an individual report.
	return String(route.params?.reportID || '');
	}

we get isComposerFullSize from onyx it equals {} ， instead of an individual report.

App/src/pages/home/ReportScreen.tsx

Lines 693 to 696 in 540c5dd

	isComposerFullSize: {
	key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`,
	initialValue: false,
	},

so !!isComperFullSize = true . This is wrong. Resulting in a problem with sub-component rendering.

App/src/pages/home/ReportScreen.tsx

Line 649 in 540c5dd

isComposerFullSize={!!isComposerFullSize}

The latest code has fixed this problem. return String(route.params?.reportID || 0);

App/src/pages/home/ReportScreen.tsx

Lines 102 to 107 in 564933c

	/** Get the currently viewed report ID as number */
	function getReportID(route: ReportScreenNavigationProps['route']): string {
	// The report ID is used in an onyx key. If it's an empty string, onyx will return
	// a collection instead of an individual report.
	return String(route.params?.reportID || 0);
	}

Good point )
But in any case, this bug is not relevant
Because we reverted the PR that caused this regression
#39377

[melvin-bot]

@mananjadhav, @thienlnam Whoops! This issue is 2 days overdue. Let's get this updated quick!

[lingniker]

Contributor details
Your Expensify account email: nikertest1@proton.com
Upwork Profile Link: https://www.upwork.com/freelancers/~018c7eaf42c45f292f

[melvin-bot]

⚠️ Invalid email. Please make sure to create an Expensify account with this email first here.

[lingniker]

Contributor details
Your Expensify account email: lingyuanping@outlook.com
Upwork Profile Link: https://www.upwork.com/freelancers/~018c7eaf42c45f292f

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot]

@mananjadhav, @thienlnam Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[thienlnam]

So to double check, this is no longer reproducible?

[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]

@mananjadhav @anmurali @thienlnam this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[anmurali]

Yea, I cannot reproduce on staging or prod. Closing.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989