Merge pull request #5175 from seotts/modal-past-mute-messaging

Show different modal message when already muted

src/l10n.json

@@ -327,8 +327,6 @@
     "comments.isBad": "Hmm...the bad word detector thinks there is a problem with your comment. Please change it and remember to be respectful.",
     "comments.hasChatSite": "Uh oh! The comment contains a link to a website with unmoderated chat. For safety reasons, please do not link to these sites!",
     "comments.isSpam": "Hmm, seems like you've posted the same comment a bunch of times. Please don't spam.",
-    "comments.isMuted": "Hmm, the filterbot is pretty sure your recent comments weren't ok for Scratch, so your account has been muted for the rest of the day. :/",
-    "comments.isUnconstructive": "Hmm, the filterbot thinks your comment may be mean or disrespectful. Remember, most projects on Scratch are made by people who are just learning how to program.",
     "comments.isDisallowed": "Hmm, it looks like comments have been turned off for this page. :/",
     "comments.isIPMuted": "Sorry, the Scratch Team had to prevent your network from sharing comments or projects because it was used to break our community guidelines too many times. You can still share comments and projects from another network. If you'd like to appeal this block, you can contact appeals@scratch.mit.edu and reference Case Number {appealId}.",
     "comments.isTooLong": "That comment is too long! Please find a way to shorten your text.",

src/views/preview/comment/compose-comment.jsx

@@ -224,42 +224,43 @@ class ComposeComment extends React.Component {
             MuteModal.steps.MUTE_INFO : MuteModal.steps.COMMENT_ISSUE;
     }
 
