[CORL-916] conversation view (#2850)

* show comment counts for stories in story table

* remove debug code

* add modal to view comment

* load converasation view into modal

* style modal header

* style conversation view modal

* style conversation thread in conversation modal

* styles conversation view comments

* show replies to replies on click

* update snaps

* update snap

* pass settings prop through to comment content, set default replies to 5
This commit is contained in:
Tessa Thornton
2020-03-26 13:47:16 -04:00
committed by GitHub
parent 8fd266deeb
commit 58f2f71743
53 changed files with 1509 additions and 278 deletions
@@ -34,7 +34,7 @@ exports[`approves comment in reported queue: dangling 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -98,19 +98,28 @@ exports[`approves comment in reported queue: dangling 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/0"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -291,7 +300,7 @@ exports[`rejects comment in reported queue: dangling 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -355,19 +364,28 @@ exports[`rejects comment in reported queue: dangling 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/0"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -545,7 +563,7 @@ exports[`renders reported queue with comments 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -609,19 +627,28 @@ exports[`renders reported queue with comments 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/0"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -786,7 +813,7 @@ exports[`renders reported queue with comments 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -850,19 +877,28 @@ exports[`renders reported queue with comments 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/1"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -1043,7 +1079,7 @@ exports[`renders reported queue with comments 2`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -1107,19 +1143,28 @@ exports[`renders reported queue with comments 2`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/0"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -1284,7 +1329,7 @@ exports[`renders reported queue with comments 2`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -1348,19 +1393,28 @@ exports[`renders reported queue with comments 2`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/1"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -1531,7 +1585,7 @@ exports[`renders reported queue with comments and load more 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -1595,19 +1649,28 @@ exports[`renders reported queue with comments and load more 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/2"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -34,7 +34,7 @@ exports[`approves comment in rejected queue: dangling 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -98,19 +98,28 @@ exports[`approves comment in rejected queue: dangling 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/0"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -288,7 +297,7 @@ exports[`renders rejected queue with comments 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -352,19 +361,28 @@ exports[`renders rejected queue with comments 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/0"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -529,7 +547,7 @@ exports[`renders rejected queue with comments 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -593,19 +611,28 @@ exports[`renders rejected queue with comments 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/1"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -776,7 +803,7 @@ exports[`renders rejected queue with comments and load more 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -840,19 +867,28 @@ exports[`renders rejected queue with comments and load more 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/2"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -21,7 +21,7 @@ exports[`approves single comment 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -85,19 +85,28 @@ exports[`approves single comment 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/0"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -235,7 +244,7 @@ exports[`rejects single comment 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -299,19 +308,28 @@ exports[`rejects single comment 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/0"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"
@@ -484,7 +502,7 @@ exports[`renders single comment view 1`] = `
className="Box-root Flex-root Flex-flex Flex-alignCenter"
>
<button
className="BaseButton-root ModerateCard-usernameButton"
className="BaseButton-root UsernameButton-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -548,19 +566,28 @@ exports[`renders single comment view 1`] = `
<div
className="ModerateCard-viewContext"
>
<a
className="TextLink-root ModerateCard-link"
href="http://localhost/comment/0"
target="_blank"
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantText Button-uppercase Button-iconLeft"
data-color="regular"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
View Context
<i
aria-hidden="true"
className="Icon-root Icon-xs TextLink-icon"
className="Icon-root Icon-sm ButtonIcon-root"
>
open_in_new
question_answer
</i>
</a>
<span>
View Conversation
</span>
</button>
</div>
<div
className="ModerateCard-separator ModerateCard-ruledSeparator"