[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
This commit is contained in:
Kiwi
2018-09-21 22:43:28 +00:00
committed by Wyatt Johnson
parent 85af8d1bbf
commit 106a5d36ed
57 changed files with 906 additions and 240 deletions
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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(),
@@ -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)
),
},
};
@@ -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)
),
},
};
@@ -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)
),
},
};
@@ -14,7 +14,7 @@ beforeEach(() => {
s => s.throws(),
s =>
s
.withArgs(undefined, { id: assetWithDeepReplies.id })
.withArgs(undefined, { id: assetWithDeepReplies.id, url: null })
.returns(assetWithDeepReplies)
),
},
@@ -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])
),
},
};
@@ -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)
),
},
};