Add warning to bottom of draft comments (#7089)

* Add warning to bottom of draft comments

* Add a warning to bottom of edited comments

* Add a warning at the bottom of comments with unsaved replies

* Set role="status" on the comment notice

client/src/components/CommentApp/components/Comment/index.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import FocusTrap from 'focus-trap-react';
 
+import Icon from '../../../Icon/Icon';
 import type { Store } from '../../state';
 import { Author, Comment, newCommentReply } from '../../state/comments';
 import {
@@ -508,6 +509,23 @@ export default class CommentComponent extends React.Component<CommentProps> {
       };
     }
 
+    const hasUnsavedReplies =
+      Array.from(comment.replies.values())
+        .filter(reply => !reply.remoteId || reply.text !== reply.originalText)
+        .length > 0;
+
+    let notice = '';
+    if (!comment.remoteId) {
+      // Save the page to add this comment
+      notice = strings.SAVE_PAGE_TO_ADD_COMMENT;
+    } else if (comment.text !== comment.originalText) {
+      // Save the page to save changes to this comment
+      notice = strings.SAVE_PAGE_TO_SAVE_COMMENT_CHANGES;
+    } else if (hasUnsavedReplies) {
+      // Save the page to save replies
+      notice = strings.SAVE_PAGE_TO_SAVE_REPLY;
+    }
+
     return (
       <>
         <CommentHeader
@@ -521,6 +539,14 @@ export default class CommentComponent extends React.Component<CommentProps> {
         />
         <p className="comment__text">{comment.text}</p>
         {this.renderReplies()}
+        {notice &&
+          <div className="comment__notice-placeholder">
+            <div className="comment__notice" role="status">
+              <Icon name="info-circle" />
+              {notice}
+            </div>
+          </div>
+        }
       </>
     );
   }

client/src/components/CommentApp/main.scss

@@ -14,6 +14,8 @@ $color-salmon: #f37e77;
 $color-salmon-light: #fcf2f2;
 $color-white: #fff;
 $color-black: #000;
+$color-amber-0: #e9b04d;
+$color-amber-1: #faecd5;
 
 // darker to lighter
 $color-grey-1: darken($color-white, 80);
@@ -58,6 +60,7 @@ $color-textarea-background-focused: #f2fcfc;
 $color-textarea-border: #ccc;
 $color-textarea-border-focused: #00b0b1;
 $color-textarea-placeholder-text: $color-grey-2;
+$box-border-radius: 5px;
 
 @mixin focus-outline {
     outline: $color-focus-outline solid 3px;
@@ -68,7 +71,7 @@ $color-textarea-placeholder-text: $color-grey-2;
     border: 1px solid $color-box-border;
     padding: 10px;
     font-size: 11px;
-    border-radius: 5px;
+    border-radius: $box-border-radius;
     color: $color-box-text;
 
     &--focused {
@@ -103,6 +106,30 @@ $color-textarea-placeholder-text: $color-grey-2;
     *:focus {
         @include focus-outline;
     }
+
+    &__notice-placeholder {
+        padding-bottom: 60px;
+    }
+
+    &__notice {
+        background-color: $color-amber-1;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        padding: 10px;
+        box-sizing: border-box;
+        border-bottom-left-radius: $box-border-radius;
+        border-bottom-right-radius: $box-border-radius;
+
+        svg.icon {
+            color: $color-amber-0;
+            width: 14px;
+            height: 14px;
+            margin-right: 10px;
+            vertical-align: text-bottom;
+        }
+    }
 }
 
 @mixin button {

client/src/components/CommentApp/main.tsx

@@ -46,6 +46,9 @@ export interface TranslatableStrings {
   CONFIRM_DELETE_COMMENT: string;
   SAVE_ERROR: string;
   MORE_ACTIONS: string;
+  SAVE_PAGE_TO_ADD_COMMENT: string;
+  SAVE_PAGE_TO_SAVE_COMMENT_CHANGES: string;
+  SAVE_PAGE_TO_SAVE_REPLY: string;
 }
 
 export const defaultStrings = {
@@ -64,6 +67,9 @@ export const defaultStrings = {
   CONFIRM_DELETE_COMMENT: 'Are you sure?',
   SAVE_ERROR: 'Save error',
   MORE_ACTIONS: 'More actions',
+  SAVE_PAGE_TO_ADD_COMMENT: 'Save the page to add this comment',
+  SAVE_PAGE_TO_SAVE_COMMENT_CHANGES: 'Save the page to save changes to this comment',
+  SAVE_PAGE_TO_SAVE_REPLY: 'Save the page to save replies',
 };
 
 /* eslint-disable camelcase */

client/tests/stubs.js

@@ -61,7 +61,10 @@ global.wagtailConfig = {
     SAVE_ERROR: 'Save error',
     SAVE_COMMENT_WARNING: 'This will be saved when the page is saved',
     FOCUS_COMMENT: 'Focus comment',
-    UNFOCUS_COMMENT: 'Unfocus comment'
+    UNFOCUS_COMMENT: 'Unfocus comment',
+    SAVE_PAGE_TO_ADD_COMMENT: 'Save the page to add this comment',
+    SAVE_PAGE_TO_SAVE_COMMENT_CHANGES: 'Save the page to save changes to this comment',
+    SAVE_PAGE_TO_SAVE_REPLY: 'Save the page to save replies',
   },
   WAGTAIL_I18N_ENABLED: true,
   LOCALES: [

wagtail/admin/localization.py

@@ -94,6 +94,9 @@ def get_js_translation_strings():
         'UNFOCUS_COMMENT': _('Unfocus comment'),
         'COMMENT': _('Comment'),
         'MORE_ACTIONS': _('More actions'),
+        'SAVE_PAGE_TO_ADD_COMMENT': _('Save the page to add this comment'),
+        'SAVE_PAGE_TO_SAVE_COMMENT_CHANGES': _('Save the page to save changes to this comment'),
+        'SAVE_PAGE_TO_SAVE_REPLY': _('Save the page to save replies'),
 
         'MONTHS': [str(m) for m in MONTHS.values()],
 

wagtail/admin/templates/wagtailadmin/icons/info-circle.svg

@@ -0,0 +1,3 @@
+<symbol id="icon-info-circle" viewBox="0 0 512 512">
+    <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path>
+</symbol>

wagtail/admin/wagtail_hooks.py

@@ -686,6 +686,7 @@ def register_icons(icons):
         'home.svg',
         'horizontalrule.svg',
         'image.svg',  # aka picture
+        'info-circle.svg',
         'italic.svg',
         'link.svg',
         'link-external.svg',