Migrate policy API to remove policy members

package.json

@@ -95,7 +95,7 @@
     "react-native-image-picker": "^4.8.5",
     "react-native-image-size": "git+https://github.com/Expensify/react-native-image-size#6b5ab5110dc3ed554f8eafbc38d7d87c17147972",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "1.0.15",
+    "react-native-onyx": "1.0.16",
     "react-native-pdf": "^6.6.2",
     "react-native-performance": "^2.0.0",
     "react-native-permissions": "^3.0.1",

src/languages/en.js

@@ -811,6 +811,7 @@ export default {
             selectAll: 'Select all',
             error: {
                 cannotRemove: 'You cannot remove yourself or the workspace owner.',
+                genericRemove: 'There was a problem removing that workspace member.',
             },
         },
         card: {

src/languages/es.js

@@ -813,6 +813,7 @@ export default {
             selectAll: 'Seleccionar todo',
             error: {
                 cannotRemove: 'No puedes eliminarte ni a ti mismo ni al dueño del espacio de trabajo.',
+                genericRemove: 'Ha ocurrido un problema al eliminar al miembro del espacio de trabajo.',
             },
         },
         card: {

src/libs/ActiveClientManager/index.js

@@ -7,7 +7,7 @@ import * as ActiveClients from '../actions/ActiveClients';
 const clientID = Str.guid();
 const maxClients = 20;
 
-let activeClients;
+let activeClients = [];
 
 let resolveIsReadyPromise;
 const isReadyPromise = new Promise((resolve) => {
@@ -24,7 +24,9 @@ function isReady() {
 Onyx.connect({
     key: ONYXKEYS.ACTIVE_CLIENTS,
     callback: (val) => {
-        activeClients = !val ? [] : val;
+        if (val) {
+            activeClients = _.unique(activeClients.concat(val));
+        }
         if (activeClients.length >= maxClients) {
             activeClients.shift();
             ActiveClients.setActiveClients(activeClients);

src/libs/actions/Policy.js

@@ -218,29 +218,21 @@ function removeMembers(members, policyID) {
     if (members.length === 0) {
         return;
     }
-
-    const employeeListUpdate = {};
-    _.each(members, login => employeeListUpdate[login] = null);
-    Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${policyID}`, employeeListUpdate);
-
-    // Make the API call to remove a login from the policy
-    DeprecatedAPI.Policy_Employees_Remove({
+    const membersListKey = `${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${policyID}`;
+    const optimisticData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: membersListKey,
+        value: _.object(members, Array(members.length).fill({pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE})),
+    }];
+    const failureData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: membersListKey,
+        value: _.object(members, Array(members.length).fill({errors: {[DateUtils.getMicroseconds()]: Localize.translateLocal('workspace.people.error.genericRemove')}})),
+    }];
+    API.write('DeleteMembersFromWorkspace', {
         emailList: members.join(','),
         policyID,
-    })
-        .then((data) => {
-            if (data.jsonCode === 200) {
-                return;
-            }
-
-            // Rollback removal on failure
-            _.each(members, login => employeeListUpdate[login] = {});
-            Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY_MEMBER_LIST}${policyID}`, employeeListUpdate);
-
-            // Show the user feedback that the removal failed
-            const errorMessage = data.jsonCode === 666 ? data.message : Localize.translateLocal('workspace.people.genericFailureMessage');
-            Growl.show(errorMessage, CONST.GROWL.ERROR, 5000);
-        });
+    }, {optimisticData, failureData});
 }
 
 /**
@@ -699,21 +691,14 @@ function updateLastAccessedWorkspace(policyID) {
 function subscribeToPolicyEvents() {
     _.each(allPolicies, (policy) => {
         const pusherChannelName = `public-policyEditor-${policy.id}${CONFIG.PUSHER.SUFFIX}`;
-        Pusher.subscribe(pusherChannelName, 'policyEmployeeRemoved', ({removedEmails, policyExpenseChatIDs, defaultRoomChatIDs}) => {
-            // Refetch the policy expense chats to update their state and their actions to get the archive reason
-            if (!_.isEmpty(policyExpenseChatIDs)) {
-                Report.fetchChatReportsByIDs(policyExpenseChatIDs);
-                _.each(policyExpenseChatIDs, (reportID) => {
-                    Report.reconnect(reportID);
-                });
-            }
-
+        Pusher.subscribe(pusherChannelName, 'policyEmployeeRemoved', ({removedEmails, defaultRoomChatIDs}) => {
             // Remove the default chats if we are one of the users getting removed
-            if (removedEmails.includes(sessionEmail) && !_.isEmpty(defaultRoomChatIDs)) {
-                _.each(defaultRoomChatIDs, (chatID) => {
-                    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT}${chatID}`, null);
-                });
+            if (!removedEmails.includes(sessionEmail) || _.isEmpty(defaultRoomChatIDs)) {
+                return;
             }
+            _.each(defaultRoomChatIDs, (chatID) => {
+                Onyx.set(`${ONYXKEYS.COLLECTION.REPORT}${chatID}`, null);
+            });
         });
     });
 }

src/libs/actions/Report.js

@@ -1263,6 +1263,7 @@ function editReportComment(reportID, originalReportAction, textForNewComment) {
                 isEdited: true,
                 html: htmlForNewComment,
                 text: textForNewComment,
+                type: originalReportAction.message[0].type,
             }],
         },
     };

src/pages/workspace/WorkspaceMembersPage.js

@@ -283,14 +283,19 @@ class WorkspaceMembersPage extends React.Component {
     }
 
     render() {
-        const policyMemberList = _.keys(lodashGet(this.props, 'policyMemberList', {}));
-        const removableMembers = _.without(policyMemberList, this.props.session.email, this.props.policy.owner);
-        const data = _.chain(policyMemberList)
-            .map(email => this.props.personalDetails[email])
-            .filter()
-            .sortBy(person => person.displayName.toLowerCase())
-            .map(person => ({...person})) // TODO: here we will add the pendingAction and errors prop
-            .value();
+        const policyMemberList = lodashGet(this.props, 'policyMemberList', {});
+        const removableMembers = [];
+        let data = _.map(policyMemberList, (value, email) => {
+            if (email !== this.props.session.email && email !== this.props.policy.owner) {
+                removableMembers.push(email);
+            }
+            const details = this.props.personalDetails[email];
+            return {
+                ...value,
+                ...details,
+            };
+        });
+        data = _.sortBy(data, value => value.displayName.toLowerCase());
         const policyID = lodashGet(this.props.route, 'params.policyID');
         const policyName = lodashGet(this.props.policy, 'name');
 

src/pages/workspace/withPolicy.js

@@ -8,7 +8,6 @@ import CONST from '../../CONST';
 import getComponentDisplayName from '../../libs/getComponentDisplayName';
 import * as Policy from '../../libs/actions/Policy';
 import ONYXKEYS from '../../ONYXKEYS';
-import policyMemberPropType from '../policyMemberPropType';
 
 /**
  * @param {Object} route
@@ -56,9 +55,6 @@ const policyPropTypes = {
         */
         errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
     }),
-
-    /** The policy member list for the current route */
-    policyMemberList: PropTypes.objectOf(policyMemberPropType),
 };
 
 const policyDefaultProps = {