Merge pull request #4200 from LLK/develop

Merge develop into release

Author: picklesrus

package-lock.json

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

package.json

@@ -2,12 +2,15 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const intlShape = require('react-intl').intlShape;
 const MediaQuery = require('react-responsive').default;
+const connect = require('react-redux').connect;
+const PropTypes = require('prop-types');
 const React = require('react');
 
 const FooterBox = require('../container/footer.jsx');
 const LanguageChooser = require('../../languagechooser/languagechooser.jsx');
 
 const frameless = require('../../../lib/frameless');
+const getScratchWikiLink = require('../../../lib/scratch-wiki');
 
 require('./footer.scss');
 
@@ -108,7 +111,7 @@ const Footer = props => (
                         </a>
                     </dd>
                     <dd>
-                        <a href="https://en.scratch-wiki.info/">
+                        <a href={props.scratchWikiLink}>
                             <FormattedMessage id="general.wiki" />
                         </a>
                     </dd>
@@ -213,7 +216,13 @@ const Footer = props => (
 );
 
 Footer.propTypes = {
-    intl: intlShape.isRequired
+    intl: intlShape.isRequired,
+    scratchWikiLink: PropTypes.string
 };
 
-module.exports = injectIntl(Footer);
+const mapStateToProps = (state, ownProps) => ({
+    scratchWikiLink: getScratchWikiLink(ownProps.intl.locale)
+});
+
+const ConnectedFooter = connect(mapStateToProps)(Footer);
+module.exports = injectIntl(ConnectedFooter);

src/components/footer/www/footer.jsx

@@ -35,6 +35,12 @@
             content: "";
         }
 
+        img {
+            display: block;
+            max-width: 133px;
+            max-height: 100px;
+        }
+
         &.blue {
             #{$color-bars} {
                 background-color: $ui-blue;
@@ -43,6 +49,10 @@
             a {
                 color: $ui-blue;
             }
+
+            img {
+                margin-left: 4px;
+            }
         }
 
         &.green {

src/components/welcome/welcome.scss

@@ -0,0 +1,24 @@
+// This list has to be updated when a new Scratch Wiki is made.
+// Note that wikis under testwiki are not included.
+const wwwLocaleToScratchWikiLocale = {
+    en: 'en',
+    ja: 'ja',
+    fr: 'fr',
+    de: 'de',
+    ru: 'ru',
+    hu: 'hu',
+    nl: 'nl',
+    id: 'id'
+};
+
+const getScratchWikiLink = locale => {
+    if (!wwwLocaleToScratchWikiLocale.hasOwnProperty(locale)) {
+        locale = locale.split('-')[0];
+        if (!wwwLocaleToScratchWikiLocale.hasOwnProperty(locale)) {
+            locale = 'en';
+        }
+    }
+    return `https://${wwwLocaleToScratchWikiLocale[locale]}.scratch-wiki.info/`;
+};
+
+module.exports = getScratchWikiLink;

src/lib/scratch-wiki.js

@@ -1,14 +1,23 @@
 const React = require('react');
 const Helmet = require('react-helmet').default;
+const PropTypes = require('prop-types');
 
 const projectShape = require('./projectshape.jsx').projectShape;
 
 const Meta = props => {
     const {id, title, instructions, author} = props.projectInfo;
 
-    // Do not want to render any meta tags unless all the info is loaded
-    // Check only author (object) because it is ok to have empty string instructions
-    if (!author) return null;
+    if (!author) {
+        // Project info is not ready. It's either fetching state, or logged-out users creating project.
+        if (!props.userPresent) {
+            return (
+                <Helmet>
+                    <title>Scratch - Imagine, Program, Share</title>
+                </Helmet>
+            );
+        }
+        return null;
+    }
 
     const truncatedInstructions = instructions.split(' ')
         .slice(0, 50)
@@ -38,7 +47,8 @@ const Meta = props => {
 };
 
 Meta.propTypes = {
-    projectInfo: projectShape
+    projectInfo: projectShape,
+    userPresent: PropTypes.bool
 };
 
 module.exports = Meta;

src/views/preview/meta.jsx

@@ -444,6 +444,8 @@ $stage-width: 480px;
         font-size: .875rem;
         flex-shrink: 1;
         text-align: left;
+        overflow: auto;
+        overflow-wrap: break-word;
     }
 
     .description-block {

src/views/preview/preview.scss

@@ -700,7 +700,10 @@ class Preview extends React.Component {
 
         return (
             <React.Fragment>
-                <Meta projectInfo={this.props.projectInfo} />
+                <Meta
+                    projectInfo={this.props.projectInfo}
+                    userPresent={this.props.userPresent}
+                />
                 {this.props.playerMode ?
                     <Page
                         className={classNames({

src/views/preview/project-view.jsx

@@ -0,0 +1,19 @@
+const getScratchWikiLink = require('../../../src/lib/scratch-wiki');
+
+describe('unit test lib/scratch-wiki.js', () => {
+    test('getScratchWikiLink exists', () => {
+        expect(typeof getScratchWikiLink).toBe('function');
+    });
+
+    test('it returns link to jawiki when ja is given', () => {
+        expect(getScratchWikiLink('ja')).toBe('https://ja.scratch-wiki.info/');
+    });
+
+    test('it returns link to jawiki when ja-Hira is given', () => {
+        expect(getScratchWikiLink('ja-Hira')).toBe('https://ja.scratch-wiki.info/');
+    });
+
+    test('it returns link to enwiki when invalid locale is given', () => {
+        expect(getScratchWikiLink('test')).toBe('https://en.scratch-wiki.info/');
+    });
+});