Show errors after workspace creation failure

src/libs/actions/Policy.js

@@ -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
@@ -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,
@@ -949,4 +953,5 @@ export {
     createWorkspace,
     openWorkspaceMembersPage,
     openWorkspaceInvitePage,
+    removeWorkspace,
 };

src/pages/settings/InitialSettingsPage.js

@@ -108,6 +108,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');
 }
 

src/pages/workspace/WorkspaceInitialPage.js

@@ -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.disabled = this.disabled.bind(this);
+        this.dismissError = this.dismissError.bind(this);
 
         this.state = {
             isDeleteModalOpen: false,
@@ -80,6 +82,18 @@ class WorkspaceInitialPage extends React.Component {
         Navigation.navigate(ROUTES.SETTINGS);
     }
 
+    /**
+     * @returns {Boolean}
+     */
+    disabled() {
+        return Boolean(this.props.policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && this.props.policy.errors);
+    }
+
+    dismissError() {
+        Navigation.navigate(ROUTES.SETTINGS);
+        Policy.removeWorkspace(this.props.policy.id);
+    }
+
     render() {
         const policy = this.props.policy;
         const hasMembersError = PolicyUtils.hasPolicyMemberError(this.props.policyMemberList);
@@ -163,11 +177,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.disabled()}
                                             style={[styles.pRelative, styles.avatarLarge]}
                                             onPress={this.openEditor}
                                         >
@@ -192,6 +212,7 @@ class WorkspaceInitialPage extends React.Component {
                                         </Pressable>
                                         {!_.isEmpty(this.props.policy.name) && (
                                             <Pressable
+                                                disabled={this.disabled()}
                                                 style={[
                                                     styles.alignSelfCenter,
                                                     styles.mt4,
@@ -218,6 +239,8 @@ class WorkspaceInitialPage extends React.Component {
                                 {_.map(menuItems, item => (
                                     <MenuItem
                                         key={item.translationKey}
+                                        disabled={this.disabled()}
+                                        interactive={!this.disabled()}
                                         title={this.props.translate(item.translationKey)}
                                         icon={item.icon}
                                         iconRight={item.iconRight}