Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component refactor: migrate ReportSettingsPage to function component #22927

Merged
merged 8 commits into from
Jul 24, 2023
Merged

Component refactor: migrate ReportSettingsPage to function component #22927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8d62ebc
Component refactor: migrate ReportSettingsPage
alexxxwork Jul 15, 2023
cb8a980
Fix - add props destructuring
alexxxwork Jul 17, 2023
825590e
Merge branch 'main' into issue-16250
alexxxwork Jul 20, 2023
c53486d
Fix after PR #22316 changing the same component
alexxxwork Jul 20, 2023
4776afa
Update src/pages/settings/Report/ReportSettingsPage.js
alexxxwork Jul 20, 2023
e3d3795
Move additional condition to ReportUtils lib
alexxxwork Jul 20, 2023
3dcce0b
Update after PR #23255
alexxxwork Jul 22, 2023
c282d1f
Merge branch 'main' into issue-16250
alexxxwork Jul 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/libs/ReportUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2598,7 +2598,7 @@ function shouldDisableSettings(report) {
* @returns {Boolean}
*/
function shouldDisableRename(report, policy) {
if (isDefaultRoom(report) || isArchivedRoom(report)) {
if (isDefaultRoom(report) || isArchivedRoom(report) || isChatThread(report)) {
return true;
}

Expand Down
243 changes: 117 additions & 126 deletions src/pages/settings/Report/ReportSettingsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -13,7 +13,7 @@ import * as Report from '../../../libs/actions/Report';
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';
Expand All @@ -33,8 +33,6 @@ const propTypes = {
}),
}).isRequired,

...withLocalizePropTypes,

/* Onyx Props */

/** The active report */
Expand All @@ -54,154 +52,147 @@ const defaultProps = {
policies: {},
};

