From 8d62ebc19528d81dc7582ac0b3fcacaceb7afae0 Mon Sep 17 00:00:00 2001 From: Alex D Date: Sat, 15 Jul 2023 03:53:26 +0300 Subject: [PATCH 1/6] Component refactor: migrate ReportSettingsPage --- .../settings/Report/ReportSettingsPage.js | 258 ++++++++---------- 1 file changed, 121 insertions(+), 137 deletions(-) diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js index 7f246a346c56..d49a60e4723e 100644 --- a/src/pages/settings/Report/ReportSettingsPage.js +++ b/src/pages/settings/Report/ReportSettingsPage.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {useMemo} from 'react'; import PropTypes from 'prop-types'; import {View, ScrollView} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -14,7 +14,7 @@ import * as Policy from '../../../libs/actions/Policy'; import * as ReportUtils from '../../../libs/ReportUtils'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; -import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import useLocalize from '../../../hooks/useLocalize'; import Text from '../../../components/Text'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; import reportPropTypes from '../../reportPropTypes'; @@ -34,8 +34,6 @@ const propTypes = { }), }).isRequired, - ...withLocalizePropTypes, - /* Onyx Props */ /** The active report */ @@ -55,18 +53,17 @@ const defaultProps = { policies: {}, }; -class ReportSettingsPage extends Component { - /** - * @param {Object|null} linkedWorkspace - the workspace the report is on, null if the user isn't a member of the workspace - * @returns {Boolean} - */ - shouldDisableRename(linkedWorkspace) { - if (ReportUtils.isDefaultRoom(this.props.report) || ReportUtils.isArchivedRoom(this.props.report)) { +function ReportSettingsPage(props) { + const {translate} = useLocalize(); + // The workspace the report is on, null if the user isn't a member of the workspace + const linkedWorkspace = useMemo(() => _.find(props.policies, (policy) => policy && policy.id === props.report.policyID), [props.policies, props.report.policyID]); + const shouldDisableRename = useMemo(() => { + if (ReportUtils.isDefaultRoom(props.report) || ReportUtils.isArchivedRoom(props.report) || ReportUtils.isChatThread(props.report)) { return true; } // The remaining checks only apply to public rooms - if (!ReportUtils.isPublicRoom(this.props.report)) { + if (!ReportUtils.isPublicRoom(props.report)) { return false; } @@ -79,154 +76,141 @@ class ReportSettingsPage extends Component { // If there is a linked workspace, that means the user is a member of the workspace the report is in. // Still, we only want policy owners and admins to be able to modify the name. return !Policy.isPolicyOwner(linkedWorkspace) && linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN; - } - - /** - * We only want policy owners and admins to be able to modify the welcome message. - * - * @param {Object|null} linkedWorkspace - the workspace the report is on, null if the user isn't a member of the workspace - * @returns {Boolean} - */ - shouldDisableWelcomeMessage(linkedWorkspace) { - return ReportUtils.isArchivedRoom(this.props.report) || !ReportUtils.isChatRoom(this.props.report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN; - } - - render() { - const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(this.props.report) && !ReportUtils.isChatThread(this.props.report); - const linkedWorkspace = _.find(this.props.policies, (policy) => policy && policy.id === this.props.report.policyID); - const shouldDisableRename = this.shouldDisableRename(linkedWorkspace) || ReportUtils.isChatThread(this.props.report); - const notificationPreference = this.props.translate(`notificationPreferencesPage.notificationPreferences.${this.props.report.notificationPreference}`); - const shouldDisableWelcomeMessage = this.shouldDisableWelcomeMessage(linkedWorkspace); - const writeCapability = ReportUtils.isAdminRoom(this.props.report) - ? CONST.REPORT.WRITE_CAPABILITIES.ADMINS - : this.props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL; - - const writeCapabilityText = this.props.translate(`writeCapabilityPage.writeCapability.${writeCapability}`); - const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(this.props.report); - - return ( - - - Navigation.goBack(ROUTES.getReportDetailsRoute(this.props.report.reportID))} + }, [props.report, linkedWorkspace]); + + // We only want policy owners and admins to be able to modify the welcome message. + const shouldDisableWelcomeMessage = + ReportUtils.isArchivedRoom(props.report) || !ReportUtils.isChatRoom(props.report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN; + + const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(props.report) && !ReportUtils.isChatThread(props.report); + const notificationPreference = translate(`notificationPreferencesPage.notificationPreferences.${props.report.notificationPreference}`); + const writeCapability = ReportUtils.isAdminRoom(props.report) ? CONST.REPORT.WRITE_CAPABILITIES.ADMINS : props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL; + + const writeCapabilityText = translate(`writeCapabilityPage.writeCapability.${writeCapability}`); + const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(props.report); + + return ( + + + Navigation.goBack(ROUTES.getReportDetailsRoute(props.report.reportID))} + /> + + Navigation.navigate(ROUTES.getReportSettingsNotificationPreferencesRoute(props.report.reportID))} /> - + {shouldShowRoomName && ( + Report.clearPolicyRoomNameErrors(props.report.reportID)} + > + {shouldDisableRename ? ( + + + {translate('newRoomPage.roomName')} + + + {props.report.reportName} + + + ) : ( + Navigation.navigate(ROUTES.getReportSettingsRoomNameRoute(props.report.reportID))} + /> + )} + + )} + {shouldAllowWriteCapabilityEditing ? ( Navigation.navigate(ROUTES.getReportSettingsNotificationPreferencesRoute(this.props.report.reportID))} + title={writeCapabilityText} + description={translate('writeCapabilityPage.label')} + onPress={() => Navigation.navigate(ROUTES.getReportSettingsWriteCapabilityRoute(props.report.reportID))} /> - {shouldShowRoomName && ( - Report.clearPolicyRoomNameErrors(this.props.report.reportID)} + ) : ( + + - {shouldDisableRename ? ( - - - {this.props.translate('newRoomPage.roomName')} - - - {this.props.report.reportName} - - - ) : ( - Navigation.navigate(ROUTES.getReportSettingsRoomNameRoute(this.props.report.reportID))} - /> - )} - - )} - {shouldAllowWriteCapabilityEditing ? ( - Navigation.navigate(ROUTES.getReportSettingsWriteCapabilityRoute(this.props.report.reportID))} - /> - ) : ( - + {translate('writeCapabilityPage.label')} + + + {writeCapabilityText} + + + )} + + {Boolean(linkedWorkspace) && ( + - {this.props.translate('writeCapabilityPage.label')} + {translate('workspace.common.workspace')} - {writeCapabilityText} + {linkedWorkspace.name} )} - - {Boolean(linkedWorkspace) && ( - - - {this.props.translate('workspace.common.workspace')} - - - {linkedWorkspace.name} - - - )} - {Boolean(this.props.report.visibility) && ( - - - {this.props.translate('newRoomPage.visibility')} - - - {this.props.translate(`newRoomPage.visibilityOptions.${this.props.report.visibility}`)} - - {this.props.translate(`newRoomPage.${this.props.report.visibility}Description`)} - - )} - - {!shouldDisableWelcomeMessage && ( - Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(this.props.report.reportID))} - shouldShowRightIcon - /> + {Boolean(props.report.visibility) && ( + + + {translate('newRoomPage.visibility')} + + + {translate(`newRoomPage.visibilityOptions.${props.report.visibility}`)} + + {translate(`newRoomPage.${props.report.visibility}Description`)} + )} - - - - ); - } + + {!shouldDisableWelcomeMessage && ( + Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(props.report.reportID))} + shouldShowRightIcon + /> + )} + + + + ); } ReportSettingsPage.propTypes = propTypes; ReportSettingsPage.defaultProps = defaultProps; +ReportSettingsPage.displayName = 'ReportSettingsPage'; export default compose( - withLocalize, withReportOrNotFound, withOnyx({ policies: { From cb8a980cb0466f8792ebd3e6d8910015811123c9 Mon Sep 17 00:00:00 2001 From: Alex D Date: Mon, 17 Jul 2023 10:29:57 +0300 Subject: [PATCH 2/6] Fix - add props destructuring --- .../settings/Report/ReportSettingsPage.js | 47 ++++++++++--------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js index d49a60e4723e..174749ec9db5 100644 --- a/src/pages/settings/Report/ReportSettingsPage.js +++ b/src/pages/settings/Report/ReportSettingsPage.js @@ -54,16 +54,17 @@ const defaultProps = { }; function ReportSettingsPage(props) { + const {report, policies} = props; const {translate} = useLocalize(); // The workspace the report is on, null if the user isn't a member of the workspace - const linkedWorkspace = useMemo(() => _.find(props.policies, (policy) => policy && policy.id === props.report.policyID), [props.policies, props.report.policyID]); + const linkedWorkspace = useMemo(() => _.find(policies, (policy) => policy && policy.id === report.policyID), [policies, report.policyID]); const shouldDisableRename = useMemo(() => { - if (ReportUtils.isDefaultRoom(props.report) || ReportUtils.isArchivedRoom(props.report) || ReportUtils.isChatThread(props.report)) { + if (ReportUtils.isDefaultRoom(report) || ReportUtils.isArchivedRoom(report) || ReportUtils.isChatThread(report)) { return true; } // The remaining checks only apply to public rooms - if (!ReportUtils.isPublicRoom(props.report)) { + if (!ReportUtils.isPublicRoom(report)) { return false; } @@ -76,39 +77,39 @@ function ReportSettingsPage(props) { // If there is a linked workspace, that means the user is a member of the workspace the report is in. // Still, we only want policy owners and admins to be able to modify the name. return !Policy.isPolicyOwner(linkedWorkspace) && linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN; - }, [props.report, linkedWorkspace]); + }, [report, linkedWorkspace]); // We only want policy owners and admins to be able to modify the welcome message. const shouldDisableWelcomeMessage = - ReportUtils.isArchivedRoom(props.report) || !ReportUtils.isChatRoom(props.report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN; + ReportUtils.isArchivedRoom(report) || !ReportUtils.isChatRoom(report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN; - const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(props.report) && !ReportUtils.isChatThread(props.report); - const notificationPreference = translate(`notificationPreferencesPage.notificationPreferences.${props.report.notificationPreference}`); - const writeCapability = ReportUtils.isAdminRoom(props.report) ? CONST.REPORT.WRITE_CAPABILITIES.ADMINS : props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL; + const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(report) && !ReportUtils.isChatThread(report); + const notificationPreference = translate(`notificationPreferencesPage.notificationPreferences.${report.notificationPreference}`); + const writeCapability = ReportUtils.isAdminRoom(report) ? CONST.REPORT.WRITE_CAPABILITIES.ADMINS : report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL; const writeCapabilityText = translate(`writeCapabilityPage.writeCapability.${writeCapability}`); - const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(props.report); + const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(report); return ( - + Navigation.goBack(ROUTES.getReportDetailsRoute(props.report.reportID))} + onBackButtonPress={() => Navigation.goBack(ROUTES.getReportDetailsRoute(report.reportID))} /> Navigation.navigate(ROUTES.getReportSettingsNotificationPreferencesRoute(props.report.reportID))} + onPress={() => Navigation.navigate(ROUTES.getReportSettingsNotificationPreferencesRoute(report.reportID))} /> {shouldShowRoomName && ( Report.clearPolicyRoomNameErrors(props.report.reportID)} + onClose={() => Report.clearPolicyRoomNameErrors(report.reportID)} > {shouldDisableRename ? ( @@ -122,15 +123,15 @@ function ReportSettingsPage(props) { numberOfLines={1} style={[styles.optionAlternateText, styles.pre]} > - {props.report.reportName} + {report.reportName} ) : ( Navigation.navigate(ROUTES.getReportSettingsRoomNameRoute(props.report.reportID))} + onPress={() => Navigation.navigate(ROUTES.getReportSettingsRoomNameRoute(report.reportID))} /> )} @@ -140,7 +141,7 @@ function ReportSettingsPage(props) { shouldShowRightIcon title={writeCapabilityText} description={translate('writeCapabilityPage.label')} - onPress={() => Navigation.navigate(ROUTES.getReportSettingsWriteCapabilityRoute(props.report.reportID))} + onPress={() => Navigation.navigate(ROUTES.getReportSettingsWriteCapabilityRoute(report.reportID))} /> ) : ( @@ -175,7 +176,7 @@ function ReportSettingsPage(props) { )} - {Boolean(props.report.visibility) && ( + {Boolean(report.visibility) && ( - {translate(`newRoomPage.visibilityOptions.${props.report.visibility}`)} + {translate(`newRoomPage.visibilityOptions.${report.visibility}`)} - {translate(`newRoomPage.${props.report.visibility}Description`)} + {translate(`newRoomPage.${report.visibility}Description`)} )} @@ -197,7 +198,7 @@ function ReportSettingsPage(props) { Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(props.report.reportID))} + onPress={() => Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(report.reportID))} shouldShowRightIcon /> )} From c53486d83eccd42710467259594b3f73a45aa067 Mon Sep 17 00:00:00 2001 From: Alex D Date: Thu, 20 Jul 2023 16:35:57 +0300 Subject: [PATCH 3/6] Fix after PR #22316 changing the same component --- .../settings/Report/ReportSettingsPage.js | 21 +------------------ 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js index af7d1e39df98..1dea13a19d34 100644 --- a/src/pages/settings/Report/ReportSettingsPage.js +++ b/src/pages/settings/Report/ReportSettingsPage.js @@ -57,26 +57,7 @@ function ReportSettingsPage(props) { const {translate} = useLocalize(); // The workspace the report is on, null if the user isn't a member of the workspace const linkedWorkspace = useMemo(() => _.find(policies, (policy) => policy && policy.id === report.policyID), [policies, report.policyID]); - const shouldDisableRename = useMemo(() => { - if (ReportUtils.isDefaultRoom(report) || ReportUtils.isArchivedRoom(report) || ReportUtils.isChatThread(report)) { - return true; - } - - // The remaining checks only apply to public rooms - if (!ReportUtils.isPublicRoom(report)) { - return false; - } - - // if the linked workspace is null, that means the person isn't a member of the workspace the report is in - // which means this has to be a public room we want to disable renaming for - if (!linkedWorkspace) { - return true; - } - - // If there is a linked workspace, that means the user is a member of the workspace the report is in. - // Still, we only want policy owners and admins to be able to modify the name. - return !Policy.isPolicyOwner(linkedWorkspace) && linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN; - }, [report, linkedWorkspace]); + const shouldDisableRename = useMemo(() => ReportUtils.shouldDisableRename(report, linkedWorkspace) || ReportUtils.isChatThread(report), [report, linkedWorkspace]); // We only want policy owners and admins to be able to modify the welcome message. const shouldDisableWelcomeMessage = From 4776afa12e3cbec9c4124b5e1bd166ad4022b28c Mon Sep 17 00:00:00 2001 From: Aleksei Dvoretskii Date: Thu, 20 Jul 2023 12:14:22 -0700 Subject: [PATCH 4/6] Update src/pages/settings/Report/ReportSettingsPage.js Co-authored-by: Fedi Rajhi --- src/pages/settings/Report/ReportSettingsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js index 1dea13a19d34..40679da7790f 100644 --- a/src/pages/settings/Report/ReportSettingsPage.js +++ b/src/pages/settings/Report/ReportSettingsPage.js @@ -57,7 +57,7 @@ function ReportSettingsPage(props) { const {translate} = useLocalize(); // The workspace the report is on, null if the user isn't a member of the workspace const linkedWorkspace = useMemo(() => _.find(policies, (policy) => policy && policy.id === report.policyID), [policies, report.policyID]); - const shouldDisableRename = useMemo(() => ReportUtils.shouldDisableRename(report, linkedWorkspace) || ReportUtils.isChatThread(report), [report, linkedWorkspace]); + const shouldDisableRename = useMemo(() => ReportUtils.shouldDisableRename(report, linkedWorkspace), [report, linkedWorkspace]); // We only want policy owners and admins to be able to modify the welcome message. const shouldDisableWelcomeMessage = From e3d37956c530586bb763b32477d3125831dca838 Mon Sep 17 00:00:00 2001 From: Alex D Date: Thu, 20 Jul 2023 22:17:00 +0300 Subject: [PATCH 5/6] Move additional condition to ReportUtils lib --- src/libs/ReportUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js index f187d739e37f..88e67906253e 100644 --- a/src/libs/ReportUtils.js +++ b/src/libs/ReportUtils.js @@ -2575,7 +2575,7 @@ function getReportOfflinePendingActionAndErrors(report) { * @returns {Boolean} */ function shouldDisableRename(report, policy) { - if (isDefaultRoom(report) || isArchivedRoom(report)) { + if (isDefaultRoom(report) || isArchivedRoom(report) || isChatThread(report)) { return true; } From 3dcce0bb1d0db73e5a92f15f548c47c4392df101 Mon Sep 17 00:00:00 2001 From: Alex D Date: Sat, 22 Jul 2023 15:11:14 +0300 Subject: [PATCH 6/6] Update after PR #23255 --- src/pages/settings/Report/ReportSettingsPage.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js index 40679da7790f..975402dd5a61 100644 --- a/src/pages/settings/Report/ReportSettingsPage.js +++ b/src/pages/settings/Report/ReportSettingsPage.js @@ -63,6 +63,7 @@ function ReportSettingsPage(props) { const shouldDisableWelcomeMessage = ReportUtils.isArchivedRoom(report) || !ReportUtils.isChatRoom(report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN; + const shouldDisableSettings = _.isEmpty(report) || ReportUtils.shouldDisableSettings(report); const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(report) && !ReportUtils.isChatThread(report); const notificationPreference = translate(`notificationPreferencesPage.notificationPreferences.${report.notificationPreference}`); const writeCapability = ReportUtils.isAdminRoom(report) ? CONST.REPORT.WRITE_CAPABILITIES.ADMINS : report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL; @@ -72,7 +73,7 @@ function ReportSettingsPage(props) { return ( - + Navigation.goBack(ROUTES.getReportDetailsRoute(report.reportID))}