Fix Bug 1603610 - Enable users to leave comments on translations

frontend/public/static/locale/en-US/translate.ftl

@@ -81,6 +81,13 @@ resourceprogress-ResourceProgress--errors = Errors
 resourceprogress-ResourceProgress--missing = Missing
 
 
+## Comments
+## Allows user to leave comments on translations
+
+comments-AddComment--input =
+    .placeholder = Write a comment...
+
+
 ## Editor Menu
 ## Allows contributors to modify or propose a translation
 
@@ -270,6 +277,13 @@ history-Translation--button-not-rejected =
 history-Translation--button-rejected =
     .title = Rejected
 
+history-Translation--button-comment = { $commentCount ->
+        [0] Comment
+        [one] { $commentCount } Comment
+       *[other] { $commentCount } Comments
+    }
+    .title = Toggle translation comment
+
 
 ## Interactive Tour
 ## Shows an interactive Tour on the "Tutorial" project,
@@ -436,6 +450,7 @@ notification--make-suggestions-enabled = Make Suggestions enabled
 notification--make-suggestions-disabled = Make Suggestions disabled
 notification--entity-not-found = Can’t load specified string
 notification--string-link-copied = Link copied to clipboard
+notification--comment-added = Comment added
 
 
 ## OtherLocales Translation
@@ -567,6 +582,12 @@ search-TimeRangeFilter--edit-range = <glyph></glyph>Edit Range
 search-TimeRangeFilter--save-range = Save Range
 
 
+## User Avatar
+## Shows user Avatar with alt text
+
+user-UserAvatar--anon-alt-text = Anonymous User
+user-UserAvatar--alt-text = User Profile
+
 ## User Menu
 ## Shows user menu entries and options to sign in or out.
 

frontend/src/core/api/base.js

@@ -35,6 +35,18 @@ export default class APIBase {
         return new URL(url, window.location.origin);
     }
 
+    toCamelCase = (s: string) => {
+        return s.replace(/([-_][a-z])/ig, ($1) => {
+            return $1.toUpperCase()
+                .replace('-', '')
+                .replace('_', '');
+        });
+    }
+
+    isObject = function (obj: any) {
+        return obj === Object(obj) && !Array.isArray(obj) && typeof obj !== 'function';
+    }
+
     async fetch(
         url: string,
         method: string,
@@ -87,4 +99,24 @@ export default class APIBase {
             return {};
         }
     }
+
+    keysToCamelCase(results: any) {
+        if (this.isObject(results)) {
+            const newObj: any = {};
+
+            Object.keys(results)
+                .forEach((key) => {
+                    newObj[this.toCamelCase(key)] = this.keysToCamelCase(results[key]);
+                });
+
+            return newObj;
+        }
+        else if (Array.isArray(results)) {
+            return results.map((i) => {
+                return this.keysToCamelCase(i);
+            });
+        }
+
+        return results;
+    }
 }

frontend/src/core/api/comment.js

@@ -0,0 +1,19 @@
+/* @flow */
+
+import APIBase from './base';
+
+
+export default class CommentAPI extends APIBase {
+    add(comment: string, translationId: number) {
+        const payload = new URLSearchParams();
+        payload.append('comment', comment);
+        payload.append('translationId', translationId.toString());
+
+        const headers = new Headers();
+        const csrfToken = this.getCSRFToken();
+        headers.append('X-Requested-With', 'XMLHttpRequest');
+        headers.append('X-CSRFToken', csrfToken);
+
+        return this.fetch('/add-comment/', 'POST', payload, headers);
+    }
+}

frontend/src/core/api/entity.js

