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

Show errors after workspace creation failure #12117

Merged
merged 10 commits into from
Nov 1, 2022
Merged

Show errors after workspace creation failure #12117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5edd8c5
add errors to workspace creation
Oct 25, 2022
f07b9fc
reformat policy mapping
Oct 25, 2022
8c7395a
address issues with error on creation
Oct 27, 2022
6d01d82
apply suggestions
Oct 28, 2022
d609cf4
fix merge conflicts
Oct 28, 2022
eac41f2
include RBR on workspace list
Oct 28, 2022
09fdaef
include RBR
Oct 28, 2022
38b34a4
remove RBR on workspace list item on workspace lists page
Oct 28, 2022
6be3ef2
remove unused default prop
Oct 28, 2022
d0408fb
add RBR
Oct 28, 2022
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/PolicyUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function hasCustomUnitsError(policy) {
*/
function getPolicyBrickRoadIndicatorStatus(policy, policyMembers) {
const policyMemberList = lodashGet(policyMembers, `${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${policy.id}`, {});
if (hasPolicyMemberError(policyMemberList) || hasCustomUnitsError(policy)) {
if (hasPolicyMemberError(policyMemberList) || hasCustomUnitsError(policy) || hasPolicyError(policy)) {
return CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
}
return '';
Expand Down
15 changes: 10 additions & 5 deletions src/libs/actions/Policy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -659,6 +659,15 @@ function clearDeleteWorkspaceError(policyID) {
});
}

/**
* Removes the workspace after failure to create.
*
* @param {String} policyID
*/
function removeWorkspace(policyID) {
Onyx.set(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, null);
}

/**
* Generate a policy name based on an email and policy list.
* @param {String} [email] the email to base the workspace name on. If not passed, will use the logged in user's email instead
Expand Down Expand Up @@ -842,11 +851,6 @@ function createWorkspace(ownerEmail = '', makeMeAdmin = false) {
},
}],
failureData: [{
onyxMethod: CONST.ONYX.METHOD.SET,
key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
value: null,
},
{
onyxMethod: CONST.ONYX.METHOD.SET,
key: `${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${policyID}`,
value: null,
Expand Down Expand Up @@ -949,4 +953,5 @@ export {
createWorkspace,
openWorkspaceMembersPage,
openWorkspaceInvitePage,
removeWorkspace,
};
25 changes: 24 additions & 1 deletion src/pages/workspace/WorkspaceInitialPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ class WorkspaceInitialPage extends React.Component {
this.openEditor = this.openEditor.bind(this);
this.toggleDeleteModal = this.toggleDeleteModal.bind(this);
this.confirmDeleteAndHideModal = this.confirmDeleteAndHideModal.bind(this);
this.hasPolicyCreationError = this.hasPolicyCreationError.bind(this);
this.dismissError = this.dismissError.bind(this);

this.state = {
isDeleteModalOpen: false,
Expand Down Expand Up @@ -80,6 +82,18 @@ class WorkspaceInitialPage extends React.Component {
Navigation.navigate(ROUTES.SETTINGS);
}

/**
* @returns {Boolean}
*/
hasPolicyCreationError() {
return Boolean(this.props.policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && this.props.policy.errors);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The above logic caused issue:

because optimistic / success data is setting requiresCategory to null, therefore policy.errors will always be true.

App/src/libs/actions/Policy.ts

Lines 3571 to 3599 in 942c851

optimisticData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
value: {
requiresCategory,
errors: {
requiresCategory: null,
},
pendingFields: {
requiresCategory: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
},
},
},
],
successData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
value: {
errors: {
requiresCategory: null,
},
pendingFields: {
requiresCategory: null,
},
},
},
],

The proposed and implemented solution to fix this was to check !isEmptyObject(policy.errors) instead.

}

dismissError() {
Navigation.navigate(ROUTES.SETTINGS_WORKSPACES);
Policy.removeWorkspace(this.props.policy.id);
}

render() {
const policy = this.props.policy;
const hasMembersError = PolicyUtils.hasPolicyMemberError(this.props.policyMemberList);
Expand Down Expand Up @@ -159,11 +173,17 @@ class WorkspaceInitialPage extends React.Component {
styles.justifyContentBetween,
]}
>
<OfflineWithFeedback pendingAction={this.props.policy.pendingAction}>
<OfflineWithFeedback
pendingAction={this.props.policy.pendingAction}
onClose={this.dismissError}
errors={this.props.policy.errors}
errorRowStyles={[styles.ph6, styles.pv2]}
>
<View style={[styles.flex1]}>
<View style={styles.pageWrapper}>
<View style={[styles.settingsPageBody, styles.alignItemsCenter]}>
<Pressable
disabled={this.hasPolicyCreationError()}
style={[styles.pRelative, styles.avatarLarge]}
onPress={this.openEditor}
>
Expand All @@ -188,6 +208,7 @@ class WorkspaceInitialPage extends React.Component {
</Pressable>
{!_.isEmpty(this.props.policy.name) && (
<Pressable
disabled={this.hasPolicyCreationError()}
style={[
styles.alignSelfCenter,
styles.mt4,
Expand All @@ -214,6 +235,8 @@ class WorkspaceInitialPage extends React.Component {
{_.map(menuItems, item => (
<MenuItem
key={item.translationKey}
disabled={this.hasPolicyCreationError()}
interactive={!this.hasPolicyCreationError()}
title={this.props.translate(item.translationKey)}
icon={item.icon}
iconRight={item.iconRight}
Expand Down
6 changes: 5 additions & 1 deletion src/pages/workspace/WorkspacesListPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,11 @@ function dismissWorkspaceError(policyID, pendingAction) {
Policy.clearDeleteWorkspaceError(policyID);
return;
}

if (pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
Policy.removeWorkspace(policyID);
return;
}
throw new Error('Not implemented');
}

Expand Down Expand Up @@ -122,7 +127,6 @@ class WorkspacesListPage extends Component {
brickRoadIndicator: PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.policyMembers),
pendingAction: policy.pendingAction,
isPolicy: true,
errors: policy.errors,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change caused a regression

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't see any discussion about this change on this PR. Going to remove it and perform all the testing steps again to see if it can be safely added back

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We had a discussion on this. We wanted to only show the error message on the workspace details page. Like in this video.

2022-10-31_09-35-03.mp4

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://expensify.slack.com/archives/C01GTK53T8Q/p1666955764560879

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I now understand the context of that thread, and can see that my fix wasn't what was agreed upon in that thread. However, this PR didn't achieve what was agreed upon in that thread either. It was still a regression – we forgot to test the delete workspace flow with this PR. In that case, the workspace was just not showing at all, so there was no way to dismiss the red dot error that appeared in the settings menu.

dismissError: () => dismissWorkspaceError(policy.id, policy.pendingAction),
disabled: policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
}))
Expand Down
Loading