From c1956a307db8d03797bfb1ebe153ca8f5805d9cc Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 8 Aug 2018 16:30:43 +0200
Subject: [PATCH] Make readonly and add translations

---
 .../PermalinkButton/PermalinkButton.tsx       |  2 +-
 .../PermalinkButton/PermalinkPopover.tsx      | 10 +++++--
 .../stream/components/PermalinkView.tsx       | 29 ++++++++++++-------
 src/locales/en-US/stream.ftl                  |  8 +++--
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
index 493625e2b..aedf477e5 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
@@ -60,7 +60,7 @@ class Permalink extends React.Component<PermalinkProps> {
             <MatchMedia minWidth="xs">
               <ButtonIcon>share</ButtonIcon>
             </MatchMedia>
-            <Localized id="comments-permalink-share">
+            <Localized id="comments-permalinkButton-share">
               <span>Share</span>
             </Localized>
           </Button>
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
index 218bd78f6..9e7afcc9d 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
@@ -38,15 +38,19 @@ class PermalinkPopover extends React.Component<InnerProps> {
     const { copied } = this.state;
     return (
       <Flex itemGutter="half" className={styles.root}>
-        <TextField defaultValue={permalinkURL} className={styles.textField} />
+        <TextField
+          defaultValue={permalinkURL}
+          className={styles.textField}
+          readOnly
+        />
         <CopyToClipboard text={permalinkURL} onCopy={this.onCopy}>
           <Button color="primary" variant="filled" size="small">
             {copied ? (
-              <Localized id="comments-permalink-copied">
+              <Localized id="comments-permalinkPopover-copied">
                 <span>Copied!</span>
               </Localized>
             ) : (
-              <Localized id="comments-permalink-copy">
+              <Localized id="comments-permalinkPopover-copy">
                 <span>Copy</span>
               </Localized>
             )}
diff --git a/src/core/client/stream/components/PermalinkView.tsx b/src/core/client/stream/components/PermalinkView.tsx
index b7ea70370..fac9f9ac4 100644
--- a/src/core/client/stream/components/PermalinkView.tsx
+++ b/src/core/client/stream/components/PermalinkView.tsx
@@ -1,3 +1,4 @@
+import { Localized } from "fluent-react/compat";
 import React, { StatelessComponent } from "react";
 
 import { Button, Flex, Typography } from "talk-ui/components";
@@ -19,18 +20,24 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
   return (
     <div className={styles.root}>
       {assetURL && (
-        <Button
-          id="talk-comments-permalinkView-showAllComments"
-          variant="outlined"
-          color="primary"
-          onClick={onShowAllComments}
-          className={styles.button}
-          fullWidth
-        >
-          Show all Comments
-        </Button>
+        <Localized id="comments-permalinkView-showAllComments">
+          <Button
+            id="talk-comments-permalinkView-showAllComments"
+            variant="outlined"
+            color="primary"
+            onClick={onShowAllComments}
+            className={styles.button}
+            fullWidth
+          >
+            Show all Comments
+          </Button>
+        </Localized>
+      )}
+      {!comment && (
+        <Localized id="comments-permalinkView-commentNotFound">
+          <Typography>Comment not found</Typography>
+        </Localized>
       )}
-      {!comment && <Typography>Comment not found</Typography>}
       {comment && (
         <Flex direction="column">
           <CommentContainer data={comment} />
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 08a397cc1..1ae160503 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -6,6 +6,8 @@ comments-postCommentForm-post = Post
 comments-stream-loadMore = Load more
 comments-replyList-showAll = Show all
 
-comments-permalink-share = Share
-comments-permalink-copy = Copy
-comments-permalink-copied = Copied
+comments-permalinkButton-share = Share
+comments-permalinkPopover-copy = Copy
+comments-permalinkPopover-copied = Copied
+comments-permalinkView-showAllComments = Show all comments
+comments-permalinkView-commentNotFound = Comment not found