From c073d8c8794ae5b9ac0c432cc63130e96a5a3c1b Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Wed, 10 Jan 2024 19:40:15 +0400
Subject: [PATCH 01/13] Init changes to migrate

---
 src/components/MenuItem.tsx                   |   2 +-
 .../{TaskView.js => TaskView.tsx}             | 116 +++++++++---------
 2 files changed, 57 insertions(+), 61 deletions(-)
 rename src/components/ReportActionItem/{TaskView.js => TaskView.tsx} (73%)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 334fa9895205..5f82e1da94ed 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -204,7 +204,7 @@ type MenuItemProps = (IconProps | AvatarProps | NoIcon) & {
     shouldBlockSelection?: boolean;
 
     /** Whether should render title as HTML or as Text */
-    shouldParseTitle?: false;
+    shouldParseTitle?: boolean;
 
     /** Should check anonymous user in onPress function */
     shouldCheckActionAllowedOnPress?: boolean;
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.tsx
similarity index 73%
rename from src/components/ReportActionItem/TaskView.js
rename to src/components/ReportActionItem/TaskView.tsx
index 7f7b177136ed..7c231a6e3f34 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -1,8 +1,8 @@
 import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
 import _ from 'underscore';
 import Checkbox from '@components/Checkbox';
 import Hoverable from '@components/Hoverable';
@@ -15,9 +15,11 @@ import {usePersonalDetails} from '@components/OnyxProvider';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import withWindowDimensions from '@components/withWindowDimensions';
+import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
+import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
@@ -26,57 +28,55 @@ import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import reportPropTypes from '@pages/reportPropTypes';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx';
 
-const propTypes = {
-    /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
+type TaskViewOnyxProps = {
+    /** All of the personal details for everyone */
+    personalDetails: OnyxEntry<PersonalDetailsList>;
 
-    /** The policy of root parent report */
-    policy: PropTypes.shape({
-        /** The role of current user */
-        role: PropTypes.string,
-    }),
-
-    /** Whether we should display the horizontal rule below the component */
-    shouldShowHorizontalRule: PropTypes.bool.isRequired,
-
-    ...withLocalizePropTypes,
-
-    ...withCurrentUserPersonalDetailsPropTypes,
+    /** The policy for the current route */
+    policy: Partial<OnyxEntry<Policy>>;
 };
 
-const defaultProps = {
-    policy: {},
-};
+type TaskViewProps = TaskViewOnyxProps &
+    WindowDimensionsProps &
+    WithCurrentUserPersonalDetailsProps & {
+        /** The report currently being looked at */
+        report: Report;
 
-function TaskView(props) {
+        /** Whether we should display the horizontal rule below the component */
+        shouldShowHorizontalRule: boolean;
+    };
+
+function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: TaskViewProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     useEffect(() => {
-        Task.setTaskReport({...props.report});
-    }, [props.report]);
+        Task.setTaskReport({report});
+    }, [report]);
 
-    const taskTitle = convertToLTR(props.report.reportName || '');
-    const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.managerID], props.personalDetails), false);
-    const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
-    const isOpen = ReportUtils.isOpenTaskReport(props.report);
-    const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID, lodashGet(props.policy, 'role', ''));
+    const taskTitle = convertToLTR(report.reportName ?? '');
+    // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript.
+    const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([report.managerID], props.personalDetails), false);
+    const isCompleted = ReportUtils.isCompletedTaskReport(report);
+    const isOpen = ReportUtils.isOpenTaskReport(report);
+    const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, lodashGet(policy, 'role', ''));
     const disableState = !canModifyTask;
     const isDisableInteractive = !canModifyTask || !isOpen;
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
+    const {translate} = useLocalize();
 
     return (
         <View>
             <OfflineWithFeedback
                 shouldShowErrorMessages
-                errors={lodashGet(props, 'report.errorFields.editTask') || lodashGet(props, 'report.errorFields.createTask')}
-                onClose={() => Task.clearTaskErrors(props.report.reportID)}
+                errors={lodashGet(report, 'errorFields.editTask') ?? lodashGet(report, 'errorFields.createTask')}
+                onClose={() => Task.clearTaskErrors(report.reportID)}
                 errorRowStyles={styles.ph5}
             >
                 <Hoverable>
@@ -87,10 +87,10 @@ function TaskView(props) {
                                     return;
                                 }
                                 if (e && e.type === 'click') {
-                                    e.currentTarget.blur();
+                                    (e.currentTarget as HTMLElement).blur();
                                 }
 
-                                Navigation.navigate(ROUTES.TASK_TITLE.getRoute(props.report.reportID));
+                                Navigation.navigate(ROUTES.TASK_TITLE.getRoute(report.reportID));
                             })}
                             style={({pressed}) => [
                                 styles.ph5,
@@ -98,20 +98,19 @@ function TaskView(props) {
                                 StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true),
                                 isDisableInteractive && !disableState && styles.cursorDefault,
                             ]}
