decidim-comments 0.21.0 → 0.23.2

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";
@@ -15,10 +17,13 @@ import {
 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;
 }
 
 /**
@@ -37,8 +42,20 @@ 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: { totalCommentsCount = 0 }, singleCommentId, 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 !== "") {
@@ -164,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) => (
@@ -175,6 +192,7 @@ export class Comments extends React.Component<CommentsProps> {
         votable={commentsHaveVotes}
         rootCommentable={commentable}
         orderBy={orderBy}
+        commentsMaxLength={commentsMaxLength}
       />
     ));
   }
@@ -185,7 +203,7 @@ export class Comments extends React.Component<CommentsProps> {
    * @returns {Void|ReactComponent} - A AddCommentForm component or nothing
    */
   private _renderAddCommentForm() {
-    const { session, commentable, orderBy, singleCommentId } = this.props;
+    const { session, commentable, orderBy, singleCommentId, commentsMaxLength } = this.props;
     const { acceptsNewComments, commentsHaveAlignment, userAllowedToComment } = commentable;
 
     if (singleCommentId && singleCommentId !== "") {
@@ -200,6 +218,7 @@ export class Comments extends React.Component<CommentsProps> {
           arguable={commentsHaveAlignment}
           rootCommentable={commentable}
           orderBy={orderBy}
+          commentsMaxLength={commentsMaxLength}
         />
       );
     }
@@ -244,6 +263,8 @@ const CommentsWithData: any = graphql<GetCommentsQuery, CommentsProps>(commentsQ
 export interface CommentsApplicationProps extends GetCommentsQueryVariables {
   singleCommentId: string;
   locale: string;
+  toggleTranslations: boolean;
+  commentsMaxLength: number;
 }
 
 /**
@@ -251,11 +272,14 @@ 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, singleCommentId }) => (
+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}
     />

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

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { graphql, MutationFunc } from "react-apollo";
 
+const PropTypes = require("prop-types");
+
 import VoteButton from "./vote_button.component";
 
 import {
@@ -12,21 +14,25 @@ import {
   GetCommentsQuery
 } from "../support/schema";
 
+const { I18n } = require("react-i18nify");
+
 interface DownVoteButtonProps {
   session: AddCommentFormSessionFragment & {
     user: any;
   } | null;
   comment: DownVoteButtonFragment;
-  downVote?: () => void;
+  downVote?: (context: any) => void;
   rootCommentable: AddCommentFormCommentableFragment;
   orderBy: string;
 }
 
-export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
-  session,
-  comment: { downVotes, upVoted, downVoted },
-  downVote
-}) => {
+export const DownVoteButton: React.SFC<DownVoteButtonProps> = (
+  {
+    session,
+    comment: { downVotes, upVoted, downVoted },
+    downVote
+  },
+  context) => {
   let selectedClass = "";
 
   if (downVoted) {
@@ -37,13 +43,15 @@ export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
 
   const userLoggedIn = session && session.user;
   const disabled = false;
+  const voteAction = () => downVote && downVote(context);
 
   return (
     <VoteButton
       buttonClassName="comment__votes--down"
       iconName="icon-chevron-bottom"
+      text={I18n.t("components.down_vote_button.text")}
       votes={downVotes}
-      voteAction={downVote}
+      voteAction={voteAction}
       disabled={disabled}
       selectedClass={selectedClass}
       userLoggedIn={userLoggedIn}
@@ -51,13 +59,20 @@ export const DownVoteButton: React.SFC<DownVoteButtonProps> = ({
   );
 };
 
+DownVoteButton.contextTypes = {
+  locale: PropTypes.string,
+  toggleTranslations: PropTypes.bool
+};
+
 const downVoteMutation = require("../mutations/down_vote.mutation.graphql");
 const getCommentsQuery = require("../queries/comments.query.graphql");
 
 const DownVoteButtonWithMutation = graphql<DownVoteMutation, DownVoteButtonProps>(downVoteMutation, {
   props: ({ ownProps, mutate }: { ownProps: DownVoteButtonProps, mutate: MutationFunc<DownVoteMutation> }) => ({
-    downVote: () => mutate({
+    downVote: ({ locale, toggleTranslations }: any) => mutate({
       variables: {
+        locale,
+        toggleTranslations,
         id: ownProps.comment.id
       },
       optimisticResponse: {
@@ -74,9 +89,12 @@ const DownVoteButtonWithMutation = graphql<DownVoteMutation, DownVoteButtonProps
       },
       update: (store, { data }: { data: DownVoteMutation }) => {
         const variables = {
+          locale,
+          toggleTranslations,
           commentableId: ownProps.rootCommentable.id,
           commentableType: ownProps.rootCommentable.type,
-          orderBy: ownProps.orderBy
+          orderBy: ownProps.orderBy,
+          singleCommentId: null
         };
 
         const commentReducer = (comment: CommentFragment): CommentFragment => {