Display permissions selectors in the playground

src/views/studio/studio-info.jsx

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import {useParams} from 'react-router-dom';
 import {connect} from 'react-redux';
 import Debug from './debug.jsx';
-import {getInfo, getRoles} from '../../redux/studio';
+import {getInfo, getRoles, selectCanEditInfo} from '../../redux/studio';
 
-const StudioInfo = ({username, studio, token, onLoadInfo, onLoadRoles}) => {
+const StudioInfo = ({username, studio, token, canEditInfo, onLoadInfo, onLoadRoles}) => {
     const {studioId} = useParams();
     
     useEffect(() => { // Load studio info after first render
@@ -23,11 +23,16 @@ const StudioInfo = ({username, studio, token, onLoadInfo, onLoadRoles}) => {
                 label="Studio Info"
                 data={studio}
             />
+            <Debug
+                label="Studio Info Permissions"
+                data={{canEditInfo}}
+            />
         </div>
     );
 };
 
 StudioInfo.propTypes = {
+    canEditInfo: PropTypes.bool,
     username: PropTypes.string,
     token: PropTypes.string,
     studio: PropTypes.shape({
@@ -43,7 +48,8 @@ export default connect(
         return {
             studio: state.studio,
             username: user && user.username,
-            token: user && user.token
+            token: user && user.token,
+            canEditInfo: selectCanEditInfo(state)
         };
     },
     dispatch => ({

src/views/studio/studio-projects.jsx

@@ -7,10 +7,11 @@ import {projectFetcher} from './lib/fetchers';
 import {projects} from './lib/redux-modules';
 import Debug from './debug.jsx';
 
-const {actions, selector} = projects;
+const {actions, selector: projectsSelector} = projects;
+import {selectCanAddProjects} from '../../redux/studio';
 
 const StudioProjects = ({
-    items, error, loading, moreToLoad, onLoadMore
+    canAddProjects, items, error, loading, moreToLoad, onLoadMore
 }) => {
     const {studioId} = useParams();
 
@@ -27,6 +28,10 @@ const StudioProjects = ({
                 label="Error"
                 data={error}
             />}
+            <Debug
+                label="Project Permissions"
+                data={{canAddProjects}}
+            />
             <div>
                 {items.map((item, index) =>
                     (<Debug
@@ -48,6 +53,7 @@ const StudioProjects = ({
 };
 
 StudioProjects.propTypes = {
+    canAddProjects: PropTypes.bool,
     items: PropTypes.array, // eslint-disable-line react/forbid-prop-types
     loading: PropTypes.bool,
     error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
@@ -55,7 +61,10 @@ StudioProjects.propTypes = {
     onLoadMore: PropTypes.func
 };
 
-const mapStateToProps = state => selector(state);
+const mapStateToProps = state => ({
+    ...projectsSelector(state),
+    canAddProjects: selectCanAddProjects(state)
+});
 
 const mapDispatchToProps = dispatch => ({
     onLoadMore: (studioId, offset) => dispatch(