-                            ref={props.forwardedRef}
                             disabled={disableState}
-                            accessibilityLabel={taskTitle || props.translate('task.task')}
+                            accessibilityLabel={taskTitle || translate('task.task')}
                         >
                             {({pressed}) => (
                                 <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.reportName')}>
-                                    <Text style={styles.taskTitleDescription}>{props.translate('task.title')}</Text>
-                                    <View style={[styles.flexRow, styles.alignItemsTop, styles.flex1]}>
+                                    <Text style={styles.taskTitleDescription}>{translate('task.title')}</Text>
+                                    <View style={[styles.flexRow, styles.flex1]}>
                                         <Checkbox
                                             onPress={Session.checkIfActionIsAllowed(() => {
                                                 if (isCompleted) {
-                                                    Task.reopenTask(props.report);
+                                                    Task.reopenTask(report);
                                                 } else {
-                                                    Task.completeTask(props.report);
+                                                    Task.completeTask(report);
                                                 }
                                             })}
                                             isChecked={isCompleted}
@@ -119,7 +118,7 @@ function TaskView(props) {
                                             containerSize={24}
                                             containerBorderRadius={8}
                                             caretSize={16}
-                                            accessibilityLabel={taskTitle || props.translate('task.task')}
+                                            accessibilityLabel={taskTitle || translate('task.task')}
                                             disabled={!canModifyTask}
                                         />
                                         <View style={[styles.flexRow, styles.flex1]}>
@@ -148,9 +147,9 @@ function TaskView(props) {
                 <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.description')}>
                     <MenuItemWithTopDescription
                         shouldParseTitle
-                        description={props.translate('task.description')}
-                        title={props.report.description || ''}
-                        onPress={() => Navigation.navigate(ROUTES.TASK_DESCRIPTION.getRoute(props.report.reportID))}
+                        description={translate('task.description')}
+                        title={report.description ?? ''}
+                        onPress={() => Navigation.navigate(ROUTES.TASK_DESCRIPTION.getRoute(report.reportID))}
                         shouldShowRightIcon={isOpen}
                         disabled={disableState}
                         wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
@@ -159,16 +158,16 @@ function TaskView(props) {
                         interactive={!isDisableInteractive}
                     />
                 </OfflineWithFeedback>
-                {props.report.managerID ? (
+                {report.managerID ? (
                     <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.managerID')}>
                         <MenuItem
-                            label={props.translate('task.assignee')}
-                            title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
-                            icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], personalDetails)}
+                            label={translate('task.assignee')}
+                            title={ReportUtils.getDisplayNameForParticipant(report.managerID)}
+                            icon={OptionsListUtils.getAvatarsForAccountIDs([report.managerID], personalDetails)}
                             iconType={CONST.ICON_TYPE_AVATAR}
                             avatarSize={CONST.AVATAR_SIZE.SMALLER}
                             titleStyle={styles.assigneeTextStyle}
-                            onPress={() => Navigation.navigate(ROUTES.TASK_ASSIGNEE.getRoute(props.report.reportID))}
+                            onPress={() => Navigation.navigate(ROUTES.TASK_ASSIGNEE.getRoute(report.reportID))}
                             shouldShowRightIcon={isOpen}
                             disabled={disableState}
                             wrapperStyle={[styles.pv2]}
@@ -180,8 +179,8 @@ function TaskView(props) {
                     </OfflineWithFeedback>
                 ) : (
                     <MenuItemWithTopDescription
-                        description={props.translate('task.assignee')}
-                        onPress={() => Navigation.navigate(ROUTES.TASK_ASSIGNEE.getRoute(props.report.reportID))}
+                        description={translate('task.assignee')}
+                        onPress={() => Navigation.navigate(ROUTES.TASK_ASSIGNEE.getRoute(report.reportID))}
                         shouldShowRightIcon={isOpen}
                         disabled={disableState}
                         wrapperStyle={[styles.pv2]}
@@ -191,22 +190,17 @@ function TaskView(props) {
                 )}
             </OfflineWithFeedback>
             <SpacerView
-                shouldShow={props.shouldShowHorizontalRule}
-                style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+                shouldShow={shouldShowHorizontalRule}
+                style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
             />
         </View>
     );
 }
 
-TaskView.propTypes = propTypes;
-TaskView.defaultProps = defaultProps;
 TaskView.displayName = 'TaskView';
 
 export default compose(
-    withWindowDimensions,
-    withLocalize,
-    withCurrentUserPersonalDetails,
-    withOnyx({
+    withOnyx<TaskViewProps, TaskViewOnyxProps>({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
@@ -215,7 +209,9 @@ export default compose(
                 const rootParentReport = ReportUtils.getRootParentReport(report);
                 return `${ONYXKEYS.COLLECTION.POLICY}${rootParentReport ? rootParentReport.policyID : '0'}`;
             },
-            selector: (policy) => _.pick(policy, ['role']),
+            selector: (policy: OnyxEntry<Policy>) => _.pick(policy, ['role']),
         },
     }),
+    withWindowDimensions,
+    withCurrentUserPersonalDetails,
 )(TaskView);

From 69b5b475aff2bfd44eb148e853ff0eecb5970ea7 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Wed, 10 Jan 2024 23:04:20 +0400
Subject: [PATCH 02/13] Fix Eslint errors

---
 src/components/ReportActionItem/TaskView.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index 7c231a6e3f34..4793bbb1da1d 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -1,9 +1,8 @@
-import lodashGet from 'lodash/get';
+import _ from 'lodash';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
-import _ from 'underscore';
 import Checkbox from '@components/Checkbox';
 import Hoverable from '@components/Hoverable';
 import Icon from '@components/Icon';
@@ -65,7 +64,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas
     const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([report.managerID], props.personalDetails), false);
     const isCompleted = ReportUtils.isCompletedTaskReport(report);
     const isOpen = ReportUtils.isOpenTaskReport(report);
-    const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, lodashGet(policy, 'role', ''));
+    const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role ?? '');
     const disableState = !canModifyTask;
     const isDisableInteractive = !canModifyTask || !isOpen;
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
@@ -75,7 +74,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas
         <View>
             <OfflineWithFeedback
                 shouldShowErrorMessages
-                errors={lodashGet(report, 'errorFields.editTask') ?? lodashGet(report, 'errorFields.createTask')}
+                errors={report.errorFields?.editTask ?? report.errorFields?.createTask}
                 onClose={() => Task.clearTaskErrors(report.reportID)}
                 errorRowStyles={styles.ph5}
             >
@@ -102,7 +101,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas
                             accessibilityLabel={taskTitle || translate('task.task')}
                         >
                             {({pressed}) => (
-                                <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.reportName')}>
+                                <OfflineWithFeedback pendingAction={report.pendingFields?.reportName}>
                                     <Text style={styles.taskTitleDescription}>{translate('task.title')}</Text>
                                     <View style={[styles.flexRow, styles.flex1]}>
                                         <Checkbox
@@ -144,7 +143,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas
                         </PressableWithSecondaryInteraction>
                     )}
                 </Hoverable>
-                <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.description')}>
+                <OfflineWithFeedback pendingAction={report.pendingFields?.description}>
                     <MenuItemWithTopDescription
                         shouldParseTitle
                         description={translate('task.description')}
@@ -159,7 +158,7 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas
                     />
                 </OfflineWithFeedback>
                 {report.managerID ? (
-                    <OfflineWithFeedback pendingAction={lodashGet(props, 'report.pendingFields.managerID')}>
+                    <OfflineWithFeedback pendingAction={report.pendingFields?.managerID}>
                         <MenuItem
                             label={translate('task.assignee')}
                             title={ReportUtils.getDisplayNameForParticipant(report.managerID)}

From 3843d036c66dadb08fc3337a8ac53463268d1e3b Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 12 Jan 2024 20:20:05 +0400
Subject: [PATCH 03/13] Fix reviewer comments

---
 src/components/ReportActionItem/TaskView.tsx | 35 ++++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index 4793bbb1da1d..a6cd08482e63 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -21,6 +21,7 @@ import type {WindowDimensionsProps} from '@components/withWindowDimensions/types
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
 import getButtonState from '@libs/getButtonState';
@@ -39,7 +40,7 @@ type TaskViewOnyxProps = {
     personalDetails: OnyxEntry<PersonalDetailsList>;
 
     /** The policy for the current route */
-    policy: Partial<OnyxEntry<Policy>>;
+    policy: Pick<Policy, 'role'> | null;
 };
 
 type TaskViewProps = TaskViewOnyxProps &
@@ -52,11 +53,11 @@ type TaskViewProps = TaskViewOnyxProps &
         shouldShowHorizontalRule: boolean;
     };
 
-function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: TaskViewProps) {
+function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskViewProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     useEffect(() => {
-        Task.setTaskReport({report});
+        Task.setTaskReport(report);
     }, [report]);
 
     const taskTitle = convertToLTR(report.reportName ?? '');
@@ -198,19 +199,17 @@ function TaskView({report, policy = {}, shouldShowHorizontalRule, ...props}: Tas
 
 TaskView.displayName = 'TaskView';
 
-export default compose(
-    withOnyx<TaskViewProps, TaskViewOnyxProps>({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+const TaskViewWithOnyx = withOnyx<TaskViewProps, TaskViewOnyxProps>({
+    personalDetails: {
+        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    },
+    policy: {
+        key: ({report}) => {
+            const rootParentReport = ReportUtils.getRootParentReport(report);
+            return `${ONYXKEYS.COLLECTION.POLICY}${rootParentReport ? rootParentReport.policyID : '0'}`;
         },
-        policy: {
-            key: ({report}) => {
-                const rootParentReport = ReportUtils.getRootParentReport(report);
-                return `${ONYXKEYS.COLLECTION.POLICY}${rootParentReport ? rootParentReport.policyID : '0'}`;
-            },
-            selector: (policy: OnyxEntry<Policy>) => _.pick(policy, ['role']),
-        },
-    }),
-    withWindowDimensions,
-    withCurrentUserPersonalDetails,
-)(TaskView);
+        selector: (policy: OnyxEntry<Policy>) => (policy ? {role: policy.role} : null),
+    },
+})(TaskView);
+
+export default withCurrentUserPersonalDetails(TaskViewWithOnyx);

From 40cddcfefa4296e42dc6d969d2c87c26c3a6ee33 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 12 Jan 2024 20:25:33 +0400
Subject: [PATCH 04/13] Fix eslint error

---
 src/components/ReportActionItem/TaskView.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index a6cd08482e63..e95828de7ce7 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';

From 2233876267837ca1f72300cb507e2cfe2a16fc7f Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 12 Jan 2024 20:32:09 +0400
Subject: [PATCH 05/13] Fix eslint error

---
 src/components/ReportActionItem/TaskView.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index e95828de7ce7..9e63f78a44d3 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -15,13 +15,10 @@ import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
-import withWindowDimensions from '@components/withWindowDimensions';
 import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
-import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';

From dec27442056b707d51f2990abbaa62fa1dd82d5a Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Thu, 25 Jan 2024 21:44:46 +0400
Subject: [PATCH 06/13] Fix typescript error

---
 src/components/ReportActionItem/TaskView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index dee37b83b586..0468cc727247 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -61,7 +61,7 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView
     const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([report.managerID], props.personalDetails), false);
     const isCompleted = ReportUtils.isCompletedTaskReport(report);
     const isOpen = ReportUtils.isOpenTaskReport(report);
-    const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role ?? '');
+    const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role);
     const disableState = !canModifyTask;
     const isDisableInteractive = !canModifyTask || !isOpen;
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;

From dada2261989790df462f926c42b394447b3d3838 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 26 Jan 2024 01:06:27 +0400
Subject: [PATCH 07/13] Fix reviewer comment

---
 src/components/ReportActionItem/TaskView.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index 0468cc727247..bbea6315b30b 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -40,7 +40,6 @@ type TaskViewOnyxProps = {
 };
 
 type TaskViewProps = TaskViewOnyxProps &
-    WindowDimensionsProps &
     WithCurrentUserPersonalDetailsProps & {
         /** The report currently being looked at */
         report: Report;

From 4de88d8a7a07810233b728e3ff955da1785df688 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 26 Jan 2024 10:05:12 +0400
Subject: [PATCH 08/13] fix lint error

---
 src/components/ReportActionItem/TaskView.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index bbea6315b30b..175560284996 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -15,7 +15,6 @@ import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
-import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';

From 59bb6455eaabf93f446968c2ada238d552d0a425 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 26 Jan 2024 10:18:04 +0400
Subject: [PATCH 09/13] fix typescript error

---
 src/components/ReportActionItem/TaskView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index 175560284996..b67c7af4762c 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -157,6 +157,7 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView
                         <MenuItem
                             label={translate('task.assignee')}
                             title={ReportUtils.getDisplayNameForParticipant(report.managerID)}
+                            // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript.
                             icon={OptionsListUtils.getAvatarsForAccountIDs([report.managerID], personalDetails)}
                             iconType={CONST.ICON_TYPE_AVATAR}
                             avatarSize={CONST.AVATAR_SIZE.SMALLER}

From 60ef074e782e2622774d1144e155e0e140fb4b93 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 26 Jan 2024 23:04:26 +0400
Subject: [PATCH 10/13] Remove @ts-expect-error

---
 src/components/ReportActionItem/TaskView.tsx | 6 ++----
 src/types/utils/IconAsset.ts                 | 3 ++-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index b67c7af4762c..00b591b2ec97 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -55,8 +55,7 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView
     }, [report]);
 
     const taskTitle = convertToLTR(report.reportName ?? '');
