Merge branch 'next' into admin

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

src/core/client/embed/__snapshots__/PymControl.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PymControl should create iframe 1`] = `"<iframe src=\\"http://coralproject.net/?initialWidth=0&amp;childId=pymcontrol-test-id\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"iFrame title\\" id=\\"pymcontrol-test-id_iframe\\" name=\\"pymcontrol-test-id_iframe\\"></iframe>"`;
+exports[`PymControl should create iframe 1`] = `"<iframe src=\\"http://coralproject.net/?initialWidth=0&amp;childId=pymcontrol-test-id&amp;parentTitle=&amp;parentUrl=http%3A%2F%2Flocalhost%2F\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"iFrame title\\" id=\\"pymcontrol-test-id_iframe\\" name=\\"pymcontrol-test-id_iframe\\"></iframe>"`;
 
 exports[`PymControl should send message 1`] = `"pymxPYMxpymcontrol-test-idxPYMxtestxPYMxhello world"`;

src/core/client/embed/__snapshots__/index.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic integration test should render iframe 1`] = `"<iframe src=\\"http://localhost/stream.html?assetURL=http%3A%2F%2Flocalhost%2F&amp;initialWidth=0&amp;childId=basic-integration-test-id\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"Talk Embed Stream\\" id=\\"basic-integration-test-id_iframe\\" name=\\"basic-integration-test-id_iframe\\" style=\\"width: 1px; min-width: 100%;\\"></iframe>"`;
+exports[`Basic integration test should render iframe 1`] = `"<iframe src=\\"http://localhost/stream.html?assetURL=http%3A%2F%2Flocalhost%2F&amp;initialWidth=0&amp;childId=basic-integration-test-id&amp;parentTitle=&amp;parentUrl=http%3A%2F%2Flocalhost%2F\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"Talk Embed Stream\\" id=\\"basic-integration-test-id_iframe\\" name=\\"basic-integration-test-id_iframe\\" style=\\"width: 1px; min-width: 100%;\\"></iframe>"`;
 
-exports[`Basic integration test should use canonical link 1`] = `"<iframe src=\\"http://localhost/stream.html?assetURL=http%3A%2F%2Flocalhost%2Fcanonical&amp;initialWidth=0&amp;childId=basic-integration-test-id\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"Talk Embed Stream\\" name=\\"basic-integration-test-id_iframe\\" style=\\"width: 1px; min-width: 100%;\\"></iframe>"`;
+exports[`Basic integration test should use canonical link 1`] = `"<iframe src=\\"http://localhost/stream.html?assetURL=http%3A%2F%2Flocalhost%2Fcanonical&amp;initialWidth=0&amp;childId=basic-integration-test-id&amp;parentTitle=&amp;parentUrl=http%3A%2F%2Flocalhost%2F\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"Talk Embed Stream\\" name=\\"basic-integration-test-id_iframe\\" style=\\"width: 1px; min-width: 100%;\\"></iframe>"`;

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

src/core/client/framework/helpers/index.ts

@@ -1 +1,2 @@
 export { default as getMe } from "./getMe";
+export { default as getURLWithCommentID } from "./getURLWithCommentID";

src/core/client/stream/tabs/comments/components/Comment/ButtonsBar.spec.tsx

@@ -0,0 +1,14 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ButtonsBar from "./ButtonsBar";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ButtonsBar> = {
+    children: "children",
+  };
+  const wrapper = shallow(<ButtonsBar {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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 (
+    <Flex direction="row" itemGutter="half">
+      {props.children}
+    </Flex>
+  );
+};
+
+export default ButtonsBar;

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<CommentProps> = props => {
         </TopBarLeft>
         {props.topBarRight && <div>{props.topBarRight}</div>}
       </Flex>
-      <HTMLContent>{props.body || ""}</HTMLContent>
-      <Flex className={styles.footer} direction="row" itemGutter="half">
+      <HorizontalGutter>
+        <HTMLContent>{props.body || ""}</HTMLContent>
         {props.footer}
-      </Flex>
+      </HorizontalGutter>
     </div>
   );
 };

src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.spec.tsx

