[HOLD for payment 2024-08-02] [$250] Expense - Title field is not grayed out when edited offline

[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: 9.0.5-7
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #44988

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Submit an expense
4. Click on the expense preview
5. Go offline
6. Click on the report header
7. Click Title field
8. Edit the title and save it

Expected Result:

The title field will be grayed out when edited offline

Actual Result:

The title field is not grayed out when edited offline

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

Bug6536842_1720529327391.20240709_204502.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ef7d62e69d5030af
• Upwork Job ID: 1811445257984330574
• Last Price Increase: 2024-07-18
• Automatic offers:
• dominictb | Contributor | 103220965

Issue Owner

Current Issue Owner: @miljakljajic

[melvin-bot]

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

[etCoderDysto]

Proposal

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

Title field is not grayed out when edited offline

What is the root cause of that problem?

When updating title we add pending action to report.pedingFields.reportName. But
we are passing only report.pendingFields?.[fieldKey] to pendingAction of report title here

App/src/pages/ReportDetailsPage.tsx

Lines 597 to 599 in 9c32293

	const nameSectionTitleField = titleField && (
	<OfflineWithFeedback
	pendingAction={report.pendingFields?.[fieldKey]}

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

we should add report?.pendingFields?.reportName to pendingAction too

 pendingAction={report.pendingFields?.[fieldKey] ?? report?.pendingFields?.reportName}

What alternative solutions did you explore? (Optional)

Result:

Screen.Recording.2024-07-09.at.4.29.07.in.the.afternoon.mp4

[Krishna2323]

Proposal

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

Expense - Title field is not grayed out when edited offline

What is the root cause of that problem?

We are trying to access the report pending action using fieldKey which is incorrect.

App/src/pages/ReportDetailsPage.tsx

Lines 598 to 603 in 87fdc79

	<OfflineWithFeedback
	pendingAction={report.pendingFields?.[fieldKey]}
	errors={report.errorFields?.[fieldKey]}
	errorRowStyles={styles.ph5}
	key={`menuItem-${fieldKey}`}
	onClose={() => Report.clearReportFieldErrors(report.reportID, titleField)}

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

• We should simply get the pending action and error using reportName because this the key used to set the pending action and error in ONYX.
• We also need to create a new util function to clear the errors for reportName key or we can update clearReportFieldErrors to accept a new param for fieldKey and use that instead if present. And when calling Report.clearReportNameErrors(report.reportID, titleField, 'reportName') for title we will pass fieldKey as reportName.
• Alternatively we can accept third param reportName as boolean and use that to determine fieldKey in clearReportFieldErrors.

App/src/libs/actions/Report.ts

Lines 1820 to 1830 in 87fdc79

	function clearReportFieldErrors(reportID: string, reportField: PolicyReportField) {
	const fieldKey = ReportUtils.getReportFieldKey(reportField.fieldID);
	Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
	pendingFields: {
	[fieldKey]: null,
	},
	errorFields: {
	[fieldKey]: null,
	},
	});
	}

<OfflineWithFeedback
    pendingAction={report?.pendingFields?.reportName}
    errors={report.errorFields?.reportName}
    errorRowStyles={styles.ph5}
    key={`menuItem-${fieldKey}`}
    onClose={() => Report.clearReportFieldErrors(report.reportID, titleField, true)}
>
        
        
function clearReportFieldErrors(reportID: string, reportField: PolicyReportField, reportName?: boolean) {
    const fieldKey = reportName ? 'reportName' : ReportUtils.getReportFieldKey(reportField.fieldID);
    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
        pendingFields: {
            [fieldKey]: null,
        },
        errorFields: {
            [fieldKey]: null,
        },
    });
}

What alternative solutions did you explore? (Optional)

[dominictb]

Proposal

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

• The title field is not grayed out when edited offline

What is the root cause of that problem?

• We display the title field as:
  

  App/src/pages/ReportDetailsPage.tsx

  Lines 624 to 627 in c973e62

  	const nameSectionTitleField = titleField && (
  	<OfflineWithFeedback
  	pendingAction={report.pendingFields?.[fieldKey]}
  	errors={report.errorFields?.[fieldKey]}

  
  with the pendingAction={report.pendingFields?.[fieldKey]} in this case fieldKey is text_title. But when the title field is updated, we only set:
  

  App/src/libs/actions/Report.ts

  Lines 1770 to 1772 in 8ee4c92

  	pendingFields: {
  	reportName: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
  	},

  
  so the title field is not grayed out when edited offline.

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

• We should get the pendingAction base on both report.pendingFields?.[fieldKey] and report.pendingFields.reportName because:

1. report.pendingFields?.['text_title']: This data is the pending state of the report.fieldList.['text_title']. It will affect how we display the report title. If the report.fieldList.['text_title'].deletable is true, so we can display the report title as editable and vice versa. That is what we handled in the below logic:
   

   App/src/pages/ReportDetailsPage.tsx

   Line 613 in c973e62

   const shouldShowTitleField = caseID !== CASES.MONEY_REQUEST && !isFieldDisabled && ReportUtils.isAdminOwnerApproverOrReportOwner(report, policy);

   
   Also, in OD, we can change the report.fieldList.['text_title'] data, so I am pretty sure that we will allow users to do it in ND in the future.

2. report.pendingFields.reportName: This data is the pending state of the report.reportName.

• As we can we, both of them affect how the report title is displayed.

• So the change is to update:
  

  App/src/pages/ReportDetailsPage.tsx

  Line 626 in c973e62

  pendingAction={report.pendingFields?.[fieldKey]}

  
  to:

            pendingAction={report.pendingFields?.[fieldKey] || report.pendingFields?.reportName}

• We can apply the same change to the errors field:
  

  App/src/pages/ReportDetailsPage.tsx

  Line 627 in c973e62

  errors={report.errorFields?.[fieldKey]}

• Then we should update:
  

  App/src/pages/ReportDetailsPage.tsx

  Line 630 in c973e62

  onClose={() => Report.clearReportFieldErrors(report.reportID, titleField)}

  
  to:

            onClose={() => {
                if(report.errorFields.reportName){
                    clearReportErrors(report.reportID, 'reportName')
                }
                Report.clearReportFieldErrors(report.reportID, titleField)
            }}

with:

 const clearReportErrors = (reportID: string, fieldKey: string)=>{
    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
        pendingFields: {
            [fieldKey]: null,
        },
        errorFields: {
            [fieldKey]: null,
        },
    });
 }

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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