Merge branch 'develop' into feat/update-mongo

client/package.json

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

client/src/core/client/admin/components/MediaContainer/GiphyMedia.tsx → client/src/core/client/admin/components/MediaContainer/GifMedia.tsx

@@ -2,7 +2,7 @@ import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
 import { ButtonPlayIcon, SvgIcon } from "coral-ui/components/icons";
-import { BaseButton, Flex } from "coral-ui/components/v2";
+import { BaseButton, Button, Flex } from "coral-ui/components/v2";
 
 import styles from "./Media.css";
 
@@ -12,19 +12,56 @@ interface Props {
   width: number | null;
   height: number | null;
   video: string | null;
+  url: string | null;
 }
 
-const GiphyMedia: FunctionComponent<Props> = ({
+const GifMedia: FunctionComponent<Props> = ({
   still,
   title,
   width,
   height,
   video,
+  url,
 }) => {
   const [showAnimated, setShowAnimated] = useState(false);
   const toggleImage = useCallback(() => {
     setShowAnimated(!showAnimated);
   }, [showAnimated]);
+
+  if (!still && !video) {
+    // Fallback to show/hide gif if there is no still and no video
+    return (
+      <>
+        <Button
+          iconLeft
+          variant="outlined"
+          color="regular"
+          onClick={toggleImage}
+          size="small"
+          className={styles.showHideButton}
+          aria-expanded="false"
+        >
+          {showAnimated ? (
+            <Localized id="comments-embedLinks-hide-gif">Hide GIF</Localized>
+          ) : (
+            <Localized id="comments-embedLinks-show-gif">Show GIF</Localized>
+          )}
+        </Button>
+        {showAnimated && (
+          <div className={styles.embed}>
+            <img
+              src={url ?? ""}
+              className={styles.image}
+              loading="lazy"
+              referrerPolicy="no-referrer"
+              alt={title ?? ""}
+            />
+          </div>
+        )}
+      </>
+    );
+  }
+
   return (
     <div className={styles.embed}>
       {!showAnimated && still && (
@@ -74,4 +111,4 @@ const GiphyMedia: FunctionComponent<Props> = ({
   );
 };
 
-export default GiphyMedia;
+export default GifMedia;

client/src/core/client/admin/components/MediaContainer/Media.css

@@ -32,3 +32,8 @@
   display: block;
   max-width: 100%;
 }
+
+.showHideButton {
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-2);
+}

client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx

@@ -6,8 +6,7 @@ import { withFragmentContainer } from "coral-framework/lib/relay";
 import { MediaContainer_comment } from "coral-admin/__generated__/MediaContainer_comment.graphql";
 
 import ExternalMedia from "./ExternalMedia";
-import GiphyMedia from "./GiphyMedia";
-import TenorMedia from "./TenorMedia";
+import GifMedia from "./GifMedia";
 import TwitterMedia from "./TwitterMedia";
 import YouTubeMedia from "./YouTubeMedia";
 
@@ -24,12 +23,13 @@ const MediaContainer: FunctionComponent<Props> = ({ comment }) => {
   switch (media.__typename) {
     case "GiphyMedia":
       return (
-        <GiphyMedia
+        <GifMedia
           still={media.still}
           video={media.video}
           title={media.title}
           width={media.width}
           height={media.height}
+          url={media.url}
         />
       );
     case "ExternalMedia":
@@ -59,7 +59,16 @@ const MediaContainer: FunctionComponent<Props> = ({ comment }) => {
         />
       );
     case "TenorMedia":
-      return <TenorMedia url={media.url} title={media.title} />;
+      return (
+        <GifMedia
+          still={media.tenorStill}
+          video={media.tenorVideo}
+          title={media.title}
+          width={media.width}
+          height={media.height}
+          url={media.url}
+        />
+      );
     case "%other":
       return null;
   }
@@ -86,6 +95,10 @@ const enhanced = withFragmentContainer<Props>({
           ... on TenorMedia {
             url
             title
+            width
+            height
+            tenorStill: still
+            tenorVideo: video
           }
           ... on TwitterMedia {
             url

client/src/core/client/admin/components/MediaContainer/index.ts

@@ -1,4 +1,4 @@
 export { default as MediaContainer } from "./MediaContainer";
-export { default as GiphyMedia } from "./GiphyMedia";
+export { default as GifMedia } from "./GifMedia";
 export { default as TwitterMedia } from "./TwitterMedia";
 export { default as YouTubeMedia } from "./YouTubeMedia";

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

@@ -4,14 +4,13 @@ import { graphql } from "react-relay";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { HorizontalGutter, Timestamp } from "coral-ui/components/v2";
 import ExternalMedia from "../MediaContainer/ExternalMedia";
-import GiphyMedia from "../MediaContainer/GiphyMedia";
+import GifMedia from "../MediaContainer/GifMedia";
 import TwitterMedia from "../MediaContainer/TwitterMedia";
 import YouTubeMedia from "../MediaContainer/YouTubeMedia";
 
 import { CommentRevisionContainer_comment as CommentData } from "coral-admin/__generated__/CommentRevisionContainer_comment.graphql";
 
 import { CommentContent } from "../Comment";
-import TenorMedia from "../MediaContainer/TenorMedia";
 
 interface Props {
   comment: CommentData;
@@ -33,12 +32,13 @@ const CommentRevisionContainer: FunctionComponent<Props> = ({ comment }) => {
             <Timestamp>{c.createdAt}</Timestamp>
             <CommentContent>{c.body ? c.body : ""}</CommentContent>
             {c.media && c.media.__typename === "GiphyMedia" && (
-              <GiphyMedia
+              <GifMedia
                 still={c.media.still}
                 video={c.media.video}
                 title={c.media.title}
                 width={c.media.width}
                 height={c.media.height}
+                url={c.media.url}
               />
             )}
             {c.media && c.media.__typename === "ExternalMedia" && (
@@ -65,7 +65,14 @@ const CommentRevisionContainer: FunctionComponent<Props> = ({ comment }) => {
               />
             )}
             {c.media && c.media.__typename === "TenorMedia" && (
-              <TenorMedia url={c.media.url} title={c.media.title} />
+              <GifMedia
+                still={c.media.tenorStill}
+                video={c.media.tenorVideo}
+                title={c.media.title}
+                width={c.media.width}
+                height={c.media.height}
+                url={c.media.url}
+              />
             )}
           </div>
         ))}
@@ -100,6 +107,10 @@ const enhanced = withFragmentContainer<Props>({
           ... on TenorMedia {
             url
             title
+            width
+            height
+            tenorStill: still
+            tenorVideo: video
           }
           ... on TwitterMedia {
             url

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

@@ -43,14 +43,14 @@ const EndpointStatus: FunctionComponent<Props> = ({ webhookEndpoint }) => {
           id="configure-webhooks-signingSecretDescription"
           elems={{
             externalLink: (
-              <ExternalLink href="https://github.com/coralproject/talk/blob/main/WEBHOOKS.md#webhook-signing" />
+              <ExternalLink href="https://github.com/coralproject/talk/blob/main/server/WEBHOOKS.md#webhook-signing" />
             ),
           }}
         >
           <FormFieldDescription>
             The following signing secret is used to sign request payloads sent
             to the URL. To learn more about webhook signing, visit our{" "}
-            <ExternalLink href="https://github.com/coralproject/talk/blob/main/WEBHOOKS.md#webhook-signing">
+            <ExternalLink href="https://github.com/coralproject/talk/blob/main/server/WEBHOOKS.md#webhook-signing">
               Webhook Guide
             </ExternalLink>
             .

client/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/ConfigureWebhookEndpointForm/EventsSelectField.tsx

@@ -81,14 +81,14 @@ const EventsSelectField: FunctionComponent<Props> = ({ settings }) => {
         id="configure-webhooks-eventsToSendDescription"
         elems={{
           externalLink: (
-            <ExternalLink href="https://github.com/coralproject/talk/blob/main/WEBHOOKS.md#events-listing" />
+            <ExternalLink href="https://github.com/coralproject/talk/blob/main/server/WEBHOOKS.md#events-listing" />
           ),
         }}
       >
         <FormFieldDescription>
           These are the events that are registered to this particular endpoint.
           Visit our{" "}
-          <ExternalLink href="https://github.com/coralproject/talk/blob/main/WEBHOOKS.md#events-listing">
+          <ExternalLink href="https://github.com/coralproject/talk/blob/main/server/WEBHOOKS.md#events-listing">
             Webhook Guide
           </ExternalLink>{" "}
           for the schema of these events. Any event matching the following will

client/src/core/client/admin/routes/Configure/sections/WebhookEndpoints/WebhookEndpointsConfigContainer.tsx

@@ -47,15 +47,15 @@ const WebhookEndpointsConfigContainer: FunctionComponent<Props> = ({
           id="configure-webhooks-description"
           elems={{
             externalLink: (
-              <ExternalLink href="https://github.com/coralproject/talk/blob/main/WEBHOOKS.md" />
+              <ExternalLink href="https://github.com/coralproject/talk/blob/main/server/WEBHOOKS.md" />
             ),
           }}
         >
           <FormFieldDescription>
             Configure an endpoint to send events to when events occur within
             Coral. These events will be JSON encoded and signed. To learn more
             about webhook signing, visit our{" "}
-            <ExternalLink href="https://github.com/coralproject/talk/blob/main/WEBHOOKS.md">
+            <ExternalLink href="https://github.com/coralproject/talk/blob/main/server/WEBHOOKS.md">
               our docs
             </ExternalLink>
             .

client/src/core/client/count/index.ts

@@ -1,6 +1,9 @@
 import { COUNT_SELECTOR } from "coral-framework/constants";
-import detectCountScript from "coral-framework/helpers/detectCountScript";
-import resolveStoryURL from "coral-framework/helpers/resolveStoryURL";
+import {
+  bytesToBase64,
+  detectCountScript,
+  resolveStoryURL,
+} from "coral-framework/helpers";
 import jsonp from "coral-framework/utils/jsonp";
 
 import injectJSONPCallback from "./injectJSONPCallback";
@@ -13,7 +16,7 @@ interface CountQueryArgs {
 
 /** createCountQueryRef creates a unique reference from the query args */
 function createCountQueryRef(args: CountQueryArgs) {
-  return btoa(`${args.url}`);
+  return bytesToBase64(new TextEncoder().encode(`${args.url}`));
 }
 
 interface DetectAndInjectArgs {

client/src/core/client/framework/helpers/bytesToBase64.ts

@@ -0,0 +1,6 @@
+export default function bytesToBase64(bytes: Uint8Array) {
+  const binString = Array.from(bytes, (byte) =>
+    String.fromCodePoint(byte)
+  ).join("");
+  return btoa(binString);
+}

client/src/core/client/framework/helpers/index.ts

@@ -1,3 +1,4 @@
+export { default as bytesToBase64 } from "./bytesToBase64";
 export { default as clearHash } from "./clearHash";
 export { default as createContextHOC } from "./createContextHOC";
 export { default as detectCommentEmbedScript } from "./detectCommentEmbedScript";

client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx

@@ -48,6 +48,9 @@ const getIcon = (type: NOTIFICATION_TYPE | null): ComponentType => {
   if (type === GQLNOTIFICATION_TYPE.COMMENT_APPROVED) {
     return CheckCircleIcon;
   }
+  if (type === GQLNOTIFICATION_TYPE.PREVIOUSLY_REJECTED_COMMENT_APPROVED) {
+    return CheckCircleIcon;
+  }
   if (type === GQLNOTIFICATION_TYPE.COMMENT_FEATURED) {
     return RatingStarRibbonIcon;
   }
@@ -83,6 +86,13 @@ const getTitle = (
       "Your comment has been published"
     );
   }
+  if (type === GQLNOTIFICATION_TYPE.PREVIOUSLY_REJECTED_COMMENT_APPROVED) {
+    return getMessage(
+      bundles,
+      "notifications-yourPreviouslyRejectedCommentHasBeenApproved",
+      "Your comment was previously rejected. It has now been approved."
+    );
+  }
   if (type === GQLNOTIFICATION_TYPE.COMMENT_FEATURED) {
     return getMessage(
       bundles,
@@ -200,7 +210,9 @@ const NotificationContainer: FunctionComponent<Props> = ({
         {(type === GQLNOTIFICATION_TYPE.REPLY ||
           type === GQLNOTIFICATION_TYPE.REPLY_STAFF ||
           type === GQLNOTIFICATION_TYPE.COMMENT_FEATURED ||
-          type === GQLNOTIFICATION_TYPE.COMMENT_APPROVED) && (
+          type === GQLNOTIFICATION_TYPE.COMMENT_APPROVED ||
+          type ===
+            GQLNOTIFICATION_TYPE.PREVIOUSLY_REJECTED_COMMENT_APPROVED) && (
           <CommentNotificationBody
             notification={notification}
             reply={

client/src/core/client/test/setupTestFramework.ts

@@ -1,5 +1,6 @@
 import "@testing-library/jest-dom";
 import { toHaveNoViolations } from "jest-axe";
+import { TextEncoder } from "util";
 
 import expectAndFail from "./expectAndFail";
 
@@ -14,6 +15,9 @@ import "./setupConsole";
 // to get around: https://github.com/facebook/jest/issues/3917
 (global as any).expectAndFail = expectAndFail;
 
+// we need to have this for count script
+(global as any).TextEncoder = TextEncoder;
+
 // Log unhandled rejections.
 // eslint-disable-next-line no-console
 process.on("unhandledRejection", (err) => {