Merge pull request #4774 from picklesrus/warning-mute

Show warning message when user has been muted several times.

src/components/modal/mute/modal.jsx

@@ -20,6 +20,10 @@ class MuteModal extends React.Component {
             'handleNext',
             'handlePrevious'
         ]);
+        this.numSteps = 2;
+        if (this.props.showWarning) {
+            this.numSteps++;
+        }
         this.state = {
             step: 0
         };
@@ -82,6 +86,23 @@ class MuteModal extends React.Component {
                                 />
                             </p>
                         </MuteStep>
+                        {this.props.showWarning ? (
+                            <MuteStep
+                                bottomImg="/svgs/commenting/warning.svg"
+                                bottomImgClass="bottom-img"
+                                header={this.props.intl.formatMessage({id: 'comments.muted.warningBlocked'})}
+                            >
+                                <p>
+                                    <FormattedMessage
+                                        id="comments.muted.warningCareful"
+                                        values={{CommunityGuidelinesLink: (
+                                            <a href="/community_guidelines">
+                                                <FormattedMessage id="report.CommunityGuidelinesLinkText" />
+                                            </a>
+                                        )}}
+                                    />
+                                </p>
+                            </MuteStep>) : null}
                     </Progression>
                     <FlexRow className={classNames('nav-divider')} />
                     <FlexRow className={classNames('mute-nav')}>
@@ -97,7 +118,7 @@ class MuteModal extends React.Component {
                                 </div>
                             </Button>
                         ) : null }
