[Due for payment 2025-03-17] [$250] Android - Settings-In troubleshoot page, authentication status shown as "invalidate with..."

[IuliiaHerets]

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: V9.1.4-0
Reproducible in staging?: Yes
Reproducible in production?: Unable to check, no authentication status in prod
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: User Settings

Action Performed:

1. Launch app
2. Tap settings - troubleshoot
3. Scroll down to authentication status

Expected Result:

In troubleshoot page, authentication status must display "invalidate with delay".

Actual Result:

In troubleshoot page, authentication status "invalidate with..." is shown instead of "invalidate with delay".

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021895097069003918001
• Upwork Job ID: 1895097069003918001
• Last Price Increase: 2025-02-27

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

Triggered auto assignment to @greg-schroeder (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.

[mkzie2]

Proposal

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

In troubleshoot page, authentication status "invalidate with..." is shown instead of "invalidate with delay".

What is the root cause of that problem?

The test tool row split the title and the button with ratio is 2:1 so the button text is cut off if the width is small

App/src/components/TestToolRow.tsx

Lines 18 to 25 in 0b6d1a0

	<View style={styles.flex2}>
	<Text>{title}</Text>
	</View>
	<View style={[styles.flex1, styles.alignItemsEnd]}>{children}</View>
	</View>
	);
	}

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

We need to adjust the ratio again like 1:1 or 3:2 or 4:3. The design team can confirm that.

App/src/components/TestToolRow.tsx

Lines 18 to 25 in 0b6d1a0

	<View style={styles.flex2}>
	<Text>{title}</Text>
	</View>
	<View style={[styles.flex1, styles.alignItemsEnd]}>{children}</View>
	</View>
	);
	}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

We can add a new prop for TestToolRow to custom the style for only special test tool row we want

Result

Here is the result for the ratio 4:3, I think it's the best option.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Kalydosos]

Proposal

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

In troubleshoot page, authentication status shown as "invalidate with..."

What is the root cause of that problem?

The text is quite "long" but we are using a "small" button here

App/src/components/TestToolMenu.tsx

Lines 115 to 121 in 0b6d1a0

	<TestToolRow title={translate('initialSettingsPage.troubleshoot.authenticationStatus')}>
	<Button
	small
	text={translate('initialSettingsPage.troubleshoot.invalidateWithDelay')}
	onPress={() => Session.expireSessionWithDelay()}
	/>
	</TestToolRow>

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

We should instead use a "medium" or "large" button like this

<Button
medium

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

None

[linhvovan29546]

Proposal

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

Android - Settings-In troubleshoot page, authentication status shown as "invalidate with..."

What is the root cause of that problem?

Currently, the test tool content row is wrapped inside TestToolRow, which splits it into two sections:

• The left section has flex: 2.
• The right section has flex: 1.
  

  App/src/components/TestToolRow.tsx

  Lines 14 to 24 in 0b6d1a0

  	function TestToolRow({title, children}: TestToolRowProps) {
  	const styles = useThemeStyles();
  	return (
  	<View style={styles.testRowContainer}>
  	<View style={styles.flex2}>
  	<Text>{title}</Text>
  	</View>
  	<View style={[styles.flex1, styles.alignItemsEnd]}>{children}</View>
  	</View>
  	);
  	}

This forces the left view to always occupy 2/3 of the available space, while the right view takes up 1/3, regardless of the actual content size.

Detail

In the OP, the right layout requires more than 1/3 of the space, but since it is constrained to 1/3, the text gets truncated and appears as "invalidate with..." due to insufficient space.

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

We can update the styling of TestToolRow to make the UI dynamic, allowing components to adjust to their content instead of a fixed ratio. The updated style would ensure that:

• The left layout takes up all remaining space while being able to shrink if needed.
• The right layout remains fixed in size and aligns to the right.
  

  App/src/components/TestToolRow.tsx

  Lines 14 to 24 in 0b6d1a0

  	function TestToolRow({title, children}: TestToolRowProps) {
  	const styles = useThemeStyles();
  	return (
  	<View style={styles.testRowContainer}>
  	<View style={styles.flex2}>
  	<Text>{title}</Text>
  	</View>
  	<View style={[styles.flex1, styles.alignItemsEnd]}>{children}</View>
  	</View>
  	);
  	}

    <View style={styles.testRowContainer}>
            <View style={{
                    flexGrow: 1, // Takes up remaining space
                    flexShrink: 1, // Allows shrinking if needed,
                    marginRight: 20 // Maybe change or add gap to container
            }}>
                <Text>{title}</Text>
            </View>
            <View style={[{
                flexGrow: 0, // Does not grow
                flexShrink: 0, // Does not shrink
                alignItems:'flex-end'}]}>{children}</View>
        </View>

Result

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A, UI bug

What alternative solutions did you explore? (Optional)

N/A
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-23 11:11:53 UTC.

Proposal

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

Android - Settings-In troubleshoot page, authentication status shown as "invalidate with..."

What is the root cause of that problem?

we are giving flex2 on first view left component and flex1 on second view right component
flex1 caused the second to take up less space than needed, making the first with flex2 shrink more than necessary.

Therefor, child component of TestToolRow does not get enough space to expand the button component so text convert into ellipses

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

Here

App/src/components/TestToolRow.tsx

Lines 17 to 22 in 0b6d1a0

	<View style={styles.testRowContainer}>
	<View style={styles.flex2}>
	<Text>{title}</Text>
	</View>
	<View style={[styles.flex1, styles.alignItemsEnd]}>{children}</View>
	</View>

We should add new style properties on both child view so that they can take required space

<View style={styles.testRowContainer}>
    <View style={[styles.alignItemsStart, {flexShrink: 1, flexGrow: 1, marginRight: 15}]}>
        <Text>{title}</Text>
    </View>
    <View style={[styles.alignItemsEnd, {flexShrink: 1, flexGrow: 1}]}>{children}</View>
</View>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

UI issue, don't need test

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@greg-schroeder Whoops! This issue is 2 days overdue. Let's get this updated quick!

[greg-schroeder]

Proposal review

[melvin-bot]

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