[$250] Page not found on reload when editing report field with emoji

[m-natarajan]

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: 9.0.30-15
Reproducible in staging?: Yes
Reproducible in production?: Yes
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
Expensify/Expensify Issue URL:
Issue reported by: @dukenv0307
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1725814149415589

Action Performed:

1. Create a new workspace
2. Navigate to Workspace Settings > Enable Report Field.
3. In Report Field, add a field, name it with emoji
4. Go to Workspace Chat > Submit an expense
5. In Expense report, click on the custom report fields
6. Reload page

Expected Result:

Page is displayed normally

Actual Result:

Page not found is displayed

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

bug.mov

Recording.527.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021833943446133965563
• Upwork Job ID: 1833943446133965563
• Last Price Increase: 2024-09-18
• Automatic offers:
• dukenv0307 | Contributor | 103919553

Issue Owner

Current Issue Owner: @s77rt

[melvin-bot]

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

[daledah]

Proposal

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

Page not found on reload when editing report field with emoji

What is the root cause of that problem?

When we reload the page, the fieldKey will be retrieved through the route params here.

App/src/pages/EditReportFieldPage.tsx

Line 53 in 9affb13

const fieldKey = ReportUtils.getReportFieldKey(route.params.fieldID);

Because fieldID is not encoded and decoded here => reportField = undefined => Page Not Found is display

App/src/ROUTES.ts

Line 276 in 9affb13

getRoute: (reportID: string, policyID: string, fieldID: string) => `r/${reportID}/edit/policyField/${policyID}/${fieldID}` as const,

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

We should use 2 functions encodeURIComponent and decodeURIComponent for fieldID params like we did with many other routes

1. Update getRoute function with route EDIT_REPORT_FIELD_REQUEST here

getRoute: (reportID: string, policyID: string, fieldID: string) => `r/${reportID}/edit/policyField/${policyID}/${encodeURIComponent(fieldID)}` as const,

2. Use decodeURIComponent in here to decode fieldID params

[SCREENS.EDIT_REQUEST.REPORT_FIELD]: {
    path: ROUTES.EDIT_REPORT_FIELD_REQUEST.route,
    parse: {
        fieldID: (fieldID: string) => decodeURIComponent(fieldID),
    },
},

What alternative solutions did you explore? (Optional)

In a simpler way, we can use decodeURIComponent function to decode fieldID in component here

const fieldKey = ReportUtils.getReportFieldKey(decodeURIComponent(route.params.fieldID));

[Nodebrute]

Proposal

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

Page not found on reload when editing report field with emoji

What is the root cause of that problem?

We are not using parse decodeURIComponent here

App/src/libs/Navigation/linkingConfig/config.ts

Line 1035 in aaa60b9

[SCREENS.RIGHT_MODAL.EDIT_REQUEST]: {

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

We should use add decodeURIComponent here
Pseudocode

    [SCREENS.RIGHT_MODAL.EDIT_REQUEST]: {
                    screens: {
                        [SCREENS.EDIT_REQUEST.REPORT_FIELD]:{
                            path:ROUTES.EDIT_REPORT_FIELD_REQUEST.route,
                            parse: {
                                fieldID: (fieldID: string) => decodeURIComponent(fieldID),
                            },
                        } 
                    },
                },

We can also add encodeURIComponent here

What alternative solutions did you explore? (Optional)

[dukenv0307]

@CortneyOfstad I report this bug so I can help take it as C+

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-09-09 05:36:40 UTC.

Proposal

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

Not found is shown when reloading edit report field page.

What is the root cause of that problem?

When we open a report field with an emoji as the ID, rn navigation automatically encodes the emoji, for example, 😄 to %F0%9F%98%84. When EditReportFieldPage component receives the ID param, the value is already decoded to the emoji 😄.

After we refresh the page, the path (%F0%9F%98%84) is encoded again (specifically the %) and becomes %25F0%259F%2598%2584. So, when EditReportFieldPage receives the ID param, the value is %F0%9F%98%84.

And the fieldID here becomes expensify_field_id_%F0%9F%98%84 which doesn't exist.

App/src/pages/EditReportFieldPage.tsx

Lines 53 to 54 in d3c995a

	const fieldKey = ReportUtils.getReportFieldKey(route.params.fieldID);
	const reportField = report?.fieldList?.[fieldKey] ?? policy?.fieldList?.[fieldKey];

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

We just need to decode the params in the linking config for the edit report field page,

App/src/libs/Navigation/linkingConfig/config.ts

Lines 1035 to 1039 in d3c995a

	[SCREENS.RIGHT_MODAL.EDIT_REQUEST]: {
	screens: {
	[SCREENS.EDIT_REQUEST.REPORT_FIELD]: ROUTES.EDIT_REPORT_FIELD_REQUEST.route,
	},
	},

screens: {
    [SCREENS.EDIT_REQUEST.REPORT_FIELD]: {
        path: ROUTES.EDIT_REPORT_FIELD_REQUEST.route,
        parse: {
            fieldID: (fieldID: string) => decodeURIComponent(fieldID),
        }
    }
},

just like we did with other routes

App/src/libs/Navigation/linkingConfig/config.ts

Lines 539 to 544 in d3c995a

	[SCREENS.WORKSPACE.WORKFLOWS_APPROVALS_EDIT]: {
	path: ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.route,
	parse: {
	firstApproverEmail: (firstApproverEmail: string) => decodeURIComponent(firstApproverEmail),
	},
	},

so internally, the navigator will hold the decoded params and when we refresh the page, 😄 will be encoded to %F0%9F%98%84 instead of %F0%9F%98%84 to %25F0%259F%2598%2584.

[melvin-bot]

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

[melvin-bot]

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