From 51858167c91097fd4120efc78ea3374745a20cb7 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@media.mit.edu>
Date: Thu, 10 Jun 2021 19:20:51 -0400
Subject: [PATCH] Display manager limit modal in two scenarios: if the frontend
 already knows that the manager limit has been reached, and if we have the
 promote modal up, but we got response from the server that the manager limit
 has been reached.

---
 src/views/studio/studio-member-tile.jsx | 59 ++++++++++++++++---------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/views/studio/studio-member-tile.jsx b/src/views/studio/studio-member-tile.jsx
index ea56f5a45..ee75655fa 100644
--- a/src/views/studio/studio-member-tile.jsx
+++ b/src/views/studio/studio-member-tile.jsx
@@ -6,15 +6,19 @@ import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 
 import PromoteModal from './modals/promote-modal.jsx';
+import ManagerLimitModal from './modals/manager-limit-modal.jsx';
 
 import {
     selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators
 } from '../../redux/studio-permissions';
 import {
+    Errors,
     promoteCurator,
     removeCurator,
     removeManager
 } from './lib/studio-member-actions';
+
+import {selectStudioHasReachedManagerLimit} from '../../redux/studio';
 import {useAlertContext} from '../../components/alert/alert-context';
 
 import OverflowMenu from '../../components/overflow-menu/overflow-menu.jsx';
@@ -22,11 +26,12 @@ import removeIcon from './icons/remove-icon.svg';
 import promoteIcon from './icons/curator-icon.svg';
 
 const StudioMemberTile = ({
-    canRemove, canPromote, onRemove, onPromote, isCreator, // mapState props
+    canRemove, canPromote, onRemove, onPromote, isCreator, hasReachedManagerLimit, // mapState props
     username, image // own props
 }) => {
     const [submitting, setSubmitting] = useState(false);
     const [modalOpen, setModalOpen] = useState(false);
+    const [managerLimitReached, setManagerLimitReached] = useState(false);
     const {errorAlert, successAlert} = useAlertContext();
     const userUrl = `/users/${username}`;
     return (
@@ -80,25 +85,35 @@ const StudioMemberTile = ({
                 </OverflowMenu>
             }
             {modalOpen &&
-                <PromoteModal
-                    handleClose={() => setModalOpen(false)}
-                    handlePromote={() => {
-                        onPromote(username)
-                            .then(() => {
-                                successAlert({
-                                    id: 'studio.alertManagerPromote',
-                                    values: {name: username}
+                ((hasReachedManagerLimit || managerLimitReached) ?
+                    <ManagerLimitModal
+                        handleClose={() => setModalOpen(false)}
+                    /> :
+                    <PromoteModal
+                        handleClose={() => setModalOpen(false)}
+                        handlePromote={() => {
+                            onPromote(username)
+                                .then(() => {
+                                    successAlert({
+                                        id: 'studio.alertManagerPromote',
+                                        values: {name: username}
+                                    });
+                                })
+                                .catch(error => {
+                                    if (error === Errors.MANAGER_LIMIT) {
+                                        setManagerLimitReached(true);
+                                        setModalOpen(true);
+                                    } else {
+                                        errorAlert({
+                                            id: 'studio.alertManagerPromoteError',
+                                            values: {name: username}
+                                        });
+                                    }
                                 });
-                            })
-                            .catch(() => {
-                                errorAlert({
-                                    id: 'studio.alertManagerPromoteError',
-                                    values: {name: username}
-                                });
-                            });
-                    }}
-                    username={username}
-                />
+                        }}
+                        username={username}
+                    />
+                )
             }
         </div>
     );
@@ -111,7 +126,8 @@ StudioMemberTile.propTypes = {
     onPromote: PropTypes.func,
     username: PropTypes.string,
     image: PropTypes.string,
-    isCreator: PropTypes.bool
+    isCreator: PropTypes.bool,
+    hasReachedManagerLimit: PropTypes.bool
 };
 
 const ManagerTile = connect(
@@ -128,7 +144,8 @@ const ManagerTile = connect(
 const CuratorTile = connect(
     (state, ownProps) => ({
         canRemove: selectCanRemoveCurator(state, ownProps.username),
-        canPromote: selectCanPromoteCurators(state)
+        canPromote: selectCanPromoteCurators(state),
+        hasReachedManagerLimit: selectStudioHasReachedManagerLimit(state)
     }),
     {
         onRemove: removeCurator,