[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/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);