@@ -125,7 +125,9 @@ export default class EntityAPI extends APIBase {
         const headers = new Headers();
         headers.append('X-Requested-With', 'XMLHttpRequest');
 
-        return await this.fetch('/get-history/', 'GET', payload, headers);
+        const results = await this.fetch('/get-history/', 'GET', payload, headers);
+
+        return this.keysToCamelCase(results);
     }
 
     async getOtherLocales(

frontend/src/core/api/index.js

@@ -9,12 +9,14 @@ import ProjectAPI from './project';
 import ResourceAPI from './resource';
 import TranslationAPI from './translation';
 import UserAPI from './user';
+import CommentAPI from './comment';
 
 
 export type {
     Entities,
     Entity,
     EntityTranslation,
+    TranslationComment,
     MachineryTranslation,
     OtherLocaleTranslations,
     OtherLocaleTranslation,
@@ -23,6 +25,7 @@ export type {
 
 export default {
     entity: new EntityAPI(),
+    comment: new CommentAPI(),
     filter: new FilterAPI(),
     locale: new LocaleAPI(),
     l10n: new L10nAPI(),

frontend/src/core/api/types.js

@@ -14,6 +14,20 @@ export type EntityTranslation = {|
 |};
 
 
+/**
+ * Comments pertaining to a translation.
+ */
+export type TranslationComment = {|
+    +author: string,
+    +username: string,
+    +userGravatarUrlSmall: string,
+    +createdAt: string,
+    +dateIso: string,
+    +content: string,
+    +id: number,
+|};
+
+
 /**
  * String that needs to be translated, along with its current metadata,
  * and its currently accepted translations.

frontend/src/core/comments/components/AddComment.css

@@ -0,0 +1,10 @@
+.comments-list .add-comment textarea {
+    background-color: #272a2f;
+    border: solid 1px #272a2f;
+    border-radius: 5px;
+    color: #AAAAAA;
+    display: flex;
+    align-items: center;
+    height: 1.5em;
+    padding: 9px;
+}

frontend/src/core/comments/components/AddComment.js

@@ -0,0 +1,76 @@
+/* @flow */
+
+import * as React from 'react';
+import { Localized } from '@fluent/react';
+
+import './AddComment.css';
+
+import { UserAvatar } from 'core/user'
+
+type Props = {|
+    user: string,
+    username: string,
+    imageURL: string,
+    translationId: number,
+    addComment: (string, number) => void,
+|};
+
+
+export default function AddComments(props: Props) {
+    const {
+        user,
+        username,
+        imageURL,
+        translationId,
+        addComment,
+    } = props;
+
+    let commentInput: any = React.useRef();
+
+    if (!user) {
+        return null;
+    }
+
+    const onEnterSubmit = (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => {
+        if (event.keyCode === 13 && event.shiftKey === false) {
+            event.preventDefault();
+            submitComment(event);
+        }
+    }
+
+    const submitComment = (event: SyntheticKeyboardEvent<>) => {
+        event.preventDefault();
+        const comment = commentInput.current.value;
+
+        if (!comment) {
+            return null;
+        }
+
+        addComment(comment, translationId);
+        commentInput.current.value = '';
+    };
+
+    return <div className='comment add-comment'>
+        <UserAvatar
+            user={ user }
+            username={ username }
+            title=''
+            imageUrl={ imageURL }
+        />
+        <form className='container'>
+            <Localized
+                id='comments-AddComment--input'
+                attrs={{ placeholder: true }}
+            >
+                <textarea
+                    id='comment-input'
+                    name='comment'
+                    dir='auto'
+                    placeholder={ `Write a comment ${'\u2026'}` }
+                    ref={ commentInput }
+                    onKeyDown={ onEnterSubmit }
+                />
+            </Localized>
+        </form>
+    </div>
+}

frontend/src/core/comments/components/AddComment.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+
+import AddComment from './AddComment';
+
+
+const DEFAULT_USER = {
+    user: 'RSwanson',
+    username: 'Ron_Swanson',
+    imageURL: '',
+}
+
+describe('<AddComment>', () => {
+    it('calls submitComment function', () => {
+        const submitCommentFn = sinon.spy();
+        const wrapper = shallow(<AddComment
+            { ...DEFAULT_USER }
+            submitComment={ submitCommentFn }
+        />);
+
+        const event = {
+            preventDefault: sinon.spy(),
+        };
+
+        wrapper.find('form').simulate('submit', event);
+        expect(submitCommentFn.calledOnce).toBeTruthy;
+    });
+});

frontend/src/core/comments/components/Comment.css

@@ -0,0 +1,24 @@
+.comments-list .comment a {
+    color: #7BC876;
+    font-weight: 400;
+}
+
+.comments-list .comment .content {
+    background-color: #4d5967;
+    border: solid 1px #4d5967;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    padding: 8px;
+}
+
+.comments-list .comment .content p {
+    display: inline-block;
+    margin-left: 8px;
+}
+
+.comments-list .comment .info {
+    color: #AAAAAA;
+    font-size: 0.85em;
+    padding: 0 10px;
+}

frontend/src/core/comments/components/Comment.js

@@ -0,0 +1,54 @@
+/* @flow */
+
+import * as React from 'react';
+import ReactTimeAgo from 'react-time-ago';
+
+import './Comment.css';
+
+import { UserAvatar } from 'core/user'
+
+import type { TranslationComment } from 'core/api';
+
+
+type Props = {|
+    comment: TranslationComment,
+|};
+
+
+export default function Comment(props: Props) {
+    const { comment } = props;
+
+    if (!comment) {
+        return null;
+    }
+
+    return <li className='comment'>
+        <UserAvatar
+            user={ comment.author }
+            username={ comment.username }
+            imageUrl={ comment.userGravatarUrlSmall }
+        />
+        <div className='container'>
+            <div className='content' dir='auto'>
+                <a
+                    href={ `/contributors/${comment.username}` }
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    onClick={ (e: SyntheticMouseEvent<>) => e.stopPropagation() }
+                >
+                    { comment.author }
+                </a>
+                <p>
+                    { comment.content }
+                </p>
+            </div>
+            <div className='info'>
+                <ReactTimeAgo
+                    dir='ltr'
+                    date={ new Date(comment.dateIso) }
+                    title={ `${comment.createdAt} UTC` }
+                />
+            </div>
+        </div>
+    </li>
+}