Merge branch 'develop' of https://github.com/LLK/scratch-www into activity-feed-styles

# Conflicts:
#	src/views/studio/l10n.json
#	src/views/studio/studio.scss

.circleci/config.yml

@@ -118,6 +118,9 @@ aliases:
     <<: *defaults
     steps:
       - checkout
+      - run:
+          name: "setup"
+          command: npm --production=false ci
       - run:
           name: "run i18n script"
           command: npm run i18n:push

package.json

@@ -126,7 +126,7 @@
     "redux-mock-store": "^1.2.3",
     "redux-thunk": "2.0.1",
     "sass-loader": "6.0.6",
-    "scratch-gui": "0.1.0-prerelease.20210504042834",
+    "scratch-gui": "0.1.0-prerelease.20210509040505",
     "scratch-l10n": "latest",
     "selenium-webdriver": "3.6.0",
     "slick-carousel": "1.6.0",

src/l10n.json

@@ -248,6 +248,7 @@
     "thumbnail.by": "by",
     "report.error": "Something went wrong when trying to send your message. Please try again.",
     "report.project": "Report Project",
+    "report.studio": "Report Studio",
     "report.projectInstructions": "When you send a report, it lets the Scratch Team know about projects that break the {CommunityGuidelinesLink}. Does something in this project break the {CommunityGuidelinesLink}? If you think it does, please tell us more.",
     "report.CommunityGuidelinesLinkText": "Scratch Community Guidelines",
     "report.reasonPlaceHolder": "Select a reason",

src/redux/session.js

@@ -12,7 +12,7 @@ const Types = keyMirror({
     SET_STATUS: null
 });
 
