[next] Embed plus (#1877)

* Implement StreamEmbed instance and rename library to coral

* Add article & articleButton.html, only show embed htmls in production

* Respect assetURL

* Add tests

* Add parseHashQuery

* Fix permalink query and integration tests

* Fix permalink URL

* Remove optionalparams from pym

* Scroll when showing permalink view

* Implement autoRender

* AutoRender immediately when render permalink

* Add test for `showPermalink` event

* Add comment

src/core/client/stream/local/initLocalState.ts

@@ -42,12 +42,8 @@ export default async function initLocalState(
       localRecord.setValue(query.assetID, "assetID");
     }
 
-    // Saving location host for permalink until we get the asset url - the url now points to the tenant
-    if (location && query.assetID) {
-      localRecord.setValue(
-        `${location.origin}/?assetID=${query.assetID}`,
-        "assetURL"
-      );
+    if (query.assetURL) {
+      localRecord.setValue(query.assetURL, "assetURL");
     }
 
     if (query.commentID) {

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

@@ -7,6 +7,7 @@ import Comment from "./Comment";
 
 it("renders username and body", () => {
   const props: PropTypesOf<typeof Comment> = {
+    id: "comment-id",
     author: {
       username: "Marvin",
     },

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

@@ -10,6 +10,7 @@ import TopBarLeft from "./TopBarLeft";
 import Username from "./Username";
 
 export interface CommentProps {
+  id?: string;
   className?: string;
   author: {
     username: string | null;
@@ -28,6 +29,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
         className={styles.topBar}
         direction="row"
         justifyContent="space-between"
+        id={props.id}
       >
         <TopBarLeft>
           {props.author &&

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

@@ -8,6 +8,7 @@ exports[`renders username and body 1`] = `
   <withPropsOnChange(Flex)
     className="Comment-topBar"
     direction="row"
+    id="comment-id"
     justifyContent="space-between"
   >
     <TopBarLeft>

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

@@ -15,7 +15,7 @@ import PermalinkPopover from "./PermalinkPopover";
 
 interface PermalinkProps {
   commentID: string;
-  assetURL: string | null;
+  url: string;
 }
 
 class Permalink extends React.Component<PermalinkProps> {
@@ -28,7 +28,7 @@ class Permalink extends React.Component<PermalinkProps> {
   );
 
   public render() {
-    const { commentID, assetURL } = this.props;
+    const { commentID, url } = this.props;
     const popoverID = `permalink-popover-${commentID}`;
     return (
       <Popover
@@ -43,7 +43,7 @@ class Permalink extends React.Component<PermalinkProps> {
             }
           >
             <PermalinkPopover
-              permalinkURL={`${assetURL}&commentID=${commentID}`}
+              permalinkURL={url}
               toggleVisibility={toggleVisibility}
             />
           </ClickOutside>

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

@@ -120,6 +120,7 @@ export class CommentContainer extends Component<InnerProps, State> {
     return (
       <>
         <Comment
+          id={`comment-${comment.id}`}
           indentLevel={indentLevel}
           author={comment.author}
           body={comment.body}

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

@@ -1,6 +1,7 @@
 import React, { StatelessComponent } from "react";
 import { graphql } from "react-relay";
 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";
@@ -15,7 +16,10 @@ export const PermalinkContainer: StatelessComponent<InnerProps> = ({
   commentID,
 }) => {
   return local.assetURL ? (
-    <PermalinkButton assetURL={local.assetURL} commentID={commentID} />
+    <PermalinkButton
+      commentID={commentID}
+      url={modifyQuery(local.assetURL, { commentID })}
+    />
   ) : null;
 };
 

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

@@ -40,6 +40,18 @@ class PermalinkViewContainer extends React.Component<
     // Remove the commentId url param.
     return buildURL({ ...urlParts, search });
   }
+
+  public componentDidMount() {
+    if (this.props.pym) {
+      const scrollTo = this.props.comment
+        ? document
+            .getElementById(`comment-${this.props.comment.id}`)!
+            .getBoundingClientRect().top + window.pageYOffset
+        : 50;
+      setTimeout(() => this.props.pym!.scrollParentToChildPos(scrollTo), 100);
+    }
+  }
+
   public render() {
     const { comment, asset, me } = this.props;
     return (
@@ -66,6 +78,7 @@ const enhanced = withContext(ctx => ({
       `,
       comment: graphql`
         fragment PermalinkViewContainer_comment on Comment {
+          id
           ...CommentContainer_comment
         }
       `,

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

@@ -135,7 +135,7 @@ const enhanced = withPaginationContainer<
         $count: Int!
         $cursor: Cursor
         $orderBy: COMMENT_SORT!
-        $assetID: ID!
+        $assetID: ID
       ) {
         asset(id: $assetID) {
           ...StreamContainer_asset

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

@@ -24,6 +24,7 @@ exports[`renders body only 1`] = `
         />
       </React.Fragment>
     }
+    id="comment-comment-id"
     indentLevel={1}
     showEditedMarker={false}
   />
@@ -54,6 +55,7 @@ exports[`renders username and body 1`] = `
         />
       </React.Fragment>
     }
+    id="comment-comment-id"
     indentLevel={1}
     showEditedMarker={false}
   />

src/core/client/stream/tabs/comments/queries/PermalinkViewQuery.tsx

@@ -45,15 +45,19 @@ export const render = ({
 };
 
 const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
-  local: { commentID, assetID },
+  local: { commentID, assetID, assetURL },
 }) => (
   <QueryRenderer<QueryTypes>
     query={graphql`
-      query PermalinkViewQuery($commentID: ID!, $assetID: ID!) {
+      query PermalinkViewQuery(
+        $commentID: ID!
+        $assetID: ID
+        $assetURL: String
+      ) {
         me {
           ...PermalinkViewContainer_me
         }
-        asset(id: $assetID) {
+        asset(id: $assetID, url: $assetURL) {
           ...PermalinkViewContainer_asset
         }
         comment(id: $commentID) {
@@ -62,8 +66,9 @@ const PermalinkViewQuery: StatelessComponent<InnerProps> = ({
       }
     `}
     variables={{
-      assetID: assetID!,
       commentID: commentID!,
+      assetID,
+      assetURL,
     }}
     render={render}
   />
@@ -74,6 +79,7 @@ const enhanced = withLocalStateContainer(
     fragment PermalinkViewQueryLocal on Local {
       assetID
       commentID
+      assetURL
     }
   `
 )(PermalinkViewQuery);

src/core/client/stream/tabs/comments/queries/StreamQuery.tsx

@@ -38,21 +38,22 @@ export const render = ({
 };
 
 const StreamQuery: StatelessComponent<InnerProps> = ({
-  local: { assetID },
+  local: { assetID, assetURL },
 }) => (
   <QueryRenderer<QueryTypes>
     query={graphql`
-      query StreamQuery($assetID: ID!) {
+      query StreamQuery($assetID: ID, $assetURL: String) {
         me {
           ...StreamContainer_me
         }
-        asset(id: $assetID) {
+        asset(id: $assetID, url: $assetURL) {
           ...StreamContainer_asset
         }
       }
     `}
     variables={{
-      assetID: assetID!,
+      assetID,
+      assetURL,
     }}
     render={render}
   />
@@ -62,6 +63,7 @@ const enhanced = withLocalStateContainer(
   graphql`
     fragment StreamQueryLocal on Local {
       assetID
+      assetURL
     }
   `
 )(StreamQuery);

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

@@ -199,6 +199,7 @@ exports[`cancel edit: edit canceled 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -284,6 +285,7 @@ exports[`cancel edit: edit canceled 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -707,6 +709,7 @@ exports[`edit a comment: edit form 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1130,6 +1133,7 @@ exports[`edit a comment: optimistic response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1388,6 +1392,7 @@ exports[`edit a comment: render stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1473,6 +1478,7 @@ exports[`edit a comment: render stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1731,6 +1737,7 @@ exports[`edit a comment: server response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1825,6 +1832,7 @@ exports[`edit a comment: server response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -2083,6 +2091,7 @@ exports[`shows expiry message: edit form closed 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -2168,6 +2177,7 @@ exports[`shows expiry message: edit form closed 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -2568,6 +2578,7 @@ exports[`shows expiry message: edit time expired 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"

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

@@ -160,6 +160,7 @@ exports[`loads more comments 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -229,6 +230,7 @@ exports[`loads more comments 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -298,6 +300,7 @@ exports[`loads more comments 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-2"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -517,6 +520,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -586,6 +590,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"

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

@@ -35,6 +35,7 @@ exports[`renders permalink view 1`] = `
         >
           <div
             className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+            id="comment-comment-0"
           >
             <div
               className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -252,6 +253,7 @@ exports[`show all comments 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"

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

@@ -192,6 +192,7 @@ exports[`show all comments 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"

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

@@ -193,6 +193,7 @@ exports[`post a comment: optimistic response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-uuid-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -278,6 +279,7 @@ exports[`post a comment: optimistic response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -347,6 +349,7 @@ exports[`post a comment: optimistic response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -605,6 +608,7 @@ exports[`post a comment: server response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-x"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -674,6 +678,7 @@ exports[`post a comment: server response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -743,6 +748,7 @@ exports[`post a comment: server response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1001,6 +1007,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1070,6 +1077,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"

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

@@ -199,6 +199,7 @@ exports[`post a reply: open reply form 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -395,6 +396,7 @@ exports[`post a reply: open reply form 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -653,6 +655,7 @@ exports[`post a reply: optimistic response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -847,6 +850,7 @@ exports[`post a reply: optimistic response 1`] = `
                 >
                   <div
                     className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-uuid-0"
                   >
                     <div
                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -934,6 +938,7 @@ exports[`post a reply: optimistic response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1192,6 +1197,7 @@ exports[`post a reply: server response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1265,6 +1271,7 @@ exports[`post a reply: server response 1`] = `
                 >
                   <div
                     className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-x"
                   >
                     <div
                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1336,6 +1343,7 @@ exports[`post a reply: server response 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1594,6 +1602,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -1663,6 +1672,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"

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

@@ -160,6 +160,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -229,6 +230,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-with-deep-replies"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -302,6 +304,7 @@ exports[`renders comment stream 1`] = `
                 >
                   <div
                     className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-with-replies"
                   >
                     <div
                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -375,6 +378,7 @@ exports[`renders comment stream 1`] = `
                     >
                       <div
                         className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-3"
                       >
                         <div
                           className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -444,6 +448,7 @@ exports[`renders comment stream 1`] = `
                     >
                       <div
                         className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                        id="comment-comment-4"
                       >
                         <div
                           className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -515,6 +520,7 @@ exports[`renders comment stream 1`] = `
                 >
                   <div
                     className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-5"
                   >
                     <div
                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"

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

@@ -160,6 +160,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -229,6 +230,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-1"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"

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

@@ -160,6 +160,7 @@ exports[`renders comment stream 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -233,6 +234,7 @@ exports[`renders comment stream 1`] = `
                 >
                   <div
                     className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-1"
                   >
                     <div
                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -478,6 +480,7 @@ exports[`show all replies 1`] = `
             >
               <div
                 className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                id="comment-comment-0"
               >
                 <div
                   className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -551,6 +554,7 @@ exports[`show all replies 1`] = `
                 >
                   <div
                     className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-1"
                   >
                     <div
                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
@@ -620,6 +624,7 @@ exports[`show all replies 1`] = `
                 >
                   <div
                     className="Flex-root Comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
+                    id="comment-comment-2"
                   >
                     <div
                       className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"

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

@@ -11,7 +11,10 @@ function createTestRenderer() {
     Query: {
       asset: createSinonStub(
         s => s.throws(),
-        s => s.withArgs(undefined, { id: assets[0].id }).returns(assets[0])
+        s =>
+          s
+            .withArgs(undefined, { id: assets[0].id, url: null })
+            .returns(assets[0])
       ),
       me: createSinonStub(
         s => s.throws(),

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

@@ -1,4 +1,5 @@
 import { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
 
 import { timeout } from "talk-common/utils";
 import { createSinonStub } from "talk-framework/testHelpers";
@@ -55,7 +56,15 @@ beforeEach(() => {
     Query: {
       asset: createSinonStub(
         s => s.throws(),
-        s => s.withArgs(undefined, { id: assetStub.id }).returns(assetStub)
+        s =>
+          s
+            .withArgs(
+              undefined,
+              sinon
+                .match({ id: assetStub.id, url: null })
+                .or(sinon.match({ id: assetStub.id }))
+            )
+            .returns(assetStub)
       ),
     },
   };

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

@@ -36,7 +36,10 @@ beforeEach(() => {
       ),
       asset: createSinonStub(
         s => s.throws(),
-        s => s.withArgs(undefined, { id: assetStub.id }).returns(assetStub)
+        s =>
+          s
+            .withArgs(undefined, { id: assetStub.id, url: null })
+            .returns(assetStub)
       ),
     },
   };

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

@@ -33,7 +33,10 @@ beforeEach(() => {
       comment: () => null,
       asset: createSinonStub(
         s => s.throws(),
-        s => s.withArgs(undefined, { id: assetStub.id }).returns(assetStub)
+        s =>
+          s
+            .withArgs(undefined, { id: assetStub.id, url: null })
+            .returns(assetStub)
       ),
     },
   };

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

@@ -14,7 +14,7 @@ beforeEach(() => {
         s => s.throws(),
         s =>
           s
-            .withArgs(undefined, { id: assetWithDeepReplies.id })
+            .withArgs(undefined, { id: assetWithDeepReplies.id, url: null })
             .returns(assetWithDeepReplies)
       ),
     },

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

@@ -12,7 +12,10 @@ beforeEach(() => {
     Query: {
       asset: createSinonStub(
         s => s.throws(),
-        s => s.withArgs(undefined, { id: assets[0].id }).returns(assets[0])
+        s =>
+          s
+            .withArgs(undefined, { id: assets[0].id, url: null })
+            .returns(assets[0])
       ),
     },
   };

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

@@ -71,7 +71,10 @@ beforeEach(() => {
       ),
       asset: createSinonStub(
         s => s.throws(),
-        s => s.withArgs(undefined, { id: assetStub.id }).returns(assetStub)
+        s =>
+          s
+            .withArgs(undefined, { id: assetStub.id, url: null })
+            .returns(assetStub)
       ),
     },
   };