decidim-comments 0.19.1 → 0.23.0

data/app/frontend/comments/comment_order_selector.component.tsx

@@ -43,28 +43,47 @@ class CommentOrderSelector extends React.Component<CommentOrderSelectorProps, Co
         <ul
           className="dropdown menu"
           data-dropdown-menu="data-dropdown-menu"
+          data-autoclose="false"
+          data-disable-hover="true"
+          data-click-open="true"
+          data-close-on-click="true"
+          tabIndex={-1}
           ref={this.setDropdown}
         >
-          <li>
-            <a>{I18n.t(`components.comment_order_selector.order.${orderBy}`)}</a>
-            <ul className="menu">
+          <li className="is-dropdown-submenu-parent" tabIndex={-1}>
+            <a
+              href="#"
+              id="comments-order-menu-control"
+              aria-label={I18n.t("components.comment_order_selector.title")}
+              aria-controls="comments-order-menu"
+              aria-haspopup="true"
+            >
+              {I18n.t(`components.comment_order_selector.order.${orderBy}`)}
+            </a>
+            <ul
+              className="menu is-dropdown-submenu"
+              id="language-chooser-menu"
+              role="menu"
+              aria-labelledby="comments-order-menu-control"
+              tabIndex={-1}
+            >
               <li>
-                <a href="" className="test" onClick={this.updateOrder("best_rated")} >
+                <a href="#" className="test" onClick={this.updateOrder("best_rated")} tabIndex={-1}>
                   {I18n.t("components.comment_order_selector.order.best_rated")}
                 </a>
               </li>
               <li>
-                <a href="" onClick={this.updateOrder("recent")} >
+                <a href="#" onClick={this.updateOrder("recent")} tabIndex={-1}>
                   {I18n.t("components.comment_order_selector.order.recent")}
                 </a>
               </li>
               <li>
-                <a href="" onClick={this.updateOrder("older")} >
+                <a href="#" onClick={this.updateOrder("older")} tabIndex={-1}>
                   {I18n.t("components.comment_order_selector.order.older")}
                 </a>
               </li>
               <li>
-                <a href="" onClick={this.updateOrder("most_discussed")} >
+                <a href="" onClick={this.updateOrder("most_discussed")} tabIndex={-1}>
                   {I18n.t("components.comment_order_selector.order.most_discussed")}
                 </a>
               </li>

data/app/frontend/comments/comment_thread.component.test.tsx

@@ -9,7 +9,8 @@ import generateCommentsData from "../support/generate_comments_data";
 import generateCUserData from "../support/generate_user_data";
 import { loadLocaleTranslations } from "../support/load_translations";
 
-describe("<CommentThread />", () => {
+describe("<CommentThread commentsMaxLength={commentsMaxLength}  />", () => {
+  const commentsMaxLength: number = 1000;
   const orderBy = "older";
   const rootCommentable = {
     id: "1",
@@ -30,7 +31,7 @@ describe("<CommentThread />", () => {
 
   describe("when comment doesn't have comments", () => {
     it("should not render a title with author name", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
+      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("h6.comment-thread__title").exists()).toBeFalsy();
     });
   });
@@ -41,7 +42,7 @@ describe("<CommentThread />", () => {
     });
 
     it("should render a h6 comment-thread__title with author name", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
+      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find("h6.comment-thread__title").text()).toContain(`Conversation with ${comment.author.name}`);
     });
 
@@ -51,7 +52,7 @@ describe("<CommentThread />", () => {
       });
 
       it("should render a h6 comment-thread__title with 'Deleted participant'", () => {
-        const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
+        const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
         expect(wrapper.find("h6.comment-thread__title").text()).toContain("Conversation with Deleted participant");
       });
     });
@@ -59,22 +60,22 @@ describe("<CommentThread />", () => {
 
   describe("should render a Comment", () => {
     it("and pass the session as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
+      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(Comment).first().props()).toHaveProperty("session", session);
     });
 
     it("and pass comment data as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
+      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(Comment).first().props()).toHaveProperty("comment", comment);
     });
 
     it("and pass the votable as a prop to it", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
+      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(Comment).first().props()).toHaveProperty("votable", true);
     });
 
     it("and pass the isRootComment equal true", () => {
-      const wrapper = shallow(<CommentThread comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
+      const wrapper = shallow(<CommentThread commentsMaxLength={commentsMaxLength}  comment={comment} session={session} votable={true} rootCommentable={rootCommentable} orderBy={orderBy} />);
       expect(wrapper.find(Comment).first().props()).toHaveProperty("isRootComment", true);
     });
   });

