Remove the hideIntro override and default preview modal to false

The use of an "override" prop that allowed the preview modal to be hidden without actually changing the redux state was causing a problem where the block editors where not closing when modals were opening. That is because it relied on the modal reducer being accurate.

I defaulted the preview state to false to make it simpler to consume the GUI, as www will not want the preview info to be true. I made it true in the playground instead.

This fixes #3710

Author: paulkaplan

src/containers/gui.jsx

@@ -75,7 +75,6 @@ class GUI extends React.Component {
             assetHost,
             cloudHost,
             error,
-            hideIntro,
             isError,
             isShowingProject,
             onStorageInit,
@@ -108,7 +107,6 @@ GUI.propTypes = {
     cloudHost: PropTypes.string,
     error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     fetchingProject: PropTypes.bool,
-    hideIntro: PropTypes.bool,
     importInfoVisible: PropTypes.bool,
     intl: intlShape,
     isError: PropTypes.bool,
@@ -132,7 +130,7 @@ GUI.defaultProps = {
     onUpdateProjectId: () => {}
 };
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = state => {
     const loadingState = state.scratchGui.projectState.loadingState;
     return {
         activeTabIndex: state.scratchGui.editorTab.activeTabIndex,
@@ -150,7 +148,7 @@ const mapStateToProps = (state, ownProps) => {
         isRtl: state.locales.isRtl,
         isShowingProject: getIsShowingProject(loadingState),
         loadingStateVisible: state.scratchGui.modals.loadingProject,
-        previewInfoVisible: state.scratchGui.modals.previewInfo && !ownProps.hideIntro,
+        previewInfoVisible: state.scratchGui.modals.previewInfo,
         projectId: state.scratchGui.projectState.projectId,
         targetIsStage: (
             state.scratchGui.targets.stage &&

src/lib/app-state-hoc.jsx

@@ -53,7 +53,8 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
                     initFullScreen,
                     initPlayer,
                     initTutorialCard,
-                    initTutorialLibrary
+                    initTutorialLibrary,
+                    initPreviewInfo
                 } = guiRedux;
                 const {ScratchPaintReducer} = require('scratch-paint');
 
@@ -76,6 +77,9 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
                         } else {
                             initializedGui = initTutorialCard(initializedGui, tutorialId);
                         }
+                    } else if (props.showPreviewInfo) {
+                        // Show preview info if requested and no tutorial ID found
+                        initializedGui = initPreviewInfo(initializedGui);
                     }
                 }
                 reducers = {
@@ -109,6 +113,7 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
             const {
                 isFullScreen, // eslint-disable-line no-unused-vars
                 isPlayerOnly, // eslint-disable-line no-unused-vars
+                showPreviewInfo, // eslint-disable-line no-unused-vars
                 ...componentProps
             } = this.props;
             return (
@@ -122,7 +127,8 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
     }
     AppStateWrapper.propTypes = {
         isFullScreen: PropTypes.bool,
-        isPlayerOnly: PropTypes.bool
+        isPlayerOnly: PropTypes.bool,
+        showPreviewInfo: PropTypes.bool
     };
     return AppStateWrapper;
 };

src/lib/hash-parser-hoc.jsx

@@ -9,6 +9,10 @@ import {
     setProjectId
 } from '../reducers/project-state';
 
+import {
+    closePreviewInfo
+} from '../reducers/modals';
+
 /* Higher Order Component to get the project id from location.hash
  * @param {React.Component} WrappedComponent: component to render
  * @returns {React.Component} component with hash parsing behavior
@@ -20,9 +24,6 @@ const HashParserHOC = function (WrappedComponent) {
             bindAll(this, [
                 'handleHashChange'
             ]);
-            this.state = {
-                hideIntro: false
-            };
         }
         componentDidMount () {
             window.addEventListener('hashchange', this.handleHashChange);
@@ -43,9 +44,6 @@ const HashParserHOC = function (WrappedComponent) {
             const hashMatch = window.location.hash.match(/#(\d+)/);
             const hashProjectId = hashMatch === null ? defaultProjectId : hashMatch[1];
             this.props.setProjectId(hashProjectId.toString());
-            if (hashProjectId !== defaultProjectId) {
-                this.setState({hideIntro: true});
-            }
         }
         render () {
             const {
@@ -58,7 +56,6 @@ const HashParserHOC = function (WrappedComponent) {
             } = this.props;
             return (
                 <WrappedComponent
-                    hideIntro={this.state.hideIntro}
                     {...componentProps}
                 />
             );
@@ -77,7 +74,12 @@ const HashParserHOC = function (WrappedComponent) {
         };
     };
     const mapDispatchToProps = dispatch => ({
-        setProjectId: projectId => dispatch(setProjectId(projectId))
+        setProjectId: projectId => {
+            dispatch(setProjectId(projectId));
+            if (projectId !== defaultProjectId) {
+                dispatch(closePreviewInfo());
+            }
+        }
     });
     // Allow incoming props to override redux-provided props. Used to mock in tests.
     const mergeProps = (stateProps, dispatchProps, ownProps) => Object.assign(

src/playground/render-gui.jsx

@@ -37,6 +37,7 @@ export default appTarget => {
         <WrappedGui
             backpackVisible
             showComingSoon
+            showPreviewInfo
             backpackHost={backpackHost}
         />,
         appTarget);

src/reducers/gui.js

@@ -80,9 +80,6 @@ const initTutorialCard = function (currentState, deckId) {
         {},
         currentState,
         {
-            modals: {
-                previewInfo: false
-            },
             cards: {
                 visible: true,
                 content: decks,
@@ -102,13 +99,24 @@ const initTutorialLibrary = function (currentState) {
         currentState,
         {
             modals: {
-                previewInfo: false,
                 tipsLibrary: true
             }
         }
     );
 };
 
+const initPreviewInfo = function (currentState) {
+    return Object.assign(
+        {},
+        currentState,
+        {
+            modals: {
+                previewInfo: true
+            }
+        }
+    );
+};
+
 const guiReducer = combineReducers({
     alerts: alertsReducer,
     assetDrag: assetDragReducer,
@@ -141,6 +149,7 @@ export {
     guiMiddleware,
     initFullScreen,
     initPlayer,
+    initPreviewInfo,
     initTutorialCard,
     initTutorialLibrary
 };

src/reducers/modals.js

@@ -23,7 +23,7 @@ const initialState = {
     [MODAL_EXTENSION_LIBRARY]: false,
     [MODAL_IMPORT_INFO]: false,
     [MODAL_LOADING_PROJECT]: false,
-    [MODAL_PREVIEW_INFO]: true,
+    [MODAL_PREVIEW_INFO]: false,
     [MODAL_SOUND_LIBRARY]: false,
     [MODAL_SPRITE_LIBRARY]: false,
     [MODAL_SOUND_RECORDER]: false,