-                        {this.state.step >= 1 ? (
+                        {this.state.step >= this.numSteps - 1 ? (
                             <Button
                                 className={classNames('close-button')}
                                 onClick={this.props.onRequestClose}
@@ -131,6 +152,7 @@ MuteModal.propTypes = {
         muteStepContent: PropTypes.array
     }),
     onRequestClose: PropTypes.func,
+    showWarning: PropTypes.bool,
     timeMuted: PropTypes.string
 };
 

src/l10n.json

@@ -354,6 +354,9 @@
     "comments.muted.moreInfoGuidelines": "If you would like more information, you can read the {CommunityGuidelinesLink}.",
     "comments.muted.moreInfoModal": "For more information, {clickHereLink}.",
     "comments.muted.clickHereLinkText": "click here",
+    "comments.muted.warningBlocked": "If you continue to post comments like this, it will cause you to be blocked from using Scratch",
+    "comments.muted.warningCareful": "We don't want that to happen, so please be careful and make sure you have read and understand the {CommunityGuidelinesLink} before you try to post again!",
+
 
     "social.embedLabel": "Embed",
     "social.copyEmbedLinkText": "Copy embed",

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

@@ -48,7 +48,8 @@ class ComposeComment extends React.Component {
             error: null,
             appealId: null,
             muteOpen: false,
-            muteExpiresAtMs: this.props.muteStatus.muteExpiresAt * 1000 // convert to ms
+            muteExpiresAtMs: this.props.muteStatus.muteExpiresAt * 1000, // convert to ms
+            showWarning: this.props.muteStatus.showWarning ? this.props.muteStatus.showWarning : false
         };
     }
     handleInput (event) {
@@ -80,12 +81,14 @@ class ComposeComment extends React.Component {
                 let muteOpen = false;
                 let muteExpiresAtMs = 0;
                 let rejectedStatus = ComposeStatus.REJECTED;
+                let showWarning = false;
                 if (body.status && body.status.mute_status) {
                     muteExpiresAtMs = body.status.mute_status.muteExpiresAt * 1000; // convert to ms
                     rejectedStatus = ComposeStatus.REJECTED_MUTE;
-                    if (this.shouldShowMuteModal(body.status.mute_status.offenses)) {
+                    if (this.shouldShowMuteModal(body.status.mute_status)) {
                         muteOpen = true;
                     }
+                    showWarning = body.status.mute_status.showWarning;
                 }
                 // Note: does not reset the message state
                 this.setState({
@@ -93,7 +96,8 @@ class ComposeComment extends React.Component {
                     error: body.rejected,
                     appealId: body.appealId,
                     muteOpen: muteOpen,
-                    muteExpiresAtMs: muteExpiresAtMs
+                    muteExpiresAtMs: muteExpiresAtMs,
+                    showWarning: showWarning
                 });
                 return;
             }
@@ -132,8 +136,9 @@ class ComposeComment extends React.Component {
             muteOpen: true
         });
     }
-    shouldShowMuteModal (offensesList) {
-        // We should show the mute modal whne the user is newly muted or hasn't seen it for a while.
+    shouldShowMuteModal (muteStatus) {
+        // We should show the mute modal if the user is in danger of being blocked or
+        // when the user is newly muted or hasn't seen it for a while.
         // We don't want to show it more than about once a week.
         // A newly muted user has only 1 offense and it happened in the last coulpe of minutes.
         // If a user has more than 1 offense, it means that they have have been muted in the
@@ -141,10 +146,17 @@ class ComposeComment extends React.Component {
         // Assumption: The offenses list is ordered by time with the most recent at the end.
 
         // This check is here just in case we somehow get bad data back from a backend.
-        if (!offensesList) {
+        if (!muteStatus || !muteStatus.offenses) {
             return false;
         }
 
+        // If the backend tells us to show a warning about getting blocked, we should show the modal
+        // regardless of what the offenses list looks like.
+        if (muteStatus.showWarning) {
+            return true;
+        }
+
+        const offensesList = muteStatus.offenses;
         const numOffenses = offensesList.length;
         // This isn't intended to be called if there are no offenses, but
         // say no just in case.
@@ -287,6 +299,7 @@ class ComposeComment extends React.Component {
                         className="mod-mute"
                         muteModalMessages={this.getMuteMessageInfo()}
                         shouldCloseOnOverlayClick={false}
+                        showWarning={this.state.showWarning}
                         timeMuted={formatTime.formatRelativeTime(this.state.muteExpiresAtMs, window._locale)}
                         onRequestClose={this.handleMuteClose}
                     />
@@ -300,7 +313,8 @@ ComposeComment.propTypes = {
     commenteeId: PropTypes.number,
     muteStatus: PropTypes.shape({
         offenses: PropTypes.array,
-        muteExpiresAt: PropTypes.number
+        muteExpiresAt: PropTypes.number,
+        showWarning: PropTypes.bool
     }),
     onAddComment: PropTypes.func,
     onCancel: PropTypes.func,
@@ -317,7 +331,7 @@ ComposeComment.propTypes = {
 const mapStateToProps = state => ({
     muteStatus: state.session.session.permissions.mute_status ?
         state.session.session.permissions.mute_status :
-        {muteExpiresAt: 0, offenses: []},
+        {muteExpiresAt: 0, offenses: [], showWarning: false},
     user: state.session.session.user
 });
 

static/svgs/commenting/warning.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 180"><defs><style>.cls-1,.cls-2{fill:#ff8c1a;}.cls-1{opacity:0.25;}.cls-3{fill:#fff;}.cls-4{fill:#6e7b8a;opacity:0.5;}</style></defs><path class="cls-1" d="M2.88,80.43c6.16,83.18,50.8,100.79,154.47,99C294.6,177,370.23,188.26,376.72,95.74c5.46-77.83-39.79-93.93-174-95.31C73.35-.9-2.91,2.13,2.88,80.43Z"/><path class="cls-2" d="M214.05,91.28l-118.4-.2H82.85a1.91,1.91,0,0,0-1.31,3.24l7.83,8a1.92,1.92,0,0,1,.54,1.34V122a8.93,8.93,0,0,0,8.81,9H212.2a8.92,8.92,0,0,0,8.8-9V98.42A7,7,0,0,0,214.05,91.28Z"/><path class="cls-3" d="M128.11,50.82l159-.28h17.18A2.69,2.69,0,0,1,306,55.08L295.53,66.33a2.73,2.73,0,0,0-.73,1.88V93.89c0,7-5.29,12.65-11.82,12.65H130.59c-6.53,0-11.82-5.66-11.82-12.65V60.82C118.77,55.3,123,50.82,128.11,50.82Z"/><path class="cls-4" d="M139.57,65.56H264.19a4.32,4.32,0,0,1,4.32,4.32v.69a4.32,4.32,0,0,1-4.32,4.32H138.88a4.32,4.32,0,0,1-4.32-4.32v0A5,5,0,0,1,139.57,65.56Z"/><path class="cls-4" d="M139.57,81.89h82.08a3.61,3.61,0,0,1,3.61,3.61v2.12a3.61,3.61,0,0,1-3.61,3.61H138.17a3.61,3.61,0,0,1-3.61-3.61V86.9a5,5,0,0,1,5-5Z"/></svg>

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

@@ -104,7 +104,8 @@ describe('Compose Comment test', () => {
                     permissions: {
                         mute_status: {
                             muteExpiresAt: 5,
-                            offenses: []
+                            offenses: [],
+                            showWarning: true
                         }
                     }
                 }
@@ -114,6 +115,7 @@ describe('Compose Comment test', () => {
         const commentInstance = component.instance();
         // Check conversion to ms from seconds is done at init time.
         expect(commentInstance.state.muteExpiresAtMs).toEqual(5 * 1000);
+        expect(commentInstance.state.showWarning).toBe(true);
         // Compose box should be hidden if muted unless they got muted due to a comment they just posted.
         expect(component.find('FlexRow.compose-comment').exists()).toEqual(false);
         expect(component.find('MuteModal').exists()).toEqual(false);
@@ -191,22 +193,61 @@ describe('Compose Comment test', () => {
         commentInstance.setState({muteOpen: true});
         component.update();
         expect(component.find('MuteModal').exists()).toEqual(true);
+        expect(component.find('MuteModal').props().showWarning).toBe(false);
         global.Date.now = realDateNow;
     });
 
-    test('shouldShowMuteModal is false when list is undefined ', () => {
+    test('Mute Modal gets showWarning props from state', () => {
+        const store = mockStore({
+            session: {
+                session: {
+                    user: {},
+                    permissions: {
+                        mute_status: {}
+                    }
+                }
+            }
+        });
+        const component = mountWithIntl(
+            <ComposeComment
+                {...defaultProps()}
+            />
+            , {context: {store}}
+        );
+        // set state on the ComposeComment component, not the wrapper
+        const commentInstance = component.find('ComposeComment').instance();
+        commentInstance.setState({muteOpen: true});
+        component.update();
+        expect(component.find('MuteModal').exists()).toEqual(true);
+        expect(component.find('MuteModal').props().showWarning).toBe(false);
+        commentInstance.setState({
+            muteOpen: true,
+            showWarning: true
+        });
+        component.update();
+        expect(component.find('MuteModal').props().showWarning).toBe(true);
+    });
+
+    test('shouldShowMuteModal is false when muteStatus is undefined ', () => {
         const commentInstance = getComposeCommentWrapper({}).instance();
         expect(commentInstance.shouldShowMuteModal()).toBe(false);
     });
 
-    test('shouldShowMuteModal is false when list empty ', () => {
-        const offenses = [];
+    test('shouldShowMuteModal is false when list is undefined ', () => {
+        const muteStatus = {};
         const commentInstance = getComposeCommentWrapper({}).instance();
-        expect(commentInstance.shouldShowMuteModal(offenses)).toBe(false);
+        expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(false);
+    });
+
+    test('shouldShowMuteModal is false when list empty ', () => {
+        const muteStatus = {
+            offenses: []
+        };
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(false);
     });
 
     test('shouldShowMuteModal is true when only 1 recent offesnse ', () => {
-        const offenses = [];
         const realDateNow = Date.now.bind(global.Date);
         global.Date.now = () => 0;
         // Since Date.now mocked to 0 above, we just need a small number to make
@@ -215,9 +256,11 @@ describe('Compose Comment test', () => {
             expiresAt: '1000',
             createdAt: '-60' // ~1 ago min given shouldShowMuteModal's conversions,
         };
-        offenses.push(offense);
+        const muteStatus = {
+            offenses: [offense]
+        };
         const commentInstance = getComposeCommentWrapper({}).instance();
-        expect(commentInstance.shouldShowMuteModal(offenses)).toBe(true);
+        expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(true);
         global.Date.now = realDateNow;
     });
 
@@ -234,8 +277,33 @@ describe('Compose Comment test', () => {
         offenses.push(offense);
         offense.createdAt = '-180'; // 3 minutes ago;
         offenses.push(offense);
+        const muteStatus = {
+            offenses: offenses
+        };
         const commentInstance = getComposeCommentWrapper({}).instance();
-        expect(commentInstance.shouldShowMuteModal(offenses)).toBe(false);
+        expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(false);
+        global.Date.now = realDateNow;
+    });
+
+    test('shouldShowMuteModal is true when showWarning is true even with multiple offenses', () => {
+        const offenses = [];
+        const realDateNow = Date.now.bind(global.Date);
+        global.Date.now = () => 0;
+        // Since Date.now mocked to 0 above, we just need a small number to make
+        // it look like it was created more than 2 minutes ago.
+        let offense = {
+            expiresAt: '1000',
+            createdAt: '-119' // just shy of two min ago
+        };
+        offenses.push(offense);
+        offense.createdAt = '-180'; // 3 minutes ago;
+        offenses.push(offense);
+        const muteStatus = {
+            offenses: offenses,
+            showWarning: true
+        };
+        const commentInstance = getComposeCommentWrapper({}).instance();
+        expect(commentInstance.shouldShowMuteModal(muteStatus)).toBe(true);
         global.Date.now = realDateNow;
     });
 

test/unit/components/mute-modal.test.jsx

@@ -33,6 +33,20 @@ describe('MuteModalTest', () => {
         expect(component.find('button.back-button').exists()).toEqual(false);
     });
 
+    test('Mute Modal shows extra showWarning step', () => {
+        const component = mountWithIntl(
+            <MuteModal
+                showWarning
+                muteModalMessages={defaultMessages}
+            />
+        );
+        component.find('MuteModal').instance()
+            .setState({step: 2});
+        component.update();
+        expect(component.find('MuteStep').prop('bottomImg')).toEqual('/svgs/commenting/warning.svg');
+        expect(component.find('MuteStep').prop('totalSteps')).toEqual(3);
+    });
+
     test('Mute Modal shows back & close button on last step', () => {
         const component = mountWithIntl(
             <MuteModal muteModalMessages={defaultMessages} />