data/app/frontend/comments/comment_thread.component.tsx

@@ -18,6 +18,7 @@ interface CommentThreadProps {
   votable?: boolean;
   rootCommentable: AddCommentFormCommentableFragment;
   orderBy: string;
+  commentsMaxLength: number;
 }
 
 /**
@@ -33,7 +34,7 @@ class CommentThread extends React.Component<CommentThreadProps> {
   };
 
   public render() {
-    const { comment, session, votable, rootCommentable, orderBy } = this.props;
+    const { comment, session, votable, rootCommentable, orderBy, commentsMaxLength } = this.props;
 
     return (
       <div>
@@ -46,6 +47,7 @@ class CommentThread extends React.Component<CommentThreadProps> {
             isRootComment={true}
             rootCommentable={rootCommentable}
             orderBy={orderBy}
+            commentsMaxLength={commentsMaxLength}
           />
         </div>
       </div>

data/app/frontend/comments/comments.component.test.tsx

@@ -12,12 +12,15 @@ import resolveGraphQLQuery from "../support/resolve_graphql_query";
 
 import { loadLocaleTranslations } from "../support/load_translations";
 
-describe("<Comments />", () => {
+describe("<Comments commentsMaxLength={commentsMaxLength} />", () => {
   let commentable: any = {};
   let session: any = null;
+  const commentsMaxLength: number = 1000;
   const commentableId = "1";
   const commentableType = "Decidim::DummyResources::DummyResource";
   const orderBy = "older";
+  const locale = "en";
+  const toggleTranslations = false;
   const reorderComments = jasmine.createSpy("reorderComments");
 
   beforeEach(() => {
@@ -52,19 +55,19 @@ describe("<Comments />", () => {
   });
 
   it("renders loading-comments class and the respective loading text", () => {
-    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} loading={true} />);
+    const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} loading={true} />);
     expect(wrapper.find(".loading-comments").exists()).toBeTruthy();
     expect(wrapper.find("h2").text()).toEqual("Loading comments ...");
   });
 
   it("renders a div of id comments", () => {
-    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+    const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
     expect(wrapper.find("#comments").exists()).toBeTruthy();
   });
 
   describe("renders a CommentThread component for each comment", () => {
     it("and pass filter comment data as a prop to it", () => {
-      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
       wrapper.find(CommentThread).forEach((node, idx) => {
         expect(node.prop("comment")).toEqual(commentable.comments[idx]);
@@ -72,7 +75,7 @@ describe("<Comments />", () => {
     });
 
     it("and pass the session as a prop to it", () => {
-      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
       wrapper.find(CommentThread).forEach((node) => {
         expect(node.prop("session")).toEqual(session);
@@ -80,7 +83,7 @@ describe("<Comments />", () => {
     });
 
     it("and pass the commentable 'commentsHaveVotes' property as a prop to it", () => {
-      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(CommentThread).length).toEqual(commentable.comments.length);
       wrapper.find(CommentThread).forEach((node) => {
         expect(node.prop("votable")).toBeTruthy();
@@ -89,13 +92,13 @@ describe("<Comments />", () => {
   });
 
   it("renders comments count", () => {
-    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+    const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
     const rex = new RegExp(`${commentable.comments.length} comments`);
     expect(wrapper.find("h2.section-heading").text()).toMatch(rex);
   });
 
   it("renders a AddCommentForm component and pass the commentable 'commentsHaveAlignment' as a prop", () => {
-    const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+    const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
     expect(wrapper.find(AddCommentForm).length).toEqual(1);
     expect(wrapper.find(AddCommentForm).prop("arguable")).toBeTruthy();
   });
@@ -107,12 +110,12 @@ describe("<Comments />", () => {
     });
 
     it("doesn't render an AddCommentForm component", () => {
-      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
     });
 
     it("renders a callout message to inform the user that comments are blocked", () => {
-      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(".callout.warning").text()).toContain("disabled");
     });
   });
@@ -123,24 +126,24 @@ describe("<Comments />", () => {
     });
 
     it("doesn't render an AddCommentForm component", () => {
-      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(AddCommentForm).exists()).toBeFalsy();
     });
 
     it("renders a callout message to inform the user that comments are blocked", () => {
-      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(".callout.warning").text()).toContain("not able");
     });
   });
 
   describe("renders a CommentOrderSelector component", () => {
     it("and pass the reorderComments as a prop to it", () => {
-      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(CommentOrderSelector).prop("reorderComments")).toEqual(reorderComments);
     });
 
     it("and pass the orderBy as a prop to it", () => {
-      const wrapper = shallow(<Comments commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
+      const wrapper = shallow(<Comments locale={locale} toggleTranslations={toggleTranslations} commentsMaxLength={commentsMaxLength} commentable={commentable} session={session} reorderComments={reorderComments} orderBy={orderBy} />);
       expect(wrapper.find(CommentOrderSelector).prop("defaultOrderBy")).toEqual("older");
     });
   });

data/app/frontend/comments/comments.component.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { graphql } from "react-apollo";
 
+const PropTypes = require("prop-types");
+
 import Application from "../application/application.component";
 
 import AddCommentForm from "./add_comment_form.component";
@@ -12,12 +14,16 @@ import {
   GetCommentsQueryVariables
 } from "../support/schema";
 
-const { I18n } = require("react-i18nify");
+const { I18n, Translate } = require("react-i18nify");
 
 interface CommentsProps extends GetCommentsQuery {
+  locale: string;
+  toggleTranslations: boolean;
   loading?: boolean;
   orderBy: string;
+  singleCommentId?: string;
   reorderComments: (orderBy: string) => void;
+  commentsMaxLength: number;
 }
 
 /**
@@ -36,10 +42,25 @@ export class Comments extends React.Component<CommentsProps> {
     }
   };
 
+  public static childContextTypes: any = {
+    locale: PropTypes.string,
+    toggleTranslations: PropTypes.bool
+  };
+
+  public getChildContext() {
+    return {
+      locale: this.props.locale,
+      toggleTranslations: this.props.toggleTranslations
+    };
+  }
+
   public render() {
-    const { commentable: { comments, totalCommentsCount = 0, userAllowedToComment }, reorderComments, orderBy, loading } = this.props;
+    const { commentable: { totalCommentsCount = 0 }, singleCommentId, loading, commentsMaxLength } = this.props;
     let commentClasses = "comments";
     let commentHeader = I18n.t("components.comments.title", { count: totalCommentsCount });
+    if (singleCommentId && singleCommentId !== "") {
+      commentHeader = I18n.t("components.comments.comment_details_title");
+    }
 
     if (loading) {
       commentClasses += " loading-comments";
@@ -53,11 +74,9 @@ export class Comments extends React.Component<CommentsProps> {
             <h2 className="order-by__text section-heading">
               {commentHeader}
             </h2>
-            <CommentOrderSelector
-              reorderComments={reorderComments}
-              defaultOrderBy={orderBy}
-            />
+            {this._renderCommentOrderSelector()}
           </div>
+          {this._renderSingleCommentWarning()}
           {this._renderBlockedCommentsWarning()}
           {this._renderCommentThreads()}
           {this._renderAddCommentForm()}
@@ -67,6 +86,54 @@ export class Comments extends React.Component<CommentsProps> {
     );
   }
 
+  /**
+   * Renders warning message when viewing a single comment.
+   * @private
+   * @returns {Void|DOMElement} - A warning message or nothing.
+   */
+  private _renderSingleCommentWarning() {
+    const { singleCommentId, reorderComments, orderBy } = this.props;
+
+    if (singleCommentId && singleCommentId !== "") {
+      const newUrl = `${window.location.pathname}${window.location.search.replace(`commentId=${singleCommentId}`, "")}`;
+
+      return (
+        <div className="callout secondary">
+          <h5>{I18n.t("components.comments.single_comment_warning_title")}</h5>
+          <p>
+            <Translate
+              value="components.comments.single_comment_warning"
+              url={newUrl}
+              dangerousHTML={true}
+            />
+          </p>
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  /**
+   * Renders an order selector.
+   * @private
+   * @returns {Void|DOMElement} - A warning message or nothing.
+   */
+  private _renderCommentOrderSelector() {
+    const { singleCommentId, reorderComments, orderBy } = this.props;
+
+    if (singleCommentId && singleCommentId !== "") {
+      return null;
+    }
+
+    return (
+      <CommentOrderSelector
+        reorderComments={reorderComments}
+        defaultOrderBy={orderBy}
+      />
+    );
+  }
+
   /**
    * Renders a warning message if the commentable doesn't accept new comments.
    * @private
@@ -114,7 +181,7 @@ export class Comments extends React.Component<CommentsProps> {
    * @returns {ReactComponent[]} - A collection of CommentThread components
    */
   private _renderCommentThreads() {
-    const { session, commentable, orderBy } = this.props;
+    const { session, commentable, orderBy, commentsMaxLength } = this.props;
     const { comments, commentsHaveVotes } = commentable;
 
     return comments.map((comment) => (
@@ -125,6 +192,7 @@ export class Comments extends React.Component<CommentsProps> {
         votable={commentsHaveVotes}
         rootCommentable={commentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     ));
   }
@@ -135,9 +203,13 @@ export class Comments extends React.Component<CommentsProps> {
    * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
    */
   private _renderAddCommentForm() {
-    const { session, commentable, orderBy } = this.props;
+    const { session, commentable, orderBy, singleCommentId, commentsMaxLength } = this.props;
     const { acceptsNewComments, commentsHaveAlignment, userAllowedToComment } = commentable;
 
+    if (singleCommentId && singleCommentId !== "") {
+      return null;
+    }
+
     if (acceptsNewComments && userAllowedToComment) {
       return (
         <AddCommentForm
@@ -146,6 +218,7 @@ export class Comments extends React.Component<CommentsProps> {
           arguable={commentsHaveAlignment}
           rootCommentable={commentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
     }
@@ -176,6 +249,7 @@ const CommentsWithData: any = graphql<GetCommentsQuery, CommentsProps>(commentsQ
         session,
         commentable,
         orderBy: ownProps.orderBy,
+        singleCommentId: ownProps.singleCommentId,
         reorderComments: (orderBy: string) => {
           return refetch({
             orderBy
@@ -187,7 +261,10 @@ const CommentsWithData: any = graphql<GetCommentsQuery, CommentsProps>(commentsQ
 })(Comments);
 
 export interface CommentsApplicationProps extends GetCommentsQueryVariables {
+  singleCommentId: string;
   locale: string;
+  toggleTranslations: boolean;
+  commentsMaxLength: number;
 }
 
 /**
@@ -195,12 +272,16 @@ export interface CommentsApplicationProps extends GetCommentsQueryVariables {
  * connect it with Apollo client and store.
  * @returns {ReactComponent} - A component wrapped within an Application component
  */
-const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, commentableId, commentableType }) => (
+const CommentsApplication: React.SFC<CommentsApplicationProps> = ({ locale, toggleTranslations, commentableId, commentableType, singleCommentId, commentsMaxLength }) => (
   <Application locale={locale}>
     <CommentsWithData
+      commentsMaxLength={commentsMaxLength}
       commentableId={commentableId}
       commentableType={commentableType}
+      locale={locale}
+      toggleTranslations={toggleTranslations}
       orderBy="older"
+      singleCommentId={singleCommentId}
     />
   </Application>
 );