Merge branch 'develop' into feature/studio-project-modal

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.20210505040706",
+    "scratch-gui": "0.1.0-prerelease.20210509040505",
     "scratch-l10n": "latest",
     "selenium-webdriver": "3.6.0",
     "slick-carousel": "1.6.0",

src/_colors.scss

@@ -26,6 +26,7 @@ $background-color: hsla(0, 0, 99, 1); //#FDFDFD
 /* 3.0 colors */
 /* Using www naming convention for now, should be consistent with gui */
 $ui-aqua: hsla(163, 85, 40, 1); // #0FBD8C Extension Primary
+$ui-aqua-dark: hsla(163, 85, 30, 1); // #0B8E69 Extension Aqua 3
 $ui-purple: hsla(260, 100, 70, 1); // #9966FF Looks Primary
 $ui-purple-dark: hsla(260, 60, 60, 1); // #774DCB Looks Secondary
 $ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */

src/components/forms/button.jsx

@@ -6,21 +6,38 @@ const React = require('react');
 require('./button.scss');
 
 const Button = props => {
-    const classes = classNames('button', props.className);
+    const classes = classNames('button', props.className, {'close-button': props.isCloseType});
 
     return (
         <button
             className={classes}
-            {...omit(props, ['className', 'children'])}
+            {...omit(props, ['className', 'children', 'isCloseType'])}
         >
-            {props.children}
+            {
+                props.isCloseType ? (
+                    <img
+                        alt="close-icon"
+                        className="modal-content-close-img"
+                        draggable="false"
+                        src="/svgs/modal/close-x.svg"
+                    />
+                ) : [
+                    props.children
+                ]
+            }
         </button>
     );
 };
 
 Button.propTypes = {
     children: PropTypes.node,
-    className: PropTypes.string
+    className: PropTypes.string,
+    isCloseType: PropTypes.bool
+};
+
+Button.defaultProps = {
+    className: '',
+    isCloseType: false
 };
 
 module.exports = Button;

src/components/forms/button.scss

@@ -53,3 +53,22 @@ $pass-bg: $ui-aqua;
         margin-right: -.25rem;
     }
 }
+
+.close-button {
+    padding: 0;
+
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    border-radius: 1rem;
+    background-color: $active-gray;
+    cursor: pointer;
+    width: 2rem;
+    height: 2rem;
+    text-align: center;
+    line-height: 2rem;
+}
+
+.close-button img {
+    padding-top: 0.5rem;
+}

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.js

@@ -91,6 +91,7 @@ const selectStudioDescription = state => state.studio.description;
 const selectStudioImage = state => state.studio.image;
 const selectStudioOpenToAll = state => state.studio.openToAll;
 const selectStudioCommentsAllowed = state => state.studio.commentsAllowed;
+const selectStudioLoadFailed = state => state.studio.infoStatus === Status.ERROR;
 const selectIsFetchingInfo = state => state.studio.infoStatus === Status.FETCHING;
 const selectIsFollowing = state => state.studio.following;
 const selectIsFetchingRoles = state => state.studio.rolesStatus === Status.FETCHING;
@@ -157,6 +158,7 @@ module.exports = {
     selectStudioImage,
     selectStudioOpenToAll,
     selectStudioCommentsAllowed,
+    selectStudioLoadFailed,
     selectIsFetchingInfo,
     selectIsFetchingRoles,
     selectIsFollowing

src/views/developers/developers.jsx

@@ -363,9 +363,9 @@ const Developers = () => (
                                         githubLink: (
                                             <a href="https://github.com/LLK/">GitHub</a>
                                         ),
-                                        emailLink: (
-                                            <a href="mailto:help@scratch.mit.edu">
-                                                help@scratch.mit.edu
+                                        contactUsLink: (
+                                            <a href="https://scratch.mit.edu/contact-us/">
+                                                <FormattedMessage id="general.contactUs" />
                                             </a>
                                         )
                                     }}

src/views/developers/l10n.json

@@ -56,5 +56,5 @@
   "developers.faqDifferencesTitle": "What’s the difference between Blockly and Scratch Blocks?",
   "developers.faqDifferencesBody": "Scratch Blocks builds upon the Blockly code base, and is specifically designed with our principles in mind to support creative learning experiences.",
   "developers.faqCollabTitle": "I’d like to collaborate. How do I get in touch?",
-  "developers.faqCollabBody": "You can reach us over on {githubLink} or you can send an email to {emailLink}. We look forward to hearing from you!"
+  "developers.faqCollabBody": "You can reach us over on {githubLink} or on our {contactUsLink} page. We look forward to hearing from you!"
 }

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/splash/donate/donate-banner.jsx

