Merge pull request #3703 from coralproject/develop

v6.15.0

.circleci/config.yml

@@ -52,6 +52,7 @@ jobs:
       - run:
           name: Install dependencies
           command: npm ci
+          no_output_timeout: 20m
       - save_cache:
           key: v1-dependency-cache-{{ checksum "package-lock.json" }}
           paths:

.eslintrc.js

@@ -151,11 +151,14 @@ const jestOverrides = {
   env: {
     jest: true,
   },
-  files: ["test/**/*.ts", "test/**/*.tsx"],
+  files: ["test/**/*.ts", "test/**/*.tsx", "**/*.spec.ts", "**/*.spec.tsx"],
   globals: {
     expectAndFail: "readonly",
     fail: "readonly",
   },
+  rules: {
+    "no-restricted-globals": "off",
+  },
 };
 
 // Setup the overrides.
@@ -217,6 +220,30 @@ module.exports = {
     "no-irregular-whitespace": "off",
     "no-multiple-empty-lines": "off",
     "no-new-wrappers": "error",
+    "no-restricted-globals": [
+      "error",
+      {
+        name: "window",
+        message:
+          "Get it from 'CoralContext' if possible. Otherwise ignore and make sure using 'window' globally will work in all environments: 'SSR', 'Testing', and 'Browser'",
+      },
+      {
+        name: "document",
+        message: "Replace with `window.document`",
+      },
+      {
+        name: "localStorage",
+        message: "Replace with `window.localStorage`",
+      },
+      {
+        name: "sessionStorage",
+        message: "Replace with `window.sessionStorage`",
+      },
+      {
+        name: "confirm",
+        message: "Replace with `window.confirm`",
+      },
+    ],
     "no-prototype-builtins": "error",
     "no-shadow": "error",
     "no-throw-literal": "error",

CLIENT_EVENTS.md

@@ -84,6 +84,7 @@ createComment.error
 - <a href="#changeEmail">changeEmail</a>
 - <a href="#changePassword">changePassword</a>
 - <a href="#changeUsername">changeUsername</a>
+- <a href="#closeMobileToolbar">closeMobileToolbar</a>
 - <a href="#closeStory">closeStory</a>
 - <a href="#copyPermalink">copyPermalink</a>
 - <a href="#createComment">createComment</a>
@@ -94,6 +95,10 @@ createComment.error
 - <a href="#featureComment">featureComment</a>
 - <a href="#gotoModeration">gotoModeration</a>
 - <a href="#ignoreUser">ignoreUser</a>
+- <a href="#jumpToNextComment">jumpToNextComment</a>
+- <a href="#jumpToNextUnseenComment">jumpToNextUnseenComment</a>
+- <a href="#jumpToPreviousComment">jumpToPreviousComment</a>
+- <a href="#jumpToPreviousUnseenComment">jumpToPreviousUnseenComment</a>
 - <a href="#loadMoreAllComments">loadMoreAllComments</a>
 - <a href="#loadMoreFeaturedComments">loadMoreFeaturedComments</a>
 - <a href="#loadMoreHistoryComments">loadMoreHistoryComments</a>
@@ -131,6 +136,7 @@ createComment.error
 - <a href="#signOut">signOut</a>
 - <a href="#signedIn">signedIn</a>
 - <a href="#unfeatureComment">unfeatureComment</a>
+- <a href="#unmarkAll">unmarkAll</a>
 - <a href="#updateNotificationSettings">updateNotificationSettings</a>
 - <a href="#updateStorySettings">updateStorySettings</a>
 - <a href="#updateUserMediaSettings">updateUserMediaSettings</a>
@@ -206,6 +212,7 @@ createComment.error
       };
   }
   ```
+- <a id="closeMobileToolbar">**closeMobileToolbar**</a>: This event is emitted when the viewer closes to mobile toolbar.
 - <a id="closeStory">**closeStory.success**, **closeStory.error**</a>: This event is emitted when the viewer closes the story.
   ```ts
   {
@@ -307,6 +314,30 @@ createComment.error
       };
   }
   ```
+- <a id="jumpToNextComment">**jumpToNextComment**</a>: This event is emitted when the viewer triggered the C Key (Next Comment Traversal) functionality.
+  ```ts
+  {
+      source: "keyboard" | "mobileToolbar";
+  }
+  ```
+- <a id="jumpToNextUnseenComment">**jumpToNextUnseenComment**</a>: This event is emitted when the viewer triggered the Z Key (Next Unseen Comment Traversal) functionality.
+  ```ts
+  {
+      source: "keyboard" | "mobileToolbar";
+  }
+  ```
+- <a id="jumpToPreviousComment">**jumpToPreviousComment**</a>: This event is emitted when the viewer triggered the Shift+C Key (Prev Comment Traversal) functionality.
+  ```ts
+  {
+      source: "keyboard" | "mobileToolbar";
+  }
+  ```
+- <a id="jumpToPreviousUnseenComment">**jumpToPreviousUnseenComment**</a>: This event is emitted when the viewer triggered the Shift+Z Key (Prev Unseen Comment Traversal) functionality.
+  ```ts
+  {
+      source: "keyboard" | "mobileToolbar";
+  }
+  ```
 - <a id="loadMoreAllComments">**loadMoreAllComments.success**, **loadMoreAllComments.error**</a>: This event is emitted when the viewer loads more top level comments into the comment stream.
   ```ts
   {
@@ -552,6 +583,12 @@ createComment.error
       };
   }
   ```
+- <a id="unmarkAll">**unmarkAll**</a>: This event is emitted when the viewer triggeres the Unmark all functionality.
+  ```ts
+  {
+      source: "keyboard" | "mobileToolbar";
+  }
+  ```
 - <a id="updateNotificationSettings">**updateNotificationSettings.success**, **updateNotificationSettings.error**</a>: This event is emitted when the viewer updates its notification settings.
   ```ts
   {

README.md

@@ -5,7 +5,7 @@
 ✨👩🏻‍💻👨🏽‍💻🧑🏾‍💻👩🏼‍💻👨🏻‍💻✨
 
 <p align="center">
-  <a href="https://coralproject.net" target="_blank"><img width="250" src="https://docs.coralproject.net/coral/images/coralproject_by_voxmedia.svg" alt="Coral by Vox Media" /></a>
+  <a href="https://coralproject.net" target="_blank"><img width="250" src="https://docs.coralproject.net/img/coralproject_by_voxmedia.svg" alt="Coral by Vox Media" /></a>
 </p>
 
 <p align="center">

package.json

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

src/core/build/publicPath.js

@@ -1,2 +1,3 @@
 __webpack_public_path__ =
+  // eslint-disable-next-line no-restricted-globals
   JSON.parse(document.getElementById("config").innerText).staticURI || "/";

src/core/client/account/index.tsx

@@ -23,6 +23,7 @@ async function main() {
     </ManagedCoralContextProvider>
   );
 
+  // eslint-disable-next-line no-restricted-globals
   ReactDOM.render(<Index />, document.getElementById("app"));
 }
 

