Put notices straight after the relevant comment/reply

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

@@ -186,9 +186,13 @@ export default class CommentComponent extends React.Component<CommentProps> {
               {strings.CANCEL}
             </button>
           </div>
-
         </form>
       );
+    } else if (replies.length === 0) {
+      // If there is no form, or replies, don't add any elements to the dom
+      // This is in case there is a warning after the comment, some special styling
+      // is added if that element is that last child so we can't have any hidden elements here.
+      return <></>;
     }
 
     return (
@@ -509,11 +513,6 @@ 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
@@ -521,9 +520,6 @@ export default class CommentComponent extends React.Component<CommentProps> {
     } else if (comment.text !== comment.originalText) {
       // Save the page to save 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 (
@@ -538,7 +534,6 @@ export default class CommentComponent extends React.Component<CommentProps> {
           focused={isFocused}
         />
         <p className="comment__text">{comment.text}</p>
-        {this.renderReplies()}
         {notice &&
           <div className="comment__notice-placeholder">
             <div className="comment__notice" role="status">
@@ -547,6 +542,7 @@ export default class CommentComponent extends React.Component<CommentProps> {
             </div>
           </div>
         }
+        {this.renderReplies()}
       </>
     );
   }

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

@@ -8,6 +8,7 @@ import { updateReply, deleteReply } from '../../actions/comments';
 import type { TranslatableStrings } from '../../main';
 import { CommentHeader }  from '../CommentHeader';
 import TextArea from '../TextArea';
+import Icon from '../../../Icon/Icon';
 
 export async function saveCommentReply(
   comment: Comment,
@@ -297,6 +298,12 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
       };
     }
 
+    let notice = '';
+    if (!reply.remoteId || reply.text !== reply.originalText) {
+      // Save the page to save this reply
+      notice = strings.SAVE_PAGE_TO_SAVE_REPLY;
+    }
+
     return (
       <>
         <CommentHeader
@@ -308,6 +315,14 @@ export default class CommentReplyComponent extends React.Component<CommentReplyP
           focused={isFocused}
         />
         <p className="comment-reply__text">{reply.text}</p>
+        {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

@@ -61,6 +61,7 @@ $color-textarea-border: #ccc;
 $color-textarea-border-focused: #00b0b1;
 $color-textarea-placeholder-text: $color-grey-2;
 $box-border-radius: 5px;
+$box-padding: 10px;
 
 @mixin focus-outline {
     outline: $color-focus-outline solid 3px;
@@ -69,7 +70,7 @@ $box-border-radius: 5px;
 @mixin box {
     background-color: $color-box-background;
     border: 1px solid $color-box-border;
-    padding: 10px;
+    padding: $box-padding;
     font-size: 11px;
     border-radius: $box-border-radius;
     color: $color-box-text;
@@ -108,19 +109,18 @@ $box-border-radius: 5px;
     }
 
     &__notice-placeholder {
+        position: relative;
         padding-bottom: 40px;
     }
 
     &__notice {
         background-color: $color-amber-1;
         position: absolute;
-        left: 0;
+        left: -$box-padding;
         bottom: 0;
-        width: 100%;
+        width: calc(100% + #{$box-padding} * 2);
         padding: 5px 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;
@@ -130,6 +130,12 @@ $box-border-radius: 5px;
             vertical-align: text-bottom;
         }
     }
+
+    > :last-child &__notice {
+        bottom: -$box-padding;
+        border-bottom-left-radius: $box-border-radius;
+        border-bottom-right-radius: $box-border-radius;
+    }
 }
 
 @mixin button {

client/src/components/CommentApp/main.tsx

@@ -69,7 +69,7 @@ export const defaultStrings = {
   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 this comment',
-  SAVE_PAGE_TO_SAVE_REPLY: 'Save the page to save replies',
+  SAVE_PAGE_TO_SAVE_REPLY: 'Save the page to save this reply',
 };
 
 /* eslint-disable camelcase */

client/tests/stubs.js

@@ -64,7 +64,7 @@ global.wagtailConfig = {
     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 this comment',
-    SAVE_PAGE_TO_SAVE_REPLY: 'Save the page to save replies',
+    SAVE_PAGE_TO_SAVE_REPLY: 'Save the page to save this reply',
   },
   WAGTAIL_I18N_ENABLED: true,
   LOCALES: [

wagtail/admin/localization.py

@@ -96,7 +96,7 @@ def get_js_translation_strings():
         '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 this comment'),
-        'SAVE_PAGE_TO_SAVE_REPLY': _('Save the page to save replies'),
+        'SAVE_PAGE_TO_SAVE_REPLY': _('Save the page to save this reply'),
 
         'MONTHS': [str(m) for m in MONTHS.values()],