-    // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript.
-    const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs([report.managerID], props.personalDetails), false);
+    const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(report.managerID ? [report.managerID] : [], props.personalDetails), false);
     const isCompleted = ReportUtils.isCompletedTaskReport(report);
     const isOpen = ReportUtils.isOpenTaskReport(report);
     const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role);
@@ -157,8 +156,7 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView
                         <MenuItem
                             label={translate('task.assignee')}
                             title={ReportUtils.getDisplayNameForParticipant(report.managerID)}
-                            // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript.
-                            icon={OptionsListUtils.getAvatarsForAccountIDs([report.managerID], personalDetails)}
+                            icon={OptionsListUtils.getAvatarsForAccountIDs(report.managerID ? [report.managerID] : [], personalDetails)}
                             iconType={CONST.ICON_TYPE_AVATAR}
                             avatarSize={CONST.AVATAR_SIZE.SMALLER}
                             titleStyle={styles.assigneeTextStyle}
diff --git a/src/types/utils/IconAsset.ts b/src/types/utils/IconAsset.ts
index f5d193aaa993..12a569bf54f6 100644
--- a/src/types/utils/IconAsset.ts
+++ b/src/types/utils/IconAsset.ts
@@ -1,6 +1,7 @@
 import type {ImageSourcePropType} from 'react-native';
 import type {SvgProps} from 'react-native-svg/lib/typescript';
