Allow to filter user by display_name

2026-07-08 00:10:24 +08:00 · 2023-01-18 15:19:00 +07:00
parent c912caaf76
commit 801ad553b8
9 changed files with 361 additions and 145 deletions
@@ -161,10 +161,10 @@ class UserRepository:
        users = users.order_by(User.display_name)

        if gt:
-            users = users.filter(User.display_name > gt)
+            users = users.filter(User.id > gt)

        if lt:
-            users = users.filter(User.display_name < lt)
+            users = users.filter(User.id < lt).order_by(None).order_by(User.id.desc())

        if limit is not None:
            users = users.limit(limit)
@@ -21,6 +21,7 @@
        "@next/font": "^13.1.0",
        "@prisma/client": "^4.7.1",
        "@tailwindcss/forms": "^0.5.3",
+        "@tanstack/react-table": "^8.7.6",
        "autoprefixer": "^10.4.13",
        "axios": "^1.2.1",
        "boolean": "^3.2.0",
@@ -12294,6 +12295,37 @@
        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
      }
    },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.7.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.7.6.tgz",
+      "integrity": "sha512-/QijmMFeP7wDLBnr0MQ/5MlbXePbIL/1nOtkxBC9zvmBu4gDKJEDBqipUyM7Wc/iBpSd0IFyqBlvZvTPD9FYDA==",
+      "dependencies": {
+        "@tanstack/table-core": "8.7.6"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.7.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.7.6.tgz",
+      "integrity": "sha512-sqiNTMzB6cpyL8DFH6/VqW48SwiflLqxQqYpo2wNock7rdVGvlm0BLNI8vZUJbr1+fmmWmHwBvi5OMgZw8n1DA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "8.19.1",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.1.tgz",
@@ -46565,6 +46597,19 @@
        "mini-svg-data-uri": "^1.2.3"
      }
    },
