Web - App crashes on click of priority mode

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Open the app
2. Open settings->Preferences
3. Click on Priority mode

Expected Result:

App should open priority mode page on click of priority mode

Actual Result:

App crashes on click of priority mode

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.69.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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

crash.on.priority.mode.click.mp4

Recording.4431.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694597540315309

View all open jobs on GitHub

[OSBotify]

👋 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.

[melvin-bot]

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

[dukenv0307]

Proposal

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

App crashes on click of priority mode

What is the root cause of that problem?

We get priorityModePage.priorityModes here.

App/src/pages/settings/Preferences/PriorityModePage.js

Line 29 in 1baf33a

const priorityModes = _.map(props.translate('priorityModePage.priorityModes'), (mode, key) => ({

But it doesn't exist in the language.

App/src/languages/en.ts

Lines 837 to 840 in 1baf33a

	priorityModes: {
	default: {
	label: 'Most recent',
	description: 'Show all chats sorted by most recent',

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

We should define a CONST for the priority mode by the same way we use it in LanguagePage

App/src/pages/settings/Preferences/LanguagePage.js

Lines 21 to 30 in 1baf33a

	const localesToLanguages = _.map(CONST.LANGUAGES, (language) => ({
	value: language,
	text: props.translate(`languagePage.languages.${language}.label`),
	keyForList: language,
	isSelected: props.preferredLocale === language,
	}));
	return (
	<ScreenWrapper includeSafeAreaPaddingBottom={false}>
	<HeaderWithBackButton

What alternative solutions did you explore? (Optional)

[getusha]

Proposal

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

App crashes when navigating to priority mode page

What is the root cause of that problem?

This is a regression from #25846 which flattens translation objects en.js & es.js

App/src/languages/translations.ts

Lines 46 to 47 in 1baf33a

	en: flattenObject(en),
	es: flattenObject(es),

eg:

    languagePage: {
        language: 'Language',
        languages: {
            en: {
                label: 'English',
            },
            es: {
                label: 'Spanish',
            },
        },
    },

before the change we can easily access the above value using props.translate('languagePage.languages') and get the languages` object value. but when it is flat we only have access to single keys for example 'languagePage.languages.en.label', because the above object will become like the following after flattening:

{
    languagePage.language: 'Language',
    llanguagePage.languages.en.label: 'English',
    ....
}

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

Since the translation object is flattened we cannot access any key to get it's child object value, we should access the required value directly.

App/src/pages/settings/Preferences/PriorityModePage.js

Lines 29 to 35 in 1baf33a

	const priorityModes = _.map(props.translate('priorityModePage.priorityModes'), (mode, key) => ({
	value: key,
	text: mode.label,
	alternateText: mode.description,
	keyForList: key,
	isSelected: props.priorityMode === key,
	}));

    const priorityModes = _.map(['default', 'gsd'], (type) => ({
        value: type,
        text: props.translate(`priorityModePage.priorityModes${type}.label`),
        alternateText: props.translate(`priorityModePage.priorityModes.${type}.description`),
        keyForList: type,
        isSelected: props.priorityMode === type,
    }));

We also need to update other parts of the code where direct access to object values is being attempted, for example:"

App/src/pages/settings/Report/NotificationPreferencePage.js

Line 29 in 1baf33a

const notificationPreferenceOptions = _.map(props.translate('notificationPreferencesPage.notificationPreferences'), (preference, key) => ({

What alternative solutions did you explore? (Optional)

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[MrJithil]

Proposal

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

App crashes on Priority Modes selection list click.

What is the root cause of that problem?

After the recent changes related translations, while trying to translate the key priorityModePage.priorityModes which is an object and throwing error

 priorityModePage.priorityModes was not found in the default language

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

Re write the priorityModes map function as below with minimal changes:

// existing code
 const priorityModes = _.map(props.translate('priorityModePage.priorityModes'), (mode, key) => ({
        value: key,
        text: mode.label,
        alternateText: mode.description,
        keyForList: key,
        isSelected: props.priorityMode === key,
    }));

modify it to

// new code
const priorityModes = _.map(CONST.PRIORITY_MODE, (mode, key) => ({
        value: key,
        text: props.translate(`priorityModePage.priorityModes.${mode}.label`),
        alternateText: props.translate(`priorityModePage.priorityModes.${mode}.description`),
        keyForList: key,
        isSelected: props.priorityMode === key.toLowerCase(),
    }));

Additionally, we may need to add the change of .toLowerCase in PreferncesPage where the same key is being used.
title={translate(priorityModePage.priorityModes.${props.priorityMode.toLowerCase()}.label)}

Evidence of fix:

Screen.Recording.2023-09-13.at.11.39.32.pm.mov

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]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[MrJithil]

#27326 (comment)

Along with this there are changes needed in

• Company Picker for INCORPORATION_TYPES
• Theme change in ThemePage

Can be added in the same PR.

[AndrewGable]

Looks like this is going to be fixed by #27358

[parasharrajat]

Ready to be closed @AndrewGable

[MrJithil]

The issue is still occurring.