+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const PropTypes = require('prop-types');
+const React = require('react');
+
+const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+const Button = require('../../../components/forms/button.jsx');
+
+require('./donate-banner.scss');
+
+const navigateToDonatePage = () => {
+    window.location = 'https://secure.donationpay.org/scratchfoundation';
+};
+
+const DonateTopBanner = ({
+    onRequestClose
+}) => (
+    <TitleBanner className="donate-banner">
+        <div className="donate-container">
+            <img
+                className="donate-icon"
+                src="/images/ideas/try-it-icon.svg"
+            />
+            <div className="donate-central-items">
+                <p className="donate-text">
+                    <FormattedMessage id="donatebanner.askSupport" />
+                </p>
+                <Button
+                    className="donate-button"
+                    key="add-to-studio-button"
+                    onClick={navigateToDonatePage}
+                >
+                    <FormattedMessage id="general.donate" />
+                </Button>
+            </div>
+        </div>
+        <Button
+            isCloseType
+            className="donate-close-button"
+            key="closeButton"
+            name="closeButton"
+            type="button"
+            onClick={onRequestClose}
+        >
+            <div className="action-button-text">
+                <FormattedMessage id="general.close" />
+            </div>
+        </Button>
+    </TitleBanner>
+);
+
+DonateTopBanner.propTypes = {
+    onRequestClose: PropTypes.func
+};
+
+module.exports = injectIntl(DonateTopBanner);

src/views/splash/donate/donate-banner.scss

