Merge branch 'develop' into fix/separate-client-server

# Conflicts:
#	client/src/core/client/admin/routes/Configure/sections/General/FlairBadgeImagePreview.css
#	client/src/core/client/admin/routes/Configure/sections/General/FlairBadgeImagePreview.tsx
#	client/src/core/client/stream/test/comments/components/CommentContainer.spec.tsx
#	client/src/core/client/ui/components/icons/ImageFileWarningIcon.tsx

client/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css

@@ -2,6 +2,7 @@ $conversationModalHighlightBackground: $colors-teal-100;
 $conversationModalCommentText: var(--palette-text-500);
 .root {
   flex: 1;
+  padding: 0 var(--spacing-2);
 }
 
 .line {
@@ -42,6 +43,7 @@ $conversationModalCommentText: var(--palette-text-500);
 
 .rejectButton {
   height: fit-content;
+  margin-top: var(--spacing-1);
   &:disabled {
     background-color: var(--palette-error-500) !important;
     opacity: 1 !important;

client/src/core/client/admin/routes/Configure/sections/General/FlairBadgeConfigContainer.css

@@ -2,10 +2,6 @@
   margin-left: auto;
 }
 
-.imagePreview {
-  max-height: 25px;
-}
-
 .addButton {
   height: 34px;
 }

client/src/core/client/admin/routes/Configure/sections/General/FlairBadgeConfigContainer.tsx

@@ -39,6 +39,7 @@ import Header from "../../Header";
 import OnOffField from "../../OnOffField";
 import CreateFlairBadgeMutation from "./CreateFlairBadgeMutation";
 import DeleteFlairBadgeMutation from "./DeleteFlairBadgeMutation";
+import { FlairBadgeImagePreview } from "./FlairBadgeImagePreview";
 
 import styles from "./FlairBadgeConfigContainer.css";
 
@@ -280,10 +281,9 @@ const FlairBadgeConfigContainer: FunctionComponent<Props> = ({
                     </TableCell>
                     <TableCell>
                       <Flex>
-                        <img
-                          className={styles.imagePreview}
-                          src={badge.url}
-                          alt=""
+                        <FlairBadgeImagePreview
+                          url={badge.url}
+                          alt={badge.name}
                         />
                         <Flex className={styles.deleteButton}>
                           <Localized

client/src/core/client/admin/routes/Configure/sections/General/FlairBadgeImagePreview.css

@@ -0,0 +1,5 @@
+.imagePreview {
+  max-height: 25px;
+  min-height: 8px;
+  min-width: 8px;
+}

client/src/core/client/admin/routes/Configure/sections/General/FlairBadgeImagePreview.tsx

@@ -0,0 +1,31 @@
+import React, { FunctionComponent, useCallback, useState } from "react";
+
+import { ImageFileWarningIcon, SvgIcon } from "coral-ui/components/icons";
+
+import styles from "./FlairBadgeImagePreview.css";
+
+interface Props {
+  url: string;
+  alt: string;
+}
+
+export const FlairBadgeImagePreview: FunctionComponent<Props> = ({
+  url,
+  alt,
+}) => {
+  const [error, setError] = useState<boolean>(false);
+  const onError = useCallback(() => {
+    setError(true);
+  }, [setError]);
+
+  return error ? (
+    <SvgIcon Icon={ImageFileWarningIcon} size="lg" />
+  ) : (
+    <img
+      className={styles.imagePreview}
+      src={url}
+      alt={alt}
+      onError={onError}
+    />
+  );
+};

client/src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.css

@@ -26,7 +26,7 @@
 
 .refreshButtonIcon {
   padding-right: 0.2rem;
-  display: inline-block;
+  display: inline;
 }
 
 .refreshButtonIcon svg {
@@ -44,7 +44,7 @@
 }
 
 .closeButtonIcon {
-  display: inline-block;
+  display: inline;
 }
 
 .closeButtonIcon svg {

client/src/core/client/ui/components/icons/ImageFileWarningIcon.tsx

@@ -0,0 +1,55 @@
+import React, { FunctionComponent } from "react";
+
+const ImageFileWarningIcon: FunctionComponent = () => {
+  // https://www.streamlinehq.com/icons/streamline-regular/files-folders/image-files/image-file-warning
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="-0.75 -0.75 48 48"
+    >
+      <path
+        stroke="currentColor"
+        d="M33.421875 40.6875a0.7265625 0.7265625 0 0 1 0 -1.453125"
+      ></path>
+      <path
+        stroke="currentColor"
+        d="M33.421875 40.6875a0.7265625 0.7265625 0 0 0 0 -1.453125"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M33.421875 34.875v-5.8125"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M44.6845625 40.071374999999996a3.4351874999999996 3.4351874999999996 0 0 1 -3.0748124999999997 4.9755h-16.37575a3.4390625 3.4390625 0 0 1 -3.0748124999999997 -4.9755l8.187875 -16.3738125a3.437125 3.437125 0 0 1 6.1496249999999995 0l8.187875 16.3738125Z"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M14.53125 39.234375H4.359375a2.90625 2.90625 0 0 1 -2.90625 -2.90625V4.359375a2.90625 2.90625 0 0 1 2.90625 -2.90625h20.593687499999998a2.90625 2.90625 0 0 1 2.05375 0.8505625l5.5645 5.5645a2.90625 2.90625 0 0 1 0.8505625 2.05375V15.984375"
+      ></path>
+      <path
+        stroke="currentColor"
+        d="M10.171875 12.3515625a0.7265625 0.7265625 0 1 1 0 -1.453125"
+      ></path>
+      <path
+        stroke="currentColor"
+        d="M10.171875 12.3515625a0.7265625 0.7265625 0 1 0 0 -1.453125"
+      ></path>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M24.9085 20.96375 21.796875 15.984375a1.4511875 1.4511875 0 0 0 -2.398625 -0.027125l-3.875 5.5218750000000005L13.13625 19.568749999999998a1.453125 1.453125 0 0 0 -2.1176874999999997 0.32743750000000005l-3.7529375000000003 7.71125h11.625"
+      ></path>
+    </svg>
+  );
+};
+
+export default ImageFileWarningIcon;

client/src/core/client/ui/components/icons/index.ts

@@ -38,6 +38,7 @@ export { default as FlagWarningIcon } from "./FlagWarningIcon";
 export { default as HyperlinkIcon } from "./HyperlinkIcon";
 export { default as ImageFileAddIcon } from "./ImageFileAddIcon";
 export { default as ImageFileLandscapeIcon } from "./ImageFileLandscapeIcon";
+export { default as ImageFileWarningIcon } from "./ImageFileWarningIcon";
 export { default as InformationCircleIcon } from "./InformationCircleIcon";
 export { default as LabFlaskExperimentIcon } from "./LabFlaskExperimentIcon";
 export { default as LikeIcon } from "./LikeIcon";

server/src/core/server/services/comments/pipeline/phases/wordList/service.ts

@@ -24,25 +24,18 @@ import {
 const WORKER_SCRIPT =
   "./dist/core/server/services/comments/pipeline/phases/wordList/worker.js";
 
-interface PromiseCallbacks<R> {
-  resolve: (result: R) => void;
-  reject: (err: Error) => void;
-}
-
 export class WordListService {
   private worker: Worker;
 
   private onMessageDelegate: (event: MessageEvent) => void;
-  private readonly callbacks: Map<
-    string,
-    PromiseCallbacks<WordListWorkerResult>
-  > = new Map();
+  private results: Map<string, WordListWorkerResult>;
   private logger: Logger;
   private sanitizer: Sanitize;
 
-  constructor(logger: Logger) {
+  constructor(logger: Logger, numWorkers = 3) {
     this.logger = logger;
 
+    this.results = new Map<string, WordListWorkerResult>();
     this.onMessageDelegate = this.onMessage.bind(this);
 
     this.worker = new Worker(WORKER_SCRIPT);
@@ -59,37 +52,20 @@ export class WordListService {
     });
   }
 
+  private sleep(ms: number) {
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, ms);
+    });
+  }
+
   private onMessage(result: WordListWorkerResult) {
     if (!result) {
       return;
     }
 
-    // Get the callbacks for this result.
-    const callbacks = this.callbacks.get(result.id);
-    if (!callbacks) {
-      throw new Error(`Invalid result id: ${result.id}`);
-    }
-
-    // Delete the callbacks for this result.
-    this.callbacks.delete(result.id);
-
-    // Resolve the promise.
-    if (result.ok) {
-      callbacks.resolve(result);
-    } else {
-      callbacks.reject(result.err!);
-    }
-  }
-
-  private send(message: WordListWorkerMessage) {
-    // Create a new promise to wait for the worker to finish.
-    const promise = new Promise<WordListWorkerResult>((resolve, reject) => {
-      this.callbacks.set(message.id, { resolve, reject });
-    });
-
-    this.worker.postMessage(message);
-
-    return promise;
+    this.results.set(result.id, result);
   }
 
   public async initialize(
@@ -111,7 +87,31 @@ export class WordListService {
       data,
     };
 
-    const result = await this.send(message);
+    const builder = async () => {
+      let hasResult = this.results.has(message.id);
+      while (!hasResult) {
+        await this.sleep(1);
+        hasResult = this.results.has(message.id);
+      }
+
+      const result = this.results.get(message.id);
+      if (!result) {
+        this.results.delete(message.id);
+        return {
+          id: message.id,
+          tenantID,
+          ok: false,
+          err: new Error("result was undefined"),
+        };
+      }
+
+      this.results.delete(message.id);
+      return result;
+    };
+
+    this.worker.postMessage(message);
+    const result = await builder();
+
     if (!result.ok || result.err) {
       this.logger.error(
         { tenantID: result.tenantID, id: result.id },
@@ -143,8 +143,32 @@ export class WordListService {
       data,
     };
 
-    // Send the message to the worker.
-    const result = await this.send(message);
+    this.worker.postMessage(message);
+
+    const builder = async () => {
+      let hasResult = this.results.has(message.id);
+      while (!hasResult) {
+        await this.sleep(1);
+        hasResult = this.results.has(message.id);
+      }
+
+      const result = this.results.get(message.id);
+      if (!result) {
+        this.results.delete(message.id);
+        return {
+          id: message.id,
+          tenantID,
+          ok: false,
+          err: new Error("result was undefined"),
+        };
+      }
+
+      this.results.delete(message.id);
+      return result;
+    };
+
+    const result = await builder();
+
     if (!result.ok || result.err) {
       return {
         isMatched: false,