Merge pull request #5561 from picklesrus/project-comments

handle project comments turned off

src/components/commenting-status/commenting-status.scss

@@ -6,7 +6,6 @@
     padding: 1.75rem 3rem 2rem;
     margin: .5rem 0 2.25rem;
     background-color: $ui-blue-10percent;
-    width: 100%;
     text-align: center;
     box-sizing: border-box;
 

src/redux/session.js

@@ -140,6 +140,8 @@ module.exports.selectToken = state => get(state, ['session', 'session', 'user',
 module.exports.selectIsAdmin = state => get(state, ['session', 'session', 'permissions', 'admin'], false);
 module.exports.selectIsSocial = state => get(state, ['session', 'session', 'permissions', 'social'], false);
 module.exports.selectIsEducator = state => get(state, ['session', 'session', 'permissions', 'educator'], false);
+module.exports.selectProjectCommentsGloballyEnabled = state =>
+    get(state, ['session', 'session', 'flags', 'project_comments_enabled'], false);
 module.exports.selectMuteStatus = state => get(state, ['session', 'session', 'permissions', 'mute_status'],
     {muteExpiresAt: 0, offenses: [], showWarning: false});
 module.exports.selectIsMuted = state => (module.exports.selectMuteStatus(state).muteExpiresAt || 0) * 1000 > Date.now();

src/views/preview/l10n.json

@@ -13,6 +13,7 @@
     "project.comments.toggleOff": "Commenting off",
     "project.comments.toggleOn": "Commenting on",
     "project.comments.turnedOff": "Sorry, comment posting has been turned off for this project.",
+    "project.comments.turnedOffGlobally": "Project comments across Scratch are turned off, but don't worry, your comments are saved and will be back soon.",
     "project.share.notShared": "This project is not shared — so only you can see it. Click share to let everyone see it!",
     "project.share.sharedLong": "Congratulations on sharing your project! Other people can now try it out, give comments, and remix it.",
     "project.share.sharedShort": "Your project is now shared.",

src/views/preview/preview.scss

@@ -257,6 +257,10 @@ $stage-width: 480px;
         .comments-allowed-input {
             margin-right: 3px;
         }
+
+        .comment-placeholder-img {
+            width: 100%;
+        }
     }
 
     .remix-button,

src/views/preview/project-view.jsx

@@ -27,6 +27,7 @@ const NotAvailable = require('../../components/not-available/not-available.jsx')
 const Meta = require('./meta.jsx');
 
 const sessionActions = require('../../redux/session.js');
+import {selectProjectCommentsGloballyEnabled} from '../../redux/session';
 const navigationActions = require('../../redux/navigation.js');
 const previewActions = require('../../redux/preview.js');
 const projectCommentActions = require('../../redux/project-comment-actions.js');
@@ -738,6 +739,7 @@ class Preview extends React.Component {
                             isFullScreen={this.props.fullScreen}
                             isLoggedIn={this.props.isLoggedIn}
                             isNewScratcher={this.props.isNewScratcher}
+                            isProjectCommentsGloballyEnabled={this.props.isProjectCommentsGloballyEnabled}
                             isProjectLoaded={this.state.isProjectLoaded}
                             isRemixing={this.state.isRemixing}
                             isScratcher={this.props.isScratcher}
@@ -900,6 +902,7 @@ Preview.propTypes = {
     isAdmin: PropTypes.bool,
     isEditable: PropTypes.bool,
     isLoggedIn: PropTypes.bool,
+    isProjectCommentsGloballyEnabled: PropTypes.bool,
     isNewScratcher: PropTypes.bool,
     isScratcher: PropTypes.bool,
     isShared: PropTypes.bool,
@@ -956,6 +959,7 @@ Preview.defaultProps = {
     backpackHost: process.env.BACKPACK_HOST,
     canUseBackpack: false,
     cloudHost: process.env.CLOUDDATA_HOST,
+    isProjectCommentsGloballyEnabled: false,
     projectHost: process.env.PROJECT_HOST,
     sessionStatus: sessionActions.Status.NOT_FETCHED,
     user: {},
@@ -980,6 +984,8 @@ const mapStateToProps = state => {
     const isEditable = isLoggedIn &&
         (authorUsername === state.session.session.user.username ||
         state.permissions.admin === true);
+    const areCommentsOn = state.session.session.flags && selectProjectCommentsGloballyEnabled(state);
+
 
     // if we don't have projectInfo, assume it's shared until we know otherwise
     const isShared = !projectInfoPresent || state.preview.projectInfo.is_published;
@@ -1010,6 +1016,7 @@ const mapStateToProps = state => {
         isLoggedIn: isLoggedIn,
         isAdmin: isAdmin,
         isNewScratcher: isLoggedIn && state.permissions.new_scratcher,
+        isProjectCommentsGloballyEnabled: areCommentsOn,
         isScratcher: isLoggedIn && state.permissions.scratcher,
         isShared: isShared,
         loved: state.preview.loved,