Use new api command AddWorkspaceRoom

src/CONST.js

@@ -312,6 +312,7 @@ const CONST = {
         MAX_PREVIEW_AVATARS: 4,
         MAX_ROOM_NAME_LENGTH: 80,
         LAST_MESSAGE_TEXT_MAX_LENGTH: 80,
+        OWNER_EMAIL_FAKE: '__FAKE__',
     },
     COMPOSER: {
         MAX_LINES: 16,
@@ -677,6 +678,7 @@ const CONST = {
         },
         ROOM_PREFIX: '#',
         CUSTOM_UNIT_RATE_BASE_OFFSET: 100,
+        OWNER_EMAIL_FAKE: '_FAKE_',
     },
 
     CUSTOM_UNITS: {

src/libs/OptionsListUtils.js

@@ -488,12 +488,16 @@ function getOptions(reports, personalDetails, activeReportID, {
             : '';
 
         const reportContainsIOUDebt = iouReportOwner && iouReportOwner !== currentUserLogin;
+        const hasAddWorkspaceRoomError = report.errorFields && !_.isEmpty(report.errorFields.addWorkspaceRoom);
         const shouldFilterReportIfEmpty = !showReportsWithNoComments && report.lastMessageTimestamp === 0
 
                 // We make exceptions for defaultRooms and policyExpenseChats so we can immediately
                 // highlight them in the LHN when they are created and have no messsages yet. We do
                 // not give archived rooms this exception since they do not need to be higlihted.
-                && !(!ReportUtils.isArchivedRoom(report) && (isDefaultRoom || isPolicyExpenseChat));
+                && !(!ReportUtils.isArchivedRoom(report) && (isDefaultRoom || isPolicyExpenseChat))
+
+                // Also make an exception for workspace rooms that failed to be added
+                && !hasAddWorkspaceRoomError;
 
         const shouldFilterReportIfRead = hideReadReports && !ReportUtils.isUnread(report);
         const shouldFilterReport = shouldFilterReportIfEmpty || shouldFilterReportIfRead;

src/libs/actions/Report.js

@@ -593,16 +593,18 @@ function fetchAllReports(
  * @param {String} ownerEmail
  * @param {Boolean} isOwnPolicyExpenseChat
  * @param {String} oldPolicyName
+ * @param {String} visibility
  * @returns {Object}
  */
 function buildOptimisticChatReport(
     participantList,
     reportName = 'Chat Report',
     chatType = '',
-    policyID = '_FAKE_',
-    ownerEmail = '__FAKE__',
+    policyID = CONST.POLICY.OWNER_EMAIL_FAKE,
+    ownerEmail = CONST.REPORT.OWNER_EMAIL_FAKE,
     isOwnPolicyExpenseChat = false,
     oldPolicyName = '',
+    visibility = undefined,
 ) {
     return {
         chatType,
@@ -616,7 +618,7 @@ function buildOptimisticChatReport(
         lastMessageTimestamp: 0,
         lastVisitedTimestamp: 0,
         maxSequenceNumber: 0,
-        notificationPreference: '',
+        notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.DAILY,
         oldPolicyName,
         ownerEmail,
         participants: participantList,
@@ -625,7 +627,7 @@ function buildOptimisticChatReport(
         reportName,
         stateNum: 0,
         statusNum: 0,
-        visibility: undefined,
+        visibility,
     };
 }
 
@@ -639,7 +641,6 @@ function buildOptimisticCreatedReportAction(ownerEmail) {
         0: {
             actionName: CONST.REPORT.ACTIONS.TYPE.CREATED,
             pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
-            actorEmail: currentUserEmail,
             actorAccountID: currentUserAccountID,
             message: [
                 {
@@ -1449,6 +1450,91 @@ function createPolicyRoom(policyID, reportName, visibility) {
         .finally(() => Onyx.set(ONYXKEYS.IS_LOADING_CREATE_POLICY_ROOM, false));
 }
 
+/**
+ * Add a policy report (workspace room) optimistically and navigate to it.
+ *
+ * @param {Object} policy
+ * @param {String} reportName
+ * @param {String} visibility
+ */
+function addPolicyReport(policy, reportName, visibility) {
+    // The participants include the current user (admin) and the employees. Participants must not be empty.
+    const participants = [currentUserEmail, ...policy.employeeList];
+    const policyReport = buildOptimisticChatReport(
+        participants,
+        reportName,
+        CONST.REPORT.CHAT_TYPE.POLICY_ROOM,
+        policy.id,
+        CONST.REPORT.OWNER_EMAIL_FAKE,
+        false,
+        '',
+        visibility,
+    );
+
+    // Onyx.set is used on the optimistic data so that it is present before navigating to the workspace room. With Onyx.merge the workspace room reportID is not present when
+    // storeCurrentlyViewedReport is called on the ReportScreen, so fetchChatReportsByIDs is called which is unnecessary since the optimistic data will be stored in Onyx.
+    // If there was an error creating the room, then fetchChatReportsByIDs throws an error and the user is navigated away from the report instead of showing the RBR error message.
+    // Therefore, Onyx.set is used instead of Onyx.merge.
+    const optimisticData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.SET,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${policyReport.reportID}`,
+            value: {
+                pendingFields: {
+                    addWorkspaceRoom: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+                },
+                ...policyReport,
+            },
+        },
+        {
+            onyxMethod: CONST.ONYX.METHOD.SET,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${policyReport.reportID}`,
+            value: buildOptimisticCreatedReportAction(policyReport.ownerEmail),
+        },
+    ];
+    const successData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${policyReport.reportID}`,
+            value: {
+                pendingFields: {
+                    addWorkspaceRoom: null,
+                },
+            },
+        },
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${policyReport.reportID}`,
+            value: {
+                0: {
+                    pendingAction: null,
+                },
+            },
+        },
+    ];
+
+    API.write(
+        'AddWorkspaceRoom',
+        {
+            policyID: policyReport.policyID,
+            reportName,
+            visibility,
+            reportID: policyReport.reportID,
+        },
+        {optimisticData, successData},
+    );
+    Navigation.navigate(ROUTES.getReportRoute(policyReport.reportID));
+}
+
+/**
+ * @param {Number} reportID The reportID of the policy report (workspace room)
+ */
+function navigateToConciergeChatAndDeletePolicyReport(reportID) {
+    navigateToConciergeChat();
+    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, null);
+    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, null);
+}
+
 /**
  * @param {Object} policyRoomReport
  * @param {Number} policyRoomReport.reportID
@@ -1659,6 +1745,8 @@ export {
     handleInaccessibleReport,
     setReportWithDraft,
     createPolicyRoom,
+    addPolicyReport,
+    navigateToConciergeChatAndDeletePolicyReport,
     setIsComposerFullSize,
     markCommentAsUnread,
     readNewestAction,

src/pages/home/ReportScreen.js

@@ -26,6 +26,9 @@ import addViewportResizeListener from '../../libs/VisualViewport';
 import {withNetwork} from '../../components/OnyxProvider';
 import compose from '../../libs/compose';
 import networkPropTypes from '../../components/networkPropTypes';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
+import OfflineIndicator from '../../components/OfflineIndicator';
+import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import withDrawerState, {withDrawerPropTypes} from '../../components/withDrawerState';
 
 const propTypes = {
@@ -82,6 +85,7 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    ...windowDimensionsPropTypes,
     ...withDrawerPropTypes,
 };
 
@@ -225,16 +229,24 @@ class ReportScreen extends React.Component {
         if (isArchivedRoom) {
             reportClosedAction = lodashFindLast(this.props.reportActions, action => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED);
         }
+        const addWorkspaceRoomPendingAction = lodashGet(this.props.report, 'pendingFields.addWorkspaceRoom');
+        const addWorkspaceRoomErrors = lodashGet(this.props.report, 'errorFields.addWorkspaceRoom');
+        const hideComposer = isArchivedRoom || !_.isEmpty(addWorkspaceRoomErrors);
         return (
             <ScreenWrapper
                 style={[styles.appContent, styles.flex1, {marginTop: this.state.viewportOffsetTop}]}
                 keyboardAvoidingViewBehavior={Platform.OS === 'android' ? '' : 'padding'}
             >
-                <HeaderView
-                    reportID={reportID}
-                    onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)}
-                />
-
+                <OfflineWithFeedback
+                    pendingAction={addWorkspaceRoomPendingAction}
+                    errors={addWorkspaceRoomErrors}
+                    errorRowStyles={styles.dNone}
+                >
+                    <HeaderView
+                        reportID={reportID}
+                        onNavigationMenuButtonClicked={() => Navigation.navigate(ROUTES.HOME)}
+                    />
+                </OfflineWithFeedback>
                 <View
                     nativeID={CONST.REPORT.DROP_NATIVE_ID}
                     style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
@@ -255,27 +267,38 @@ class ReportScreen extends React.Component {
                                 isDrawerOpen={this.props.isDrawerOpen}
                             />
                         )}
-                    {(isArchivedRoom || this.props.session.shouldShowComposeInput) && (
+                    {(isArchivedRoom || hideComposer) && (
+                        <View style={[styles.chatFooter]}>
+                            {isArchivedRoom && (
+                                <ArchivedReportFooter
+                                    reportClosedAction={reportClosedAction}
+                                    report={this.props.report}
+                                />
+                            )}
+                            {!this.props.isSmallScreenWidth && (
+                                <View style={styles.offlineIndicatorRow}>
+                                    {hideComposer && (
+                                        <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />
+                                    )}
+                                </View>
+                            )}
+                        </View>
+                    )}
+                    {(!hideComposer && this.props.session.shouldShowComposeInput) && (
                         <View style={[this.setChatFooterStyles(this.props.network.isOffline), this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
-                            {
-                                isArchivedRoom
-                                    ? (
-                                        <ArchivedReportFooter
-                                            reportClosedAction={reportClosedAction}
-                                            report={this.props.report}
-                                        />
-                                    ) : (
-                                        <SwipeableView onSwipeDown={Keyboard.dismiss}>
-                                            <ReportActionCompose
-                                                onSubmit={this.onSubmitComment}
-                                                reportID={reportID}
-                                                reportActions={this.props.reportActions}
-                                                report={this.props.report}
-                                                isComposerFullSize={this.props.isComposerFullSize}
-                                            />
-                                        </SwipeableView>
-                                    )
-                            }
+                            <SwipeableView onSwipeDown={Keyboard.dismiss}>
+                                <OfflineWithFeedback
+                                    pendingAction={addWorkspaceRoomPendingAction}
+                                >
+                                    <ReportActionCompose
+                                        onSubmit={this.onSubmitComment}
+                                        reportID={reportID}
+                                        reportActions={this.props.reportActions}
+                                        report={this.props.report}
+                                        isComposerFullSize={this.props.isComposerFullSize}
+                                    />
+                                </OfflineWithFeedback>
+                            </SwipeableView>
                         </View>
                     )}
                 </View>
@@ -288,6 +311,7 @@ ReportScreen.propTypes = propTypes;
 ReportScreen.defaultProps = defaultProps;
 
 export default compose(
+    withWindowDimensions,
     withDrawerState,
     withNetwork(),
     withOnyx({

src/pages/home/report/ReportActionItemCreated.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Pressable, View} from 'react-native';
+import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import ONYXKEYS from '../../../ONYXKEYS';
@@ -8,10 +9,15 @@ import ReportWelcomeText from '../../../components/ReportWelcomeText';
 import participantPropTypes from '../../../components/participantPropTypes';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import styles from '../../../styles/styles';
+import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
+import * as Report from '../../../libs/actions/Report';
 
 const propTypes = {
     /** The report currently being looked at */
     report: PropTypes.shape({
+        /** The id of the report */
+        reportID: PropTypes.number,
+
         /**  Avatars corresponding to a chat */
         icons: PropTypes.arrayOf(PropTypes.string),
 
@@ -38,24 +44,31 @@ const ReportActionItemCreated = (props) => {
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
     const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policies);
     return (
-        <View
-            accessibilityLabel="Chat welcome message"
-            style={[
-                styles.chatContent,
-                styles.pb8,
-                styles.p5,
-            ]}
+        <OfflineWithFeedback
+            pendingAction={lodashGet(props.report, 'pendingFields.addWorkspaceRoom')}
+            errors={lodashGet(props.report, 'errorFields.addWorkspaceRoom')}
+            errorRowStyles={styles.addWorkspaceRoomErrorRow}
+            onClose={() => Report.navigateToConciergeChatAndDeletePolicyReport(props.report.reportID)}
         >
-            <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.flex1]}>
-                <Pressable onPress={() => ReportUtils.navigateToDetailsPage(props.report)}>
-                    <RoomHeaderAvatars
-                        icons={icons}
-                        shouldShowLargeAvatars={isPolicyExpenseChat}
-                    />
-                </Pressable>
-                <ReportWelcomeText report={props.report} />
+            <View
+                accessibilityLabel="Chat welcome message"
+                style={[
+                    styles.chatContent,
+                    styles.pb8,
+                    styles.p5,
+                ]}
+            >
+                <View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.flex1]}>
+                    <Pressable onPress={() => ReportUtils.navigateToDetailsPage(props.report)}>
+                        <RoomHeaderAvatars
+                            icons={icons}
+                            shouldShowLargeAvatars={isPolicyExpenseChat}
+                        />
+                    </Pressable>
+                    <ReportWelcomeText report={props.report} />
+                </View>
             </View>
-        </View>
+        </OfflineWithFeedback>
     );
 };