-const banWhitelistPaths = [
+const banGoodListPaths = [
     '/accounts/banned-response',
     '/community_guidelines',
     '/privacy_policy',
@@ -68,7 +68,7 @@ const handleSessionResponse = (dispatch, body) => {
     if (
         body.user &&
         body.user.banned &&
-        banWhitelistPaths.indexOf(window.location.pathname) === -1
+        banGoodListPaths.every(goodPath => window.location.pathname.indexOf(goodPath) === -1)
     ) {
         window.location = '/accounts/banned-response/';
         return;

src/redux/studio-permissions.js

-const {selectUserId, selectIsAdmin, selectIsSocial, selectIsLoggedIn} = require('./session');
+const {selectUserId, selectIsAdmin, selectIsSocial, selectIsLoggedIn, selectUsername} = require('./session');
 
 // Fine-grain selector helpers - not exported, use the higher level selectors below
 const isCreator = state => selectUserId(state) === state.studio.owner;
@@ -29,6 +29,27 @@ const selectCanFollowStudio = state => selectIsLoggedIn(state);
 const selectCanEditCommentsAllowed = state => selectIsAdmin(state) || isCreator(state);
 const selectCanEditOpenToAll = state => isManager(state);
 
+const selectShowCuratorInvite = state => !!state.studio.invited;
+const selectCanInviteCurators = state => isManager(state);
+const selectCanRemoveCurators = state => isManager(state) || selectIsAdmin(state);
+const selectCanRemoveManager = (state, managerId) =>
+    (selectIsAdmin(state) || isManager(state)) && managerId !== state.studio.owner;
+const selectCanPromoteCurators = state => isManager(state);
+
+const selectCanRemoveProject = (state, creatorUsername, actorId) => {
+    // Admins/managers can remove any projects
+    if (isManager(state) || selectIsAdmin(state)) return true;
+    // Project owners can always remove their projects
+    if (selectUsername(state) === creatorUsername) {
+        return true;
+    }
+    // Curators can remove projects they added
+    if (isCurator(state)) {
+        return selectUserId(state) === actorId;
+    }
+    return false;
+};
+
 export {
     selectCanEditInfo,
     selectCanAddProjects,
@@ -39,5 +60,11 @@ export {
     selectCanReportComment,
     selectCanRestoreComment,
     selectCanEditCommentsAllowed,
-    selectCanEditOpenToAll
+    selectCanEditOpenToAll,
+    selectShowCuratorInvite,
+    selectCanInviteCurators,
+    selectCanRemoveCurators,
+    selectCanRemoveManager,
+    selectCanPromoteCurators,
+    selectCanRemoveProject
 };

src/redux/studio-report.js

+const keyMirror = require('keymirror');
+
+const api = require('../lib/api');
+const {selectIsLoggedIn} = require('./session');
+const {selectStudioId} = require('./studio');
+
+const Actions = keyMirror({
+    OPEN_STUDIO_REPORT: null,
+    CLOSE_STUDIO_REPORT: null,
+    SET_STUDIO_REPORT_STATUS: null,
+    SET_STUDIO_REPORT_FIELD: null
+});
+
+const Status = keyMirror({
+    IDLE: null,
+    SUBMITTING: null,
+    SUBMITTED: null
+});
+
+const Fields = {
+    TITLE: 'title',
+    DESCRIPTION: 'description',
+    THUMBNAIL: 'thumbnail'
+};
+
+const Errors = keyMirror({
+    GENERIC: null
+});
+
+const getInitialState = () => ({
+    status: Status.IDLE,
+    field: Fields.TITLE,
+    error: null,
+    isOpen: false
+});
+
+const studioReportReducer = (state, action) => {
+    if (typeof state === 'undefined') {
+        state = getInitialState();
+    }
+
+    switch (action.type) {
+    case Actions.OPEN_STUDIO_REPORT:
+        return {
+            ...state,
+            isOpen: true
+        };
+    case Actions.CLOSE_STUDIO_REPORT:
+        return {
+            ...state, // Leaves the submitted status to prevent double submission
+            isOpen: false
+        };
+    case Actions.SET_STUDIO_REPORT_STATUS:
+        return {
+            ...state,
+            status: action.status,
+            error: typeof action.error === 'undefined' ? null : action.error
+        };
+    case Actions.SET_STUDIO_REPORT_FIELD:
+        return {
+            ...state,
+            field: action.field
+        };
+    default:
+        return state;
+    }
+};
+
+// Selectors
+const selectStudioReportField = state => state.studioReport.field;
+const selectStudioReportOpen = state => state.studioReport.isOpen;
+const selectStudioReportSubmitting = state => state.studioReport.status === Status.SUBMITTING;
+const selectStudioReportSubmitted = state => state.studioReport.status === Status.SUBMITTED;
+const selectStudioReportError = state => state.studioReport.error;
+const selectCanReportStudio = state => !!selectIsLoggedIn(state); // TODO selectIsLoggedIn isn't returning bool?
+
+// Action Creators
+const setReportStatus = (status, error) => ({
+    type: Actions.SET_STUDIO_REPORT_STATUS,
+    status,
+    error
+});
+
+const openStudioReport = () => ({
+    type: Actions.OPEN_STUDIO_REPORT
+});
+
+const closeStudioReport = () => ({
+    type: Actions.CLOSE_STUDIO_REPORT
+});
+
+const setStudioReportField = field => ({
+    type: Actions.SET_STUDIO_REPORT_FIELD,
+    field
+});
+
+const submitStudioReport = () => ((dispatch, getState) => {
+    dispatch(setReportStatus(Status.SUBMITTING));
+    const studioId = selectStudioId(getState());
+    const field = selectStudioReportField(getState());
+    api({
+        host: '',
+        uri: `/site-api/galleries/all/${studioId}/report/`,
+        method: 'POST',
+        useCsrf: true,
+        formData: {
+            selected_field: field
+        }
+    }, (err, body, res) => {
+        if (err || (body && body.success === false) || res.statusCode !== 200) {
+            dispatch(setReportStatus(Status.IDLE, Errors.GENERIC));
+            return;
+        }
+        dispatch(setReportStatus(Status.SUBMITTED));
+    });
+});
+
+module.exports = {
+    Errors,
+    Fields,
+    getInitialState,
+    studioReportReducer,
+    actions: {
+        openStudioReport,
+        closeStudioReport,
+        setStudioReportField,
+        submitStudioReport
+    },
+    selectors: {
+        selectStudioReportField,
+        selectStudioReportOpen,
+        selectCanReportStudio,
+        selectStudioReportSubmitting,
+        selectStudioReportSubmitted,
+        selectStudioReportError
+    }
+};

src/redux/studio.js

@@ -148,6 +148,7 @@ module.exports = {
     getInfo,
     getRoles,
     setInfo,
+    setRoles,
 
     // Selectors
     selectStudioId,

src/views/join/join.jsx

@@ -2,8 +2,6 @@ const React = require('react');
 const render = require('../../lib/render.jsx');
 const Scratch3Registration = require('../../components/registration/scratch3-registration.jsx');
 const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx');
-// Require this even though we don't use it because, without it, webpack runs out of memory...
-const Page = require('../../components/page/www/page.jsx'); // eslint-disable-line no-unused-vars
 
 const initSentry = require('../../lib/sentry.js');
 initSentry();

src/views/studio/l10n.json

 {
+    "studio.tabNavProjects": "Projects",
+    "studio.tabNavCurators": "Curators",
+    "studio.tabNavComments": "Comments",
+    "studio.tabNavActivity": "Activity",
+
+    "studio.title": "Title",
+    "studio.description": "Description",
+    "studio.thumbnail": "Thumbnail",
+
+    "studio.projectsHeader": "Projects",
+    "studio.addProjectsHeader": "Add Projects",
+    "studio.addProject": "Add",
+
+    "studio.creatorRole": "Studio Creator",
+
+    "studio.managersHeader": "Managers",
+    
+    "studio.unfollowStudio": "Unfollow Studio",
+    "studio.followStudio": "Follow Studio",
+
+    "studio.curatorsHeader": "Curators",
+    "studio.inviteCuratorsHeader": "Invite Curators",
+    "studio.inviteCurator": "Invite",
+    "studio.curatorAcceptInvite": "Accept Invite",
+
+    "studio.commentsHeader": "Comments"
+
     "studio.activityAddProjectToStudio": "{profileLink} added the project {projectLink}",
     "studio.activityRemoveProjectStudio": "{profileLink} removed the project {projectLink}",
     "studio.activityUpdateStudio": "{profileLink} made edits to the title, thumbnail, or description",

src/views/studio/lib/fetchers.js

-const ITEM_LIMIT = 4;
-
-const projectFetcher = (studioId, offset) =>
-    fetch(`${process.env.API_HOST}/studios/${studioId}/projects?limit=${ITEM_LIMIT}&offset=${offset}`)
-        .then(response => response.json())
-        .then(data => ({items: data, moreToLoad: data.length === ITEM_LIMIT}));
-
-const curatorFetcher = (studioId, offset) =>
-    fetch(`${process.env.API_HOST}/studios/${studioId}/curators?limit=${ITEM_LIMIT}&offset=${offset}`)
-        .then(response => response.json())
-        .then(data => ({items: data, moreToLoad: data.length === ITEM_LIMIT}));
-
-const managerFetcher = (studioId, offset) =>
-    fetch(`${process.env.API_HOST}/studios/${studioId}/managers?limit=${ITEM_LIMIT}&offset=${offset}`)
-        .then(response => response.json())
-        .then(data => ({items: data, moreToLoad: data.length === ITEM_LIMIT}));
-
+// TODO move this to studio-activity-actions, include pagination
 const activityFetcher = studioId =>
     fetch(`${process.env.API_HOST}/studios/${studioId}/activity`)
         .then(response => response.json())
         .then(data => ({items: data, moreToLoad: false})); // No pagination on the activity feed
 
 export {
-    activityFetcher,
-    projectFetcher,
-    curatorFetcher,
-    managerFetcher
+    activityFetcher
 };

src/views/studio/lib/studio-member-actions.js

+import keyMirror from 'keymirror';
+
+import api from '../../../lib/api';
+import {curators, managers} from './redux-modules';
+import {selectUsername} from '../../../redux/session';
+import {selectStudioId, setRoles} from '../../../redux/studio';
+
+const Errors = keyMirror({
+    NETWORK: null,
+    SERVER: null,
+    PERMISSION: null
+});
+
+const normalizeError = (err, body, res) => {
+    if (err) return Errors.NETWORK;
+    if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION;
+    if (res.statusCode !== 200) return Errors.SERVER;
+    return null;
+};
+
+const loadManagers = () => ((dispatch, getState) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    const managerCount = managers.selector(state).items.length;
+    const managersPerPage = 20;
+    api({
+        uri: `/studios/${studioId}/managers/`,
+        params: {limit: managersPerPage, offset: managerCount}
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return dispatch(managers.actions.error(error));
+        dispatch(managers.actions.append(body, body.length === managersPerPage));
+    });
+});
+
+const loadCurators = () => ((dispatch, getState) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    const curatorCount = curators.selector(state).items.length;
+    const curatorsPerPage = 20;
+    api({
+        uri: `/studios/${studioId}/curators/`,
+        params: {limit: curatorsPerPage, offset: curatorCount}
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return dispatch(curators.actions.error(error));
+        dispatch(curators.actions.append(body, body.length === curatorsPerPage));
+    });
+});
+
+const removeManager = username => ((dispatch, getState) => new Promise((resolve, reject) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    api({
+        uri: `/site-api/users/curators-in/${studioId}/remove/`,
+        method: 'PUT',
+        withCredentials: true,
+        useCsrf: true,
+        params: {usernames: username}, // sic, ?usernames=<username>
+        host: '' // Not handled by the API, use existing infrastructure
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return reject(error);
+
+        // Note `body` is undefined, this endpoint returns an html fragment
+        const index = managers.selector(getState()).items
+            .findIndex(v => v.username === username);
+        if (index !== -1) dispatch(managers.actions.remove(index));
+        // If you are removing yourself, update roles so you stop seeing the manager UI
+        if (selectUsername(state) === username) {
+            dispatch(setRoles({manager: false}));
+        }
+        return resolve();
+    });
+}));
+
+const removeCurator = username => ((dispatch, getState) => new Promise((resolve, reject) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    api({
+        uri: `/site-api/users/curators-in/${studioId}/remove/`,
+        method: 'PUT',
+        withCredentials: true,
+        useCsrf: true,
+        params: {usernames: username}, // sic, ?usernames=<username>
+        host: '' // Not handled by the API, use existing infrastructure
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return reject(error);
+
+        // Note `body` is undefined, this endpoint returns an html fragment
+        const index = curators.selector(getState()).items
+            .findIndex(v => v.username === username);
+        if (index !== -1) dispatch(curators.actions.remove(index));
+        return resolve();
+    });
+}));
+
+const inviteCurator = username => ((dispatch, getState) => new Promise((resolve, reject) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    api({
+        uri: `/site-api/users/curators-in/${studioId}/invite_curator/`,
+        method: 'PUT',
+        withCredentials: true,
+        useCsrf: true,
+        params: {usernames: username}, // sic, ?usernames=<username>
+        host: '' // Not handled by the API, use existing infrastructure
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return reject(error);
+        // eslint-disable-next-line no-alert
+        alert(`successfully invited ${username}`);
+        return resolve(username);
+    });
+}));
+
+const promoteCurator = username => ((dispatch, getState) => new Promise((resolve, reject) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    api({
+        uri: `/site-api/users/curators-in/${studioId}/promote/`,
+        method: 'PUT',
+        withCredentials: true,
+        useCsrf: true,
+        params: {usernames: username}, // sic, ?usernames=<username>
+        host: '' // Not handled by the API, use existing infrastructure
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return reject(error);
+        const curatorList = curators.selector(getState()).items;
+        const index = curatorList.findIndex(v => v.username === username);
+        const curatorItem = curatorList[index];
+        if (index !== -1) dispatch(curators.actions.remove(index));
+        dispatch(managers.actions.create(curatorItem));
+        return resolve();
+    });
+}));
+
+const acceptInvitation = () => ((dispatch, getState) => new Promise((resolve, reject) => {
+    const state = getState();
+    const username = selectUsername(state);
+    const studioId = selectStudioId(state);
+    api({
+        uri: `/site-api/users/curators-in/${studioId}/add/`,
+        method: 'PUT',
+        withCredentials: true,
+        useCsrf: true,
+        params: {usernames: username}, // sic, ?usernames=<username>
+        host: '' // Not handled by the API, use existing infrastructure
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return reject(error);
+        api({uri: `/users/${username}`}, (userErr, userBody, userRes) => {
+            const userError = normalizeError(userErr, userBody, userRes);
+            if (userError) return reject(userError);
+            // Note: this assumes that the user items from the curator endpoint
+            // are the same structure as the single user data returned from /users/:username
+            dispatch(curators.actions.create(userBody));
+            dispatch(setRoles({invited: false, curator: true}));
+            return resolve();
+        });
+    });
+}));
+
+export {
+    Errors,
+    loadManagers,
+    loadCurators,
+    inviteCurator,
+    acceptInvitation,
+    promoteCurator,
+    removeCurator,
+    removeManager
+};

src/views/studio/lib/studio-project-actions.js

+import keyMirror from 'keymirror';
+import api from '../../../lib/api';
+
+import {selectToken} from '../../../redux/session';
+import {selectStudioId} from '../../../redux/studio';
+
+import {projects} from './redux-modules';
+
+const Errors = keyMirror({
+    NETWORK: null,
+    SERVER: null,
+    PERMISSION: null
+});
+
+const normalizeError = (err, body, res) => {
+    if (err) return Errors.NETWORK;
+    if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION;
+    if (res.statusCode !== 200) return Errors.SERVER;
+    return null;
+};
+
+const loadProjects = () => ((dispatch, getState) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    const projectCount = projects.selector(state).items.length;
+    const projectsPerPage = 20;
+    api({
+        uri: `/studios/${studioId}/projects/`,
+        params: {limit: projectsPerPage, offset: projectCount}
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return dispatch(projects.actions.error(error));
+        dispatch(projects.actions.append(body, body.length === projectsPerPage));
+    });
+});
+
+/**
+ * Generate a project list item matching the shape of the initial
+ * project list request. The POST request that adds projects would
+ * ideally respond with this format directly. For now, merge data
+ * from the POST and a follow-up GET request for additional project data.
+ *
+ * @param {object} postBody - body of response to POST that adds the project
+ * @param {object} infoBody - body of the follow-up GET for more project data.
+ * @returns {object} project list item
+ */
+const generateProjectListItem = (postBody, infoBody) => ({
+    // Fields from the POST to add the project to the studio
+    id: postBody.projectId,
+    actor_id: postBody.actorId,
+    // Fields from followup GET for more project info
+    title: infoBody.title,
+    image: infoBody.image,
+    creator_id: infoBody.author.id,
+    username: infoBody.author.username,
+    avatar: infoBody.author.profile.images
+});
+                        
+const addProject = projectId => ((dispatch, getState) => new Promise((resolve, reject) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    const token = selectToken(state);
+    api({
+        uri: `/studios/${studioId}/project/${projectId}`,
+        method: 'POST',
+        authentication: token
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return reject(error);
+
+        // Would prefer if the POST returned the exact data / format we want...
+        api({uri: `/projects/${projectId}`}, (infoErr, infoBody, infoRes) => {
+            const infoError = normalizeError(infoErr, infoBody, infoRes);
+            if (infoError) return reject(infoError);
+            const newItem = generateProjectListItem(body, infoBody);
+            dispatch(projects.actions.create(newItem));
+            return resolve(newItem);
+        });
+    });
+}));
+
+const removeProject = projectId => ((dispatch, getState) => new Promise((resolve, reject) => {
+    const state = getState();
+    const studioId = selectStudioId(state);
+    const token = selectToken(state);
+    api({
+        uri: `/studios/${studioId}/project/${projectId}`,
+        method: 'DELETE',
+        authentication: token
+    }, (err, body, res) => {
+        const error = normalizeError(err, body, res);
+        if (error) return reject(error);
+        const index = projects.selector(getState()).items
+            .findIndex(v => v.id === projectId);
+        if (index !== -1) dispatch(projects.actions.remove(index));
+        return resolve();
+    });
+}));
+
+export {
+    Errors,
+    loadProjects,
+    addProject,
+    removeProject
+};

