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/presentation.jsx

@@ -12,6 +12,7 @@ const GUI = require('scratch-gui').default;
 const IntlGUI = injectIntl(GUI);
 
 const AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
+const CommentingStatus = require('../../components/commenting-status/commenting-status.jsx');
 const decorateText = require('../../lib/decorate-text.jsx');
 const FlexRow = require('../../components/flex-row/flex-row.jsx');
 const Button = require('../../components/forms/button.jsx');
@@ -74,6 +75,7 @@ const PreviewPresentation = ({
     isFullScreen,
     isLoggedIn,
     isNewScratcher,
+    isProjectCommentsGloballyEnabled,
     isProjectLoaded,
     isRemixing,
     isScratcher,
@@ -138,7 +140,6 @@ const PreviewPresentation = ({
         (!projectInfo.instructions && !projectInfo.description); // show if both are empty
     const showNotesAndCredits = editable || projectInfo.description ||
         (!projectInfo.instructions && !projectInfo.description); // show if both are empty
-
     let banner;
     if (visibilityInfo.deleted) { // If both censored and deleted, prioritize deleted banner
         banner = (<Banner
@@ -574,7 +575,8 @@ const PreviewPresentation = ({
                                             </div>
                                         ) : null}
                                     </FlexRow>
-
+                                    {isProjectCommentsGloballyEnabled ? (
+                                        <React.Fragment>
                                             {/* Do not show the top-level comment form in single comment mode */}
                                             {!singleCommentId && (
                                                 <FlexRow className="comments-root-reply">
@@ -595,14 +597,15 @@ const PreviewPresentation = ({
                                                     )}
                                                 </FlexRow>
                                             )}
-
                                             <FlexRow className="comments-list">
                                                 {comments.map(comment => (
                                                     <TopLevelComment
                                                         author={comment.author}
                                                         canDelete={canDeleteComments}
                                                         canDeleteWithoutConfirm={isAdmin}
-                                                canReply={isLoggedIn && projectInfo.comments_allowed && isShared}
+                                                        canReply={
+                                                            isLoggedIn && projectInfo.comments_allowed && isShared
+                                                        }
                                                         canReport={isLoggedIn}
                                                         canRestore={canRestoreComments}
                                                         content={comment.content}
@@ -614,7 +617,9 @@ const PreviewPresentation = ({
                                                         moreRepliesToLoad={comment.moreRepliesToLoad}
                                                         parentId={comment.parent_id}
                                                         postURI={`/proxy/comments/project/${projectId}`}
-                                                replies={replies && replies[comment.id] ? replies[comment.id] : []}
+                                                        replies={
+                                                            replies && replies[comment.id] ? replies[comment.id] : []
+                                                        }
                                                         visibility={comment.visibility}
                                                         onAddComment={onAddComment}
                                                         onDelete={onDeleteComment}
@@ -640,6 +645,21 @@ const PreviewPresentation = ({
                                                     </Button>
                                                 }
                                             </FlexRow>
+                                        </React.Fragment>
+                                    ) : (
+                                        <div>
+                                            <CommentingStatus>
+                                                <p>
+                                                    <FormattedMessage id="project.comments.turnedOffGlobally" />
+                                                </p>
+                                            </CommentingStatus>
+                                            <img
+                                                className="comment-placeholder-img"
+                                                src="/images/comments/comment-placeholder.png"
+                                            />
+                                        </div>
+
+                                    )}
                                 </div>
                                 <FlexRow className="column">
                                     <RemixList
@@ -687,6 +707,7 @@ PreviewPresentation.propTypes = {
     isFullScreen: PropTypes.bool,
     isLoggedIn: PropTypes.bool,
     isNewScratcher: PropTypes.bool,
+    isProjectCommentsGloballyEnabled: PropTypes.bool,
     isProjectLoaded: PropTypes.bool,
     isRemixing: PropTypes.bool,
     isScratcher: PropTypes.bool,

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,