+import type {Icon} from "@src/types/onyx/OnyxCommon";
 
-type IconAsset = React.FC<SvgProps> | ImageSourcePropType;
+type IconAsset = React.FC<SvgProps> | ImageSourcePropType | Icon[];
 
 export default IconAsset;

From 5412ac030e16040f441adc37cf75354763165a3c Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Fri, 26 Jan 2024 23:09:23 +0400
Subject: [PATCH 11/13] Run prettier

---
 src/components/ReportActionItem/TaskView.tsx | 5 ++++-
 src/types/utils/IconAsset.ts                 | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/TaskView.tsx b/src/components/ReportActionItem/TaskView.tsx
index 00b591b2ec97..ea685d07579d 100644
--- a/src/components/ReportActionItem/TaskView.tsx
+++ b/src/components/ReportActionItem/TaskView.tsx
@@ -55,7 +55,10 @@ function TaskView({report, policy, shouldShowHorizontalRule, ...props}: TaskView
     }, [report]);
 
     const taskTitle = convertToLTR(report.reportName ?? '');
-    const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(report.managerID ? [report.managerID] : [], props.personalDetails), false);
+    const assigneeTooltipDetails = ReportUtils.getDisplayNamesWithTooltips(
+        OptionsListUtils.getPersonalDetailsForAccountIDs(report.managerID ? [report.managerID] : [], props.personalDetails),
+        false,
+    );
     const isCompleted = ReportUtils.isCompletedTaskReport(report);
     const isOpen = ReportUtils.isOpenTaskReport(report);
     const canModifyTask = Task.canModifyTask(report, props.currentUserPersonalDetails.accountID, policy?.role);
