Merge pull request #3441 from LLK/release/2019-10-10

[MASTER] Release 2019-10-10

bin/configure-fastly.js

@@ -24,7 +24,7 @@ var routes = routeJson.map(function (route) {
 
 async.auto({
     version: function (cb) {
-        fastly.getLatestVersion(function (err, response) {
+        fastly.getLatestActiveVersion(function (err, response) {
             if (err) return cb(err);
             // Validate latest version before continuing
             if (response.active || response.locked) {

bin/lib/fastly-extended.js

@@ -24,11 +24,11 @@ module.exports = function (apiKey, serviceId) {
     };
 
     /*
-     * getLatestVersion: Get the most recent version for the configured service
+     * getLatestActiveVersion: Get the most recent version for the configured service
      *
      * @param {callback} Callback with signature *err, latestVersion)
      */
-    fastly.getLatestVersion = function (cb) {
+    fastly.getLatestActiveVersion = function (cb) {
         if (!this.serviceId) {
             return cb('Failed to get latest version. No serviceId configured');
         }
@@ -37,11 +37,15 @@ module.exports = function (apiKey, serviceId) {
             if (err) {
                 return cb('Failed to fetch versions: ' + err);
             }
-            var latestVersion = versions.reduce(function (lateVersion, version) {
+            var latestVersion = versions.reduce((latestActiveSoFar, cur) => {
-                if (!lateVersion) return version;
+                // if one of [latestActiveSoFar, cur] is active and the other isn't,
-                if (version.number > lateVersion.number) return version;
+                // return whichever is active. If both are not active, return
-                return lateVersion;
+                // latestActiveSoFar.
-            });
+                if (!cur || !cur.active) return latestActiveSoFar;
+                if (!latestActiveSoFar || !latestActiveSoFar.active) return cur;
+                // when both are active, prefer whichever has a higher version number.
+                return (cur.number > latestActiveSoFar.number) ? cur : latestActiveSoFar;
+            }, null);
             return cb(null, latestVersion);
         });
     };

package.json

@@ -59,7 +59,7 @@
     "autoprefixer": "6.3.6",
     "babel-cli": "6.26.0",
     "babel-core": "6.23.1",
-    "babel-eslint": "10.0.2",
+    "babel-eslint": "10.0.3",
     "babel-loader": "7.1.0",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-plugin-transform-require-context": "0.1.1",
@@ -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.20190926141105",
+    "scratch-gui": "0.1.0-prerelease.20191010184958",
     "scratch-l10n": "latest",
     "selenium-webdriver": "3.6.0",
     "slick-carousel": "1.6.0",

src/components/extension-landing/extension-requirements.jsx

@@ -44,7 +44,7 @@ const ExtensionRequirements = props => (
                                     alt=""
                                     src="svgs/extensions/android.svg"
                                 />
-                                Android 5.0+
+                                Android 6.0+
                             </span>
                         </React.Fragment>
                     )}

src/components/footer/www/footer.jsx

@@ -135,7 +135,7 @@ const Footer = props => (
                     </dd>
                     <dd>
                         <a href="/download">
-                            <FormattedMessage id="general.offlineEditor" />
+                            <FormattedMessage id="general.download" />
                         </a>
                     </dd>
                     <dd>

src/components/formik-forms/formik-checkbox.scss

@@ -26,3 +26,8 @@ input[type="checkbox"].formik-checkbox {
         background-position: center;
     }
 }
+
+.formik-checkbox-label {
+    padding-top: .0625rem;
+    display: block;
+}

src/components/forms/validation-message.scss

@@ -18,6 +18,7 @@
     overflow: visible;
     color: $type-white;
     z-index: 1;
+    font-weight: 500;
 
     &:before {
         display: block;
@@ -82,7 +83,6 @@
 .validation-info {
     background-color: $ui-blue;
     box-shadow: 0 0 4px 2px rgba(0, 0, 0, .15);
-    font-weight: 500;
 
     &:before {
         background-color: $ui-blue;

src/components/install-scratch/install-scratch.jsx

@@ -46,11 +46,16 @@ const InstallScratch = ({
                     >
                         <span className="step-description">
                             <React.Fragment>
-                                {isDownloaded(currentOS) && (
+                                {currentOS === OS_ENUM.WINDOWS && (
                                     <FormattedMessage
-                                        id={CHROME_APP_RELEASED ? 'installScratch.downloadScratchAppGeneric' :
+                                        id={CHROME_APP_RELEASED ? 'installScratch.getScratchAppWindows' :
+                                            'installScratch.downloadScratchDesktop'}
+                                    />
+                                )}
+                                {currentOS === OS_ENUM.MACOS && (
+                                    <FormattedMessage
+                                        id={CHROME_APP_RELEASED ? 'installScratch.getScratchAppMacOs' :
                                             'installScratch.downloadScratchDesktop'}
-                                        values={{operatingsystem: currentOS}}
                                     />
                                 )}
                                 {isFromGooglePlay(currentOS) && (

src/components/join-flow/email-step.jsx

@@ -174,7 +174,7 @@ class EmailStep extends React.Component {
                                 /* eslint-disable react/jsx-no-bind */
                                 onBlur={() => validateField('email')}
                                 onChange={e => {
-                                    setFieldValue('email', e.target.value);
+                                    setFieldValue('email', e.target.value.substring(0, 254));
                                     setFieldTouched('email');
                                     setFieldError('email', null);
                                 }}

src/components/join-flow/gender-step.jsx

@@ -150,8 +150,8 @@ class GenderStep extends React.Component {
                                     value={values.custom}
                                     /* eslint-disable react/jsx-no-bind */
                                     onSetCustom={newCustomVal => setValues({
-                                        gender: newCustomVal,
+                                        gender: newCustomVal.substring(0, 25),
-                                        custom: newCustomVal
+                                        custom: newCustomVal.substring(0, 25)
                                     })}
                                     onSetCustomRef={this.handleSetCustomRef}
                                     /* eslint-enable react/jsx-no-bind */

src/components/join-flow/join-flow-step.scss

@@ -42,10 +42,16 @@
     margin: 0;
     border-top-left-radius: 1rem;
     border-top-right-radius: 1rem;
+
+    /* match the small window setting for modal as a whole */
+    @media #{$small}, #{$small-height} {
+        border-top-left-radius: 0rem;
+        border-top-right-radius: 0rem;
+    }
 }
 
 .join-flow-header-image {
-    width: 27.5rem;
+    width: 100%;
 }
 
 .join-flow-footer-message {
@@ -53,7 +59,11 @@
     padding: 0.875rem 1.5rem;
     background-color: $ui-blue-25percent;
     font-size: .75rem;
-    font-weight: 600;
+    font-weight: 500;
     text-align: center;
     color: $ui-blue;
 }
+
+.join-flow-footer-message a {
+    font-weight: 500;
+}

src/components/join-flow/join-flow-steps.scss

@@ -136,9 +136,8 @@
 }
 
 .join-flow-inner-email-step {
-    padding-top: 1.25rem;
+    padding-top: .75rem;
     padding-bottom: 0;
-    min-height: 16.625rem;
 }
 
 .join-flow-inner-welcome-step {
@@ -217,7 +216,7 @@
 
 .join-flow-email-checkbox-row {
     font-size: .75rem;
-    margin: 1.5rem .125rem .25rem;
+    margin: 1.5rem .125rem 1rem;
 }
 
 a.join-flow-link:link, a.join-flow-link:visited, a.join-flow-link:active {

src/components/join-flow/next-step-button.jsx

@@ -16,14 +16,14 @@ const NextStepButton = props => (
         type="submit"
         {...omit(props, ['intl', 'text', 'waiting'])}
     >
-        {props.waiting ?
+        {props.waiting ? (
-            <Spinner /> : (
+            <Spinner className="next-step-spinner" />
-                <ModalTitle
+        ) : (
-                    className="next-step-title"
+            <ModalTitle
-                    title={props.content ? props.content : props.intl.formatMessage({id: 'general.next'})}
+                className="next-step-title"
-                />
+                title={props.content ? props.content : props.intl.formatMessage({id: 'general.next'})}
-            )
+            />
-        }
+        )}
     </button>
 );
 

src/components/join-flow/next-step-button.scss

@@ -14,6 +14,12 @@
         transition: background-color .25s ease;
         background-color: $ui-orange-90percent;
     }
+
+    /* match the small window setting for modal as a whole */
+    @media #{$small}, #{$small-height} {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 }
 
 .next-step-title {
@@ -22,3 +28,8 @@
     justify-content: center;
     align-items: center;
 }
+
+.next-step-spinner {
+    width: 2.625rem;
+    height: 2.625rem;
+}

src/components/join-flow/username-step.jsx

@@ -20,7 +20,6 @@ class UsernameStep extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleChangeShowPassword',
             'handleFocused',
             'handleSetUsernameRef',
             'handleValidSubmit',
@@ -30,17 +29,13 @@ class UsernameStep extends React.Component {
             'validateForm'
         ]);
         this.state = {
-            focused: null,
+            focused: null
-            showPassword: false
         };
     }
     componentDidMount () {
         // automatically start with focus on username field
         if (this.usernameInput) this.usernameInput.focus();
     }
-    handleChangeShowPassword () {
-        this.setState({showPassword: !this.state.showPassword});
-    }
     // track the currently focused input field, to determine whether each field should
     // display a tooltip. (We only display it if a field is focused and has never been touched.)
     handleFocused (fieldName) {
@@ -114,7 +109,7 @@ class UsernameStep extends React.Component {
                     username: '',
                     password: '',
                     passwordConfirm: '',
-                    showPassword: false
+                    showPassword: true
                 }}
                 validate={this.validateForm}
                 validateOnBlur={false}
@@ -162,7 +157,7 @@ class UsernameStep extends React.Component {
                                     /* eslint-disable react/jsx-no-bind */
                                     onBlur={() => validateField('username')}
                                     onChange={e => {
-                                        setFieldValue('username', e.target.value);
+                                        setFieldValue('username', e.target.value.substring(0, 30));
                                         setFieldTouched('username');
                                         setFieldError('username', null);
                                     }}
@@ -192,7 +187,7 @@ class UsernameStep extends React.Component {
                                         validationClassName="validation-full-width-input"
                                         onBlur={() => validateField('password')}
                                         onChange={e => {
-                                            setFieldValue('password', e.target.value);
+                                            setFieldValue('password', e.target.value.substring(0, 128));
                                             setFieldTouched('password');
                                             setFieldError('password', null);
                                         }}
@@ -230,20 +225,19 @@ class UsernameStep extends React.Component {
                                         validationClassName="validation-full-width-input"
                                         onBlur={() => validateField('passwordConfirm')}
                                         onChange={e => {
-                                            setFieldValue('passwordConfirm', e.target.value);
+                                            setFieldValue('passwordConfirm', e.target.value.substring(0, 128));
                                             setFieldTouched('passwordConfirm');
                                             setFieldError('passwordConfirm', null);
                                         }}
                                         onFocus={() => this.handleFocused('passwordConfirm')}
                                         /* eslint-enable react/jsx-no-bind */
                                     />
-                                    <div className="join-flow-input-title">
+                                    <FormikCheckbox
-                                        <FormikCheckbox
+                                        id="showPassword"
-                                            id="showPassword"
+                                        label={this.props.intl.formatMessage({id: 'registration.showPassword'})}
-                                            label={this.props.intl.formatMessage({id: 'registration.showPassword'})}
+                                        labelClassName="join-flow-input-title"
-                                            name="showPassword"
+                                        name="showPassword"
-                                        />
+                                    />
-                                    </div>
                                 </div>
                             </div>
                         </JoinFlowStep>

src/components/modal/join/modal.scss

@@ -1,6 +1,32 @@
 @import "../../../colors";
 @import "../../../frameless";
 
+/* unusually for a modal, the join flow modal cares about the screen around it
+being clickable, because of the standalone join view. */
 .mod-join {
     width: 27.4375rem;
+
+    @media #{$small} {
+        width: auto;
+    }
+}
+
+/* enable vertical scrolling when modal showing, if page is short */
+.modal-overlay {
+    @media #{$small-height}, #{$medium-height} {
+        overflow: auto;
+    }
+}
+
+.modal-content {
+    @media #{$small}, #{$small-height} {
+        height: unset;
+    }
+}
+
+/* lower the modal slightly to accomodate Scratch logo above it */
+.modal-sizes {
+    @media #{$small}, #{$small-height}, #{$medium}, #{$medium-height} {
+        margin: 3.5rem auto;
+    }
 }

src/components/navigation/www/navigation.jsx

@@ -18,7 +18,6 @@ const LoginDropdown = require('../../login/login-dropdown.jsx');
 const CanceledDeletionModal = require('../../login/canceled-deletion-modal.jsx');
 const NavigationBox = require('../base/navigation.jsx');
 const Registration = require('../../registration/registration.jsx');
-const Scratch3Registration = require('../../registration/scratch3-registration.jsx');
 const AccountNav = require('./accountnav.jsx');
 
 require('./navigation.scss');
@@ -28,6 +27,7 @@ class Navigation extends React.Component {
         super(props);
         bindAll(this, [
             'getProfileUrl',
+            'handleClickRegistration',
             'handleSearchSubmit'
         ]);
         this.state = {
@@ -78,6 +78,13 @@ class Navigation extends React.Component {
         if (!this.props.user) return;
         return `/users/${this.props.user.username}/`;
     }
+    handleClickRegistration (event) {
+        if (this.props.useScratch3Registration) {
+            this.props.navigateToRegistration(event);
+        } else {
+            this.props.handleOpenRegistration(event);
+        }
+    }
     handleSearchSubmit (formData) {
         let targetUrl = '/search/projects';
         if (formData.q) {
@@ -189,9 +196,12 @@ class Navigation extends React.Component {
                                 className="link right join"
                                 key="join"
                             >
+                                {/* there's no css class registrationLink -- this is
+                                just to make the link findable for testing */}
                                 <a
+                                    className="registrationLink"
                                     href="#"
-                                    onClick={this.props.handleOpenRegistration}
+                                    onClick={this.handleClickRegistration}
                                 >
                                     <FormattedMessage id="general.joinScratch" />
                                 </a>
@@ -214,18 +224,10 @@ class Navigation extends React.Component {
                             </li>
                         ]) : []
                     }
-                    {this.props.registrationOpen && (
+                    {this.props.registrationOpen && !this.props.useScratch3Registration && (
-                        this.props.useScratch3Registration ? (
+                        <Registration
-                            <Scratch3Registration
+                            key="registration"
-                                createProjectOnComplete
+                        />
-                                isOpen
-                                key="scratch3registration"
-                            />
-                        ) : (
-                            <Registration
-                                key="registration"
-                            />
-                        )
                     )}
                 </ul>
                 <CanceledDeletionModal />
@@ -243,6 +245,7 @@ Navigation.propTypes = {
     handleToggleAccountNav: PropTypes.func,
     handleToggleLoginOpen: PropTypes.func,
     intl: intlShape,
+    navigateToRegistration: PropTypes.func,
     permissions: PropTypes.shape({
         admin: PropTypes.bool,
         social: PropTypes.bool,
@@ -305,14 +308,24 @@ const mapDispatchToProps = dispatch => ({
         event.preventDefault();
         dispatch(navigationActions.toggleLoginOpen());
     },
+    navigateToRegistration: event => {
+        event.preventDefault();
+        navigationActions.navigateToRegistration();
+    },
     setMessageCount: newCount => {
         dispatch(messageCountActions.setCount(newCount));
     }
 });
 
+// Allow incoming props to override redux-provided props. Used to mock in tests.
+const mergeProps = (stateProps, dispatchProps, ownProps) => Object.assign(
+    {}, stateProps, dispatchProps, ownProps
+);
+
 const ConnectedNavigation = connect(
     mapStateToProps,
-    mapDispatchToProps
+    mapDispatchToProps,
+    mergeProps
 )(Navigation);
 
 module.exports = injectIntl(ConnectedNavigation);

src/components/spinner/spinner.scss

@@ -2,18 +2,13 @@
     /* This class can be used on an icon that should spin.
     It first plays the intro animation, then spins forever. */
     animation-name: intro, spin;
-    animation-duration: .25s, .5s;
+    animation-duration: .25s, 1s;
-    animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear;
+    animation-timing-function: cubic-bezier(.3, -3, .6, 3), cubic-bezier(0.4, 0.1, 0.4, 1);
     animation-delay: 0s, .25s;
     animation-iteration-count: 1, infinite;
     animation-direction: normal;
     width: 1.4rem; /* standard is 1.4 rem but can be overwritten by parent */
     height: 1.4rem;
-    -webkit-animation-name: intro, spin;
-    -webkit-animation-duration: .25s, .5s;
-    -webkit-animation-iteration-count: 1, infinite;
-    -webkit-animation-delay: 0s, .25s;
-    -webkit-animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear;
     transform-origin: center;
 }
 
@@ -21,24 +16,20 @@
     0% {
         transform: scale(0);
         opacity: 0;
-        -webkit-transform: scale(0);
     }
     
     100% {
         transform: scale(1);
         opacity: 1;
-        -webkit-transform: scale(1);
     }
 }
 
 @keyframes spin {
     0% {
         transform: rotate(0);
-        -webkit-transform: rotate(0);
     }
 
     100% {
         transform: rotate(359deg);
-        -webkit-transform: rotate(359deg);
     }
 }

src/l10n.json

@@ -66,7 +66,7 @@
     "general.notRequired": "Not Required",
     "general.okay": "Okay",
     "general.other": "Other",
-    "general.offlineEditor": "Offline Editor",
+    "general.download": "Download",
     "general.password": "Password",
     "general.press": "Press",
     "general.privacyPolicy": "Privacy Policy",
@@ -137,12 +137,14 @@
     "installScratch.or": "or",
     "installScratch.directDownload": "Direct download",
     "installScratch.desktopHeaderTitle": "Install Scratch Desktop",
-    "installScratch.appHeaderTitle": "Install Scratch for {operatingsystem}",
+    "installScratch.appHeaderTitle": "Install the Scratch app for {operatingsystem}",
     "installScratch.downloadScratchDesktop": "Download Scratch Desktop",
     "installScratch.downloadScratchAppGeneric": "Download Scratch for {operatingsystem}",
-    "installScratch.getScratchAppPlay": "Get Scratch on the Google Play Store",
+    "installScratch.getScratchAppPlay": "Get the Scratch app on the Google Play Store",
+    "installScratch.getScratchAppMacOs": "Get the Scratch app on the Mac App Store",
+    "installScratch.getScratchAppWindows": "Get the Scratch app on the Microsoft Store",
     "installScratch.useScratchApp": "Open the Scratch app on your device.",
-    
+
     "installScratchLink.installHeaderTitle": "Install Scratch Link",
     "installScratchLink.downloadAndInstall": "Download and install Scratch Link.",
     "installScratchLink.startScratchLink": "Start Scratch Link and make sure it is running. It should appear in your toolbar.",

src/lib/sentry.js

@@ -0,0 +1,18 @@
+const initSentry = () => {
+    // initialize Sentry instance, making sure it hasn't been initialized already
+    if (!window.Sentry && `${process.env.SENTRY_DSN}` !== '') {
+        const Sentry = require('@sentry/browser');
+
+        Sentry.init({
+            dsn: `${process.env.SENTRY_DSN}`,
+            // Do not collect global onerror, only collect specifically from React error boundaries.
+            // TryCatch plugin also includes errors from setTimeouts (i.e. the VM)
+            integrations: integrations => integrations.filter(i =>
+                !(i.name === 'GlobalHandlers' || i.name === 'TryCatch'))
+        });
+
+        window.Sentry = Sentry; // Allow GUI access to Sentry via window
+    }
+};
+
+module.exports = initSentry;

src/redux/navigation.js

@@ -92,6 +92,10 @@ module.exports.setSearchTerm = searchTerm => ({
     searchTerm: searchTerm
 });
 
+module.exports.navigateToRegistration = () => {
+    window.location = '/join';
+};
+
 module.exports.handleCompleteRegistration = createProject => (dispatch => {
     if (createProject) {
         window.location = '/projects/editor/?tutorial=getStarted';

src/routes.json

@@ -177,12 +177,20 @@
     },
     {
         "name": "projects",
-        "pattern": "^/projects(/editor|(/\\d+(/editor|/fullscreen|/embed)?)?)?/?(\\?.*)?$",
+        "pattern": "^/projects(/editor|(/\\d+(/editor|/fullscreen)?)?)?/?(\\?.*)?$",
         "routeAlias": "/projects/?$",
         "view": "preview/preview",
         "title": "Scratch Project",
         "dynamicMetaTags": true
     },
+    {
+        "name": "embed",
+        "pattern": "^/projects/\\d+/embed/?(\\?.*)?$",
+        "routeAlias": "/projects/?$",
+        "view": "preview/embed",
+        "title": "Scratch Project",
+        "dynamicMetaTags": true
+    },
     {
         "name": "parents",
         "pattern": "^/parents/?(\\?.*)?$",

src/views/download/download.jsx

@@ -95,7 +95,7 @@ class Download extends React.Component {
                                                     alt=""
                                                     src="svgs/extensions/android.svg"
                                                 />
-                                                Android 5.0+
+                                                Android 6.0+
                                             </span>
                                         </React.Fragment>
                                     )}
@@ -181,7 +181,17 @@ class Download extends React.Component {
                             <FormattedMessage id="download.troubleshootingTitle" />
                         </h2>
 
-                        {isDownloaded(this.state.OS) && (
+                        {CHROME_APP_RELEASED && (
+                            <React.Fragment>
+                                <h3 className="faq-question">
+                                    <FormattedMessage id="download.doIHaveToDownload" />
+                                </h3>
+                                <p>
+                                    <FormattedMessage id="download.doIHaveToDownloadAnswer" />
+                                </p>
+                            </React.Fragment>
+                        )}
+                        {!CHROME_APP_RELEASED && (
                             <React.Fragment>
                                 <h3 className="faq-question">
                                     <FormattedMessage id="download.canIUseScratchLink" />
@@ -191,25 +201,29 @@ class Download extends React.Component {
                                 </p>
                             </React.Fragment>
                         )}
-                        {isFromGooglePlay(this.state.OS) && (
+                        {CHROME_APP_RELEASED && (
                             <React.Fragment>
                                 <h3 className="faq-question">
-                                    <FormattedMessage id="download.canIUseExtensions" />
+                                    <FormattedMessage id="download.howConnectHardwareDevices" />
                                 </h3>
-                                <p>
+                                {isDownloaded(this.state.OS) && (
-                                    <FormattedMessage id="download.canIUseExtensionsAnswer" />
+                                    <p>
-                                </p>
+                                        <FormattedMessage
+                                            id="download.howConnectHardwareDevicesAnswerLink"
+                                            values={{operatingsystem: this.state.OS}}
+                                        />
+                                    </p>
+                                )}
+                                {isFromGooglePlay(this.state.OS) && (
+                                    <p>
+                                        <FormattedMessage
+                                            id="download.howConnectHardwareDevicesAnswerApp"
+                                            values={{operatingsystem: this.state.OS}}
+                                        />
+                                    </p>
+                                )}
                             </React.Fragment>
                         )}
-                        <h3 className="faq-question">
-                            {isFromGooglePlay(this.state.OS) ?
-                                <FormattedMessage id="download.appAndBrowser" /> :
-                                <FormattedMessage id="download.desktopAndBrowser" />
-                            }
-                        </h3>
-                        <p>
-                            <FormattedMessage id="download.yesAnswer" />
-                        </p>
                         {isDownloaded(this.state.OS) && (CHROME_APP_RELEASED ? (
                             <React.Fragment>
                                 <h3 className="faq-question">
@@ -248,6 +262,25 @@ class Download extends React.Component {
                                 </p>
                             </React.Fragment>
                         )}
+                        <h3 className="faq-question">
+                            {CHROME_APP_RELEASED ?
+                                <FormattedMessage id="download.appAndBrowser" /> :
+                                <FormattedMessage id="download.desktopAndBrowser" />
+                            }
+                        </h3>
+                        <p>
+                            <FormattedMessage id="download.yesAnswer" />
+                        </p>
+                        {CHROME_APP_RELEASED && (
+                            <React.Fragment>
+                                <h3 className="faq-question">
+                                    <FormattedMessage id="download.onPhone" />
+                                </h3>
+                                <p>
+                                    <FormattedMessage id="download.onPhoneAnswer" />
+                                </p>
+                            </React.Fragment>
+                        )}
                         {!CHROME_APP_RELEASED && (
                             <React.Fragment>
                                 <h3 className="faq-question">
@@ -259,10 +292,16 @@ class Download extends React.Component {
                             </React.Fragment>
                         )}
                         <h3 className="faq-question">
-                            <FormattedMessage id="download.whenSupportLinux" />
+                            {CHROME_APP_RELEASED ?
+                                <FormattedMessage id="download.whenSupportLinuxApp" /> :
+                                <FormattedMessage id="download.whenSupportLinux" />
+                            }
                         </h3>
                         <p>
-                            <FormattedMessage id="download.supportLinuxAnswer" />
+                            {CHROME_APP_RELEASED ?
+                                <FormattedMessage id="download.whenSupportLinuxAppAnswer" /> :
+                                <FormattedMessage id="download.supportLinuxAnswer" />
+                            }
                         </p>
                     </FlexRow>
                 </div>

src/views/download/download.scss

@@ -56,7 +56,7 @@
 
         .download-info {
             padding-right: $cols1;
-            max-width: $cols6 + ($gutter / $em);
+            max-width: $cols7 + ($gutter / $em);
             align-items: flex-start;
 
             .download-copy {
@@ -110,7 +110,7 @@
 
         .download-image {
             width: 100%;
-            max-width: $cols6;
+            max-width: $cols5;
 
             img {
                 max-width: 100%;

src/views/download/l10n.json

@@ -1,35 +1,44 @@
 {
   "download.title": "Scratch Desktop",
   "download.intro": "You can install the Scratch Desktop editor to work on projects without an internet connection. This version will work on Windows and MacOS.",
-  "download.appTitle": "Download Scratch",
+  "download.appTitle": "Download the Scratch App",
-  "download.appIntro": "You can install Scratch for free to work on projects without an internet connection.",
+  "download.appIntro": "Would you like to create and save Scratch projects without an internet connection? Download the free Scratch app.",
   "download.requirements": "Requirements",
   "download.imgAltDownloadIllustration" : "Scratch 3.0 Desktop screenshot",
   "download.troubleshootingTitle": "FAQ",
   "download.startScratchDesktop": "Start Scratch Desktop",
   "download.howDoIInstall": "How do I install Scratch Desktop?",
+  "download.whenSupportLinuxApp": "When will you have the Scratch app available for Linux?",
   "download.whenSupportLinux": "When will you have Scratch Desktop for Linux?",
   "download.supportLinuxAnswer" : "Scratch Desktop on Linux is currently not supported. We are working with partners and the open-source community to determine if there is a way we can support Linux in the future. Stay tuned!",
+  "download.whenSupportLinuxAppAnswer" : "The Scratch app is currently not supported on Linux. We are working with partners and the open-source community to determine if there is a way we can support Linux in the future. Stay tuned!",
   "download.supportChromeOS" : "When will you have Scratch Desktop for Chromebooks?",
   "download.supportChromeOSAnswer": "Scratch Desktop for Chromebooks is not yet available. We are working on it and expect to release later in 2019.",
   "download.olderVersionsTitle" : "Older Versions",
-  "download.olderVersions": "Looking for earlier Scratch Offline Editors?",
+  "download.olderVersions": "Looking for an earlier version of Scratch?",
   "download.scratch1-4Desktop" : "Scratch 1.4",
   "download.scratch2Desktop" : "Scratch 2.0 Offline Editor",
   "download.cannotAccessMacStore" : "What if I can't access the Mac App Store?",
   "download.cannotAccessWindowsStore" : "What if I can't access the Microsoft Store?",
   "download.macMoveToApplications" :  "Open the .dmg file. Move Scratch Desktop into Applications.",
   "download.winMoveToApplications" : "Run the .exe file.",
+  "download.doIHaveToDownload" : "Do I have to download an app to use Scratch?",
+  "download.doIHaveToDownloadAnswer" : "No. You can also use the Scratch project editor in any web browser on any device by going to scratch.mit.edu and clicking \"Create\".",
   "download.canIUseScratchLink" : "Can I use Scratch Link to connect to extensions?",
   "download.canIUseScratchLinkAnswer" : "Yes. However, you will need an Internet connection to use Scratch Link.",
   "download.canIUseExtensions" : "Can I connect to hardware extensions?",
   "download.canIUseExtensionsAnswer" : "Yes. With the Scratch app you can connect to extensions, and you do not need Scratch Link.",
+  "download.howConnectHardwareDevices" : "How do I connect the Scratch app to hardware devices?",
+  "download.howConnectHardwareDevicesAnswerLink" : "You will need to install and run Scratch Link in order to connect to hardware devices when using Scratch app for {operatingsystem}. You will also need an internet connection to use Scratch Link.",
+  "download.howConnectHardwareDevicesAnswerApp" : "With the Scratch app you can connect to hardware devices like the micro:bit or LEGO Boost. When using the Scratch app for {operatingsystem} you do not need Scratch Link.",
   "download.desktopAndBrowser": "Can I use Scratch Desktop and also have Scratch open in the browser?",
   "download.appAndBrowser": "Can I use the Scratch app and also have Scratch open in the browser?",
   "download.yesAnswer" : "Yes.",
+  "download.onPhone": "Can I install Scratch on my Android phone?",
+  "download.onPhoneAnswer" : "No. The current version of Scratch for Android only works on tablets.",
   "download.canIShare": "Can I share from Scratch Desktop?",
   "download.canIShareAnswer": "This isn’t supported currently. For now, you can save a project from Scratch Desktop, upload it to your Scratch account, and share it there. In a later version we will add the ability to upload to your Scratch account directly in Scratch Desktop.",
-  "download.canIShareApp": "Can I share from Scratch for {operatingsystem}?",
+  "download.canIShareApp": "Can I share to the online community from the Scratch app for {operatingsystem}?",
-  "download.canIShareAnswerPlayStore": "Yes. Click the 3-dots menu on a project in the lobby and select Share from the options. In addition to sharing by email you can sign in to your Scratch account and share the project on the Scratch Community.",
+  "download.canIShareAnswerPlayStore": "Yes. Click the 3-dots menu on a project in the lobby and select \"Share\" from the options. In addition to sharing by email, you can sign in to your Scratch account and share a project to the Scratch online community.",
-  "download.canIShareAnswerDownloaded": "This isn’t supported currently. For now, you can save a project from Scratch for {operatingsystem}, upload it to your Scratch account, and share it there. In a later version we will add the ability to upload to your Scratch account directly in Scratch for {operatingsystem}."
+  "download.canIShareAnswerDownloaded": "Sharing directly to online community from the Scratch app for {operatingsystem} is not currently supported. For now, you can export a project from the Scratch app, then log onto the Scratch website, and upload and share your project there."
 }

src/views/faq/faq.jsx

@@ -59,7 +59,7 @@ const Faq = injectIntl(props => (
                         <li><FormattedMessage
                             id="faq.requirementsNoteDesktop"
                             values={{downloadLink: (
-                                <a href="/download"><FormattedMessage id="faq.scratchDesktop" /></a>
+                                <a href="/download"><FormattedMessage id="faq.scratchApp" /></a>
                             )}}
                         /></li>
                         <li><FormattedMessage id="faq.requirementsNoteWebGL" /></li>
@@ -69,7 +69,7 @@ const Faq = injectIntl(props => (
                     <dd><FormattedMessage
                         id="faq.offlineBody"
                         values={{downloadLink: (
-                            <a href="/download"><FormattedMessage id="faq.scratchDesktop" /></a>
+                            <a href="/download"><FormattedMessage id="faq.scratchApp" /></a>
                         )}}
                     /></dd>
 
@@ -482,7 +482,7 @@ const Faq = injectIntl(props => (
                         id="faq.noInternetBody"
                         values={{downloadLink: (
                             <a href="/download">
-                                <FormattedMessage id="faq.scratchDesktop" />
+                                <FormattedMessage id="faq.scratchApp" />
                             </a>
                         )}}
                     /></dd>
@@ -523,7 +523,7 @@ const Faq = injectIntl(props => (
                             id="faq.lawComplianceBody2"
                             values={{downloadLink: (
                                 <a href="/download">
-                                    <FormattedMessage id="faq.scratchDesktop" />
+                                    <FormattedMessage id="faq.scratchApp" />
                                 </a>
                             )}}
                         />

src/views/faq/l10n.json

@@ -30,11 +30,11 @@
 	"faq.requirementsTabletSafari":"Mobile Safari (11+)",
 	"faq.requirementsNote":"Note:",
 	"faq.requirementsNoteDesktop":"If your computer doesn’t meet these requirements, you can try the {downloadLink} editor (see next item in FAQ). ",
-            "faq.scratchDesktop":"Scratch Desktop",
+            "faq.scratchApp":"Scratch app",
 	"faq.requirementsNoteWebGL":"If you encounter a WebGL error, try a different browser.",
 	"faq.requirementsNoteTablets":"On tablets, there is currently not a way to use \"key pressed\" blocks or right-click context menus.",
     "faq.offlineTitle":"Do you have a downloadable version so I can create and view projects offline?",
-    "faq.offlineBody":"The Scratch Desktop editor allows you to create Scratch projects without an internet connection. You can download {downloadLink} from the website. This was previously called the Scratch Offline editor.",
+    "faq.offlineBody":"The Scratch app allows you to create Scratch projects without an internet connection. You can download the {downloadLink} from the Scratch website or the app store for your device. (This was previously called the \"Scratch Offline Editor\").",
     "faq.uploadOldTitle":"Can I still upload projects created with older versions of Scratch to the website?",
     "faq.uploadOldBody":"Yes: You can share or upload projects made with earlier versions of Scratch, and they will be visible and playable. (However, you can’t download projects made with or edited in later versions of Scratch and open them in earlier versions. For example, you can’t open a Scratch 3.0 project in the desktop version of {scratch2Link}, because Scratch 2.0 doesn’t know how to read the .sb3 project file format.)",
         "faq.scratch2":"Scratch 2.0",
@@ -182,9 +182,9 @@
     "faq.howBody":"Scratch is used in hundreds of thousands of schools around the world, in many different subject areas (including language arts, science, history, math, and computer science). You can learn more about strategies and resources for using Scratch in schools and other learning environments (such as museums, libraries, and community centers) on our {educatorsLink}.",
         "faq.educatorsLinkText":"Educators Page",
     "faq.noInternetTitle":"Is there a way for students to use Scratch without an internet connection?",
-    "faq.noInternetBody":"Yes. {downloadLink} is a version of Scratch that runs on a desktop or laptop computer. Currently, Scratch Desktop is available for Mac and Windows machines.",
+    "faq.noInternetBody":"Yes. The {downloadLink} is a downloadable version of Scratch that can run on laptops and desktops. Currently, the Scratch app is available on Windows and Mac devices.",
     "faq.communityTitle":"Can I turn off the online community for my students?",
-    "faq.communityBody":"The Scratch online community provides a way for young people to share, collaborate, and learn with their peers within a moderated community governed by the Scratch {cgLink}. However, we understand that some educators prefer that their students not participate in an online community. These educators may wish to install Scratch Desktop, which runs offline and locally on a desktop or laptop computer.",
+    "faq.communityBody":"The Scratch online community provides a way for young people to share, collaborate, and learn with their peers within a moderated community governed by the Scratch {cgLink}. However, we understand that some educators prefer that their students not participate in an online community. These educators may wish to install the Scratch app, which runs offline and locally on a desktop or laptop computer.",
     "faq.teacherAccountTitle":"What is a Scratch Teacher Account?",
     "faq.teacherAccountBody":"A Scratch Teacher Account provides teachers and other educators with additional features to manage student participation on Scratch, including the ability to create student accounts, organize student projects into studios, and monitor student comments. For more information on Scratch Teacher Accounts, see the {eduFaqLink}.",
         "faq.eduFaqLinkText":"Scratch Teacher Account FAQ",
@@ -192,7 +192,7 @@
     "faq.requestBody":"You may request a Scratch Teacher Account from the {educatorsLink} on Scratch. We ask for additional information during the registration process in order to verify your role as an educator.",
     "faq.dataTitle":"What data does Scratch collect about students?",
     "faq.dataBody":"When a student first signs up on Scratch, we ask for basic demographic data including gender, age (birth month and year), country, and an email address for verification. This data is used (in aggregated form) in research studies intended to improve our understanding of how people learn with Scratch. When an educator uses a Scratch Teacher Account to create student accounts in bulk, students are not required to provide an email address for account setup.",
-    "faq.lawComplianceTitle":"Is Scratch (online version) compliant with United States local and federal data privacy laws?",
+    "faq.lawComplianceTitle":"Is the online version of Scratch compliant with United States local and federal data privacy laws?",
     "faq.lawComplianceBody1":"Scratch cares deeply about the privacy of students and of all individuals who use our platform. We have in place physical and electronic procedures to protect the information we collect on the Scratch website. Although we are not in a position to offer contractual guarantees with each entity that uses our free educational product, we are in compliance with all United States federal laws that are applicable to MIT and the Scratch Foundation, the organizations that have created and maintained Scratch. We encourage you to read the Scratch Privacy Policy for more information.",
-    "faq.lawComplianceBody2":"If you would like to build projects with Scratch without submitting any Personal Information to us, you can download {downloadLink}. Projects created in Scratch Desktop are not accessible by the Scratch Team, and using Scratch Desktop  does not disclose any personally identifying information to Scratch unless you upload these projects to the Scratch online community."
+    "faq.lawComplianceBody2":"If you would like to build projects with Scratch without submitting any Personal Information to us, you can download the {downloadLink}. Projects created in the Scratch app are not accessible by the Scratch Team, and using the Scratch app does not disclose any personally identifying information to Scratch unless you upload these projects to the Scratch online community."
 }

src/views/ideas/l10n.json

@@ -27,8 +27,8 @@
     "ideas.tryTheTutorial": "Try the tutorial",
     "ideas.codingCards": "Coding Cards",
     "ideas.educatorGuide": "Educator Guide",
-    "ideas.desktopEditorHeader": "Scratch Desktop Download",
+    "ideas.desktopEditorHeader": "Scratch App Download",
-    "ideas.desktopEditorBody": "To create projects without an Internet connection, you can <a href=\"/download\">download Scratch Desktop</a>.",
+    "ideas.desktopEditorBody": "To create projects without an Internet connection, you can <a href=\"/download\">download the Scratch app</a>.",
     "ideas.questionsHeader": "Questions",
     "ideas.questionsBody": "Have more questions? See the <a href=\"/info/faq\">Frequently Asked Questions</a> or visit the <a href=\"/discuss/7/\">Help with Scripts Forum</a>.",
 

src/views/join/join.scss

@@ -8,21 +8,11 @@
     left: calc(25% - 76px);
 
     .logo {
-      width: 76px;
+        width: 76px;
-  }
+    }
 }
 
-@media #{$small} {
+@media #{$small}, #{$medium}, #{$intermediate} {
-    .join {
-        left: calc(50% - 38px);
-    }
-}
-@media #{$medium} {
-    .join {
-        left: calc(50% - 38px);
-    }
-}
-@media #{$intermediate} {
     .join {
         left: calc(50% - 38px);
     }

src/views/parents/l10n.json

@@ -34,8 +34,8 @@
   "parents.faqPrivacyPolicyBody": "To protect children's online privacy, we limit what we collect during the signup process, and what we make public on the website. We don't sell or rent account information to anyone. You can find out more about our {privacyPolicy} page.",
   "parents.faqFAQLinkText": "frequently asked questions page",
   "parents.faqOfflineTitle": "Is there a way to use Scratch without participating online?",
-  "parents.faqOfflineBody" : "The Scratch Desktop editor allows you to create Scratch projects without an internet connection. You can download {scratchDesktop} from the website. This was previously called the Scratch Offline editor.",
+  "parents.faqOfflineBody" : "Yes, the Scratch app allows you to create Scratch projects without an internet connection. You can download the {scratchApp} from the Scratch website or the app store on your device.",
-  "parents.faqScratchDesktop": "Scratch Desktop",
+  "parents.faqScratchApp": "Scratch app",
   "parents.faqOffline2LinkText": "Scratch 2.0 offline editor",
   "parents.faqOffline14LinkText": "Scratch 1.4 offline editor"
 }

src/views/parents/parents.jsx

@@ -247,10 +247,10 @@ const Landing = () => (
                                 <FormattedMessage
                                     id="parents.faqOfflineBody"
                                     values={{
-                                        scratchDesktop: (
+                                        scratchApp: (
                                             <a href="/download">
                                                 <FormattedMessage
-                                                    id="parents.faqScratchDesktop"
+                                                    id="parents.faqScratchApp"
                                                 />
                                             </a>
                                         )

src/views/preview/embed-view.jsx

@@ -0,0 +1,97 @@
+// embed view
+
+const React = require('react');
+const PropTypes = require('prop-types');
+const connect = require('react-redux').connect;
+const injectIntl = require('react-intl').injectIntl;
+
+const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx');
+const projectShape = require('./projectshape.jsx').projectShape;
+const NotAvailable = require('../../components/not-available/not-available.jsx');
+const Meta = require('./meta.jsx');
+
+const previewActions = require('../../redux/preview.js');
+
+const GUI = require('scratch-gui');
+const IntlGUI = injectIntl(GUI.default);
+
+const initSentry = require('../../lib/sentry.js');
+initSentry();
+
+class EmbedView extends React.Component {
+    constructor (props) {
+        super(props);
+        const pathname = window.location.pathname.toLowerCase();
+        const parts = pathname.split('/').filter(Boolean);
+        this.state = {
+            extensions: [],
+            invalidProject: parts.length === 1,
+            projectId: parts[1]
+        };
+    }
+    componentDidMount () {
+        this.props.getProjectInfo(this.state.projectId);
+    }
+    render () {
+        if (this.props.projectNotAvailable || this.state.invalidProject) {
+            return (
+                <ErrorBoundary>
+                    <div className="preview">
+                        <NotAvailable />
+                    </div>
+                </ErrorBoundary>
+            );
+        }
+
+        return (
+            <React.Fragment>
+                <Meta projectInfo={this.props.projectInfo} />
+                <IntlGUI
+                    assetHost={this.props.assetHost}
+                    basePath="/"
+                    className="gui"
+                    projectHost={this.props.projectHost}
+                    projectId={this.state.projectId}
+                    projectTitle={this.props.projectInfo.title}
+                />
+            </React.Fragment>
+        );
+    }
+}
+
+EmbedView.propTypes = {
+    assetHost: PropTypes.string.isRequired,
+    getProjectInfo: PropTypes.func.isRequired,
+    projectHost: PropTypes.string.isRequired,
+    projectInfo: projectShape,
+    projectNotAvailable: PropTypes.bool
+};
+
+EmbedView.defaultProps = {
+    assetHost: process.env.ASSET_HOST,
+    projectHost: process.env.PROJECT_HOST
+};
+
+const mapStateToProps = state => ({
+    projectInfo: state.preview.projectInfo,
+    projectNotAvailable: state.preview.projectNotAvailable
+});
+
+const mapDispatchToProps = dispatch => ({
+    getProjectInfo: (id, token) => {
+        dispatch(previewActions.getProjectInfo(id, token));
+    }
+});
+
+module.exports.View = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(EmbedView);
+
+GUI.setAppElement(document.getElementById('app'));
+module.exports.initGuiState = GUI.initEmbedded;
+module.exports.guiReducers = GUI.guiReducers;
+module.exports.guiInitialState = GUI.guiInitialState;
+module.exports.guiMiddleware = GUI.guiMiddleware;
+module.exports.initLocale = GUI.initLocale;
+module.exports.localesInitialState = GUI.localesInitialState;

src/views/preview/embed.jsx

@@ -0,0 +1,30 @@
+const React = require('react');
+const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx');
+const render = require('../../lib/render.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 previewActions = require('../../redux/preview.js');
+
+const isSupportedBrowser = require('../../lib/supported-browser').default;
+const UnsupportedBrowser = require('./unsupported-browser.jsx');
+
+if (isSupportedBrowser()) {
+    const EmbedView = require('./embed-view.jsx');
+    render(
+        <EmbedView.View />,
+        document.getElementById('app'),
+        {
+            preview: previewActions.previewReducer,
+            ...EmbedView.guiReducers
+        },
+        {
+            locales: EmbedView.initLocale(EmbedView.localesInitialState, window._locale),
+            scratchGui: EmbedView.initGuiState(EmbedView.guiInitialState)
+        },
+        EmbedView.guiMiddleware
+    );
+} else {
+    render(<ErrorBoundary><UnsupportedBrowser /></ErrorBoundary>, document.getElementById('app'));
+}

src/views/preview/project-view.jsx

@@ -35,17 +35,8 @@ const IntlGUI = injectIntl(GUI.default);
 
 const localStorageAvailable = 'localStorage' in window && window.localStorage !== null;
 
-const Sentry = require('@sentry/browser');
+const initSentry = require('../../lib/sentry.js');
-if (`${process.env.SENTRY_DSN}` !== '') {
+initSentry();
-    Sentry.init({
-        dsn: `${process.env.SENTRY_DSN}`,
-        // Do not collect global onerror, only collect specifically from React error boundaries.
-        // TryCatch plugin also includes errors from setTimeouts (i.e. the VM)
-        integrations: integrations => integrations.filter(i =>
-            !(i.name === 'GlobalHandlers' || i.name === 'TryCatch'))
-    });
-    window.Sentry = Sentry; // Allow GUI access to Sentry via window
-}
 
 class Preview extends React.Component {
     constructor (props) {
@@ -258,7 +249,7 @@ class Preview extends React.Component {
                     // this is a project.json as an object
                     // validate expects a string or buffer as input
                     // TODO not sure if we need to check that it also isn't a data view
-                    input = JSON.stringify(input);
+                    input = JSON.stringify(input); // NOTE: what is the point of doing this??
                 }
                 parser(projectAsset.data, false, (err, projectData) => {
                     if (err) {
@@ -1092,16 +1083,13 @@ module.exports.initGuiState = guiInitialState => {
     const parts = pathname.split('/').filter(Boolean);
     // parts[0]: 'projects'
     // parts[1]: either :id or 'editor'
-    // parts[2]: undefined if no :id, otherwise either 'editor', 'fullscreen' or 'embed'
+    // parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen'
     if (parts.indexOf('editor') === -1) {
         guiInitialState = GUI.initPlayer(guiInitialState);
     }
     if (parts.indexOf('fullscreen') !== -1) {
         guiInitialState = GUI.initFullScreen(guiInitialState);
     }
-    if (parts.indexOf('embed') !== -1) {
-        guiInitialState = GUI.initEmbedded(guiInitialState);
-    }
     return guiInitialState;
 };
 

test/unit/components/navigation.test.jsx

@@ -0,0 +1,70 @@
+const React = require('react');
+const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx');
+import configureStore from 'redux-mock-store';
+const Navigation = require('../../../src/components/navigation/www/navigation.jsx');
+const sessionActions = require('../../../src/redux/session.js');
+
+describe('Navigation', () => {
+    const mockStore = configureStore();
+    let store;
+
+    beforeEach(() => {
+        store = null;
+    });
+
+    const getNavigationWrapper = props => {
+        const wrapper = shallowWithIntl(
+            <Navigation
+                {...props}
+            />
+            , {context: {store}}
+        );
+        return wrapper
+            .dive() // unwrap redux connect(injectIntl(JoinFlow))
+            .dive(); // unwrap injectIntl(JoinFlow)
+    };
+
+    test('when using old join flow, clicking Join Scratch attemps to open registration', () => {
+        store = mockStore({
+            navigation: {
+                useScratch3Registration: false
+            },
+            session: {
+                status: sessionActions.Status.FETCHED
+            },
+            messageCount: {
+                messageCount: 0
+            }
+        });
+        const props = {
+            handleOpenRegistration: jest.fn()
+        };
+        const navWrapper = getNavigationWrapper(props);
+        const navInstance = navWrapper.instance();
+
+        navWrapper.find('a.registrationLink').simulate('click');
+        expect(navInstance.props.handleOpenRegistration).toHaveBeenCalled();
+    });
+
+    test('when using new join flow, clicking Join Scratch attemps to navigate to registration', () => {
+        store = mockStore({
+            navigation: {
+                useScratch3Registration: true
+            },
+            session: {
+                status: sessionActions.Status.FETCHED
+            },
+            messageCount: {
+                messageCount: 0
+            }
+        });
+        const props = {
+            navigateToRegistration: jest.fn()
+        };
+        const navWrapper = getNavigationWrapper(props);
+        const navInstance = navWrapper.instance();
+
+        navWrapper.find('a.registrationLink').simulate('click');
+        expect(navInstance.props.navigateToRegistration).toHaveBeenCalled();
+    });
+});

test/unit/lib/fastly-extended.test.js

@@ -0,0 +1,160 @@
+describe('fastly library', () => {
+    let mockedFastlyRequest = {};
+
+    jest.mock('fastly', () => (() => ({
+        request: mockedFastlyRequest
+    })));
+    const fastlyExtended = require('../../../bin/lib/fastly-extended'); // eslint-disable-line global-require
+
+    test('getLatestActiveVersion returns largest active VCL number, ' +
+        'when called with VCLs in sequential order', done => {
+        mockedFastlyRequest = jest.fn((method, url, cb) => {
+            cb(null, [
+                {
+                    number: 1,
+                    active: false
+                },
+                {
+                    number: 2,
+                    active: false
+                },
+                {
+                    number: 3,
+                    active: true
+                },
+                {
+                    number: 4,
+                    active: false
+                }
+            ]);
+        });
+        const fastlyInstance = fastlyExtended('api_key', 'service_id');
+
+        fastlyInstance.getLatestActiveVersion((err, response) => {
+            expect(err).toBe(null);
+            expect(response).toEqual({
+                number: 3,
+                active: true
+            });
+            expect(mockedFastlyRequest).toHaveBeenCalledWith(
+                'GET', '/service/service_id/version', expect.any(Function)
+            );
+            done();
+        });
+    });
+
+    test('getLatestActiveVersion returns largest active VCL number, when called with VCLs in mixed up order', done => {
+        mockedFastlyRequest = jest.fn((method, url, cb) => {
+            cb(null, [
+                {
+                    number: 4,
+                    active: false
+                },
+                {
+                    number: 1,
+                    active: false
+                },
+                {
+                    number: 2,
+                    active: true
+                },
+                {
+                    number: 3,
+                    active: false
+                }
+            ]);
+        });
+        const fastlyInstance = fastlyExtended('api_key', 'service_id');
+
+        fastlyInstance.getLatestActiveVersion((err, response) => {
+            expect(err).toBe(null);
+            expect(response).toEqual({
+                number: 2,
+                active: true
+            });
+            expect(mockedFastlyRequest).toHaveBeenCalledWith(
+                'GET', '/service/service_id/version', expect.any(Function)
+            );
+            done();
+        });
+    });
+
+    test('getLatestActiveVersion returns null, when none of the VCL versions are active', done => {
+        mockedFastlyRequest = jest.fn((method, url, cb) => {
+            cb(null, [
+                {
+                    number: 4,
+                    active: false
+                },
+                {
+                    number: 1,
+                    active: false
+                },
+                {
+                    number: 2,
+                    active: false
+                },
+                {
+                    number: 3,
+                    active: false
+                }
+            ]);
+        });
+        const fastlyInstance = fastlyExtended('api_key', 'service_id');
+
+        fastlyInstance.getLatestActiveVersion((err, response) => {
+            expect(err).toBe(null);
+            expect(response).toEqual(null);
+            expect(mockedFastlyRequest).toHaveBeenCalledWith(
+                'GET', '/service/service_id/version', expect.any(Function)
+            );
+            done();
+        });
+    });
+
+    test('getLatestActiveVersion returns largest active VCL number, ' +
+        'when called with a single active VCL', done => {
+        mockedFastlyRequest = jest.fn((method, url, cb) => {
+            cb(null, [
+                {
+                    number: 1,
+                    active: true
+                }
+            ]);
+        });
+        const fastlyInstance = fastlyExtended('api_key', 'service_id');
+
+        fastlyInstance.getLatestActiveVersion((err, response) => {
+            expect(err).toBe(null);
+            expect(response).toEqual({
+                number: 1,
+                active: true
+            });
+            expect(mockedFastlyRequest).toHaveBeenCalledWith(
+                'GET', '/service/service_id/version', expect.any(Function)
+            );
+            done();
+        });
+    });
+
+    test('getLatestActiveVersion returns null, when called with a single inactive VCL', done => {
+        mockedFastlyRequest = jest.fn((method, url, cb) => {
+            cb(null, [
+                {
+                    number: 1,
+                    active: false
+                }
+            ]);
+        });
+        const fastlyInstance = fastlyExtended('api_key', 'service_id');
+
+        fastlyInstance.getLatestActiveVersion((err, response) => {
+            expect(err).toBe(null);
+            expect(response).toEqual(null);
+            expect(mockedFastlyRequest).toHaveBeenCalledWith(
+                'GET', '/service/service_id/version', expect.any(Function)
+            );
+            done();
+        });
+    });
+});