Merge pull request #4470 from coralproject/develop

[8.6.5] Release `develop` into `main`

.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.4",
+  "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/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/Moderate/SectionSelector/SectionSelector.tsx

@@ -48,6 +48,7 @@ const SectionSelector: FunctionComponent<Props> = ({
       disableLoadMore
       className={styles.button}
       selected={<SelectedSection section={section} />}
+      label="Select section"
     >
       <SectionSelectorSection
         active={!section}

client/src/core/client/admin/routes/Moderate/SiteSelector/SiteSelector.tsx

@@ -5,19 +5,20 @@ import PaginatedSelect from "coral-admin/components/PaginatedSelect";
 import { getModerationLink, QUEUE_NAME } from "coral-framework/helpers";
 import { PropTypesOf } from "coral-framework/types";
 import { AppWindowIcon } from "coral-ui/components/icons";
+import { Divider } from "coral-ui/components/v2";
 
+import styles from "./SiteSelector.css";
 import SiteSelectorCurrentSiteQuery from "./SiteSelectorCurrentSiteQuery";
 import SiteSelectorSite from "./SiteSelectorSite";
 
-import styles from "./SiteSelector.css";
-
 interface Props {
   scoped: boolean;
   sites: ReadonlyArray<
     { id: string } & PropTypesOf<typeof SiteSelectorSite>["site"]
   >;
   queueName: QUEUE_NAME | undefined;
   onLoadMore: () => void;
+  onFilter: (filter: string) => void;
   hasMore: boolean;
   disableLoadMore: boolean;
   loading: boolean;
@@ -33,15 +34,18 @@ const SiteSelector: FunctionComponent<Props> = ({
   disableLoadMore,
   hasMore,
   siteID,
+  onFilter,
 }) => {
   return (
     <PaginatedSelect
+      label="Select site"
       Icon={AppWindowIcon}
       loading={loading}
       onLoadMore={onLoadMore}
       disableLoadMore={disableLoadMore}
       hasMore={hasMore}
       className={styles.button}
+      onFilter={onFilter}
       selected={
         <>
           {siteID && <SiteSelectorCurrentSiteQuery siteID={siteID} />}
@@ -55,11 +59,14 @@ const SiteSelector: FunctionComponent<Props> = ({
     >
       <>
         {!scoped && (
-          <SiteSelectorSite
-            link={getModerationLink({ queue: queueName })}
-            site={null}
-            active={!siteID}
-          />
+          <>
+            <SiteSelectorSite
+              link={getModerationLink({ queue: queueName })}
+              site={null}
+              active={!siteID}
+            />
+            <Divider spacing={1} horizontalSpacing={4} />
+          </>
         )}
         {sites.map((s) => (
           <SiteSelectorSite