Merge branch 'master' into impl/reactify-tooltip

CHANGES.md

@@ -3,12 +3,14 @@
 ## v4.0.1-RC
 
 * Improvement: Accessibility for Handsontable under dark mode
+* Improvement: Refactor '/pages.exist' API
 * Fix: Storing the state of sidebar
+* Fix: Comments order should be asc
+* Fix: Show/Hide replies button doesn't work
 * Fix: Change the display of the scroll bar when modal is shown
-* Fix: Link color in alerts
 * Fix: Submit with enter key on Create/Rename modals
-* Fix: Show/hide Unlink redirection button conditions
-* Fix: Refactor '/pages.exist' API
+* Fix: Show/Hide Unlink redirection button conditions
+* Fix: Link color in alerts
 * Support: Upgrade libs
     * @atlaskit/drawer
     * @atlaskit/navigation-next

src/client/js/components/PageComment/CommentEditor.jsx

@@ -241,13 +241,15 @@ class CommentEditor extends React.Component {
 
   renderBeforeReady() {
     return (
-      <button
-        type="button"
-        className="btn btn-lg btn-link center-block"
-        onClick={() => this.setState({ isReadyToUse: true })}
-      >
-        <i className="icon-bubble"></i> Add Comment
-      </button>
+      <div className="text-center">
+        <button
+          type="button"
+          className="btn btn-lg btn-link"
+          onClick={() => this.setState({ isReadyToUse: true })}
+        >
+          <i className="icon-bubble"></i> Add Comment
+        </button>
+      </div>
     );
   }
 

src/client/js/components/PageComment/ReplayComments.jsx

@@ -19,10 +19,10 @@ class ReplayComments extends React.PureComponent {
       isOlderRepliesShown: false,
     };
 
-    this.toggleIsOlderRepliesShown = this.toggleIsOlderRepliesShown.bind(this);
+    this.toggleOlderReplies = this.toggleOlderReplies.bind(this);
   }
 
-  toggleIsOlderRepliesShown() {
+  toggleOlderReplies() {
     this.setState({ isOlderRepliesShown: !this.state.isOlderRepliesShown });
   }
 
@@ -75,14 +75,14 @@ class ReplayComments extends React.PureComponent {
       <React.Fragment>
         {areThereHiddenReplies && (
           <div className="page-comments-hidden-replies">
-            <Collapse in={this.state.isOlderRepliesShown}>
+            <Collapse isOpen={this.state.isOlderRepliesShown}>
               <div>{hiddenElements}</div>
             </Collapse>
             <div className="text-center">
               <button
                 type="button"
-                className="page-comments-list-toggle-older btn btn-link"
-                onClick={this.toggleIsOlderRepliesShown}
+                className="btn btn-link"
+                onClick={this.toggleOlderReplies}
               >
                 {toggleButtonIcon} {toggleButtonLabel}
               </button>

src/client/js/components/PageComments.jsx

@@ -191,7 +191,8 @@ class PageComments extends React.Component {
   render() {
     const topLevelComments = [];
     const allReplies = [];
-    const comments = this.props.commentContainer.state.comments;
+    const comments = this.props.commentContainer.state.comments
+      .slice().reverse(); // create shallow copy and reverse
 
     comments.forEach((comment) => {
       if (comment.replyTo === undefined) {