From de9bda94dca9effd054536973ab43341fa92937d Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 12 Dec 2018 15:16:06 -0500
Subject: [PATCH 1/2] Add onClick prop for the logo

Toward LLK/scratch-www#2296

This allows us to take you to any destination when clicking the logo, or to do something else, or nothing at all.

If no handler is provided, the logo will not be clickable.
---
 src/components/gui/gui.jsx           |  3 +++
 src/components/menu-bar/menu-bar.css |  4 ++++
 src/components/menu-bar/menu-bar.jsx | 18 ++++++++++--------
 src/playground/render-gui.jsx        |  5 +++++
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 238a02ee0..3eef5b1a3 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -96,6 +96,7 @@ const GUIComponent = props => {
         onActivateCostumesTab,
         onActivateSoundsTab,
         onActivateTab,
+        onClickLogo,
         onExtensionButtonClick,
         onRequestCloseBackdropLibrary,
         onRequestCloseCostumeLibrary,
@@ -205,6 +206,7 @@ const GUIComponent = props => {
                     renderLogin={renderLogin}
                     showComingSoon={showComingSoon}
                     onClickAccountNav={onClickAccountNav}
+                    onClickLogo={onClickLogo}
                     onCloseAccountNav={onCloseAccountNav}
                     onLogOut={onLogOut}
                     onOpenRegistration={onOpenRegistration}
@@ -370,6 +372,7 @@ GUIComponent.propTypes = {
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
     onClickAccountNav: PropTypes.func,
+    onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,
     onExtensionButtonClick: PropTypes.func,
     onLogOut: PropTypes.func,
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 798ceb95c..aa893a097 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -45,6 +45,10 @@
     vertical-align: middle;
 }
 
+.scratch-logo.clickable {
+    cursor: pointer;
+}
+
 .language-icon {
     height:  1.5rem;
     vertical-align: middle;
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 4eac08361..07f18d314 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -298,14 +298,15 @@ class MenuBar extends React.Component {
                 <div className={styles.mainMenu}>
                     <div className={styles.fileGroup}>
                         <div className={classNames(styles.menuBarItem)}>
-                            <a href="https://scratch.mit.edu">
-                                <img
-                                    alt="Scratch"
-                                    className={styles.scratchLogo}
-                                    draggable={false}
-                                    src={scratchLogo}
-                                />
-                            </a>
+                            <img
+                                alt="Scratch"
+                                className={classNames(styles.scratchLogo, {
+                                    [styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
+                                })}
+                                draggable={false}
+                                src={scratchLogo}
+                                onClick={this.props.onClickLogo}
+                            />
                         </div>
                         <div
                             className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
@@ -715,6 +716,7 @@ MenuBar.propTypes = {
     onClickFile: PropTypes.func,
     onClickLanguage: PropTypes.func,
     onClickLogin: PropTypes.func,
+    onClickLogo: PropTypes.func,
     onClickNew: PropTypes.func,
     onClickRemix: PropTypes.func,
     onClickSave: PropTypes.func,
diff --git a/src/playground/render-gui.jsx b/src/playground/render-gui.jsx
index 86100c12f..f3acac2ee 100644
--- a/src/playground/render-gui.jsx
+++ b/src/playground/render-gui.jsx
@@ -7,6 +7,10 @@ import GUI from '../containers/gui.jsx';
 import HashParserHOC from '../lib/hash-parser-hoc.jsx';
 import TitledHOC from '../lib/titled-hoc.jsx';
 
+const onClickLogo = () => {
+    window.location = 'https://scratch.mit.edu';
+};
+
 /*
  * Render the GUI playground. This is a separate function because importing anything
  * that instantiates the VM causes unsupported browsers to crash
@@ -40,6 +44,7 @@ export default appTarget => {
             showPreviewInfo
             backpackHost={backpackHost}
             canSave={false}
+            onClickLogo={onClickLogo}
         />,
         appTarget);
 };

From bc783f0334346f8c43a8e7d142ee0af99df5561e Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 12 Dec 2018 15:39:01 -0500
Subject: [PATCH 2/2] Add test for logo clicking

---
 test/integration/menu-bar.test.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/test/integration/menu-bar.test.js b/test/integration/menu-bar.test.js
index b1c3d9fc0..ced505a91 100644
--- a/test/integration/menu-bar.test.js
+++ b/test/integration/menu-bar.test.js
@@ -56,4 +56,12 @@ describe('Menu bar settings', () => {
         await clickXpath('//button[@title="Try It"]');
         await findByXpath('//div[span[div[span[text()="Share"]]] and @data-tip="tooltip"]');
     });
+
+    test('Logo should be clickable', async () => {
+        await loadUri(uri);
+        await clickXpath('//button[@title="Try It"]');
+        await clickXpath('//img[@alt="Scratch"]');
+        const currentUrl = await driver.getCurrentUrl();
+        await expect(currentUrl).toEqual('https://scratch.mit.edu/');
+    });
 });