Make readonly and add translations

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>

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>
             )}

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
+        <Localized id="comments-permalinkView-showAllComments">
-          id="talk-comments-permalinkView-showAllComments"
+          <Button
-          variant="outlined"
+            id="talk-comments-permalinkView-showAllComments"
-          color="primary"
+            variant="outlined"
-          onClick={onShowAllComments}
+            color="primary"
-          className={styles.button}
+            onClick={onShowAllComments}
-          fullWidth
+            className={styles.button}
-        >
+            fullWidth
-          Show all Comments
+          >
-        </Button>
+            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} />

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-permalinkButton-share = Share
-comments-permalink-copy = Copy
+comments-permalinkPopover-copy = Copy
-comments-permalink-copied = Copied
+comments-permalinkPopover-copied = Copied
+comments-permalinkView-showAllComments = Show all comments
+comments-permalinkView-commentNotFound = Comment not found