src/views/studio/studio-comments.jsx

@@ -56,7 +56,7 @@ const StudioComments = ({
 
     return (
         <div>
-            <h2>Comments</h2>
+            <h2><FormattedMessage id="studio.commentsHeader" /></h2>
             {canEditCommentsAllowed && <StudioCommentsAllowed />}
             <div>
                 {shouldShowCommentComposer && commentsAllowed &&

src/views/studio/studio-curator-invite.jsx

+/* eslint-disable react/jsx-no-bind */
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+
+import {acceptInvitation} from './lib/studio-member-actions';
+
+const StudioCuratorInvite = ({onSubmit}) => {
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+
+    return (
+        <div>
+            <button
+                className={classNames('button', {
+                    'mod-mutating': submitting
+                })}
+                disabled={submitting}
+                onClick={() => {
+                    setSubmitting(true);
+                    setError(null);
+                    onSubmit()
+                        .catch(e => {
+                            setError(e);
+                            setSubmitting(false);
+                        });
+                }}
+            ><FormattedMessage id="studio.curatorAcceptInvite" /></button>
+            {error && <div>{error}</div>}
+        </div>
+    );
+};
+
+StudioCuratorInvite.propTypes = {
+    onSubmit: PropTypes.func
+};
+
+const mapStateToProps = () => ({});
+
+const mapDispatchToProps = ({
+    onSubmit: acceptInvitation
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(StudioCuratorInvite);

src/views/studio/studio-curator-inviter.jsx

+/* eslint-disable react/jsx-no-bind */
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+
+import {inviteCurator} from './lib/studio-member-actions';
+
+const StudioCuratorInviter = ({onSubmit}) => {
+    const [value, setValue] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+
+    return (
+        <div className="studio-adder-section">
+            <h3><FormattedMessage id="studio.inviteCuratorsHeader" /></h3>
+            <input
+                disabled={submitting}
+                type="text"
+                placeholder="<username>"
+                value={value}
+                onChange={e => setValue(e.target.value)}
+            />
+            <button
+                className={classNames('button', {
+                    'mod-mutating': submitting
+                })}
+                disabled={submitting}
+                onClick={() => {
+                    setSubmitting(true);
+                    setError(null);
+                    onSubmit(value)
+                        .then(() => setValue(''))
+                        .catch(e => setError(e))
+                        .then(() => setSubmitting(false));
+                }}
+            ><FormattedMessage id="studio.inviteCurator" /></button>
+            {error && <div>{error}</div>}
+        </div>
+    );
+};
+
+StudioCuratorInviter.propTypes = {
+    onSubmit: PropTypes.func
+};
+
+const mapStateToProps = () => ({});
+
+const mapDispatchToProps = ({
+    onSubmit: inviteCurator
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(StudioCuratorInviter);

src/views/studio/studio-curators.jsx

-import React, {useEffect, useCallback} from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {useParams} from 'react-router-dom';
 import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
 
-import {curators, managers} from './lib/redux-modules';
-import {curatorFetcher, managerFetcher} from './lib/fetchers';
+import {curators} from './lib/redux-modules';
 import Debug from './debug.jsx';
+import {CuratorTile} from './studio-member-tile.jsx';
+import CuratorInviter from './studio-curator-inviter.jsx';
+import CuratorInvite from './studio-curator-invite.jsx';
+import {loadCurators} from './lib/studio-member-actions';
+import {selectCanInviteCurators, selectShowCuratorInvite} from '../../redux/studio-permissions';
 
-const StudioCurators = () => {
-    const {studioId} = useParams();
-    return (
-        <div>
-            <h3>Managers</h3>
-            <ManagerList studioId={studioId} />
-            <hr />
-            <h3>Curators</h3>
-            <CuratorList studioId={studioId} />
-        </div>
-    );
-};
-
-const MemberList = ({studioId, items, error, loading, moreToLoad, onLoadMore}) => {
+const StudioCurators = ({
+    canInviteCurators, showCuratorInvite, items, error, loading, moreToLoad, onLoadMore
+}) => {
     useEffect(() => {
-        if (studioId && items.length === 0) onLoadMore(studioId, 0);
-    }, [studioId]);
-    
-    const handleLoadMore = useCallback(() => onLoadMore(studioId, items.length), [studioId, items.length]);
+        if (items.length === 0) onLoadMore();
+    }, []);
 
-    return (<React.Fragment>
+    return (<div className="studio-members">
+        <h2><FormattedMessage id="studio.curatorsHeader" /></h2>
+        {canInviteCurators && <CuratorInviter />}
+        {showCuratorInvite && <CuratorInvite />}
         {error && <Debug
             label="Error"
             data={error}
         />}
-        {items.map((item, index) =>
-            (<Debug
-                label="Member"
-                data={item}
-                key={index}
-            />)
-        )}
-        {loading ? <small>Loading...</small> : (
-            moreToLoad ?
-                <button onClick={handleLoadMore}>
-                    Load more
-                </button> :
-                <small>No more to load</small>
-        )}
-    </React.Fragment>);
+        <div className="studio-members-grid">
+            {items.map(item =>
+                (<CuratorTile
+                    key={item.username}
+                    username={item.username}
+                    image={item.profile.images['90x90']}
+                />)
+            )}
+            <div className="studio-members-load-more">
+                {loading ? <small>Loading...</small> : (
+                    moreToLoad ?
+                        <button onClick={onLoadMore}>
+                            <FormattedMessage id="general.loadMore" />
+                        </button> :
+                        <small>No more to load</small>
+                )}
+            </div>
+        </div>
+    </div>);
 };
 
-MemberList.propTypes = {
-    studioId: PropTypes.string,
-    items: PropTypes.array, // eslint-disable-line react/forbid-prop-types
+StudioCurators.propTypes = {
+    items: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.id,
+        username: PropTypes.string,
+        profile: PropTypes.shape({
+            images: PropTypes.shape({
+                '90x90': PropTypes.string
+            })
+        })
+    })),
+    canInviteCurators: PropTypes.bool,
+    showCuratorInvite: PropTypes.bool,
     loading: PropTypes.bool,
     error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     moreToLoad: PropTypes.bool,
     onLoadMore: PropTypes.func
 };
 
-const ManagerList = connect(
-    state => managers.selector(state),
-    dispatch => ({
-        onLoadMore: (studioId, offset) => dispatch(
-            managers.actions.loadMore(managerFetcher.bind(null, studioId, offset)))
-    })
-)(MemberList);
-
-const CuratorList = connect(
-    state => curators.selector(state),
-    dispatch => ({
-        onLoadMore: (studioId, offset) => dispatch(
-            curators.actions.loadMore(curatorFetcher.bind(null, studioId, offset)))
-    })
-)(MemberList);
-
-export default StudioCurators;
+export default connect(
+    state => ({
+        ...curators.selector(state),
+        canInviteCurators: selectCanInviteCurators(state),
+        showCuratorInvite: selectShowCuratorInvite(state)
+    }),
+    {
+        onLoadMore: loadCurators
+    }
+)(StudioCurators);

src/views/studio/studio-follow.jsx

@@ -2,6 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
+
 import {selectIsFollowing} from '../../redux/studio';
 import {selectCanFollowStudio} from '../../redux/studio-permissions';
 import {
@@ -28,7 +30,9 @@ const StudioFollow = ({
                 onClick={() => handleFollow(!isFollowing)}
             >
                 {isMutating ? '...' : (
-                    isFollowing ? 'Unfollow Studio' : 'Follow Studio'
+                    isFollowing ?
+                        <FormattedMessage id="studio.unfollowStudio" /> :
+                        <FormattedMessage id="studio.followStudio" />
                 )}
             </button>
             {followingError && <div>Error mutating following: {followingError}</div>}

src/views/studio/studio-info.jsx

@@ -8,6 +8,7 @@ import StudioImage from './studio-image.jsx';
 
 import {selectIsLoggedIn} from '../../redux/session';
 import {getInfo, getRoles} from '../../redux/studio';
+import StudioReport from './studio-report.jsx';
 
 const StudioInfo = ({
     isLoggedIn, onLoadInfo, onLoadRoles
@@ -26,6 +27,7 @@ const StudioInfo = ({
             <StudioFollow />
             <StudioImage />
             <StudioDescription />
+            <StudioReport />
         </React.Fragment>
     );
 };

src/views/studio/studio-managers.jsx

+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
+
+import {managers} from './lib/redux-modules';
+import {loadManagers} from './lib/studio-member-actions';
+import Debug from './debug.jsx';
+import {ManagerTile} from './studio-member-tile.jsx';
+
+
+const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
+    useEffect(() => {
+        if (items.length === 0) onLoadMore();
+    }, []);
+
+    return (
+        <div className="studio-members">
+            <h2><FormattedMessage id="studio.managersHeader" /></h2>
+            {error && <Debug
+                label="Error"
+                data={error}
+            />}
+            <div className="studio-members-grid">
+                {items.map(item =>
+                    (<ManagerTile
+                        key={item.username}
+                        id={item.id}
+                        username={item.username}
+                        image={item.profile.images['90x90']}
+                    />)
+                )}
+                <div className="studio-members-load-more">
+                    {loading ? <small>Loading...</small> : (
+                        moreToLoad ?
+                            <button onClick={onLoadMore}>
+                                <FormattedMessage id="general.loadMore" />
+                            </button> :
+                            <small>No more to load</small>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+StudioManagers.propTypes = {
+    items: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.id,
+        username: PropTypes.string,
+        profile: PropTypes.shape({
+            images: PropTypes.shape({
+                '90x90': PropTypes.string
+            })
+        })
+    })),
+    loading: PropTypes.bool,
+    error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    moreToLoad: PropTypes.bool,
+    onLoadMore: PropTypes.func
+};
+
+export default connect(
+    state => managers.selector(state),
+    {
+        onLoadMore: loadManagers
+    }
+)(StudioManagers);

src/views/studio/studio-member-tile.jsx

+/* eslint-disable react/jsx-no-bind */
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+
+import {
+    selectCanRemoveCurators, selectCanRemoveManager, selectCanPromoteCurators
+} from '../../redux/studio-permissions';
+import {
+    promoteCurator,
+    removeCurator,
+    removeManager
+} from './lib/studio-member-actions';
+
+const StudioMemberTile = ({
+    canRemove, canPromote, onRemove, onPromote, isCreator, // mapState props
+    username, image // own props
+}) => {
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const userUrl = `/users/${username}`;
+    return (
+        <div className="studio-member-tile">
+            <a href={userUrl}>
+                <img
+                    className="studio-member-image"
+                    src={image}
+                />
+            </a>
+            <div className="studio-member-info">
+                <a
+                    href={userUrl}
+                    className="studio-member-name"
+                >{username}</a>
+                {isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
+            </div>
+            {canRemove &&
+                <button
+                    className={classNames('studio-member-remove', {
+                        'mod-mutating': submitting
+                    })}
+                    disabled={submitting}
+                    onClick={() => {
+                        setSubmitting(true);
+                        setError(null);
+                        onRemove(username).catch(e => {
+                            setError(e);
+                            setSubmitting(false);
+                        });
+                    }}
+                >✕</button>
+            }
+            {canPromote &&
+                <button
+                    className={classNames('studio-member-promote', {
+                        'mod-mutating': submitting
+                    })}
+                    disabled={submitting}
+                    onClick={() => {
+                        setSubmitting(true);
+                        setError(null);
+                        onPromote(username).catch(e => {
+                            setError(e);
+                            setSubmitting(false);
+                        });
+                    }}
+                >🆙</button>
+            }
+            {error && <div>{error}</div>}
+        </div>
+    );
+};
+
+StudioMemberTile.propTypes = {
+    canRemove: PropTypes.bool,
+    canPromote: PropTypes.bool,
+    onRemove: PropTypes.func,
+    onPromote: PropTypes.func,
+    username: PropTypes.string,
+    image: PropTypes.string,
+    isCreator: PropTypes.bool
+};
+
+const ManagerTile = connect(
+    (state, ownProps) => ({
+        canRemove: selectCanRemoveManager(state, ownProps.id),
+        canPromote: false,
+        isCreator: state.studio.owner === ownProps.id
+    }),
+    {
+        onRemove: removeManager
+    }
+)(StudioMemberTile);
+
+const CuratorTile = connect(
+    state => ({
+        canRemove: selectCanRemoveCurators(state),
+        canPromote: selectCanPromoteCurators(state)
+    }),
+    {
+        onRemove: removeCurator,
+        onPromote: promoteCurator
+    }
+)(StudioMemberTile);
+
+export {
+    ManagerTile,
+    CuratorTile
+};

src/views/studio/studio-project-adder.jsx

+/* eslint-disable react/jsx-no-bind */
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import classNames from 'classnames';
+import {FormattedMessage} from 'react-intl';
+
+import {addProject} from './lib/studio-project-actions';
+
+const StudioProjectAdder = ({onSubmit}) => {
+    const [value, setValue] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+
+    return (
+        <div className="studio-adder-section">
+            <h3><FormattedMessage id="studio.addProjectsHeader" /></h3>
+            <input
+                disabled={submitting}
+                type="text"
+                placeholder="<project id>"
+                value={value}
+                onChange={e => setValue(e.target.value)}
+            />
+            <button
+                className={classNames('button', {
+                    'mod-mutating': submitting
+                })}
+                disabled={submitting}
+                onClick={() => {
+                    setSubmitting(true);
+                    setError(null);
+                    onSubmit(value)
+                        .then(() => setValue(''))
+                        .catch(e => setError(e))
+                        .then(() => setSubmitting(false));
+                }}
+            ><FormattedMessage id="studio.addProject" /></button>
+            {error && <div>{error}</div>}
+        </div>
+    );
+};
+
+StudioProjectAdder.propTypes = {
+    onSubmit: PropTypes.func
+};
+
+const mapStateToProps = () => ({});
+
+const mapDispatchToProps = ({
+    onSubmit: addProject
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(StudioProjectAdder);

src/views/studio/studio-project-tile.jsx

+/* eslint-disable react/jsx-no-bind */
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import classNames from 'classnames';
+
+import {selectCanRemoveProject} from '../../redux/studio-permissions';
+import {removeProject} from './lib/studio-project-actions';
+
+const StudioProjectTile = ({
+    canRemove, onRemove, // mapState props
+    id, title, image, avatar, username // own props
+}) => {
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const projectUrl = `/projects/${id}`;
+    const userUrl = `/users/${username}`;
+    return (
+        <div className="studio-project-tile">
+            <a href={projectUrl}>
+                <img
+                    className="studio-project-image"
+                    src={image}
+                />
+            </a>
+            <div className="studio-project-bottom">
+                <a href={userUrl}>
+                    <img
+                        className="studio-project-avatar"
+                        src={avatar}
+                    />
+                </a>
+                <div className="studio-project-info">
+                    <a
+                        href={projectUrl}
+                        className="studio-project-title"
+                    >{title}</a>
+                    <a
+                        href={userUrl}
+                        className="studio-project-username"
+                    >{username}</a>
+                </div>
+                {canRemove &&
+                    <button
+                        className={classNames('studio-project-remove', {
+                            'mod-mutating': submitting
+                        })}
+                        disabled={submitting}
+                        onClick={() => {
+                            setSubmitting(true);
+                            setError(null);
+                            onRemove(id)
+                                .catch(e => {
+                                    setError(e);
+                                    setSubmitting(false);
+                                });
+                        }}
+                    >✕</button>
+                }
+                {error && <div>{error}</div>}
+            </div>
+        </div>
+    );
+};
+
+StudioProjectTile.propTypes = {
+    canRemove: PropTypes.bool,
+    onRemove: PropTypes.func,
+    id: PropTypes.number,
+    title: PropTypes.string,
+    username: PropTypes.string,
+    image: PropTypes.string,
+    avatar: PropTypes.string
+};
+
+const mapStateToProps = (state, ownProps) => ({
+    canRemove: selectCanRemoveProject(state, ownProps.username, ownProps.addedBy)
+});
+
+const mapDispatchToProps = ({
+    onRemove: removeProject
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(StudioProjectTile);

src/views/studio/studio-projects.jsx

-import React, {useEffect, useCallback} from 'react';
+import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {useParams} from 'react-router-dom';
 import {connect} from 'react-redux';
 import StudioOpenToAll from './studio-open-to-all.jsx';
+import {FormattedMessage} from 'react-intl';
 
-import {projectFetcher} from './lib/fetchers';
 import {projects} from './lib/redux-modules';
 import {selectCanAddProjects, selectCanEditOpenToAll} from '../../redux/studio-permissions';
 import Debug from './debug.jsx';
-
-const {actions, selector: projectsSelector} = projects;
+import StudioProjectAdder from './studio-project-adder.jsx';
+import StudioProjectTile from './studio-project-tile.jsx';
+import {loadProjects} from './lib/studio-project-actions.js';
 
 const StudioProjects = ({
     canAddProjects, canEditOpenToAll, items, error, loading, moreToLoad, onLoadMore
 }) => {
-    const {studioId} = useParams();
-
     useEffect(() => {
-        if (studioId && items.length === 0) onLoadMore(studioId, 0);
-    }, [studioId]);
-
-    const handleLoadMore = useCallback(() => onLoadMore(studioId, items.length), [studioId, items.length]);
-
+        if (items.length === 0) onLoadMore();
+    }, []);
+    
     return (
-        <div>
-            <h2>Projects</h2>
+        <div className="studio-projects">
+            <h2><FormattedMessage id="studio.projectsHeader" /></h2>
             {canEditOpenToAll && <StudioOpenToAll />}
+            {canAddProjects && <StudioProjectAdder />}
             {error && <Debug
                 label="Error"
                 data={error}
             />}
-            <Debug
-                label="Project Permissions"
-                data={{canAddProjects}}
-            />
-            <div>
-                {items.map((item, index) =>
-                    (<Debug
-                        label="Project"
-                        data={item}
-                        key={index}
+            <div className="studio-projects-grid">
+                {items.map(item =>
+                    (<StudioProjectTile
+                        fetching={loading}
+                        key={item.id}
+                        id={item.id}
+                        title={item.title}
+                        image={item.image}
+                        avatar={item.avatar['90x90']}
+                        username={item.username}
+                        addedBy={item.actor_id}
                     />)
                 )}
-                {loading ? <small>Loading...</small> : (
-                    moreToLoad ?
-                        <button onClick={handleLoadMore}>
-                            Load more
-                        </button> :
-                        <small>No more to load</small>
-                )}
+                <div className="studio-projects-load-more">
+                    {loading ? <small>Loading...</small> : (
+                        moreToLoad ?
+                            <button onClick={onLoadMore}>
+                                <FormattedMessage id="general.loadMore" />
+                            </button> :
+                            <small>No more to load</small>
+                    )}
+                </div>
             </div>
         </div>
     );
@@ -57,22 +57,27 @@ const StudioProjects = ({
 StudioProjects.propTypes = {
     canAddProjects: PropTypes.bool,
     canEditOpenToAll: PropTypes.bool,
-    items: PropTypes.array, // eslint-disable-line react/forbid-prop-types
+    items: PropTypes.arrayOf(PropTypes.shape({
+        avatar: PropTypes.shape({
+            '90x90': PropTypes.string
+        }),
+        id: PropTypes.id,
+        title: PropTypes.string,
+        username: PropTypes.string
+    })),
     loading: PropTypes.bool,
     error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     moreToLoad: PropTypes.bool,
     onLoadMore: PropTypes.func
 };
 
-const mapStateToProps = state => ({
-    ...projectsSelector(state),
-    canAddProjects: selectCanAddProjects(state),
-    canEditOpenToAll: selectCanEditOpenToAll(state)
-});
-
-const mapDispatchToProps = dispatch => ({
-    onLoadMore: (studioId, offset) => dispatch(
-        actions.loadMore(projectFetcher.bind(null, studioId, offset))
-    )
-});
-export default connect(mapStateToProps, mapDispatchToProps)(StudioProjects);
+export default connect(
+    state => ({
+        ...projects.selector(state),
+        canAddProjects: selectCanAddProjects(state),
+        canEditOpenToAll: selectCanEditOpenToAll(state)
+    }),
+    {
+        onLoadMore: loadProjects
+    }
+)(StudioProjects);

src/views/studio/studio-report.jsx

+/* eslint-disable react/jsx-no-bind */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
+
+import {
+    Fields,
+    actions,
+    selectors
+} from '../../redux/studio-report';
+
+const StudioReport = ({
+    canReport,
+    error,
+    field,
+    isOpen,
+    isSubmitting,
+    previouslyReported,
+    handleSetField,
+    handleOpen,
+    handleClose,
+    handleSubmit
+}) => (
+    <div>
+        <h3>Reporting</h3>
+        {canReport && (
+            <button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
+        )}
+        {isOpen && (
+            <div style={{padding: '1rem', margin: '1rem', border: '1px solid green'}}>
+                <div><FormattedMessage id="report.studio" /></div>
+                {previouslyReported ? (
+                    <React.Fragment>
+                        <div>Submitted the report!</div>
+                        <button onClick={handleClose}><FormattedMessage id="general.close" /></button>
+                    </React.Fragment>
+                ) : (
+                    <React.Fragment>
+                        <select
+                            value={field}
+                            onChange={e => handleSetField(e.target.value)}
+                        >
+                            <option value={Fields.TITLE}><FormattedMessage id="studio.title" /></option>
+                            <option value={Fields.DESCRIPTION}><FormattedMessage id="studio.description" /></option>
+                            <option value={Fields.THUMBNAIL}><FormattedMessage id="studio.thumbnail" /></option>
+                        </select>
+                        {error && (
+                            <div>
+                                <div>There was an error. Try again later?</div>
+                                <div><code><pre>{error}</pre></code></div>
+                            </div>
+                        )}
+                        <button
+                            disabled={isSubmitting}
+                            onClick={handleSubmit}
+                        >
+                            <FormattedMessage id="report.send" />
+                        </button>
+                        <button onClick={handleClose}><FormattedMessage id="general.cancel" /></button>
+                    </React.Fragment>
+                )}
+            </div>
+        )}
+    </div>
+);
+
+StudioReport.propTypes = {
+    canReport: PropTypes.bool,
+    error: PropTypes.string,
+    field: PropTypes.string,
+    isOpen: PropTypes.bool,
+    isSubmitting: PropTypes.bool,
+    previouslyReported: PropTypes.bool,
+    handleOpen: PropTypes.func,
+    handleClose: PropTypes.func,
+    handleSetField: PropTypes.func,
+    handleSubmit: PropTypes.func
+};
+
+export default connect(
+    state => ({
+        canReport: selectors.selectCanReportStudio(state),
+        error: selectors.selectStudioReportError(state),
+        field: selectors.selectStudioReportField(state),
+        isOpen: selectors.selectStudioReportOpen(state),
+        isSubmitting: selectors.selectStudioReportSubmitting(state),
+        previouslyReported: selectors.selectStudioReportSubmitted(state)
+    }),
+    {
+        handleOpen: actions.openStudioReport,
+        handleClose: actions.closeStudioReport,
+        handleSetField: actions.setStudioReportField,
+        handleSubmit: actions.submitStudioReport
+    }
+)(StudioReport);

src/views/studio/studio-tab-nav.jsx

 import React from 'react';
 import {useRouteMatch, NavLink} from 'react-router-dom';
 import SubNavigation from '../../components/subnavigation/subnavigation.jsx';
+import {FormattedMessage} from 'react-intl';
 
 const StudioTabNav = () => {
     const match = useRouteMatch();
@@ -15,25 +16,25 @@ const StudioTabNav = () => {
                 to={`${match.url}`}
                 exact
             >
-                <li>Projects</li>
+                <li><FormattedMessage id="studio.tabNavProjects" /></li>
             </NavLink>
             <NavLink
                 activeClassName="active"
                 to={`${match.url}/curators`}
             >
-                <li>Curators</li>
+                <li><FormattedMessage id="studio.tabNavCurators" /></li>
             </NavLink>
             <NavLink
                 activeClassName="active"
                 to={`${match.url}/comments`}
             >
-                <li> Comments</li>
+                <li><FormattedMessage id="studio.tabNavComments" /></li>
             </NavLink>
             <NavLink
                 activeClassName="active"
                 to={`${match.url}/activity`}
             >
-                <li>Activity</li>
+                <li><FormattedMessage id="studio.tabNavActivity" /></li>
             </NavLink>
         </SubNavigation>
     );

src/views/studio/studio.jsx

@@ -13,6 +13,7 @@ import render from '../../lib/render.jsx';
 import StudioTabNav from './studio-tab-nav.jsx';
 import StudioProjects from './studio-projects.jsx';
 import StudioInfo from './studio-info.jsx';
+import StudioManagers from './studio-managers.jsx';
 import StudioCurators from './studio-curators.jsx';
 import StudioComments from './studio-comments.jsx';
 import StudioActivity from './studio-activity.jsx';
@@ -25,6 +26,7 @@ import {
 } from './lib/redux-modules';
 
 const {getInitialState, studioReducer} = require('../../redux/studio');
+const {studioReportReducer} = require('../../redux/studio-report');
 const {commentsReducer} = require('../../redux/comments');
 const {studioMutationsReducer} = require('../../redux/studio-mutations');
 
@@ -43,6 +45,7 @@ const StudioShell = () => {
                 <div>
                     <Switch>
                         <Route path={`${match.path}/curators`}>
+                            <StudioManagers />
                             <StudioCurators />
                         </Route>
                         <Route path={`${match.path}/comments`}>
@@ -82,9 +85,10 @@ render(
         [curators.key]: curators.reducer,
         [managers.key]: managers.reducer,
         [activity.key]: activity.reducer,
+        comments: commentsReducer,
         studio: studioReducer,
         studioMutations: studioMutationsReducer,
-        comments: commentsReducer
+        studioReport: studioReportReducer
     },
     {
         studio: {

src/views/studio/studio.scss

@@ -67,6 +67,175 @@ $radius: 8px;
     .active > li { background: $ui-blue; }
 }
 
+.studio-projects {}
+.studio-projects-grid {
+    margin-top: 20px;
+    display: grid;
+
+    grid-template-columns: minmax(0, 1fr);
+    @media #{$medium} {
+        & { grid-template-columns: repeat(2, minmax(0,1fr)); }
+    }
+    @media #{$big} {
+        & { grid-template-columns: repeat(3, minmax(0,1fr)); }
+    }
+    column-gap: 30px;
+    row-gap: 20px;
+
+    .studio-projects-load-more {
+        grid-column: 1 / -1;
+    }
+}
+
+.studio-project-tile {
+    background: white;
+    border-radius: 8px;
+    border: 1px solid $ui-border;
+
+    .studio-project-image {
+        max-width: 100%;
+        background: #a0c6fc;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
+    .studio-project-bottom {
+        display: flex;
+        padding: 10px 6px 10px 12px;
+        justify-content: space-between;
+    }
+    .studio-project-avatar {
+        width: 42px;
+        height: 42px;
+        border-radius: 4px;
+        object-fit: cover;
+    }
+    .studio-project-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        overflow: hidden;
+        margin: 0 8px;
+        flex-grow: 1; /* Grow to fill available space */
+        min-width: 0; /* Prevents within from expanding beyond bounds */
+    }
+    .studio-project-title {
+        color: #4C97FF;
+        font-weight: 700;
+        font-size: 14px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .studio-project-username {
+        color: #575E75;
+        font-weight: 700;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .studio-project-remove {
+        color: $ui-blue;
+        background: transparent;
+        border: none;
+    }
+}
+
+.studio-members {}
+.studio-members-grid {
+    margin-top: 20px;
+    display: grid;
+
+    grid-template-columns: minmax(0, 1fr);
+    @media #{$medium} {
+        & { grid-template-columns: repeat(2, minmax(0,1fr)); }
+    }
+    @media #{$big} {
+        & { grid-template-columns: repeat(3, minmax(0,1fr)); }
+    }
+    column-gap: 30px;
+    row-gap: 20px;
+    .studio-members-load-more {
+        grid-column: 1 / -1;
+    }
+}
+
+.studio-member-tile {
+    background: white;
+    border-radius: 8px;
+    border: 1px solid $ui-border;
+
+    display: flex;
+    padding: 10px 6px 10px 12px;
+    justify-content: space-between;
+
+    .studio-member-image {
+        width: 42px;
+        height: 42px;
+        border-radius: 4px;
+        object-fit: cover;
+    }
+    .studio-member-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        overflow: hidden;
+        margin: 0 8px;
+        flex-grow: 1; /* Grow to fill available space */
+        min-width: 0; /* Prevents within from expanding beyond bounds */
+    }
+    .studio-member-name {
+        color: #4C97FF;
+        font-weight: 700;
+        font-size: 14px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .studio-member-role {
+        color: #575E75;
+        font-weight: 400;
+        font-size: 12px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .studio-member-remove, .studio-member-promote {
+        color: $ui-blue;
+        background: transparent;
+        border: none;
+    }
+}
+
+.studio-members + .studio-members {
+    margin-top: 40px;
+}
+
+.studio-adder-section {
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+
+    h3 {
+        color: #4C97FF;
+    }
+
+    input {
+        flex-basis: 80%;
+        flex-grow: 1;
+        display: inline-block;
+        margin: .5em 0;
+        border: 1px solid $ui-border;
+        border-radius: .5rem;
+        padding: 1em 1.25em;
+        font-size: .8rem;
+    }
+
+    button {
+        flex-grow: 1;
+    }
+
+    input + button {
+        margin-inline-start: 12px;
+    }
+}
+
 .studio-activity {
     .studio-messages-list {
         border: 1px solid $ui-border;
@@ -105,6 +274,6 @@ $radius: 8px;
 }
 
 .mod-mutating { /* When a field has sent a change to the server */
-    cursor: wait;
+    cursor: wait !important;
     opacity: .5;
 }

test/helpers/state-fixtures.json

@@ -6,6 +6,9 @@
         "isCurator": {
             "curator": true
         },
+        "isInvited": {
+            "invited": true
+        },
         "creator1": {
             "owner": 1
         },
@@ -27,7 +30,8 @@
         "user1Social": {
             "session": {
                 "user": {
-                    "id": 1
+                    "id": 1,
+                    "username": "user1-username"
                 },
                 "permissions": {
                     "social": true

test/unit/redux/studio-permissions.test.js

@@ -8,11 +8,17 @@ import {
     selectCanRestoreComment,
     selectCanFollowStudio,
     selectCanEditCommentsAllowed,
-    selectCanEditOpenToAll
+    selectCanEditOpenToAll,
+    selectShowCuratorInvite,
+    selectCanInviteCurators,
+    selectCanRemoveCurators,
+    selectCanRemoveManager,
+    selectCanPromoteCurators,
+    selectCanRemoveProject
 } from '../../../src/redux/studio-permissions';
 
 import {getInitialState as getInitialStudioState} from '../../../src/redux/studio';
-import {getInitialState as getInitialSessionState} from '../../../src/redux/session';
+import {getInitialState as getInitialSessionState, selectUserId, selectUsername} from '../../../src/redux/session';
 import {sessions, studios} from '../../helpers/state-fixtures.json';
 
 let state;
@@ -42,6 +48,9 @@ const setStateByRole = (role) => {
         break;
     case 'logged out': // Default state set in beforeEach
         break;
+    case 'invited':
+        state.studio = studios.isInvited;
+        break;
     default:
         throw new Error('Unknown user role in test: ' + role);
     }
@@ -98,6 +107,39 @@ describe('studio projects', () => {
             expect(selectCanAddProjects(state)).toBe(expected);
         });
     });
+
+    describe('can remove projects', () => {
+        test.each([
+            ['admin', true],
+            ['curator', false], // false for projects that were not added by them, see below
+            ['manager', true],
+            ['creator', true],
+            ['logged in', false], // false for projects that are not theirs, see below
+            ['unconfirmed', false],
+            ['logged out', false]
+        ])('%s: %s', (role, expected) => {
+            setStateByRole(role);
+            expect(selectCanRemoveProject(state, 'not-me', 'not-me')).toBe(expected);
+        });
+
+        test('curators can remove projects they added', () => {
+            setStateByRole('curator');
+            const addedBy = selectUserId(state);
+            expect(selectCanRemoveProject(state, 'not-me', addedBy)).toBe(true);
+        });
+
+        test('curators can also remove projects they own that they did not add', () => {
+            setStateByRole('curator');
+            const creator = selectUsername(state);
+            expect(selectCanRemoveProject(state, creator, 'not-me')).toBe(true);
+        });
+
+        test('logged in users can only remove projects they own', () => {
+            setStateByRole('logged in');
+            const creator = selectUsername(state);
+            expect(selectCanRemoveProject(state, creator, 'not-me')).toBe(true);
+        });
+    });
 });
 
 describe('studio comments', () => {
@@ -209,3 +251,97 @@ describe('studio comments', () => {
         });
     });
 });
+
+describe('studio members', () => {
+    describe('can accept invitation', () => {
+        test.each([
+            ['admin', false],
+            ['curator', false],
+            ['manager', false],
+            ['creator', false],
+            ['invited', true],
+            ['logged in', false],
+            ['unconfirmed', false],
+            ['logged out', false]
+        ])('%s: %s', (role, expected) => {
+            setStateByRole(role);
+            expect(selectShowCuratorInvite(state)).toBe(expected);
+        });
+    });
+
+    describe('can promote curators', () => {
+        test.each([
+            ['admin', false],
+            ['curator', false],
+            ['manager', true],
+            ['creator', true],
+            ['logged in', false],
+            ['unconfirmed', false],
+            ['logged out', false]
+        ])('%s: %s', (role, expected) => {
+            setStateByRole(role);
+            expect(selectCanPromoteCurators(state)).toBe(expected);
+        });
+    });
+
+    describe('can remove curators', () => {
+        test.each([
+            ['admin', true],
+            ['curator', false],
+            ['manager', true],
+            ['creator', true],
+            ['logged in', false],
+            ['unconfirmed', false],
+            ['logged out', false]
+        ])('%s: %s', (role, expected) => {
+            setStateByRole(role);
+            expect(selectCanRemoveCurators(state)).toBe(expected);
+        });
+    });
+
+    describe('can remove managers', () => {
+        test.each([
+            ['admin', true],
+            ['curator', false],
+            ['manager', true],
+            ['creator', true],
+            ['logged in', false],
+            ['unconfirmed', false],
+            ['logged out', false]
+        ])('%s: %s', (role, expected) => {
+            setStateByRole(role);
+            expect(selectCanRemoveManager(state, '123')).toBe(expected);
+        });
+
+        describe('nobody can remove the studio creator', () => {
+            test.each([
+                ['admin', false],
+                ['curator', false],
+                ['manager', false],
+                ['creator', false],
+                ['logged in', false],
+                ['unconfirmed', false],
+                ['logged out', false]
+            ])('%s: %s', (role, expected) => {
+                setStateByRole(role);
+                state.studio.owner = 'the creator';
+                expect(selectCanRemoveManager(state, 'the creator')).toBe(expected);
+            });
+        });
+    });
+
+    describe('can invite curators', () => {
+        test.each([
+            ['admin', false],
+            ['curator', false],
+            ['manager', true],
+            ['creator', false],
+            ['logged in', false],
+            ['unconfirmed', false],
+            ['logged out', false]
+        ])('%s: %s', (role, expected) => {
+            setStateByRole(role);
+            expect(selectCanInviteCurators(state)).toBe(expected);
+        });
+    });
+});