feature: Sorting & finding by username (ID) admin interface (#1778)

Closes #1615
- Auto-focuses on filter tab
- Able to sort / filter by username (ID)

website/src/components/DataTable/DataTable.tsx

@@ -35,7 +35,7 @@ import {
 } from "@tanstack/react-table";
 import { Filter } from "lucide-react";
 import { useTranslation } from "next-i18next";
-import { ChangeEvent, ReactNode, useState } from "react";
+import { ChangeEvent, ReactNode, useRef, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -198,13 +198,13 @@ const FilterModal = ({
   value: string;
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-
+  const initialFocusRef = useRef();
   const handleInputChange = useDebouncedCallback((e: ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.value);
   }, 500);
 
   return (
-    <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
+    <Popover isOpen={isOpen} onOpen={onOpen} initialFocusRef={initialFocusRef} onClose={onClose}>
       <PopoverTrigger>
         <Button variant={"unstyled"} ml="2">
           <Filter size="1em"></Filter>
@@ -216,7 +216,7 @@ const FilterModal = ({
         <PopoverBody mt="4">
           <FormControl>
             <FormLabel>{label}</FormLabel>
-            <Input onChange={handleInputChange} defaultValue={value}></Input>
+            <Input ref={initialFocusRef} onChange={handleInputChange} autoFocus defaultValue={value}></Input>
           </FormControl>
         </PopoverBody>
       </PopoverContent>

website/src/components/UserTable.tsx

@@ -16,9 +16,12 @@ const columns: DataTableColumnDef<User>[] = [
   columnHelper.accessor("user_id", {
     header: "ID",
   }),
-  columnHelper.accessor("id", {
-    header: "Auth ID",
-  }),
+  {
+    ...columnHelper.accessor("id", {
+      header: "Auth ID",
+    }),
+    filterable: true,
+  },
   columnHelper.accessor("auth_method", {
     header: "Auth Method",
   }),
@@ -47,17 +50,28 @@ const columns: DataTableColumnDef<User>[] = [
 export const UserTable = memo(function UserTable() {
   const { pagination, resetCursor, toNextPage, toPreviousPage } = useCursorPagination();
   const [filterValues, setFilterValues] = useState<FilterItem[]>([]);
+
   const handleFilterValuesChange = (values: FilterItem[]) => {
-    setFilterValues(values);
+    const last = values.pop();
+    if (last) {
+      setFilterValues([last]);
+    }
     resetCursor();
   };
 
   // Fetch and save the users.
   // This follows useSWR's recommendation for simple pagination:
   //   https://swr.vercel.app/docs/pagination#when-to-use-useswr
-  const display_name = filterValues.find((value) => value.id === "display_name")?.value ?? "";
+
+  const filterValue = filterValues.find((value) => value.id === filterValues[filterValues.length - 1]?.id)?.value ?? "";
   const { data, error } = useSWR<FetchUsersResponse<User>>(
-    `/api/admin/users?direction=${pagination.direction}&cursor=${pagination.cursor}&searchDisplayName=${display_name}&sortKey=display_name`,
+    `/api/admin/users?direction=${pagination.direction}&cursor=${
+      pagination.cursor
+    }&searchDisplayName=${filterValue}&sortKey=${
+      filterValues[filterValues.length - 1]?.id === "id"
+        ? "username"
+        : filterValues[filterValues.length - 1]?.id || "display_name"
+    }`,
     get,
     {
       keepPreviousData: true,