From f75e747a25b1c8eadf6c53c6bd62ae8502077acb Mon Sep 17 00:00:00 2001 From: Wyatt Johnson Date: Wed, 29 Jul 2020 23:04:50 +0000 Subject: [PATCH] [CORL-1215] Install Style Tweaks (#3046) * fix logic around repeat posts with or without media embeds: (#3042) * fix: restore ReportCommentEvent (#3037) Co-authored-by: Wyatt Johnson * fix: fixed issue with graphiql (#3043) * README.md Update (#3045) * chore: update README.md * fix: removed README from doctoc * fix: replaced emoji codes with emjoi * fix: removed emoji's due to browser rendering issues * fix: fixed bugs with install styles Co-authored-by: Tessa Thornton Co-authored-by: Vinh --- .dockerignore | 1 - .gitignore | 1 - README.md | 59 +++++++++------- package-lock.json | 9 +-- package.json | 13 ++-- src/core/client/install/App/App.css | 2 +- src/core/client/install/App/Header.css | 14 ++-- src/core/client/install/App/Header.tsx | 9 +-- src/core/client/install/App/Wizard.css | 2 +- .../install/App/steps/AddOrganizationStep.tsx | 2 +- .../client/install/App/steps/FinalStep.tsx | 11 +-- .../App/steps/PermittedDomainsStep.tsx | 2 +- .../install/App/steps/SelectLanguageStep.tsx | 2 +- .../CreateCommentDisagreeMutation.ts | 67 ++++++++++++------- .../ReportFlow/CreateCommentFlagMutation.ts | 67 +++++++++++++------ src/core/server/app/router/index.ts | 4 +- .../comments/pipeline/phases/repeatPost.ts | 9 ++- 17 files changed, 164 insertions(+), 110 deletions(-) diff --git a/.dockerignore b/.dockerignore index 8567ba47c3..0009d500bb 100644 --- a/.dockerignore +++ b/.dockerignore @@ -27,4 +27,3 @@ yarn.lock dist *.css.d.ts __generated__ -README.md.orig diff --git a/.gitignore b/.gitignore index 5f07a743cf..78a0625cfe 100644 --- a/.gitignore +++ b/.gitignore @@ -20,5 +20,4 @@ yarn.lock dist *.css.d.ts __generated__ -README.md.orig persisted-queries.json diff --git a/README.md b/README.md index 6f5151e3ae..a2100791c9 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,52 @@ -# Coral ![CircleCI](https://img.shields.io/circleci/project/github/coralproject/talk.svg) +

+ Coral by Vox Media +

-Online comments are broken. Our open-source commenting platform, Coral, rethinks -how moderation, comment display, and conversation function, creating the -opportunity for safer, smarter discussions around your work. -[Read more about Coral here](https://coralproject.net/talk). +

+ A better commenting experience from Vox Media. +

-Built with <3 by the Coral team, a part of [Vox Media](https://product.voxmedia.com/). +

+ CircleCI + Docker Image Version + Docker Image Size + Twitter Follow +

-Preview Coral easily by running it via a Heroku App: +## Description -[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/coralproject/talk) +Online comments are broken. Our open-source commenting platform, +[Coral](https://coralproject.net), rethinks how moderation, comment display, and +conversation function, creating the opportunity for safer, smarter discussions +around your work. - - -## Table of Contents +We offer hosting and support packages for Coral, as well as exclusive, +customer-only features. [Contact us](https://coralproject.net/pricing/) for more +information or [sign up for a webinar](https://coralproject.net). -- [Documentation](#documentation) -- [Pre-Launch Guide](#pre-launch-guide) -- [More Resources](#more-resources) -- [License](#license) +## Documentation - +If you're new to Coral, the [Coral documentation](https://docs.coralproject.net/) +is a great place to start running and developing with Coral. -## Documentation +You’ve installed Coral, and you’re preparing to launch it on your site. The real +community work starts now, before you go live. You have a unique opportunity +pre-launch to set your community up for success. Read our +[Community Guides](https://guides.coralproject.net/start-here/) to learn more. -You can get started with Coral using our [Documentation](https://docs.coralproject.net/talk/). +## Support -## Pre-Launch Guide +We can help you set up Coral, migrate your comments from another system, +integrate your registration platform, pair with your programmers, and help you +with bespoke installs. To learn more, [contact us](https://coralproject.net/pricing/). -You’ve installed Coral on your server, and you’re preparing to launch it on your site. The real community work starts now, before you go live. You have a unique opportunity pre-launch to set your community up for success. Read our [Community Guides](https://guides.coralproject.net/start-here/) to learn more. +## Contributing -## More Resources +Coral is a Apache-2.0 licensed open-source project built with <3 by the Coral +team, a part of [Vox Media](https://product.voxmedia.com/). -- [Learn more about Coral and sign up for a webinar](https://coralproject.net/) +If you are interested in contributing to Coral, check out our [Contributor's Guide](CONTRIBUTING.md). ## License -Coral is released under the [Apache License, v2.0](/LICENSE). +Coral is [Apache-2.0 licensed](LICENSE). diff --git a/package-lock.json b/package-lock.json index a1275809cd..571656b6f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29508,12 +29508,9 @@ } }, "graphql-playground-html": { - "version": "1.6.22", - "resolved": "https://registry.npmjs.org/graphql-playground-html/-/graphql-playground-html-1.6.22.tgz", - "integrity": "sha512-pqDJ8N8tI1LFORLZTDC+gByuqiBfbirjgMKprFxRbCmFylnIRj2AyUQUhTPQkm08n8pWj8w5T0wWCVtbE323ag==", - "requires": { - "xss": "^1.0.6" - } + "version": "1.6.13", + "resolved": "https://registry.npmjs.org/graphql-playground-html/-/graphql-playground-html-1.6.13.tgz", + "integrity": "sha512-5DNtVeaWrfxrobA2Vp3ypWjAQYGPIXyZ3rdQXy4m4nDJnc4UALPSZRh9y+U4kp8GaoPp1aCgIJerDSRBOT9HnA==" }, "graphql-redis-subscriptions": { "version": "2.2.1", diff --git a/package.json b/package.json index 2a0797b906..1a4e0cacb4 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "migration:create": "ts-node --transpile-only ./scripts/migration/create.ts", "docs:events": "ts-node ./scripts/generateEventDocs.ts ./src/core/client/stream/events.ts ./CLIENT_EVENTS.md", "docs:css-variables": "ts-node ./scripts/generateCSSVariablesDocs.ts ./src/core/client/ui/theme/streamVariables.ts ./CSS_VARIABLES.md", - "doctoc": "doctoc --maxlevel=3 --title '## Table of Contents' README.md CLIENT_EVENTS.md CONTRIBUTING.md WEBHOOKS.md EXTERNAL_MODERATION_PHASES.md", + "doctoc": "doctoc --maxlevel=3 --title '## Table of Contents' CLIENT_EVENTS.md CONTRIBUTING.md WEBHOOKS.md EXTERNAL_MODERATION_PHASES.md", "generate": "npm-run-all generate:css-types generate:schema generate:relay", "generate-persist": "npm-run-all generate:css-types generate:schema generate:relay-persist", "generate:css-types": "tcm src/core/client/", @@ -101,7 +101,7 @@ "graphql-extensions": "^0.11.0", "graphql-fields": "2.0.3", "graphql-import": "^0.7.1", - "graphql-playground-html": "^1.6.22", + "graphql-playground-html": "1.6.13", "graphql-redis-subscriptions": "^2.2.1", "graphql-subscriptions": "^1.1.0", "graphql-tools": "^4.0.7", @@ -409,6 +409,11 @@ "Newer versions has problems with radio and checkbox fields.", "Update when the following issue is resolved:", "https://github.com/final-form/react-final-form/issues/683" + ], + "graphql-playground-html@1.6.13": [ + "A template was broken in a release.", + "Update when the following issue is resolved:", + "https://github.com/prisma-labs/graphql-playground/pull/1238" ] }, "husky": { @@ -429,7 +434,7 @@ "{src/core/client/ui/theme/sharedVariables.ts,src/core/client/ui/theme/streamVariables.ts,scripts/generateCSSVariablesDocs.ts,CSS_VARIABLES.md}": [ "npm run docs:css-variables -- --verify" ], - "{README,CLIENT_EVENTS,CONTRIBUTING,WEBHOOKS,EXTERNAL_MODERATION_PHASES}.md": [ + "{CLIENT_EVENTS,CONTRIBUTING,WEBHOOKS,EXTERNAL_MODERATION_PHASES}.md": [ "npm run doctoc" ] }, @@ -455,4 +460,4 @@ "IE 11", "not dead" ] -} +} \ No newline at end of file diff --git a/src/core/client/install/App/App.css b/src/core/client/install/App/App.css index fd03d9bb1d..9a63b320bd 100644 --- a/src/core/client/install/App/App.css +++ b/src/core/client/install/App/App.css @@ -7,7 +7,7 @@ -webkit-font-smoothing: antialiased; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; - background-color: var(--palette-grey-300); + background-color: var(--palette-background-body); color: var(--palette-text-500); } input::-ms-clear, input::-ms-reveal { diff --git a/src/core/client/install/App/Header.css b/src/core/client/install/App/Header.css index 12fc62536b..6d60366312 100644 --- a/src/core/client/install/App/Header.css +++ b/src/core/client/install/App/Header.css @@ -3,18 +3,16 @@ } .headline { - font-size: 1.2rem; + font-weight: var(--font-weight-primary-regular); } .headlineMain { - font-weight: bold; - font-size: 1.5rem; -} - -.subHeadline { - font-size: 1.5rem; + font-size: var(--font-size-7); + line-height: var(--line-height-7); } .subHeadlineMain { - font-size: 2rem; + font-size: var(--font-size-8); + line-height: var(--line-height-8); + font-weight: var(--font-weight-primary-bold); } diff --git a/src/core/client/install/App/Header.tsx b/src/core/client/install/App/Header.tsx index 50085c86e7..53271a06f0 100644 --- a/src/core/client/install/App/Header.tsx +++ b/src/core/client/install/App/Header.tsx @@ -19,17 +19,14 @@ const Header: FunctionComponent = ({ main }) => { className={styles.root} > Coral by Vox Media Coral Installation Wizard diff --git a/src/core/client/install/App/Wizard.css b/src/core/client/install/App/Wizard.css index 0e4c6049c6..4ed1a7cad7 100644 --- a/src/core/client/install/App/Wizard.css +++ b/src/core/client/install/App/Wizard.css @@ -9,5 +9,5 @@ } .stepBar { - padding: var(--mini-unit) 0 calc(6 * var(--mini-unit)); + padding: var(--mini-unit) 0 calc(8 * var(--mini-unit)); } diff --git a/src/core/client/install/App/steps/AddOrganizationStep.tsx b/src/core/client/install/App/steps/AddOrganizationStep.tsx index ceb89d0dbf..08e5d682a4 100644 --- a/src/core/client/install/App/steps/AddOrganizationStep.tsx +++ b/src/core/client/install/App/steps/AddOrganizationStep.tsx @@ -66,7 +66,7 @@ class AddOrganizationStep extends React.Component { - + Please tell us the name of your organization. This will appear in emails when inviting new team members. diff --git a/src/core/client/install/App/steps/FinalStep.tsx b/src/core/client/install/App/steps/FinalStep.tsx index 7655c27e1f..2963e21b90 100644 --- a/src/core/client/install/App/steps/FinalStep.tsx +++ b/src/core/client/install/App/steps/FinalStep.tsx @@ -1,5 +1,4 @@ import { Localized } from "@fluent/react/compat"; -import { Link } from "found"; import React, { Component } from "react"; import { urls } from "coral-framework/helpers"; @@ -9,14 +8,10 @@ class FinalStep extends Component { public render() { return ( - {urls.admin.moderate}} - > + - Thanks for installing Coral! We sent an email to verify your email - address. While you finish setting up the account, you can start - engaging with your readers now. + Continue to Coral Admin to complete the setup of your organization + and site. diff --git a/src/core/client/install/App/steps/PermittedDomainsStep.tsx b/src/core/client/install/App/steps/PermittedDomainsStep.tsx index 075afaa1ad..dc34d4e658 100644 --- a/src/core/client/install/App/steps/PermittedDomainsStep.tsx +++ b/src/core/client/install/App/steps/PermittedDomainsStep.tsx @@ -68,7 +68,7 @@ class PermittedDomainsStep extends Component { - + Enter the domains you would like to permit for Coral, e.g. your local, staging and production environments including the scheme (ex. http://localhost:3000, https://staging.domain.com, diff --git a/src/core/client/install/App/steps/SelectLanguageStep.tsx b/src/core/client/install/App/steps/SelectLanguageStep.tsx index 1140b23cde..a899ccb4b4 100644 --- a/src/core/client/install/App/steps/SelectLanguageStep.tsx +++ b/src/core/client/install/App/steps/SelectLanguageStep.tsx @@ -57,7 +57,7 @@ const SelectLanguageStep: FunctionComponent = (props) => { - + Choose the language to be used during the installation process. This will also be the default language for your Coral community. diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentDisagreeMutation.ts b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentDisagreeMutation.ts index c60701468a..f05a436c6f 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentDisagreeMutation.ts +++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentDisagreeMutation.ts @@ -6,6 +6,7 @@ import { createMutation, MutationInput, } from "coral-framework/lib/relay"; +import { ReportCommentEvent } from "coral-stream/events"; import { CreateCommentDisagreeMutation as MutationTypes } from "coral-stream/__generated__/CreateCommentDisagreeMutation.graphql"; @@ -13,32 +14,52 @@ let clientMutationId = 0; const CreateCommentDisagreeMutation = createMutation( "createCommentDisagree", - (environment: Environment, input: MutationInput) => - commitMutationPromiseNormalized(environment, { - mutation: graphql` - mutation CreateCommentDisagreeMutation( - $input: CreateCommentDontAgreeInput! - ) { - createCommentDontAgree(input: $input) { - comment { - id - viewerActionPresence { - dontAgree + ( + environment: Environment, + input: MutationInput, + { eventEmitter } + ) => { + const reportCommentEvent = ReportCommentEvent.begin(eventEmitter, { + reason: "DONT_AGREE", + additionalDetails: input.additionalDetails || undefined, + commentID: input.commentID, + }); + try { + const result = commitMutationPromiseNormalized( + environment, + { + mutation: graphql` + mutation CreateCommentDisagreeMutation( + $input: CreateCommentDontAgreeInput! + ) { + createCommentDontAgree(input: $input) { + comment { + id + viewerActionPresence { + dontAgree + } + } + clientMutationId } } - clientMutationId - } + `, + variables: { + input: { + commentID: input.commentID, + commentRevisionID: input.commentRevisionID, + additionalDetails: input.additionalDetails, + clientMutationId: (clientMutationId++).toString(), + }, + }, } - `, - variables: { - input: { - commentID: input.commentID, - commentRevisionID: input.commentRevisionID, - additionalDetails: input.additionalDetails, - clientMutationId: (clientMutationId++).toString(), - }, - }, - }) + ); + reportCommentEvent.success(); + return result; + } catch (error) { + reportCommentEvent.error({ message: error.message, code: error.code }); + throw error; + } + } ); export default CreateCommentDisagreeMutation; diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentFlagMutation.ts b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentFlagMutation.ts index fd767a227d..96bff1249c 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentFlagMutation.ts +++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/CreateCommentFlagMutation.ts @@ -6,6 +6,7 @@ import { createMutation, MutationInput, } from "coral-framework/lib/relay"; +import { ReportCommentEvent } from "coral-stream/events"; import { CreateCommentFlagMutation as MutationTypes } from "coral-stream/__generated__/CreateCommentFlagMutation.graphql"; @@ -13,31 +14,53 @@ let clientMutationId = 0; const CreateCommentFlagMutation = createMutation( "createCommentFlag", - (environment: Environment, input: MutationInput) => - commitMutationPromiseNormalized(environment, { - mutation: graphql` - mutation CreateCommentFlagMutation($input: CreateCommentFlagInput!) { - createCommentFlag(input: $input) { - comment { - id - viewerActionPresence { - flag + ( + environment: Environment, + input: MutationInput, + { eventEmitter } + ) => { + const reportCommentEvent = ReportCommentEvent.begin(eventEmitter, { + reason: input.reason, + commentID: input.commentID, + additionalDetails: input.additionalDetails || undefined, + }); + try { + const result = commitMutationPromiseNormalized( + environment, + { + mutation: graphql` + mutation CreateCommentFlagMutation( + $input: CreateCommentFlagInput! + ) { + createCommentFlag(input: $input) { + comment { + id + viewerActionPresence { + flag + } + } + clientMutationId } } - clientMutationId - } + `, + variables: { + input: { + commentID: input.commentID, + commentRevisionID: input.commentRevisionID, + reason: input.reason, + additionalDetails: input.additionalDetails, + clientMutationId: (clientMutationId++).toString(), + }, + }, } - `, - variables: { - input: { - commentID: input.commentID, - commentRevisionID: input.commentRevisionID, - reason: input.reason, - additionalDetails: input.additionalDetails, - clientMutationId: (clientMutationId++).toString(), - }, - }, - }) + ); + reportCommentEvent.success(); + return result; + } catch (error) { + reportCommentEvent.error({ message: error.message, code: error.code }); + throw error; + } + } ); export default CreateCommentFlagMutation; diff --git a/src/core/server/app/router/index.ts b/src/core/server/app/router/index.ts index 45ae36e63f..b219c0e342 100644 --- a/src/core/server/app/router/index.ts +++ b/src/core/server/app/router/index.ts @@ -2,7 +2,7 @@ import express, { Router } from "express"; import { LanguageCode } from "coral-common/helpers/i18n/locales"; import { AppOptions } from "coral-server/app"; -import playground from "coral-server/app/middleware/playground"; +import playgroundMiddleware from "coral-server/app/middleware/playground"; import { RouterOptions } from "coral-server/app/router/types"; import logger from "coral-server/logger"; @@ -61,7 +61,7 @@ function attachGraphiQL(router: Router, app: AppOptions) { // GraphiQL router.get( "/graphiql", - playground({ + playgroundMiddleware({ endpoint: "/api/graphql", subscriptionEndpoint: "/api/graphql/live", }) diff --git a/src/core/server/services/comments/pipeline/phases/repeatPost.ts b/src/core/server/services/comments/pipeline/phases/repeatPost.ts index 72d361efad..31412575f7 100644 --- a/src/core/server/services/comments/pipeline/phases/repeatPost.ts +++ b/src/core/server/services/comments/pipeline/phases/repeatPost.ts @@ -57,6 +57,13 @@ export const repeatPost: IntermediateModerationPhase = async ({ // Giphy is enabled. If the medias are the same, then this is a repeat // comment otherwise they are not. if ( + (!lastCommentRevision.media && !media) || + (lastCommentRevision.media && !media) + ) { + // comment body was the same and neither comment has media OR the previous + // comment had media but the current one does not + similarity = true; + } else if ( // Check to see if the last comment revision has a Giphy Media // object. lastCommentRevision.media && @@ -76,7 +83,7 @@ export const repeatPost: IntermediateModerationPhase = async ({ } } else { // Body text was the same and Giphy support was not enabled. - similarity = false; + similarity = true; } if (similarity) {