Merge branch 'develop' into feat/upgrade-to-node-18-ci

.dockerignore

@@ -12,6 +12,9 @@ coverage
 node_modules
 **/node_modules
 
+# don't include utilities
+utilities/
+
 # don't include any logs
 npm-debug.log*
 **/npm-debug.log*

client/package.json

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

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

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useEffect } from "react";
 
 import { useInView } from "coral-framework/lib/intersection";
-import { BaseButton, Spinner } from "coral-ui/components/v2";
+import { Button, Spinner } from "coral-ui/components/v2";
 
 interface Props {
   disableLoadMore?: boolean;
@@ -27,9 +27,9 @@ const AutoLoadMoresContainer: FunctionComponent<Props> = ({
   // button here to make it testable.
   if (process.env.NODE_ENV === "test") {
     return (
-      <BaseButton onClick={onLoadMore} disabled={disableLoadMore}>
+      <Button onClick={onLoadMore} disabled={disableLoadMore} variant="text">
         Load More
-      </BaseButton>
+      </Button>
     );
   }
   return (

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

@@ -33,6 +33,15 @@ const markers: Array<
       </Localized>
     )) ||
     null,
+  (c) =>
+    (c.status === "PREMOD" &&
+      c.author &&
+      c.author.premoderatedBecauseOfEmailAt && (
+        <Localized id="moderate-marker-preMod-userEmail" key={keyCounter++}>
+          <Marker color="pending">User email</Marker>
+        </Localized>
+      )) ||
+    null,
   (c) =>
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_LINKS && (
@@ -239,6 +248,9 @@ const enhanced = withFragmentContainer<MarkersContainerProps>({
       tags {
         code
       }
+      author {
+        premoderatedBecauseOfEmailAt
+      }
       revision {
         actionCounts {
           illegal {

client/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css

@@ -10,28 +10,48 @@
 
 .wrapper {
   overflow: hidden;
-  /* adjust for button line-height being > 1 */
-  margin-top: -2px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .button {
   color: var(--palette-text-500) !important;
   border-width: 0;
   width: calc(20 * var(--mini-unit));
   margin-right: calc(var(--spacing-1) / 2);
+  padding-left: var(--spacing-1);
   font-size: var(--font-size-3);
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-bold);
   line-height: 1.2;
-  justify-content: space-between;
+  justify-content: flex-start;
+  align-items: center;
   background: var(--palette-background-input);
 }
 
+.filterInput {
+  resize: none;
+  height: 100%;
+  width: auto;
+  overflow: hidden;
+  margin-left: var(--spacing-1);
+  margin-right: var(--spacing-1);
+}
+
+.filterInput > textarea {
+  resize: none;
+  overflow: hidden;
+  sizing: border-box;
+  color: var(--palette-grey-400);
+}
+
 .buttonIconLeft {
   width: 20px;
-  margin-right: calc(var(--spacing-1) / 2);
 }
 
 .buttonIconRight {
-  align-self: baseline;
+  margin-left: auto;
+  margin-right: var(--spacing-1);
   width: 16px;
 }
 
@@ -40,8 +60,3 @@
   /* adjust for button line-height being > 1 */
   margin-top: -2px;
 }
-
-.buttonText {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

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

@@ -1,27 +1,37 @@
+import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import { noop } from "lodash";
-import React, { ComponentType, FunctionComponent } from "react";
+import React, {
+  ComponentType,
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 
 import AutoLoadMore from "coral-admin/components/AutoLoadMore";
+import { useToggleState } from "coral-framework/hooks";
 import { IntersectionProvider } from "coral-framework/lib/intersection";
 import {
   ArrowsDownIcon,
   ArrowsUpIcon,
   ButtonSvgIcon,
 } from "coral-ui/components/icons";
 import {
-  Button,
   ClickOutside,
   Dropdown,
   Flex,
   Popover,
   Spinner,
 } from "coral-ui/components/v2";
+import { TextArea } from "coral-ui/components/v3";
 
 import styles from "./PaginatedSelect.css";
 
 interface Props {
   onLoadMore?: () => void;
+  onFilter?: (filter: string) => void;
+  label: string;
   Icon?: ComponentType;
   hasMore?: boolean;
   disableLoadMore?: boolean;
@@ -33,21 +43,42 @@ interface Props {
 
 const PaginatedSelect: FunctionComponent<Props> = ({
   onLoadMore = noop,
+  onFilter,
   disableLoadMore = false,
   hasMore = false,
   loading = false,
   children,
   Icon,
   selected,
   className,
+  label,
 }) => {
+  const filterRef = useRef<HTMLTextAreaElement>(null);
+
+  const [isPopoverVisible, setIsPopoverVisible, togglePopoverVisible] =
+    useToggleState(false);
+
+  useEffect(() => {
+    if (isPopoverVisible && filterRef.current) {
+      filterRef.current.focus();
+    }
+  }, [isPopoverVisible]);
+
+  const handleButtonBlur = useCallback(() => {
+    if (!onFilter) {
+      return;
+    }
+    setIsPopoverVisible(false);
+  }, [onFilter, setIsPopoverVisible]);
+
   return (
-    <Popover
-      id=""
-      placement="bottom-end"
-      modifiers={{ arrow: { enabled: false }, offset: { offset: "0, 4" } }}
-      body={({ toggleVisibility }) => (
-        <ClickOutside onClickOutside={toggleVisibility}>
+    <ClickOutside onClickOutside={() => setIsPopoverVisible(false)}>
+      <Popover
+        id=""
+        placement="bottom-end"
+        modifiers={{ arrow: { enabled: false }, offset: { offset: "0, 4" } }}
+        visible={isPopoverVisible}
+        body={
           <IntersectionProvider>
             <Dropdown className={styles.dropdown}>
               {children}
@@ -66,42 +97,64 @@ const PaginatedSelect: FunctionComponent<Props> = ({
               )}
             </Dropdown>
           </IntersectionProvider>
-        </ClickOutside>
-      )}
-    >
-      {({ toggleVisibility, ref, visible }) => (
-        <Button
-          className={cn(styles.button, className)}
-          variant="flat"
-          adornmentLeft
-          color="mono"
-          onClick={toggleVisibility}
-          ref={ref}
-          uppercase={false}
-        >
-          {Icon && (
-            <ButtonSvgIcon className={styles.buttonIconLeft} Icon={Icon} />
-          )}
-          <Flex alignItems="center" className={styles.wrapper}>
-            {selected}
+        }
+      >
+        {({ ref }) => (
+          <Flex
+            className={cn(styles.button, className)}
+            onClick={() => setIsPopoverVisible(true)}
+            ref={ref}
+            justifyContent="space-between"
+            aria-label={label}
+          >
+            {Icon && (
+              <ButtonSvgIcon className={styles.buttonIconLeft} Icon={Icon} />
+            )}
+            {isPopoverVisible && !!onFilter ? (
+              <Localized
+                id="admin-paginatedSelect-filter"
+                attrs={{ "aria-label": true }}
+              >
+                <TextArea
+                  className={styles.filterInput}
+                  onKeyDown={(e) => {
+                    // We don't want blank lines to be added in input
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                    }
+                  }}
+                  onChange={(e) => onFilter(e.target.value)}
+                  ref={filterRef}
+                  aria-label="Filter results"
+                />
+              </Localized>
+            ) : (
+              <Flex
+                alignItems="center"
+                aria-roledescription="button"
+                className={styles.wrapper}
+                tabIndex={0}
+                onFocus={() => setIsPopoverVisible(true)}
+                onBlur={handleButtonBlur}
+              >
+                {selected}
+              </Flex>
+            )}
+            {
+              <ButtonSvgIcon
+                className={styles.buttonIconRight}
+                Icon={isPopoverVisible ? ArrowsUpIcon : ArrowsDownIcon}
+                size="xs"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  togglePopoverVisible();
+                }}
+              />
+            }
           </Flex>
-          {!visible && (
-            <ButtonSvgIcon
-              className={styles.buttonIconRight}
-              Icon={ArrowsDownIcon}
-              size="xs"
-            />
-          )}
-          {visible && (
-            <ButtonSvgIcon
-              className={styles.buttonIconRight}
-              Icon={ArrowsUpIcon}
-              size="xs"
-            />
-          )}
-        </Button>
-      )}
-    </Popover>
+        )}
+      </Popover>
+    </ClickOutside>
   );
 };
 

client/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfigContainer.tsx

@@ -17,6 +17,7 @@ import EmailDomainConfigContainer from "./EmailDomainConfigContainer";
 import ExternalLinksConfigContainer from "./ExternalLinksConfigContainer";
 import NewCommentersConfigContainer from "./NewCommentersConfigContainer";
 import PerspectiveConfig from "./PerspectiveConfig";
+import PremoderateEmailAddressConfig from "./PremoderateEmailAddressConfig";
 import PreModerationConfigContainer from "./PreModerationConfigContainer";
 import RecentCommentHistoryConfig from "./RecentCommentHistoryConfig";
 
@@ -49,6 +50,7 @@ export const ModerationConfigContainer: React.FunctionComponent<Props> = ({
       <NewCommentersConfigContainer disabled={submitting} settings={settings} />
       <RecentCommentHistoryConfig disabled={submitting} />
       <ExternalLinksConfigContainer disabled={submitting} settings={settings} />
+      <PremoderateEmailAddressConfig disabled={submitting} />
       <EmailDomainConfigContainer settings={settings} />
     </HorizontalGutter>
   );
@@ -67,6 +69,7 @@ const enhanced = withFragmentContainer<Props>({
       ...EmailDomainConfigContainer_settings
       ...ExternalLinksConfigContainer_formValues @relay(mask: false)
       ...ExternalLinksConfigContainer_settings
+      ...PremoderateEmailAddressConfig_formValues @relay(mask: false)
     }
   `,
 })(ModerationConfigContainer);