class ReportSettingsPage extends Component {
/**
* 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;
}
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(policies, (policy) => policy && policy.id === report.policyID), [policies, report.policyID]);
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 =
ReportUtils.isArchivedRoom(report) || !ReportUtils.isChatRoom(report) || _.isEmpty(linkedWorkspace) || linkedWorkspace.role !== CONST.POLICY.ROLE.ADMIN;

render() {
const shouldDisableSettings = ReportUtils.shouldDisableSettings(this.props.report);
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 = ReportUtils.shouldDisableRename(this.props.report, 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 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;

const writeCapabilityText = this.props.translate(`writeCapabilityPage.writeCapability.${writeCapability}`);
const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(this.props.report);
const writeCapabilityText = translate(`writeCapabilityPage.writeCapability.${writeCapability}`);
const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(report);

return (
<ScreenWrapper>
<FullPageNotFoundView shouldShow={_.isEmpty(this.props.report) || shouldDisableSettings}>
<HeaderWithBackButton
title={this.props.translate('common.settings')}
onBackButtonPress={() => Navigation.goBack(ROUTES.getReportDetailsRoute(this.props.report.reportID))}
return (
<ScreenWrapper>
<FullPageNotFoundView shouldShow={shouldDisableSettings}>
<HeaderWithBackButton
title={translate('common.settings')}
onBackButtonPress={() => Navigation.goBack(ROUTES.getReportDetailsRoute(report.reportID))}
/>
<ScrollView style={[styles.flex1]}>
<MenuItemWithTopDescription
shouldShowRightIcon
title={notificationPreference}
description={translate('notificationPreferencesPage.label')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsNotificationPreferencesRoute(report.reportID))}
/>
<ScrollView style={[styles.flex1]}>
{shouldShowRoomName && (
<OfflineWithFeedback
pendingAction={lodashGet(report, 'pendingFields.reportName', null)}
errors={lodashGet(report, 'errorFields.reportName', null)}
errorRowStyles={[styles.ph5]}
onClose={() => Report.clearPolicyRoomNameErrors(report.reportID)}
>
{shouldDisableRename ? (
<View style={[styles.ph5, styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{translate('newRoomPage.roomName')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{report.reportName}
</Text>
</View>
) : (
<MenuItemWithTopDescription
shouldShowRightIcon
title={report.reportName}
description={translate('newRoomPage.roomName')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsRoomNameRoute(report.reportID))}
/>
)}
</OfflineWithFeedback>
)}
{shouldAllowWriteCapabilityEditing ? (
<MenuItemWithTopDescription
shouldShowRightIcon
title={notificationPreference}
description={this.props.translate('notificationPreferencesPage.label')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsNotificationPreferencesRoute(this.props.report.reportID))}
title={writeCapabilityText}
description={translate('writeCapabilityPage.label')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsWriteCapabilityRoute(report.reportID))}
/>
{shouldShowRoomName && (
<OfflineWithFeedback
pendingAction={lodashGet(this.props.report, 'pendingFields.reportName', null)}
errors={lodashGet(this.props.report, 'errorFields.reportName', null)}
errorRowStyles={[styles.ph5]}
onClose={() => Report.clearPolicyRoomNameErrors(this.props.report.reportID)}
) : (
<View style={[styles.ph5, styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{shouldDisableRename ? (
<View style={[styles.ph5, styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{this.props.translate('newRoomPage.roomName')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{this.props.report.reportName}
</Text>
</View>
) : (
<MenuItemWithTopDescription
shouldShowRightIcon
title={this.props.report.reportName}
description={this.props.translate('newRoomPage.roomName')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsRoomNameRoute(this.props.report.reportID))}
/>
)}
</OfflineWithFeedback>
)}
{shouldAllowWriteCapabilityEditing ? (
<MenuItemWithTopDescription
shouldShowRightIcon
title={writeCapabilityText}
description={this.props.translate('writeCapabilityPage.label')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsWriteCapabilityRoute(this.props.report.reportID))}
/>
) : (
<View style={[styles.ph5, styles.pv3]}>
{translate('writeCapabilityPage.label')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{writeCapabilityText}
</Text>
</View>
)}
<View style={[styles.ph5]}>
{Boolean(linkedWorkspace) && (
<View style={[styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{this.props.translate('writeCapabilityPage.label')}
{translate('workspace.common.workspace')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{writeCapabilityText}
{linkedWorkspace.name}
</Text>
</View>
)}
<View style={[styles.ph5]}>
{Boolean(linkedWorkspace) && (
<View style={[styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{this.props.translate('workspace.common.workspace')}
</Text>
<Text
numberOfLines={1}
style={[styles.optionAlternateText, styles.pre]}
>
{linkedWorkspace.name}
</Text>
</View>
)}
{Boolean(this.props.report.visibility) && (
<View style={[styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{this.props.translate('newRoomPage.visibility')}
</Text>
<Text
numberOfLines={1}
style={[styles.reportSettingsVisibilityText]}
>
{this.props.translate(`newRoomPage.visibilityOptions.${this.props.report.visibility}`)}
</Text>
<Text style={[styles.textLabelSupporting, styles.mt1]}>{this.props.translate(`newRoomPage.${this.props.report.visibility}Description`)}</Text>
</View>
)}
</View>
{!shouldDisableWelcomeMessage && (
<MenuItem
title={this.props.translate('welcomeMessagePage.welcomeMessage')}
icon={Expensicons.ChatBubble}
onPress={() => Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(this.props.report.reportID))}
shouldShowRightIcon
/>
{Boolean(report.visibility) && (
<View style={[styles.pv3]}>
<Text
style={[styles.textLabelSupporting, styles.lh16, styles.mb1]}
numberOfLines={1}
>
{translate('newRoomPage.visibility')}
</Text>
<Text
numberOfLines={1}
style={[styles.reportSettingsVisibilityText]}
>
{translate(`newRoomPage.visibilityOptions.${report.visibility}`)}
</Text>
<Text style={[styles.textLabelSupporting, styles.mt1]}>{translate(`newRoomPage.${report.visibility}Description`)}</Text>
</View>
)}
</ScrollView>
</FullPageNotFoundView>
</ScreenWrapper>
);
}
</View>
{!shouldDisableWelcomeMessage && (
<MenuItem
title={translate('welcomeMessagePage.welcomeMessage')}
icon={Expensicons.ChatBubble}
onPress={() => Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(report.reportID))}
shouldShowRightIcon
/>
)}
</ScrollView>
</FullPageNotFoundView>
</ScreenWrapper>
);
}

ReportSettingsPage.propTypes = propTypes;
ReportSettingsPage.defaultProps = defaultProps;
ReportSettingsPage.displayName = 'ReportSettingsPage';
export default compose(
withLocalize,
withReportOrNotFound,
withOnyx({
policies: {
Expand Down