+@import "../../../colors";
+@import "../../../frameless";
+
+$tile-height: 244px;
+
+.donate-banner {
+    display: flex;
+    position: fixed;
+    z-index: 8;
+    background-color: $ui-aqua-dark;
+    padding: 0;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+
+    .donate-container {
+        display: flex;
+        margin: 0.375rem auto;
+        align-items: center;
+
+        .donate-icon {
+            margin: 0.6875rem;
+            width: 1.75rem;
+            height: 1.75rem;
+        }
+
+        .donate-central-items {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+
+        .donate-text {
+            text-align: left;
+            color: $ui-white;
+            font-size: 1rem;
+            font-weight: bold;
+            margin-right: 1rem;
+            max-width: 70vw;
+        }
+
+        .donate-button {
+            margin: 0 7rem 0 .5rem;
+            border-radius: 1.25rem;
+            background-color: $ui-white;
+            color: $ui-aqua-dark;
+            padding: 0 1.75rem;
+            height: 2.25rem;
+            text-decoration: none;
+            line-height: .875rem;
+            font-size: 1rem;
+            font-weight: bold;
+        }
+    }
+
+    .donate-close-button {
+        right: 1rem;
+        top: auto;
+    }
+}
+
+@media only screen and (max-width: $mobileIntermediate) {
+    .donate-banner .donate-container .donate-central-items {
+        flex-wrap: wrap;
+    }
+    .donate-banner .donate-container .donate-icon {
+        padding-bottom: 2rem;
+    }
+    .donate-banner .donate-container .donate-button {
+        margin-left: 0;
+        margin-bottom: 1rem
+    }
+    .donate-banner .donate-close-button {
+        top: 1rem;
+    }
+}

src/views/splash/l10n.json

@@ -29,6 +29,8 @@
     "intro.watchVideo": "Watch Video",
     "news.scratchNews": "Scratch News",
 
+    "donatebanner.askSupport": "Scratch is the world's largest free coding community for kids. Your support makes a difference.",
+
     "teacherbanner.greeting": "Hi",
     "teacherbanner.subgreeting": "Teacher Account",
     "teacherbanner.classesButton": "My Classes",

src/views/splash/presentation.jsx

@@ -32,12 +32,10 @@ const LoveProjectMessage = require('./activity-rows/love-project.jsx');
 const RemixProjectMessage = require('./activity-rows/remix-project.jsx');
 const ShareProjectMessage = require('./activity-rows/share-project.jsx');
 
-// Hour of Code Banner Components
-const TopBanner = require('./hoc/top-banner.jsx');
-const MiddleBanner = require('./hoc/middle-banner.jsx');
-
-const HOC_START_TIME = 1605484800000; // 2020-11-16 00:00:00
-const HOC_END_TIME = 1608681600000; // 2020-12-23 00:00:00
+// Banner Components
+const DonateBanner = require('./donate/donate-banner.jsx');
+const HOCTopBanner = require('./hoc/top-banner.jsx');
+const HOCMiddleBanner = require('./hoc/middle-banner.jsx');
 
 require('./splash.scss');
 
@@ -352,6 +350,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
 
         const formatHTMLMessage = this.props.intl.formatHTMLMessage;
         const formatMessage = this.props.intl.formatMessage;
+
         const messages = {
             'general.viewAll': formatMessage({id: 'general.viewAll'}),
             'news.scratchNews': formatMessage({id: 'news.scratchNews'}),
@@ -412,21 +411,28 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                     />
                 ] : []}
                 {
-                    this.props.sessionStatus === sessionActions.Status.FETCHED &&
-                    Object.keys(this.props.user).length === 0 && (// Only show top banner if user is not logged in
-                        (Date.now() >= HOC_START_TIME && Date.now() < HOC_END_TIME) ? (
-                            <MediaQuery
-                                key="frameless-tablet"
-                                minWidth={frameless.tabletPortrait}
-                            >
-                                <TopBanner />
-                            </MediaQuery>
-                        ) : (
-                            <Intro
-                                key="intro"
-                                messages={messages}
-                            />
-                        )
+                    this.props.shouldShowHOCTopBanner && (
+                        <MediaQuery
+                            key="frameless-tablet"
+                            minWidth={frameless.tabletPortrait}
+                        >
+                            <HOCTopBanner />
+                        </MediaQuery>
+                    )
+                }
+                {
+                    this.props.shouldShowDonateBanner && (
+                        <DonateBanner
+                            onRequestClose={this.props.onCloseDonateBanner}
+                        />
+                    )
+                }
+                {
+                    this.props.shouldShowIntro && (
+                        <Intro
+                            key="intro"
+                            messages={messages}
+                        />
                     )
                 }
                 <div
@@ -464,17 +470,14 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                     {featured.shift()}
                 </div>
                 {
-                    this.props.sessionStatus === sessionActions.Status.FETCHED &&
-                    Object.keys(this.props.user).length !== 0 && // Only show if user is logged in
-                    Date.now() >= HOC_START_TIME && // Show middle banner on and after Dec 3
-                    Date.now() < HOC_END_TIME && // Hide middle banner after Dec 14
-                    false && // we did not use this middle banner in last HoC
-                    <MediaQuery
-                        key="frameless-desktop"
-                        minWidth={frameless.tabletPortrait}
-                    >
-                        <MiddleBanner />
-                    </MediaQuery>
+                    this.props.shouldShowHOCMiddleBanner && (
+                        <MediaQuery
+                            key="frameless-desktop"
+                            minWidth={frameless.tabletPortrait}
+                        >
+                            <HOCMiddleBanner />
+                        </MediaQuery>
+                    )
                 }
 
                 <div
@@ -573,6 +576,7 @@ SplashPresentation.propTypes = {
     lovedByFollowing: PropTypes.arrayOf(PropTypes.object),
     news: PropTypes.arrayOf(PropTypes.object),
     onCloseAdminPanel: PropTypes.func.isRequired,
+    onCloseDonateBanner: PropTypes.func.isRequired,
     onDismiss: PropTypes.func.isRequired,
     onHideEmailConfirmationModal: PropTypes.func.isRequired,
     onOpenAdminPanel: PropTypes.func.isRequired,
@@ -581,7 +585,11 @@ SplashPresentation.propTypes = {
     refreshCacheStatus: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     sessionStatus: PropTypes.string.isRequired,
     sharedByFollowing: PropTypes.arrayOf(PropTypes.object),
+    shouldShowDonateBanner: PropTypes.bool.isRequired,
     shouldShowEmailConfirmation: PropTypes.bool.isRequired,
+    shouldShowHOCTopBanner: PropTypes.bool.isRequired,
+    shouldShowIntro: PropTypes.bool.isRequired,
+    shouldShowHOCMiddleBanner: PropTypes.bool.isRequired,
     shouldShowWelcome: PropTypes.bool.isRequired,
     user: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
 };

src/views/splash/splash.jsx

@@ -12,6 +12,11 @@ const splashActions = require('../../redux/splash.js');
 const Page = require('../../components/page/www/page.jsx');
 const SplashPresentation = require('./presentation.jsx');
 
+const SCRATCH_WEEK_START_TIME = 1621224000000; // 2021-05-17 00:00:00
+const SCRATCH_WEEK_END_TIME = 1621828800000; // 2021-05-24 00:00:00
+const HOC_START_TIME = 1605484800000; // 2020-11-16 00:00:00
+const HOC_END_TIME = 1608681600000; // 2020-12-23 00:00:00
+
 class Splash extends React.Component {
     constructor (props) {
         super(props);
@@ -22,6 +27,7 @@ class Splash extends React.Component {
             'handleShowEmailConfirmationModal',
             'handleHideEmailConfirmationModal',
             'handleCloseAdminPanel',
+            'handleCloseDonateBanner',
             'handleOpenAdminPanel',
             'handleDismiss',
             'shouldShowWelcome',
@@ -29,8 +35,9 @@ class Splash extends React.Component {
         ]);
         this.state = {
             adminPanelOpen: false,
+            dismissedDonateBanner: false,
             news: [], // gets news posts from the scratch Tumblr
-            emailConfirmationModalOpen: false, // flag that determines whether to show banner to request email conf.
+            emailConfirmationModalOpen: false,
             refreshCacheStatus: 'notrequested'
         };
     }
@@ -114,6 +121,9 @@ class Splash extends React.Component {
     handleOpenAdminPanel () {
         this.setState({adminPanelOpen: true});
     }
+    handleCloseDonateBanner () {
+        this.setState({dismissedDonateBanner: true});
+    }
     handleShowEmailConfirmationModal () {
         this.setState({emailConfirmationModalOpen: true});
     }
@@ -144,8 +154,33 @@ class Splash extends React.Component {
             this.props.flags.confirm_email_banner
         );
     }
+    shouldShowHOCTopBanner () {
+        return (
+            this.props.sessionStatus === sessionActions.Status.FETCHED && // done fetching session
+            Object.keys(this.props.user).length === 0 && // no user session found
+            Date.now() >= HOC_START_TIME &&
+            Date.now() < HOC_END_TIME
+        );
+    }
+    shouldShowHOCMiddleBanner () {
+        return false; // we did not use this middle banner in last HoC
+    }
+    shouldShowDonateBanner () {
+        return (
+            this.state.dismissedDonateBanner === false &&
+            this.props.sessionStatus === sessionActions.Status.FETCHED && // done fetching session
+            Object.keys(this.props.user).length === 0 && // no user session found
+            Date.now() >= SCRATCH_WEEK_START_TIME &&
+            Date.now() < SCRATCH_WEEK_END_TIME &&
+            this.shouldShowHOCTopBanner() !== true
+        );
+    }
     render () {
         const showEmailConfirmation = this.shouldShowEmailConfirmation() || false;
+        const showDonateBanner = this.shouldShowDonateBanner() || false;
+        const showHOCTopBanner = this.shouldShowHOCTopBanner() || false;
+        const showHOCMiddleBanner = this.shouldShowHOCMiddleBanner() || false;
+        const showIntro = showHOCTopBanner !== true;
         const showWelcome = this.shouldShowWelcome();
         const homepageRefreshStatus = this.getHomepageRefreshStatus();
 
@@ -163,9 +198,14 @@ class Splash extends React.Component {
                 refreshCacheStatus={homepageRefreshStatus}
                 sessionStatus={this.props.sessionStatus}
                 sharedByFollowing={this.props.shared}
+                shouldShowDonateBanner={showDonateBanner}
                 shouldShowEmailConfirmation={showEmailConfirmation}
+                shouldShowHOCTopBanner={showHOCTopBanner}
+                shouldShowIntro={showIntro}
+                shouldShowHOCMiddleBanner={showHOCMiddleBanner}
                 shouldShowWelcome={showWelcome}
                 user={this.props.user}
+                onCloseDonateBanner={this.handleCloseDonateBanner}
                 onCloseAdminPanel={this.handleCloseAdminPanel}
                 onDismiss={this.handleDismiss}
                 onHideEmailConfirmationModal={this.handleHideEmailConfirmationModal}

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.browseProjects": "Browse Projects",
+
+    "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"
+}
\ No newline at end of file

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

@@ -3,6 +3,7 @@ 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';
 
@@ -26,7 +27,7 @@ const StudioCuratorInvite = ({onSubmit}) => {
                             setSubmitting(false);
                         });
                 }}
-            >Accept invite</button>
+            ><FormattedMessage id="studio.curatorAcceptInvite" /></button>
             {error && <div>{error}</div>}
         </div>
     );

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

