Merge pull request #5418 from paulkaplan/bugfix/studio-playground-may14

src/components/overflow-menu/overflow-menu.jsx

@@ -13,7 +13,9 @@ const OverflowMenu = ({children, dropdownAs, className}) => {
     return (
         <div className={classNames('overflow-menu-container', className)}>
             <button
-                className="overflow-menu-trigger ignore-react-onclickoutside"
+                className={classNames('overflow-menu-trigger', {
+                    'ignore-react-onclickoutside': open
+                })}
                 onClick={() => setOpen(!open)}
             >
                 <img src={overflowIcon} />

src/redux/studio-permissions.js

@@ -31,7 +31,15 @@ const selectCanEditOpenToAll = state => isManager(state);
 
 const selectShowCuratorInvite = state => !!state.studio.invited;
 const selectCanInviteCurators = state => isManager(state);
-const selectCanRemoveCurators = state => isManager(state) || selectIsAdmin(state);
+const selectCanRemoveCurator = (state, username) => {
+    // Admins/managers can remove any curators
+    if (isManager(state) || selectIsAdmin(state)) return true;
+    // Curators can remove themselves
+    if (selectUsername(state) === username) {
+        return true;
+    }
+    return false;
+};
 const selectCanRemoveManager = (state, managerId) =>
     (selectIsAdmin(state) || isManager(state)) && managerId !== state.studio.owner;
 const selectCanPromoteCurators = state => isManager(state);
@@ -63,7 +71,7 @@ export {
     selectCanEditOpenToAll,
     selectShowCuratorInvite,
     selectCanInviteCurators,
-    selectCanRemoveCurators,
+    selectCanRemoveCurator,
     selectCanRemoveManager,
     selectCanPromoteCurators,
     selectCanRemoveProject

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

@@ -110,6 +110,7 @@ const removeCurator = username => ((dispatch, getState) => new Promise((resolve,
 const inviteCurator = username => ((dispatch, getState) => new Promise((resolve, reject) => {
     const state = getState();
     const studioId = selectStudioId(state);
+    username = username.trim();
     api({
         uri: `/site-api/users/curators-in/${studioId}/invite_curator/`,
         method: 'PUT',

src/views/studio/modals/user-projects-modal.jsx

@@ -91,7 +91,7 @@ const UserProjectsModal = ({
                             className={classNames('button', {
                                 'mod-mutating': loading
                             })}
-                            onClick={onLoadMore}
+                            onClick={() => onLoadMore(filter)}
                         >
                             <FormattedMessage id="general.loadMore" />
                         </button>

src/views/studio/modals/user-projects-tile.jsx

@@ -29,7 +29,12 @@ const UserProjectsTile = ({id, title, image, inStudio, onAdd, onRemove}) => {
                 'mod-mutating': submitting
             })}
             onClick={toggle}
-            onKeyDown={e => e.key === 'Enter' && toggle()}
+            onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    toggle();
+                    e.preventDefault();
+                }
+            }}
         >
             <img
                 className="studio-project-image"

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

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 
 import {
-    selectCanRemoveCurators, selectCanRemoveManager, selectCanPromoteCurators
+    selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators
 } from '../../redux/studio-permissions';
 import {
     promoteCurator,
@@ -109,8 +109,8 @@ const ManagerTile = connect(
 )(StudioMemberTile);
 
 const CuratorTile = connect(
-    state => ({
-        canRemove: selectCanRemoveCurators(state),
+    (state, ownProps) => ({
+        canRemove: selectCanRemoveCurator(state, ownProps.username),
         canPromote: selectCanPromoteCurators(state)
     }),
     {

src/views/studio/studio-title.jsx

@@ -9,12 +9,7 @@ import {selectStudioTitle, selectIsFetchingInfo} from '../../redux/studio';
 import {selectCanEditInfo} from '../../redux/studio-permissions';
 import {Errors, mutateStudioTitle, selectIsMutatingTitle, selectTitleMutationError} from '../../redux/studio-mutations';
 import ValidationMessage from '../../components/forms/validation-message.jsx';
-/*
-TODO
-- no newlines in studio title
-- Correct display in read-only mode
-- validation message
-*/
+
 const errorToMessageId = error => {
     switch (error) {
     case Errors.INAPPROPRIATE: return 'studio.updateErrors.inappropriate';
@@ -38,6 +33,7 @@ const StudioTitle = ({
                 className={fieldClassName}
                 disabled={isMutating || !canEditInfo || isFetching}
                 defaultValue={title}
+                onKeyDown={e => e.key === 'Enter' && e.target.blur()}
                 onBlur={e => e.target.value !== title &&
                     handleUpdate(e.target.value)}
             />

src/views/studio/studio.scss

@@ -129,6 +129,9 @@ $radius: 8px;
         background: #a0c6fc;
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;
+        width: 100%;
+        aspect-ratio: 4 / 3;
+        object-fit: cover;
     }
     .studio-project-bottom {
         display: flex;

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

@@ -11,7 +11,7 @@ import {
     selectCanEditOpenToAll,
     selectShowCuratorInvite,
     selectCanInviteCurators,
-    selectCanRemoveCurators,
+    selectCanRemoveCurator,
     selectCanRemoveManager,
     selectCanPromoteCurators,
     selectCanRemoveProject
@@ -287,7 +287,7 @@ describe('studio members', () => {
     describe('can remove curators', () => {
         test.each([
             ['admin', true],
-            ['curator', false],
+            ['curator', false], // except themselves, see test below
             ['manager', true],
             ['creator', true],
             ['logged in', false],
@@ -295,7 +295,13 @@ describe('studio members', () => {
             ['logged out', false]
         ])('%s: %s', (role, expected) => {
             setStateByRole(role);
-            expect(selectCanRemoveCurators(state)).toBe(expected);
+            expect(selectCanRemoveCurator(state, 'others-username')).toBe(expected);
+        });
+
+        test('curators can remove themselves', () => {
+            setStateByRole('curator');
+            const loggedInUsername = selectUsername(state);
+            expect(selectCanRemoveCurator(state, loggedInUsername)).toBe(true);
         });
     });