diff --git a/src/types/utils/IconAsset.ts b/src/types/utils/IconAsset.ts
index 12a569bf54f6..19c439d7e9d0 100644
--- a/src/types/utils/IconAsset.ts
+++ b/src/types/utils/IconAsset.ts
@@ -1,6 +1,6 @@
 import type {ImageSourcePropType} from 'react-native';
 import type {SvgProps} from 'react-native-svg/lib/typescript';
-import type {Icon} from "@src/types/onyx/OnyxCommon";
+import type {Icon} from '@src/types/onyx/OnyxCommon';
 
 type IconAsset = React.FC<SvgProps> | ImageSourcePropType | Icon[];
 

From e7f9952ecc43d34c8da7eab5e9ebd5e5d5274c72 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Tue, 30 Jan 2024 14:48:15 +0400
Subject: [PATCH 12/13] fix reviewer comment

---
 src/components/MenuItem.tsx  | 2 +-
 src/types/utils/IconAsset.ts | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 5f82e1da94ed..d069eea58dc3 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -40,7 +40,7 @@ type IconProps = {
     iconType?: typeof CONST.ICON_TYPE_ICON;
 
     /** Icon to display on the left side of component */
-    icon: IconAsset;
+    icon: IconAsset | IconType[];
 };
 
 type AvatarProps = {
diff --git a/src/types/utils/IconAsset.ts b/src/types/utils/IconAsset.ts
index 19c439d7e9d0..f5d193aaa993 100644
--- a/src/types/utils/IconAsset.ts
+++ b/src/types/utils/IconAsset.ts
@@ -1,7 +1,6 @@
 import type {ImageSourcePropType} from 'react-native';
 import type {SvgProps} from 'react-native-svg/lib/typescript';
-import type {Icon} from '@src/types/onyx/OnyxCommon';
 
-type IconAsset = React.FC<SvgProps> | ImageSourcePropType | Icon[];
+type IconAsset = React.FC<SvgProps> | ImageSourcePropType;
 
 export default IconAsset;

From ff8a853dc3bd03944253e73c238968a42b0b0581 Mon Sep 17 00:00:00 2001
From: Shahe Shahinyan <shahe.shahinyan@gmail.com>
Date: Tue, 30 Jan 2024 14:56:16 +0400
Subject: [PATCH 13/13] Fix ts error

---
 src/components/MenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index d069eea58dc3..e53c7915da8a 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -46,7 +46,7 @@ type IconProps = {
 type AvatarProps = {
     iconType?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
 
-    icon: AvatarSource;
+    icon: AvatarSource | IconType[];
 };
 
 type NoIcon = {