@@ -0,0 +1,17 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import ShowConversationLink from "./ShowConversationLink";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ShowConversationLink> = {
+    id: "id",
+    onClick: noop,
+    href: "http://localhost/comment",
+  };
+  const wrapper = shallow(<ShowConversationLink {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/tabs/comments/components/Comment/ShowConversationLink.tsx

@@ -0,0 +1,33 @@
+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 {
+  id?: string;
+  href?: string;
+  onClick?: EventHandler<MouseEvent>;
+}
+
+const ShowConversationLink: StatelessComponent<
+  ShowConversationLinkProps
+> = props => {
+  return (
+    <Localized id="comments-showConversationLink-readMore">
+      <Button
+        id={props.id}
+        variant="underlined"
+        color="primary"
+        href={props.href}
+        onClick={props.onClick}
+        target="_parent"
+        anchor
+      >
+        Read More of this Conversation >
+      </Button>
+    </Localized>
+  );
+};
+
+export default ShowConversationLink;

src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ButtonsBar.spec.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)
+  direction="row"
+  itemGutter="half"
+>
+  children
+</withPropsOnChange(Flex)>
+`;

src/core/client/stream/tabs/comments/components/Comment/__snapshots__/Comment.spec.tsx.snap

@@ -30,15 +30,11 @@ exports[`renders username and body 1`] = `
       topBarRight
     </div>
   </withPropsOnChange(Flex)>
-  <HTMLContent>
-    Woof
-  </HTMLContent>
-  <withPropsOnChange(Flex)
-    className="Comment-footer"
-    direction="row"
-    itemGutter="half"
-  >
+  <withPropsOnChange(HorizontalGutter)>
+    <HTMLContent>
+      Woof
+    </HTMLContent>
     footer
-  </withPropsOnChange(Flex)>
+  </withPropsOnChange(HorizontalGutter)>
 </div>
 `;

src/core/client/stream/tabs/comments/components/Comment/__snapshots__/ShowConversationLink.spec.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Localized
+  id="comments-showConversationLink-readMore"
+>
+  <withPropsOnChange(Button)
+    anchor={true}
+    color="primary"
+    href="http://localhost/comment"
+    id="id"
+    onClick={[Function]}
+    target="_parent"
+    variant="underlined"
+  >
+    Read More of this Conversation &gt;
+  </withPropsOnChange(Button)>
+</Localized>
+`;

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";

src/core/client/stream/tabs/comments/components/ReplyList.spec.tsx

@@ -14,7 +14,10 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof ReplyListN> = {
     asset: { id: "asset-id" },
     comment: { id: "comment-id" },
-    comments: [{ id: "comment-1" }, { id: "comment-2" }],
+    comments: [
+      { id: "comment-1" },
+      { id: "comment-2", showConversationLink: true },
+    ],
     onShowAll: noop,
     hasMore: false,
     disableShowAll: false,

src/core/client/stream/tabs/comments/components/ReplyList.tsx

@@ -15,7 +15,9 @@ export interface ReplyListProps {
     id: string;
   };
   comments: ReadonlyArray<
-    { id: string } & PropTypesOf<typeof CommentContainer>["comment"]
+    { id: string; showConversationLink?: boolean } & PropTypesOf<
+      typeof CommentContainer
+    >["comment"]
   >;
   onShowAll?: () => void;
   hasMore?: boolean;
@@ -52,6 +54,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
             indentLevel={props.indentLevel}
             localReply={props.localReply}
             disableReplies={props.disableReplies}
+            showConversationLink={!!comment.showConversationLink}
           />
           {getReplyListElement(props, comment)}
         </HorizontalGutter>

src/core/client/stream/tabs/comments/components/__snapshots__/ReplyList.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
   <withPropsOnChange(HorizontalGutter)
     key="comment-1"
   >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
       asset={
         Object {
           "id": "asset-id",
@@ -24,12 +24,13 @@ exports[`renders correctly 1`] = `
       key="comment-1"
       localReply={false}
       me={null}
+      showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>
   <withPropsOnChange(HorizontalGutter)
     key="comment-2"
   >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
       asset={
         Object {
           "id": "asset-id",
@@ -38,6 +39,7 @@ exports[`renders correctly 1`] = `
       comment={
         Object {
           "id": "comment-2",
+          "showConversationLink": true,
         }
       }
       disableReplies={false}
@@ -45,6 +47,7 @@ exports[`renders correctly 1`] = `
       key="comment-2"
       localReply={false}
       me={null}
+      showConversationLink={true}
     />
   </withPropsOnChange(HorizontalGutter)>
 </withPropsOnChange(HorizontalGutter)>
@@ -58,7 +61,7 @@ exports[`when there is more disables load more button 1`] = `
   <withPropsOnChange(HorizontalGutter)
     key="comment-1"
   >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
       asset={
         Object {
           "id": "asset-id",
@@ -72,12 +75,13 @@ exports[`when there is more disables load more button 1`] = `
       indentLevel={1}
       key="comment-1"
       me={null}
+      showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>
   <withPropsOnChange(HorizontalGutter)
     key="comment-2"
   >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
       asset={
         Object {
           "id": "asset-id",
@@ -91,6 +95,7 @@ exports[`when there is more disables load more button 1`] = `
       indentLevel={1}
       key="comment-2"
       me={null}
+      showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>
   <Indent
@@ -123,7 +128,7 @@ exports[`when there is more renders a load more button 1`] = `
   <withPropsOnChange(HorizontalGutter)
     key="comment-1"
   >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
       asset={
         Object {
           "id": "asset-id",
@@ -137,12 +142,13 @@ exports[`when there is more renders a load more button 1`] = `
       indentLevel={1}
       key="comment-1"
       me={null}
+      showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>
   <withPropsOnChange(HorizontalGutter)
     key="comment-2"
   >
-    <withContext(createMutationContainer(Relay(CommentContainer)))
+    <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
       asset={
         Object {
           "id": "asset-id",
@@ -156,6 +162,7 @@ exports[`when there is more renders a load more button 1`] = `
       indentLevel={1}
       key="comment-2"
       me={null}
+      showConversationLink={false}
     />
   </withPropsOnChange(HorizontalGutter)>
   <Indent

src/core/client/stream/tabs/comments/components/__snapshots__/Stream.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`renders correctly 1`] = `
     <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
         asset={
           Object {
             "id": "asset-id",
@@ -53,7 +53,7 @@ exports[`renders correctly 1`] = `
     <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
         asset={
           Object {
             "id": "asset-id",
@@ -107,7 +107,7 @@ exports[`when there is more disables load more button 1`] = `
     <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
         asset={
           Object {
             "id": "asset-id",
@@ -139,7 +139,7 @@ exports[`when there is more disables load more button 1`] = `
     <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
         asset={
           Object {
             "id": "asset-id",
@@ -207,7 +207,7 @@ exports[`when there is more renders a load more button 1`] = `
     <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
         asset={
           Object {
             "id": "asset-id",
@@ -239,7 +239,7 @@ exports[`when there is more renders a load more button 1`] = `
     <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
         asset={
           Object {
             "id": "asset-id",
@@ -309,7 +309,7 @@ exports[`when use is logged in renders correctly 1`] = `
     <withPropsOnChange(HorizontalGutter)
       key="comment-1"
     >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
         asset={
           Object {
             "id": "asset-id",
@@ -341,7 +341,7 @@ exports[`when use is logged in renders correctly 1`] = `
     <withPropsOnChange(HorizontalGutter)
       key="comment-2"
     >
-      <withContext(createMutationContainer(Relay(CommentContainer)))
+      <withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
         asset={
           Object {
             "id": "asset-id",

src/core/client/stream/tabs/comments/containers/CommentContainer.spec.tsx

@@ -14,7 +14,7 @@ it("renders username and body", () => {
   const props: PropTypesOf<typeof CommentContainerN> = {
     me: null,
     asset: {
-      id: "asset-id",
+      url: "http://localhost/asset",
     },
     comment: {
       id: "comment-id",
@@ -32,6 +32,7 @@ it("renders username and body", () => {
     },
     indentLevel: 1,
     showAuthPopup: noop as any,
+    setCommentID: noop as any,
     localReply: false,
     disableReplies: false,
   };
@@ -44,7 +45,7 @@ it("renders body only", () => {
   const props: PropTypesOf<typeof CommentContainerN> = {
     me: null,
     asset: {
-      id: "asset-id",
+      url: "http://localhost/asset",
     },
     comment: {
       id: "comment-id",
@@ -62,6 +63,7 @@ it("renders body only", () => {
     },
     indentLevel: 1,
     showAuthPopup: noop as any,
+    setCommentID: noop as any,
   };
 
   const wrapper = shallow(<CommentContainerN {...props} />);
@@ -72,7 +74,7 @@ it("hide reply button", () => {
   const props: PropTypesOf<typeof CommentContainerN> = {
     me: null,
     asset: {
-      id: "asset-id",
+      url: "http://localhost/asset",
     },
     comment: {
       id: "comment-id",
@@ -90,6 +92,7 @@ it("hide reply button", () => {
     },
     indentLevel: 1,
     showAuthPopup: noop as any,
+    setCommentID: noop as any,
     localReply: false,
     disableReplies: true,
   };
@@ -97,3 +100,35 @@ it("hide reply button", () => {
   const wrapper = shallow(<CommentContainerN {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
+
+it("shows conversation link", () => {
+  const props: PropTypesOf<typeof CommentContainerN> = {
+    me: null,
+    asset: {
+      url: "http://localhost/asset",
+    },
+    comment: {
+      id: "comment-id",
+      author: {
+        id: "author-id",
+        username: "Marvin",
+      },
+      body: "Woof",
+      createdAt: "1995-12-17T03:24:00.000Z",
+      editing: {
+        edited: false,
+        editableUntil: "1995-12-17T03:24:30.000Z",
+      },
+      pending: false,
+    },
+    indentLevel: 1,
+    showAuthPopup: noop as any,
+    setCommentID: noop as any,
+    localReply: false,
+    disableReplies: false,
+    showConversationLink: true,
+  };
+
+  const wrapper = shallow(<CommentContainerN {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

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<InnerProps, State> {
     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<InnerProps, State> {
       indentLevel,
       localReply,
       disableReplies,
+      showConversationLink,
     } = this.props;
     const { showReplyDialog, showEditDialog, editable } = this.state;
     if (showEditDialog) {
@@ -157,14 +173,28 @@ export class CommentContainer extends Component<InnerProps, State> {
           }
           footer={
             <>
-              {!disableReplies && (
-                <ReplyButton
-                  id={`comments-commentContainer-replyButton-${comment.id}`}
-                  onClick={this.openReplyDialog}
-                  active={showReplyDialog}
+              <ButtonsBar>
+                {!disableReplies && (
+                  <ReplyButton
+                    id={`comments-commentContainer-replyButton-${comment.id}`}
+                    onClick={this.openReplyDialog}
+                    active={showReplyDialog}
+                  />
+                )}
+                <PermalinkButtonContainer commentID={comment.id} />
+              </ButtonsBar>
+              {showConversationLink && (
+                <ShowConversationLink
+                  id={`comments-commentContainer-showConversation-${
+                    comment.id
+                  }`}
+                  onClick={this.handleShowConversation}
+                  href={getURLWithCommentID(
+                    this.props.asset.url,
+                    this.props.comment.id
+                  )}
                 />
               )}
-              <PermalinkButtonContainer commentID={comment.id} />
             </>
           }
         />
@@ -181,37 +211,40 @@ export class CommentContainer extends Component<InnerProps, State> {
   }
 }
 
-const enhanced = withShowAuthPopupMutation(
-  withFragmentContainer<InnerProps>({
-    me: graphql`
-      fragment CommentContainer_me on User {
-        id
-      }
-    `,
-    asset: graphql`
-      fragment CommentContainer_asset on Asset {
-        ...ReplyCommentFormContainer_asset
-      }
-    `,
-    comment: graphql`
-      fragment CommentContainer_comment on Comment {
-        id
-        author {
+const enhanced = withSetCommentIDMutation(
+  withShowAuthPopupMutation(
+    withFragmentContainer<InnerProps>({
+      me: graphql`
+        fragment CommentContainer_me on User {
           id
-          username
         }
-        body
-        createdAt
-        editing {
-          edited
-          editableUntil
+      `,
+      asset: graphql`
+        fragment CommentContainer_asset on Asset {
+          url
+          ...ReplyCommentFormContainer_asset
         }
-        pending
-        ...ReplyCommentFormContainer_comment
-        ...EditCommentFormContainer_comment
-      }
-    `,
-  })(CommentContainer)
+      `,
+      comment: graphql`
+        fragment CommentContainer_comment on Comment {
+          id
+          author {
+            id
+            username
+          }
+          body
+          createdAt
+          editing {
+            edited
+            editableUntil
+          }
+          pending
+          ...ReplyCommentFormContainer_comment
+          ...EditCommentFormContainer_comment
+        }
+      `,
+    })(CommentContainer)
+  )
 );
 
 export type CommentContainerProps = PropTypesOf<typeof enhanced>;

src/core/client/stream/tabs/comments/containers/PermalinkButtonContainer.tsx

@@ -1,7 +1,7 @@
 import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
+import { getURLWithCommentID } from "talk-framework/helpers";
 import { withLocalStateContainer } from "talk-framework/lib/relay";
-import { modifyQuery } from "talk-framework/utils";
 import { PermalinkButtonContainerLocal as Local } from "talk-stream/__generated__/PermalinkButtonContainerLocal.graphql";
 
 import PermalinkButton from "../components/PermalinkButton";
@@ -18,7 +18,7 @@ export const PermalinkContainer: StatelessComponent<InnerProps> = ({
   return local.assetURL ? (
     <PermalinkButton
       commentID={commentID}
-      url={modifyQuery(local.assetURL, { commentID })}
+      url={getURLWithCommentID(local.assetURL, commentID)}
     />
   ) : null;
 };

src/core/client/stream/tabs/comments/containers/PermalinkViewContainer.tsx

@@ -1,10 +1,10 @@
 import { Child as PymChild } from "pym.js";
-import qs from "query-string";
 import React, { MouseEvent } from "react";
 import { graphql } from "react-relay";
+
+import { getURLWithCommentID } from "talk-framework/helpers";
 import { withContext } from "talk-framework/lib/bootstrap";
 import { withFragmentContainer } from "talk-framework/lib/relay";
-import { buildURL, parseURL } from "talk-framework/utils";
 import { PermalinkViewContainer_asset as AssetData } from "talk-stream/__generated__/PermalinkViewContainer_asset.graphql";
 import { PermalinkViewContainer_comment as CommentData } from "talk-stream/__generated__/PermalinkViewContainer_comment.graphql";
 import { PermalinkViewContainer_me as MeData } from "talk-stream/__generated__/PermalinkViewContainer_me.graphql";
@@ -32,13 +32,8 @@ class PermalinkViewContainer extends React.Component<
   };
   private getShowAllCommentsHref() {
     const { pym } = this.props;
-    const urlParts = parseURL((pym && pym.parentUrl) || window.location.href);
-    const search = qs.stringify({
-      ...qs.parse(urlParts.search),
-      commentID: undefined,
-    });
-    // Remove the commentId url param.
-    return buildURL({ ...urlParts, search });
+    const url = (pym && pym.parentUrl) || window.location.href;
+    return getURLWithCommentID(url, undefined);
   }
 
   public componentDidMount() {

src/core/client/stream/tabs/comments/containers/ReplyListContainer.tsx

@@ -11,11 +11,15 @@ import {
   COMMENT_SORT,
   ReplyListContainer1PaginationQueryVariables,
 } from "talk-stream/__generated__/ReplyListContainer1PaginationQuery.graphql";
+import { ReplyListContainer5_comment as Comment5Data } from "talk-stream/__generated__/ReplyListContainer5_comment.graphql";
 
 import { StatelessComponent } from "enzyme";
 import ReplyList from "../components/ReplyList";
 import LocalReplyListContainer from "./LocalReplyListContainer";
 
+type UnpackArray<T> = T extends ReadonlyArray<infer U> ? U : any;
+type ReplyNode5 = UnpackArray<Comment5Data["replies"]["edges"]>["node"];
+
 export interface InnerProps {
   me: MeData | null;
   asset: AssetData;
@@ -44,7 +48,11 @@ export class ReplyListContainer extends React.Component<InnerProps> {
     ) {
       return null;
     }
-    const comments = this.props.comment.replies.edges.map(edge => edge.node);
+    const comments = this.props.comment.replies.edges.map(edge => ({
+      ...edge.node,
+      // ReplyListContainer5 contains replyCount.
+      showConversationLink: ((edge.node as any) as ReplyNode5).replyCount > 0,
+    }));
     return (
       <ReplyList
         me={this.props.me}
@@ -156,6 +164,7 @@ const ReplyListContainer5 = createReplyListContainer(
           edges {
             node {
               id
+              replyCount
               ...CommentContainer_comment
               ...LocalReplyListContainer_comment
             }

src/core/client/stream/tabs/comments/containers/__snapshots__/CommentContainer.spec.tsx.snap

@@ -14,9 +14,11 @@ exports[`hide reply button 1`] = `
     createdAt="1995-12-17T03:24:00.000Z"
     footer={
       <React.Fragment>
-        <withContext(withLocalStateContainer(PermalinkContainer))
-          commentID="comment-id"
-        />
+        <ButtonsBar>
+          <withContext(withLocalStateContainer(PermalinkContainer))
+            commentID="comment-id"
+          />
+        </ButtonsBar>
       </React.Fragment>
     }
     id="comment-comment-id"
@@ -40,14 +42,16 @@ exports[`renders body only 1`] = `
     createdAt="1995-12-17T03:24:00.000Z"
     footer={
       <React.Fragment>
-        <ReplyButton
-          active={false}
-          id="comments-commentContainer-replyButton-comment-id"
-          onClick={[Function]}
-        />
-        <withContext(withLocalStateContainer(PermalinkContainer))
-          commentID="comment-id"
-        />
+        <ButtonsBar>
+          <ReplyButton
+            active={false}
+            id="comments-commentContainer-replyButton-comment-id"
+            onClick={[Function]}
+          />
+          <withContext(withLocalStateContainer(PermalinkContainer))
+            commentID="comment-id"
+          />
+        </ButtonsBar>
       </React.Fragment>
     }
     id="comment-comment-id"
@@ -71,14 +75,54 @@ exports[`renders username and body 1`] = `
     createdAt="1995-12-17T03:24:00.000Z"
     footer={
       <React.Fragment>
-        <ReplyButton
-          active={false}
-          id="comments-commentContainer-replyButton-comment-id"
+        <ButtonsBar>
+          <ReplyButton
+            active={false}
+            id="comments-commentContainer-replyButton-comment-id"
+            onClick={[Function]}
+          />
+          <withContext(withLocalStateContainer(PermalinkContainer))
+            commentID="comment-id"
+          />
+        </ButtonsBar>
+      </React.Fragment>
+    }
+    id="comment-comment-id"
+    indentLevel={1}
+    showEditedMarker={false}
+  />
+</React.Fragment>
+`;
+
+exports[`shows conversation link 1`] = `
+<React.Fragment>
+  <IndentedComment
+    author={
+      Object {
+        "id": "author-id",
+        "username": "Marvin",
+      }
+    }
+    blur={false}
+    body="Woof"
+    createdAt="1995-12-17T03:24:00.000Z"
+    footer={
+      <React.Fragment>
+        <ButtonsBar>
+          <ReplyButton
+            active={false}
+            id="comments-commentContainer-replyButton-comment-id"
+            onClick={[Function]}
+          />
+          <withContext(withLocalStateContainer(PermalinkContainer))
+            commentID="comment-id"
+          />
+        </ButtonsBar>
+        <ShowConversationLink
+          href="http://localhost/asset?commentID=comment-id"
+          id="comments-commentContainer-showConversation-comment-id"
           onClick={[Function]}
         />
-        <withContext(withLocalStateContainer(PermalinkContainer))
-          commentID="comment-id"
-        />
       </React.Fragment>
     }
     id="comment-comment-id"

src/core/client/stream/tabs/comments/containers/__snapshots__/ReplyListContainer.spec.tsx.snap

@@ -31,9 +31,11 @@ exports[`renders correctly 1`] = `
     Array [
       Object {
         "id": "comment-1",
+        "showConversationLink": false,
       },
       Object {
         "id": "comment-2",
+        "showConversationLink": false,
       },
     ]
   }
@@ -77,9 +79,11 @@ exports[`when has more replies renders hasMore 1`] = `
     Array [
       Object {
         "id": "comment-1",
+        "showConversationLink": false,
       },
       Object {
         "id": "comment-2",
+        "showConversationLink": false,
       },
     ]
   }
@@ -122,9 +126,11 @@ exports[`when has more replies when showing all disables show all button 1`] = `
     Array [
       Object {
         "id": "comment-1",
+        "showConversationLink": false,
       },
       Object {
         "id": "comment-2",
+        "showConversationLink": false,
       },
     ]
   }
@@ -167,9 +173,11 @@ exports[`when has more replies when showing all enable show all button after loa
     Array [
       Object {
         "id": "comment-1",
+        "showConversationLink": false,
       },
       Object {
         "id": "comment-2",
+        "showConversationLink": false,
       },
     ]
   }

src/core/client/stream/test/comments/__snapshots__/editComment.spec.tsx.snap

@@ -239,32 +239,36 @@ exports[`cancel edit: edit canceled 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -309,32 +313,36 @@ exports[`cancel edit: edit canceled 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -733,32 +741,36 @@ exports[`edit a comment: edit form 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1157,32 +1169,36 @@ exports[`edit a comment: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1432,32 +1448,36 @@ exports[`edit a comment: render stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1502,32 +1522,36 @@ exports[`edit a comment: render stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1786,32 +1810,36 @@ exports[`edit a comment: server response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Edited! (from server)",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Edited! (from server)",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1856,32 +1884,36 @@ exports[`edit a comment: server response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -2131,32 +2163,36 @@ exports[`shows expiry message: edit form closed 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -2201,32 +2237,36 @@ exports[`shows expiry message: edit form closed 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -2602,32 +2642,36 @@ exports[`shows expiry message: edit time expired 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

src/core/client/stream/test/comments/__snapshots__/loadMore.spec.tsx.snap

@@ -184,32 +184,36 @@ exports[`loads more comments 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -254,32 +258,36 @@ exports[`loads more comments 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -324,32 +332,36 @@ exports[`loads more comments 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Hey!",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-2"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Hey!",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-2"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -544,32 +556,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -614,32 +630,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

src/core/client/stream/test/comments/__snapshots__/permalinkView.spec.tsx.snap

@@ -59,32 +59,36 @@ exports[`renders permalink view 1`] = `
             </div>
           </div>
           <div
-            className="HTMLContent-root"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Joining Too",
-              }
-            }
-          />
-          <div
-            className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+            className="HorizontalGutter-root HorizontalGutter-full"
           >
-            <button
-              className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-              id="comments-commentContainer-replyButton-comment-0"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseOut={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              type="button"
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
             >
-              <span>
-                Reply
-              </span>
-            </button>
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -277,32 +281,36 @@ exports[`show all comments 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

src/core/client/stream/test/comments/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap

@@ -216,32 +216,36 @@ exports[`show all comments 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

src/core/client/stream/test/comments/__snapshots__/postComment.spec.tsx.snap

@@ -233,32 +233,36 @@ exports[`post a comment: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<strong>Hello world!</strong>",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-uuid-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<strong>Hello world!</strong>",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-uuid-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -303,32 +307,36 @@ exports[`post a comment: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -373,32 +381,36 @@ exports[`post a comment: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -632,32 +644,36 @@ exports[`post a comment: server response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<strong>Hello world! (from server)</strong>",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-x"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<strong>Hello world! (from server)</strong>",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-x"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -702,32 +718,36 @@ exports[`post a comment: server response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -772,32 +792,36 @@ exports[`post a comment: server response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1031,32 +1055,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1101,32 +1129,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

src/core/client/stream/test/comments/__snapshots__/postReply.spec.tsx.snap

@@ -223,32 +223,36 @@ exports[`post a reply: open reply form 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -420,32 +424,36 @@ exports[`post a reply: open reply form 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -679,32 +687,36 @@ exports[`post a reply: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost Button-active"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -890,32 +902,36 @@ exports[`post a reply: optimistic response 1`] = `
                     </div>
                   </div>
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<strong>Hello world!</strong>",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-uuid-0"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "<strong>Hello world!</strong>",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-uuid-0"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -962,32 +978,36 @@ exports[`post a reply: optimistic response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1221,32 +1241,36 @@ exports[`post a reply: server response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1295,32 +1319,36 @@ exports[`post a reply: server response 1`] = `
                     </div>
                   </div>
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<strong>Hello world! (from server)</strong>",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-x"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "<strong>Hello world! (from server)</strong>",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-x"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1367,32 +1395,36 @@ exports[`post a reply: server response 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1626,32 +1658,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -1696,32 +1732,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

src/core/client/stream/test/comments/__snapshots__/renderReplies.spec.tsx.snap

@@ -184,32 +184,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -254,32 +258,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "I like yoghurt",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-with-deep-replies"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "I like yoghurt",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-with-deep-replies"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -328,32 +336,36 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "I like yoghurt",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-with-replies"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "I like yoghurt",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-with-replies"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -402,32 +414,36 @@ exports[`renders comment stream 1`] = `
                         </div>
                       </div>
                       <div
-                        className="HTMLContent-root"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "Comment Body 3",
-                          }
-                        }
-                      />
-                      <div
-                        className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="HorizontalGutter-root HorizontalGutter-full"
                       >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          id="comments-commentContainer-replyButton-comment-3"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "Comment Body 3",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                         >
-                          <span>
-                            Reply
-                          </span>
-                        </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-3"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -472,32 +488,36 @@ exports[`renders comment stream 1`] = `
                         </div>
                       </div>
                       <div
-                        className="HTMLContent-root"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "Comment Body 4",
-                          }
-                        }
-                      />
-                      <div
-                        className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        className="HorizontalGutter-root HorizontalGutter-full"
                       >
-                        <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                          id="comments-commentContainer-replyButton-comment-4"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseOut={[Function]}
-                          onMouseOver={[Function]}
-                          onTouchEnd={[Function]}
-                          type="button"
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "Comment Body 4",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                         >
-                          <span>
-                            Reply
-                          </span>
-                        </button>
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-4"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -544,32 +564,36 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Comment Body 5",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-5"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Comment Body 5",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-5"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>

src/core/client/stream/test/comments/__snapshots__/renderStream.spec.tsx.snap

@@ -184,32 +184,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -254,32 +258,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "What's up?",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-1"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "What's up?",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-1"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>

src/core/client/stream/test/comments/__snapshots__/showAllReplies.spec.tsx.snap

@@ -184,32 +184,36 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -258,32 +262,36 @@ exports[`renders comment stream 1`] = `
                     </div>
                   </div>
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "What's up?",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-1"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "What's up?",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-1"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -504,32 +512,36 @@ exports[`show all replies 1`] = `
                 </div>
               </div>
               <div
-                className="HTMLContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "Joining Too",
-                  }
-                }
-              />
-              <div
-                className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                className="HorizontalGutter-root HorizontalGutter-full"
               >
-                <button
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                  id="comments-commentContainer-replyButton-comment-0"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "Joining Too",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                 >
-                  <span>
-                    Reply
-                  </span>
-                </button>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-0"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -578,32 +590,36 @@ exports[`show all replies 1`] = `
                     </div>
                   </div>
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "What's up?",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-1"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "What's up?",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-1"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -648,32 +664,36 @@ exports[`show all replies 1`] = `
                     </div>
                   </div>
                   <div
-                    className="HTMLContent-root"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "Hey!",
-                      }
-                    }
-                  />
-                  <div
-                    className="Flex-root Comment-footer Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    className="HorizontalGutter-root HorizontalGutter-full"
                   >
-                    <button
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
-                      id="comments-commentContainer-replyButton-comment-2"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                      onTouchEnd={[Function]}
-                      type="button"
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "Hey!",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
                     >
-                      <span>
-                        Reply
-                      </span>
-                    </button>
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-2"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>

src/core/client/stream/test/comments/__snapshots__/showConversation.spec.tsx.snap

@@ -0,0 +1,738 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders comment stream 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="HorizontalGutter-root Stream-root HorizontalGutter-double"
+  >
+    <div
+      className="HorizontalGutter-root HorizontalGutter-half"
+    >
+      <div
+        className="Flex-root Flex-flex Flex-itemGutter Flex-alignCenter"
+      >
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Sign in
+        </button>
+        <button
+          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined"
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="button"
+        >
+          Register
+        </button>
+      </div>
+      <div
+        className="HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
+      >
+        <div
+          aria-hidden="true"
+        >
+          <div>
+            <div
+              className=""
+            >
+              <div
+                className=" RTE-toolbarDisabled Toolbar-toolbar"
+              >
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Bold"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_bold
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Italic"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_italic
+                  </span>
+                </button>
+                <button
+                  className="Button-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  title="Blockquote"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    format_quote
+                  </span>
+                </button>
+              </div>
+              <div
+                aria-hidden="true"
+                className="RTE-placeholder RTE-placeholder "
+              >
+                Post a comment
+              </div>
+              <div
+                aria-placeholder="Post a comment"
+                className="RTE-contentEditable RTE-content  RTE-contentEditableDisabled"
+                contentEditable={false}
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "",
+                  }
+                }
+                disabled={true}
+                onBlur={[Function]}
+                onChange={[Function]}
+                onCut={[Function]}
+                onFocus={[Function]}
+                onInput={[Function]}
+                onKeyDown={[Function]}
+                onPaste={[Function]}
+                onSelect={[Function]}
+              />
+            </div>
+          </div>
+        </div>
+        <button
+          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth Button-disabled"
+          disabled={true}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          type="submit"
+        >
+          Sign in and Join the Conversation
+        </button>
+      </div>
+    </div>
+    <div
+      aria-live="polite"
+      className="HorizontalGutter-root HorizontalGutter-full"
+      id="talk-comments-stream-log"
+      role="log"
+    >
+      <div
+        className="HorizontalGutter-root HorizontalGutter-full"
+      >
+        <div
+          className="Indent-root"
+        >
+          <div
+            className=""
+          >
+            <div
+              className="Comment-root"
+              role="article"
+            >
+              <div
+                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-with-deepest-replies"
+              >
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                >
+                  <span
+                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                  >
+                    Markus
+                  </span>
+                  <div
+                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                  >
+                    <time
+                      className="Timestamp-root RelativeTime-root"
+                      dateTime="2018-07-06T18:24:00.000Z"
+                      title="2018-07-06T18:24:00.000Z"
+                    >
+                      2018-07-06T18:24:00.000Z
+                    </time>
+                  </div>
+                </div>
+              </div>
+              <div
+                className="HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="HTMLContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "body 0",
+                    }
+                  }
+                />
+                <div
+                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                >
+                  <button
+                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                    id="comments-commentContainer-replyButton-comment-with-deepest-replies"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Reply
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="HorizontalGutter-root HorizontalGutter-full"
+          id="talk-comments-replyList-log--comment-with-deepest-replies"
+          role="log"
+        >
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div
+              className="Indent-root"
+            >
+              <div
+                className="Indent-level1"
+              >
+                <div
+                  className="Comment-root"
+                  role="article"
+                >
+                  <div
+                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-with-deepest-replies-1"
+                  >
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                    >
+                      <span
+                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                      >
+                        Markus
+                      </span>
+                      <div
+                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                      >
+                        <time
+                          className="Timestamp-root RelativeTime-root"
+                          dateTime="2018-07-06T18:24:00.000Z"
+                          title="2018-07-06T18:24:00.000Z"
+                        >
+                          2018-07-06T18:24:00.000Z
+                        </time>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <div
+                      className="HTMLContent-root"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "body 1",
+                        }
+                      }
+                    />
+                    <div
+                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                    >
+                      <button
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                        id="comments-commentContainer-replyButton-comment-with-deepest-replies-1"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                        onTouchEnd={[Function]}
+                        type="button"
+                      >
+                        <span>
+                          Reply
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="HorizontalGutter-root HorizontalGutter-full"
+              id="talk-comments-replyList-log--comment-with-deepest-replies-1"
+              role="log"
+            >
+              <div
+                className="HorizontalGutter-root HorizontalGutter-full"
+              >
+                <div
+                  className="Indent-root"
+                >
+                  <div
+                    className="Indent-level2"
+                  >
+                    <div
+                      className="Comment-root"
+                      role="article"
+                    >
+                      <div
+                        className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-with-deepest-replies-2"
+                      >
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                        >
+                          <span
+                            className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                          >
+                            Markus
+                          </span>
+                          <div
+                            className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                          >
+                            <time
+                              className="Timestamp-root RelativeTime-root"
+                              dateTime="2018-07-06T18:24:00.000Z"
+                              title="2018-07-06T18:24:00.000Z"
+                            >
+                              2018-07-06T18:24:00.000Z
+                            </time>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="HorizontalGutter-root HorizontalGutter-full"
+                      >
+                        <div
+                          className="HTMLContent-root"
+                          dangerouslySetInnerHTML={
+                            Object {
+                              "__html": "body 2",
+                            }
+                          }
+                        />
+                        <div
+                          className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                        >
+                          <button
+                            className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                            id="comments-commentContainer-replyButton-comment-with-deepest-replies-2"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseDown={[Function]}
+                            onMouseOut={[Function]}
+                            onMouseOver={[Function]}
+                            onTouchEnd={[Function]}
+                            type="button"
+                          >
+                            <span>
+                              Reply
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="HorizontalGutter-root HorizontalGutter-full"
+                  id="talk-comments-replyList-log--comment-with-deepest-replies-2"
+                  role="log"
+                >
+                  <div
+                    className="HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <div
+                      className="Indent-root"
+                    >
+                      <div
+                        className="Indent-level3"
+                      >
+                        <div
+                          className="Comment-root"
+                          role="article"
+                        >
+                          <div
+                            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                            id="comment-comment-with-deepest-replies-3"
+                          >
+                            <div
+                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                            >
+                              <span
+                                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                              >
+                                Markus
+                              </span>
+                              <div
+                                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                              >
+                                <time
+                                  className="Timestamp-root RelativeTime-root"
+                                  dateTime="2018-07-06T18:24:00.000Z"
+                                  title="2018-07-06T18:24:00.000Z"
+                                >
+                                  2018-07-06T18:24:00.000Z
+                                </time>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            className="HorizontalGutter-root HorizontalGutter-full"
+                          >
+                            <div
+                              className="HTMLContent-root"
+                              dangerouslySetInnerHTML={
+                                Object {
+                                  "__html": "body 3",
+                                }
+                              }
+                            />
+                            <div
+                              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                            >
+                              <button
+                                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onMouseDown={[Function]}
+                                onMouseOut={[Function]}
+                                onMouseOver={[Function]}
+                                onTouchEnd={[Function]}
+                                type="button"
+                              >
+                                <span>
+                                  Reply
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      className="HorizontalGutter-root HorizontalGutter-full"
+                      id="talk-comments-replyList-log--comment-with-deepest-replies-3"
+                      role="log"
+                    >
+                      <div
+                        className="HorizontalGutter-root HorizontalGutter-full"
+                      >
+                        <div
+                          className="Indent-root"
+                        >
+                          <div
+                            className="Indent-level4"
+                          >
+                            <div
+                              className="Comment-root"
+                              role="article"
+                            >
+                              <div
+                                className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                id="comment-comment-with-deepest-replies-4"
+                              >
+                                <div
+                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                                >
+                                  <span
+                                    className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                  >
+                                    Markus
+                                  </span>
+                                  <div
+                                    className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                                  >
+                                    <time
+                                      className="Timestamp-root RelativeTime-root"
+                                      dateTime="2018-07-06T18:24:00.000Z"
+                                      title="2018-07-06T18:24:00.000Z"
+                                    >
+                                      2018-07-06T18:24:00.000Z
+                                    </time>
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                className="HorizontalGutter-root HorizontalGutter-full"
+                              >
+                                <div
+                                  className="HTMLContent-root"
+                                  dangerouslySetInnerHTML={
+                                    Object {
+                                      "__html": "body 4",
+                                    }
+                                  }
+                                />
+                                <div
+                                  className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                >
+                                  <button
+                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                    id="comments-commentContainer-replyButton-comment-with-deepest-replies-4"
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onMouseDown={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                    onTouchEnd={[Function]}
+                                    type="button"
+                                  >
+                                    <span>
+                                      Reply
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          className="HorizontalGutter-root HorizontalGutter-full"
+                          id="talk-comments-replyList-log--comment-with-deepest-replies-4"
+                          role="log"
+                        >
+                          <div
+                            className="HorizontalGutter-root HorizontalGutter-full"
+                          >
+                            <div
+                              className="Indent-root"
+                            >
+                              <div
+                                className="Indent-level5"
+                              >
+                                <div
+                                  className="Comment-root"
+                                  role="article"
+                                >
+                                  <div
+                                    className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                                    id="comment-comment-with-deepest-replies-5"
+                                  >
+                                    <div
+                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+                                    >
+                                      <span
+                                        className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+                                      >
+                                        Markus
+                                      </span>
+                                      <div
+                                        className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+                                      >
+                                        <time
+                                          className="Timestamp-root RelativeTime-root"
+                                          dateTime="2018-07-06T18:24:00.000Z"
+                                          title="2018-07-06T18:24:00.000Z"
+                                        >
+                                          2018-07-06T18:24:00.000Z
+                                        </time>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    className="HorizontalGutter-root HorizontalGutter-full"
+                                  >
+                                    <div
+                                      className="HTMLContent-root"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "body 5",
+                                        }
+                                      }
+                                    />
+                                    <div
+                                      className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+                                    >
+                                      <button
+                                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                                        id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onMouseDown={[Function]}
+                                        onMouseOut={[Function]}
+                                        onMouseOver={[Function]}
+                                        onTouchEnd={[Function]}
+                                        type="button"
+                                      >
+                                        <span>
+                                          Reply
+                                        </span>
+                                      </button>
+                                    </div>
+                                    <a
+                                      className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined"
+                                      href="http://localhost/assets/asset-with-replies?commentID=comment-with-deepest-replies-5"
+                                      id="comments-commentContainer-showConversation-comment-with-deepest-replies-5"
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      onMouseDown={[Function]}
+                                      onMouseOut={[Function]}
+                                      onMouseOver={[Function]}
+                                      onTouchEnd={[Function]}
+                                      target="_parent"
+                                      type="button"
+                                    >
+                                      Read More of this Conversation &gt;
+                                    </a>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`shows conversation 1`] = `
+<div
+  className="Flex-root App-root Flex-flex Flex-justifyCenter"
+>
+  <div
+    className="PermalinkView-root"
+  >
+    <a
+      className="BaseButton-root Button-root PermalinkView-button Button-sizeRegular Button-colorPrimary Button-variantOutlined Button-fullWidth"
+      href="http://localhost/"
+      id="talk-comments-permalinkView-showAllComments"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      target="_parent"
+      type="button"
+    >
+      Show All Comments
+    </a>
+    <div
+      className="Indent-root"
+    >
+      <div
+        className=""
+      >
+        <div
+          className="Comment-root"
+          role="article"
+        >
+          <div
+            className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            id="comment-comment-with-deepest-replies-5"
+          >
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+            >
+              <span
+                className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
+              >
+                Markus
+              </span>
+              <div
+                className="Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+              >
+                <time
+                  className="Timestamp-root RelativeTime-root"
+                  dateTime="2018-07-06T18:24:00.000Z"
+                  title="2018-07-06T18:24:00.000Z"
+                >
+                  2018-07-06T18:24:00.000Z
+                </time>
+              </div>
+            </div>
+          </div>
+          <div
+            className="HorizontalGutter-root HorizontalGutter-full"
+          >
+            <div
+              className="HTMLContent-root"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "Joining Too",
+                }
+              }
+            />
+            <div
+              className="Flex-root Flex-flex Flex-halfItemGutter Flex-directionRow"
+            >
+              <button
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantGhost"
+                id="comments-commentContainer-replyButton-comment-with-deepest-replies-5"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onMouseDown={[Function]}
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                onTouchEnd={[Function]}
+                type="button"
+              >
+                <span>
+                  Reply
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/core/client/stream/test/comments/showConversation.spec.tsx

@@ -0,0 +1,66 @@
+import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
+
+import { timeout } from "talk-common/utils";
+import { createSinonStub } from "talk-framework/testHelpers";
+
+import { assetWithDeepestReplies, comments } from "../fixtures";
+import create from "./create";
+
+let testRenderer: ReactTestRenderer;
+beforeEach(() => {
+  const resolvers = {
+    Query: {
+      asset: createSinonStub(
+        s => s.throws(),
+        s => s.returns(assetWithDeepestReplies)
+      ),
+      comment: createSinonStub(
+        s => s.throws(),
+        s =>
+          s
+            .withArgs(undefined, { id: "comment-with-deepest-replies-5" })
+            .returns({
+              ...comments[0],
+              id: "comment-with-deepest-replies-5",
+            })
+      ),
+    },
+  };
+
+  ({ testRenderer } = create({
+    // Set this to true, to see graphql responses.
+    logNetwork: false,
+    resolvers,
+    initLocalState: localRecord => {
+      localRecord.setValue(assetWithDeepestReplies.id, "assetID");
+    },
+  }));
+});
+
+it("renders comment stream", async () => {
+  // Wait for loading.
+  await timeout();
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("shows conversation", async () => {
+  const mockEvent = {
+    preventDefault: sinon.mock().once(),
+  };
+
+  // Wait for loading.
+  await timeout();
+
+  testRenderer.root
+    .findByProps({
+      id:
+        "comments-commentContainer-showConversation-comment-with-deepest-replies-5",
+    })
+    .props.onClick(mockEvent);
+
+  // Wait for loading.
+  await timeout();
+
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});

src/core/client/stream/test/fixtures.ts

@@ -20,6 +20,7 @@ export const comments = [
     body: "Joining Too",
     createdAt: "2018-07-06T18:24:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
     editing: {
       edited: false,
       editableUntil: "2018-07-06T18:24:30.000Z",
@@ -31,6 +32,7 @@ export const comments = [
     body: "What's up?",
     createdAt: "2018-07-06T18:20:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
     editing: {
       edited: false,
       editableUntil: "2018-07-06T18:20:30.000Z",
@@ -42,6 +44,7 @@ export const comments = [
     body: "Hey!",
     createdAt: "2018-07-06T18:14:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
     editing: {
       edited: false,
       editableUntil: "2018-07-06T18:14:30.000Z",
@@ -53,6 +56,7 @@ export const comments = [
     body: "Comment Body 3",
     createdAt: "2018-07-06T18:14:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
     editing: {
       edited: false,
       editableUntil: "2018-07-06T18:14:30.000Z",
@@ -64,6 +68,7 @@ export const comments = [
     body: "Comment Body 4",
     createdAt: "2018-07-06T18:14:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
     editing: {
       edited: false,
       editableUntil: "2018-07-06T18:14:30.000Z",
@@ -75,6 +80,7 @@ export const comments = [
     body: "Comment Body 5",
     createdAt: "2018-07-06T18:14:00.000Z",
     replies: { edges: [], pageInfo: { endCursor: null, hasNextPage: false } },
+    replyCount: 0,
     editing: {
       edited: false,
       editableUntil: "2018-07-06T18:14:30.000Z",
@@ -113,6 +119,7 @@ export const commentWithReplies = {
       hasNextPage: false,
     },
   },
+  replyCount: 2,
   editing: {
     edited: false,
     editableUntil: "2018-07-06T18:24:30.000Z",
@@ -133,6 +140,7 @@ export const commentWithDeepReplies = {
       hasNextPage: false,
     },
   },
+  replyCount: 2,
   editing: {
     edited: false,
     editableUntil: "2018-07-06T18:24:30.000Z",
@@ -176,6 +184,7 @@ export const commentWithDeepestReplies = {
   ...commentWithReplies,
   id: "comment-with-deepest-replies",
   body: "body 0",
+  replyCount: 1,
   replies: {
     ...commentWithReplies.replies,
     edges: [
@@ -185,6 +194,7 @@ export const commentWithDeepestReplies = {
           ...commentWithReplies,
           id: "comment-with-deepest-replies-1",
           body: "body 1",
+          replyCount: 1,
           replies: {
             ...commentWithReplies.replies,
             edges: [
@@ -194,6 +204,7 @@ export const commentWithDeepestReplies = {
                   ...commentWithReplies,
                   id: "comment-with-deepest-replies-2",
                   body: "body 2",
+                  replyCount: 1,
                   replies: {
                     ...commentWithReplies.replies,
                     edges: [
@@ -203,6 +214,7 @@ export const commentWithDeepestReplies = {
                           ...commentWithReplies,
                           id: "comment-with-deepest-replies-3",
                           body: "body 3",
+                          replyCount: 1,
                           replies: {
                             ...commentWithReplies.replies,
                             edges: [
@@ -212,6 +224,7 @@ export const commentWithDeepestReplies = {
                                   ...commentWithReplies,
                                   id: "comment-with-deepest-replies-4",
                                   body: "body 4",
+                                  replyCount: 1,
                                   replies: {
                                     ...commentWithReplies.replies,
                                     edges: [
@@ -221,6 +234,7 @@ export const commentWithDeepestReplies = {
                                           ...commentWithReplies,
                                           id: "comment-with-deepest-replies-5",
                                           body: "body 5",
+                                          replyCount: 1,
                                           replies: {
                                             ...commentWithReplies.replies,
                                             edges: [
@@ -232,6 +246,7 @@ export const commentWithDeepestReplies = {
                                                   id:
                                                     "comment-with-deepest-replies-6",
                                                   body: "body 6",
+                                                  replyCount: 1,
                                                   replies: {
                                                     ...commentWithReplies.replies,
                                                     edges: [],

src/locales/en-US/stream.ftl

@@ -68,3 +68,5 @@ comments-editCommentForm-rte =
 comments-editCommentForm-editRemainingTime = Edit: <time></time> remaining
 comments-editCommentForm-editTimeExpired = Edit time has expired. You can no longer edit this comment. Why not post another one?
 comments-editedMarker-edited = Edited
+
+comments-showConversationLink-readMore = Read More of this Conversation >