Merge pull request #4450 from coralproject/develop

8.6.3

.github/PULL_REQUEST_TEMPLATE.md

@@ -37,8 +37,8 @@ Any related Github issue should be linked by adding its URL to this section.
 <!--
 
 In this section, you should describe any changes to be made to the GraphQL
-schema file (located https://github.com/coralproject/talk/blob/main/src/core/server/graph/schema/schema.graphql) or any
-database model (located as types in the https://github.com/coralproject/talk/blob/main/src/core/server/models directory).
+schema file (located https://github.com/coralproject/talk/blob/main/server/src/core/server/graph/schema/schema.graphql) or any
+database model (located as types in the https://github.com/coralproject/talk/tree/main/server/src/core/server/models directory).
 
 If no changes were added to the GraphQL/Database Schema as a part of this PR,
 simply write "None".
@@ -70,7 +70,7 @@ verify features introduced or bugs fixed in this PR.
 
  -->
 
-## Where any tests migrated to React Testing Library?
+## Were any tests migrated to React Testing Library?
 
 <!--
 In this section, you should list the paths to and test names of any tests that were migrated to RTL.

CONTRIBUTING.md

@@ -126,8 +126,8 @@ This can ensure that code reviews contain more meaningful feedback tied to the
 contribution rather than nit-picking on stylistic choices.
 
 Reviewers must ensure that linting and tests pass in CI and locally prior to a
-review taking place. You can do this by running `npm run generate` followed by
-`npm run lint` and `npm run test`.
+review taking place. You can do this by running `sh scripts/generate.sh` followed by
+`sh scripts/lint.sh`. You can run `npm run test` in `/server` and `/client`.
 
 ### Review the feature/fixes
 
@@ -186,7 +186,7 @@ the API and the runtime on the server that powers resolving data from data
 sources. This heavily influences a lot of the decisions around how we create and
 consume it's API internally and how we expose it to others to interact with.
 
-There are many GraphQL types in our [`schema.graphql`](https://github.com/coralproject/talk/blob/main/src/core/server/graph/schema/schema.graphql)
+There are many GraphQL types in our [`schema.graphql`](https://github.com/coralproject/talk/blob/main/server/src/core/server/graph/schema/schema.graphql)
 that define the way we handle data in our API. We'll try to outline a few of
 them here with examples to help you understand their uses.
 
@@ -433,7 +433,7 @@ fragment on Comment {
 ```
 
 Here we see the `@auth` directive. It has documentation describing the various
-parameters allowed located in the [`schema.graphql`](https://github.com/coralproject/talk/blob/main/src/core/server/graph/schema/schema.graphql)
+parameters allowed located in the [`schema.graphql`](https://github.com/coralproject/talk/blob/main/server/src/core/server/graph/schema/schema.graphql)
 file, we'll discuss below what this particular set of parameters can be read as:
 
 - The roles that are allowed to access this information are `MODERATOR` and

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "8.6.2",
+  "version": "8.6.3",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [

client/src/core/client/admin/components/UserRole/UserRoleChange.css

@@ -2,6 +2,7 @@
   width: 100%;
   justify-content: space-between;
   padding: 0;
+  line-height: 1.14;
 }
 
 .arrowsIcon {

client/src/core/client/admin/components/UserRole/UserRoleChangeContainer.tsx

@@ -124,8 +124,6 @@ const UserRoleChangeContainer: FunctionComponent<Props> = ({
 
   const handleOnChangeMembershipScopes = useCallback(
     async (siteIDs: string[]) => {
-      /* eslint-disable */
-      console.log("changing membership scopes");
       await updateUserMembershipScopes({
         userID: user.id,
         membershipScopes: {

client/src/core/client/admin/routes/Community/UserRow.css

@@ -1,17 +1,17 @@
 .usernameColumn {
-  vertical-align: top;
+  vertical-align: middle;
   word-break: break-word;
   padding-top: 15px;
   padding-bottom: 15px;
 }
 .emailColumn {
-  vertical-align: top;
+  vertical-align: middle;
   word-break: break-word;
   padding-top: 15px;
   padding-bottom: 15px;
 }
 .memberSinceColumn {
-  vertical-align: top;
+  vertical-align: middle;
   white-space: nowrap;
   padding-top: 15px;
   padding-bottom: 15px;
@@ -38,9 +38,10 @@
 .deleted {
   display: inline-block;
   padding-left: var(--spacing-2);
-  color: #DC8400;
+  color: #dc8400;
 }
 
 .notAvailable {
   color: var(--palette-text-100);
+  text-align: left;
 }

client/src/core/client/admin/routes/Configure/sections/ModerationPhases/ModerationPhasesConfigContainer.tsx

@@ -78,15 +78,15 @@ const ModerationPhasesConfigContainer: FunctionComponent<Props> = ({
           id="configure-moderationPhases-description"
           elems={{
             externalLink: (
-              <ExternalLink href="https://github.com/coralproject/talk/blob/main/EXTERNAL_MODERATION_PHASES.md#request-signing" />
+              <ExternalLink href="https://docs.coralproject.net/external-moderation-phases" />
             ),
           }}
         >
           <FormFieldDescription>
             Configure a external moderation phase to automate some moderation
             actions. Moderation requests will be JSON encoded and signed. To
             learn more about moderation requests, visit our{" "}
-            <ExternalLink href="https://github.com/coralproject/talk/blob/main/EXTERNAL_MODERATION_PHASES.md#request-signing">
+            <ExternalLink href="https://docs.coralproject.net/external-moderation-phases">
               docs
             </ExternalLink>
             .

client/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.tsx

@@ -31,7 +31,7 @@ const PermalinkPopover: FunctionComponent<Props> = ({
   // Run once.
   useEffect(() => {
     emitShowEvent({ commentID });
-  }, [emitShowEvent, commentID]);
+  }, []);
 
   const timeout: any = useRef<any>(null);
 

client/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx

@@ -1,17 +1,19 @@
 import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import { get } from "lodash";
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useEffect } from "react";
 import { Field, FieldProps, Form } from "react-final-form";
 import { graphql } from "react-relay";
 
+import { useViewerEvent } from "coral-framework/lib/events";
 import { OnSubmit } from "coral-framework/lib/form";
 import { useLocal } from "coral-framework/lib/relay";
 import {
   customMessage,
   validateMaxLength,
 } from "coral-framework/lib/validation";
 import CLASSES from "coral-stream/classes";
+import { ShowReportPopoverEvent } from "coral-stream/events";
 import {
   ButtonSvgIcon,
   ShareExternalLinkIcon,
@@ -75,6 +77,13 @@ const ReportCommentForm: FunctionComponent<Props> = ({
     `
   );
 
+  const emitReportEvent = useViewerEvent(ShowReportPopoverEvent);
+
+  // Run once.
+  useEffect(() => {
+    emitReportEvent({ commentID: id });
+  }, []);
+
   return (
     <div
       className={cn(styles.root, CLASSES.reportPopover.$root)}

common/lib/constants.ts

@@ -152,6 +152,7 @@ export const PROTECTED_EMAIL_DOMAINS = new Set<string>([
   "live.no",
   "yahoo.no",
   "hotmail.no",
+  "rr.com"
 ]);
 
 export const FLAIR_BADGE_NAME_REGEX = "^[\\w.-]+$";

common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "common",
-  "version": "8.6.2",
+  "version": "8.6.3",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "common",
-  "version": "8.6.2",
+  "version": "8.6.3",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

docs/docs/administration.md

@@ -47,7 +47,7 @@ There is also a clock icon in the top right of the page. When you click the icon
 
 You can set the default language Coral uses in **Admin** > **Configure** > **General**.
 
-You can see what languages Coral currently supports here: https://github.com/coralproject/talk/tree/master/src/locales
+You can see what languages Coral currently supports here: https://github.com/coralproject/talk/tree/main/locales
 
 ### Comment Stream Settings
 
@@ -138,7 +138,7 @@ Comments containing a word or phrase in the **Suspect Words** List are placed in
 
 Lists of words/phrases are not case sensitive, and are separated by new lines.
 
-_Note: occasionally comments are marked "Possible Banned Word" - this happens when the banned word check times out, so we don't know if the comment included a banned word or not.  This happens most often in newsrooms that include several thousand banned words on their lists.  It should only occur on a small percentage of your comments.  We will be fixing this problem in the future, so in the meantime you might try trimming your Banned Word list of words/phrases that seem very unlikely to appear, to reduce the frequency of this issue._
+_Note: occasionally comments are marked "Possible Banned Word" - this happens when the banned word check times out, so we don't know if the comment included a banned word or not. This happens most often in newsrooms that include several thousand banned words on their lists. It should only occur on a small percentage of your comments. We will be fixing this problem in the future, so in the meantime you might try trimming your Banned Word list of words/phrases that seem very unlikely to appear, to reduce the frequency of this issue._
 
 ## Email SMTP Settings
 

docs/docs/comment-embed.md

@@ -51,7 +51,7 @@ After successful injection, it includes a shadow dom with the full comment embed
 
 Any custom CSS and CSS Font Faces stylesheets that are configured in the `Advanced` admin configuration section will be used to style the comment embed.
 
-The comment embed uses the same [CSS classes](https://github.com/coralproject/talk/blob/develop/src/core/client/stream/classes.ts) that are available to style any comment in the stream. The comment embed also includes a `coral-comment-embed-container` class that can be used to style it specifically.
+The comment embed uses the same [CSS classes](https://github.com/coralproject/talk/blob/main/client/src/core/client/stream/classes.ts) that are available to style any comment in the stream. The comment embed also includes a `coral-comment-embed-container` class that can be used to style it specifically.
 
 ### Advanced configuration
 
@@ -99,7 +99,7 @@ The simple comment embed html includes the comment's text, comment author's user
 
 - embeddedMediaIframeScript
 
-If you are embedding a comment that includes embedded media (Twitter, Youtube, external media image), you will need to add a script to set the correct height for the embed. A message is already being posted via `postMessage` from the embedded media iframe in the Coral comment. An example of how this might be added can be found in `https://github.com/coralproject/talk/tree/develop/src/core/client/oembed/commentEmbed.html`. To support the embedded media height with this iframe script, you will need to attach the comment embed via shadow dom to an element with the id of `coral-comment-embed-shadowRoot-COMMENT_ID`.
+If you are embedding a comment that includes embedded media (Twitter, Youtube, external media image), you will need to add a script to set the correct height for the embed. A message is already being posted via `postMessage` from the embedded media iframe in the Coral comment. An example of how this might be added can be found in `https://github.com/coralproject/talk/blob/main/client/src/core/client/oembed/commentEmbed.html`. To support the embedded media height with this iframe script, you will need to attach the comment embed via shadow dom to an element with the id of `coral-comment-embed-shadowRoot-COMMENT_ID`.
 
 You will not need to add this script if you are using the Oembed API to add the `simpleCommentEmbedHtml` to your page to work with `commentEmbed.js` injection. The injection script will add the needed iframe script in this case.
 

docs/docs/css.md

@@ -23,7 +23,7 @@ Here is a CSS example that modifies some of the CSS Variables.
 }
 ```
 
-You can find all CSS Variables using the Web Inspector or navigate to https://github.com/coralproject/talk/blob/main/CSS_VARIABLES.md for a comprehensive list and additional information.
+You can find all CSS Variables using the Web Inspector or navigate to [https://github.com/coralproject/talk/blob/main/client/CSS_VARIABLES.md](https://github.com/coralproject/talk/blob/main/client/CSS_VARIABLES.md) for a comprehensive list and additional information.
 
 > **NOTE:** Before 6.3.0 Coral uses a different set of CSS Variables. Navigate to the link above to get information on upgrading.
 
@@ -33,7 +33,7 @@ If you would like to change the styling of any elements of the comment embed, we
 
 The easiest way to find the class name for the element you're looking for is to use the web inspector, and then update your stylesheet accordingly.
 
-You can also navigate to https://github.com/coralproject/talk/blob/main/src/core/client/stream/classes.ts to see available stable class names.
+You can also navigate to https://github.com/coralproject/talk/blob/main/client/src/core/client/stream/classes.ts to see available stable class names.
 
 ### Custom container class for theming
 

docs/docs/development.md

@@ -58,7 +58,13 @@ to start the installation wizard.
 
 To see the comment stream goto http://localhost:8080/.
 
-To run linting and tests use the following commands:
+### To modify environment variables:
+
+Place and modify a `.env` file within `server/`.
+
+Similar to other applications, development environment variables are picked up from a `.env` file. However, since Coral is a mono-repo, you need to create this file within the `server/` folder. This allows Coral's web server to pick up on the configuration at its relative startup root.
+
+### To run linting and tests use the following commands:
 
 ```bash
 # Run the linters.
@@ -103,7 +109,7 @@ We’re so proud to have received submissions from a lot of 3rd party contributo
 translating Coral into their own languages.
 
 You can see what languages Coral currently supports here:
-https://github.com/coralproject/talk/tree/main/src/locales
+https://github.com/coralproject/talk/tree/main/locales
 
 Coral uses the [fluent](http://projectfluent.org/) library and store our
 translations in [FTL](http://projectfluent.org/fluent/guide/) files in

docs/docs/environment-variables.md

@@ -4,7 +4,7 @@ title: Environment Variables
 
 The following environment variables can be set to configure the Coral Server. You
 can expose them in your shell via `export NODE_ENV=development` or by placing
-the variables in a `.env` file in the root of the project in a simple
+the variables in a `.env` file under the `server/` directory of the project in a simple
 `NODE_ENV=development` format delimited by newlines.
 
 ## Required Configuration Variables

docs/docs/events.md

@@ -13,11 +13,11 @@ In this example, we’re logging all events to the console as well as sending th
 ```html
 <script>
   const CoralStreamEmbed = Coral.createStreamEmbed({
-    events: function(events) {
-      events.onAny(function(eventName, data) {
+    events: function (events) {
+      events.onAny(function (eventName, data) {
         console.log(eventName, data);
-        if (eventName === 'createComment.success') {
-          my_event_tracker.send('createComment', data);
+        if (eventName === "createComment.success") {
+          my_event_tracker.send("createComment", data);
         }
       });
     },
@@ -27,6 +27,6 @@ In this example, we’re logging all events to the console as well as sending th
 
 ## Available Events
 
-A complete list of trackable events is available on GitHub: https://github.com/coralproject/talk/blob/main/CLIENT_EVENTS.md
+A complete list of trackable events is available on GitHub: https://github.com/coralproject/talk/blob/main/client/CLIENT_EVENTS.md
 
 _Note: only events that occur on the comment embed stream will be emitted. No events are emitted from Coral's Moderation/Admin interface._

docs/docs/external-moderation-phases.md

@@ -18,7 +18,7 @@ payload.
 When a comment is created or edited, it will be processed by moderation phases in
 a predefined order. Any external moderation phase is run last, and only if all
 other moderation phases before it do not return a status. The current set of
-moderation phases is listed in order [here](https://github.com/coralproject/talk/blob/main/src/core/server/services/comments/pipeline/phases/index.ts).
+moderation phases is listed in order [here](https://github.com/coralproject/talk/blob/main/server/src/core/server/services/comments/pipeline/phases/index.ts).
 
 Once you have received a moderation request, you must respond within the
 provided timeout else the phase will be skipped and it will continue. It is

docs/docs/faq.md

@@ -12,11 +12,11 @@ You can also request help on GitHub by [submitting an issue](https://github.com/
 
 ## How can our dev team contribute to Coral?
 
-We are lucky to work with newsroom dev teams and individual contributors who span the world, and come from newsrooms of all sizes. You can read our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md) to get started, but feel free to reach out to us via GitHub too.
+We are lucky to work with newsroom dev teams and individual contributors who span the world, and come from newsrooms of all sizes. You can read our [Contribution Guide](https://github.com/coralproject/talk/blob/main/CONTRIBUTING.md) to get started, but feel free to reach out to us via GitHub too.
 
 ## What if we want to add a feature you don't have?
 
-Coral is open source, so you're free to develop additional functionality and [submit a pull request](https://github.com/coralproject.net/talk).
+Coral is open source, so you're free to develop additional functionality and [submit a pull request](https://github.com/coralproject/talk).
 
 ## Do you have GDPR features?
 
@@ -30,7 +30,7 @@ Import tools are still in development for version 5, but will be coming soon! Co
 
 ## Does Coral enforce unique usernames?
 
-We don't do this because your [SSO](https://docs.coralproject.net/sso) should be the single source of truth for all user account management, including usernames. If Coral were to reject or change usernames supplied by the SSO, there would be a conflict, as we only receive from your SSO and don't push changes to your user database. 
+We don't do this because your [SSO](https://docs.coralproject.net/sso) should be the single source of truth for all user account management, including usernames. If Coral were to reject or change usernames supplied by the SSO, there would be a conflict, as we only receive from your SSO and don't push changes to your user database.
 
 ## What support is available?
 

docs/docs/installation.md

@@ -128,7 +128,7 @@ the following from your `talk` directory to do this:
 SIGNING_SECRET="$(openssl rand -base64 48)"
 
 # Add a randomly generated secret to your .env file.
-cat >> .env <<EOF
+cat >> server/.env <<EOF
 SIGNING_SECRET=${SIGNING_SECRET}
 EOF
 ```

docs/docs/migrate-data.md

@@ -59,7 +59,7 @@ export CORAL_SITE_ID=""
 
 # This importer tool is designed to work with Coral at the following migration
 # version. This is the newest file in the
-# https://github.com/coralproject/talk/tree/develop/src/core/server/services/migrate/migrations
+# https://github.com/coralproject/talk/tree/main/server/src/core/server/services/migrate/migrations
 # directory for your version of Coral.
 export CORAL_MIGRATION_ID="1582929716101"