+    "@tanstack/react-table": {
+      "version": "8.7.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.7.6.tgz",
+      "integrity": "sha512-/QijmMFeP7wDLBnr0MQ/5MlbXePbIL/1nOtkxBC9zvmBu4gDKJEDBqipUyM7Wc/iBpSd0IFyqBlvZvTPD9FYDA==",
+      "requires": {
+        "@tanstack/table-core": "8.7.6"
+      }
+    },
+    "@tanstack/table-core": {
+      "version": "8.7.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.7.6.tgz",
+      "integrity": "sha512-sqiNTMzB6cpyL8DFH6/VqW48SwiflLqxQqYpo2wNock7rdVGvlm0BLNI8vZUJbr1+fmmWmHwBvi5OMgZw8n1DA=="
+    },
    "@testing-library/dom": {
      "version": "8.19.1",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.19.1.tgz",
@@ -38,6 +38,7 @@
    "@next/font": "^13.1.0",
    "@prisma/client": "^4.7.1",
    "@tailwindcss/forms": "^0.5.3",
+    "@tanstack/react-table": "^8.7.6",
    "autoprefixer": "^10.4.13",
    "axios": "^1.2.1",
    "boolean": "^3.2.0",
@@ -0,0 +1,158 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  Flex,
+  FormControl,
+  FormLabel,
+  Input,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverTrigger,
+  Spacer,
+  Table,
+  TableCaption,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { ChangeEvent, ReactNode } from "react";
+import { FaFilter } from "react-icons/fa";
+import { useDebouncedCallback } from "use-debounce";
+
+export type DataTableColumnDef<T> = ColumnDef<T> & {
+  filterable?: boolean;
+};
+
+// TODO: stricter type
+export type FilterItem = {
+  id: string;
+  value: string;
+};
+
+export type DataTableProps<T> = {
+  data: T[];
+  columns: DataTableColumnDef<T>[];
+  caption?: string;
+  filterValues?: FilterItem[];
+  onNextClick?: () => void;
+  onPreviousClick?: () => void;
+  onFilterChange?: (items: FilterItem[]) => void;
+};
+
+export const DataTable = <T,>({
+  data,
+  columns,
+  caption,
+  filterValues = [],
+  onNextClick,
+  onPreviousClick,
+  onFilterChange,
+}: DataTableProps<T>) => {
+  const { getHeaderGroups, getRowModel } = useReactTable<T>({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const handleFilterChange = (value: FilterItem) => {
+    const idx = filterValues.findIndex((oldValue) => oldValue.id === value.id);
+    let newValues: FilterItem[] = [];
+    if (idx === -1) {
+      newValues = [...filterValues, value];
+    } else {
+      newValues = filterValues.map((oldValue) => (oldValue.id === value.id ? value : oldValue));
+    }
+    onFilterChange(newValues);
+  };
+  return (
+    <Card>
+      <CardBody>
+        <Flex mb="2">
+          <Button onClick={onPreviousClick}>Previous</Button>
+          <Spacer />
+          <Button onClick={onNextClick}>Next</Button>
+        </Flex>
+        <TableContainer>
+          <Table variant="simple">
+            <TableCaption>{caption}</TableCaption>
+            <Thead>
+              {getHeaderGroups().map((headerGroup) => (
+                <Tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <Th key={header.id}>
+                      <Box display="flex" alignItems="center">
+                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                        {(header.column.columnDef as DataTableColumnDef<T>).filterable && (
+                          <FilterModal
+                            value={filterValues.find((value) => value.id === header.id)?.value ?? ""}
+                            onChange={(value) => handleFilterChange({ id: header.id, value })}
+                            label={flexRender(header.column.columnDef.header, header.getContext())}
+                          ></FilterModal>
+                        )}
+                      </Box>
+                    </Th>
+                  ))}
+                </Tr>
+              ))}
+            </Thead>
+            <Tbody>
+              {getRowModel().rows.map((row) => (
+                <Tr key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
+                  ))}
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </CardBody>
+    </Card>
+  );
+};
+
+const FilterModal = ({
+  label,
+  onChange,
+  value,
+}: {
+  label: ReactNode;
+  onChange: (val: string) => void;
+  value: string;
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const handleInputChange = useDebouncedCallback((e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  }, 500);
+
+  return (
+    <Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
+      <PopoverTrigger>
+        <Button variant={"unstyled"} ml="2">
+          <FaFilter></FaFilter>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent w="fit-content">
+        <PopoverArrow />
+        <PopoverCloseButton />
+        <PopoverBody mt="4">
+          <FormControl>
+            <FormLabel>{label}</FormLabel>
+            <Input onChange={handleInputChange} defaultValue={value}></Input>
+          </FormControl>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
@@ -0,0 +1,133 @@
+import { IconButton, useToast } from "@chakra-ui/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import Link from "next/link";
+import { memo, useState } from "react";
+import { FaPen } from "react-icons/fa";
+import { get } from "src/lib/api";
+import type { User } from "src/types/Users";
+import useSWR from "swr";
+
+import { DataTable, DataTableColumnDef, FilterItem } from "./DataTable";
+
+interface Pagination {
+  /**
+   * The user's `display_name` used for pagination.
+   */
+  cursor: string;
+
+  /**
+   * The pagination direction.
+   */
+  direction: "forward" | "back";
+}
+
+const columnHelper = createColumnHelper<User>();
+
+const columns: DataTableColumnDef<User>[] = [
+  columnHelper.accessor("user_id", {
+    header: "ID",
+  }),
+  columnHelper.accessor("id", {
+    header: "Auth ID",
+  }),
+  columnHelper.accessor("auth_method", {
+    header: "Auth Method",
+  }),
+  {
+    ...columnHelper.accessor("display_name", {
+      header: "Name",
+    }),
+    filterable: true,
+  },
+  columnHelper.accessor("role", {
+    header: "Role",
+  }),
+  columnHelper.accessor((user) => user.user_id, {
+    cell: ({ getValue }) => (
+      <IconButton
+        as={Link}
+        href={`/admin/manage_user/${getValue()}`}
+        aria-label="Manage"
+        icon={<FaPen></FaPen>}
+      ></IconButton>
+    ),
+    header: "Update",
+  }),
+];
+
+export const UserTable = memo(function UserTable() {
+  const toast = useToast();
+  const [pagination, setPagination] = useState<Pagination>({ cursor: "", direction: "forward" });
+  const [users, setUsers] = useState<User[]>([]);
+  const [filterValues, setFilterValues] = useState<FilterItem[]>([]);
+  // 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 ?? "";
+  useSWR(
+    `/api/admin/users?direction=${pagination.direction}&cursor=${pagination.cursor}&display_name=${display_name}`,
+    get,
+    {
+      onSuccess: (data) => {
+        // When no more users can be found, trigger a toast to indicate why no
+        // changes have taken place.  We have to maintain a non-empty set of
+        // users otherwise we can't paginate using a cursor (since we've lost the
+        // cursor).
+        if (data.length === 0) {
+          toast({
+            title: "No more users",
+            status: "warning",
+            duration: 1000,
+            isClosable: true,
+          });
+          return;
+        }
+        setUsers(data);
+      },
+    }
+  );
+
+  const toPreviousPage = () => {
+    if (users.length >= 0) {
+      setPagination({
+        cursor: users[0].user_id,
+        direction: "back",
+      });
+    } else {
+      toast({
+        title: "Can not paginate when no users are found",
+        status: "warning",
+        duration: 1000,
+        isClosable: true,
+      });
+    }
+  };
+
+  const toNextPage = () => {
+    if (users.length >= 0) {
+      setPagination({
+        cursor: users[users.length - 1].user_id,
+        direction: "forward",
+      });
+    } else {
+      toast({
+        title: "Can not paginate when no users are found",
+        status: "warning",
+        duration: 1000,
+        isClosable: true,
+      });
+    }
+  };
+
+  return (
+    <DataTable
+      data={users}
+      columns={columns}
+      caption="Users"
+      onNextClick={toNextPage}
+      onPreviousClick={toPreviousPage}
+      filterValues={filterValues}
+      onFilterChange={setFilterValues}
+    ></DataTable>
+  );
+});
@@ -1,137 +0,0 @@
-import {
-  Button,
-  Flex,
-  Spacer,
-  Stack,
-  Table,
-  TableCaption,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-  useToast,
-} from "@chakra-ui/react";
-import Link from "next/link";
-import { useState } from "react";
-import { get } from "src/lib/api";
-import type { User } from "src/types/Users";
-import useSWR from "swr";
-
-interface Pagination {
-  /**
-   * The user's `display_name` used for pagination.
-   */
-  cursor: string;
-
-  /**
-   * The pagination direction.
-   */
-  direction: "forward" | "back";
-}
-
-/**
- * Fetches users from the users api route and then presents them in a simple Chakra table.
- */
-const UsersCell = () => {
-  const toast = useToast();
-  const [pagination, setPagination] = useState<Pagination>({ cursor: "", direction: "forward" });
-  const [users, setUsers] = useState<User[]>([]);
-
-  // Fetch and save the users.
-  // This follows useSWR's recommendation for simple pagination:
-  //   https://swr.vercel.app/docs/pagination#when-to-use-useswr
-  useSWR(`/api/admin/users?direction=${pagination.direction}&cursor=${pagination.cursor}`, get, {
-    onSuccess: (data) => {
-      // When no more users can be found, trigger a toast to indicate why no
-      // changes have taken place.  We have to maintain a non-empty set of
-      // users otherwise we can't paginate using a cursor (since we've lost the
-      // cursor).
-      if (data.length === 0) {
-        toast({
-          title: "No more users",
-          status: "warning",
-          duration: 1000,
-          isClosable: true,
-        });
-        return;
-      }
-      setUsers(data);
-    },
-  });
-
-  const toPreviousPage = () => {
-    if (users.length >= 0) {
-      setPagination({
-        cursor: users[0].display_name,
-        direction: "back",
-      });
-    } else {
-      toast({
-        title: "Can not paginate when no users are found",
-        status: "warning",
-        duration: 1000,
-        isClosable: true,
-      });
-    }
-  };
-
-  const toNextPage = () => {
-    if (users.length >= 0) {
-      setPagination({
-        cursor: users[users.length - 1].display_name,
-        direction: "forward",
-      });
-    } else {
-      toast({
-        title: "Can not paginate when no users are found",
-        status: "warning",
-        duration: 1000,
-        isClosable: true,
-      });
-    }
-  };
-
-  // Present users in a naive table.
-  return (
-    <Stack>
-      <Flex p="2">
-        <Button onClick={toPreviousPage}>Previous</Button>
-        <Spacer />
-        <Button onClick={toNextPage}>Next</Button>
-      </Flex>
-      <TableContainer>
-        <Table variant="simple">
-          <TableCaption>Users</TableCaption>
-          <Thead>
-            <Tr>
-              <Th>Id</Th>
-              <Th>Auth Id</Th>
-              <Th>Auth Method</Th>
-              <Th>Name</Th>
-              <Th>Role</Th>
-              <Th>Update</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {users.map(({ id, user_id, auth_method, display_name, role }) => (
-              <Tr key={user_id}>
-                <Td>{user_id}</Td>
-                <Td>{id}</Td>
-                <Td>{auth_method}</Td>
-                <Td>{display_name}</Td>
-                <Td>{role}</Td>
-                <Td>
-                  <Link href={`/admin/manage_user/${user_id}`}>Manage</Link>
-                </Td>
-              </Tr>
-            ))}
-          </Tbody>
-        </Table>
-      </TableContainer>
-    </Stack>
-  );
-};
-
-export default UsersCell;
@@ -187,6 +187,16 @@ export class OasstApiClient {
    return this.get(url);
  }

+  async fetch_user_by_display_name(name: string): Promise<BackendUser[]> {
+    const params = new URLSearchParams({
+      search_text: name,
+    });
+
+    const endpoint = `/api/v1/frontend_users/by_display_name`;
+
+    return this.get(`${endpoint}?${params.toString()}`);
+  }
+
  /**
   * Returns the `Message`s associated with `user_id` in the backend.
   */
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useEffect } from "react";
 import { getAdminLayout } from "src/components/Layout";
-import UsersCell from "src/components/UsersCell";
+import { UserTable } from "src/components/UserTable";

 /**
 * Provides the admin index page that will display a list of users and give
@@ -27,7 +27,6 @@ const AdminIndex = () => {
    }
    router.push("/");
  }, [router, session, status]);
-
  return (
    <>
      <Head>
@@ -37,7 +36,7 @@ const AdminIndex = () => {
          content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
        />
      </Head>
-      <main className="oa-basic-theme">{status === "loading" ? "loading..." : <UsersCell />}</main>
+      <main>{status === "loading" ? "loading..." : <UserTable />}</main>
    </>
  );
 };
@@ -1,11 +1,12 @@
 import { withRole } from "src/lib/auth";
 import { oasstApiClient } from "src/lib/oasst_api_client";
 import prisma from "src/lib/prismadb";
+import { BackendUser } from "src/types/Users";

 /**
 * The number of users to fetch in a single request.  Could later be a query parameter.
 */
-const PAGE_SIZE = 20;
+const PAGE_SIZE = 1;

 /**
 * Returns a list of user results from the database when the requesting user is
@@ -17,10 +18,16 @@ const PAGE_SIZE = 20;
 *   direction.
 */
 const handler = withRole("admin", async (req, res) => {
-  const { cursor, direction } = req.query;
+  const { cursor, direction, display_name = "" } = req.query;

  // First, get all the users according to the backend.
-  const all_users = await oasstApiClient.fetch_users(PAGE_SIZE, cursor as string, direction === "forward");
+  let all_users: BackendUser[] = [];
+
+  if (typeof display_name === "string" && display_name) {
+    all_users = await oasstApiClient.fetch_user_by_display_name(display_name);
+  } else {
+    all_users = await oasstApiClient.fetch_users(PAGE_SIZE, cursor as string, direction === "forward");
+  }

  // Next, get all the users stored in the web's auth database to fetch their role.
  const local_user_ids = all_users.map(({ id }) => id);