Display info to managers/studio creator about how close the studio is to...

Display info to managers/studio creator about how close the studio is to reaching the manager limit when over a threshold. Display info about removing managers when a studio has reached the limit.

src/views/studio/l10n.json

@@ -68,6 +68,11 @@
     "studio.managerLimitReachedHeader": "This studio has reached the limit of {managerLimit} managers.",
     "studio.managerLimitMessageCollaborative": "It’s great to see that this studio is collaborative!",
     "studio.managerLimitMessageRemoveManagers": "Before you can add another manager, you will need to remove an existing manager.",
+
+    "studio.managerCountInfo": "{numberOfManagers} of {managerLimit}",
+    "studio.managerThresholdInfo": "This studio has {numberOfManagers} managers. Studios can have a maximum of {managerLimit} managers.",
+    "studio.managerThresholdRemoveManagers": "Before you can add another manager, you will need to remove managers until there are fewer than {managerLimit}.",
+
     "studio.remove": "Remove",
     "studio.promote": "Promote",
     "studio.cancel": "Cancel",

src/views/studio/studio-info-box.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import Button from '../../components/forms/button.jsx';
+
+const StudioInfoBox = ({showInfoBox, onClose, ...props}) => {
+    if (!showInfoBox) return null;
+
+    return (
+        <div className="studio-invitation studio-info-box"> {/* TODO move more styling into studio-info-box? */}
+            {props.children}
+            <Button
+                className="studio-info-close-button"
+                isCloseType
+                onClick={onClose}
+            />
+        </div>
+    );
+};
+
+StudioInfoBox.propTypes = {
+    showInfoBox: PropTypes.bool,
+    onClose: PropTypes.func,
+    children: PropTypes.node
+};
+
+const mapStateToProps = () => ({});
+
+const mapDispatchToProps = () => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(StudioInfoBox);

src/views/studio/studio-managers.jsx

-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
 import classNames from 'classnames';
 
 import {managers} from './lib/redux-modules';
+import {
+    STUDIO_MANAGER_LIMIT,
+    selectStudioManagerCount,
+    selectStudioHasReachedManagerLimit,
+    selectStudioHasReachedManagerThreshold
+} from '../../redux/studio.js';
 import {loadManagers} from './lib/studio-member-actions';
 import Debug from './debug.jsx';
 import {ManagerTile} from './studio-member-tile.jsx';
+import StudioInfoBox from './studio-info-box.jsx';
 import AlertProvider from '../../components/alert/alert-provider.jsx';
 import Alert from '../../components/alert/alert.jsx';
+import {
+    selectCanRemoveManager, selectCanPromoteCurators
+} from '../../redux/studio-permissions';
 
 
-const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
+const StudioManagers = ({
+    canPromoteCurators,
+    canRemoveManagers,
+    managerCount,
+    hasReachedManagerLimit,
+    hasReachedManagerThreshold,
+    items,
+    error,
+    loading,
+    moreToLoad,
+    onLoadMore
+}) => {
     useEffect(() => {
         if (items.length === 0) onLoadMore();
     }, []);
 
+    const [infoBoxDismissed, setInfoBoxDismissed] = useState(false);
+
+    const showManagerLimitInfoBox =
+        !infoBoxDismissed && canPromoteCurators &&
+        canRemoveManagers && hasReachedManagerLimit;
+
     return (
         <AlertProvider>
             <div className="studio-members">
                 <Alert className="studio-alert" />
-                <div className="studio-header-container">
+                <StudioInfoBox
+                    showInfoBox={showManagerLimitInfoBox}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClose={() => setInfoBoxDismissed(true)}
+                >
+                    <div className="manager-threshold-message">
+                        <span className="manager-threshold-info">
+                            <FormattedMessage
+                                id="studio.managerThresholdInfo"
+                                values={{
+                                    numberOfManagers: managerCount,
+                                    managerLimit: STUDIO_MANAGER_LIMIT
+                                }}
+                            />
+                        </span>
+                        <FormattedMessage
+                            id="studio.managerThresholdRemoveManagers"
+                            values={{
+                                managerLimit: STUDIO_MANAGER_LIMIT
+                            }} 
+                        />
+                    </div>
+                </StudioInfoBox>
+                <div className="studio-header-container studio-managers-header">
                     <h2><FormattedMessage id="studio.managersHeader" /></h2>
+                    {canPromoteCurators && canRemoveManagers && hasReachedManagerThreshold &&
+                        <div className="studio-manager-count">
+                            <FormattedMessage
+                                id="studio.managerCountInfo"
+                                values={{
+                                    numberOfManagers: managerCount,
+                                    managerLimit: STUDIO_MANAGER_LIMIT
+                                }}
+                            />
+                        </div>
+                    }
                 </div>
                 {error && <Debug
                     label="Error"
@@ -56,6 +117,11 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
 };
 
 StudioManagers.propTypes = {
+    canPromoteCurators: PropTypes.bool,
+    canRemoveManagers: PropTypes.bool,
+    managerCount: PropTypes.number,
+    hasReachedManagerLimit: PropTypes.bool,
+    hasReachedManagerThreshold: PropTypes.bool,
     items: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.id,
         username: PropTypes.string,
@@ -72,7 +138,14 @@ StudioManagers.propTypes = {
 };
 
 export default connect(
-    state => managers.selector(state),
+    state => ({
+        canPromoteCurators: selectCanPromoteCurators(state),
+        canRemoveManagers: selectCanRemoveManager(state),
+        managerCount: selectStudioManagerCount(state),
+        hasReachedManagerLimit: selectStudioHasReachedManagerLimit(state),
+        hasReachedManagerThreshold: selectStudioHasReachedManagerThreshold(state),
+        ...managers.selector(state)
+    }),
     {
         onLoadMore: loadManagers
     }

src/views/studio/studio.scss

@@ -187,6 +187,32 @@ $radius: 8px;
     position: relative;
 }
 
+.studio-manager-count {
+    margin-left: 1.5rem;
+    width: 4.875rem;
+    height: 2rem;
+
+    border: 1px solid $ui-blue;
+    border-radius: 1rem;
+    
+    font-weight: bold;
+    color: $ui-blue;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.manager-threshold-message {
+    display: flex;
+    flex-direction: column;
+
+    .manager-threshold-info {
+        font-weight: bold;
+    }
+}
+
 .studio-projects-grid {
     margin-top: 20px;
     display: grid;
@@ -421,6 +447,10 @@ $radius: 8px;
     }
 }
 
+.studio-managers-header {
+    justify-content: flex-start;
+}
+
 .studio-compose-container {
     padding-top: 8px;
 }
@@ -459,9 +489,9 @@ $radius: 8px;
     box-sizing: border-box;
     min-height: 85px; /* So the box doesn't change height after being accepted */
 
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
 
     @media #{$intermediate-and-smaller} {
         flex-direction: column;
@@ -473,6 +503,10 @@ $radius: 8px;
 }
 
 .studio-info-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
     border-radius: 4px;
     background: $ui-blue-10percent;
     border: 1px solid $ui-blue-25percent;
@@ -485,6 +519,10 @@ $radius: 8px;
         background: #FFF0DF;
         border: 1px solid $ui-dark-orange;
     }
+
+    .studio-info-close-button {
+        position: unset;
+    }
 }
 
 .studio-thumb-edit-button {