-    getMuteMessageInfo () {
+    getMuteMessageInfo (justMuted) {
         // return the ids for the messages that are shown for this mute type
         // If mute modals have more than one unique "step" we could pass an array of steps
         const messageInfo = {
             pii: {
                 name: 'pii',
-                commentType: 'comment.type.pii',
-                commentTypePast: 'comment.type.pii.past',
+                commentType: justMuted ? 'comment.type.pii' : 'comment.type.pii.past',
                 muteStepHeader: 'comment.pii.header',
                 muteStepContent: ['comment.pii.content1', 'comment.pii.content2', 'comment.pii.content3']
             },
             unconstructive: {
                 name: 'unconstructive',
-                commentType: 'comment.type.unconstructive',
-                commentTypePast: 'comment.type.unconstructive.past',
+                commentType: justMuted ? 'comment.type.unconstructive' : 'comment.type.unconstructive.past',
                 muteStepHeader: 'comment.unconstructive.header',
-                muteStepContent: ['comment.unconstructive.content1', 'comment.unconstructive.content2']
+                muteStepContent: [
+                    justMuted ? 'comment.unconstructive.content1' : 'comment.type.unconstructive.past',
+                    'comment.unconstructive.content2'
+                ]
             },
             vulgarity: {
                 name: 'vulgarity',
-                commentType: 'comment.type.vulgarity',
-                commentTypePast: 'comment.type.vulgarity.past',
+                commentType: justMuted ? 'comment.type.vulgarity' : 'comment.type.vulgarity.past',
                 muteStepHeader: 'comment.vulgarity.header',
-                muteStepContent: ['comment.vulgarity.content1', 'comment.vulgarity.content2']
+                muteStepContent: [
+                    justMuted ? 'comment.vulgarity.content1' : 'comment.type.vulgarity.past',
+                    'comment.vulgarity.content2'
+                ]
             },
             spam: {
                 name: 'spam',
-                commentType: 'comment.type.spam',
-                commentTypePast: 'comment.type.spam.past',
+                commentType: justMuted ? 'comment.type.spam' : 'comment.type.spam.past',
                 muteStepHeader: 'comment.spam.header',
                 muteStepContent: ['comment.spam.content1', 'comment.spam.content2']
             },
             general: {
                 name: 'general',
-                commentType: 'comment.type.general',
-                commentTypePast: 'comment.type.general.past',
+                commentType: justMuted ? 'comment.type.general' : 'comment.type.general.past',
                 muteStepHeader: 'comment.general.header',
                 muteStepContent: ['comment.general.content1']
             }
@@ -292,9 +293,9 @@ class ComposeComment extends React.Component {
                             <p>
                                 <FormattedMessage
                                     id={
-                                        this.state.status === ComposeStatus.REJECTED_MUTE ?
-                                            this.getMuteMessageInfo().commentType :
-                                            this.getMuteMessageInfo().commentTypePast
+                                        this.getMuteMessageInfo(
+                                            this.state.status === ComposeStatus.REJECTED_MUTE
+                                        ).commentType
                                     }
                                 />
                             </p>
@@ -404,7 +405,7 @@ class ComposeComment extends React.Component {
                         useStandardSizes
                         className="mod-mute"
                         commentContent={this.state.message}
-                        muteModalMessages={this.getMuteMessageInfo()}
+                        muteModalMessages={this.getMuteMessageInfo(this.state.status === ComposeStatus.REJECTED_MUTE)}
                         shouldCloseOnOverlayClick={false}
                         showFeedback={
                             this.state.status === ComposeStatus.REJECTED_MUTE

test/unit/components/compose-comment.test.jsx

@@ -555,20 +555,53 @@ describe('Compose Comment test', () => {
         global.Date.now = realDateNow;
     });
 
-    test('getMuteMessageInfo: muteType set', () => {
+    test('getMuteMessageInfo: muteType set and just got muted', () => {
+        const justMuted = true;
         const commentInstance = getComposeCommentWrapper({}).instance();
         commentInstance.setState({muteType: 'unconstructive'});
-        expect(commentInstance.getMuteMessageInfo().commentType).toBe('comment.type.unconstructive');
+        expect(commentInstance.getMuteMessageInfo(justMuted).commentType).toBe('comment.type.unconstructive');
+        expect(commentInstance.getMuteMessageInfo(justMuted)
+            .muteStepContent[0]).toBe('comment.unconstructive.content1');
     });
 
-    test('getMuteMessageInfo: muteType not set', () => {
+    test('getMuteMessageInfo: muteType set and already muted', () => {
+        const justMuted = false;
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        commentInstance.setState({muteType: 'pii'});
+        expect(commentInstance.getMuteMessageInfo(justMuted).commentType).toBe('comment.type.pii.past');
+        // PII has the same content1 regardless of whether you were just muted
+        expect(commentInstance.getMuteMessageInfo(justMuted).muteStepContent[0]).toBe('comment.pii.content1');
+
+        commentInstance.setState({muteType: 'vulgarity'});
+        expect(commentInstance.getMuteMessageInfo(justMuted).commentType).toBe('comment.type.vulgarity.past');
+        expect(commentInstance.getMuteMessageInfo(justMuted).muteStepContent[0]).toBe('comment.type.vulgarity.past');
+    });
+
+    test('getMuteMessageInfo: muteType not set and just got muted', () => {
+        const justMuted = true;
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        expect(commentInstance.getMuteMessageInfo(justMuted).commentType).toBe('comment.type.general');
+        // general has the same content1 regardless of whether you were just muted
+        expect(commentInstance.getMuteMessageInfo(justMuted).muteStepContent[0]).toBe('comment.general.content1');
+    });
+
+    test('getMuteMessageInfo: muteType not set and already muted', () => {
+        const justMuted = false;
         const commentInstance = getComposeCommentWrapper({}).instance();
-        expect(commentInstance.getMuteMessageInfo().commentType).toBe('comment.type.general');
+        expect(commentInstance.getMuteMessageInfo(justMuted).commentType).toBe('comment.type.general.past');
     });
 
-    test('getMuteMessageInfo: muteType set to something we don\'t have messages for', () => {
+    test('getMuteMessageInfo: muteType set to something we don\'t have messages for and just got muted', () => {
+        const justMuted = true;
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        commentInstance.setState({muteType: 'spaghetti'});
+        expect(commentInstance.getMuteMessageInfo(justMuted).commentType).toBe('comment.type.general');
+    });
+
+    test('getMuteMessageInfo: muteType set to something we don\'t have messages for and already muted', () => {
+        const justMuted = false;
         const commentInstance = getComposeCommentWrapper({}).instance();
         commentInstance.setState({muteType: 'spaghetti'});
-        expect(commentInstance.getMuteMessageInfo().commentType).toBe('comment.type.general');
+        expect(commentInstance.getMuteMessageInfo(justMuted).commentType).toBe('comment.type.general.past');
     });
 });