Implement Task Detailed View Redesign

src/components/LHNOptionsList/OptionRowLHN.js

@@ -87,7 +87,7 @@ function OptionRowLHN(props) {
         !hasBrickError &&
         (optionItem.isUnreadWithMention ||
             (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner) ||
-            (optionItem.isTaskReport && optionItem.isTaskAssignee && !optionItem.isTaskCompleted));
+            (optionItem.isTaskReport && optionItem.isTaskAssignee && !optionItem.isCompletedTaskReport));
 
     /**
      * Show the ReportActionContextMenu modal popover.

src/components/MenuItem.js

@@ -14,6 +14,7 @@ import Badge from './Badge';
 import CONST from '../CONST';
 import menuItemPropTypes from './menuItemPropTypes';
 import SelectCircle from './SelectCircle';
+import Checkbox from './Checkbox';
 import colors from '../styles/colors';
 import MultipleAvatars from './MultipleAvatars';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
@@ -33,6 +34,8 @@ const defaultProps = {
     badgeText: undefined,
     shouldShowRightIcon: false,
     shouldShowSelectedState: false,
+    shouldUseSquareSelectedState: false,
+    shouldShowSelectedStateBeforeTitle: false,
     shouldShowBasicTitle: false,
     shouldShowDescriptionOnTop: false,
     shouldShowHeaderTitle: false,
@@ -67,6 +70,7 @@ const defaultProps = {
     hoverAndPressStyle: [],
     furtherDetails: '',
     furtherDetailsIcon: undefined,
+    onPressSelection: () => {},
 };
 
 function MenuItem(props) {
@@ -97,6 +101,19 @@ function MenuItem(props) {
 
     const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
 
+    const selectedState = props.shouldUseSquareSelectedState ? (
+        <Checkbox
+            onPress={() => props.onPressSelection()}
+            isChecked={props.isSelected}
+            style={props.shouldShowSelectedStateBeforeTitle && styles.mr3}
+        />
+    ) : (
+        <SelectCircle
+            isChecked={props.isSelected}
+            style={props.shouldShowSelectedStateBeforeTitle && styles.mr3}
+        />
+    );
+
     return (
         <PressableWithSecondaryInteraction
             onPress={Session.checkIfActionIsAllowed((e) => {
@@ -146,7 +163,7 @@ function MenuItem(props) {
                                 />
                             )}
                             {Boolean(props.icon) && !_.isArray(props.icon) && (
-                                <View style={[styles.popoverMenuIcon, ...props.iconStyles]}>
+                                <View style={[styles.popoverMenuIcon, ...props.iconStyles, StyleUtils.getAvatarWidthStyle(props.avatarSize || CONST.AVATAR_SIZE.DEFAULT)]}>
                                     {props.iconType === CONST.ICON_TYPE_ICON && (
                                         <Icon
                                             src={props.icon}
@@ -170,67 +187,72 @@ function MenuItem(props) {
                                     )}
                                     {props.iconType === CONST.ICON_TYPE_AVATAR && (
                                         <Avatar
-                                            imageStyles={[styles.avatarNormal, styles.alignSelfCenter]}
+                                            imageStyles={[styles.alignSelfCenter]}
                                             source={props.icon}
                                             fallbackIcon={props.fallbackIcon}
+                                            size={props.avatarSize || CONST.AVATAR_SIZE.DEFAULT}
                                         />
                                     )}
                                 </View>
                             )}
-                            <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
-                                {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
-                                    <Text
-                                        style={descriptionTextStyle}
-                                        numberOfLines={2}
-                                    >
-                                        {props.description}
-                                    </Text>
-                                )}
-                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                    {Boolean(props.title) && (
+                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                {props.shouldShowSelectedState && props.shouldShowSelectedStateBeforeTitle && selectedState}
+                                <View style={[styles.justifyContentCenter, styles.menuItemTextContainer, styles.flex1]}>
+                                    {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
+                                        <Text
+                                            style={descriptionTextStyle}
+                                            numberOfLines={2}
+                                        >
+                                            {props.description}
+                                        </Text>
+                                    )}
+                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                        {Boolean(props.title) && (
+                                            <Text
+                                                style={titleTextStyle}
+                                                numberOfLines={1}
+                                            >
+                                                {convertToLTR(props.title)}
+                                            </Text>
+                                        )}
+                                        {Boolean(props.shouldShowTitleIcon) && (
+                                            <View style={[styles.ml2]}>
+                                                <Icon
+                                                    src={props.titleIcon}
+                                                    fill={themeColors.iconSuccessFill}
+                                                />
+                                            </View>
+                                        )}
+                                    </View>
+                                    {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
                                         <Text
-                                            style={titleTextStyle}
-                                            numberOfLines={1}
+                                            style={descriptionTextStyle}
+                                            numberOfLines={2}
                                         >
-                                            {convertToLTR(props.title)}
+                                            {props.description}
                                         </Text>
                                     )}
-                                    {Boolean(props.shouldShowTitleIcon) && (
-                                        <View style={[styles.ml2]}>
+                                    {Boolean(props.furtherDetails) && (
+                                        <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
                                             <Icon
-                                                src={props.titleIcon}
-                                                fill={themeColors.iconSuccessFill}
+                                                src={props.furtherDetailsIcon}
+                                                height={variables.iconSizeNormal}
+                                                width={variables.iconSizeNormal}
+                                                inline
                                             />
+                                            <Text
+                                                style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
+                                                numberOfLines={2}
+                                            >
+                                                {props.furtherDetails}
+                                            </Text>
                                         </View>
                                     )}
                                 </View>
-                                {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
-                                    <Text
-                                        style={descriptionTextStyle}
-                                        numberOfLines={2}
-                                    >
-                                        {props.description}
-                                    </Text>
-                                )}
-                                {Boolean(props.furtherDetails) && (
-                                    <View style={[styles.flexRow, styles.mt2, styles.alignItemsCenter]}>
-                                        <Icon
-                                            src={props.furtherDetailsIcon}
-                                            height={variables.iconSizeNormal}
-                                            width={variables.iconSizeNormal}
-                                            inline
-                                        />
-                                        <Text
-                                            style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
-                                            numberOfLines={2}
-                                        >
-                                            {props.furtherDetails}
-                                        </Text>
-                                    </View>
-                                )}
                             </View>
                         </View>
                     </View>
+
                     <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone]}>
                         {Boolean(props.badgeText) && (
                             <Badge
@@ -272,7 +294,7 @@ function MenuItem(props) {
                                 />
                             </View>
                         )}
-                        {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
+                        {props.shouldShowSelectedState && !props.shouldShowSelectedStateBeforeTitle && selectedState}
                     </View>
                 </>
             )}

src/components/ReportActionItem/TaskAction.js

@@ -50,7 +50,7 @@ function TaskAction(props) {
             messageLinkText = props.translate('task.messages.reopened');
             break;
         default:
-            messageLinkText = props.translate('newTaskPage.task');
+            messageLinkText = props.translate('task.task');
     }
 
     return (

src/components/ReportActionItem/TaskPreview.js

@@ -15,7 +15,8 @@ import getButtonState from '../../libs/getButtonState';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
-import * as TaskUtils from '../../libs/actions/Task';
+import * as Task from '../../libs/actions/Task';
+import * as ReportUtils from '../../libs/ReportUtils';
 import RenderHTML from '../RenderHTML';
 
 const propTypes = {
@@ -70,12 +71,12 @@ function TaskPreview(props) {
                     style={[styles.mr2]}
                     containerStyle={[styles.taskCheckbox]}
                     isChecked={isTaskCompleted}
-                    disabled={TaskUtils.isTaskCanceled(props.taskReport)}
+                    disabled={ReportUtils.isCanceledTaskReport(props.taskReport)}
                     onPress={() => {
                         if (isTaskCompleted) {
-                            TaskUtils.reopenTask(props.taskReportID, taskTitle);
+                            Task.reopenTask(props.taskReportID, taskTitle);
                         } else {
-                            TaskUtils.completeTask(props.taskReportID, taskTitle);
+                            Task.completeTask(props.taskReportID, taskTitle);
                         }
                     }}
                 />

src/components/ReportActionItem/TaskView.js

@@ -0,0 +1,76 @@
+import React, {useEffect} from 'react';
+import {View} from 'react-native';
+import reportPropTypes from '../../pages/reportPropTypes';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import withWindowDimensions from '../withWindowDimensions';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
+import compose from '../../libs/compose';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
+import MenuItem from '../MenuItem';
+import styles from '../../styles/styles';
+import * as ReportUtils from '../../libs/ReportUtils';
+import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
+import * as UserUtils from '../../libs/UserUtils';
+import * as Task from '../../libs/actions/Task';
+import CONST from '../../CONST';
+
+const propTypes = {
+    /** The report currently being looked at */
+    report: reportPropTypes.isRequired,
+
+    ...withLocalizePropTypes,
+
+    ...withCurrentUserPersonalDetailsPropTypes,
+};
+
+function TaskView(props) {
+    useEffect(() => {
+        Task.setTaskReport({...props.report, isExistingTaskReport: true});
+    }, [props.report]);
+
+    const taskTitle = props.report.reportName;
+    const isCompleted = ReportUtils.isCompletedTaskReport(props.report);
+
+    return (
+        <View style={[styles.borderBottom]}>
+            <MenuItemWithTopDescription
+                description={props.translate('task.title')}
+                title={taskTitle}
+                onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))}
+                shouldShowRightIcon
+                shouldShowSelectedState
+                shouldShowSelectedStateBeforeTitle
+                shouldUseSquareSelectedState
+                titleStyle={styles.newKansasLarge}
+                isSelected={isCompleted}
+                onPressSelection={() => (isCompleted ? Task.reopenTask(props.report.reportID, taskTitle) : Task.completeTask(props.report.reportID, taskTitle))}
+            />
+            <MenuItemWithTopDescription
+                description={props.translate('task.description')}
+                title={props.report.description}
+                onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))}
+                shouldShowRightIcon
+            />
+            <MenuItem
+                label={props.translate('task.assignee')}
+                title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
+                icon={UserUtils.getAvatar(
+                    PersonalDetailsUtils.getPersonalDetailsByIDs([props.report.managerID], props.currentUserPersonalDetails.accountID)[0].avatar, 
+                    props.report.managerID,
+                )}
+                iconType={CONST.ICON_TYPE_AVATAR}
+                avatarSize={CONST.AVATAR_SIZE.SMALL}
+                titleStyle={styles.textStrong}
+                onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))}
+                shouldShowRightIcon
+            />
+        </View>
+    );
+}
+
+TaskView.propTypes = propTypes;
+TaskView.displayName = 'TaskView';
+
+export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(TaskView);