diff --git a/src/core/client/embed/PymControl.ts b/src/core/client/embed/PymControl.ts
index 1255d0854..92a8dbefc 100644
--- a/src/core/client/embed/PymControl.ts
+++ b/src/core/client/embed/PymControl.ts
@@ -25,7 +25,6 @@ export default class PymControl {
title: config.title,
id: `${config.id}_iframe`,
name: `${config.id}_iframe`,
- optionalparams: "",
});
this.cleanups = decorators
diff --git a/src/core/client/framework/helpers/getURLWithCommentID.tsx b/src/core/client/framework/helpers/getURLWithCommentID.tsx
new file mode 100644
index 000000000..421032782
--- /dev/null
+++ b/src/core/client/framework/helpers/getURLWithCommentID.tsx
@@ -0,0 +1,8 @@
+import { modifyQuery } from "talk-framework/utils";
+
+export default function getURLWithCommentID(
+ assetURL: string,
+ commentID?: string
+) {
+ return modifyQuery(assetURL, { commentID });
+}
diff --git a/src/core/client/framework/helpers/index.ts b/src/core/client/framework/helpers/index.ts
index 653f66d98..e4a5c898f 100644
--- a/src/core/client/framework/helpers/index.ts
+++ b/src/core/client/framework/helpers/index.ts
@@ -1 +1,2 @@
export { default as getMe } from "./getMe";
+export { default as getURLWithCommentID } from "./getURLWithCommentID";
diff --git a/src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.tsx b/src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.tsx
new file mode 100644
index 000000000..f9e2e9f49
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.tsx
@@ -0,0 +1,13 @@
+import React, { StatelessComponent } from "react";
+
+import { Flex } from "talk-ui/components";
+
+const ButtonsBar: StatelessComponent = props => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+export default ButtonsBar;
diff --git a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
index b30621913..7ed3d93f9 100644
--- a/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
+++ b/src/core/client/stream/tabs/comments/components/Comment/Comment.tsx
@@ -2,7 +2,7 @@ import React, { StatelessComponent } from "react";
import HTMLContent from "talk-stream/components/HTMLContent";
import Timestamp from "talk-stream/components/Timestamp";
-import { Flex } from "talk-ui/components";
+import { Flex, HorizontalGutter } from "talk-ui/components";
import * as styles from "./Comment.css";
import EditedMarker from "./EditedMarker";
@@ -43,10 +43,10 @@ const Comment: StatelessComponent = props => {
{props.topBarRight && {props.topBarRight}
}
- {props.body || ""}
-
+
+ {props.body || ""}
{props.footer}
-
+
);
};
diff --git a/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx b/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx
new file mode 100644
index 000000000..2025974c5
--- /dev/null
+++ b/src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx
@@ -0,0 +1,31 @@
+import React, { EventHandler, MouseEvent } from "react";
+import { StatelessComponent } from "react";
+
+import { Localized } from "fluent-react/compat";
+import { Button } from "talk-ui/components";
+
+export interface ShowConversationLinkProps {
+ href?: string;
+ onClick?: EventHandler;
+}
+
+const ShowConversationLink: StatelessComponent<
+ ShowConversationLinkProps
+> = props => {
+ return (
+
+ );
+};
+
+export default ShowConversationLink;
diff --git a/src/core/client/stream/tabs/comments/components/Comment/index.ts b/src/core/client/stream/tabs/comments/components/Comment/index.ts
index e89d4b958..d05ab70f8 100644
--- a/src/core/client/stream/tabs/comments/components/Comment/index.ts
+++ b/src/core/client/stream/tabs/comments/components/Comment/index.ts
@@ -1,3 +1,5 @@
export { default, default as IndentedComment } from "./IndentedComment";
export { default as TopBarLeft } from "./TopBarLeft";
export { default as Username } from "./Username";
+export { default as ButtonsBar } from "./ButtonsBar";
+export { default as ShowConversationLink } from "./ShowConversationLink";
diff --git a/src/core/client/stream/tabs/comments/components/ReplyList.tsx b/src/core/client/stream/tabs/comments/components/ReplyList.tsx
index 896120b91..87f9eb610 100644
--- a/src/core/client/stream/tabs/comments/components/ReplyList.tsx
+++ b/src/core/client/stream/tabs/comments/components/ReplyList.tsx
@@ -15,7 +15,9 @@ export interface ReplyListProps {
id: string;
};
comments: ReadonlyArray<
- { id: string } & PropTypesOf["comment"]
+ { id: string; showConversationLink?: boolean } & PropTypesOf<
+ typeof CommentContainer
+ >["comment"]
>;
onShowAll?: () => void;
hasMore?: boolean;
@@ -52,6 +54,7 @@ const ReplyList: StatelessComponent = props => {
indentLevel={props.indentLevel}
localReply={props.localReply}
disableReplies={props.disableReplies}
+ showConversationLink={!!comment.showConversationLink}
/>
{getReplyListElement(props, comment)}
diff --git a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
index f9db4932c..cebc13c28 100644
--- a/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
+++ b/src/core/client/stream/tabs/comments/containers/CommentContainer.tsx
@@ -1,20 +1,26 @@
import { Localized } from "fluent-react/compat";
-import React, { Component } from "react";
+import React, { Component, MouseEvent } from "react";
import { graphql } from "react-relay";
import { isBeforeDate } from "talk-common/utils";
+import { getURLWithCommentID } from "talk-framework/helpers";
import withFragmentContainer from "talk-framework/lib/relay/withFragmentContainer";
import { PropTypesOf } from "talk-framework/types";
import { CommentContainer_asset as AssetData } from "talk-stream/__generated__/CommentContainer_asset.graphql";
import { CommentContainer_comment as CommentData } from "talk-stream/__generated__/CommentContainer_comment.graphql";
import { CommentContainer_me as MeData } from "talk-stream/__generated__/CommentContainer_me.graphql";
import {
+ SetCommentIDMutation,
ShowAuthPopupMutation,
+ withSetCommentIDMutation,
withShowAuthPopupMutation,
} from "talk-stream/mutations";
import { Button } from "talk-ui/components";
-import Comment from "../components/Comment";
+import Comment, {
+ ButtonsBar,
+ ShowConversationLink,
+} from "../components/Comment";
import ReplyButton from "../components/Comment/ReplyButton";
import EditCommentFormContainer from "./EditCommentFormContainer";
import PermalinkButtonContainer from "./PermalinkButtonContainer";
@@ -26,6 +32,7 @@ interface InnerProps {
asset: AssetData;
indentLevel?: number;
showAuthPopup: ShowAuthPopupMutation;
+ setCommentID: SetCommentIDMutation;
/**
* localReply will integrate the mutation response into
* localReplies
@@ -33,6 +40,8 @@ interface InnerProps {
localReply?: boolean;
/** disableReplies will remove the ReplyButton */
disableReplies?: boolean;
+ /** showConversationLink will render a link to the conversation */
+ showConversationLink?: boolean;
}
interface State {
@@ -113,6 +122,12 @@ export class CommentContainer extends Component {
return;
}
+ private handleShowConversation = (e: MouseEvent) => {
+ e.preventDefault();
+ this.props.setCommentID({ id: this.props.comment.id });
+ return false;
+ };
+
public render() {
const {
comment,
@@ -120,6 +135,7 @@ export class CommentContainer extends Component {
indentLevel,
localReply,
disableReplies,
+ showConversationLink,
} = this.props;
const { showReplyDialog, showEditDialog, editable } = this.state;
if (showEditDialog) {
@@ -157,14 +173,25 @@ export class CommentContainer extends Component {
}
footer={
<>
- {!disableReplies && (
-