src/core/client/admin/App/UserMenu/__snapshots__/UserMenu.spec.tsx.snap

@@ -9,13 +9,13 @@ exports[`renders correctly 1`] = `
   }
   id="userMenu-popover"
 >
-  <withPropsOnChange(Popover)
+  <withPropsOnChange(withUIContext(Popover))
     body={[Function]}
     description="A dialog of the user menu with related links and actions"
     id="userMenu"
     placement="bottom-end"
   >
     [Function]
-  </withPropsOnChange(Popover)>
+  </withPropsOnChange(withUIContext(Popover))>
 </Localized>
 `;

src/core/client/admin/components/Comment/CommentContent.tsx

@@ -22,10 +22,12 @@ const getSanitize: (highlight: boolean) => Sanitize = (() => {
   return (highlight: boolean) => {
     if (!sanitizers) {
       sanitizers = {
+        // eslint-disable-next-line no-restricted-globals
         default: createSanitize(window, {
           // Allow all RTE features to be displayed.
           features: ALL_FEATURES,
         }),
+        // eslint-disable-next-line no-restricted-globals
         highlight: createSanitize(window, {
           // We need normalized text nodes to mark nodes for suspect/banned words.
           normalize: true,

src/core/client/admin/components/ModerateCard/LinkDetailsContainer.tsx

@@ -3,8 +3,8 @@ import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import { CopyButton } from "coral-framework/components";
-
 import { getURLWithCommentID } from "coral-framework/helpers";
+import { useCoralContext } from "coral-framework/lib/bootstrap/CoralContext";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { getLocationOrigin } from "coral-framework/utils";
 import { Icon } from "coral-ui/components/v2";
@@ -23,6 +23,7 @@ const LinkDetailsContainer: FunctionComponent<Props> = ({
   comment,
   settings,
 }) => {
+  const { window } = useCoralContext();
   return (
     <>
       <div className={styles.label}>
@@ -55,7 +56,9 @@ const LinkDetailsContainer: FunctionComponent<Props> = ({
       </div>
       <div className={styles.buttonContainer}>
         <CopyButton
-          text={`${getLocationOrigin()}/admin/moderate/comment/${comment.id}`}
+          text={`${getLocationOrigin(window)}/admin/moderate/comment/${
+            comment.id
+          }`}
           variant="regular"
           color="regular"
           innerCopied={

src/core/client/admin/helpers/getPhrasesRegExp.ts

@@ -2,6 +2,7 @@ import { toLower, uniqBy } from "lodash";
 
 import { LanguageCode } from "coral-common/helpers";
 import createWordListRegExp from "coral-common/utils/createWordListRegExp";
+import { globalErrorReporter } from "coral-framework/lib/errors/reporter";
 
 export interface GetPhrasesRegExpOptions {
   locale: string;
@@ -77,7 +78,7 @@ export default function (options: GetPhrasesRegExpOptions) {
     try {
       cache.value = getPhrasesRegExp(options);
     } catch (err) {
-      window.console.error(err);
+      globalErrorReporter.report(err);
       return null;
     }
   }

src/core/client/admin/helpers/markHTMLNode.ts

@@ -50,7 +50,7 @@ export default function markHTMLNode(parentNode: Node, expression: RegExp) {
     const replacement = markPhrasesHTML(node.textContent, expression);
     if (replacement) {
       // Create the new span node to replace the old node with.
-      const newNode = document.createElement("span");
+      const newNode = parentNode.ownerDocument!.createElement("span");
       newNode.innerHTML = replacement;
       parentNode.replaceChild(newNode, node);
     }

src/core/client/admin/index.tsx

@@ -26,6 +26,7 @@ async function main() {
     </ManagedCoralContextProvider>
   );
 
+  // eslint-disable-next-line no-restricted-globals
   ReactDOM.render(<Index />, document.getElementById("app"));
 }
 

src/core/client/admin/local/initLocalState.spec.ts

@@ -15,6 +15,8 @@ let source: RecordSource;
 const context = {
   localStorage: window.localStorage,
   sessionStorage: window.sessionStorage,
+  window,
+  renderWindow: window,
 };
 
 beforeEach(() => {

src/core/client/admin/local/initLocalState.ts

@@ -30,10 +30,10 @@ const initLocalState: InitLocalState = async ({
   let error: string | null = null;
 
   // Get all the parameters from the hash.
-  const params = getParamsFromHash();
+  const params = getParamsFromHash(context.window);
   if (params && (params.accessToken || params.error)) {
     // If there were params in the hash, then clear them!
-    clearHash();
+    clearHash(context.window);
 
     // If there was an error, add it.
     if (params.error) {

src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx

@@ -95,6 +95,7 @@ class AuthConfigContainer extends React.Component<Props> {
         "No authentication integration has been enabled for the Comment Stream. Do you really want to continue?"
       );
 
+      // eslint-disable-next-line no-restricted-globals
       if (!window.confirm(confirmMessage)) {
         cancel();
       }

src/core/client/admin/routes/Configure/sections/ModerationPhases/ConfigureExternalModerationPhase/ExternalModerationPhaseDangerZone.tsx

@@ -58,6 +58,7 @@ const ExternalModerationPhaseDangerZone: FunctionComponent<Props> = ({
       "Enabling the external moderation phase will start to send moderation queries to this URL. Are you sure you want to continue?"
     );
 
+    // eslint-disable-next-line no-restricted-globals
     if (window.confirm(message)) {
       await enableExternalModerationPhase({ id: phase.id });
     }
@@ -69,6 +70,7 @@ const ExternalModerationPhaseDangerZone: FunctionComponent<Props> = ({
       "Disabling this external moderation phase will stop any new moderation queries from being sent to this URL. Are you sure you want to continue?"
     );
 
+    // eslint-disable-next-line no-restricted-globals
     if (window.confirm(message)) {
       await disableExternalModerationPhase({ id: phase.id });
     }
@@ -81,6 +83,7 @@ const ExternalModerationPhaseDangerZone: FunctionComponent<Props> = ({
       "Deleting this external moderation phase will stop any new moderation queries from being sent to this URL and will remove all the associated settings. Are you sure you want to continue?"
     );
 
+    // eslint-disable-next-line no-restricted-globals
     if (window.confirm(message)) {
       await deleteExternalModerationPhase({ id: phase.id });
 

src/core/client/admin/routes/Configure/sections/ModerationPhases/ConfigureExternalModerationPhase/RotateSigningSecretModal.tsx

@@ -4,6 +4,7 @@ import React, { FunctionComponent, useCallback } from "react";
 import { Field, Form } from "react-final-form";
 
 import { useNotification } from "coral-admin/App/GlobalNotification";
+import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { InvalidRequestError } from "coral-framework/lib/errors";
 import { useMutation } from "coral-framework/lib/relay";
 import {
@@ -37,6 +38,7 @@ const RotateWebhookEndpointSigningSecretModal: FunctionComponent<Props> = ({
   open,
   phaseID,
 }) => {
+  const { window } = useCoralContext();
   const rotateExternalModerationPhaseSigningSecret = useMutation(
     RotateExternalModerationPhaseSigningSecretMutation
   );
@@ -74,7 +76,14 @@ const RotateWebhookEndpointSigningSecretModal: FunctionComponent<Props> = ({
 
       return;
     },
-    [phaseID, rotateExternalModerationPhaseSigningSecret]
+    [
+      clearMessage,
+      onHide,
+      phaseID,
+      rotateExternalModerationPhaseSigningSecret,
+      setMessage,
+      window,
+    ]
   );
 
   return (

src/core/client/admin/routes/Configure/sections/Sites/EmbedCode.tsx

@@ -2,6 +2,7 @@ import { stripIndent } from "common-tags";
 import React, { FunctionComponent, useMemo } from "react";
 
 import { CopyButton } from "coral-framework/components";
+import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { GetMessage, withGetMessage } from "coral-framework/lib/i18n";
 import { getLocationOrigin } from "coral-framework/utils";
 import { HorizontalGutter, Textarea } from "coral-ui/components/v2";
@@ -14,9 +15,10 @@ interface Props {
 }
 
 const EmbedCode: FunctionComponent<Props> = ({ staticURI, getMessage }) => {
+  const { window } = useCoralContext();
   const embed = useMemo(() => {
     // Get the origin of the current page.
-    const origin = getLocationOrigin();
+    const origin = getLocationOrigin(window);
 
     // Optionally use the staticURI for configuration.
     const script = staticURI || origin;

src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpoint/EndpointDangerZone.tsx

@@ -52,6 +52,7 @@ const EndpointDangerZone: FunctionComponent<Props> = ({
       "Enabling the webhook endpoint will start to send events to this URL. Are you sure you want to continue?"
     );
 
+    // eslint-disable-next-line no-restricted-globals
     if (window.confirm(message)) {
       await enableWebhookEndpoint({ id: webhookEndpoint.id });
     }
@@ -63,6 +64,7 @@ const EndpointDangerZone: FunctionComponent<Props> = ({
       "Disabling this webhook endpoint will stop any new events from being sent to this URL. Are you sure you want to continue?"
     );
 
+    // eslint-disable-next-line no-restricted-globals
     if (window.confirm(message)) {
       await disableWebhookEndpoint({ id: webhookEndpoint.id });
     }
@@ -75,6 +77,7 @@ const EndpointDangerZone: FunctionComponent<Props> = ({
       "Deleting this webhook endpoint will stop any new events from being sent to this URL, and remove all the associated settings with this webhook endpoint. Are you sure you want to continue?"
     );
 
+    // eslint-disable-next-line no-restricted-globals
     if (window.confirm(message)) {
       await deleteWebhookEndpoint({ id: webhookEndpoint.id });