wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-19 12:40:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-381] Featured Comments (#2335)

Browse Source 
* feat: initial serverside featuring support

* Update schema.graphql

* feat: add feature comment to moderation dropdown

* feat: feature comments on the stream embed

* fix: tests

* fix: optimize loading and fix tests

* feat: hide featured tab when empty

* feat: introduced flattening

* fix: snapshots

* fix: spacing

* feat: added a dark variant to popover

* feat: add featured comments tooltip

* fix: better tests

* feat: added tag counts

* chore: changed string to enum

* fix: removed unused translation

* fix: changed schema for String -> TAG

* feat: split comments -> comments, featuredComments

* fix: adapt client to new endpoints

* feat: use featured comment counts

* test: featured count handling

* fix: snapshots and optimistically approve comment during feature

* fix: remove unnecessary assertion

* feat: approve featured comments

* fix: make optimistic update less reliant on existing data
This commit is contained in:
Wyatt Johnson
2019-06-14 16:27:25 +00:00
committed by GitHub
parent f8cf34e34d
commit 9d1f03115f
213 changed files with 7744 additions and 5387 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doczrc.js
+1 -1
View File
@@ -32,7 +32,7 @@ export default {
config.module.rules.push({
test: /\.css\.ts$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : styleLoader,
styleLoader,
{
loader: require.resolve("css-loader"),
options: {
src/core/client/account/test/__snapshots__/confirmEmail.spec.tsx.snap
+12 -10
View File
@@ -16,24 +16,24 @@ exports[`renders form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
>
Email Confirmation
</h1>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Click below to confirm your email address.
</p>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth"
@@ -66,19 +66,21 @@ exports[`renders missing confirm token 1`] = `
className="MainLayout-centered"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
>
Oops Sorry!
</h1>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
<span>
The Confirm Token seems to be missing.
</span>
<div>
<span>
The Confirm Token seems to be missing.
</span>
</div>
</div>
</div>
</div>
src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap
+15 -13
View File
@@ -16,37 +16,37 @@ exports[`renders form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
>
Reset your password
</h1>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Please enter a new password to use to sign in to your account.
Make sure it is unique and be sure to keep it secure.
</p>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -113,19 +113,21 @@ exports[`renders missing reset token 1`] = `
className="MainLayout-centered"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
>
Oops Sorry!
</h1>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
<span>
The Reset Token seems to be missing.
</span>
<div>
<span>
The Reset Token seems to be missing.
</span>
</div>
</div>
</div>
</div>
src/core/client/admin/routes/Moderate/ModerateCard/__snapshots__/Username.spec.tsx.snap
+1 -1
View File
@@ -2,7 +2,7 @@
exports[`renders correctly 1`] = `
<span
className="Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
>
Marvin
</span>
src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap
+42 -40
View File
@@ -6,18 +6,18 @@ exports[`accepts valid email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -38,10 +38,10 @@ exports[`accepts valid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -96,18 +96,18 @@ exports[`checks for invalid email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -141,10 +141,10 @@ exports[`checks for invalid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -199,7 +199,7 @@ exports[`renders addEmailAddress view 1`] = `
data-testid="completeAccountBox"
>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="CompleteAccountBox-container"
@@ -208,12 +208,12 @@ exports[`renders addEmailAddress view 1`] = `
className="CompleteAccountBox-header"
>
<h1
className="Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
className="Box-root Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
>
Finish Setting Up Your Account
</h1>
<h1
className="Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
className="Box-root Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
>
<span>
Add Email Address
@@ -228,18 +228,18 @@ exports[`renders addEmailAddress view 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -260,10 +260,10 @@ exports[`renders addEmailAddress view 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -310,18 +310,18 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -355,10 +355,10 @@ exports[`shows error when submitting empty form 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -413,17 +413,18 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
</p>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
server error
<div>
server error
GraphQL request (4:3)
3: ) {
@@ -431,12 +432,13 @@ GraphQL request (4:3)
^
5: user {
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -457,10 +459,10 @@ GraphQL request (4:3)
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -502,18 +504,18 @@ exports[`successfully sets email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -534,10 +536,10 @@ exports[`successfully sets email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap
+31 -29
View File
@@ -6,25 +6,25 @@ exports[`checks for invalid password 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -96,7 +96,7 @@ exports[`renders createPassword view 1`] = `
data-testid="completeAccountBox"
>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="CompleteAccountBox-container"
@@ -105,12 +105,12 @@ exports[`renders createPassword view 1`] = `
className="CompleteAccountBox-header"
>
<h1
className="Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
className="Box-root Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
>
Finish Setting Up Your Account
</h1>
<h1
className="Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
className="Box-root Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
>
<span>
Create Password
@@ -125,25 +125,25 @@ exports[`renders createPassword view 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -207,25 +207,25 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -297,10 +297,10 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
@@ -308,7 +308,8 @@ we require users to create a password.
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
server error
<div>
server error
GraphQL request (4:3)
3: ) {
@@ -316,18 +317,19 @@ GraphQL request (4:3)
^
5: user {
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -386,25 +388,25 @@ exports[`successfully sets password 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap
+31 -29
View File
@@ -6,24 +6,24 @@ exports[`checks for invalid username 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -77,7 +77,7 @@ exports[`renders createUsername view 1`] = `
data-testid="completeAccountBox"
>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="CompleteAccountBox-container"
@@ -86,12 +86,12 @@ exports[`renders createUsername view 1`] = `
className="CompleteAccountBox-header"
>
<h1
className="Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
className="Box-root Typography-root Typography-heading3 Typography-colorTextLight Typography-alignCenter CompleteAccountBox-heading3"
>
Finish Setting Up Your Account
</h1>
<h1
className="Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
className="Box-root Typography-root Typography-heading1 Typography-colorTextLight Typography-alignCenter"
>
<span>
Create Username
@@ -106,24 +106,24 @@ exports[`renders createUsername view 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -169,24 +169,24 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -240,17 +240,18 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
server error
<div>
server error
GraphQL request (4:3)
3: ) {
@@ -258,18 +259,19 @@ GraphQL request (4:3)
^
5: user {
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -310,24 +312,24 @@ exports[`successfully sets username 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
src/core/client/admin/test/auth/__snapshots__/restricted.spec.tsx.snap
+24 -24
View File
@@ -5,13 +5,13 @@ exports[`show restricted screen for commenters and staff 1`] = `
data-testid="authBox"
>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="HorizontalGutter-root AuthBox-container HorizontalGutter-double"
className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="AuthBox-brandIcon"
@@ -62,24 +62,24 @@ exports[`show restricted screen for commenters and staff 1`] = `
</div>
<div>
<h1
className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
>
<span>
Currently signed in to
</span>
</h1>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
>
Coral
</h1>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<span
aria-hidden="true"
@@ -89,25 +89,25 @@ exports[`show restricted screen for commenters and staff 1`] = `
</span>
</div>
<h1
className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
>
You do not have permission to access this page.
</h1>
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
>
You are signed in as:
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
>
Markus
</h1>
</div>
</div>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
@@ -123,7 +123,7 @@ exports[`show restricted screen for commenters and staff 1`] = `
</button>
</div>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
>
If you think this is an error, please contact your administrator for assistance.
</p>
@@ -138,13 +138,13 @@ exports[`show restricted screen for commenters and staff 2`] = `
data-testid="authBox"
>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="HorizontalGutter-root AuthBox-container HorizontalGutter-double"
className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="AuthBox-brandIcon"
@@ -195,24 +195,24 @@ exports[`show restricted screen for commenters and staff 2`] = `
</div>
<div>
<h1
className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
>
<span>
Currently signed in to
</span>
</h1>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
>
Coral
</h1>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<span
aria-hidden="true"
@@ -222,25 +222,25 @@ exports[`show restricted screen for commenters and staff 2`] = `
</span>
</div>
<h1
className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
>
You do not have permission to access this page.
</h1>
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter"
>
You are signed in as:
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter"
>
Markus
</h1>
</div>
</div>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
@@ -256,7 +256,7 @@ exports[`show restricted screen for commenters and staff 2`] = `
</button>
</div>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Typography-alignCenter Restricted-contactAdmin"
>
If you think this is an error, please contact your administrator for assistance.
</p>
src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap
+41 -39
View File
@@ -6,13 +6,13 @@ exports[`accepts correct password 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -46,10 +46,10 @@ exports[`accepts correct password 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -117,13 +117,13 @@ exports[`accepts valid email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -144,10 +144,10 @@ exports[`accepts valid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -228,13 +228,13 @@ exports[`checks for invalid email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -268,10 +268,10 @@ exports[`checks for invalid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -352,13 +352,13 @@ exports[`renders sign in form 1`] = `
data-testid="authBox"
>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="HorizontalGutter-root AuthBox-container HorizontalGutter-double"
className="Box-root HorizontalGutter-root AuthBox-container HorizontalGutter-double"
>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<div
className="AuthBox-brandIcon"
@@ -409,33 +409,33 @@ exports[`renders sign in form 1`] = `
</div>
<div>
<h1
className="Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter"
>
<span>
Sign in to
</span>
</h1>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Typography-alignCenter BrandName-root BrandName-lg"
>
Coral
</h1>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -456,10 +456,10 @@ exports[`renders sign in form 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -524,10 +524,10 @@ exports[`renders sign in form 1`] = `
</div>
</div>
<div
className="Flex-root Flex-flex Flex-justifyCenter"
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary Typography-alignCenter Version-version"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary Typography-alignCenter Version-version"
>
vTest
</p>
@@ -541,13 +541,13 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -581,10 +581,10 @@ exports[`shows error when submitting empty form 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -665,18 +665,20 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
Server Error
<div>
Server Error
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -697,10 +699,10 @@ exports[`shows server error 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+26 -26
View File
@@ -40,13 +40,13 @@ exports[`ban user 1`] = `
</span>
</button>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<h1
className="Typography-root Typography-header2 Typography-colorTextPrimary"
className="Box-root Typography-root Typography-header2 Typography-colorTextPrimary"
id="banModal-title"
>
Are you sure you want to ban
@@ -56,14 +56,14 @@ exports[`ban user 1`] = `
?
</h1>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Once banned, this user will no longer be able to comment, use
reactions, or report comments.
</p>
</div>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd gutter"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined"
@@ -105,16 +105,16 @@ exports[`renders community 1`] = `
data-testid="community-container"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div
className="Flex-root Flex-flex Flex-doubleItemGutter"
className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
>
<fieldset
className="FieldSet-root"
>
<legend
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
>
Search
</legend>
@@ -163,12 +163,12 @@ exports[`renders community 1`] = `
className="FieldSet-root"
>
<legend
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
>
Show Me
</legend>
<div
className="Flex-root Flex-flex Flex-itemGutter"
className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
>
<span
className="SelectField-root UserTableFilter-selectField"
@@ -275,7 +275,7 @@ exports[`renders community 1`] = `
</fieldset>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<table
className="Table-root Table-fullWidth"
@@ -359,10 +359,10 @@ exports[`renders community 1`] = `
className="ButtonPadding-root"
>
<div
className="Typography-root Typography-detail Typography-colorSuccess"
className="Box-root Typography-root Typography-detail Typography-colorSuccess"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
>
<div
aria-hidden={true}
@@ -452,10 +452,10 @@ exports[`renders community 1`] = `
className="ButtonPadding-root"
>
<div
className="Typography-root Typography-detail Typography-colorSuccess"
className="Box-root Typography-root Typography-detail Typography-colorSuccess"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
>
<div
aria-hidden={true}
@@ -545,10 +545,10 @@ exports[`renders community 1`] = `
className="ButtonPadding-root"
>
<div
className="Typography-root Typography-detail Typography-colorSuccess"
className="Box-root Typography-root Typography-detail Typography-colorSuccess"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
>
<div
aria-hidden={true}
@@ -649,10 +649,10 @@ exports[`renders community 1`] = `
type="button"
>
<div
className="Typography-root Typography-detail Typography-colorSuccess"
className="Box-root Typography-root Typography-detail Typography-colorSuccess"
>
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter"
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
>
<div
aria-hidden={true}
@@ -701,16 +701,16 @@ exports[`renders empty community 1`] = `
data-testid="community-container"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div
className="Flex-root Flex-flex Flex-doubleItemGutter"
className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
>
<fieldset
className="FieldSet-root"
>
<legend
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
>
Search
</legend>
@@ -759,12 +759,12 @@ exports[`renders empty community 1`] = `
className="FieldSet-root"
>
<legend
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
>
Show Me
</legend>
<div
className="Flex-root Flex-flex Flex-itemGutter"
className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
>
<span
className="SelectField-root UserTableFilter-selectField"
@@ -871,7 +871,7 @@ exports[`renders empty community 1`] = `
</fieldset>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<table
className="Table-root Table-fullWidth"
@@ -914,7 +914,7 @@ exports[`renders empty community 1`] = `
/>
</table>
<p
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary Typography-alignCenter EmptyMessage-root"
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary Typography-alignCenter EmptyMessage-root"
>
We could not find anyone in your community matching your criteria.
</p>
src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
+12 -12
View File
@@ -11,13 +11,13 @@ exports[`renders configure advanced 1`] = `
onSubmit={[Function]}
>
<div
className="Flex-root Layout-root Flex-flex"
className="Box-root Flex-root Layout-root Flex-flex"
>
<div
className="SideBar-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<nav
className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure advanced 1`] = `
</nav>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,23 +104,23 @@ exports[`renders configure advanced 1`] = `
className="Main-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
data-testid="configure-advancedContainer"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<label
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
htmlFor="configure-advanced-customCSSURL"
>
Custom CSS
</label>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external.
</p>
@@ -145,19 +145,19 @@ exports[`renders configure advanced 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<label
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
htmlFor="configure-advanced-allowedDomains"
>
Permitted Domains
</label>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Domains where your Coral instance is allowed to be embedded.
Typical use is localhost, staging.yourdomain.com,
src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+221 -219
View File
File diff suppressed because it is too large Load Diff
src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
+55 -55
View File
@@ -11,13 +11,13 @@ exports[`renders configure general 1`] = `
onSubmit={[Function]}
>
<div
className="Flex-root Layout-root Flex-flex"
className="Box-root Flex-root Layout-root Flex-flex"
>
<div
className="SideBar-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<nav
className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure general 1`] = `
</nav>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,19 +104,19 @@ exports[`renders configure general 1`] = `
className="Main-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
data-testid="configure-generalContainer"
>
<fieldset
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
>
Sitewide Commenting
</legend>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Open or close comment streams for new comments sitewide. When new comments
are turned off sitewide, new comments cannot be submitted, but existing
@@ -124,16 +124,16 @@ comments can continue to receive “Respect” reactions, be reported, and be
shared.
</p>
<fieldset
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
>
Enable New Comments Sitewide
</legend>
<div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={true}
@@ -157,7 +157,7 @@ shared.
</label>
</div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={false}
@@ -183,16 +183,16 @@ shared.
</div>
</fieldset>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-general-sitewideCommenting-message"
>
Sitewide Closed Comments Message
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Write a message that will be displayed when comment streams are closed sitewide
</p>
@@ -209,24 +209,24 @@ shared.
</div>
</fieldset>
<fieldset
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
>
Community Guidelines Summary
</legend>
<fieldset
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
>
Show Community Guidelines Summary
</legend>
<div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={false}
@@ -250,7 +250,7 @@ shared.
</label>
</div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={true}
@@ -276,16 +276,16 @@ shared.
</div>
</fieldset>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-general-guidelines-content"
>
Community Guidelines Summary
</label>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Write a summary of your community guidelines that will appear
at the top of each comment stream sitewide. Your summary can be
@@ -313,29 +313,29 @@ Markdown can be found
</div>
</fieldset>
<fieldset
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
>
Comment Length
</legend>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Set a limit on the length of comments sitewide
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
>
Limit Comment Length
</label>
<div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={false}
@@ -359,7 +359,7 @@ Markdown can be found
</label>
</div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={true}
@@ -385,10 +385,10 @@ Markdown can be found
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-general-commentLength-min"
>
Minimum Comment Length
@@ -414,7 +414,7 @@ Markdown can be found
className="TextField-adornment"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Characters
</p>
@@ -422,10 +422,10 @@ Markdown can be found
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-general-commentLength-max"
>
Maximum Comment Length
@@ -451,7 +451,7 @@ Markdown can be found
className="TextField-adornment"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Characters
</p>
@@ -460,30 +460,30 @@ Markdown can be found
</div>
</fieldset>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
>
Comment Editing
</h1>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Set a limit on how long commenters have to edit their comments sitewide.
Edited comments are marked as (Edited) on the comment stream and the
moderation panel.
</p>
<fieldset
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
>
Comment Edit Timeframe
</legend>
<div
className="Flex-root Flex-flex Flex-itemGutter"
className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
>
<div
className="TextField-root DurationField-value"
@@ -548,29 +548,29 @@ moderation panel.
</fieldset>
</div>
<fieldset
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
>
Closing Comment Streams
</legend>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Set comment streams to close after a defined period of time after a story’s publication
</p>
<fieldset
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
>
Close Comments Automatically
</legend>
<div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={false}
@@ -594,7 +594,7 @@ moderation panel.
</label>
</div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={true}
@@ -620,15 +620,15 @@ moderation panel.
</div>
</fieldset>
<fieldset
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
>
Close Comments After
</legend>
<div
className="Flex-root Flex-flex Flex-itemGutter"
className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
>
<div
className="TextField-root DurationField-value"
@@ -693,16 +693,16 @@ moderation panel.
</fieldset>
</fieldset>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<label
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
htmlFor="configure-general-closedStreamMessage-content"
>
Closed Stream Message
</label>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Write a message to appear after a story is closed for commenting.
</p>
src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+40 -40
View File
@@ -11,13 +11,13 @@ exports[`renders configure moderation 1`] = `
onSubmit={[Function]}
>
<div
className="Flex-root Layout-root Flex-flex"
className="Box-root Flex-root Layout-root Flex-flex"
>
<div
className="SideBar-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<nav
className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure moderation 1`] = `
</nav>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,19 +104,19 @@ exports[`renders configure moderation 1`] = `
className="Main-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
data-testid="configure-moderationContainer"
>
<fieldset
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
>
Perspective Toxic Comment Filter
</legend>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Using the Perspective API, the Toxic Comment filter warns users when comments exceed the predefined toxicity
threshold. Comments with a toxicity score above the threshold
@@ -131,16 +131,16 @@ the
. If approved by a moderator, the comment will be published.
</p>
<fieldset
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
>
Toxic Comment Filter
</legend>
<div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={false}
@@ -164,7 +164,7 @@ the
</label>
</div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={true}
@@ -190,16 +190,16 @@ the
</div>
</fieldset>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-moderation-perspective-threshold"
>
Toxicity Threshold
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
This value can be set a percentage between 0 and 100. This number represents the likelihood that a
comment is toxic, according to Perspective API. By default the treshold is set to 80.
@@ -225,7 +225,7 @@ comment is toxic, according to Perspective API. By default the treshold is set t
className="TextField-adornment"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
%
</p>
@@ -233,15 +233,15 @@ comment is toxic, according to Perspective API. By default the treshold is set t
</div>
</div>
<fieldset
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
>
Allow Google to Store Comment Data
</legend>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Stored comments will be used for future research and community model building purposes to
improve the API over time
@@ -249,7 +249,7 @@ improve the API over time
<div>
<div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={false}
@@ -271,7 +271,7 @@ improve the API over time
</label>
</div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={false}
@@ -297,12 +297,12 @@ improve the API over time
</fieldset>
<div>
<h1
className="Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
>
Configuration
</h1>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
For additional information on how to set up the Perspective Toxic Comment Filter please visit:
@@ -316,10 +316,10 @@ improve the API over time
</p>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-moderation-integrations.perspective.key"
>
API Key
@@ -344,16 +344,16 @@ improve the API over time
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-moderation-perspective-customEndpoint"
>
Custom Endpoint
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
By default the endpoint is set to https://commentanalyzer.googleapis.com/v1alpha1. You may override this here.
</p>
@@ -378,15 +378,15 @@ improve the API over time
</div>
</fieldset>
<fieldset
className="FieldSet-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<legend
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
>
Akismet Spam Detection Filter
</legend>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Submitted comments are passed to the Akismet API for spam detection.
If a comment is determined to be spam, it will prompt the user,
@@ -405,16 +405,16 @@ are placed in the
the comment will be published.
</p>
<fieldset
className="FieldSet-root HorizontalGutter-root FormField-root HorizontalGutter-half"
className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<legend
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
>
Spam Detection Filter
</legend>
<div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={false}
@@ -438,7 +438,7 @@ the comment will be published.
</label>
</div>
<div
className="Flex-root RadioButton-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
>
<input
checked={true}
@@ -465,12 +465,12 @@ the comment will be published.
</fieldset>
<div>
<h1
className="Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
>
Configuration
</h1>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Note: You must add your active domain(s)
in your Akismet account:
@@ -484,10 +484,10 @@ in your Akismet account:
</p>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-moderation-integrations.akismet.key"
>
API Key
@@ -512,10 +512,10 @@ in your Akismet account:
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-moderation-akismet-site"
>
Site URL
src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
+12 -12
View File
@@ -11,13 +11,13 @@ exports[`renders configure organization 1`] = `
onSubmit={[Function]}
>
<div
className="Flex-root Layout-root Flex-flex"
className="Box-root Flex-root Layout-root Flex-flex"
>
<div
className="SideBar-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<nav
className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure organization 1`] = `
</nav>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,23 +104,23 @@ exports[`renders configure organization 1`] = `
className="Main-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
data-testid="configure-organizationContainer"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<label
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
htmlFor="configure-organization-organization.name"
>
Organization Name
</label>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Your organization name will appear on emails sent by Coral to your community and organization members.
</p>
@@ -145,19 +145,19 @@ exports[`renders configure organization 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<label
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
htmlFor="configure-organization-organization.contactEmail"
>
Organization Email
</label>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
This email address will be used as in emails and across
the platform for community members to get in touch with
src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
+16 -16
View File
@@ -11,13 +11,13 @@ exports[`renders configure wordList 1`] = `
onSubmit={[Function]}
>
<div
className="Flex-root Layout-root Flex-flex"
className="Box-root Flex-root Layout-root Flex-flex"
>
<div
className="SideBar-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<nav
className="Navigation-root"
@@ -83,7 +83,7 @@ exports[`renders configure wordList 1`] = `
</nav>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
@@ -104,19 +104,19 @@ exports[`renders configure wordList 1`] = `
className="Main-root"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
data-testid="configure-wordListContainer"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
>
Banned Words and Phrases
</h1>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Comments containing a word or phrase in the banned words list are
<strong>
@@ -125,16 +125,16 @@ exports[`renders configure wordList 1`] = `
.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-wordlist-banned"
>
Banned Word List
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Separate banned words or phrases with a new line. Attempting to copy
and paste a comma separated list?
@@ -164,15 +164,15 @@ to a new line separated list.
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<h1
className="Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
>
Suspect Words and Phrases
</h1>
<p
className="Typography-root Typography-detail Typography-colorTextPrimary"
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
>
Comments containing a word or phrase in the Suspect Words List
are
@@ -182,16 +182,16 @@ published (if comments are not pre-moderated).
</strong>
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="configure-wordlist-suspect"
>
Suspect Word List
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Separate suspect words or phrases with a new line. Attempting to copy
and paste a comma separated list?
src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
+27 -27
View File
@@ -5,7 +5,7 @@ exports[`loads more 1`] = `
data-testid="decisionHistory-container"
>
<div
className="Flex-root Title-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root Title-root Flex-flex Flex-alignCenter"
>
<span
aria-hidden="true"
@@ -17,7 +17,7 @@ exports[`loads more 1`] = `
 
</span>
<span
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
>
Your Decision History
</span>
@@ -32,7 +32,7 @@ exports[`loads more 1`] = `
className="DecisionItem-root"
>
<div
className="Flex-root Flex-flex"
className="Box-root Flex-root Flex-flex"
>
<div
className="DecisionItem-leftCol"
@@ -46,7 +46,7 @@ exports[`loads more 1`] = `
</div>
<div>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
>
Approved comment by
<strong>
@@ -54,10 +54,10 @@ exports[`loads more 1`] = `
</strong>
</p>
<div
className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
>
<span
className="Typography-root Typography-timestamp Typography-colorTextPrimary"
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
@@ -96,7 +96,7 @@ exports[`loads more 1`] = `
className="DecisionItem-root"
>
<div
className="Flex-root Flex-flex"
className="Box-root Flex-root Flex-flex"
>
<div
className="DecisionItem-leftCol"
@@ -110,7 +110,7 @@ exports[`loads more 1`] = `
</div>
<div>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
>
Rejected comment by
<strong>
@@ -118,10 +118,10 @@ exports[`loads more 1`] = `
</strong>
</p>
<div
className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
>
<span
className="Typography-root Typography-timestamp Typography-colorTextPrimary"
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
@@ -160,7 +160,7 @@ exports[`loads more 1`] = `
className="DecisionItem-root"
>
<div
className="Flex-root Flex-flex"
className="Box-root Flex-root Flex-flex"
>
<div
className="DecisionItem-leftCol"
@@ -174,7 +174,7 @@ exports[`loads more 1`] = `
</div>
<div>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
>
Approved comment by
<strong>
@@ -182,10 +182,10 @@ exports[`loads more 1`] = `
</strong>
</p>
<div
className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
>
<span
className="Typography-root Typography-timestamp Typography-colorTextPrimary"
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
@@ -230,7 +230,7 @@ exports[`opens popover when clicked on button showing loading state 1`] = `
data-testid="decisionHistory-loading-container"
>
<div
className="Flex-root Title-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root Title-root Flex-flex Flex-alignCenter"
>
<span
aria-hidden="true"
@@ -242,7 +242,7 @@ exports[`opens popover when clicked on button showing loading state 1`] = `
 
</span>
<span
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
>
Your Decision History
</span>
@@ -251,7 +251,7 @@ exports[`opens popover when clicked on button showing loading state 1`] = `
className="Main-root"
>
<div
className="Flex-root DecisionHistoryLoading-container Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root DecisionHistoryLoading-container Flex-flex Flex-justifyCenter Flex-alignCenter"
/>
</div>
</div>
@@ -262,7 +262,7 @@ exports[`render popover content 1`] = `
data-testid="decisionHistory-container"
>
<div
className="Flex-root Title-root Flex-flex Flex-alignCenter"
className="Box-root Flex-root Title-root Flex-flex Flex-alignCenter"
>
<span
aria-hidden="true"
@@ -274,7 +274,7 @@ exports[`render popover content 1`] = `
 
</span>
<span
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
>
Your Decision History
</span>
@@ -289,7 +289,7 @@ exports[`render popover content 1`] = `
className="DecisionItem-root"
>
<div
className="Flex-root Flex-flex"
className="Box-root Flex-root Flex-flex"
>
<div
className="DecisionItem-leftCol"
@@ -303,7 +303,7 @@ exports[`render popover content 1`] = `
</div>
<div>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
>
Approved comment by
<strong>
@@ -311,10 +311,10 @@ exports[`render popover content 1`] = `
</strong>
</p>
<div
className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
>
<span
className="Typography-root Typography-timestamp Typography-colorTextPrimary"
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
@@ -353,7 +353,7 @@ exports[`render popover content 1`] = `
className="DecisionItem-root"
>
<div
className="Flex-root Flex-flex"
className="Box-root Flex-root Flex-flex"
>
<div
className="DecisionItem-leftCol"
@@ -367,7 +367,7 @@ exports[`render popover content 1`] = `
</div>
<div>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
>
Rejected comment by
<strong>
@@ -375,10 +375,10 @@ exports[`render popover content 1`] = `
</strong>
</p>
<div
className="Flex-root Footer-root Flex-flex Flex-alignBaseline"
className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
>
<span
className="Typography-root Typography-timestamp Typography-colorTextPrimary"
className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
>
<time
className="Timestamp-root RelativeTime-root"
src/core/client/admin/test/moderate/__snapshots__/moderate.spec.tsx.snap
+140 -140
View File
File diff suppressed because it is too large Load Diff
src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
+10 -10
View File
@@ -6,16 +6,16 @@ exports[`renders empty stories 1`] = `
data-testid="stories-container"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div
className="Flex-root Flex-flex Flex-doubleItemGutter"
className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
>
<fieldset
className="FieldSet-root"
>
<legend
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
>
Search
</legend>
@@ -64,7 +64,7 @@ exports[`renders empty stories 1`] = `
className="FieldSet-root"
>
<legend
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
>
Show Me
</legend>
@@ -110,7 +110,7 @@ exports[`renders empty stories 1`] = `
</fieldset>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<table
className="Table-root Table-fullWidth"
@@ -309,16 +309,16 @@ exports[`renders stories 1`] = `
data-testid="stories-container"
>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<div
className="Flex-root Flex-flex Flex-doubleItemGutter"
className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
>
<fieldset
className="FieldSet-root"
>
<legend
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
>
Search
</legend>
@@ -367,7 +367,7 @@ exports[`renders stories 1`] = `
className="FieldSet-root"
>
<legend
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
>
Show Me
</legend>
@@ -413,7 +413,7 @@ exports[`renders stories 1`] = `
</fieldset>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-double"
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<table
className="Table-root Table-fullWidth"
src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap
+59 -57
View File
@@ -6,10 +6,10 @@ exports[`accepts valid email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
@@ -32,7 +32,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Receive updates regarding any changes to your account
(email address, username, password, etc.)
@@ -54,7 +54,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Allow you to download your comments.
</div>
@@ -75,7 +75,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Send comment notifications that you have chosen to receive.
</div>
@@ -83,10 +83,10 @@ Your email address will be used to:
</li>
</ul>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -107,10 +107,10 @@ Your email address will be used to:
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -165,10 +165,10 @@ exports[`checks for invalid email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
@@ -191,7 +191,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Receive updates regarding any changes to your account
(email address, username, password, etc.)
@@ -213,7 +213,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Allow you to download your comments.
</div>
@@ -234,7 +234,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Send comment notifications that you have chosen to receive.
</div>
@@ -242,10 +242,10 @@ Your email address will be used to:
</li>
</ul>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -279,10 +279,10 @@ Your email address will be used to:
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -337,11 +337,11 @@ exports[`renders addEmailAddress view 1`] = `
data-testid="addEmailAddress-container"
>
<div
className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<h1
className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Add Email Address
</h1>
@@ -356,10 +356,10 @@ exports[`renders addEmailAddress view 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
@@ -382,7 +382,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Receive updates regarding any changes to your account
(email address, username, password, etc.)
@@ -404,7 +404,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Allow you to download your comments.
</div>
@@ -425,7 +425,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Send comment notifications that you have chosen to receive.
</div>
@@ -433,10 +433,10 @@ Your email address will be used to:
</li>
</ul>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -457,10 +457,10 @@ Your email address will be used to:
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -505,10 +505,10 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
@@ -531,7 +531,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Receive updates regarding any changes to your account
(email address, username, password, etc.)
@@ -553,7 +553,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Allow you to download your comments.
</div>
@@ -574,7 +574,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Send comment notifications that you have chosen to receive.
</div>
@@ -582,10 +582,10 @@ Your email address will be used to:
</li>
</ul>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -619,10 +619,10 @@ Your email address will be used to:
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -677,10 +677,10 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
@@ -703,7 +703,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Receive updates regarding any changes to your account
(email address, username, password, etc.)
@@ -725,7 +725,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Allow you to download your comments.
</div>
@@ -746,7 +746,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Send comment notifications that you have chosen to receive.
</div>
@@ -756,7 +756,8 @@ Your email address will be used to:
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
server error
<div>
server error
GraphQL request (4:3)
3: ) {
@@ -764,12 +765,13 @@ GraphQL request (4:3)
^
5: user {
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -790,10 +792,10 @@ GraphQL request (4:3)
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
@@ -835,10 +837,10 @@ exports[`successfully sets email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
For your added security, we require users to add an email address to their accounts.
Your email address will be used to:
@@ -861,7 +863,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Receive updates regarding any changes to your account
(email address, username, password, etc.)
@@ -883,7 +885,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Allow you to download your comments.
</div>
@@ -904,7 +906,7 @@ Your email address will be used to:
</div>
<div>
<div
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Send comment notifications that you have chosen to receive.
</div>
@@ -912,10 +914,10 @@ Your email address will be used to:
</li>
</ul>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -936,10 +938,10 @@ Your email address will be used to:
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="confirmEmail"
>
Confirm Email Address
src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap
+30 -28
View File
@@ -6,25 +6,25 @@ exports[`checks for invalid password 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -96,11 +96,11 @@ exports[`renders createPassword view 1`] = `
data-testid="createPassword-container"
>
<div
className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<h1
className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Create Password
</h1>
@@ -115,25 +115,25 @@ exports[`renders createPassword view 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -195,25 +195,25 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -285,10 +285,10 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
@@ -296,7 +296,8 @@ we require users to create a password.
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
server error
<div>
server error
GraphQL request (4:3)
3: ) {
@@ -304,18 +305,19 @@ GraphQL request (4:3)
^
5: user {
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -374,25 +376,25 @@ exports[`successfully sets password 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
To protect against unauthorized changes to your account,
we require users to create a password.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap
+30 -28
View File
@@ -6,24 +6,24 @@ exports[`checks for invalid username 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -77,11 +77,11 @@ exports[`renders createUsername view 1`] = `
data-testid="createUsername-container"
>
<div
className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<h1
className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Create Username
</h1>
@@ -96,24 +96,24 @@ exports[`renders createUsername view 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -157,24 +157,24 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -228,17 +228,18 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
server error
<div>
server error
GraphQL request (4:3)
3: ) {
@@ -246,18 +247,19 @@ GraphQL request (4:3)
^
5: user {
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -298,24 +300,24 @@ exports[`successfully sets username 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Your username is an identifier that will appear on all of your comments.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap
+8 -8
View File
@@ -6,22 +6,22 @@ exports[`renders forgot password view 1`] = `
data-testid="forgotPassword-container"
>
<div
className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<h1
className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Forgot Password?
</h1>
</div>
</div>
<div
className="Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<a
className="TextLink-root"
@@ -42,19 +42,19 @@ exports[`renders forgot password view 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
Enter your email address below and we will send you a link to
reset your password.
</p>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+88 -84
View File
@@ -6,13 +6,13 @@ exports[`accepts correct password 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -46,10 +46,10 @@ exports[`accepts correct password 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -87,10 +87,10 @@ exports[`accepts correct password 1`] = `
</div>
</div>
<div
className="Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
@@ -132,13 +132,13 @@ exports[`accepts valid email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -159,10 +159,10 @@ exports[`accepts valid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -213,10 +213,10 @@ exports[`accepts valid email 1`] = `
</span>
</div>
<div
className="Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
@@ -258,20 +258,20 @@ exports[`auth configuration renders all auth enabled 1`] = `
data-testid="signIn-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -292,10 +292,10 @@ exports[`auth configuration renders all auth enabled 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -333,10 +333,10 @@ exports[`auth configuration renders all auth enabled 1`] = `
</div>
</div>
<div
className="Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
@@ -371,7 +371,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
</div>
</form>
<div
className="Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<hr
className="HorizontalSeparator-hr"
@@ -383,7 +383,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
@@ -462,10 +462,10 @@ exports[`auth configuration renders only some social login enabled 1`] = `
data-testid="signIn-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
@@ -530,13 +530,13 @@ exports[`checks for invalid email 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -570,10 +570,10 @@ exports[`checks for invalid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -624,10 +624,10 @@ exports[`checks for invalid email 1`] = `
</span>
</div>
<div
className="Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
@@ -669,27 +669,27 @@ exports[`renders sign in view 1`] = `
data-testid="signIn-container"
>
<div
className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<h1
className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Sign In
</h1>
<h1
className="Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
>
to join the conversation
</h1>
</div>
</div>
<div
className="Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<span>
Don't have an account? 
@@ -709,20 +709,20 @@ exports[`renders sign in view 1`] = `
data-testid="signIn-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -743,10 +743,10 @@ exports[`renders sign in view 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -784,10 +784,10 @@ exports[`renders sign in view 1`] = `
</div>
</div>
<div
className="Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
@@ -822,7 +822,7 @@ exports[`renders sign in view 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -835,27 +835,27 @@ exports[`renders sign in view with error 1`] = `
data-testid="signIn-container"
>
<div
className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<h1
className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Sign In
</h1>
<h1
className="Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
>
to join the conversation
</h1>
</div>
</div>
<div
className="Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<span>
Don't have an account? 
@@ -875,25 +875,27 @@ exports[`renders sign in view with error 1`] = `
data-testid="signIn-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
Social Login Error
<div>
Social Login Error
</div>
</div>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -914,10 +916,10 @@ exports[`renders sign in view with error 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -955,10 +957,10 @@ exports[`renders sign in view with error 1`] = `
</div>
</div>
<div
className="Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
@@ -993,7 +995,7 @@ exports[`renders sign in view with error 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -1006,13 +1008,13 @@ exports[`shows error when submitting empty form 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -1046,10 +1048,10 @@ exports[`shows error when submitting empty form 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -1100,10 +1102,10 @@ exports[`shows error when submitting empty form 1`] = `
</span>
</div>
<div
className="Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
@@ -1145,18 +1147,20 @@ exports[`shows server error 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
Server Error
<div>
Server Error
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -1177,10 +1181,10 @@ exports[`shows server error 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -1218,10 +1222,10 @@ exports[`shows server error 1`] = `
</div>
</div>
<div
className="Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
@@ -1263,13 +1267,13 @@ exports[`submits form successfully 1`] = `
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -1290,10 +1294,10 @@ exports[`submits form successfully 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
@@ -1331,10 +1335,10 @@ exports[`submits form successfully 1`] = `
</div>
</div>
<div
className="Flex-root Flex-flex Flex-justifyFlexEnd"
className="Box-root Flex-root Flex-flex Flex-justifyFlexEnd"
>
<p
className="Typography-root Typography-bodyCopy Typography-colorTextPrimary"
className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
>
<a
className="TextLink-root"
src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+154 -152
View File
@@ -6,20 +6,20 @@ exports[`accepts correct password 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -53,16 +53,16 @@ exports[`accepts correct password 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -95,16 +95,16 @@ exports[`accepts correct password 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -164,7 +164,7 @@ exports[`accepts correct password 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -176,20 +176,20 @@ exports[`accepts valid email 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -210,16 +210,16 @@ exports[`accepts valid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -252,16 +252,16 @@ exports[`accepts valid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -334,7 +334,7 @@ exports[`accepts valid email 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -346,20 +346,20 @@ exports[`accepts valid username 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -393,16 +393,16 @@ exports[`accepts valid username 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -422,16 +422,16 @@ exports[`accepts valid username 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -504,7 +504,7 @@ exports[`accepts valid username 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -516,20 +516,20 @@ exports[`auth configuration renders all auth enabled 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -550,16 +550,16 @@ exports[`auth configuration renders all auth enabled 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -579,16 +579,16 @@ exports[`auth configuration renders all auth enabled 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -648,7 +648,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
</div>
</form>
<div
className="Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root HorizontalSeparator-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<hr
className="HorizontalSeparator-hr"
@@ -660,7 +660,7 @@ exports[`auth configuration renders all auth enabled 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
@@ -739,10 +739,10 @@ exports[`auth configuration renders only some social login enabled 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeLarge Button-colorRegular FacebookButton-colorRegular Button-variantFilled FacebookButton-variantFilled Button-fullWidth"
@@ -807,20 +807,20 @@ exports[`checks for invalid characters in username 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -854,16 +854,16 @@ exports[`checks for invalid characters in username 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -896,16 +896,16 @@ exports[`checks for invalid characters in username 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -978,7 +978,7 @@ exports[`checks for invalid characters in username 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -990,20 +990,20 @@ exports[`checks for invalid email 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -1037,16 +1037,16 @@ exports[`checks for invalid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -1079,16 +1079,16 @@ exports[`checks for invalid email 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -1161,7 +1161,7 @@ exports[`checks for invalid email 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -1173,20 +1173,20 @@ exports[`checks for too long username 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -1220,16 +1220,16 @@ exports[`checks for too long username 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -1262,16 +1262,16 @@ exports[`checks for too long username 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -1344,7 +1344,7 @@ exports[`checks for too long username 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -1356,20 +1356,20 @@ exports[`checks for too short password 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -1403,16 +1403,16 @@ exports[`checks for too short password 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -1445,16 +1445,16 @@ exports[`checks for too short password 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -1527,7 +1527,7 @@ exports[`checks for too short password 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -1539,20 +1539,20 @@ exports[`checks for too short username 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -1586,16 +1586,16 @@ exports[`checks for too short username 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -1628,16 +1628,16 @@ exports[`checks for too short username 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -1710,7 +1710,7 @@ exports[`checks for too short username 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -1722,27 +1722,27 @@ exports[`renders sign up form 1`] = `
data-testid="signUp-container"
>
<div
className="Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root Bar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<h1
className="Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary Typography-alignCenter Title-root"
>
Sign Up
</h1>
<h1
className="Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Typography-alignCenter Subtitle-root"
>
to join the conversation
</h1>
</div>
</div>
<div
className="Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
className="Box-root Flex-root SubBar-root Flex-flex Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Flex-flex"
>
<span>
Already have an account? 
@@ -1762,20 +1762,20 @@ exports[`renders sign up form 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -1796,16 +1796,16 @@ exports[`renders sign up form 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -1825,16 +1825,16 @@ exports[`renders sign up form 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -1894,7 +1894,7 @@ exports[`renders sign up form 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -1908,20 +1908,20 @@ exports[`shows error when submitting empty form 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -1955,16 +1955,16 @@ exports[`shows error when submitting empty form 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -1997,16 +1997,16 @@ exports[`shows error when submitting empty form 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -2079,7 +2079,7 @@ exports[`shows error when submitting empty form 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -2091,25 +2091,27 @@ exports[`shows server error 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="CallOut-root CallOut-colorError CallOut-fullWidth"
>
Server Error
<div>
Server Error
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -2130,16 +2132,16 @@ exports[`shows server error 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -2159,16 +2161,16 @@ exports[`shows server error 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -2228,7 +2230,7 @@ exports[`shows server error 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
@@ -2240,20 +2242,20 @@ exports[`submits form successfully 1`] = `
data-testid="signUp-main"
>
<div
className="HorizontalGutter-root HorizontalGutter-oneAndAHalf"
className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
>
<form
autoComplete="off"
onSubmit={[Function]}
>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="email"
>
Email Address
@@ -2274,16 +2276,16 @@ exports[`submits form successfully 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="username"
>
Username
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
You may use “_” and “.” Spaces not permitted.
</p>
@@ -2303,16 +2305,16 @@ exports[`submits form successfully 1`] = `
</div>
</div>
<div
className="HorizontalGutter-root FormField-root HorizontalGutter-half"
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
>
<label
className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
htmlFor="password"
>
Password
</label>
<p
className="Typography-root Typography-detail Typography-colorTextSecondary"
className="Box-root Typography-root Typography-detail Typography-colorTextSecondary"
>
Must be at least 8 characters
</p>
@@ -2372,7 +2374,7 @@ exports[`submits form successfully 1`] = `
</div>
</form>
<div
className="HorizontalGutter-root HorizontalGutter-full"
className="Box-root HorizontalGutter-root HorizontalGutter-full"
/>
</div>
</div>
src/core/client/framework/lib/relay/createFetchContainer.tsx
+2
View File
@@ -14,6 +14,8 @@ import { CoralContext, withContext } from "../bootstrap";
* injects a property with the name specified in `propName`
* and the signature (input: I) => Promise<R>. Calling
* this will start a one off query.
*
* @deprecated use `createFetch` instead
*/
function createFetchContainer<T extends string, V, R>(
propName: T,
src/core/client/framework/lib/relay/createMutationContainer.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ import { CoralContext, withContext } from "../bootstrap";
* this will call the specified `commit` callback with
* the Relay `environment` provided by the context.
*
* @deprecated
* @deprecated use `createMutation` instead
*/
function createMutationContainer<T extends string, I, R>(
propName: T,
src/core/client/framework/lib/relay/fetch.tsx
+2
View File
@@ -79,6 +79,8 @@ export function useFetch<V, R>(
/**
* withFetch creates a HOC that injects the fetch as
* a property.
*
* @deprecated use `useFetch` instead
*/
export function withFetch<N extends string, V, R>(
fetch: Fetch<N, V, R>
src/core/client/framework/lib/relay/mutation.tsx
+2
View File
@@ -81,6 +81,8 @@ export function useMutation<I, R>(
/**
* withMutation creates a HOC that injects the mutation as
* a property.
*
* @deprecated use `useMutation` instead
*/
export function withMutation<N extends string, I, R>(
mutation: Mutation<N, I, R>
src/core/client/framework/lib/relay/useRefetch.ts
+4 -1
View File
@@ -4,6 +4,9 @@ import { Variables } from "relay-runtime";
import { useEffectWhenChanged } from "coral-framework/hooks";
type RefetchFunction = () => void;
type IsRefetching = boolean;
/**
* useRefetch is a react hook that returns a `refetch` callback
* and a `isRefetching` boolean. Any change to the variables
@@ -12,7 +15,7 @@ import { useEffectWhenChanged } from "coral-framework/hooks";
export default function useRefetch<V = Variables>(
relay: RelayPaginationProp,
variables: V = {} as any
): [() => void, boolean] {
): [RefetchFunction, IsRefetching] {
const [manualRefetchCount, setManualRefetchCount] = useState(0);
const [refetching, setRefetching] = useState(false);
useEffectWhenChanged(() => {
src/core/client/framework/lib/relay/withLocalStateContainer.tsx
+2
View File
@@ -25,6 +25,8 @@ interface Props {
* that has been added using Client-Side Schema Extensions.
* The `fragmentSpec` must be a `Fragment` on the `LOCAL_TYPE` which
* must have the `LOCAL_ID`.
*
* @deprecated use `useLocal` instead.
*/
function withLocalStateContainer(
fragmentSpec: GraphQLTaggedNode
src/core/client/framework/testHelpers/byText.ts
+3
View File
@@ -25,6 +25,9 @@ const matcher = (pattern: TextMatchPattern, options?: TextMatchOptions) => (
if (typeof c === "string" && matchText(pattern, c, options)) {
return true;
}
if (typeof c === "number" && matchText(pattern, c.toString(), options)) {
return true;
}
}
return false;
};
src/core/client/framework/testHelpers/denormalize.ts
+15 -1
View File
@@ -1,4 +1,10 @@
import { GQLComment, GQLCommentEdge, GQLStory } from "coral-framework/schema";
import {
GQLComment,
GQLCommentEdge,
GQLStory,
GQLTAG,
GQLTag,
} from "coral-framework/schema";
import createFixture, { Fixture } from "./createFixture";
@@ -52,11 +58,19 @@ export function denormalizeStory(story: Fixture<GQLStory>) {
endCursor: null,
hasNextPage: false,
};
const featuredCommentsCount = commentNodes.filter(
n => n.tags && n.tags.some((t: GQLTag) => t.code === GQLTAG.FEATURED)
).length;
return createFixture<GQLStory>({
...story,
comments: { edges: commentNodes, pageInfo: commentsPageInfo },
commentCounts: {
...story.commentCounts,
totalVisible: commentNodes.length,
tags: {
...(story.commentCounts && story.commentCounts.tags),
FEATURED: featuredCommentsCount,
},
},
});
}
src/core/client/framework/testHelpers/index.ts
+4
View File
@@ -41,3 +41,7 @@ export {
TransitionControlData,
default as TransitionControl,
} from "./TransitionControl";
export {
default as overwriteQueryResolver,
createQueryResolverOverwrite,
} from "./overwriteQueryResolver";
src/core/client/framework/testHelpers/overwriteQueryResolver.ts
+116
View File
@@ -0,0 +1,116 @@
import createQueryResolverStub, {
QueryResolverCallback,
} from "./createQueryResolverStub";
import { Resolver, Resolvers, TestResolvers } from "./createTestRenderer";
type ValueOrCallbackRecursive<T> = {
[P in keyof T]?: ValueOrCallbackRecursive<T[P]> | (() => void)
};
type ResolverResult<T extends Resolver<any, any>> = T extends Resolver<
any,
infer R
>
? R
: never;
type OverwriteQueryResolverTemplate<T extends Resolvers = any> = {
[P in keyof Required<T>["Query"]]: ValueOrCallbackRecursive<
ResolverResult<Required<T>["Query"][P]>
>
};
/**
* overwriteRecursive will loop over the original resolver object
* and creates a resolver function of each of its field. The returned
* value of the resolvers will bet the value returned by the overwrite
* or if undefined, the original value.
*
* @param original original resolver object
* @param overwrite overwrite resolver object or value
*/
function overwriteRecursive(original: any, overwrite: any) {
let ret = original;
Object.keys(overwrite).forEach(k => {
ret = {
...original,
[k]: (...args: any[]) => {
// Only resolve original resolver when needed.
const resolve = () =>
typeof original[k] === "function"
? original[k](...args)
: original[k];
// There is an overwrite defined!
if (overwrite[k]) {
// It's a resolver function, we reached a leaf.
if (typeof overwrite[k] === "function") {
// Resolve overwrite resolver and return it's value
// or if undefined the original resolved value.
const result = (overwrite as any)[k](...args);
return result !== undefined ? result : resolve();
}
// The overwrite is an Object, so we will recurse into it,
// until we find a leaf.
if (overwrite[k] instanceof Object && !Array.isArray(overwrite[k])) {
return overwriteRecursive(resolve(), overwrite[k]);
}
// The overwrite is a fixed value, we use that.
return overwrite[k];
}
// No overwrite defined, just resolve and return.
return resolve();
},
};
});
return ret;
}
/**
* `createQueryResolverOverwrite` is like `createQueryResolverStub`
* but allows you to return `void` which would then fallback to the original resolver.
*
* Given a `ResolverType` from the Schema it'll provide types as well!.
* @param callback resolver callback
*/
export function createQueryResolverOverwrite<T extends Resolver<any, any>>(
callback: QueryResolverCallback<Resolver<any, ResolverResult<T> | void>>
) {
return createQueryResolverStub(callback);
}
/**
* overwriteQueryResolver allows you to conveniently overwrite the Query resolvers,
* even if you just want to overwrite a deeply nested field.
*
* When your overwrite resolver returns no value, it will fallback to the
* original resolver.
*
* Example usage:
* ```ts
* {
* resolver: overwriteQueryResolver<GQLResolver>(params.resolvers || {}, {
* story: {
* comments: createQueryResolverOverwrite<StoryToCommentsResolver>(
* ({ variables }) => {
* if (variables.tag === "FEATURED") {
* return storyWithNoComments.comments;
* }
* return;
* }
* ),
* },
* }),
* }
* ```
*/
export default function overwriteQueryResolver<T extends Resolvers<any, any>>(
original: TestResolvers<any>,
overwriteQuery: OverwriteQueryResolverTemplate<T>
): TestResolvers<any> {
return {
...original,
Query: overwriteRecursive(original.Query || {}, overwriteQuery),
};
}
src/core/client/stream/App/TabBar.tsx
+2 -6
View File
@@ -8,7 +8,6 @@ type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
export interface Props {
activeTab: TabValue;
onTabClick: (tab: TabValue) => void;
commentCount: number;
showProfileTab: boolean;
showConfigureTab: boolean;
}
@@ -17,11 +16,8 @@ const AppTabBar: FunctionComponent<Props> = props => {
return (
<TabBar activeTab={props.activeTab} onTabClick={props.onTabClick}>
<Tab tabID="COMMENTS">
<Localized
id="general-tabBar-commentsTab"
$commentCount={props.commentCount}
>
<span>{"{$commentCount} Comments"}</span>
<Localized id="general-tabBar-commentsTab">
<span>Comments</span>
</Localized>
</Tab>
{props.showProfileTab && (
src/core/client/stream/App/TabBarContainer.tsx
-12
View File
@@ -7,7 +7,6 @@ import {
withLocalStateContainer,
} from "coral-framework/lib/relay";
import { TabBarContainer_story as StoryData } from "coral-stream/__generated__/TabBarContainer_story.graphql";
import { TabBarContainer_viewer as ViewerData } from "coral-stream/__generated__/TabBarContainer_viewer.graphql";
import { TabBarContainerLocal as Local } from "coral-stream/__generated__/TabBarContainerLocal.graphql";
import { Ability, can } from "coral-stream/permissions";
@@ -20,7 +19,6 @@ import {
import TabBar from "./TabBar";
interface Props {
story: StoryData | null;
viewer: ViewerData | null;
local: Local;
setActiveTab: SetActiveTabMutation;
@@ -34,14 +32,11 @@ export class TabBarContainer extends Component<Props> {
public render() {
const {
local: { loggedIn, activeTab },
story,
} = this.props;
const commentCount = (story && story.commentCounts.totalVisible) || -1;
return (
<TabBar
activeTab={activeTab}
commentCount={commentCount}
showProfileTab={loggedIn}
showConfigureTab={
!!this.props.viewer &&
@@ -68,13 +63,6 @@ const enhanced = withSetActiveTabMutation(
role
}
`,
story: graphql`
fragment TabBarContainer_story on Story {
commentCounts {
totalVisible
}
}
`,
})(TabBarContainer)
)
);
src/core/client/stream/App/TabBarQuery.tsx
+2 -10
View File
@@ -20,13 +20,10 @@ class TabBarQuery extends Component<Props> {
return (
<QueryRenderer<QueryTypes>
query={graphql`
query TabBarQuery($storyID: ID, $storyURL: String) {
query TabBarQuery {
viewer {
...TabBarContainer_viewer
}
story(id: $storyID, url: $storyURL) {
...TabBarContainer_story
}
}
`}
variables={{
@@ -38,12 +35,7 @@ class TabBarQuery extends Component<Props> {
return <div>{error.message}</div>;
}
return (
<TabBarContainer
viewer={(props && props.viewer) || null}
story={(props && props.story) || null}
/>
);
return <TabBarContainer viewer={(props && props.viewer) || null} />;
}}
/>
);
src/core/client/stream/App/__snapshots__/App.spec.tsx.snap
+1 -1
View File
@@ -13,7 +13,7 @@ exports[`renders correctly 1`] = `
data-testid="current-tab-pane"
tabID="COMMENTS"
>
<withContext(withLocalStateContainer(CommentsPaneContainer)) />
<CommentsPane />
</TabPane>
<TabPane
data-testid="current-tab-pane"
src/core/client/stream/common/Timestamp/Timestamp.tsx
+6 -1
View File
@@ -1,3 +1,4 @@
import cn from "classnames";
import React from "react";
import { FunctionComponent } from "react";
@@ -6,11 +7,15 @@ import { RelativeTime } from "coral-ui/components";
import styles from "./Timestamp.css";
export interface TimestampProps {
className?: string;
children: string;
}
const Timestamp: FunctionComponent<TimestampProps> = props => (
<RelativeTime className={styles.root} date={props.children} />
<RelativeTime
className={cn(styles.root, props.className)}
date={props.children}
/>
);
export default Timestamp;
src/core/client/stream/local/__snapshots__/initLocalState.spec.ts.snap
+3 -2
View File
@@ -16,12 +16,13 @@ exports[`init local state 1`] = `
\\"accessTokenExp\\": null,
\\"accessTokenJTI\\": null,
\\"loggedIn\\": false,
\\"defaultStreamOrderBy\\": \\"CREATED_AT_DESC\\",
\\"commentsOrderBy\\": \\"CREATED_AT_DESC\\",
\\"authPopup\\": {
\\"__ref\\": \\"client:root.local.authPopup\\"
},
\\"activeTab\\": \\"COMMENTS\\",
\\"profileTab\\": \\"MY_COMMENTS\\"
\\"profileTab\\": \\"MY_COMMENTS\\",
\\"commentsTab\\": \\"ALL_COMMENTS\\"
},
\\"client:root.local.authPopup\\": {
\\"__id\\": \\"client:root.local.authPopup\\",
src/core/client/stream/local/initLocalState.ts
+2 -4
View File
@@ -40,7 +40,7 @@ export default async function initLocalState(
localRecord.setValue(query.commentID, "commentID");
}
// Set sort
localRecord.setValue("CREATED_AT_DESC", "defaultStreamOrderBy");
localRecord.setValue("CREATED_AT_DESC", "commentsOrderBy");
// Create authPopup Record
const authPopupRecord = createAndRetain(
@@ -57,8 +57,6 @@ export default async function initLocalState(
// Set active tabs
localRecord.setValue("COMMENTS", "activeTab");
localRecord.setValue("MY_COMMENTS", "profileTab");
// Set sort
localRecord.setValue("CREATED_AT_DESC", "defaultStreamOrderBy");
localRecord.setValue("ALL_COMMENTS", "commentsTab");
});
}
src/core/client/stream/local/local.graphql
+7 -2
View File
@@ -14,6 +14,11 @@ enum PROFILE_TAB {
SETTINGS
}
enum COMMENTS_TAB {
ALL_COMMENTS
FEATURED_COMMENTS
}
enum COMMENT_VIEWER_ACTION {
EDIT
APPROVE
@@ -47,9 +52,9 @@ type Local {
storyID: String
storyURL: String
commentID: String
defaultStreamOrderBy: COMMENT_SORT!
commentsOrderBy: COMMENT_SORT!
profileTab: PROFILE_TAB!
bla: [String]
commentsTab: COMMENTS_TAB!
}
extend type Query {
src/core/client/stream/shared/htmlContent.css
+6
View File
@@ -23,4 +23,10 @@
content: none;
}
}
a {
color: var(--palette-primary-main);
&:hover {
color: var(--palette-primary-dark);
}
}
}
src/core/client/stream/tabs/Comments/Comment/Comment.tsx
+4 -4
View File
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
import HTMLContent from "coral-stream/common/HTMLContent";
import Timestamp from "coral-stream/common/Timestamp";
import { Flex, HorizontalGutter, Tag } from "coral-ui/components";
import { Flex, HorizontalGutter } from "coral-ui/components";
import EditedMarker from "./EditedMarker";
import InReplyTo from "./InReplyTo";
@@ -21,7 +21,7 @@ export interface CommentProps {
showEditedMarker?: boolean;
highlight?: boolean;
parentAuthorName?: string | null;
tags?: ReadonlyArray<string>;
userTags?: React.ReactNode;
}
const Comment: FunctionComponent<CommentProps> = props => {
@@ -34,7 +34,7 @@ const Comment: FunctionComponent<CommentProps> = props => {
<TopBarLeft>
<Flex direction="row" alignItems="center" itemGutter="half">
{props.username && props.username}
{props.tags && props.tags.map((t, i) => <Tag key={i}>{t}</Tag>)}
{props.userTags}
</Flex>
<Flex direction="row" alignItems="baseline" itemGutter>
<Timestamp>{props.createdAt}</Timestamp>
@@ -49,7 +49,7 @@ const Comment: FunctionComponent<CommentProps> = props => {
</div>
)}
<HorizontalGutter>
<HorizontalGutter spacing={1}>
<HTMLContent>{props.body || ""}</HTMLContent>
{props.footer}
</HorizontalGutter>
src/core/client/stream/tabs/Comments/Comment/CommentContainer.spec.tsx
-11
View File
@@ -130,14 +130,3 @@ it("renders disabled reply when commenting has been disabled", () => {
renderer.render(<CommentContainerN {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
it("renders staff badge", () => {
const props = createDefaultProps({
comment: {
tags: [{ name: "Staff" }],
},
});
const renderer = createRenderer();
renderer.render(<CommentContainerN {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
src/core/client/stream/tabs/Comments/Comment/CommentContainer.tsx
+32 -10
View File
@@ -5,7 +5,7 @@ import { graphql } from "react-relay";
import { isBeforeDate } from "coral-common/utils";
import { getURLWithCommentID, roleIsAtLeast } from "coral-framework/helpers";
import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
import { GQLUSER_ROLE, GQLUSER_STATUS } from "coral-framework/schema";
import { GQLTAG, GQLUSER_ROLE, GQLUSER_STATUS } from "coral-framework/schema";
import { PropTypesOf } from "coral-framework/types";
import { CommentContainer_comment as CommentData } from "coral-stream/__generated__/CommentContainer_comment.graphql";
import { CommentContainer_settings as SettingsData } from "coral-stream/__generated__/CommentContainer_settings.graphql";
@@ -17,7 +17,7 @@ import {
withSetCommentIDMutation,
withShowAuthPopupMutation,
} from "coral-stream/mutations";
import { Button, Flex, HorizontalGutter } from "coral-ui/components";
import { Button, Flex, HorizontalGutter, Tag } from "coral-ui/components";
import { isCommentVisible } from "../helpers";
import ButtonsBar from "./ButtonsBar";
@@ -33,6 +33,7 @@ import ReplyCommentFormContainer from "./ReplyCommentForm";
import ReportButtonContainer from "./ReportButton";
import ShowConversationLink from "./ShowConversationLink";
import { UsernameWithPopoverContainer } from "./Username";
import UserTagsContainer from "./UserTagsContainer";
interface Props {
viewer: ViewerData | null;
@@ -157,6 +158,20 @@ export class CommentContainer extends Component<Props, State> {
viewer,
} = this.props;
const { showReplyDialog, showEditDialog, editable } = this.state;
const hasFeaturedTag = Boolean(
comment.tags.find(t => t.code === GQLTAG.FEATURED)
);
const commentTags = (
<>
{hasFeaturedTag && (
<Tag color="primary" variant="pill">
<Localized id="comments-featuredTag">
<span>Featured</span>
</Localized>
</Tag>
)}
</>
);
const banned = Boolean(
this.props.viewer &&
this.props.viewer.status.current.includes(GQLUSER_STATUS.BANNED)
@@ -204,15 +219,18 @@ export class CommentContainer extends Component<Props, State> {
}
username={
comment.author && (
<UsernameWithPopoverContainer
viewer={viewer}
user={comment.author}
/>
<>
<UsernameWithPopoverContainer
viewer={viewer}
user={comment.author}
/>
<UserTagsContainer comment={comment} />
</>
)
}
tags={comment.tags.map(t => t.name)}
topBarRight={
<Flex itemGutter>
<Flex alignItems="center" itemGutter>
{commentTags}
{editable && (
<Localized id="comments-commentContainer-editButton">
<Button
@@ -224,7 +242,9 @@ export class CommentContainer extends Component<Props, State> {
</Button>
</Localized>
)}
{showCaret && <CaretContainer comment={comment} />}
{showCaret && (
<CaretContainer comment={comment} story={story} />
)}
</Flex>
}
footer={
@@ -315,6 +335,7 @@ const enhanced = withSetCommentIDMutation(
fragment CommentContainer_story on Story {
url
isClosed
...CaretContainer_story
...ReplyCommentFormContainer_story
...PermalinkButtonContainer_story
...EditCommentFormContainer_story
@@ -341,7 +362,7 @@ const enhanced = withSetCommentIDMutation(
editableUntil
}
tags {
name
code
}
pending
lastViewerAction
@@ -351,6 +372,7 @@ const enhanced = withSetCommentIDMutation(
...ReportButtonContainer_comment
...CaretContainer_comment
...RejectedTombstoneContainer_comment
...UserTagsContainer_comment
}
`,
settings: graphql`
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CaretContainer.tsx
+10 -2
View File
@@ -3,7 +3,8 @@ import React, { FunctionComponent } from "react";
import { graphql } from "react-relay";
import { withFragmentContainer } from "coral-framework/lib/relay";
import { CaretContainer_comment as CommentData } from "coral-stream/__generated__/CaretContainer_comment.graphql";
import { CaretContainer_comment } from "coral-stream/__generated__/CaretContainer_comment.graphql";
import { CaretContainer_story } from "coral-stream/__generated__/CaretContainer_story.graphql";
import { Button, ClickOutside, Icon, Popover } from "coral-ui/components";
import ModerationDropdownContainer from "./ModerationDropdownContainer";
@@ -11,7 +12,8 @@ import ModerationDropdownContainer from "./ModerationDropdownContainer";
import styles from "./CaretContainer.css";
interface Props {
comment: CommentData;
comment: CaretContainer_comment;
story: CaretContainer_story;
}
const CaretContainer: FunctionComponent<Props> = props => {
@@ -29,6 +31,7 @@ const CaretContainer: FunctionComponent<Props> = props => {
<ClickOutside onClickOutside={toggleVisibility}>
<ModerationDropdownContainer
comment={props.comment}
story={props.story}
onDismiss={toggleVisibility}
/>
</ClickOutside>
@@ -64,6 +67,11 @@ const enhanced = withFragmentContainer<Props>({
...ModerationDropdownContainer_comment
}
`,
story: graphql`
fragment CaretContainer_story on Story {
...ModerationDropdownContainer_story
}
`,
})(CaretContainer);
export default enhanced;
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/FeatureCommentMutation.ts
+75
View File
@@ -0,0 +1,75 @@
import { graphql } from "react-relay";
import { Environment, RecordSourceSelectorProxy } from "relay-runtime";
import { CoralContext } from "coral-framework/lib/bootstrap";
import {
commitMutationPromiseNormalized,
createMutation,
MutationInput,
} from "coral-framework/lib/relay";
import { GQLCOMMENT_STATUS, GQLTAG } from "coral-framework/schema";
import { FeatureCommentMutation as MutationTypes } from "coral-stream/__generated__/FeatureCommentMutation.graphql";
let clientMutationId = 0;
function incrementCount(store: RecordSourceSelectorProxy, storyID: string) {
const storyRecord = store.get(storyID);
if (!storyRecord) {
return;
}
const commentCountsRecord = storyRecord.getLinkedRecord("commentCounts");
if (!commentCountsRecord) {
return;
}
const tagsRecord = commentCountsRecord.getLinkedRecord("tags");
if (tagsRecord) {
tagsRecord.setValue(tagsRecord.getValue("FEATURED") + 1, "FEATURED");
}
}
const FeatureCommentMutation = createMutation(
"featureComment",
(
environment: Environment,
input: MutationInput<MutationTypes> & { storyID: string },
{ uuidGenerator }: CoralContext
) =>
commitMutationPromiseNormalized<MutationTypes>(environment, {
mutation: graphql`
mutation FeatureCommentMutation($input: FeatureCommentInput!) {
featureComment(input: $input) {
comment {
tags {
code
}
status
}
clientMutationId
}
}
`,
optimisticUpdater: store => {
const comment = store.get(input.commentID)!;
const tags = comment.getLinkedRecords("tags");
if (tags) {
const newTag = store.create(uuidGenerator(), "Tag");
newTag.setValue(GQLTAG.FEATURED, "code");
comment.setLinkedRecords(tags.concat(newTag), "tags");
comment.setValue(GQLCOMMENT_STATUS.APPROVED, "status");
}
incrementCount(store, input.storyID);
},
updater: store => {
incrementCount(store, input.storyID);
},
variables: {
input: {
commentID: input.commentID,
commentRevisionID: input.commentRevisionID,
clientMutationId: (clientMutationId++).toString(),
},
},
})
);
export default FeatureCommentMutation;
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.css
+4
View File
@@ -6,3 +6,7 @@
color: var(--palette-error-dark);
font-weight: var(--font-weight-bold);
}
.featured {
color: var(--palette-primary-dark);
font-weight: var(--font-weight-bold);
}
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx
+77 -7
View File
@@ -3,7 +3,8 @@ import React, { FunctionComponent, useCallback } from "react";
import { graphql } from "react-relay";
import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
import { ModerationDropdownContainer_comment as CommentData } from "coral-stream/__generated__/ModerationDropdownContainer_comment.graphql";
import { ModerationDropdownContainer_comment } from "coral-stream/__generated__/ModerationDropdownContainer_comment.graphql";
import { ModerationDropdownContainer_story } from "coral-stream/__generated__/ModerationDropdownContainer_story.graphql";
import {
Dropdown,
DropdownButton,
@@ -12,19 +13,26 @@ import {
} from "coral-ui/components";
import ApproveCommentMutation from "./ApproveCommentMutation";
import styles from "./ModerationDropdownContainer.css";
import FeatureCommentMutation from "./FeatureCommentMutation";
import RejectCommentMutation from "./RejectCommentMutation";
import UnfeatureCommentMutation from "./UnfeatureCommentMutation";
import styles from "./ModerationDropdownContainer.css";
interface Props {
comment: CommentData;
comment: ModerationDropdownContainer_comment;
story: ModerationDropdownContainer_story;
onDismiss: () => void;
}
const ModerationDropdownContainer: FunctionComponent<Props> = ({
comment,
story,
onDismiss,
}) => {
const approve = useMutation(ApproveCommentMutation);
const feature = useMutation(FeatureCommentMutation);
const unfeature = useMutation(UnfeatureCommentMutation);
const reject = useMutation(RejectCommentMutation);
const onApprove = useCallback(() => {
@@ -35,16 +43,60 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
reject({ commentID: comment.id, commentRevisionID: comment.revision.id }),
[approve, comment]
);
const onFeature = useCallback(() => {
feature({
storyID: story.id,
commentID: comment.id,
commentRevisionID: comment.revision.id,
});
onDismiss();
}, [feature, comment]);
const onUnfeature = useCallback(() => {
unfeature({
commentID: comment.id,
storyID: story.id,
});
onDismiss();
}, [unfeature, comment]);
const approved = comment.status === "APPROVED";
const rejected = comment.status === "REJECTED";
const featured = comment.tags.some(t => t.code === "FEATURED");
return (
<Dropdown>
{featured ? (
<Localized id="comments-moderationDropdown-unfeature">
<DropdownButton
icon={
<Icon className={styles.featured} size="md">
star
</Icon>
}
className={styles.featured}
onClick={onUnfeature}
>
Un-Feature
</DropdownButton>
</Localized>
) : (
<Localized id="comments-moderationDropdown-feature">
<DropdownButton
icon={<Icon size="md">star_border</Icon>}
onClick={onFeature}
>
Feature
</DropdownButton>
</Localized>
)}
{approved ? (
<Localized id="comments-moderationDropdown-approved">
<DropdownButton
icon={<Icon className={styles.approved}>check</Icon>}
icon={
<Icon className={styles.approved} size="md">
check
</Icon>
}
className={styles.approved}
disabled
>
@@ -53,7 +105,10 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
</Localized>
) : (
<Localized id="comments-moderationDropdown-approve">
<DropdownButton icon={<Icon>check</Icon>} onClick={onApprove}>
<DropdownButton
icon={<Icon size="md">check</Icon>}
onClick={onApprove}
>
Approve
</DropdownButton>
</Localized>
@@ -61,7 +116,11 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
{rejected ? (
<Localized id="comments-moderationDropdown-rejected">
<DropdownButton
icon={<Icon className={styles.rejected}>close</Icon>}
icon={
<Icon className={styles.rejected} size="md">
close
</Icon>
}
className={styles.rejected}
disabled
>
@@ -70,7 +129,10 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
</Localized>
) : (
<Localized id="comments-moderationDropdown-reject">
<DropdownButton icon={<Icon>close</Icon>} onClick={onReject}>
<DropdownButton
icon={<Icon size="md">close</Icon>}
onClick={onReject}
>
Reject
</DropdownButton>
</Localized>
@@ -97,6 +159,14 @@ const enhanced = withFragmentContainer<Props>({
id
}
status
tags {
code
}
}
`,
story: graphql`
fragment ModerationDropdownContainer_story on Story {
id
}
`,
})(ModerationDropdownContainer);
src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/UnfeatureCommentMutation.ts
+69
View File
@@ -0,0 +1,69 @@
import { graphql } from "react-relay";
import { Environment, RecordSourceSelectorProxy } from "relay-runtime";
import {
commitMutationPromiseNormalized,
createMutation,
MutationInput,
} from "coral-framework/lib/relay";
import { GQLTAG } from "coral-framework/schema";
import { UnfeatureCommentMutation as MutationTypes } from "coral-stream/__generated__/UnfeatureCommentMutation.graphql";
let clientMutationId = 0;
function decrementCount(store: RecordSourceSelectorProxy, storyID: string) {
const storyRecord = store.get(storyID);
if (!storyRecord) {
return;
}
const commentCountsRecord = storyRecord.getLinkedRecord("commentCounts");
if (!commentCountsRecord) {
return;
}
const tagsRecord = commentCountsRecord.getLinkedRecord("tags");
if (tagsRecord) {
tagsRecord.setValue(tagsRecord.getValue("FEATURED") - 1, "FEATURED");
}
}
const UnfeatureCommentMutation = createMutation(
"unfeatureComment",
(
environment: Environment,
input: MutationInput<MutationTypes> & { storyID: string }
) =>
commitMutationPromiseNormalized<MutationTypes>(environment, {
mutation: graphql`
mutation UnfeatureCommentMutation($input: UnfeatureCommentInput!) {
unfeatureComment(input: $input) {
comment {
tags {
code
}
}
clientMutationId
}
}
`,
optimisticUpdater: store => {
const comment = store.get(input.commentID)!;
const tags = comment.getLinkedRecords("tags")!;
comment.setLinkedRecords(
tags.filter(t => t!.getValue("code") === GQLTAG.FEATURED),
"tags"
);
decrementCount(store, input.storyID);
},
updater: store => {
decrementCount(store, input.storyID);
},
variables: {
input: {
commentID: input.commentID,
clientMutationId: (clientMutationId++).toString(),
},
},
})
);
export default UnfeatureCommentMutation;
src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/CreateCommentReplyMutation.ts
+2 -2
View File
@@ -123,7 +123,7 @@ const mutation = graphql`
edge {
cursor
node {
...StreamContainer_comment @relay(mask: false)
...AllCommentsTabContainer_comment @relay(mask: false)
status
}
}
@@ -200,7 +200,7 @@ function commit(
},
},
tags: roleIsAtLeast(viewer.role, GQLUSER_ROLE.STAFF)
? [{ name: "Staff" }]
? [{ code: "STAFF" }]
: [],
viewerActionPresence: {
reaction: false,
src/core/client/stream/tabs/Comments/Comment/RootParent.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import React, { FunctionComponent } from "react";
import Timestamp from "coral-stream/common/Timestamp";
import { Flex, Tag } from "coral-ui/components";
import { Flex } from "coral-ui/components";
import TopBarLeft from "./TopBarLeft";
import Username from "./Username";
@@ -10,7 +10,7 @@ export interface RootParentProps {
id?: string;
username: string | null;
createdAt: string;
tags?: ReadonlyArray<string>;
tags: React.ReactNode;
}
const RootParent: FunctionComponent<RootParentProps> = props => {
@@ -19,7 +19,7 @@ const RootParent: FunctionComponent<RootParentProps> = props => {
<TopBarLeft>
<Flex direction="row" alignItems="center" itemGutter="half">
<div>{props.username && <Username>{props.username}</Username>}</div>
{props.tags && props.tags.map((t, i) => <Tag key={i}>{t}</Tag>)}
{props.tags}
</Flex>
<Flex direction="row" alignItems="baseline" itemGutter>
<Timestamp>{props.createdAt}</Timestamp>
src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.css
-1
View File
@@ -1,5 +1,4 @@
.root {
width: 280px;
max-width: 80vw;
padding: var(--spacing-3);
}
src/core/client/stream/tabs/Comments/Comment/UserIgnorePopover/UserIgnorePopoverContainer.tsx
+17 -22
View File
@@ -3,12 +3,7 @@ import { graphql } from "react-relay";
import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
import { UserIgnorePopoverContainer_user as UserData } from "coral-stream/__generated__/UserIgnorePopoverContainer_user.graphql";
import {
Button,
Flex,
HorizontalGutter,
Typography,
} from "coral-ui/components";
import { Box, Button, Flex, Typography } from "coral-ui/components";
import IgnoreUserMutation from "./IgnoreUserMutation";
@@ -30,21 +25,21 @@ export const UserIgnorePopoverContainer: FunctionComponent<Props> = ({
onDismiss();
}, [user.id, ignoreUser]);
return (
<HorizontalGutter spacing={3} className={styles.root}>
<HorizontalGutter spacing={2}>
<Localized
id="comments-userIgnorePopover-ignoreUser"
$username={user.username}
>
<Typography variant="heading3">Ignore {user.username}?</Typography>
</Localized>
<Localized id="comments-userIgnorePopover-description">
<Typography variant="detail">
When you ignore a commenter, all comments they wrote on the site
will be hidden from you. You can undo this later from My Profile.
</Typography>
</Localized>
</HorizontalGutter>
<Box className={styles.root} p={3}>
<Localized
id="comments-userIgnorePopover-ignoreUser"
$username={user.username}
>
<Typography variant="heading3" mb={2}>
Ignore {user.username}?
</Typography>
</Localized>
<Localized id="comments-userIgnorePopover-description">
<Typography variant="detail" mb={3}>
When you ignore a commenter, all comments they wrote on the site will
be hidden from you. You can undo this later from My Profile.
</Typography>
</Localized>
<Flex justifyContent="flex-end" itemGutter="half">
<Localized id="comments-userIgnorePopover-cancel">
<Button variant="outlined" size="small" onClick={onDismiss}>
@@ -57,7 +52,7 @@ export const UserIgnorePopoverContainer: FunctionComponent<Props> = ({
</Button>
</Localized>
</Flex>
</HorizontalGutter>
</Box>
);
};
src/core/client/stream/tabs/Comments/Comment/UserTagsContainer.tsx
+37
View File
@@ -0,0 +1,37 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { graphql } from "react-relay";
import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
import { UserTagsContainer_comment as CommentData } from "coral-stream/__generated__/UserTagsContainer_comment.graphql";
import { Tag } from "coral-ui/components";
interface Props {
comment: CommentData;
}
const UserTagsContainer: FunctionComponent<Props> = props => {
const { comment } = props;
const staffTag = comment.tags.find(t => t.code === "STAFF");
return (
<>
{staffTag && (
<Localized id="comments-staffTag">
<Tag>Staff</Tag>
</Localized>
)}
</>
);
};
const enhanced = withFragmentContainer<Props>({
comment: graphql`
fragment UserTagsContainer_comment on Comment {
tags {
code
}
}
`,
})(UserTagsContainer);
export default enhanced;
src/core/client/stream/tabs/Comments/Comment/Username/Username.css
+1 -1
View File
@@ -1,5 +1,5 @@
.root {
line-height: 0;
line-height: 1;
}
.popover {
width: 232px;
src/core/client/stream/tabs/Comments/Comment/Username/Username.spec.tsx
-45
View File
@@ -1,45 +0,0 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { PropTypesOf } from "coral-framework/types";
import { UIContext, UIContextProps } from "coral-ui/components";
import Username from "./Username";
it("renders correctly on small screens", () => {
const props: PropTypesOf<typeof Username> = {
children: "Marvin",
};
const context: UIContextProps = {
mediaQueryValues: {
width: 320,
},
};
const testRenderer = TestRenderer.create(
<UIContext.Provider value={context}>
<Username {...props} />
</UIContext.Provider>
);
expect(testRenderer.toJSON()).toMatchSnapshot();
});
it("renders correctly on big screens", () => {
const props: PropTypesOf<typeof Username> = {
children: "Marvin",
};
const context: UIContextProps = {
mediaQueryValues: {
width: 1600,
},
};
const testRenderer = TestRenderer.create(
<UIContext.Provider value={context}>
<Username {...props} />
</UIContext.Provider>
);
expect(testRenderer.toJSON()).toMatchSnapshot();
});
src/core/client/stream/tabs/Comments/Comment/Username/Username.tsx
+4 -12
View File
@@ -1,7 +1,7 @@
import React from "react";
import { FunctionComponent } from "react";
import { MatchMedia, Typography } from "coral-ui/components";
import { Typography } from "coral-ui/components";
import styles from "./Username.css";
@@ -11,17 +11,9 @@ interface Props {
const Username: FunctionComponent<Props> = props => {
return (
<MatchMedia gtWidth="xs">
{matches => (
<Typography
variant={matches ? "heading2" : "heading3"}
className={styles.root}
container="span"
>
{props.children}
</Typography>
)}
</MatchMedia>
<Typography variant={"heading3"} className={styles.root} container="span">
{props.children}
</Typography>
);
};
src/core/client/stream/tabs/Comments/Comment/Username/__snapshots__/Username.spec.tsx.snap
-17
View File
@@ -1,17 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly on big screens 1`] = `
<span
className="Typography-root Typography-heading2 Typography-colorTextPrimary Username-root"
>
Marvin
</span>
`;
exports[`renders correctly on small screens 1`] = `
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
>
Marvin
</span>
`;
src/core/client/stream/tabs/Comments/Comment/__snapshots__/Comment.spec.tsx.snap
+3 -1
View File
@@ -32,7 +32,9 @@ exports[`renders username and body 1`] = `
topBarRight
</div>
</ForwardRef(forwardRef)>
<ForwardRef(forwardRef)>
<ForwardRef(forwardRef)
spacing={1}
>
<HTMLContent>
Woof
</HTMLContent>
src/core/client/stream/tabs/Comments/Comment/__snapshots__/CommentContainer.spec.tsx.snap
+255 -196
View File
@@ -87,22 +87,48 @@ exports[`hide reply button 1`] = `
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
tags={Array []}
topBarRight={
<ForwardRef(forwardRef)
alignItems="center"
itemGutter={true}
/>
>
<React.Fragment />
</ForwardRef(forwardRef)>
}
username={
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
}
}
}
viewer={null}
/>
viewer={null}
/>
<Relay(UserTagsContainer)
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
</React.Fragment>
}
/>
</ForwardRef(forwardRef)>
@@ -202,22 +228,48 @@ exports[`renders body only 1`] = `
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
tags={Array []}
topBarRight={
<ForwardRef(forwardRef)
alignItems="center"
itemGutter={true}
/>
>
<React.Fragment />
</ForwardRef(forwardRef)>
}
username={
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": null,
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": null,
}
}
}
viewer={null}
/>
viewer={null}
/>
<Relay(UserTagsContainer)
comment={
Object {
"author": Object {
"id": "author-id",
"username": null,
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
</React.Fragment>
}
/>
</ForwardRef(forwardRef)>
@@ -317,22 +369,48 @@ exports[`renders disabled reply when commenting has been disabled 1`] = `
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
tags={Array []}
topBarRight={
<ForwardRef(forwardRef)
alignItems="center"
itemGutter={true}
/>
>
<React.Fragment />
</ForwardRef(forwardRef)>
}
username={
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
}
}
}
viewer={null}
/>
viewer={null}
/>
<Relay(UserTagsContainer)
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
</React.Fragment>
}
/>
</ForwardRef(forwardRef)>
@@ -432,22 +510,48 @@ exports[`renders disabled reply when story is closed 1`] = `
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
tags={Array []}
topBarRight={
<ForwardRef(forwardRef)
alignItems="center"
itemGutter={true}
/>
>
<React.Fragment />
</ForwardRef(forwardRef)>
}
username={
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
}
}
}
viewer={null}
/>
viewer={null}
/>
<Relay(UserTagsContainer)
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
</React.Fragment>
}
/>
</ForwardRef(forwardRef)>
@@ -555,149 +659,52 @@ exports[`renders in reply to 1`] = `
indentLevel={1}
parentAuthorName="ParentAuthor"
showEditedMarker={false}
tags={Array []}
topBarRight={
<ForwardRef(forwardRef)
alignItems="center"
itemGutter={true}
/>
>
<React.Fragment />
</ForwardRef(forwardRef)>
}
username={
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
}
}
viewer={null}
/>
}
/>
</ForwardRef(forwardRef)>
</div>
`;
exports[`renders staff badge 1`] = `
<div
data-testid="comment-comment-id"
>
<ForwardRef(forwardRef)>
<IndentedComment
blur={false}
body="Woof"
createdAt="1995-12-17T03:24:00.000Z"
footer={
<React.Fragment>
<ForwardRef(forwardRef)
justifyContent="space-between"
>
<ButtonsBar>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(Relay(ReactionButtonContainer)))))))
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [
Object {
"name": "Staff",
},
],
}
}
readOnly={false}
settings={
Object {
"disableCommenting": Object {
"enabled": false,
},
}
}
viewer={null}
/>
<ReplyButton
active={false}
disabled={false}
id="comments-commentContainer-replyButton-comment-id"
onClick={[Function]}
/>
<Relay(PermalinkButtonContainer)
commentID="comment-id"
story={
Object {
"isClosed": false,
"url": "http://localhost/story",
}
}
/>
</ButtonsBar>
<ButtonsBar>
<withContext(createMutationContainer(Relay(ReportButtonContainer)))
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [
Object {
"name": "Staff",
},
],
}
}
viewer={null}
/>
</ButtonsBar>
</ForwardRef(forwardRef)>
</React.Fragment>
}
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
tags={
Array [
"Staff",
]
}
topBarRight={
<ForwardRef(forwardRef)
itemGutter={true}
/>
}
username={
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
}
}
}
viewer={null}
/>
viewer={null}
/>
<Relay(UserTagsContainer)
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": Object {
"author": Object {
"username": "ParentAuthor",
},
},
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
</React.Fragment>
}
/>
</ForwardRef(forwardRef)>
@@ -797,22 +804,48 @@ exports[`renders username and body 1`] = `
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
tags={Array []}
topBarRight={
<ForwardRef(forwardRef)
alignItems="center"
itemGutter={true}
/>
>
<React.Fragment />
</ForwardRef(forwardRef)>
}
username={
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
}
}
}
viewer={null}
/>
viewer={null}
/>
<Relay(UserTagsContainer)
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
</React.Fragment>
}
/>
</ForwardRef(forwardRef)>
@@ -917,22 +950,48 @@ exports[`shows conversation link 1`] = `
indentLevel={1}
parentAuthorName={null}
showEditedMarker={false}
tags={Array []}
topBarRight={
<ForwardRef(forwardRef)
alignItems="center"
itemGutter={true}
/>
>
<React.Fragment />
</ForwardRef(forwardRef)>
}
username={
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
<React.Fragment>
<Relay(UsernameWithPopoverContainer)
user={
Object {
"id": "author-id",
"username": "Marvin",
}
}
}
viewer={null}
/>
viewer={null}
/>
<Relay(UserTagsContainer)
comment={
Object {
"author": Object {
"id": "author-id",
"username": "Marvin",
},
"body": "Woof",
"createdAt": "1995-12-17T03:24:00.000Z",
"editing": Object {
"editableUntil": "1995-12-17T03:24:30.000Z",
"edited": false,
},
"id": "comment-id",
"lastViewerAction": null,
"parent": null,
"pending": false,
"status": "NONE",
"tags": Array [],
}
}
/>
</React.Fragment>
}
/>
</ForwardRef(forwardRef)>
src/core/client/stream/tabs/Comments/Comment/__snapshots__/TopBarLeft.spec.tsx.snap
+2 -2
View File
@@ -2,7 +2,7 @@
exports[`renders correctly on big screens 1`] = `
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-alignFlexEnd Flex-directionRow"
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignFlexEnd Flex-directionRow gutter"
>
<div>
Hello World
@@ -12,7 +12,7 @@ exports[`renders correctly on big screens 1`] = `
exports[`renders correctly on small screens 1`] = `
<div
className="Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
>
<div>
Hello World
src/core/client/stream/tabs/Comments/Comment/index.ts
+1
View File
@@ -5,3 +5,4 @@ export { default as ButtonsBar } from "./ButtonsBar";
export { default as ShowConversationLink } from "./ShowConversationLink";
export { default as RootParent } from "./RootParent";
export { default as IndentedComment } from "./IndentedComment";
export { default as UserTagsContainer } from "./UserTagsContainer";
src/core/client/stream/tabs/Comments/CommentsPane.spec.tsx
-24
View File
@@ -1,24 +0,0 @@
import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { PropTypesOf } from "coral-framework/types";
import CommentsPane from "./CommentsPane";
it("renders stream", () => {
const props: PropTypesOf<typeof CommentsPane> = {
showPermalinkView: false,
};
const renderer = createRenderer();
renderer.render(<CommentsPane {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
it("renders permalink view", () => {
const props: PropTypesOf<typeof CommentsPane> = {
showPermalinkView: true,
};
const renderer = createRenderer();
renderer.render(<CommentsPane {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
src/core/client/stream/tabs/Comments/CommentsPane.tsx
+14 -6
View File
@@ -1,15 +1,23 @@
import * as React from "react";
import { FunctionComponent } from "react";
import { graphql, useLocal } from "coral-framework/lib/relay";
import { CommentsPaneLocal } from "coral-stream/__generated__/CommentsPaneLocal.graphql";
import PermalinkView from "./PermalinkView";
import Stream from "./Stream";
export interface CommentsPaneProps {
showPermalinkView: boolean;
}
const CommentsPane: FunctionComponent<CommentsPaneProps> = props => {
return props.showPermalinkView ? <PermalinkView /> : <Stream />;
const CommentsPane: FunctionComponent = () => {
const [local] = useLocal<CommentsPaneLocal>(graphql`
fragment CommentsPaneLocal on Local {
commentID
}
`);
const showPermalinkView = Boolean(local.commentID);
if (showPermalinkView) {
return <PermalinkView />;
}
return <Stream />;
};
export default CommentsPane;
src/core/client/stream/tabs/Comments/CommentsPaneContainer.tsx
-27
View File
@@ -1,27 +0,0 @@
import * as React from "react";
import { FunctionComponent } from "react";
import { graphql, withLocalStateContainer } from "coral-framework/lib/relay";
import { CommentsPaneContainerLocal as Local } from "coral-stream/__generated__/CommentsPaneContainerLocal.graphql";
import CommentsPane from "./CommentsPane";
interface Props {
local: Local;
}
const CommentsPaneContainer: FunctionComponent<Props> = ({
local: { commentID },
}) => {
return <CommentsPane showPermalinkView={!!commentID} />;
};
const enhanced = withLocalStateContainer(
graphql`
fragment CommentsPaneContainerLocal on Local {
commentID
}
`
)(CommentsPaneContainer);
export default enhanced;
src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.spec.tsx
-73
View File
@@ -1,73 +0,0 @@
import { noop } from "lodash";
import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { pureMerge } from "coral-common/utils";
import { removeFragmentRefs } from "coral-framework/testHelpers";
import { DeepPartial, PropTypesOf } from "coral-framework/types";
import ConversationThread from "./ConversationThread";
const ConversationThreadN = removeFragmentRefs(ConversationThread);
type Props = PropTypesOf<typeof ConversationThreadN>;
function createDefaultProps(add: DeepPartial<Props> = {}): Props {
return pureMerge(
{
className: "root",
viewer: {},
story: {},
settings: {},
comment: {},
disableLoadMore: false,
loadMore: noop,
remaining: 2,
parents: [],
rootParent: {
id: "root-parent",
createdAt: "1995-12-17T03:24:00.000Z",
username: "parentAuthor",
tags: [],
},
},
add
);
}
describe("with 2 remaining parent comments", () => {
it("renders correctly", () => {
const props = createDefaultProps();
const renderer = createRenderer();
renderer.render(<ConversationThreadN {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
it("renders staff badge", () => {
const props = createDefaultProps({
rootParent: {
tags: ["Staff"],
},
});
const renderer = createRenderer();
renderer.render(<ConversationThreadN {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
it("renders with disabled load more", () => {
const props = createDefaultProps({
disableLoadMore: true,
});
const renderer = createRenderer();
renderer.render(<ConversationThreadN {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
});
it("renders with no parent comments", () => {
const props = createDefaultProps({
remaining: 0,
rootParent: null,
});
const renderer = createRenderer();
renderer.render(<ConversationThreadN {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.tsx
-131
View File
@@ -1,131 +0,0 @@
import cn from "classnames";
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import { Button, Counter, Flex, HorizontalGutter } from "coral-ui/components";
import {
CommentContainer,
RootParent,
} from "coral-stream/tabs/Comments/Comment";
import LocalReplyListContainer from "coral-stream/tabs/Comments/ReplyList/LocalReplyListContainer";
import { Circle, Line } from "./Timeline";
import styles from "./ConversationThread.css";
export interface ConversationThreadProps {
className?: string;
viewer: PropTypesOf<typeof CommentContainer>["viewer"] &
(PropTypesOf<typeof LocalReplyListContainer>["viewer"] | null);
story: PropTypesOf<typeof CommentContainer>["story"] &
PropTypesOf<typeof LocalReplyListContainer>["story"];
settings: PropTypesOf<typeof CommentContainer>["settings"] &
PropTypesOf<typeof LocalReplyListContainer>["settings"];
comment: PropTypesOf<typeof CommentContainer>["comment"];
disableLoadMore: boolean;
loadMore: () => void;
remaining: number;
parents: Array<
{ id: string } & PropTypesOf<typeof CommentContainer>["comment"] &
PropTypesOf<typeof LocalReplyListContainer>["comment"]
>;
rootParent: {
id: string;
createdAt: string;
username: string | null;
tags: ReadonlyArray<string>;
} | null;
}
const ConversationThread: FunctionComponent<
ConversationThreadProps
> = props => {
const dataTestID = "comments-permalinkView-conversationThread";
if (props.remaining === 0 && props.parents.length === 0) {
return (
<div
className={cn(props.className, styles.root)}
data-testid={dataTestID}
>
<CommentContainer
comment={props.comment}
story={props.story}
settings={props.settings}
viewer={props.viewer}
highlight
/>
</div>
);
}
return (
<div className={cn(props.className, styles.root)} data-testid={dataTestID}>
<HorizontalGutter container={<Line dotted />}>
{props.rootParent && (
<Circle>
<RootParent
id={props.rootParent.id}
username={props.rootParent.username}
createdAt={props.rootParent.createdAt}
tags={props.rootParent.tags}
/>
</Circle>
)}
{props.remaining > 0 && (
<Circle hollow className={styles.loadMore}>
<Flex alignItems="center" itemGutter="half">
<Localized
id="comments-conversationThread-showMoreOfThisConversation"
$count={props.remaining}
>
<Button
className={styles.showMoreButton}
onClick={props.loadMore}
disabled={props.disableLoadMore}
variant="underlined"
>
Show more of this conversation
</Button>
</Localized>
{props.remaining > 1 && <Counter>{props.remaining}</Counter>}
</Flex>
</Circle>
)}
</HorizontalGutter>
<HorizontalGutter container={Line}>
{props.parents.map((parent, i) => (
<Circle key={parent.id} hollow={!!props.remaining || i > 0}>
<CommentContainer
comment={parent}
story={props.story}
viewer={props.viewer}
settings={props.settings}
localReply
/>
{props.viewer && (
<LocalReplyListContainer
story={props.story}
viewer={props.viewer}
settings={props.settings}
comment={parent}
indentLevel={1}
/>
)}
</Circle>
))}
<Circle end>
<CommentContainer
comment={props.comment}
story={props.story}
settings={props.settings}
viewer={props.viewer}
highlight
/>
</Circle>
</HorizontalGutter>
</div>
);
};
export default ConversationThread;
src/core/client/stream/tabs/Comments/PermalinkView/ConversationThread.css → src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.css
View File
src/core/client/stream/tabs/Comments/PermalinkView/ConversationThreadContainer.tsx
+95 -26
View File
@@ -1,3 +1,4 @@
import { Localized } from "fluent-react/compat";
import { Child as PymChild } from "pym.js";
import React from "react";
import { graphql, RelayPaginationProp } from "react-relay";
@@ -13,8 +14,17 @@ import {
SetCommentIDMutation,
withSetCommentIDMutation,
} from "coral-stream/mutations";
import {
CommentContainer,
RootParent,
UserTagsContainer,
} from "coral-stream/tabs/Comments/Comment";
import LocalReplyListContainer from "coral-stream/tabs/Comments/ReplyList/LocalReplyListContainer";
import { Button, Counter, Flex, HorizontalGutter } from "coral-ui/components";
import ConversationThread from "./ConversationThread";
import { Circle, Line } from "./Timeline";
import styles from "./ConversationThreadContainer.css";
interface ConversationThreadContainerProps {
comment: CommentData;
@@ -52,30 +62,91 @@ class ConversationThreadContainer extends React.Component<
public render() {
const { comment, story, viewer, settings } = this.props;
const parents = comment.parents.edges.map(edge => edge.node);
const remaining = comment.parentCount - comment.parents.edges.length;
const hasMore = this.props.relay.hasMore();
const rootParent = hasMore && comment && comment.rootParent;
const dataTestID = "comments-permalinkView-conversationThread";
if (remaining === 0 && parents.length === 0) {
return (
<div className={styles.root} data-testid={dataTestID}>
<CommentContainer
comment={comment}
story={story}
settings={settings}
viewer={viewer}
highlight
/>
</div>
);
}
return (
<ConversationThread
viewer={viewer}
story={story}
comment={comment}
settings={settings}
parents={comment.parents.edges.map(edge => edge.node)}
disableLoadMore={this.state.disableLoadMore}
loadMore={this.loadMore}
remaining={comment.parentCount - comment.parents.edges.length}
rootParent={
(hasMore &&
comment &&
comment.rootParent && {
id: comment.rootParent.id,
createdAt: comment.rootParent.createdAt,
username:
comment.rootParent.author && comment.rootParent.author.username,
tags: comment.rootParent.tags.map(t => t.name),
}) ||
null
}
/>
<div className={styles.root} data-testid={dataTestID}>
<HorizontalGutter container={<Line dotted />}>
{rootParent && (
<Circle>
<RootParent
id={rootParent.id}
username={rootParent.author && rootParent.author.username}
createdAt={rootParent.createdAt}
tags={<UserTagsContainer comment={rootParent} />}
/>
</Circle>
)}
{remaining > 0 && (
<Circle hollow className={styles.loadMore}>
<Flex alignItems="center" itemGutter="half">
<Localized
id="comments-conversationThread-showMoreOfThisConversation"
$count={remaining}
>
<Button
className={styles.showMoreButton}
onClick={this.loadMore}
disabled={this.state.disableLoadMore}
variant="underlined"
>
Show more of this conversation
</Button>
</Localized>
{remaining > 1 && <Counter color="dark">{remaining}</Counter>}
</Flex>
</Circle>
)}
</HorizontalGutter>
<HorizontalGutter container={Line}>
{parents.map((parent, i) => (
<Circle key={parent.id} hollow={!!remaining || i > 0}>
<CommentContainer
comment={parent}
story={story}
viewer={viewer}
settings={settings}
localReply
/>
{viewer && (
<LocalReplyListContainer
story={story}
viewer={viewer}
settings={settings}
comment={parent}
indentLevel={1}
/>
)}
</Circle>
))}
<Circle end>
<CommentContainer
comment={comment}
story={story}
settings={settings}
viewer={viewer}
highlight
/>
</Circle>
</HorizontalGutter>
</div>
);
}
}
@@ -123,9 +194,7 @@ const enhanced = withContext(ctx => ({
username
}
createdAt
tags {
name
}
...UserTagsContainer_comment
}
parentCount
parents(last: $count, before: $cursor)
src/core/client/stream/tabs/Comments/PermalinkView/PermalinkViewQuery.tsx
+31 -29
View File
@@ -51,36 +51,38 @@ export const render = ({
const PermalinkViewQuery: FunctionComponent<Props> = ({
local: { commentID, storyID, storyURL },
}) => (
<QueryRenderer<QueryTypes>
query={graphql`
query PermalinkViewQuery(
$commentID: ID!
$storyID: ID
$storyURL: String
) {
viewer {
...PermalinkViewContainer_viewer
}) => {
return (
<QueryRenderer<QueryTypes>
query={graphql`
query PermalinkViewQuery(
$commentID: ID!
$storyID: ID
$storyURL: String
) {
viewer {
...PermalinkViewContainer_viewer
}
story(id: $storyID, url: $storyURL) {
...PermalinkViewContainer_story
}
comment(id: $commentID) {
...PermalinkViewContainer_comment
}
settings {
...PermalinkViewContainer_settings
}
}
story(id: $storyID, url: $storyURL) {
...PermalinkViewContainer_story
}
comment(id: $commentID) {
...PermalinkViewContainer_comment
}
settings {
...PermalinkViewContainer_settings
}
}
`}
variables={{
commentID: commentID!,
storyID,
storyURL,
}}
render={render}
/>
);
`}
variables={{
commentID: commentID!,
storyID,
storyURL,
}}
render={render}
/>
);
};
const enhanced = withLocalStateContainer(
graphql`
src/core/client/stream/tabs/Comments/PermalinkView/__snapshots__/ConversationThread.spec.tsx.snap
-215
View File
@@ -1,215 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders with no parent comments 1`] = `
<div
className="root ConversationThread-root"
data-testid="comments-permalinkView-conversationThread"
>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={Object {}}
highlight={true}
settings={Object {}}
story={Object {}}
viewer={Object {}}
/>
</div>
`;
exports[`with 2 remaining parent comments renders correctly 1`] = `
<div
className="root ConversationThread-root"
data-testid="comments-permalinkView-conversationThread"
>
<ForwardRef(forwardRef)
container={
<Line
dotted={true}
/>
}
>
<Circle>
<RootParent
createdAt="1995-12-17T03:24:00.000Z"
id="root-parent"
tags={Array []}
username="parentAuthor"
/>
</Circle>
<Circle
className="ConversationThread-loadMore"
hollow={true}
>
<ForwardRef(forwardRef)
alignItems="center"
itemGutter="half"
>
<Localized
$count={2}
id="comments-conversationThread-showMoreOfThisConversation"
>
<ForwardRef(forwardRef)
className="ConversationThread-showMoreButton"
disabled={false}
onClick={[Function]}
variant="underlined"
>
Show more of this conversation
</ForwardRef(forwardRef)>
</Localized>
<withPropsOnChange(Counter)>
2
</withPropsOnChange(Counter)>
</ForwardRef(forwardRef)>
</Circle>
</ForwardRef(forwardRef)>
<ForwardRef(forwardRef)
container={[Function]}
>
<Circle
end={true}
>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={Object {}}
highlight={true}
settings={Object {}}
story={Object {}}
viewer={Object {}}
/>
</Circle>
</ForwardRef(forwardRef)>
</div>
`;
exports[`with 2 remaining parent comments renders staff badge 1`] = `
<div
className="root ConversationThread-root"
data-testid="comments-permalinkView-conversationThread"
>
<ForwardRef(forwardRef)
container={
<Line
dotted={true}
/>
}
>
<Circle>
<RootParent
createdAt="1995-12-17T03:24:00.000Z"
id="root-parent"
tags={
Array [
"Staff",
]
}
username="parentAuthor"
/>
</Circle>
<Circle
className="ConversationThread-loadMore"
hollow={true}
>
<ForwardRef(forwardRef)
alignItems="center"
itemGutter="half"
>
<Localized
$count={2}
id="comments-conversationThread-showMoreOfThisConversation"
>
<ForwardRef(forwardRef)
className="ConversationThread-showMoreButton"
disabled={false}
onClick={[Function]}
variant="underlined"
>
Show more of this conversation
</ForwardRef(forwardRef)>
</Localized>
<withPropsOnChange(Counter)>
2
</withPropsOnChange(Counter)>
</ForwardRef(forwardRef)>
</Circle>
</ForwardRef(forwardRef)>
<ForwardRef(forwardRef)
container={[Function]}
>
<Circle
end={true}
>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={Object {}}
highlight={true}
settings={Object {}}
story={Object {}}
viewer={Object {}}
/>
</Circle>
</ForwardRef(forwardRef)>
</div>
`;
exports[`with 2 remaining parent comments renders with disabled load more 1`] = `
<div
className="root ConversationThread-root"
data-testid="comments-permalinkView-conversationThread"
>
<ForwardRef(forwardRef)
container={
<Line
dotted={true}
/>
}
>
<Circle>
<RootParent
createdAt="1995-12-17T03:24:00.000Z"
id="root-parent"
tags={Array []}
username="parentAuthor"
/>
</Circle>
<Circle
className="ConversationThread-loadMore"
hollow={true}
>
<ForwardRef(forwardRef)
alignItems="center"
itemGutter="half"
>
<Localized
$count={2}
id="comments-conversationThread-showMoreOfThisConversation"
>
<ForwardRef(forwardRef)
className="ConversationThread-showMoreButton"
disabled={true}
onClick={[Function]}
variant="underlined"
>
Show more of this conversation
</ForwardRef(forwardRef)>
</Localized>
<withPropsOnChange(Counter)>
2
</withPropsOnChange(Counter)>
</ForwardRef(forwardRef)>
</Circle>
</ForwardRef(forwardRef)>
<ForwardRef(forwardRef)
container={[Function]}
>
<Circle
end={true}
>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={Object {}}
highlight={true}
settings={Object {}}
story={Object {}}
viewer={Object {}}
/>
</Circle>
</ForwardRef(forwardRef)>
</div>
`;
src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
+186
View File
@@ -0,0 +1,186 @@
import React, { FunctionComponent } from "react";
import { graphql, RelayPaginationProp } from "react-relay";
import {
useLoadMore,
withPaginationContainer,
} from "coral-framework/lib/relay";
import { Omit, PropTypesOf } from "coral-framework/types";
import { AllCommentsTabContainer_settings as SettingsData } from "coral-stream/__generated__/AllCommentsTabContainer_settings.graphql";
import { AllCommentsTabContainer_story as StoryData } from "coral-stream/__generated__/AllCommentsTabContainer_story.graphql";
import { AllCommentsTabContainer_viewer as ViewerData } from "coral-stream/__generated__/AllCommentsTabContainer_viewer.graphql";
import { AllCommentsTabContainerPaginationQueryVariables } from "coral-stream/__generated__/AllCommentsTabContainerPaginationQuery.graphql";
import { Button, HorizontalGutter } from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import { CommentContainer } from "../../Comment";
import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContainer";
import { ReplyListContainer } from "../../ReplyList";
interface Props {
story: StoryData;
settings: SettingsData;
viewer: ViewerData | null;
relay: RelayPaginationProp;
}
// tslint:disable-next-line:no-unused-expression
graphql`
fragment AllCommentsTabContainer_comment on Comment {
id
...CommentContainer_comment
...ReplyListContainer1_comment
}
`;
export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
const comments = props.story.comments.edges.map(edge => edge.node);
return (
<>
<HorizontalGutter
id="coral-comments-stream-log"
data-testid="comments-stream-log"
role="log"
aria-live="polite"
>
{comments.map(comment => (
<IgnoredTombstoneOrHideContainer
key={comment.id}
viewer={props.viewer}
comment={comment}
>
<HorizontalGutter>
<CommentContainer
viewer={props.viewer}
settings={props.settings}
comment={comment}
story={props.story}
/>
<ReplyListContainer
settings={props.settings}
viewer={props.viewer}
comment={comment}
story={props.story}
/>
</HorizontalGutter>
</IgnoredTombstoneOrHideContainer>
))}
{props.relay.hasMore() && (
<Localized id="comments-stream-loadMore">
<Button
id={"coral-comments-stream-loadMore"}
onClick={loadMore}
variant="outlined"
fullWidth
disabled={isLoadingMore}
aria-controls="coral-comments-stream-log"
>
Load More
</Button>
</Localized>
)}
</HorizontalGutter>
</>
);
};
// TODO: (cvle) if this could be autogenerated..
type FragmentVariables = Omit<
AllCommentsTabContainerPaginationQueryVariables,
"storyID"
>;
const enhanced = withPaginationContainer<
Props,
AllCommentsTabContainerPaginationQueryVariables,
FragmentVariables
>(
{
story: graphql`
fragment AllCommentsTabContainer_story on Story
@argumentDefinitions(
count: { type: "Int!", defaultValue: 5 }
cursor: { type: "Cursor" }
orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
) {
id
comments(first: $count, after: $cursor, orderBy: $orderBy)
@connection(key: "Stream_comments") {
edges {
node {
...AllCommentsTabContainer_comment @relay(mask: false)
...IgnoredTombstoneOrHideContainer_comment
}
}
}
...PostCommentFormContainer_story
...CommentContainer_story
...ReplyListContainer1_story
...CreateCommentReplyMutation_story
...CreateCommentMutation_story
}
`,
viewer: graphql`
fragment AllCommentsTabContainer_viewer on User {
...ReplyListContainer1_viewer
...CommentContainer_viewer
...CreateCommentReplyMutation_viewer
...CreateCommentMutation_viewer
...IgnoredTombstoneOrHideContainer_viewer
status {
current
}
}
`,
settings: graphql`
fragment AllCommentsTabContainer_settings on Settings {
reaction {
sortLabel
}
...ReplyListContainer1_settings
...CommentContainer_settings
}
`,
},
{
direction: "forward",
getConnectionFromProps(props) {
return props.story && props.story.comments;
},
// This is also the default implementation of `getFragmentVariables` if it isn't provided.
getFragmentVariables(prevVars, totalCount) {
return {
...prevVars,
count: totalCount,
};
},
getVariables(props, { count, cursor }, fragmentVariables) {
return {
count,
cursor,
orderBy: fragmentVariables.orderBy,
// storyID isn't specified as an @argument for the fragment, but it should be a
// variable available for the fragment under the query root.
storyID: props.story.id,
};
},
query: graphql`
# Pagination query to be fetched upon calling 'loadMore'.
# Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
query AllCommentsTabContainerPaginationQuery(
$count: Int!
$cursor: Cursor
$orderBy: COMMENT_SORT!
$storyID: ID
) {
story(id: $storyID) {
...AllCommentsTabContainer_story
@arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
}
}
`,
}
)(AllCommentsTabContainer);
export type AllCommentsTabContainerProps = PropTypesOf<typeof enhanced>;
export default enhanced;
src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabQuery.tsx
+93
View File
@@ -0,0 +1,93 @@
import {
graphql,
QueryRenderer,
withLocalStateContainer,
} from "coral-framework/lib/relay";
import { AllCommentsTabQuery as QueryTypes } from "coral-stream/__generated__/AllCommentsTabQuery.graphql";
import { AllCommentsTabQueryLocal as Local } from "coral-stream/__generated__/AllCommentsTabQueryLocal.graphql";
import { Delay, Flex, Spinner } from "coral-ui/components";
import React, { FunctionComponent } from "react";
import { ReadyState } from "react-relay";
import AllCommentsTabContainer from "./AllCommentsTabContainer";
interface Props {
local: Local;
preload?: boolean;
}
export const render = (data: ReadyState<QueryTypes["response"]>) => {
if (data.error) {
return <div>{data.error.message}</div>;
}
if (!data.props) {
return (
<Flex justifyContent="center">
<Spinner />
</Flex>
);
}
if (data.props) {
return (
<AllCommentsTabContainer
settings={data.props.settings}
viewer={data.props.viewer}
story={data.props.story!}
/>
);
}
return (
<Delay>
<Flex justifyContent="center">
<Spinner />
</Flex>
</Delay>
);
};
const AllCommentsTabQuery: FunctionComponent<Props> = props => {
const {
local: { storyID, storyURL, commentsOrderBy },
} = props;
return (
<QueryRenderer<QueryTypes>
query={graphql`
query AllCommentsTabQuery(
$storyID: ID
$storyURL: String
$commentsOrderBy: COMMENT_SORT
) {
viewer {
...AllCommentsTabContainer_viewer
}
story(id: $storyID, url: $storyURL) {
...AllCommentsTabContainer_story
@arguments(orderBy: $commentsOrderBy)
}
settings {
...AllCommentsTabContainer_settings
}
}
`}
variables={{
storyID,
storyURL,
commentsOrderBy,
}}
render={data => (props.preload ? null : render(data))}
/>
);
};
const enhanced = withLocalStateContainer(
graphql`
fragment AllCommentsTabQueryLocal on Local {
storyID
storyURL
commentsOrderBy
}
`
)(AllCommentsTabQuery);
export default enhanced;
src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/index.ts
+1
View File
@@ -0,0 +1 @@
export { default, default as AllCommentsTabQuery } from "./AllCommentsTabQuery";
src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.css
+19
View File
@@ -0,0 +1,19 @@
.root {
align-items: center;
display: flex;
}
.tooltip {
width: max-content;
max-width: 220px;
}
.title {
line-height: 1;
}
.button {
line-height: 0;
color: var(--palette-grey-dark);
padding: 6px;
}
src/core/client/stream/tabs/Comments/Stream/FeaturedCommentTooltip.tsx
+80
View File
@@ -0,0 +1,80 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import {
BaseButton,
Box,
ClickOutside,
Icon,
Popover,
Typography,
} from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import styles from "./FeaturedCommentTooltip.css";
interface Props {
className?: string;
active?: boolean;
}
export const FeaturedCommentTooltip: FunctionComponent<Props> = props => {
return (
<Popover
id="comments-featuredCommentPopover"
className={cn(styles.root, props.className)}
body={({ toggleVisibility }) => (
<ClickOutside onClickOutside={toggleVisibility}>
<Box
p={2}
className={styles.tooltip}
onClick={evt => {
// Don't propagate click events when clicking inside of popover to
// avoid accidently activating the featured comments tab.
evt.stopPropagation();
}}
>
<Localized id="comments-featuredCommentTooltip-how">
<Typography
color="textLight"
variant="bodyCopyBold"
mb={2}
className={styles.title}
>
How is a comment featured?
</Typography>
</Localized>
<Localized id="comments-featuredCommentTooltip-handSelectedComments">
<Typography color="textLight" variant="detail">
Comments are hand selected by our team as worth reading.
</Typography>
</Localized>
</Box>
</ClickOutside>
)}
placement={"bottom"}
dark
>
{({ toggleVisibility, ref }) => (
<Localized
id="comments-featuredCommentTooltip-toggleButton"
attrs={{ "aria-label": true }}
>
<BaseButton
className={styles.button}
onClick={evt => {
evt.stopPropagation();
toggleVisibility();
}}
aria-label="Toggle featured comments tooltip"
ref={ref}
>
<Icon color={props.active ? "primary" : "inherit"}>info</Icon>
</BaseButton>
</Localized>
)}
</Popover>
);
};
export default FeaturedCommentTooltip;
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.css
+25
View File
@@ -0,0 +1,25 @@
.root {
background-color: var(--palette-primary-lightest);
border: 1px solid var(--palette-primary-light);
color: var(--palette-text-primary);
padding: var(--spacing-4);
box-sizing: border-box;
}
.replies,
.gotoConversation {
font-size: calc(14rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: var(--font-family-sans-serif);
line-height: 0;
}
.gotoArrow {
display: inline-block;
text-decoration: none;
margin-left: var(--spacing-1);
}
.replies {
color: var(--palette-grey-main);
}
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentContainer.tsx
+148
View File
@@ -0,0 +1,148 @@
import React, { FunctionComponent, MouseEvent, useCallback } from "react";
import { graphql } from "react-relay";
import { getURLWithCommentID } from "coral-framework/helpers";
import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
import { GQLUSER_STATUS } from "coral-framework/schema";
import { FeaturedCommentContainer_comment as CommentData } from "coral-stream/__generated__/FeaturedCommentContainer_comment.graphql";
import { FeaturedCommentContainer_settings as SettingsData } from "coral-stream/__generated__/FeaturedCommentContainer_settings.graphql";
import { FeaturedCommentContainer_story as StoryData } from "coral-stream/__generated__/FeaturedCommentContainer_story.graphql";
import { FeaturedCommentContainer_viewer as ViewerData } from "coral-stream/__generated__/FeaturedCommentContainer_viewer.graphql";
import HTMLContent from "coral-stream/common/HTMLContent";
import Timestamp from "coral-stream/common/Timestamp";
import {
SetCommentIDMutation,
withSetCommentIDMutation,
} from "coral-stream/mutations";
import { Box, Flex, Icon, TextLink } from "coral-ui/components";
import { UserTagsContainer } from "../../Comment";
import ReactionButtonContainer from "../../Comment/ReactionButton";
import { UsernameWithPopoverContainer } from "../../Comment/Username";
import { Localized } from "fluent-react/compat";
import styles from "./FeaturedCommentContainer.css";
interface Props {
viewer: ViewerData | null;
comment: CommentData;
story: StoryData;
settings: SettingsData;
setCommentID: SetCommentIDMutation;
}
const FeaturedCommentContainer: FunctionComponent<Props> = props => {
const { comment, settings, story, viewer, setCommentID } = props;
const banned = Boolean(
viewer && viewer.status.current.includes(GQLUSER_STATUS.BANNED)
);
const onGotoConversation = useCallback(
(e: MouseEvent) => {
e.preventDefault();
setCommentID({ id: comment.id });
return false;
},
[setCommentID, comment]
);
return (
<div className={styles.root} data-testid={`featuredComment-${comment.id}`}>
<HTMLContent>{comment.body || ""}</HTMLContent>
<Flex direction="row" alignItems="center" mt={4}>
{comment.author && (
<UsernameWithPopoverContainer user={comment.author} viewer={viewer} />
)}
<Box ml={1} container="span">
<UserTagsContainer comment={comment} />
</Box>
<Box ml={2} clone>
<Timestamp>{comment.createdAt}</Timestamp>
</Box>
</Flex>
<Flex justifyContent="space-between" mt={2}>
<ReactionButtonContainer
comment={comment}
settings={settings}
viewer={viewer}
readOnly={banned}
/>
<Flex alignItems="center">
{comment.replyCount > 0 && (
<Flex alignItems="center" className={styles.replies}>
<Icon size="md">reply</Icon>
<Localized id="comments-featured-replies">
<Box mx={1}>Replies</Box>
</Localized>
<Box>{comment.replyCount}</Box>
<Box mx={2}>|</Box>
</Flex>
)}
<div>
<TextLink
className={styles.gotoConversation}
onClick={onGotoConversation}
href={getURLWithCommentID(story.url, comment.id)}
>
<Localized id="comments-featured-gotoConversation">
<span>Go to Conversation</span>
</Localized>
<span className={styles.gotoArrow}>></span>
</TextLink>
</div>
</Flex>
</Flex>
</div>
);
};
const enhanced = withSetCommentIDMutation(
withFragmentContainer<Props>({
viewer: graphql`
fragment FeaturedCommentContainer_viewer on User {
id
status {
current
}
ignoredUsers {
id
}
role
...UsernameWithPopoverContainer_viewer
...ReactionButtonContainer_viewer
}
`,
story: graphql`
fragment FeaturedCommentContainer_story on Story {
url
}
`,
comment: graphql`
fragment FeaturedCommentContainer_comment on Comment {
id
author {
...UsernameWithPopoverContainer_user
id
username
}
parent {
author {
username
}
}
body
createdAt
lastViewerAction
replyCount
...ReactionButtonContainer_comment
...UserTagsContainer_comment
}
`,
settings: graphql`
fragment FeaturedCommentContainer_settings on Settings {
...ReactionButtonContainer_settings
}
`,
})(FeaturedCommentContainer)
);
export default enhanced;
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsContainer.tsx
+164
View File
@@ -0,0 +1,164 @@
import React, { FunctionComponent } from "react";
import { graphql, RelayPaginationProp } from "react-relay";
import {
useLoadMore,
withPaginationContainer,
} from "coral-framework/lib/relay";
import { Omit, PropTypesOf } from "coral-framework/types";
import { FeaturedCommentsContainer_settings as SettingsData } from "coral-stream/__generated__/FeaturedCommentsContainer_settings.graphql";
import { FeaturedCommentsContainer_story as StoryData } from "coral-stream/__generated__/FeaturedCommentsContainer_story.graphql";
import { FeaturedCommentsContainer_viewer as ViewerData } from "coral-stream/__generated__/FeaturedCommentsContainer_viewer.graphql";
import { FeaturedCommentsContainerPaginationQueryVariables } from "coral-stream/__generated__/FeaturedCommentsContainerPaginationQuery.graphql";
import { Button, HorizontalGutter } from "coral-ui/components";
import { Localized } from "fluent-react/compat";
import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContainer";
import FeaturedCommentContainer from "./FeaturedCommentContainer";
interface Props {
story: StoryData;
settings: SettingsData;
viewer: ViewerData | null;
relay: RelayPaginationProp;
}
export const FeaturedCommentsContainer: FunctionComponent<Props> = props => {
const [loadMore, isLoadingMore] = useLoadMore(props.relay, 10);
const comments = props.story.featuredComments.edges.map(edge => edge.node);
return (
<>
<HorizontalGutter
id="coral-comments-stream-log"
data-testid="comments-stream-log"
role="log"
aria-live="polite"
spacing={3}
>
{comments.map(comment => (
<IgnoredTombstoneOrHideContainer
key={comment.id}
viewer={props.viewer}
comment={comment}
>
<FeaturedCommentContainer
viewer={props.viewer}
settings={props.settings}
comment={comment}
story={props.story}
/>
</IgnoredTombstoneOrHideContainer>
))}
{props.relay.hasMore() && (
<Localized id="comments-stream-loadMore">
<Button
id={"coral-comments-stream-loadMore"}
onClick={loadMore}
variant="outlined"
fullWidth
disabled={isLoadingMore}
aria-controls="coral-comments-stream-log"
>
Load More
</Button>
</Localized>
)}
</HorizontalGutter>
</>
);
};
// TODO: (cvle) if this could be autogenerated..
type FragmentVariables = Omit<
FeaturedCommentsContainerPaginationQueryVariables,
"storyID"
>;
const enhanced = withPaginationContainer<
Props,
FeaturedCommentsContainerPaginationQueryVariables,
FragmentVariables
>(
{
story: graphql`
fragment FeaturedCommentsContainer_story on Story
@argumentDefinitions(
count: { type: "Int!", defaultValue: 5 }
cursor: { type: "Cursor" }
orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
) {
id
featuredComments(first: $count, after: $cursor, orderBy: $orderBy)
@connection(key: "Stream_featuredComments") {
edges {
node {
id
...FeaturedCommentContainer_comment
...IgnoredTombstoneOrHideContainer_comment
}
}
}
...PostCommentFormContainer_story
...FeaturedCommentContainer_story
}
`,
viewer: graphql`
fragment FeaturedCommentsContainer_viewer on User {
...FeaturedCommentContainer_viewer
...IgnoredTombstoneOrHideContainer_viewer
status {
current
}
}
`,
settings: graphql`
fragment FeaturedCommentsContainer_settings on Settings {
reaction {
sortLabel
}
...FeaturedCommentContainer_settings
}
`,
},
{
direction: "forward",
getConnectionFromProps(props) {
return props.story && props.story.featuredComments;
},
// This is also the default implementation of `getFragmentVariables` if it isn't provided.
getFragmentVariables(prevVars, totalCount) {
return {
...prevVars,
count: totalCount,
};
},
getVariables(props, { count, cursor }, fragmentVariables) {
return {
count,
cursor,
orderBy: fragmentVariables.orderBy,
// storyID isn't specified as an @argument for the fragment, but it should be a
// variable available for the fragment under the query root.
storyID: props.story.id,
};
},
query: graphql`
# Pagination query to be fetched upon calling 'loadMore'.
# Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
query FeaturedCommentsContainerPaginationQuery(
$count: Int!
$cursor: Cursor
$orderBy: COMMENT_SORT!
$storyID: ID
) {
story(id: $storyID) {
...FeaturedCommentsContainer_story
@arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
}
}
`,
}
)(FeaturedCommentsContainer);
export type FeaturedCommentsContainerProps = PropTypesOf<typeof enhanced>;
export default enhanced;
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/FeaturedCommentsQuery.tsx
+93
View File
@@ -0,0 +1,93 @@
import {
graphql,
QueryRenderer,
withLocalStateContainer,
} from "coral-framework/lib/relay";
import { FeaturedCommentsQuery as QueryTypes } from "coral-stream/__generated__/FeaturedCommentsQuery.graphql";
import { FeaturedCommentsQueryLocal as Local } from "coral-stream/__generated__/FeaturedCommentsQueryLocal.graphql";
import { Delay, Flex, Spinner } from "coral-ui/components";
import React, { FunctionComponent } from "react";
import { ReadyState } from "react-relay";
import FeaturedCommentsContainer from "./FeaturedCommentsContainer";
interface Props {
local: Local;
preload?: boolean;
}
export const render = (data: ReadyState<QueryTypes["response"]>) => {
if (data.error) {
return <div>{data.error.message}</div>;
}
if (!data.props) {
return (
<Flex justifyContent="center">
<Spinner />
</Flex>
);
}
if (data.props) {
return (
<FeaturedCommentsContainer
settings={data.props.settings}
viewer={data.props.viewer}
story={data.props.story!}
/>
);
}
return (
<Delay>
<Flex justifyContent="center">
<Spinner />
</Flex>
</Delay>
);
};
const FeaturedCommentsQuery: FunctionComponent<Props> = props => {
const {
local: { storyID, storyURL, commentsOrderBy },
} = props;
return (
<QueryRenderer<QueryTypes>
query={graphql`
query FeaturedCommentsQuery(
$storyID: ID
$storyURL: String
$commentsOrderBy: COMMENT_SORT
) {
viewer {
...FeaturedCommentsContainer_viewer
}
story(id: $storyID, url: $storyURL) {
...FeaturedCommentsContainer_story
@arguments(orderBy: $commentsOrderBy)
}
settings {
...FeaturedCommentsContainer_settings
}
}
`}
variables={{
storyID,
storyURL,
commentsOrderBy,
}}
render={data => (props.preload ? null : render(data))}
/>
);
};
const enhanced = withLocalStateContainer(
graphql`
fragment FeaturedCommentsQueryLocal on Local {
storyID
storyURL
commentsOrderBy
}
`
)(FeaturedCommentsQuery);
export default enhanced;
src/core/client/stream/tabs/Comments/Stream/FeaturedComments/index.ts
+4
View File
@@ -0,0 +1,4 @@
export {
default,
default as FeaturedCommentsQuery,
} from "./FeaturedCommentsQuery";
src/core/client/stream/tabs/Comments/Stream/PostCommentForm/CreateCommentMutation.ts
+2 -2
View File
@@ -95,7 +95,7 @@ const mutation = graphql`
edge {
cursor
node {
...StreamContainer_comment @relay(mask: false)
...AllCommentsTabContainer_comment @relay(mask: false)
status
}
}
@@ -165,7 +165,7 @@ function commit(
},
},
tags: roleIsAtLeast(viewer.role, GQLUSER_ROLE.STAFF)
? [{ name: "Staff" }]
? [{ code: "STAFF" }]
: [],
viewerActionPresence: {
reaction: false,
src/core/client/stream/tabs/Comments/Stream/SortMenu.tsx
+39 -37
View File
@@ -10,10 +10,10 @@ import {
Typography,
} from "coral-ui/components";
import Divider from "./Divider";
import * as styles from "./SortMenu.css";
interface Props {
className?: string;
orderBy:
| "CREATED_AT_ASC"
| "CREATED_AT_DESC"
@@ -27,42 +27,44 @@ interface Props {
const SortMenu: FunctionComponent<Props> = props => (
<MatchMedia ltWidth="sm">
{matches => (
<div>
<Flex justifyContent="flex-end" alignItems="center" itemGutter>
{!matches && (
<Localized id="comments-sortMenu-sortBy">
<Typography
variant="bodyCopyBold"
container={<label htmlFor="coral-comments-sortMenu" />}
>
Sort By
</Typography>
</Localized>
)}
<SelectField
id="coral-comments-sortMenu"
value={props.orderBy}
onChange={props.onChange}
afterWrapper={(matches && <Icon>sort</Icon>) || undefined}
classes={{
select: (matches && styles.mobileSelect) || undefined,
afterWrapper: (matches && styles.mobileAfterWrapper) || undefined,
}}
>
<Localized id="comments-sortMenu-newest">
<Option value="CREATED_AT_DESC">Newest</Option>
</Localized>
<Localized id="comments-sortMenu-oldest">
<Option value="CREATED_AT_ASC">Oldest</Option>
</Localized>
<Localized id="comments-sortMenu-mostReplies">
<Option value="REPLIES_DESC">Most Replies</Option>
</Localized>
<Option value="REACTION_DESC">{props.reactionSortLabel}</Option>
</SelectField>
</Flex>
<Divider />
</div>
<Flex
className={props.className}
justifyContent="flex-end"
alignItems="center"
itemGutter
>
{!matches && (
<Localized id="comments-sortMenu-sortBy">
<Typography
variant="bodyCopyBold"
container={<label htmlFor="coral-comments-sortMenu" />}
>
Sort By
</Typography>
</Localized>
)}
<SelectField
id="coral-comments-sortMenu"
value={props.orderBy}
onChange={props.onChange}
afterWrapper={(matches && <Icon>sort</Icon>) || undefined}
classes={{
select: (matches && styles.mobileSelect) || undefined,
afterWrapper: (matches && styles.mobileAfterWrapper) || undefined,
}}
>
<Localized id="comments-sortMenu-newest">
<Option value="CREATED_AT_DESC">Newest</Option>
</Localized>
<Localized id="comments-sortMenu-oldest">
<Option value="CREATED_AT_ASC">Oldest</Option>
</Localized>
<Localized id="comments-sortMenu-mostReplies">
<Option value="REPLIES_DESC">Most Replies</Option>
</Localized>
<Option value="REACTION_DESC">{props.reactionSortLabel}</Option>
</SelectField>
</Flex>
)}
</MatchMedia>
);
src/core/client/stream/tabs/Comments/Stream/Stream.css
-3
View File
@@ -1,3 +0,0 @@
.root {
width: 100%;
}
src/core/client/stream/tabs/Comments/Stream/Stream.spec.tsx
-83
View File
@@ -1,83 +0,0 @@
import { shallow } from "enzyme";
import { noop } from "lodash";
import React from "react";
import sinon, { SinonSpy } from "sinon";
import { removeFragmentRefs } from "coral-framework/testHelpers";
import { PropTypesOf } from "coral-framework/types";
import Stream from "./Stream";
const StreamN = removeFragmentRefs(Stream);
it("renders correctly", () => {
const props: PropTypesOf<typeof StreamN> = {
story: {
id: "story-id",
isClosed: false,
},
comments: [{ id: "comment-1" }, { id: "comment-2" }],
settings: { reaction: { sortLabel: "Most Reacted" } },
onLoadMore: noop,
disableLoadMore: false,
hasMore: false,
viewer: null,
orderBy: "CREATED_AT_ASC",
onChangeOrderBy: noop,
};
const wrapper = shallow(<StreamN {...props} />);
expect(wrapper).toMatchSnapshot();
});
describe("when use is logged in", () => {
it("renders correctly", () => {
const props: PropTypesOf<typeof StreamN> = {
story: {
id: "story-id",
isClosed: false,
},
comments: [{ id: "comment-1" }, { id: "comment-2" }],
onLoadMore: noop,
disableLoadMore: false,
hasMore: false,
viewer: {},
settings: { reaction: { sortLabel: "Most Reacted" } },
orderBy: "CREATED_AT_ASC",
onChangeOrderBy: noop,
};
const wrapper = shallow(<StreamN {...props} />);
expect(wrapper).toMatchSnapshot();
});
});
describe("when there is more", () => {
const props: PropTypesOf<typeof StreamN> = {
story: {
id: "story-id",
isClosed: false,
},
comments: [{ id: "comment-1" }, { id: "comment-2" }],
settings: { reaction: { sortLabel: "Most Reacted" } },
onLoadMore: sinon.spy(),
disableLoadMore: false,
hasMore: true,
viewer: null,
orderBy: "CREATED_AT_ASC",
onChangeOrderBy: noop,
};
const wrapper = shallow(<StreamN {...props} />);
it("renders a load more button", () => {
expect(wrapper).toMatchSnapshot();
});
it("calls onLoadMore", () => {
wrapper.find("#coral-comments-stream-loadMore").simulate("click");
expect((props.onLoadMore as SinonSpy).calledOnce).toBe(true);
});
const wrapperDisabledButton = shallow(<StreamN {...props} disableLoadMore />);
it("disables load more button", () => {
expect(wrapperDisabledButton).toMatchSnapshot();
});
});
src/core/client/stream/tabs/Comments/Stream/Stream.tsx
-128
View File
@@ -1,128 +0,0 @@
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { FunctionComponent } from "react";
import { PropTypesOf } from "coral-framework/types";
import UserBoxContainer from "coral-stream/common/UserBox";
import { Button, Flex, HorizontalGutter, Spinner } from "coral-ui/components";
import CommentContainer from "../Comment";
import IgnoredTombstoneOrHideContainer from "../IgnoredTombstoneOrHideContainer";
import ReplyListContainer from "../ReplyList";
import BannedInfo from "./BannedInfo";
import CommunityGuidelinesContainer from "./CommunityGuidelines";
import PostCommentFormContainer from "./PostCommentForm";
import SortMenu from "./SortMenu";
import styles from "./Stream.css";
export interface StreamProps {
story: {
id: string;
isClosed?: boolean;
} & PropTypesOf<typeof CommentContainer>["story"] &
PropTypesOf<typeof ReplyListContainer>["story"] &
PropTypesOf<typeof PostCommentFormContainer>["story"];
settings: PropTypesOf<typeof CommentContainer>["settings"] &
PropTypesOf<typeof ReplyListContainer>["settings"] &
PropTypesOf<typeof UserBoxContainer>["settings"] &
PropTypesOf<typeof CommunityGuidelinesContainer>["settings"] &
PropTypesOf<typeof PostCommentFormContainer>["settings"] & {
reaction: {
sortLabel: string;
};
};
comments: ReadonlyArray<
{ id: string } & PropTypesOf<typeof CommentContainer>["comment"] &
PropTypesOf<typeof ReplyListContainer>["comment"] &
PropTypesOf<typeof IgnoredTombstoneOrHideContainer>["comment"]
>;
onLoadMore?: () => void;
hasMore?: boolean;
disableLoadMore?: boolean;
viewer:
| PropTypesOf<typeof UserBoxContainer>["viewer"] &
PropTypesOf<typeof CommentContainer>["viewer"] &
PropTypesOf<typeof ReplyListContainer>["viewer"] &
PropTypesOf<typeof IgnoredTombstoneOrHideContainer>["viewer"]
| null;
orderBy: PropTypesOf<typeof SortMenu>["orderBy"];
onChangeOrderBy: (e: React.ChangeEvent<HTMLSelectElement>) => void;
refetching?: boolean;
banned?: boolean;
}
const Stream: FunctionComponent<StreamProps> = props => {
return (
<HorizontalGutter className={styles.root} size="double">
<UserBoxContainer viewer={props.viewer} settings={props.settings} />
<CommunityGuidelinesContainer settings={props.settings} />
{!props.banned && (
<PostCommentFormContainer
settings={props.settings}
story={props.story}
/>
)}
{props.banned && <BannedInfo />}
{props.comments.length > 0 && (
<SortMenu
orderBy={props.orderBy}
onChange={props.onChangeOrderBy}
reactionSortLabel={props.settings.reaction.sortLabel}
/>
)}
{props.refetching && (
<Flex justifyContent="center">
<Spinner />
</Flex>
)}
{!props.refetching && (
<HorizontalGutter
id="coral-comments-stream-log"
data-testid="comments-stream-log"
role="log"
aria-live="polite"
>
{props.comments.map(comment => (
<IgnoredTombstoneOrHideContainer
key={comment.id}
viewer={props.viewer}
comment={comment}
>
<HorizontalGutter>
<CommentContainer
viewer={props.viewer}
settings={props.settings}
comment={comment}
story={props.story}
/>
<ReplyListContainer
settings={props.settings}
viewer={props.viewer}
comment={comment}
story={props.story}
/>
</HorizontalGutter>
</IgnoredTombstoneOrHideContainer>
))}
{props.hasMore && (
<Localized id="comments-stream-loadMore">
<Button
id={"coral-comments-stream-loadMore"}
onClick={props.onLoadMore}
variant="outlined"
fullWidth
disabled={props.disableLoadMore}
aria-controls="coral-comments-stream-log"
>
Load More
</Button>
</Localized>
)}
</HorizontalGutter>
)}
</HorizontalGutter>
);
};
export default Stream;
src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
+28
View File
@@ -0,0 +1,28 @@
.root {
width: 100%;
}
.tabBarContainer {
position: relative;
padding-top: var(--spacing-1);
}
.sortMenu {
position: absolute;
right: 0;
top: 0;
}
.featuredCommentsInfo {
position: absolute;
top: 0;
right: 4px;
height: 100%;
}
.featuredCommentsTabContainer {
position: relative;
}
.featuredCommentsTab {
padding-right: 30px !important;
}
src/core/client/stream/tabs/Comments/Stream/StreamContainer.spec.tsx
-91
View File
@@ -1,91 +0,0 @@
import { shallow, ShallowWrapper } from "enzyme";
import { noop } from "lodash";
import React from "react";
import { removeFragmentRefs } from "coral-framework/testHelpers";
import { PropTypesOf } from "coral-framework/types";
import Stream from "./Stream";
import { StreamContainer } from "./StreamContainer";
// Remove relay refs so we can stub the props.
const StreamContainerN = removeFragmentRefs(StreamContainer);
it("renders correctly", () => {
const props: PropTypesOf<typeof StreamContainerN> = {
story: {
id: "story-id",
isClosed: false,
comments: {
edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
},
},
viewer: null,
settings: {
reaction: {
sortLabel: "Most Respected",
},
},
relay: {
hasMore: noop,
isLoading: noop,
} as any,
defaultOrderBy: "CREATED_AT_ASC",
};
const wrapper = shallow(<StreamContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
describe("when has more comments", () => {
let finishLoading: ((error?: Error) => void) | null = null;
const props: PropTypesOf<typeof StreamContainerN> = {
story: {
id: "story-id",
isClosed: false,
comments: {
edges: [{ node: { id: "comment-1" } }, { node: { id: "comment-2" } }],
},
},
viewer: null,
settings: {
reaction: {
sortLabel: "Most Respected",
},
},
relay: {
hasMore: () => true,
isLoading: () => false,
loadMore: (_: any, callback: () => void) => (finishLoading = callback),
} as any,
defaultOrderBy: "CREATED_AT_ASC",
};
let wrapper: ShallowWrapper;
beforeAll(() => (wrapper = shallow(<StreamContainerN {...props} />)));
it("renders hasMore", () => {
expect(wrapper).toMatchSnapshot();
});
describe("when loading more", () => {
beforeAll(() => {
wrapper
.find(Stream)
.props()
.onLoadMore();
});
it("calls relay loadMore", () => {
expect(finishLoading).not.toBeNull();
});
it("disables load more button", () => {
wrapper.update();
expect(wrapper).toMatchSnapshot();
});
it("enable load more button after loading is done", () => {
finishLoading!();
wrapper.update();
expect(wrapper).toMatchSnapshot();
});
});
});
src/core/client/stream/tabs/Comments/Stream/StreamContainer.tsx
+168 -187
View File
@@ -1,209 +1,190 @@
import React, { ChangeEvent } from "react";
import { graphql, RelayPaginationProp } from "react-relay";
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent, useCallback } from "react";
import { graphql } from "react-relay";
import { withPaginationContainer } from "coral-framework/lib/relay";
import { useLocal, withFragmentContainer } from "coral-framework/lib/relay";
import { GQLUSER_STATUS } from "coral-framework/schema";
import { Omit, PropTypesOf } from "coral-framework/types";
import { StreamContainer_settings as SettingsData } from "coral-stream/__generated__/StreamContainer_settings.graphql";
import { StreamContainer_story as StoryData } from "coral-stream/__generated__/StreamContainer_story.graphql";
import { StreamContainer_viewer as ViewerData } from "coral-stream/__generated__/StreamContainer_viewer.graphql";
import { StreamContainerLocal } from "coral-stream/__generated__/StreamContainerLocal.graphql";
import { UserBoxContainer } from "coral-stream/common/UserBox";
import {
COMMENT_SORT,
StreamContainerPaginationQueryVariables,
} from "coral-stream/__generated__/StreamContainerPaginationQuery.graphql";
import StoryClosedTimeoutContainer from "./StoryClosedTimeout";
Counter,
Flex,
HorizontalGutter,
Tab,
TabBar,
TabContent,
TabPane,
} from "coral-ui/components";
import { PropTypesOf } from "coral-ui/types";
import Stream from "./Stream";
import AllCommentsTab from "./AllCommentsTab";
import BannedInfo from "./BannedInfo";
import { CommunityGuidelinesContainer } from "./CommunityGuidelines";
import FeaturedComments from "./FeaturedComments";
import FeaturedCommentTooltip from "./FeaturedCommentTooltip";
import { PostCommentFormContainer } from "./PostCommentForm";
import SortMenu from "./SortMenu";
import StoryClosedTimeoutContainer from "./StoryClosedTimeout";
import styles from "./StreamContainer.css";
interface Props {
story: StoryData;
settings: SettingsData;
viewer: ViewerData | null;
relay: RelayPaginationProp;
defaultOrderBy: COMMENT_SORT;
}
// tslint:disable-next-line:no-unused-expression
graphql`
fragment StreamContainer_comment on Comment {
id
...CommentContainer_comment
...ReplyListContainer1_comment
}
`;
// Use a custom tab for featured comments, because we need to put the tooltip
// button logically next to the tab as both are buttons and position them together
// using absolute positioning.
const TabWithFeaturedTooltip: FunctionComponent<PropTypesOf<typeof Tab>> = ({
...props
}) => (
<div className={styles.featuredCommentsTabContainer}>
<Tab {...props} className={styles.featuredCommentsTab} />
<FeaturedCommentTooltip
active={props.active}
className={styles.featuredCommentsInfo}
/>
</div>
);
export class StreamContainer extends React.Component<Props> {
public state = {
disableLoadMore: false,
refetching: false,
};
private orderBy = this.props.defaultOrderBy;
private handleOnChangeOrderBy = (e: ChangeEvent<HTMLSelectElement>) => {
this.orderBy = e.target.value as COMMENT_SORT;
this.setState({ refetching: true });
this.props.relay.refetchConnection(
5,
err => {
if (err) {
// tslint:disable-next-line:no-console
console.error(err);
return;
}
this.setState({ refetching: false });
},
{
orderBy: e.target.value as COMMENT_SORT,
export const StreamContainer: FunctionComponent<Props> = props => {
const [local, setLocal] = useLocal<StreamContainerLocal>(
graphql`
fragment StreamContainerLocal on Local {
commentsTab
commentsOrderBy
}
);
};
`
);
const onChangeOrder = useCallback(
(order: React.ChangeEvent<HTMLSelectElement>) =>
setLocal({ commentsOrderBy: order.target.value as any }),
[setLocal]
);
const onChangeTab = useCallback(
(tab: any) => setLocal({ commentsTab: tab }),
[setLocal]
);
const banned = Boolean(
props.viewer && props.viewer.status.current.includes(GQLUSER_STATUS.BANNED)
);
public render() {
const comments = this.props.story.comments.edges.map(edge => edge.node);
return (
<>
<StoryClosedTimeoutContainer story={this.props.story} />
<Stream
story={this.props.story}
comments={comments}
settings={this.props.settings}
onLoadMore={this.loadMore}
hasMore={this.props.relay.hasMore()}
disableLoadMore={this.state.disableLoadMore}
viewer={this.props.viewer}
orderBy={this.orderBy}
onChangeOrderBy={this.handleOnChangeOrderBy}
refetching={this.state.refetching}
banned={Boolean(
this.props.viewer &&
this.props.viewer.status.current.includes(GQLUSER_STATUS.BANNED)
)}
/>
</>
);
}
const allCommentsCount = props.story.commentCounts.totalVisible;
const featuredCommentsCount = props.story.commentCounts.tags.FEATURED;
return (
<>
<StoryClosedTimeoutContainer story={props.story} />
<HorizontalGutter className={styles.root} size="double">
<UserBoxContainer viewer={props.viewer} settings={props.settings} />
<CommunityGuidelinesContainer settings={props.settings} />
{!banned && (
<PostCommentFormContainer
settings={props.settings}
story={props.story}
/>
)}
{banned && <BannedInfo />}
<HorizontalGutter spacing={5} className={styles.tabBarContainer}>
<SortMenu
className={styles.sortMenu}
orderBy={local.commentsOrderBy}
onChange={onChangeOrder}
reactionSortLabel={props.settings.reaction.sortLabel}
/>
<TabBar
variant="secondary"
activeTab={local.commentsTab}
onTabClick={onChangeTab}
>
{featuredCommentsCount > 0 && (
<TabWithFeaturedTooltip tabID="FEATURED_COMMENTS">
<Flex spacing={1} alignItems="center">
<Localized id="comments-featuredTab">
<span>Featured</span>
</Localized>
<Counter
data-testid="comments-featuredCount"
size="sm"
color={
local.commentsTab === "FEATURED_COMMENTS"
? "primary"
: "grey"
}
>
{featuredCommentsCount}
</Counter>
</Flex>
</TabWithFeaturedTooltip>
)}
<Tab tabID="ALL_COMMENTS">
<Flex alignItems="center" spacing={1}>
<Localized id="comments-allCommentsTab">
<span>All Comments</span>
</Localized>
<Counter
size="sm"
color={
local.commentsTab === "ALL_COMMENTS" ? "primary" : "grey"
}
>
{allCommentsCount}
</Counter>
</Flex>
</Tab>
</TabBar>
<TabContent activeTab={local.commentsTab}>
<TabPane tabID="FEATURED_COMMENTS">
<FeaturedComments />
</TabPane>
<TabPane tabID="ALL_COMMENTS">
<AllCommentsTab />
</TabPane>
</TabContent>
</HorizontalGutter>
</HorizontalGutter>
</>
);
};
private loadMore = () => {
if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
return;
const enhanced = withFragmentContainer<Props>({
story: graphql`
fragment StreamContainer_story on Story {
...PostCommentFormContainer_story
...StoryClosedTimeoutContainer_story
...CreateCommentReplyMutation_story
...CreateCommentMutation_story
commentCounts {
totalVisible
tags {
FEATURED
}
}
}
this.setState({ disableLoadMore: true });
this.props.relay.loadMore(
10, // Fetch the next 10 feed items
error => {
this.setState({ disableLoadMore: false });
if (error) {
// tslint:disable-next-line:no-console
console.error(error);
}
`,
viewer: graphql`
fragment StreamContainer_viewer on User {
...UserBoxContainer_viewer
...CreateCommentReplyMutation_viewer
...CreateCommentMutation_viewer
status {
current
}
);
};
}
}
`,
settings: graphql`
fragment StreamContainer_settings on Settings {
reaction {
sortLabel
}
...PostCommentFormContainer_settings
...UserBoxContainer_settings
...CommunityGuidelinesContainer_settings
}
`,
})(StreamContainer);
// TODO: (cvle) if this could be autogenerated..
type FragmentVariables = Omit<
StreamContainerPaginationQueryVariables,
"storyID"
>;
const enhanced = withPaginationContainer<
Props,
StreamContainerPaginationQueryVariables,
FragmentVariables
>(
{
story: graphql`
fragment StreamContainer_story on Story
@argumentDefinitions(
count: { type: "Int!", defaultValue: 5 }
cursor: { type: "Cursor" }
orderBy: { type: "COMMENT_SORT!", defaultValue: CREATED_AT_DESC }
) {
id
isClosed
comments(first: $count, after: $cursor, orderBy: $orderBy)
@connection(key: "Stream_comments") {
edges {
node {
...StreamContainer_comment @relay(mask: false)
...IgnoredTombstoneOrHideContainer_comment
}
}
}
...PostCommentFormContainer_story
...CommentContainer_story
...ReplyListContainer1_story
...StoryClosedTimeoutContainer_story
...CreateCommentReplyMutation_story
...CreateCommentMutation_story
}
`,
viewer: graphql`
fragment StreamContainer_viewer on User {
...ReplyListContainer1_viewer
...CommentContainer_viewer
...UserBoxContainer_viewer
...CreateCommentReplyMutation_viewer
...CreateCommentMutation_viewer
...IgnoredTombstoneOrHideContainer_viewer
status {
current
}
}
`,
settings: graphql`
fragment StreamContainer_settings on Settings {
reaction {
sortLabel
}
...PostCommentFormContainer_settings
...ReplyListContainer1_settings
...CommentContainer_settings
...UserBoxContainer_settings
...CommunityGuidelinesContainer_settings
}
`,
},
{
direction: "forward",
getConnectionFromProps(props) {
return props.story && props.story.comments;
},
// This is also the default implementation of `getFragmentVariables` if it isn't provided.
getFragmentVariables(prevVars, totalCount) {
return {
...prevVars,
count: totalCount,
};
},
getVariables(props, { count, cursor }, fragmentVariables) {
return {
count,
cursor,
orderBy: fragmentVariables.orderBy,
// storyID isn't specified as an @argument for the fragment, but it should be a
// variable available for the fragment under the query root.
storyID: props.story.id,
};
},
query: graphql`
# Pagination query to be fetched upon calling 'loadMore'.
# Notice that we re-use our fragment, and the shape of this query matches our fragment spec.
query StreamContainerPaginationQuery(
$count: Int!
$cursor: Cursor
$orderBy: COMMENT_SORT!
$storyID: ID
) {
story(id: $storyID) {
...StreamContainer_story
@arguments(count: $count, cursor: $cursor, orderBy: $orderBy)
}
}
`,
}
)(StreamContainer);
export type StreamContainerProps = PropTypesOf<typeof enhanced>;
export default enhanced;
src/core/client/stream/tabs/Comments/Stream/StreamQuery.spec.tsx
-36
View File
@@ -1,36 +0,0 @@
import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { render } from "./StreamQuery";
it("renders stream container", () => {
const data = {
props: {
story: {},
} as any,
error: null,
};
const renderer = createRenderer();
renderer.render(React.createElement(() => render(data, "CREATED_AT_ASC")));
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
it("renders loading", () => {
const data = {
props: null,
error: null,
};
const renderer = createRenderer();
renderer.render(React.createElement(() => render(data, "CREATED_AT_ASC")));
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
it("renders error", () => {
const data = {
props: null,
error: new Error("error"),
};
const renderer = createRenderer();
renderer.render(React.createElement(() => render(data, "CREATED_AT_ASC")));
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
src/core/client/stream/tabs/Comments/Stream/StreamQuery.tsx
+43 -30
View File
@@ -10,16 +10,14 @@ import { Localized } from "fluent-react/compat";
import React, { FunctionComponent } from "react";
import { ReadyState } from "react-relay";
import { AllCommentsTabQuery } from "./AllCommentsTab";
import StreamContainer from "./StreamContainer";
interface Props {
local: Local;
}
export const render = (
data: ReadyState<QueryTypes["response"]>,
defaultStreamOrderBy: Props["local"]["defaultStreamOrderBy"]
) => {
export const render = (data: ReadyState<QueryTypes["response"]>) => {
if (data.error) {
return <div>{data.error.message}</div>;
}
@@ -37,7 +35,6 @@ export const render = (
settings={data.props.settings}
viewer={data.props.viewer}
story={data.props.story}
defaultOrderBy={defaultStreamOrderBy}
/>
);
}
@@ -53,34 +50,49 @@ export const render = (
const StreamQuery: FunctionComponent<Props> = props => {
const {
local: { storyID, storyURL, defaultStreamOrderBy },
local: { storyID, storyURL, commentsTab },
} = props;
return (
<QueryRenderer<QueryTypes>
query={graphql`
query StreamQuery(
$storyID: ID
$storyURL: String
$streamOrderBy: COMMENT_SORT
) {
viewer {
...StreamContainer_viewer
<>
<QueryRenderer<QueryTypes>
query={graphql`
query StreamQuery($storyID: ID, $storyURL: String) {
viewer {
...StreamContainer_viewer
}
story(id: $storyID, url: $storyURL) {
...StreamContainer_story
}
settings {
...StreamContainer_settings
}
}
story(id: $storyID, url: $storyURL) {
...StreamContainer_story @arguments(orderBy: $streamOrderBy)
`}
variables={{
storyID,
storyURL,
}}
render={data => {
if (
// TODO: (cvle) For some reason this way of preloading
// causes weird errors in the
// tests. Needs further investigation.
process.env.NODE_ENV !== "test" &&
!data.props &&
!data.error
) {
return (
<>
{commentsTab === "ALL_COMMENTS" && (
<AllCommentsTabQuery preload />
)}
</>
);
}
settings {
...StreamContainer_settings
}
}
`}
variables={{
storyID,
storyURL,
streamOrderBy: defaultStreamOrderBy,
}}
render={data => render(data, props.local.defaultStreamOrderBy)}
/>
return render(data);
}}
/>
</>
);
};
@@ -89,7 +101,8 @@ const enhanced = withLocalStateContainer(
fragment StreamQueryLocal on Local {
storyID
storyURL
defaultStreamOrderBy
commentsOrderBy
commentsTab
}
`
)(StreamQuery);
src/core/client/stream/tabs/Comments/Stream/__snapshots__/SortMenu.spec.tsx.snap
+86 -96
View File
@@ -1,119 +1,109 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly on big screens 1`] = `
<div>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter"
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
<label
className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
>
<label
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
htmlFor="coral-comments-sortMenu"
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_ASC"
>
Sort By
</label>
<span
className="SelectField-root"
>
<select
className="SelectField-select undefined"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
<option
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
<option
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Reacted
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
Oldest
</option>
<option
value="REPLIES_DESC"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Reacted
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper undefined"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
expand_more
</span>
</span>
</div>
<hr
className="Divider-root"
/>
</span>
</div>
`;
exports[`renders correctly on small screens 1`] = `
<div>
<div
className="Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter"
<div
className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
>
<span
className="SelectField-root"
>
<span
className="SelectField-root"
<select
className="SelectField-select SortMenu-mobileSelect"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value="CREATED_AT_ASC"
>
<select
className="SelectField-select SortMenu-mobileSelect"
id="coral-comments-sortMenu"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
<option
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
<option
value="CREATED_AT_DESC"
>
Newest
</option>
<option
value="CREATED_AT_ASC"
>
Oldest
</option>
<option
value="REPLIES_DESC"
>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Reacted
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper SortMenu-mobileAfterWrapper"
Oldest
</option>
<option
value="REPLIES_DESC"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
sort
</span>
Most Replies
</option>
<option
value="REACTION_DESC"
>
Most Reacted
</option>
</select>
<span
aria-hidden={true}
className="SelectField-afterWrapper SortMenu-mobileAfterWrapper"
>
<span
aria-hidden="true"
className="Icon-root Icon-sm"
>
sort
</span>
</span>
</div>
<hr
className="Divider-root"
/>
</span>
</div>
`;
src/core/client/stream/tabs/Comments/Stream/__snapshots__/Stream.spec.tsx.snap
-677
View File
@@ -1,677 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="Stream-root"
size="double"
>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
viewer={null}
/>
<Relay(CommunityGuidelinesContainerProps)
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
/>
<withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
/>
<SortMenu
onChange={[Function]}
orderBy="CREATED_AT_ASC"
reactionSortLabel="Most Reacted"
/>
<ForwardRef(forwardRef)
aria-live="polite"
data-testid="comments-stream-log"
id="coral-comments-stream-log"
role="log"
>
<Relay(IgnoredTombstoneOrHideContainer)
comment={
Object {
"id": "comment-1",
}
}
key="comment-1"
viewer={null}
>
<ForwardRef(forwardRef)>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={
Object {
"id": "comment-1",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
<withProps(Relay(ReplyListContainer))
comment={
Object {
"id": "comment-1",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</ForwardRef(forwardRef)>
</Relay(IgnoredTombstoneOrHideContainer)>
<Relay(IgnoredTombstoneOrHideContainer)
comment={
Object {
"id": "comment-2",
}
}
key="comment-2"
viewer={null}
>
<ForwardRef(forwardRef)>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={
Object {
"id": "comment-2",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
<withProps(Relay(ReplyListContainer))
comment={
Object {
"id": "comment-2",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</ForwardRef(forwardRef)>
</Relay(IgnoredTombstoneOrHideContainer)>
</ForwardRef(forwardRef)>
</ForwardRef(forwardRef)>
`;
exports[`when there is more disables load more button 1`] = `
<ForwardRef(forwardRef)
className="Stream-root"
size="double"
>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
viewer={null}
/>
<Relay(CommunityGuidelinesContainerProps)
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
/>
<withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
/>
<SortMenu
onChange={[Function]}
orderBy="CREATED_AT_ASC"
reactionSortLabel="Most Reacted"
/>
<ForwardRef(forwardRef)
aria-live="polite"
data-testid="comments-stream-log"
id="coral-comments-stream-log"
role="log"
>
<Relay(IgnoredTombstoneOrHideContainer)
comment={
Object {
"id": "comment-1",
}
}
key="comment-1"
viewer={null}
>
<ForwardRef(forwardRef)>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={
Object {
"id": "comment-1",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
<withProps(Relay(ReplyListContainer))
comment={
Object {
"id": "comment-1",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</ForwardRef(forwardRef)>
</Relay(IgnoredTombstoneOrHideContainer)>
<Relay(IgnoredTombstoneOrHideContainer)
comment={
Object {
"id": "comment-2",
}
}
key="comment-2"
viewer={null}
>
<ForwardRef(forwardRef)>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={
Object {
"id": "comment-2",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
<withProps(Relay(ReplyListContainer))
comment={
Object {
"id": "comment-2",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</ForwardRef(forwardRef)>
</Relay(IgnoredTombstoneOrHideContainer)>
<Localized
id="comments-stream-loadMore"
>
<ForwardRef(forwardRef)
aria-controls="coral-comments-stream-log"
disabled={true}
fullWidth={true}
id="coral-comments-stream-loadMore"
onClick={[Function]}
variant="outlined"
>
Load More
</ForwardRef(forwardRef)>
</Localized>
</ForwardRef(forwardRef)>
</ForwardRef(forwardRef)>
`;
exports[`when there is more renders a load more button 1`] = `
<ForwardRef(forwardRef)
className="Stream-root"
size="double"
>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
viewer={null}
/>
<Relay(CommunityGuidelinesContainerProps)
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
/>
<withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
/>
<SortMenu
onChange={[Function]}
orderBy="CREATED_AT_ASC"
reactionSortLabel="Most Reacted"
/>
<ForwardRef(forwardRef)
aria-live="polite"
data-testid="comments-stream-log"
id="coral-comments-stream-log"
role="log"
>
<Relay(IgnoredTombstoneOrHideContainer)
comment={
Object {
"id": "comment-1",
}
}
key="comment-1"
viewer={null}
>
<ForwardRef(forwardRef)>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={
Object {
"id": "comment-1",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
<withProps(Relay(ReplyListContainer))
comment={
Object {
"id": "comment-1",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</ForwardRef(forwardRef)>
</Relay(IgnoredTombstoneOrHideContainer)>
<Relay(IgnoredTombstoneOrHideContainer)
comment={
Object {
"id": "comment-2",
}
}
key="comment-2"
viewer={null}
>
<ForwardRef(forwardRef)>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={
Object {
"id": "comment-2",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
<withProps(Relay(ReplyListContainer))
comment={
Object {
"id": "comment-2",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</ForwardRef(forwardRef)>
</Relay(IgnoredTombstoneOrHideContainer)>
<Localized
id="comments-stream-loadMore"
>
<ForwardRef(forwardRef)
aria-controls="coral-comments-stream-log"
disabled={false}
fullWidth={true}
id="coral-comments-stream-loadMore"
onClick={[Function]}
variant="outlined"
>
Load More
</ForwardRef(forwardRef)>
</Localized>
</ForwardRef(forwardRef)>
</ForwardRef(forwardRef)>
`;
exports[`when use is logged in renders correctly 1`] = `
<ForwardRef(forwardRef)
className="Stream-root"
size="double"
>
<withContext(createMutationContainer(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withLocalStateContainer(Relay(UserBoxContainer)))))))))
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
viewer={Object {}}
/>
<Relay(CommunityGuidelinesContainerProps)
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
/>
<withContext(withContext(createMutationContainer(withContext(createMutationContainer(withContext(withFetch(withContext(withLocalStateContainer(Relay(PostCommentFormContainer))))))))))
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
/>
<SortMenu
onChange={[Function]}
orderBy="CREATED_AT_ASC"
reactionSortLabel="Most Reacted"
/>
<ForwardRef(forwardRef)
aria-live="polite"
data-testid="comments-stream-log"
id="coral-comments-stream-log"
role="log"
>
<Relay(IgnoredTombstoneOrHideContainer)
comment={
Object {
"id": "comment-1",
}
}
key="comment-1"
viewer={Object {}}
>
<ForwardRef(forwardRef)>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={
Object {
"id": "comment-1",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={Object {}}
/>
<withProps(Relay(ReplyListContainer))
comment={
Object {
"id": "comment-1",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={Object {}}
/>
</ForwardRef(forwardRef)>
</Relay(IgnoredTombstoneOrHideContainer)>
<Relay(IgnoredTombstoneOrHideContainer)
comment={
Object {
"id": "comment-2",
}
}
key="comment-2"
viewer={Object {}}
>
<ForwardRef(forwardRef)>
<withContext(createMutationContainer(withContext(createMutationContainer(Relay(CommentContainer)))))
comment={
Object {
"id": "comment-2",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={Object {}}
/>
<withProps(Relay(ReplyListContainer))
comment={
Object {
"id": "comment-2",
}
}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Reacted",
},
}
}
story={
Object {
"id": "story-id",
"isClosed": false,
}
}
viewer={Object {}}
/>
</ForwardRef(forwardRef)>
</Relay(IgnoredTombstoneOrHideContainer)>
</ForwardRef(forwardRef)>
</ForwardRef(forwardRef)>
`;
src/core/client/stream/tabs/Comments/Stream/__snapshots__/StreamContainer.spec.tsx.snap
-296
View File
@@ -1,296 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<Fragment>
<withContext(createMutationContainer(Relay(StoryClosedTimeoutContainer)))
story={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "story-id",
"isClosed": false,
}
}
/>
<Stream
banned={false}
comments={
Array [
Object {
"id": "comment-1",
},
Object {
"id": "comment-2",
},
]
}
disableLoadMore={false}
onChangeOrderBy={[Function]}
onLoadMore={[Function]}
orderBy="CREATED_AT_ASC"
refetching={false}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Respected",
},
}
}
story={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</Fragment>
`;
exports[`when has more comments renders hasMore 1`] = `
<Fragment>
<withContext(createMutationContainer(Relay(StoryClosedTimeoutContainer)))
story={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "story-id",
"isClosed": false,
}
}
/>
<Stream
banned={false}
comments={
Array [
Object {
"id": "comment-1",
},
Object {
"id": "comment-2",
},
]
}
disableLoadMore={false}
hasMore={true}
onChangeOrderBy={[Function]}
onLoadMore={[Function]}
orderBy="CREATED_AT_ASC"
refetching={false}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Respected",
},
}
}
story={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</Fragment>
`;
exports[`when has more comments when loading more disables load more button 1`] = `
<Fragment>
<withContext(createMutationContainer(Relay(StoryClosedTimeoutContainer)))
story={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "story-id",
"isClosed": false,
}
}
/>
<Stream
banned={false}
comments={
Array [
Object {
"id": "comment-1",
},
Object {
"id": "comment-2",
},
]
}
disableLoadMore={true}
hasMore={true}
onChangeOrderBy={[Function]}
onLoadMore={[Function]}
orderBy="CREATED_AT_ASC"
refetching={false}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Respected",
},
}
}
story={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</Fragment>
`;
exports[`when has more comments when loading more enable load more button after loading is done 1`] = `
<Fragment>
<withContext(createMutationContainer(Relay(StoryClosedTimeoutContainer)))
story={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "story-id",
"isClosed": false,
}
}
/>
<Stream
banned={false}
comments={
Array [
Object {
"id": "comment-1",
},
Object {
"id": "comment-2",
},
]
}
disableLoadMore={false}
hasMore={true}
onChangeOrderBy={[Function]}
onLoadMore={[Function]}
orderBy="CREATED_AT_ASC"
refetching={false}
settings={
Object {
"reaction": Object {
"sortLabel": "Most Respected",
},
}
}
story={
Object {
"comments": Object {
"edges": Array [
Object {
"node": Object {
"id": "comment-1",
},
},
Object {
"node": Object {
"id": "comment-2",
},
},
],
},
"id": "story-id",
"isClosed": false,
}
}
viewer={null}
/>
</Fragment>
`;
src/core/client/stream/tabs/Comments/Stream/__snapshots__/StreamQuery.spec.tsx.snap
-26
View File
@@ -1,26 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders error 1`] = `
<div>
error
</div>
`;
exports[`renders loading 1`] = `
<Delay
ms={500}
>
<ForwardRef(forwardRef)
justifyContent="center"
>
<withPropsOnChange(Spinner) />
</ForwardRef(forwardRef)>
</Delay>
`;
exports[`renders stream container 1`] = `
<Relay(StreamContainer)
defaultOrderBy="CREATED_AT_ASC"
story={Object {}}
/>
`;
src/core/client/stream/tabs/Comments/__snapshots__/CommentsPane.spec.tsx.snap
-5
View File
@@ -1,5 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders permalink view 1`] = `<withContext(withLocalStateContainer(PermalinkViewQuery)) />`;
exports[`renders stream 1`] = `<withContext(withLocalStateContainer(StreamQuery)) />`;
src/core/client/stream/tabs/Comments/index.ts
+1 -4
View File
@@ -1,4 +1 @@
export {
default,
default as CommentsPaneContainer,
} from "./CommentsPaneContainer";
export { default, default as CommentsPane } from "./CommentsPane";

Some files were not shown because too many files have changed in this diff Show More