[HOLD for payment 2024-02-19] [$250] Remove MoneyRequestDescriptionPage.js and copy any changes since Nov 27 into IOURequestStepDescription.js

[tgolen]

This is a part of #29107. You can look at that issue for more context behind the cleanup process.

Problem

The app has two redundant components:

Old Component: MoneyRequestDescriptionPage
New Component IOURequestStepDescription

Solution

Following the examples (example 1, example 2), the Old Component needs to be completely removed from the codebase

1. Look at the history of the Old Component
2. If there are any changes since Nov 27, 2023 which have not been added to the New Component, copy those changes
3. Replace all uses of the Old Component with the New Component
4. Remove all traces of Old Component
5. Be sure to update all routes and navigation to use the new :action param (instead of being hard-coded with "create")
6. Update any logic like isEditing to use the new action param from the route

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019b522902265a76e3
• Upwork Job ID: 1747632811433705472
• Last Price Increase: 2024-01-24
• Automatic offers:
• s77rt | Reviewer | 28120097
• DylanDylann | Contributor | 28120098

[melvin-bot]

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

[KrAbhas]

Proposal

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

Remove MoneyRequestDescriptionPage.js and copy any changes since Nov 27 into IOURequestStepDescription.js

What is the root cause of that problem?

Cleanup
 of navigation among screens for MoneyRequestDescriptionPage

What changes do you think we should make in order

We will be deleting the component here:

App/src/pages/iou/MoneyRequestDescriptionPage.js

Line 57 in a7a3e7f

function MoneyRequestDescriptionPage({iou, route, selectedTab}) {

We will remove the screen from ModalStackNavigators.tsx

[njmulsqb]

I would love to take this!

[DylanDylann]

Proposal

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

Remove MoneyRequestDescriptionPage.js and copy any changes since Nov 27 into IOURequestStepDescription.js

What is the root cause of that problem?

Remove deprecated component

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

1. Remove MoneyRequestDescriptionPage component and all traces like

App/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

Line 99 in 278d04e

[SCREENS.MONEY_REQUEST.DESCRIPTION]: () => require('../../../pages/iou/MoneyRequestDescriptionPage').default as React.ComponentType,

App/src/libs/Navigation/linkingConfig.ts

Line 432 in 278d04e

[SCREENS.MONEY_REQUEST.DESCRIPTION]: ROUTES.MONEY_REQUEST_DESCRIPTION.route,

App/src/ROUTES.ts

Lines 273 to 276 in a2f5bd5

	MONEY_REQUEST_DESCRIPTION: {
	route: ':iouType/new/description/:reportID?',
	getRoute: (iouType: string, reportID = '') => `${iouType}/new/description/${reportID}` as const,
	},

App/src/SCREENS.ts

Line 144 in a2f5bd5

DESCRIPTION: 'Money_Request_Description',

App/src/libs/Navigation/types.ts

Lines 204 to 209 in a2f5bd5

	[SCREENS.MONEY_REQUEST.DESCRIPTION]: {
	iouType: string;
	reportID: string;
	field: string;
	threadReportID: string;
	};

2. For new component IOURequestStepDescription
   In here
   

   App/src/ROUTES.ts

   Lines 342 to 346 in a2f5bd5

   	MONEY_REQUEST_STEP_DESCRIPTION: {
   	route: 'create/:iouType/description/:transactionID/:reportID',
   	getRoute: (iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') =>
   	getUrlWithBackToParam(`create/${iouType}/description/${transactionID}/${reportID}`, backTo),
   	},

   
   We need to use the new :action param (instead of being hard-coded with "create") like

MONEY_REQUEST_STEP_DESCRIPTION: { 
     route: ':action/:iouType/description/:transactionID/:reportID', 
     getRoute: (action: ValueOf<typeof CONST.IOU.ACTION>, iouType: ValueOf<typeof CONST.IOU.TYPE>, transactionID: string, reportID: string, backTo = '') => 
         getUrlWithBackToParam(`${action}/${iouType}/description/${transactionID}/${reportID}`, backTo), 
 }, 

And then we will create new variable
const isDraft = action === CONST.IOU.ACTION.CREATE (we will get action from route) and pass it to setMoneyRequestDescription_temporaryForRefactor as a new param. In setMoneyRequestDescription_temporaryForRefactor we will save the new description to draft_transaction if isDraft is true else we will save it to the transaction

3. We also need to remove EditRequestDescriptionPage and we need to update the route to navigate to IOURequestStepDescription (with action = edit) instead of EditRequestDescriptionPage
   In here
   

   App/src/components/ReportActionItem/MoneyRequestView.js

   Line 289 in d8fb3f4

   onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));

We also need to update

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Line 698 in d8fb3f4

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.CREATE, iouType, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()));

In editing split flow, we also need to update to navigate to IOURequestStepDescription

