Skip to content

GitLab

S
scratch-www
Commit f312bcf9 authored by chrisgarrity's avatar chrisgarrity
Browse files
Options

Merge remote-tracking branch 'origin/develop' into release/2021-09-01

parents 67eebd57 840550ab
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1163 additions and 165 deletions
package-lock.json
View file @ f312bcf9
This diff is collapsed.
src/components/alert/alert-provider.jsx
View file @ f312bcf9
......@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
import AlertStatus from './alert-status.js';
import AlertContext from './alert-context.js';
const DEFAULT_TIMEOUT_SECONDS = 6;
const AlertProvider = ({children}) => {
const defaultState = {
status: AlertStatus.NONE,
......@@ -19,7 +21,7 @@ const AlertProvider = ({children}) => {
setState(defaultState);
};
const handleAlert = (status, data, timeoutSeconds = 3) => {
const handleAlert = (status, data, timeoutSeconds = DEFAULT_TIMEOUT_SECONDS) => {
if (timeoutRef.current) clearTimeout(timeoutRef.current);
setState({status, data, showClear: !timeoutSeconds});
if (timeoutSeconds) {
......@@ -37,9 +39,9 @@ const AlertProvider = ({children}) => {
data: state.data,
showClear: state.showClear,
clearAlert: clearAlert,
successAlert: (newData, timeoutSeconds = 3) =>
successAlert: (newData, timeoutSeconds = DEFAULT_TIMEOUT_SECONDS) =>
handleAlert(AlertStatus.SUCCESS, newData, timeoutSeconds),
errorAlert: (newData, timeoutSeconds = 3) =>
errorAlert: (newData, timeoutSeconds = DEFAULT_TIMEOUT_SECONDS) =>
handleAlert(AlertStatus.ERROR, newData, timeoutSeconds)
}}
>
......
src/redux/session.js
View file @ f312bcf9
......@@ -149,6 +149,8 @@ module.exports.selectMuteStatus = state => get(state, ['session', 'session', 'pe
module.exports.selectIsMuted = state => (module.exports.selectMuteStatus(state).muteExpiresAt || 0) * 1000 > Date.now();
module.exports.selectNewStudiosLaunched = state => get(state, ['session', 'session', 'flags', 'new_studios_launched'],
false);
module.exports.selectStudioTransferLaunched = state => get(state, ['session', 'session', 'flags',
'studio_transfer_launched'], false);
module.exports.selectHasFetchedSession = state => state.session.status === module.exports.Status.FETCHED;
......
src/redux/studio-permissions.js
View file @ f312bcf9
......@@ -3,12 +3,12 @@ const {selectUserId, selectIsAdmin, selectIsSocial,
selectHasFetchedSession, selectStudioCommentsGloballyEnabled} = require('./session');
// Fine-grain selector helpers - not exported, use the higher level selectors below
const isCreator = state => selectUserId(state) === state.studio.owner;
const isHost = state => selectUserId(state) === state.studio.owner;
const isCurator = state => state.studio.curator;
const isManager = state => state.studio.manager || isCreator(state);
const isManager = state => state.studio.manager || isHost(state);
// Action-based permissions selectors
const selectCanEditInfo = state => !selectIsMuted(state) && (selectIsAdmin(state) || isCreator(state));
const selectCanEditInfo = state => !selectIsMuted(state) && (selectIsAdmin(state) || isHost(state));
const selectCanAddProjects = state =>
!selectIsMuted(state) &&
(isManager(state) ||
......@@ -35,7 +35,7 @@ const selectCanDeleteCommentWithoutConfirm = state => selectIsAdmin(state);
const selectCanFollowStudio = state => selectIsLoggedIn(state);
// Matching existing behavior, only admin/creator is allowed to toggle comments.
const selectCanEditCommentsAllowed = state => !selectIsMuted(state) && (selectIsAdmin(state) || isCreator(state));
const selectCanEditCommentsAllowed = state => !selectIsMuted(state) && (selectIsAdmin(state) || isHost(state));
const selectCanEditOpenToAll = state => !selectIsMuted(state) && isManager(state);
const selectShowCuratorInvite = state => !selectIsMuted(state) && !!state.studio.invited;
......@@ -54,6 +54,20 @@ 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) => {
// Nobody can transfer a class studio.
// classroomId is loaded only for educator and admin users. Only educators can create class studios,
// so educators and admins are the only users who otherwise would be able to transfer a class studio.
if (state.studio.classroomId !== null) return false;
if (state.studio.managers > 1) { // If there is more than one manager,
if (managerId === state.studio.owner) { // and the selected manager is the current owner/host,
if (isHost(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;
......@@ -73,7 +87,7 @@ const selectCanRemoveProject = (state, creatorUsername, actorId) => {
// We should only show the mute errors to muted users who have any permissions related to the content
// TODO these duplicate the behavior embedded in the non-muted parts of the selectors above, it would be good
// to extract this.
const selectShowEditMuteError = state => selectIsMuted(state) && (isCreator(state) || selectIsAdmin(state));
const selectShowEditMuteError = state => selectIsMuted(state) && (isHost(state) || selectIsAdmin(state));
const selectShowProjectMuteError = state => selectIsMuted(state) &&
(selectIsAdmin(state) ||
isManager(state) ||
......@@ -99,6 +113,7 @@ export {
selectCanRemoveCurator,
selectCanRemoveManager,
selectCanPromoteCurators,
selectCanTransfer,
selectCanRemoveProject,
selectShowCommentsList,
selectShowCommentsGloballyOffError,
......
src/redux/studio.js
View file @ f312bcf9
......@@ -4,7 +4,7 @@ const {withAdmin} = require('../lib/admin-requests');
const api = require('../lib/api');
const log = require('../lib/log');
const {selectUsername, selectToken, selectIsEducator} = require('./session');
const {selectUsername, selectToken, selectIsEducator, selectIsAdmin} = require('./session');
const Status = keyMirror({
FETCHED: null,
......@@ -28,7 +28,7 @@ const getInitialState = () => ({
owner: null,
public: null,
// BEWARE: classroomId is only loaded if the user is an educator
// BEWARE: classroomId is only loaded if the user is an educator or admin
classroomId: null,
rolesStatus: Status.NOT_FETCHED,
......@@ -164,7 +164,7 @@ const getRoles = () => ((dispatch, getState) => {
});
// Since the user is now loaded, it's a good time to check if the studio is part of a classroom
if (selectIsEducator(state)) {
if (selectIsEducator(state) || selectIsAdmin(state)) {
api({uri: `/studios/${studioId}/classroom`}, (err, body, res) => {
// No error states for inability/problems loading classroom, just swallow them
if (!err && res.statusCode === 200 && body) dispatch(setInfo({classroomId: body.id}));
......
src/views/messages/l10n.json
View file @ f312bcf9
......@@ -5,6 +5,8 @@
"messages.activityStudios": "Studio Activity",
"messages.activityForums": "Forum Activity",
"messages.becomeManagerText": "{username} promoted you to manager for the studio {studio}",
"messages.becomeHostText": "{usernameOrScratchTeam} made you the host of the studio {studio}. As host, you now have the ability to edit the studio title, thumbnail, and description. Go say hello in the studio!",
"messages.becomeHostScratchTeam": "A Scratch Team member",
"messages.curatorInviteText": "{actorLink} invited you to curate the studio {studioLink}. Visit the {tabLink} on the studio to accept the invitation",
"messages.curatorTabText": "curator tab",
"messages.favoriteText": "{profileLink} favorited your project {projectLink}",
......
src/views/messages/message-rows/become-host.jsx 0 → 100644
View file @ f312bcf9
const classNames = require('classnames');
const FormattedMessage = require('react-intl').FormattedMessage;
const PropTypes = require('prop-types');
const React = require('react');
const SocialMessage = require('../../../components/social-message/social-message.jsx');
const BecomeHostMessage = props => (
<SocialMessage
className={classNames(
'mod-become-host',
props.className
)}
datetime={props.datetimePromoted}
iconAlt="become host notification image"
iconSrc="/svgs/messages/host-transfer.svg"
>
<FormattedMessage
id="messages.becomeHostText"
values={{
usernameOrScratchTeam: (
props.adminActor ?
<FormattedMessage id="messages.becomeHostScratchTeam" /> :
<a
className="social-messages-profile-link"
href={`/users/${props.actorUsername}/`}
>
{props.actorUsername}
</a>
),
studio: (
<a href={`/studios/${props.studioId}/`}>
{props.studioTitle}
</a>
)
}}
/>
</SocialMessage>
);
BecomeHostMessage.propTypes = {
actorUsername: PropTypes.string.isRequired,
adminActor: PropTypes.bool,
className: PropTypes.string,
datetimePromoted: PropTypes.string.isRequired,
studioId: PropTypes.number.isRequired,
studioTitle: PropTypes.string.isRequired
};
module.exports = BecomeHostMessage;
src/views/messages/presentation.jsx
View file @ f312bcf9
......@@ -17,6 +17,7 @@ const messageStatuses = require('../../redux/messages').Status;
// Message Components
const AdminMessage = require('./message-rows/admin-message.jsx');
const BecomeManagerMessage = require('./message-rows/become-manager.jsx');
const BecomeHostMessage = require('./message-rows/become-host.jsx');
const CommentMessage = require('./message-rows/comment-message.jsx');
const CuratorInviteMessage = require('./message-rows/curator-invite.jsx');
const FavoriteProjectMessage = require('./message-rows/favorite-project.jsx');
......@@ -147,6 +148,18 @@ class SocialMessagesList extends React.Component {
studioTitle={message.gallery_title}
/>
);
case 'becomehoststudio':
return (
<BecomeHostMessage
actorUsername={message.actor_username}
adminActor={message.admin_actor || false}
className={className}
datetimePromoted={message.datetime_created}
key={key}
studioId={message.gallery_id}
studioTitle={message.gallery_title}
/>
);
case 'userjoin':
return (
<UserJoinMessage
......
src/views/studio/l10n.json
View file @ f312bcf9
......@@ -50,6 +50,7 @@
"studio.projectErrors.duplicate": "That project is already in this studio.",
"studio.creatorRole": "Studio Creator",
"studio.hostRole": "Studio Host",
"studio.managersHeader": "Managers",
......@@ -88,10 +89,28 @@
"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.transfer.youAreAboutTo": "You are about to make someone else the studio host.",
"studio.transfer.cannotUndo": "You cannot undo this.",
"studio.transfer.thisMeans": "This means...",
"studio.transfer.noLongerEdit": "You will no longer be able to edit the title, thumbnail, and description",
"studio.transfer.noLongerDelete": "You will no longer be able to delete the studio",
"studio.transfer.whichManager": "Which manager do you want to make the host?",
"studio.transfer.currentHost": "Current Host",
"studio.transfer.newHost": "New Host",
"studio.transfer.confirmWithPassword": "To confirm changing the studio host, please enter your password.",
"studio.transfer.forgotPassword": "Forgot password?",
"studio.transfer.alert.somethingWentWrong": "Something went wrong transferring this studio to a new host.",
"studio.transfer.alert.wasntTheRightPassword": "Hmm, that wasn’t the right password.",
"studio.transfer.alert.thisUserCannotBecomeHost": "This user cannot become the host — try transfering to another manager",
"studio.remove": "Remove",
"studio.promote": "Promote",
"studio.transfer": "Change Studio Host",
"studio.cancel": "Cancel",
"studio.okay": "Okay",
"studio.next": "Next",
"studio.back": "Back",
"studio.confirm": "Confirm",
"studio.commentsHeader": "Comments",
"studio.commentsNotAllowed": "Commenting for this studio has been turned off.",
......@@ -138,5 +157,7 @@
"studio.alertCuratorInvited": "Curator invite sent to \"{name}\"",
"studio.alertManagerPromote": "\"{name}\" is now a manager",
"studio.alertManagerPromoteError": "Something went wrong promoting \"{name}\"",
"studio.alertMemberRemoveError": "Something went wrong removing \"{name}\""
"studio.alertMemberRemoveError": "Something went wrong removing \"{name}\"",
"studio.alertTransfer": "\"{name}\" is now the host",
"studio.alertTransferRateLimit": "You can only change the host once a day. Try again tomorrow."
}
src/views/studio/lib/studio-member-actions.js
View file @ f312bcf9
......@@ -2,7 +2,7 @@ import keyMirror from 'keymirror';
import api from '../../../lib/api';
import {curators, managers} from './redux-modules';
import {selectUsername} from '../../../redux/session';
import {selectUsername, selectToken} from '../../../redux/session';
import {selectStudioId, setRoles, setInfo} from '../../../redux/studio';
import {withAdmin} from '../../../lib/admin-requests';
......@@ -15,6 +15,7 @@ const Errors = keyMirror({
UNKNOWN_USERNAME: null,
RATE_LIMIT: null,
MANAGER_LIMIT: null,
CANNOT_BE_HOST: null,
UNHANDLED: null
});
......@@ -28,6 +29,7 @@ const normalizeError = (err, body, res) => {
if (res.statusCode === 403 && body.mute_status) return Errors.USER_MUTED;
if (res.statusCode === 401 || res.statusCode === 403) return Errors.PERMISSION;
if (res.statusCode === 404) return Errors.UNKNOWN_USERNAME;
if (res.statusCode === 409) return Errors.CANNOT_BE_HOST;
if (res.statusCode === 429) return Errors.RATE_LIMIT;
if (res.statusCode !== 200) return Errors.SERVER;
if (body && body.status === 'error') {
......@@ -187,6 +189,27 @@ const acceptInvitation = () => ((dispatch, getState) => new Promise((resolve, re
});
}));
const transferHost = (password, newHostName, newHostId) =>
((dispatch, getState) => new Promise((resolve, reject) => {
const state = getState();
const studioId = selectStudioId(state);
const token = selectToken(state);
newHostName = newHostName.trim();
api({
uri: `/studios/${studioId}/transfer/${newHostName}`,
method: 'PUT',
authentication: token,
withCredentials: true,
useCsrf: true,
json: {password: password}
}, (err, body, res) => {
const error = normalizeError(err, body, res);
if (error) return reject(error);
dispatch(setInfo({owner: newHostId}));
return resolve();
});
}));
export {
Errors,
loadManagers,
......@@ -195,5 +218,6 @@ export {
acceptInvitation,
promoteCurator,
removeCurator,
removeManager
removeManager,
transferHost
};
src/views/studio/modals/studio-report-modal.scss
View file @ f312bcf9
......@@ -61,6 +61,7 @@
overflow-wrap: break-word;
height: 90px;
padding: 0.5rem;
white-space: pre-wrap;
}
.studio-report-title-text {
......
src/views/studio/modals/transfer-host-confirmation.jsx 0 → 100644
View file @ f312bcf9
import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FormattedMessage} from 'react-intl';
const {injectIntl, intlShape} = require('react-intl');
import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx';
import TransferHostTile from './transfer-host-tile.jsx';
import Form from '../../../components/forms/form.jsx';
import ValidationMessage from '../../../components/forms/validation-message.jsx';
import {managers} from '../lib/redux-modules';
import {useAlertContext} from '../../../components/alert/alert-context';
import {Errors, transferHost} from '../lib/studio-member-actions';
import './transfer-host-modal.scss';
const TransferHostConfirmation = ({
handleBack,
handleClose,
handleTransferHost,
intl,
items,
hostId,
selectedId
}) => {
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('');
const [validationError, setValidationError] = useState(null);
const {errorAlert, successAlert} = useAlertContext();
const errorToMessageId = error => {
switch (error) {
case Errors.RATE_LIMIT: return 'studio.alertTransferRateLimit';
case Errors.CANNOT_BE_HOST: return 'studio.transfer.alert.thisUserCannotBecomeHost';
default: return 'studio.transfer.alert.somethingWentWrong';
}
};
const handleSubmit = () => {
handleTransferHost(passwordInputValue, newHostUsername, selectedId)
.then(() => {
handleClose();
successAlert({
id: 'studio.alertTransfer',
values: {name: newHostUsername}
});
})
.catch(e => {
// For password errors, show validation alert without closing the modal
if (e === Errors.PERMISSION) {
setValidationError(e);
return;
}
// For other errors, close the modal and show an alert
handleClose();
errorAlert({
id: errorToMessageId(e)
});
});
};
const handleChangePasswordInput = e => {
setPasswordInputValue(e.target.value);
setValidationError(null);
};
return (
<ModalInnerContent>
<div className="transfer-outcome">
<div>
<div className="transfer-outcome-label">
<FormattedMessage id="studio.transfer.currentHost" />
</div>
<TransferHostTile
className="transfer-outcome-tile"
key={hostId}
id={hostId}
image={currentHostImage}
username={currentHostUsername}
isCreator={false}
/>
</div>
<img
className="transfer-outcome-arrow"
src="/svgs/studio/r-arrow.svg"
/>
<div>
<div className="transfer-outcome-label">
<FormattedMessage id="studio.transfer.newHost" />
</div>
<TransferHostTile
className="transfer-outcome-tile"
key={selectedId}
id={selectedId}
image={newHostImage}
username={newHostUsername}
isCreator={false}
/>
</div>
</div>
<div className="transfer-password-instruction">
<h2>
<FormattedMessage id="studio.transfer.confirmWithPassword" />
</h2>
</div>
<Form
className="transfer-form"
onSubmit={handleSubmit} // eslint-disable-line react/jsx-no-bind
>
<div className="transfer-password-row">
<input
className="transfer-password-input"
required
key="passwordInput"
name="password"
type="password"
value={passwordInputValue}
onChange={handleChangePasswordInput} // eslint-disable-line react/jsx-no-bind
/>
{validationError && <ValidationMessage
className="transfer-password-validation"
message={intl.formatMessage({id: 'studio.transfer.alert.wasntTheRightPassword'})}
mode="error"
/>}
</div>
<div className="transfer-forgot-link">
<a
href="/accounts/password_reset/"
>
<FormattedMessage id="studio.transfer.forgotPassword" />
</a>
</div>
<div
className="transfer-host-button-row transfer-host-button-row-split"
>
<button
className="button"
type="button"
onClick={handleBack}
>
<FormattedMessage id="studio.back" />
</button>
<button
className="button"
type="submit"
disabled={passwordInputValue === ''}
>
<FormattedMessage id="studio.confirm" />
</button>
</div>
</Form>
</ModalInnerContent>
);
};
TransferHostConfirmation.propTypes = {
handleBack: PropTypes.func,
handleClose: PropTypes.func,
intl: intlShape,
items: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.id,
username: PropTypes.string,
profile: PropTypes.shape({
images: PropTypes.shape({
'90x90': PropTypes.string
})
})
})),
handleTransferHost: PropTypes.func,
selectedId: PropTypes.number,
hostId: PropTypes.number
};
const connectedConfirmationStep = connect(
state => ({
hostId: state.studio.owner,
...managers.selector(state)
}), {
handleTransferHost: transferHost
}
)(TransferHostConfirmation);
export default injectIntl(connectedConfirmationStep);
src/views/studio/modals/transfer-host-info.jsx 0 → 100644
View file @ f312bcf9
import React from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx';
import AlertComponent from '../../../components/alert/alert-component.jsx';
import errorIcon from '../../../components/alert/icon-alert-error.svg';
import './transfer-host-modal.scss';
const TransferHostInfo = ({
handleClose,
handleNext
}) =>
(<div className="content">
<img
src="/svgs/studio/transfer-host.svg"
className="transfer-host-image"
/>
<ModalInnerContent
className="inner"
>
<div className="transfer-info-title">
<h2>
<FormattedMessage id="studio.transfer.youAreAboutTo" />
</h2>
</div>
<div className="transfer-host-alert-wrapper">
<AlertComponent
className="alert-error transfer-host-alert"
icon={errorIcon}
id="studio.transfer.cannotUndo"
/>
</div>
<span
className="list-header"
>
<FormattedMessage id="studio.transfer.thisMeans" />
</span>
<ul>
<li><FormattedMessage id="studio.transfer.noLongerEdit" /></li>
<li><FormattedMessage id="studio.transfer.noLongerDelete" /></li>
</ul>
<div
className="transfer-host-button-row"
>
<button
className="button cancel-button"
onClick={handleClose}
>
<FormattedMessage id="studio.cancel" />
</button>
<button
className="button next-button"
onClick={handleNext}
>
<FormattedMessage id="studio.next" />
</button>
</div>
</ModalInnerContent>
</div>);
TransferHostInfo.propTypes = {
handleClose: PropTypes.func,
handleNext: PropTypes.func
};
export default TransferHostInfo;
src/views/studio/modals/transfer-host-modal.jsx 0 → 100644
View file @ f312bcf9
import React, {useState} from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
import keyMirror from 'keymirror';
import Modal from '../../../components/modal/base/modal.jsx';
import ModalTitle from '../../../components/modal/base/modal-title.jsx';
import TransferHostInfo from './transfer-host-info.jsx';
import TransferHostSelection from './transfer-host-selection.jsx';
import TransferHostConfirmation from './transfer-host-confirmation.jsx';
import './transfer-host-modal.scss';
const STEPS = keyMirror({
info: null,
selection: null,
confirmation: null
});
const TransferHostModal = ({
handleClose
}) => {
const [step, setStep] = useState(STEPS.info);
const [selectedId, setSelectedId] = useState(null);
return (<Modal
isOpen
className="transfer-host-modal"
onRequestClose={handleClose}
>
<ModalTitle
className="transfer-host-title"
title={<FormattedMessage id="studio.transfer" />}
/>
{step === STEPS.info && <TransferHostInfo
handleClose={handleClose}
handleNext={() => setStep(STEPS.selection)} // eslint-disable-line react/jsx-no-bind
/>}
{step === STEPS.selection && <TransferHostSelection
handleClose={handleClose}
handleNext={() => setStep(STEPS.confirmation)} // eslint-disable-line react/jsx-no-bind
handleBack={() => setStep(STEPS.info)} // eslint-disable-line react/jsx-no-bind
handleSelected={setSelectedId}
selectedId={selectedId}
/>}
{step === STEPS.confirmation && <TransferHostConfirmation
handleClose={handleClose}
handleBack={() => setStep(STEPS.selection)} // eslint-disable-line react/jsx-no-bind
selectedId={selectedId}
/>}
</Modal>);
};
TransferHostModal.propTypes = {
handleClose: PropTypes.func
};
export default TransferHostModal;
src/views/studio/modals/transfer-host-modal.scss 0 → 100644
View file @ f312bcf9
@import "../../../colors";
@import "../../../frameless";
.transfer-host-modal {
.transfer-host-title {
background: $ui-blue;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding-top: .75rem;
width: 100%;
height: 3rem;
cursor: pointer;
}
.transfer-info-title {
margin-top: 3rem;
}
h2 {
line-height: 2.5rem;
margin-bottom: 1rem;
}
.list-header {
font-weight: bold;
}
ul {
line-height: 1rem;
margin-top: 0px;
}
.content {
display: flex;
align-items: flex-start;
}
.transfer-host-image {
margin-top: 2rem;
}
.inner {
padding: 1rem;
}
.transfer-host-alert-wrapper {
margin-right: 2rem;
}
.transfer-host-alert-wrapper .alert-wrapper {
position: relative;
display: block;
margin-bottom: 2rem;
}
.transfer-host-alert .alert-msg {
font-size: 1rem;
}
.transfer-host-button-row {
display: flex;
justify-content: flex-end;
padding-top: 1.5rem;
}
.transfer-host-button-row-split {
justify-content: space-between;
}
.transfer-selection-buttons {
padding: 1rem;
}
.button {
margin: 0px;
}
.button:disabled {
background-color: $active-dark-gray;
}
.cancel-button {
background-color: $ui-white;
color: $ui-blue;
box-shadow: 0px 0px 0 1px $ui-blue;
margin-right: 1rem;
}
.next-button {
min-width: 5rem;
}
.transfer-selection-heading {
padding: 1rem;
background: $ui-blue-10percent;
}
.transfer-selection-scroll-pane {
height: 250px;
padding-left: 1rem;
padding-right: 1rem;
background: $ui-blue-10percent;
overflow: auto;
}
.transfer-host-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
@media #{$intermediate-and-smaller} {
& { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
column-gap: 12px;
row-gap: 12px;
margin-bottom: 1rem;
}
.transfer-host-name-selected {
color: white !important;
}
.transfer-selection-icon {
margin: auto 8px;
}
.transfer-host-tile-selected {
background: $ui-aqua;
}
.transfer-password-instruction {
padding: 3rem 3rem 2rem;
}
.transfer-form {
padding: 0px 1rem 1rem;
}
.transfer-password-input {
margin-left: 2rem;
border: 1px solid $ui-border;
border-radius: .5rem;
padding: 0.5rem 1rem;
font-size: 1.5rem;
}
.transfer-password-row {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.transfer-password-validation {
position: relative;
transform: translate(1rem, 0);
}
.col-sm-9 .input {
font-size: 1.5rem;
width: 50%;
}
.transfer-forgot-link {
margin: 0px 2rem 3rem;
}
.transfer-outcome {
background: $ui-blue-10percent;
padding: 2rem 3rem;
display: flex;
}
.transfer-outcome-tile {
width: 220px;
box-shadow: 0px 3px 5px $box-shadow-light-gray;
}
.transfer-outcome-label {
margin-bottom: 0.5rem;
font-weight: bold;
font-size: 12px;
}
.transfer-outcome-arrow {
width: 40px;
margin: auto 3rem 1rem 3rem;
}
}
\ No newline at end of file
src/views/studio/modals/transfer-host-selection.jsx 0 → 100644
View file @ f312bcf9
import React, {useEffect} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {FormattedMessage} from 'react-intl';
import classNames from 'classnames';
import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx';
import TransferHostTile from './transfer-host-tile.jsx';
import {managers} from '../lib/redux-modules';
import {loadManagers} from '../lib/studio-member-actions';
import './transfer-host-modal.scss';
const TransferHostSelection = ({
handleSelected,
handleNext,
handleBack,
loading,
moreToLoad,
onLoadMore,
items,
hostId,
selectedId
}) => {
useEffect(() => {
if (items.length === 0) onLoadMore();
}, []);
return (
<ModalInnerContent>
<div className="transfer-selection-heading">
<h3>
<FormattedMessage id="studio.transfer.whichManager" />
</h3>
</div>
<div className="transfer-selection-scroll-pane">
<div className="transfer-host-grid">
{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">
<button
className={classNames('button', {
'mod-mutating': loading
})}
onClick={onLoadMore}
>
<FormattedMessage id="general.loadMore" />
</button>
</div>
}
</div>
</div>
<div
className="transfer-host-button-row transfer-host-button-row-split transfer-selection-buttons"
>
<button
className="button"
onClick={handleBack}
>
<FormattedMessage id="studio.back" />
</button>
<button
className="button next-button"
disabled={selectedId === null}
onClick={handleNext}
>
<FormattedMessage id="studio.next" />
</button>
</div>
</ModalInnerContent>
);
};
TransferHostSelection.propTypes = {
handleBack: PropTypes.func,
handleNext: PropTypes.func,
handleSelected: PropTypes.func,
items: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.id,
username: PropTypes.string,
profile: PropTypes.shape({
images: PropTypes.shape({
'90x90': PropTypes.string
})
})
})),
loading: PropTypes.bool,
moreToLoad: PropTypes.bool,
onLoadMore: PropTypes.func,
selectedId: PropTypes.number,
hostId: PropTypes.number
};
export default connect(
state => ({
hostId: state.studio.owner,
...managers.selector(state)
}),
{
onLoadMore: loadManagers
}
)(TransferHostSelection);
src/views/studio/modals/transfer-host-tile.jsx 0 → 100644
View file @ f312bcf9
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
const TransferHostTile = ({
className, username, image, selected, handleSelected
}) => (
<div
className={classNames('studio-member-tile', className, {
'transfer-host-tile-selected': selected
})}
onClick={handleSelected}
>
<img
className="studio-member-image"
src={image}
/>
<div className="studio-member-info">
<div
className={classNames('studio-member-name',
{'transfer-host-name-selected': selected}
)}
>
{username}
</div>
</div>
{selected &&
<div className="transfer-selection-icon">
<img src="/svgs/studio/check-icon-white.svg" />
</div>}
</div>
);
TransferHostTile.propTypes = {
className: PropTypes.string,
username: PropTypes.string,
handleSelected: PropTypes.func,
image: PropTypes.string,
selected: PropTypes.bool
};
export default TransferHostTile;
src/views/studio/studio-member-tile.jsx
View file @ f312bcf9
......@@ -7,10 +7,13 @@ import {FormattedMessage} from 'react-intl';
import PromoteModal from './modals/promote-modal.jsx';
import ManagerLimitModal from './modals/manager-limit-modal.jsx';
import TransferHostModal from './modals/transfer-host-modal.jsx';
import {
selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators
selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators,
selectCanTransfer
} from '../../redux/studio-permissions';
import {selectStudioTransferLaunched} from '../../redux/session.js';
import {
Errors,
promoteCurator,
......@@ -26,11 +29,13 @@ import removeIcon from './icons/remove-icon.svg';
import promoteIcon from './icons/curator-icon.svg';
const StudioMemberTile = ({
canRemove, canPromote, onRemove, onPromote, isCreator, hasReachedManagerLimit, // mapState props
canRemove, canPromote, onRemove, canTransferHost, onPromote,
isCreator, hasReachedManagerLimit, // mapState props
username, image // own props
}) => {
const [submitting, setSubmitting] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const [promoteModalOpen, setPromoteModalOpen] = useState(false);
const [transferHostModalOpen, setTransferHostModalOpen] = useState(false);
const [managerLimitReached, setManagerLimitReached] = useState(false);
const {errorAlert, successAlert} = useAlertContext();
const userUrl = `/users/${username}`;
......@@ -49,12 +54,12 @@ const StudioMemberTile = ({
>{username}</a>
{isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
</div>
{(canRemove || canPromote) &&
{(canRemove || canPromote || canTransferHost) &&
<OverflowMenu>
{canPromote && <li>
<button
onClick={() => {
setModalOpen(true);
setPromoteModalOpen(true);
}}
>
<img src={promoteIcon} />
......@@ -82,15 +87,26 @@ const StudioMemberTile = ({
<FormattedMessage id="studio.remove" />
</button>
</li>}
{canTransferHost && <li>
<button
className="studio-member-tile-menu-wide"
onClick={() => {
setTransferHostModalOpen(true);
}}
>
<img src={promoteIcon} />
<FormattedMessage id="studio.transfer" />
</button>
</li>}
</OverflowMenu>
}
{modalOpen &&
{promoteModalOpen &&
((hasReachedManagerLimit || managerLimitReached) ?
<ManagerLimitModal
handleClose={() => setModalOpen(false)}
handleClose={() => setPromoteModalOpen(false)}
/> :
<PromoteModal
handleClose={() => setModalOpen(false)}
handleClose={() => setPromoteModalOpen(false)}
handlePromote={() => {
onPromote(username)
.then(() => {
......@@ -102,7 +118,7 @@ const StudioMemberTile = ({
.catch(error => {
if (error === Errors.MANAGER_LIMIT) {
setManagerLimitReached(true);
setModalOpen(true);
setPromoteModalOpen(true);
} else {
errorAlert({
id: 'studio.alertManagerPromoteError',
......@@ -115,6 +131,11 @@ const StudioMemberTile = ({
/>
)
}
{transferHostModalOpen &&
<TransferHostModal
handleClose={() => setTransferHostModalOpen(false)}
/>
}
</div>
);
};
......@@ -122,6 +143,7 @@ const StudioMemberTile = ({
StudioMemberTile.propTypes = {
canRemove: PropTypes.bool,
canPromote: PropTypes.bool,
canTransferHost: PropTypes.bool,
onRemove: PropTypes.func,
onPromote: PropTypes.func,
username: PropTypes.string,
......@@ -134,6 +156,8 @@ const ManagerTile = connect(
(state, ownProps) => ({
canRemove: selectCanRemoveManager(state, ownProps.id),
canPromote: false,
canTransferHost: selectCanTransfer(state, ownProps.id) &&
selectStudioTransferLaunched(state),
isCreator: state.studio.owner === ownProps.id
}),
{
......
src/views/studio/studio.scss
View file @ f312bcf9
......@@ -399,6 +399,11 @@ $radius: 8px;
background: transparent;
border: none;
}
.studio-member-tile-menu-wide {
white-space: nowrap;
padding-right: 2rem !important;
}
}
.studio-members + .studio-members {
......
static/svgs/messages/host-transfer.svg 0 → 100644
View file @ f312bcf9
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>studio invite - curate</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="studio-invite---curate" stroke="#0FBD8C" stroke-width="0.5" fill="#0FBD8C">
<path d="M4.79352402,7.91196409 C4.33236847,7.83924198 3.91176749,7.63827758 3.57628648,7.34408654 C3.04395515,6.8971911 2.70878357,6.22027595 2.70878357,5.47106889 C2.70878357,4.10409461 3.81287818,3 5.17985246,3 C6.54025475,3 7.64434936,4.10409461 7.64434936,5.47106889 C7.64434936,6.22684794 7.31574978,6.8971911 6.77684646,7.34408654 C7.45371132,7.66612766 8.03860896,8.17873799 8.4789266,8.82278468 C8.97839797,9.55884775 9.29385357,10.4723546 9.33985751,11.4647254 C9.3530015,11.5567332 9.3530015,11.6487411 9.3530015,11.740749 C9.3530015,14.3761177 1,14.3761177 1,11.740749 C1,9.7625795 2.05809067,8.06700563 3.57622076,7.34408654 C3.91171688,7.63829082 4.33234063,7.83926008 4.7935206,7.91197391 Z M5.1798196,7.94213779 C5.78443046,7.94212969 6.34960901,7.71868328 6.77678074,7.34408654 Z M13.2978164,6.8129558 C13.0257815,7.03908523 12.6711936,7.17255025 12.2923394,7.17255025 C11.8914479,7.17255025 11.5234164,7.02796643 11.2473927,6.78480274 C10.6953454,7.04768241 10.235306,7.50772183 9.93956636,8.09262909 C10.4390377,8.82869217 10.7544933,9.74219902 10.8004973,10.7345698 C12.3974913,11.1814652 15,10.8200057 15,9.63704715 C15,8.34893677 14.3099409,7.25141415 13.3307141,6.78480274 C13.3198884,6.79433966 13.3089212,6.80372494 13.2978164,6.8129558 C13.3089156,6.80357933 13.3199522,6.79413636 13.3308455,6.78453986 C13.6725891,6.48880023 13.8894648,6.05504878 13.8894648,5.56872139 C13.8894648,4.6815025 13.1731177,3.9651554 12.2924708,3.9651554 C11.405252,3.9651554 10.6889049,4.6815025 10.6889049,5.56872139 C10.6889049,6.05504878 10.9057806,6.48880023 11.2475242,6.78453986 C11.5235478,7.02770355 11.8915793,7.17228737 12.2924708,7.17228737 C12.6712285,7.17228737 13.0257321,7.03889042 13.2977397,6.81286593 Z" id="studio-icon"></path>
</g>
</g>
</svg>
\ No newline at end of file
static/svgs/studio/icon-alert-error.svg 0 → 100644
View file @ f312bcf9
<svg width="28" height="20" viewBox="-2 -1 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.40571 6.50912C1.50472 6.50912 0.775271 7.23857 0.775271 8.13956C0.775271 9.04055 1.50472 9.77 2.40571 9.77C3.3067 9.77 4.03615 9.04055 4.03615 8.13956C4.03615 7.23857 3.3067 6.50912 2.40571 6.50912ZM3.34168 5.02359C2.92699 5.9523 1.88444 5.9523 1.46975 5.02359L0.145744 2.07519C-0.268945 1.15289 0.250665 0 1.08171 0H3.72972C4.56076 0 5.08037 1.15289 4.66568 2.07519L3.34168 5.02359Z" fill="#FF8C1A"/>
</svg>
static/svgs/studio/r-arrow.svg 0 → 100644
View file @ f312bcf9
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M10.158 16.994c-.311 0-.602-.119-.818-.333L5 12.319a1.182 1.182 0 0 1-.24-1.287c.186-.43.595-.695 1.07-.695h1.646l.84-6.042a1.887 1.887 0 0 1 2.118-1.614c.854.134 1.514.8 1.617 1.62l.862 6.036h1.575c.48 0 .907.282 1.088.717.18.439.083.924-.259 1.265l-4.341 4.342a1.151 1.151 0 0 1-.817.333" id="a"/></defs><use fill="#4C97FF" transform="rotate(-90 10.164 9.83)" xlink:href="#a" fill-rule="evenodd"/></svg>
\ No newline at end of file
static/svgs/studio/transfer-host.svg 0 → 100644
View file @ f312bcf9
<svg width="206" height="323" viewBox="0 0 206 323" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="206" height="323">
<rect width="206" height="323" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<path opacity="0.45" fill-rule="evenodd" clip-rule="evenodd" d="M57.1698 75.3667C119.614 75.3667 180.669 157.21 162.54 212.897C144.41 268.583 110.255 301.467 47.8103 301.467C-14.6341 301.467 -67.2962 234.576 -77.5995 162.852C-87.9028 91.1287 -5.27449 75.3667 57.1698 75.3667Z" fill="#FFBF00"/>
<path opacity="0.45" d="M154.499 271.613C141.292 275.215 125.324 290.465 129.612 300.739C133.899 311.014 148.067 308.614 154.499 304.403C164.309 297.98 169.704 290.21 173.137 283.848C176.571 272.592 167.707 268.011 154.499 271.613Z" fill="#FFBF00"/>
<path d="M109.228 147.374C111.25 146.822 112.833 145.262 113.367 143.244L114.607 138.658C115.198 136.488 118.269 136.488 118.86 138.658L120.1 143.244C120.653 145.262 122.217 146.841 124.239 147.374L128.836 148.611C131.01 149.201 131.01 152.265 128.836 152.855L124.239 154.092C122.217 154.644 120.634 156.205 120.1 158.222L118.86 162.809C118.269 164.979 115.198 164.979 114.607 162.809L113.367 158.222C112.814 156.205 111.25 154.625 109.228 154.092L104.631 152.855C102.456 152.265 102.456 149.201 104.631 148.611L109.228 147.374Z" fill="#FF8C1A"/>
<path d="M166.619 101.223C167.847 100.887 168.808 99.94 169.132 98.7151L169.885 95.9303C170.244 94.6131 172.108 94.6131 172.467 95.9303L173.22 98.7151C173.556 99.94 174.505 100.899 175.733 101.223L178.524 101.974C179.844 102.332 179.844 104.192 178.524 104.55L175.733 105.302C174.505 105.637 173.544 106.584 173.22 107.809L172.467 110.594C172.108 111.911 170.244 111.911 169.885 110.594L169.132 107.809C168.796 106.584 167.847 105.625 166.619 105.302L163.828 104.55C162.508 104.192 162.508 102.332 163.828 101.974L166.619 101.223Z" fill="#FF8C1A"/>
<path d="M48.9051 37.6014C50.1327 37.2663 51.0939 36.3188 51.4181 35.0939L52.1709 32.3091C52.5299 30.9918 54.3944 30.9918 54.7534 32.3091L55.5061 35.0939C55.8419 36.3188 56.7916 37.2778 58.0191 37.6014L60.8101 38.3525C62.1303 38.7107 62.1303 40.571 60.8101 40.9293L58.0191 41.6803C56.7916 42.0154 55.8304 42.963 55.5061 44.1878L54.7534 46.9726C54.3944 48.2899 52.5299 48.2899 52.1709 46.9726L51.4181 44.1878C51.0823 42.963 50.1327 42.0039 48.9051 41.6803L46.1142 40.9293C44.794 40.571 44.794 38.7107 46.1142 38.3525L48.9051 37.6014Z" fill="#FF8C1A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.045 21.2856C127.16 21.1631 127.254 21.0263 127.324 20.8756C128.125 19.1612 125.59 16.2891 121.663 14.4616C117.735 12.6341 113.901 12.5427 113.099 14.2571C113.029 14.4079 112.984 14.5673 112.964 14.7342L112.892 14.7007L43.781 162.583C42.0064 166.38 37.6087 168.12 33.5809 166.956C12.3419 160.817 -6.9133 164.521 -17.5507 187.283C-29.5732 213.008 -13.2696 234.633 13.4903 247.084C40.2502 259.535 68.1618 256.322 79.3551 232.371C89.8032 210.014 80.0619 192.274 61.2653 179.762C57.7657 177.432 56.2595 172.938 58.0399 169.128L108.047 62.1249L139.982 76.9837C141.985 77.9156 144.367 77.0486 145.302 75.0473L156.425 51.247C157.36 49.2456 156.495 46.8677 154.492 45.9358L122.557 31.077L127.117 21.3191L127.045 21.2856ZM21.012 223.698C23.5333 223.086 26.3479 224.396 27.4991 226.716C29.6332 231.017 33.1916 234.651 37.8904 236.838C48.8793 241.95 61.9422 237.206 67.0664 226.242C72.1906 215.277 67.4361 202.243 56.4472 197.13C51.7484 194.944 46.6712 194.56 41.9972 195.693C39.476 196.305 36.6614 194.995 35.5102 192.675C33.376 188.374 29.8176 184.74 25.1188 182.554C14.1299 177.441 1.06704 182.185 -4.05717 193.149C-9.18138 204.114 -4.42689 217.148 6.56202 222.261C11.2608 224.447 16.338 224.831 21.012 223.698Z" fill="#FFBF00"/>
<path d="M-6.37977 204.619C-6.63611 201.027 -6.00652 197.321 -4.37292 193.825C0.751294 182.86 13.8142 178.116 24.8031 183.229C29.533 185.43 33.1073 189.098 35.2366 193.436C36.3559 195.717 39.1183 197.002 41.5887 196.392C46.2882 195.231 51.4015 195.605 56.1315 197.806C62.4675 200.754 66.7309 206.335 68.2231 212.635C67.6754 204.959 63.0827 197.8 55.5971 194.317C50.8671 192.117 45.7539 191.742 41.0543 192.903C38.5839 193.514 35.8215 192.228 34.7022 189.948C32.5729 185.609 28.9986 181.942 24.2687 179.741C13.2798 174.628 0.216909 179.372 -4.9073 190.337C-7.07697 194.979 -7.47558 199.993 -6.37977 204.619Z" fill="#CC9900"/>
<path d="M-20.8038 208.14C-19.1334 224.807 -5.25479 238.599 14.0857 247.597C40.8456 260.048 68.7571 256.835 79.9505 232.884C84.1145 223.974 85.0717 215.797 83.5268 208.392C84.1648 214.854 82.9365 221.862 79.4161 229.395C68.2227 253.347 40.3112 256.559 13.5513 244.109C-4.42293 235.746 -17.6797 223.243 -20.8038 208.14Z" fill="#CC9900"/>
<path d="M-12.9281 187.813C-6.51721 174.095 10.7994 164.834 29.8539 171.54" stroke="white" stroke-width="3" stroke-linecap="round"/>
<line x1="1.5" y1="-1.5" x2="7.31257" y2="-1.5" transform="matrix(-0.423386 0.90595 -0.906665 -0.421852 114.315 18.6029)" stroke="white" stroke-width="3" stroke-linecap="round"/>
<line x1="1.5" y1="-1.5" x2="62.1464" y2="-1.5" transform="matrix(-0.423386 0.90595 -0.906665 -0.421852 108.512 31.0221)" stroke="white" stroke-width="3" stroke-linecap="round"/>
<path d="M116.048 65.8478L107.315 61.7843L105.38 60.884L119.89 29.8361L152.784 45.1412C149.606 49.4222 140.747 57.7921 130.741 57.0243C120.734 56.2565 115.818 62.1406 116.048 65.8478Z" fill="#E6AC00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M127.315 20.8927C127.246 21.0367 127.155 21.1678 127.044 21.2856L127.116 21.3191L57.973 169.269C57.5544 170.165 57.3215 171.1 57.2568 172.034C56.495 170.052 56.1157 166.798 57.0671 164.762L125.789 17.2112C127.141 18.529 127.774 19.8796 127.331 20.8584L127.315 20.8927Z" fill="#CC9900"/>
</g>
</svg>
test/integration/footer-links.test.js
View file @ f312bcf9
// these tests do not sign in as a user
const SeleniumHelper = require('./selenium-helpers.js');
const {
......
test/integration/homepage-rows.test.js
View file @ f312bcf9
// these tests do not sign in as a user
const SeleniumHelper = require('./selenium-helpers.js');
const {
......
test/integration/join.test.js
View file @ f312bcf9
// these tests do not sign in as a user
const SeleniumHelper = require('./selenium-helpers.js');
const {
......
test/integration/my-stuff.test.js
View file @ f312bcf9
// These tests sign in as user #1
const SeleniumHelper = require('./selenium-helpers.js');
const {
......
test/integration/navbar.test.js
View file @ f312bcf9
// These tests do not sign in as a user
const SeleniumHelper = require('./selenium-helpers.js');
const {
......
test/integration/project-page.test.js
View file @ f312bcf9
// These tests do not sign in with a user
const SeleniumHelper = require('./selenium-helpers.js');
const {
......@@ -35,7 +37,7 @@ describe('www-integration project-page signed out', () => {
afterAll(async () => await driver.quit());
// LOGGED OUT TESTS
test('Find fullscreen button', async () => {
await clickXpath('//div[starts-with(@class, "stage_green-flag-overlay")]');
await clickXpath('//img[contains(@alt, "Enter full screen mode")]');
......
test/integration/selenium-helpers.js
View file @ f312bcf9
......@@ -29,6 +29,7 @@ class SeleniumHelper {
'getDriver',
'getLogs',
'getSauceDriver',
'signIn',
'urlMatches',
'waitUntilGone'
]);
......@@ -148,6 +149,18 @@ class SeleniumHelper {
});
}
// must be used on a www page
async signIn (username, password, driver) {
await this.clickXpath('//li[@class="link right login-item"]/a');
let name = await this.findByXpath('//input[@id="frc-username-1088"]');
await name.sendKeys(username);
let word = await this.findByXpath('//input[@id="frc-password-1088"]');
await word.sendKeys(password);
await driver.sleep(500);
await this.clickXpath('//button[contains(@class, "button") and ' +
'contains(@class, "submit-button") and contains(@class, "white")]');
}
urlMatches (regex) {
return this.driver.wait(until.urlMatches(regex), 1000 * 5);
}
......
test/integration/sign-in-and-out.test.js
View file @ f312bcf9
// These tests sign in with user #0 (no number for the username)
const SeleniumHelper = require('./selenium-helpers.js');
const {
......
test/integration/studios-page.test.js
View file @ f312bcf9
// These tests sign in with user #2 and user #3
import SeleniumHelper from './selenium-helpers.js';
const {
findByXpath,
buildDriver
buildDriver,
clickXpath,
clickText,
signIn
} = new SeleniumHelper();
let remote = process.env.SMOKE_REMOTE || false;
let rootUrl = process.env.ROOT_URL || 'https://scratch.ly';
let studioId = process.env.TEST_STUDIO_ID || 10004360;
let studioUrl = rootUrl + '/studios/' + studioId;
let myStuffURL = rootUrl + '/mystuff';
let rateLimitCheck = process.env.RATE_LIMIT_CHECK || rootUrl;
// since the usernames end in 2 and 3 we're using username2 and username3
// username 1 is used in other tests. Hopefully this is not confusing.
let username2 = process.env.SMOKE_USERNAME + '2';
let username3 = process.env.SMOKE_USERNAME + '3';
let password = process.env.SMOKE_PASSWORD;
let promoteStudioURL;
let curatorTab;
if (remote){
jest.setTimeout(60000);
jest.setTimeout(70000);
} else {
jest.setTimeout(20000);
}
......@@ -52,5 +68,83 @@ describe('studio page while signed out', () => {
let descriptionText = await studioDescription.getText();
await expect(descriptionText).toEqual('a description');
});
});
describe('studio management', () => {
// These tests all start on the curators tab of a studio and signed out
beforeAll(async () => {
driver = await buildDriver('www-integration studio management');
await driver.get(rootUrl);
// create a studio for tests
await signIn(username2, password, driver);
await findByXpath('//span[contains(@class, "profile-name")]');
await driver.get(rateLimitCheck);
await driver.get(myStuffURL);
await clickXpath('//form[@id="new_studio"]/button[@type="submit"]');
await findByXpath('//div[@class="studio-tabs"]');
promoteStudioURL = await driver.getCurrentUrl();
curatorTab = promoteStudioURL + 'curators';
});
beforeEach(async () => {
await clickXpath('//a[contains(@class, "user-info")]');
await clickText('Sign out');
await driver.get(curatorTab);
await findByXpath('//div[@class="studio-tabs"]');
});
afterAll(async () => await driver.quit());
test('invite a curator', async () => {
// sign in as user2
await signIn(username2, password, driver);
await findByXpath('//span[contains(@class, "profile-name")]');
// invite user3 to curate
let inviteBox = await findByXpath('//div[@class="studio-adder-row"]/input');
await inviteBox.sendKeys(username3);
await clickXpath('//div[@class="studio-adder-row"]/button');
let inviteAlert = await findByXpath('//div[@class="alert-msg"]'); // the confirm alert
let alertText = await inviteAlert.getText();
let successText = `Curator invite sent to "${username3}"`;
await expect(alertText).toMatch(successText);
});
test('accept curator invite', async () => {
// Sign in user3
await signIn(username3, password, driver);
await findByXpath('//span[contains(@class, "profile-name")]');
// accept the curator invite
await clickXpath('//button[@class="studio-invitation-button button"]');
let acceptSuccess = await findByXpath('//div[contains(@class,"studio-info-box-success")]');
let acceptSuccessVisible = await acceptSuccess.isDisplayed();
await expect(acceptSuccessVisible).toBe(true);
});
test('promote to manager', async () => {
// sign in as user2
await signIn(username2, password, driver);
await findByXpath('//span[contains(@class, "profile-name")]');
// for some reason the user isn't showing up without reloading the page
await driver.get(curatorTab);
// promote user3
let user3href = '/users/' + username3;
// click kebab menu on the user tile
let kebabMenuXpath = `//a[@href = "${user3href}"]/` +
'following-sibling::div[@class="overflow-menu-container"]';
await clickXpath(kebabMenuXpath + '/button[@class="overflow-menu-trigger"]');
// click promote
// await clickXpath('//button[@class="promote-menu-button"]'); //<-- I think this will do it
await clickXpath(kebabMenuXpath + '/ul/li/button/span[contains(text(), "Promote")]/..');
await findByXpath('//div[@class="promote-content"]');
// await clickXpath(//button[contains(@class="promote-button")]) <-- add this selector to the button
await clickXpath('//div[@class="promote-button-row"]/button/span[contains(text(),"Promote")]/..');
let promoteSuccess = await findByXpath('//div[contains(@class, "alert-success")]');
let promoteSuccessVisible = await promoteSuccess.isDisplayed();
await expect(promoteSuccessVisible).toBe(true);
});
});
test/unit/redux/studio-member-actions.test.js
View file @ f312bcf9
......@@ -7,7 +7,8 @@ import {
removeCurator,
inviteCurator,
promoteCurator,
acceptInvitation
acceptInvitation,
transferHost
} from '../../../src/views/studio/lib/studio-member-actions';
import {managers, curators} from '../../../src/views/studio/lib/redux-modules';
import {reducers, initialState} from '../../../src/views/studio/studio-redux';
......@@ -399,4 +400,26 @@ describe('acceptInvitation', () => {
expect(state.studio.invited).toBe(true);
expect(state.studio.curator).toBe(false);
});
describe('transferHost', () => {
beforeEach(() => {
store = configureStore(reducers, {
...initialState,
studio: {
id: 123123,
managers: 3
}
});
});
test('transfers the host on success', async () => {
api.mockImplementation((opts, callback) => {
callback(null, {}, {statusCode: 200});
});
await store.dispatch(transferHost('password', 'newHostName', 'newHostId'));
const state = store.getState();
expect(api.mock.calls[0][0].uri).toBe('/studios/123123/transfer/newHostName');
expect(state.studio.owner).toBe('newHostId');
});
});
});
test/unit/redux/studio-permissions.test.js
View file @ f312bcf9
......@@ -15,6 +15,7 @@ import {
selectCanRemoveManager,
selectCanPromoteCurators,
selectCanRemoveProject,
selectCanTransfer,
selectShowCommentsList,
selectShowCommentsGloballyOffError,
selectShowProjectMuteError,
......@@ -432,6 +433,30 @@ describe('studio members', () => {
expect(selectCanInviteCurators(state)).toBe(expected);
});
});
describe('can transfer host', () => {
test.each([
['admin', true],
['curator', false],
['manager', false],
['creator', true],
['logged in', false],
['unconfirmed', false],
['logged out', false],
['muted creator', true], // Muted users do not see the transfer UI
['muted logged in', false]
])('%s: %s', (role, expected) => {
setStateByRole(role);
state.studio = {...state.studio, managers: 2, classroomId: null};
// Only admin and host see the option to transfer the current host
expect(selectCanTransfer(state, state.studio.owner)).toBe(expected);
// Nobody sees the option to transfer a manager who is not the host
expect(selectCanTransfer(state, 123)).toBe(false);
// Nobody can transfer classroom studios
state.studio = {...state.studio, classroomId: 1};
expect(selectCanTransfer(state, state.studio.owner)).toBe(false);
});
});
});
describe('studio mute errors', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment