Merge

Getting users via pagination API returns a sorted list.
If we fetch for 3 users, they'll be sorted alphabetically,
next 3 will also be sorted alphabetically.
That means a final list will look like
[a, i, p] + [c, d, f] = [a, c, d, f, i, p]
Final result is unsorted.

At UX level, it looks like jerky dropdown
with users appearing in the middle of the list,
sometimes appearing just as user scrolls past.

`users.unorderedData` fixes that by sending
users consistently, although unsorted.

app/components/ContextMenu/index.tsx

@@ -41,6 +41,7 @@ type Props = {
   visible?: boolean;
   placement?: Placement;
   animating?: boolean;
+  className?: string;
   unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
   onOpen?: () => void;
   onClose?: () => void;
@@ -51,6 +52,7 @@ const ContextMenu: React.FC<Props> = ({
   children,
   onOpen,
   onClose,
+  className,
   ...rest
 }) => {
   const previousVisible = usePrevious(rest.visible);
@@ -131,6 +133,7 @@ const ContextMenu: React.FC<Props> = ({
                 topAnchor={topAnchor}
                 rightAnchor={rightAnchor}
                 ref={backgroundRef}
+                className={className}
                 hiddenScrollbars
                 style={
                   maxHeight && topAnchor

app/components/FilterOptions.tsx

@@ -1,12 +1,16 @@
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton } from "reakit/Menu";
 import styled from "styled-components";
 import Button, { Inner } from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
 import Text from "~/components/Text";
+import { Outline } from "./Input";
+import InputSearch from "./InputSearch";
+import PaginatedList, { PaginatedItem } from "./PaginatedList";
 
-type TFilterOption = {
+type TFilterOption = PaginatedItem & {
   key: string;
   label: string;
   note?: string;
@@ -19,54 +23,121 @@ type Props = {
   selectedPrefix?: string;
   className?: string;
   onSelect: (key: string | null | undefined) => void;
+  search?: (query: string) => Promise<TFilterOption[]>;
+  paginateFetch?: (
+    options: PaginatedItem
+  ) => Promise<PaginatedItem[] | undefined>;
 };
 
 const FilterOptions = ({
   options,
   activeKey = "",
-  defaultLabel = "Filter options",
+  defaultLabel,
   selectedPrefix = "",
   className,
   onSelect,
+  search,
+  paginateFetch,
 }: Props) => {
+  const { t } = useTranslation();
+  const tDefaultLabel: string = defaultLabel ?? t("Filter options");
   const menu = useMenuState({
     modal: true,
   });
+
+  const [filteredOptions, setFilteredOptions] = React.useState<TFilterOption[]>(
+    []
+  );
+
+  React.useEffect(() => {
+    setFilteredOptions(options);
+  }, [options]);
+
   const selected =
     options.find((option) => option.key === activeKey) || options[0];
 
   const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : "";
 
+  const clearFilter = React.useCallback(() => {
+    setFilteredOptions(options);
+  }, [options]);
+
+  // Simple case-insensitive filter to
+  // check if text appears in any author's name.
+  const handleFilter = React.useCallback(
+    async (event) => {
+      const { value } = event.target;
+      if (value) {
+        const res = options.filter((option) =>
+          option.label.toLowerCase().includes(value.toLowerCase())
+        );
+
+        if (search) {
+          const more = await search(value);
+          const missing = more.filter(
+            (item) => !res.map((r) => r.key).includes(item.key)
+          );
+          setFilteredOptions([...missing, ...res]);
+        } else {
+          setFilteredOptions(res);
+        }
+      } else {
+        // Clears filter options cache.
+        // This part fires off when search term is "".
+        // Either by user clearing it entirely or
+        // by deleting one character at a time,
+        // gradually decreasing relevance.
+        clearFilter();
+      }
+    },
+    [clearFilter, options, search]
+  );
+
+  const renderItem = React.useCallback(
+    (option: TFilterOption) => (
+      <MenuItem
+        key={option.key}
+        onClick={() => {
+          onSelect(option.key);
+          menu.hide();
+        }}
+        selected={option.key === activeKey}
+        {...menu}
+      >
+        {option.note ? (
+          <LabelWithNote>
+            {option.label}
+            <Note>{option.note}</Note>
+          </LabelWithNote>
+        ) : (
+          option.label
+        )}
+      </MenuItem>
+    ),
+    [activeKey, activeKey, onSelect]
+  );
+
   return (
     <Wrapper>
-      <MenuButton {...menu}>
+      <MenuButton {...menu} onClick={clearFilter}>
         {(props) => (
           <StyledButton {...props} className={className} neutral disclosure>
-            {activeKey ? selectedLabel : defaultLabel}
+            {activeKey ? selectedLabel : tDefaultLabel}
           </StyledButton>
         )}
       </MenuButton>
-      <ContextMenu aria-label={defaultLabel} {...menu}>
-        {options.map((option) => (
-          <MenuItem
-            key={option.key}
-            onClick={() => {
-              onSelect(option.key);
-              menu.hide();
-            }}
-            selected={option.key === activeKey}
-            {...menu}
-          >
-            {option.note ? (
-              <LabelWithNote>
-                {option.label}
-                <Note>{option.note}</Note>
-              </LabelWithNote>
-            ) : (
-              option.label
-            )}
-          </MenuItem>
-        ))}
+      <ContextMenu aria-label={tDefaultLabel} {...menu}>
+        {search && (
+          <>
+            <StyledInputSearch onChange={handleFilter} autoFocus />
+            <br />
+          </>
+        )}
+        <PaginatedList
+          items={filteredOptions}
+          fetch={paginateFetch}
+          renderItem={renderItem}
+        />
       </ContextMenu>
     </Wrapper>
   );
@@ -110,4 +181,31 @@ const Wrapper = styled.div`
   margin-right: 8px;
 `;
 
+// `position: sticky` leaves a bit of space above the search box,
+// which shows author names moving past behind it.
+const StyledInputSearch = styled(InputSearch)`
+  position: absolute;
+  width: 100%;
+  border: none;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  overflow: hidden;
+  top: 0;
+  z-index: 1;
+
+  ${Outline} {
+    border-top-style: unset;
+    border-right-style: unset;
+    border-left-style: unset;
+    border-radius: unset;
+    border-bottom: 1px solid ${(props) => props.theme.divider};
+    background: ${(props) => props.theme.menuBackground};
+    font-size: 14px;
+
+    input {
+      margin-left: 8px;
+    }
+  }
+`;
+
 export default FilterOptions;

app/components/PaginatedList.tsx

@@ -94,7 +94,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     }
     this.isFetching = true;
     const counter = ++this.fetchCounter;
-    const limit = DEFAULT_PAGINATION_LIMIT;
+    const limit = this.props.options?.limit ?? DEFAULT_PAGINATION_LIMIT;
     this.error = undefined;
 
     try {

app/scenes/Search/components/UserFilter.tsx

@@ -14,25 +14,33 @@ function UserFilter(props: Props) {
   const { t } = useTranslation();
   const { users } = useStores();
 
-  React.useEffect(() => {
-    users.fetchPage({
-      limit: 100,
-    });
-  }, [users]);
-
   const options = React.useMemo(() => {
-    const userOptions = users.all.map((user) => ({
+    const userOptions = users.unorderedData.map((user) => ({
       key: user.id,
+      id: user.id,
       label: user.name,
     }));
     return [
       {
         key: "",
+        id: "",
         label: t("Any author"),
       },
       ...userOptions,
     ];
-  }, [users.all, t]);
+  }, [users.unorderedData, t]);
+
+  const search = React.useCallback(
+    async (query: string) => {
+      const res = await users.find(query);
+      return res.map((user) => ({
+        key: user.id,
+        id: user.id,
+        label: user.name,
+      }));
+    },
+    [users]
+  );
 
   return (
     <FilterOptions
@@ -41,6 +49,8 @@ function UserFilter(props: Props) {
       onSelect={onSelect}
       defaultLabel={t("Any author")}
       selectedPrefix={`${t("Author")}:`}
+      search={search}
+      paginateFetch={users.fetchPage}
     />
   );
 }

app/stores/UsersStore.ts

@@ -68,7 +68,12 @@ export default class UsersStore extends BaseStore<User> {
 
   @computed
   get orderedData(): User[] {
-    return orderBy(Array.from(this.data.values()), "name", "asc");
+    return orderBy(this.unorderedData, "name", "asc");
+  }
+
+  @computed
+  get unorderedData(): User[] {
+    return Array.from(this.data.values());
   }
 
   @action
@@ -152,6 +157,14 @@ export default class UsersStore extends BaseStore<User> {
     return res.data;
   };
 
+  @action
+  async find(name: string): Promise<User[]> {
+    const res = await client.post(`/users.list`, {
+      query: name,
+    });
+    return res.data;
+  }
+
   @action
   async delete(user: User, options: Record<string, any> = {}) {
     super.delete(user, options);

shared/i18n/locales/en_US/translation.json

@@ -131,6 +131,7 @@
   "{{userName}} published": "{{userName}} published",
   "{{userName}} unpublished": "{{userName}} unpublished",
   "{{userName}} moved": "{{userName}} moved",
+  "Filter options": "Filter options",
   "Icon": "Icon",
   "Show menu": "Show menu",
   "Choose icon": "Choose icon",