App/src/components/MoneyRequestConfirmationList.js

Line 667 in cc71f70

Navigation.navigate(ROUTES.EDIT_SPLIT_BILL.getRoute(props.reportID, props.reportActionID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION));

Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(CONST.IOU.ACTION.EDIT, props.iouType, transaction.transactionID, props.reportID, Navigation.getActiveRouteWithoutParams()));

4. Copy changes since 27 Nov to new components based on list commit here: https://github.com/Expensify/App/commits/main/src/pages/iou/MoneyRequestDescriptionPage.js

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[ghost]

I want to work on it

[melvin-bot]

Upwork job price has been updated to $250

[alexpensify]

Borrowing the comments from @tgolen from other GHs related to this project:

Thank you, everyone, for the energy here, but please follow the contributor guidelines. If you are interested in this one, then please submit a proposal for the changes that are important here. After, it will go through a review process.

[s77rt]

Discussing on slack https://expensify.slack.com/archives/C02NK2DQWUX/p1705538986244869

[alexpensify]

@DylanDylann - Tim shared some feedback in this 🧵 here:

https://expensify.slack.com/archives/C02NK2DQWUX/p1705538986244869

Please review and update your proposal if you are still interested in this one. Thanks!

[s77rt]

Quoting from the above discussion (since it's internal) the points that should be taken into consideration

1. Where else do the routes need updated (when it's navigating to the edit view)
2. What (if any) logic needs updated for isEditing
3. setMoneyRequestDescription_temporaryForRefactor needs to be updated to have an isDraft param that's based on the new "action" route param
4. The Old Component not only needs to be removed, but it needs "replaced" with the New Component. This replacement isn't covered

[DylanDylann]

@s77rt

wmn.mp4

1. Currently, MoneyRequestDescriptionPage (old component) is no longer used anywhere
2. We have another component EditRequestDescriptionPage to handle editing description

So, I think my proposal covers all the things that need to be changed. Please correct me If I miss something

[s77rt]

@DylanDylann We are looking to have all the IOU description logic being update from one place. EditRequestDescriptionPage should also get replaced with IOURequestStepDescription.

Currently setMoneyRequestDescription_temporaryForRefactor will only update the transaction draft values but that should be the case only when creating a new request. If we are editing the request we should update transaction itself for that we need to add a new param isDraft.

Can you please look into that further and update your proposal?

PS: We should also copy recent changes (if any) from EditRequestDescriptionPage to IOURequestStepDescription

[DylanDylann]

We are looking to have all the IOU description logic being update from one place. EditRequestDescriptionPage should also get replaced with IOURequestStepDescription.

@s77rt It is a new point to me because I haven't seen it in the OP. So, we will use 1 component IOURequestStep... instead of EditRequest...Page and MoneyRequest...Page in all these IOU pages like Description, Distance, Merchant, Tag, Category, Date, ... And using action params from URL to detect if it is create or edit page

So I think we should update the OP in these issue for more clear

cc @tgolen

[DylanDylann]

@s77rt Updated proposal

[s77rt]

@KrAbhas Unfortunately your proposal is not complete.

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

[alexpensify]

@DylanDylann and @s77rt - can we confirm if this issue caused this regression or if it's a false alarm? Thanks!

[s77rt]

@alexpensify Yes I have commented on that issue #36175 (comment)

[alexpensify]

My bad, I missed that comment. Thanks for flagging!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.39-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix/34609: Remove old description page #35137

If no regressions arise, payment will be issued on 2024-02-19. 🎊

For reference, here are some details about the assignees on this issue:

• @s77rt requires payment automatic offer (Reviewer) $125
• @DylanDylann requires payment automatic offer (Contributor) $250

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@s77rt / @DylanDylann] The PR that introduced the bug has been identified. Link to the PR:
• [@s77rt / @DylanDylann] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@s77rt / @DylanDylann] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@s77rt / @DylanDylann] Determine if we should create a regression test for this bug.
• [@s77rt / @DylanDylann] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[s77rt]

Checklist ^ does not apply here. This is a feature request (code refactor) and not a bug.

[alexpensify]

Flagging that I will be OOO on Monday, but will complete the payment process on Tuesday, February 20.

[alexpensify]

Payment summary is here: #34609 (comment)

Everyone has been paid via Upwork.

[s77rt]

@alexpensify Payment here should be $125 for the regression. I have refunded $125

[alexpensify]

Thanks for your honesty! I missed the regression notice and saw it after I hit send in Upwork. All actions are complete here, closing!

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

[alexpensify]

@s77rt - I believe that the regression was already addressed in another GH. Was today's notice an error? Thanks!

[s77rt]

Yes the above notice is a false positive

[alexpensify]

Thanks!

[DylanDylann]

Let's ignore it. It is only a reference