From 7d8942d81f83c00ecd5a723f69fba3381e2433e6 Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 2 Oct 2024 12:03:49 +0700
Subject: [PATCH 1/2] fix: report field cannot be deleted

---
 src/pages/EditReportFieldPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/EditReportFieldPage.tsx b/src/pages/EditReportFieldPage.tsx
index 3157a65ff76f..ab9e9b24a752 100644
--- a/src/pages/EditReportFieldPage.tsx
+++ b/src/pages/EditReportFieldPage.tsx
@@ -17,6 +17,7 @@ import isSearchTopmostCentralPane from '@libs/Navigation/isSearchTopmostCentralP
 import Navigation from '@libs/Navigation/Navigation';
 import type {EditRequestNavigatorParamList} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
+import CONST from '@src/CONST';
 import * as ReportActions from '@src/libs/actions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -90,7 +91,7 @@ function EditReportFieldPage({route, policy, report}: EditReportFieldPageProps)
 
     const menuItems: PopoverMenuItem[] = [];
 
-    const isReportFieldDeletable = reportField.deletable && !isReportFieldTitle;
+    const isReportFieldDeletable = reportField.deletable && reportField?.fieldID !== CONST.REPORT_FIELD_TITLE_FIELD_ID;
 
     if (isReportFieldDeletable) {
         menuItems.push({icon: Expensicons.Trashcan, text: translate('common.delete'), onSelected: () => setIsDeleteModalVisible(true), shouldCallAfterModalHide: true});

From 1e7a5c567c7d7fd62f4fd9b1b9efaa5d6b46be5c Mon Sep 17 00:00:00 2001
From: daledah <daleda261@outlook.com>
Date: Wed, 2 Oct 2024 12:26:16 +0700
Subject: [PATCH 2/2] fix: migrate withOnyx

---
 src/pages/EditReportFieldPage.tsx | 29 +++++++----------------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/pages/EditReportFieldPage.tsx b/src/pages/EditReportFieldPage.tsx
index ab9e9b24a752..d7d359d289f4 100644
--- a/src/pages/EditReportFieldPage.tsx
+++ b/src/pages/EditReportFieldPage.tsx
@@ -1,8 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import {Str} from 'expensify-common';
 import React, {useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ConfirmModal from '@components/ConfirmModal';
 import type {FormOnyxValues} from '@components/Form/types';
@@ -22,26 +21,19 @@ import * as ReportActions from '@src/libs/actions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {Policy, Report} from '@src/types/onyx';
 import EditReportFieldDate from './EditReportFieldDate';
 import EditReportFieldDropdown from './EditReportFieldDropdown';
 import EditReportFieldText from './EditReportFieldText';
 
-type EditReportFieldPageOnyxProps = {
-    /** The report object for the expense report */
-    report: OnyxEntry<Report>;
+type EditReportFieldPageProps = StackScreenProps<EditRequestNavigatorParamList, typeof SCREENS.EDIT_REQUEST.REPORT_FIELD>;
 
-    /** Policy to which the report belongs to */
-    policy: OnyxEntry<Policy>;
-};
-
-type EditReportFieldPageProps = EditReportFieldPageOnyxProps & StackScreenProps<EditRequestNavigatorParamList, typeof SCREENS.EDIT_REQUEST.REPORT_FIELD>;
-
-function EditReportFieldPage({route, policy, report}: EditReportFieldPageProps) {
+function EditReportFieldPage({route}: EditReportFieldPageProps) {
     const {windowWidth} = useWindowDimensions();
     const styles = useThemeStyles();
-    const backTo = route.params.backTo;
+    const {backTo, reportID, policyID} = route.params;
     const fieldKey = ReportUtils.getReportFieldKey(route.params.fieldID);
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
     const reportField = report?.fieldList?.[fieldKey] ?? policy?.fieldList?.[fieldKey];
     const policyField = policy?.fieldList?.[fieldKey] ?? reportField;
     const isDisabled = ReportUtils.isReportFieldDisabled(report, reportField, policy);
@@ -160,11 +152,4 @@ function EditReportFieldPage({route, policy, report}: EditReportFieldPageProps)
 
 EditReportFieldPage.displayName = 'EditReportFieldPage';
 
-export default withOnyx<EditReportFieldPageProps, EditReportFieldPageOnyxProps>({
-    report: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-    },
-    policy: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`,
-    },
-})(EditReportFieldPage);
+export default EditReportFieldPage;