@@ -3,6 +3,7 @@ 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';
 import FlexRow from '../../components/flex-row/flex-row.jsx';
@@ -14,7 +15,7 @@ const StudioCuratorInviter = ({onSubmit}) => {
 
     return (
         <div className="studio-adder-section">
-            <h3>✦ Invite Curators</h3>
+            <h3><FormattedMessage id="studio.inviteCuratorsHeader" /></h3>
             <FlexRow>
                 <input
                     disabled={submitting}
@@ -36,7 +37,7 @@ const StudioCuratorInviter = ({onSubmit}) => {
                             .catch(e => setError(e))
                             .then(() => setSubmitting(false));
                     }}
-                >Invite</button>
+                ><FormattedMessage id="studio.inviteCurator" /></button>
                 {error && <div>{error}</div>}
             </FlexRow>
         </div>

src/views/studio/studio-curators.jsx

 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
 
 import {curators} from './lib/redux-modules';
 import Debug from './debug.jsx';
@@ -18,7 +19,7 @@ const StudioCurators = ({
     }, []);
 
     return (<div className="studio-members">
-        <h2>Curators</h2>
+        <h2><FormattedMessage id="studio.curatorsHeader" /></h2>
         {canInviteCurators && <CuratorInviter />}
         {showCuratorInvite && <CuratorInvite />}
         {error && <Debug
@@ -37,7 +38,7 @@ const StudioCurators = ({
                 {loading ? <small>Loading...</small> : (
                     moreToLoad ?
                         <button onClick={onLoadMore}>
-                    Load more
+                            <FormattedMessage id="general.loadMore" />
                         </button> :
                         <small>No more to load</small>
                 )}

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-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';
@@ -15,7 +16,7 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
 
     return (
         <div className="studio-members">
-            <h2>Managers</h2>
+            <h2><FormattedMessage id="studio.managersHeader" /></h2>
             {error && <Debug
                 label="Error"
                 data={error}
@@ -33,7 +34,7 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
                     {loading ? <small>Loading...</small> : (
                         moreToLoad ?
                             <button onClick={onLoadMore}>
-                            Load more
+                                <FormattedMessage id="general.loadMore" />
                             </button> :
                             <small>No more to load</small>
                     )}

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

@@ -3,6 +3,7 @@ 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
@@ -33,7 +34,7 @@ const StudioMemberTile = ({
                     href={userUrl}
                     className="studio-member-name"
                 >{username}</a>
-                {isCreator && <div className="studio-member-role">Studio Creator</div>}
+                {isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
             </div>
             {canRemove &&
                 <button

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

@@ -3,6 +3,7 @@ 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';
 import UserProjectsModal from './modals/user-projects-modal.jsx';
@@ -16,7 +17,7 @@ const StudioProjectAdder = ({onSubmit}) => {
     
     return (
         <div className="studio-adder-section">
-            <h3>✦ Add Projects</h3>
+            <h3><FormattedMessage id="studio.addProjectsHeader" /></h3>
             <FlexRow>
                 <input
                     disabled={submitting}
@@ -38,14 +39,14 @@ const StudioProjectAdder = ({onSubmit}) => {
                             .catch(e => setError(e))
                             .then(() => setSubmitting(false));
                     }}
-                >Add</button>
+                ><FormattedMessage id="studio.addProject" /></button>
                 {error && <div>{error}</div>}
                 <div className="studio-adder-vertical-divider" />
                 <button
                     className="button"
                     onClick={() => setModalOpen(true)}
                 >
-                    Browse Projects
+                    <FormattedMessage id="studio.browseProjects" />
                 </button>
                 {modalOpen && <UserProjectsModal onRequestClose={() => setModalOpen(false)} />}
             </FlexRow>

src/views/studio/studio-projects.jsx

@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import StudioOpenToAll from './studio-open-to-all.jsx';
+import {FormattedMessage} from 'react-intl';
 
 import {projects} from './lib/redux-modules';
 import {selectCanAddProjects, selectCanEditOpenToAll} from '../../redux/studio-permissions';
@@ -19,7 +20,7 @@ const StudioProjects = ({
     
     return (
         <div className="studio-projects">
-            <h2>Projects</h2>
+            <h2><FormattedMessage id="studio.projectsHeader" /></h2>
             {canEditOpenToAll && <StudioOpenToAll />}
             {canAddProjects && <StudioProjectAdder />}
             {error && <Debug
@@ -43,7 +44,7 @@ const StudioProjects = ({
                     {loading ? <small>Loading...</small> : (
                         moreToLoad ?
                             <button onClick={onLoadMore}>
-                            Load more
+                                <FormattedMessage id="general.loadMore" />
                             </button> :
                             <small>No more to load</small>
                     )}

src/views/studio/studio-report.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+import {FormattedMessage} from 'react-intl';
 
 import {
     Fields,
@@ -24,15 +25,15 @@ const StudioReport = ({
     <div>
         <h3>Reporting</h3>
         {canReport && (
-            <button onClick={handleOpen}>Report</button>
+            <button onClick={handleOpen}><FormattedMessage id="general.report" /></button>
         )}
         {isOpen && (
             <div style={{padding: '1rem', margin: '1rem', border: '1px solid green'}}>
-                <div>Report Studio Modal</div>
+                <div><FormattedMessage id="report.studio" /></div>
                 {previouslyReported ? (
                     <React.Fragment>
                         <div>Submitted the report!</div>
-                        <button onClick={handleClose}>Close</button>
+                        <button onClick={handleClose}><FormattedMessage id="general.close" /></button>
                     </React.Fragment>
                 ) : (
                     <React.Fragment>
@@ -40,9 +41,9 @@ const StudioReport = ({
                             value={field}
                             onChange={e => handleSetField(e.target.value)}
                         >
-                            <option value={Fields.TITLE}>Title</option>
-                            <option value={Fields.DESCRIPTION}>Description</option>
-                            <option value={Fields.THUMBNAIL}>Thumbnail</option>
+                            <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>
@@ -54,9 +55,9 @@ const StudioReport = ({
                             disabled={isSubmitting}
                             onClick={handleSubmit}
                         >
-                                Submit
+                            <FormattedMessage id="report.send" />
                         </button>
-                        <button onClick={handleClose}>Cancel</button>
+                        <button onClick={handleClose}><FormattedMessage id="general.cancel" /></button>
                     </React.Fragment>
                 )}
             </div>

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

@@ -6,9 +6,14 @@ import {
     Redirect,
     useRouteMatch
 } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
 
 import Page from '../../components/page/www/page.jsx';
 import render from '../../lib/render.jsx';
+import NotAvailable from '../../components/not-available/not-available.jsx';
+
 
 import StudioTabNav from './studio-tab-nav.jsx';
 import StudioProjects from './studio-projects.jsx';
@@ -26,56 +31,68 @@ import {
     userProjects
 } from './lib/redux-modules';
 
-const {getInitialState, studioReducer} = require('../../redux/studio');
+const {getInitialState, studioReducer, selectStudioLoadFailed} = require('../../redux/studio');
 const {studioReportReducer} = require('../../redux/studio-report');
 const {commentsReducer} = require('../../redux/comments');
 const {studioMutationsReducer} = require('../../redux/studio-mutations');
 
 import './studio.scss';
 
-const StudioShell = () => {
+const StudioShell = ({studioLoadFailed}) => {
     const match = useRouteMatch();
 
     return (
-        <div className="studio-shell">
-            <div className="studio-info">
-                <StudioInfo />
-            </div>
-            <div className="studio-tabs">
-                <StudioTabNav />
-                <div>
-                    <Switch>
-                        <Route path={`${match.path}/curators`}>
-                            <StudioManagers />
-                            <StudioCurators />
-                        </Route>
-                        <Route path={`${match.path}/comments`}>
-                            <StudioComments />
-                        </Route>
-                        <Route path={`${match.path}/activity`}>
-                            <StudioActivity />
-                        </Route>
-                        <Route path={`${match.path}/projects`}>
-                            {/* We can force /projects back to / this way */}
-                            <Redirect to={match.url} />
-                        </Route>
-                        <Route path={match.path}>
-                            <StudioProjects />
-                        </Route>
-                    </Switch>
+        studioLoadFailed ?
+            <NotAvailable /> :
+            <div className="studio-shell">
+                <div className="studio-info">
+                    <StudioInfo />
+                </div>
+                <div className="studio-tabs">
+                    <StudioTabNav />
+                    <div>
+                        <Switch>
+                            <Route path={`${match.path}/curators`}>
+                                <StudioManagers />
+                                <StudioCurators />
+                            </Route>
+                            <Route path={`${match.path}/comments`}>
+                                <StudioComments />
+                            </Route>
+                            <Route path={`${match.path}/activity`}>
+                                <StudioActivity />
+                            </Route>
+                            <Route path={`${match.path}/projects`}>
+                                {/* We can force /projects back to / this way */}
+                                <Redirect to={match.url} />
+                            </Route>
+                            <Route path={match.path}>
+                                <StudioProjects />
+                            </Route>
+                        </Switch>
+                    </div>
                 </div>
             </div>
-        </div>
     );
 };
 
+StudioShell.propTypes = {
+    studioLoadFailed: PropTypes.bool
+};
+
+const ConnectedStudioShell = connect(
+    state => ({
+        studioLoadFailed: selectStudioLoadFailed(state)
+    }),
+)(StudioShell);
+
 render(
     <Page className="studio-page">
         <Router>
             <Switch>
                 {/* Use variable studioPath to support /studio-playground/ or future route */}
                 <Route path="/:studioPath/:studioId">
-                    <StudioShell />
+                    <ConnectedStudioShell />
                 </Route>
             </Switch>
         </Router>

src/views/teachers/faq/faq.jsx

@@ -50,25 +50,6 @@ const TeacherFaq = props => (
                     <dd><FormattedHTMLMessage id="teacherfaq.teacherSignUpBody" /></dd>
                     <dt><FormattedMessage id="teacherfaq.classMultipleTeachersTitle" /></dt>
                     <dd><FormattedMessage id="teacherfaq.classMultipleTeachersBody" /></dd>
-                    <dt><FormattedMessage id="teacherfaq.convertToTeacherTitle" /></dt>
-                    <dd>
-                        <FormattedMessage
-                            id="teacherfaq.convertToTeacherList"
-                            values={{
-                                helpEmail: (
-                                    <a href="mailto:help@scratch.mit.edu">
-                                        help@scratch.mit.edu
-                                    </a>
-                                )
-                            }}
-                        />
-                    </dd>
-                    <ul>
-                        <li><FormattedMessage id="teacherfaq.convertToTeacherUsername" /></li>
-                        <li><FormattedMessage id="teacherfaq.convertToTeacherEmail" /></li>
-                        <li><FormattedMessage id="teacherfaq.convertToTeacherBirth" /></li>
-                    </ul>
-
                     <dt><FormattedMessage id="teacherfaq.teacherPersonalTitle" /></dt>
                     <dd><FormattedMessage id="teacherfaq.teacherPersonalBody" /></dd>
                     <dt><FormattedMessage id="teacherfaq.teacherGoogleTitle" /></dt>

src/views/teachers/faq/l10n.json

@@ -10,11 +10,6 @@
     "teacherfaq.teacherSignUpBody": "To request a Teacher Account, please go to the teacher account <a href=\"/educators/register\">request form</a>.",
     "teacherfaq.classMultipleTeachersTitle": "Can a class have multiple teachers?",
     "teacherfaq.classMultipleTeachersBody": "A class can only have one teacher account associated with it.",
-    "teacherfaq.convertToTeacherTitle": "I already have a Scratch account, can you make it a Teacher account?",
-    "teacherfaq.convertToTeacherList": "Please send an email to {helpEmail} and be sure to include the following information:",
-    "teacherfaq.convertToTeacherUsername": "Your Scratch username (Please double check that you know your username by logging into it before contacting us!)",
-    "teacherfaq.convertToTeacherEmail": "The email address associated with your Scratch account",
-    "teacherfaq.convertToTeacherBirth": "The birth month and birth year associated with your Scratch account",
     "teacherfaq.teacherPersonalTitle": "Why do you need to know my personal information during registration?",
     "teacherfaq.teacherPersonalBody": "We use this information to verify the account creator is an educator. We will not share this information with anyone else, and it will not be shared publicly on the site.",
     "teacherfaq.teacherGoogleTitle": "Does Scratch connect with Google Classroom, Clever or any other classroom management service?",