Skip to content

Component refactor: migrate ReportSettingsPage to function component #22927

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

Merged
merged 8 commits into from
Jul 24, 2023
Merged

Component refactor: migrate ReportSettingsPage to function component #22927

Changes from 1 commit
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
258 changes: 121 additions & 137 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 @@ -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';
Expand All @@ -34,8 +34,6 @@ const propTypes = {
}),
}).isRequired,

...withLocalizePropTypes,

/* Onyx Props */

/** The active report */
Expand All @@ -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;
}

Expand All @@ -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 (
<ScreenWrapper>
<FullPageNotFoundView shouldShow={_.isEmpty(this.props.report)}>
<HeaderWithBackButton
title={this.props.translate('common.settings')}
onBackButtonPress={() => 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 (
<ScreenWrapper>
<FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
<HeaderWithBackButton
title={translate('common.settings')}
onBackButtonPress={() => Navigation.goBack(ROUTES.getReportDetailsRoute(props.report.reportID))}
/>
<ScrollView style={[styles.flex1]}>
<MenuItemWithTopDescription
shouldShowRightIcon
title={notificationPreference}
description={translate('notificationPreferencesPage.label')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsNotificationPreferencesRoute(props.report.reportID))}
/>
<ScrollView style={[styles.flex1]}>
{shouldShowRoomName && (
<OfflineWithFeedback
pendingAction={lodashGet(props.report, 'pendingFields.reportName', null)}
errors={lodashGet(props.report, 'errorFields.reportName', null)}
errorRowStyles={[styles.ph5]}
onClose={() => Report.clearPolicyRoomNameErrors(props.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]}
>
{props.report.reportName}
</Text>
</View>
) : (
<MenuItemWithTopDescription
shouldShowRightIcon
title={props.report.reportName}
description={translate('newRoomPage.roomName')}
onPress={() => Navigation.navigate(ROUTES.getReportSettingsRoomNameRoute(props.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(props.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(props.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.${props.report.visibility}`)}
</Text>
<Text style={[styles.textLabelSupporting, styles.mt1]}>{translate(`newRoomPage.${props.report.visibility}Description`)}</Text>
</View>
)}
</ScrollView>
</FullPageNotFoundView>
</ScreenWrapper>
);
}
</View>
{!shouldDisableWelcomeMessage && (
<MenuItem
title={translate('welcomeMessagePage.welcomeMessage')}
icon={Expensicons.ChatBubble}
onPress={() => Navigation.navigate(ROUTES.getReportWelcomeMessageRoute(props.report.reportID))}
shouldShowRightIcon
/>
)}
</ScrollView>
</FullPageNotFoundView>
</ScreenWrapper>
);
}

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