fix permissions and correctly select host when admins transfer

src/redux/studio-permissions.js

@@ -54,10 +54,17 @@ const selectCanRemoveManager = (state, managerId) =>
     !selectIsMuted(state) && (selectIsAdmin(state) || isManager(state)) && managerId !== state.studio.owner;
 const selectCanPromoteCurators = state => !selectIsMuted(state) && isManager(state);
 
-const selectCanTransfer = (state, managerId) =>
-    state.managers && state.managers.items && state.managers.items.length > 1 && // there is more than one manager
-    managerId === state.studio.owner && // and the selected manager is the owner
-    (isCreator(state) || selectIsAdmin(state)); // and the current user is the owner or an admin
+const selectCanTransfer = (state, managerId) => {
+    // Classroom studios are not transferable by educators, only by admins
+    if (state.studio.classroomId !== null) return false; // (classroomId state is only set for educators)
+    if (state.studio.managers > 1) { // If there is more than one manager,
+        if (managerId === state.studio.owner) { // and the selected manager is the owner/host,
+            if (isCreator(state)) return true; // Owner/host can transfer
+            if (selectIsAdmin(state)) return true; // Admin can transfer
+        }
+    }
+    return false;
+};
 
 const selectCanRemoveProject = (state, creatorUsername, actorId) => {
     if (selectIsMuted(state)) return false;

src/views/studio/modals/transfer-host-confirmation.jsx

@@ -8,7 +8,6 @@ import ModalInnerContent from '../../../components/modal/base/modal-inner-conten
 import TransferHostTile from './transfer-host-tile.jsx';
 import Form from '../../../components/forms/form.jsx';
 
-import {selectUserId} from '../../../redux/session';
 import {managers} from '../lib/redux-modules';
 import {loadManagers} from '../lib/studio-member-actions';
 
@@ -18,11 +17,11 @@ const TransferHostConfirmation = ({
     handleBack,
     handleTransfer,
     items,
-    userId,
+    hostId,
     selectedId
 }) => {
-    const currentHostUsername = items.find(item => item.id === userId).username;
-    const currentHostImage = items.find(item => item.id === userId).profile.images['90x90'];
+    const currentHostUsername = items.find(item => item.id === hostId).username;
+    const currentHostImage = items.find(item => item.id === hostId).profile.images['90x90'];
     const newHostUsername = items.find(item => item.id === selectedId).username;
     const newHostImage = items.find(item => item.id === selectedId).profile.images['90x90'];
     const [passwordInputValue, setPasswordInputValue] = useState('');
@@ -41,8 +40,8 @@ const TransferHostConfirmation = ({
                     </div>
                     <TransferHostTile
                         className="transfer-outcome-tile"
-                        key={userId}
-                        id={userId}
+                        key={hostId}
+                        id={hostId}
                         image={currentHostImage}
                         username={currentHostUsername}
                         isCreator={false}
@@ -127,12 +126,12 @@ TransferHostConfirmation.propTypes = {
         })
     })),
     selectedId: PropTypes.number,
-    userId: PropTypes.number
+    hostId: PropTypes.number
 };
 
 export default connect(
     state => ({
-        userId: selectUserId(state),
+        hostId: state.studio.owner,
         ...managers.selector(state)
     }),
     {

src/views/studio/modals/transfer-host-selection.jsx

@@ -7,7 +7,6 @@ import ModalInnerContent from '../../../components/modal/base/modal-inner-conten
 
 import TransferHostTile from './transfer-host-tile.jsx';
 
-import {selectUserId} from '../../../redux/session';
 import {managers} from '../lib/redux-modules';
 import {loadManagers} from '../lib/studio-member-actions';
 
@@ -19,7 +18,7 @@ const TransferHostSelection = ({
     handleBack,
     onLoadMore,
     items,
-    userId,
+    hostId,
     selectedId
 }) => {
     useEffect(() => {
@@ -35,18 +34,17 @@ const TransferHostSelection = ({
             </div>
             <div className="transfer-selection-scroll-pane">
                 <div className="transfer-host-grid">
-                    {items.map(item =>
-                        userId !== item.id &&
-                                (<TransferHostTile
-                                    key={item.username}
-                                    // eslint-disable-next-line react/jsx-no-bind
-                                    handleSelected={() => handleSelected(item.id)}
-                                    id={item.id}
-                                    username={item.username}
-                                    image={item.profile.images['90x90']}
-                                    isCreator={false}
-                                    selected={item.id === selectedId}
-                                />)
+                    {items.filter(item => hostId !== item.id).map(item =>
+                        (<TransferHostTile
+                            key={item.username}
+                            // eslint-disable-next-line react/jsx-no-bind
+                            handleSelected={() => handleSelected(item.id)}
+                            id={item.id}
+                            username={item.username}
+                            image={item.profile.images['90x90']}
+                            isCreator={false}
+                            selected={item.id === selectedId}
+                        />)
                     )}
                     {/* {moreToLoad &&
                         <div className="studio-grid-load-more">
@@ -99,12 +97,12 @@ TransferHostSelection.propTypes = {
     // moreToLoad: PropTypes.bool,
     onLoadMore: PropTypes.func,
     selectedId: PropTypes.number,
-    userId: PropTypes.number
+    hostId: PropTypes.number
 };
 
 export default connect(
     state => ({
-        userId: selectUserId(state),
+        hostId: state.studio.owner,
         ...managers.selector(state)
     }),
     {