Merge pull request #172 from fouksf/ipr-408-hide-tutorial-projects

feat: hide the tutorials that require a project

Author: MiroslavDionisiev

packages/scratch-gui/src/components/gui/gui.jsx

@@ -130,6 +130,7 @@ const GUIComponent = props => {
         tipsLibraryVisible,
         username,
         userOwnsProject,
+        hideTutorialProjects,
         vm,
         ...componentProps
     } = omit(props, 'dispatch');
@@ -193,7 +194,7 @@ const GUIComponent = props => {
                     <WebGlModal isRtl={isRtl} />
                 )}
                 {tipsLibraryVisible ? (
-                    <TipsLibrary />
+                    <TipsLibrary hideTutorialProjects={hideTutorialProjects} />
                 ) : null}
                 {cardsVisible ? (
                     <Cards />
@@ -455,6 +456,7 @@ GUIComponent.propTypes = {
     tipsLibraryVisible: PropTypes.bool,
     username: PropTypes.string,
     userOwnsProject: PropTypes.bool,
+    hideTutorialProjects: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 GUIComponent.defaultProps = {

packages/scratch-gui/src/containers/gui.jsx

@@ -131,6 +131,7 @@ GUI.propTypes = {
     telemetryModalVisible: PropTypes.bool,
     username: PropTypes.string,
     userOwnsProject: PropTypes.bool,
+    hideTutorialProjects: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 

packages/scratch-gui/src/containers/tips-library.jsx

@@ -7,7 +7,7 @@ import decksLibraryContent from '../lib/libraries/decks/index.jsx';
 import tutorialTags from '../lib/libraries/tutorial-tags';
 
 import analytics from '../lib/analytics';
-import {notScratchDesktop} from '../lib/isScratchDesktop';
+import {isScratchDesktop} from '../lib/isScratchDesktop';
 
 import LibraryComponent from '../components/library/library.jsx';
 
@@ -63,13 +63,24 @@ class TipsLibrary extends React.PureComponent {
     render () {
         const decksLibraryThumbnailData = Object.keys(decksLibraryContent)
             .filter(id => {
-                if (notScratchDesktop()) return true; // Do not filter anything in online editor
+                /**
+                 * Scratch desktop can't support project and video-only tutorials.
+                 * NGP can't support project tutorials.
+                 * The online editor, conversely, should show all tutorials.
+                 */
+                
                 const deck = decksLibraryContent[id];
-                // Scratch Desktop doesn't want tutorials with `requiredProjectId`
-                if (Object.prototype.hasOwnProperty.call(deck, 'requiredProjectId')) return false;
-                // Scratch Desktop should not load tutorials that are _only_ videos
-                if (deck.steps.filter(s => s.title).length === 0) return false;
-                // Allow any other tutorials
+                const isProjectTutorial = Object.prototype.hasOwnProperty.call(deck, 'requiredProjectId');
+                const isVideoOnlyTutorial = decksLibraryContent[id].steps.filter(s => s.title).length === 0;
+
+                if (isProjectTutorial && (this.props.hideTutorialProjects || isScratchDesktop())) {
+                    return false;
+                }
+
+                if (isVideoOnlyTutorial && isScratchDesktop()) {
+                    return false;
+                }
+
                 return true;
             })
             .map(id => ({
@@ -106,7 +117,8 @@ TipsLibrary.propTypes = {
     onActivateDeck: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func,
     projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    visible: PropTypes.bool
+    visible: PropTypes.bool,
+    hideTutorialProjects: PropTypes.bool
 };
 
 const mapStateToProps = state => ({