From 6bc56bebb3d9b189f14a76525821d4a88bc85d91 Mon Sep 17 00:00:00 2001
From: Cyrus Goh <hello@cyrusgoh.com>
Date: Thu, 21 Nov 2024 15:24:16 -0800
Subject: [PATCH] Support infinite query when listing org users and invites
 (#6128)

* infinite query org users

* infinite query org invites

* tweak

* fetch next page in org users table

* fetch next page for users and invites infinite query

* tweak scroll container height

* lint

* more table height fix

* use width precent

* fix transient bug

* remove table min h, table wrapper totalsize h
---
 .../organizations/users/OrgUsersTable.svelte  | 234 +++++++++++++++++-
 .../create-infinite-query-org-invites.ts      |  64 +++++
 .../users/create-infinite-query-org-users.ts  |  64 +++++
 .../[organization]/-/users/+page.svelte       |  54 ++--
 4 files changed, 394 insertions(+), 22 deletions(-)
 create mode 100644 web-admin/src/features/organizations/users/create-infinite-query-org-invites.ts
 create mode 100644 web-admin/src/features/organizations/users/create-infinite-query-org-users.ts

diff --git a/web-admin/src/features/organizations/users/OrgUsersTable.svelte b/web-admin/src/features/organizations/users/OrgUsersTable.svelte
index 4a3c3816d5b..70369dde583 100644
--- a/web-admin/src/features/organizations/users/OrgUsersTable.svelte
+++ b/web-admin/src/features/organizations/users/OrgUsersTable.svelte
@@ -1,19 +1,50 @@
 <script lang="ts">
+  import { writable } from "svelte/store";
   import type { V1MemberUser, V1UserInvite } from "@rilldata/web-admin/client";
-  import type { ColumnDef } from "@tanstack/svelte-table";
-  import BasicTable from "@rilldata/web-common/components/table/BasicTable.svelte";
-  import { flexRender } from "@tanstack/svelte-table";
   import OrgUsersTableUserCompositeCell from "./OrgUsersTableUserCompositeCell.svelte";
   import OrgUsersTableActionsCell from "./OrgUsersTableActionsCell.svelte";
   import OrgUsersTableRoleCell from "./OrgUsersTableRoleCell.svelte";
+  import {
+    createSvelteTable,
+    flexRender,
+    getCoreRowModel,
+    getSortedRowModel,
+  } from "@tanstack/svelte-table";
+  import type {
+    ColumnDef,
+    OnChangeFn,
+    SortingState,
+    TableOptions,
+  } from "@tanstack/svelte-table";
+  import { createVirtualizer } from "@tanstack/svelte-virtual";
+  import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
+  import type { InfiniteQueryObserverResult } from "@tanstack/svelte-query";
 
   interface OrgUser extends V1MemberUser, V1UserInvite {
     invitedBy?: string;
   }
 
   export let data: OrgUser[];
+  export let usersQuery: InfiniteQueryObserverResult;
+  export let invitesQuery: InfiniteQueryObserverResult;
   export let currentUserEmail: string;
 
+  const ROW_HEIGHT = 69;
+  const OVERSCAN = 5;
+
+  let virtualListEl: HTMLDivElement;
+  let sorting: SortingState = [];
+
+  $: safeData = Array.isArray(data) ? data : [];
+  $: {
+    if (safeData) {
+      options.update((old) => ({
+        ...old,
+        data: safeData,
+      }));
+    }
+  }
+
   const columns: ColumnDef<OrgUser, any>[] = [
     {
       accessorKey: "user",
@@ -59,6 +90,201 @@
       },
     },
   ];
+
+  const setSorting: OnChangeFn<SortingState> = (updater) => {
+    if (updater instanceof Function) {
+      sorting = updater(sorting);
+    } else {
+      sorting = updater;
+    }
+
+    options.update((old) => ({
+      ...old,
+      state: {
+        ...old.state,
+        sorting,
+      },
+    }));
+  };
+
+  const options = writable<TableOptions<OrgUser>>({
+    data: safeData,
+    columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  const table = createSvelteTable(options);
+
+  $: rows = $table.getRowModel().rows;
+
+  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+    count: 0,
+    getScrollElement: () => virtualListEl,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN,
+  });
+
+  $: {
+    const hasNextPage = usersQuery.hasNextPage || invitesQuery.hasNextPage;
+
+    $virtualizer.setOptions({
+      count: hasNextPage ? safeData.length + 1 : safeData.length,
+    });
+
+    const [lastItem] = [...$virtualizer.getVirtualItems()].reverse();
+
+    if (
+      lastItem &&
+      lastItem.index > safeData.length - 1 &&
+      hasNextPage &&
+      !usersQuery.isFetchingNextPage &&
+      !invitesQuery.isFetchingNextPage
+    ) {
+      if (usersQuery.hasNextPage) {
+        usersQuery.fetchNextPage();
+      }
+      if (invitesQuery.hasNextPage) {
+        invitesQuery.fetchNextPage();
+      }
+    }
+  }
+
+  $: dynamicTableMaxHeight = data.length > 12 ? `calc(100dvh - 300px)` : "auto";
 </script>
 
-<BasicTable {data} {columns} emptyText="No users found" scrollable />
+<!-- FIXME: hoist this to a InfiniteScrollTable component -->
+<div
+  class={`list scroll-container ${dynamicTableMaxHeight}`}
+  bind:this={virtualListEl}
+  style:max-height={dynamicTableMaxHeight}
+>
+  <div class="table-wrapper" style="position: relative;">
+    <table>
+      <thead>
+        {#each $table.getHeaderGroups() as headerGroup}
+          <tr class="h-10">
+            {#each headerGroup.headers as header (header.id)}
+              {@const widthPercent = header.column.columnDef.meta?.widthPercent}
+              {@const marginLeft = header.column.columnDef.meta?.marginLeft}
+              <th
+                colSpan={header.colSpan}
+                style={`width: ${widthPercent}%;`}
+                class="px-4 py-2 text-left"
+                on:click={header.column.getToggleSortingHandler()}
+              >
+                {#if !header.isPlaceholder}
+                  <div
+                    style={`margin-left: ${marginLeft};`}
+                    class:cursor-pointer={header.column.getCanSort()}
+                    class:select-none={header.column.getCanSort()}
+                    class="font-semibold text-gray-500 flex flex-row items-center gap-x-1"
+                  >
+                    <svelte:component
+                      this={flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                    />
+                    {#if header.column.getIsSorted().toString() === "asc"}
+                      <span>
+                        <ArrowDown flip size="12px" />
+                      </span>
+                    {:else if header.column.getIsSorted().toString() === "desc"}
+                      <span>
+                        <ArrowDown size="12px" />
+                      </span>
+                    {/if}
+                  </div>
+                {/if}
+              </th>
+            {/each}
+          </tr>
+        {/each}
+      </thead>
+      <tbody>
+        {#if $table.getRowModel().rows.length === 0}
+          <tr>
+            <td
+              colspan={columns.length}
+              class="px-4 py-4 text-center text-gray-500"
+            >
+              No users found
+            </td>
+          </tr>
+        {:else}
+          {#each $virtualizer.getVirtualItems() as virtualRow, idx (virtualRow.index)}
+            <tr
+              style="height: {virtualRow.size}px; transform: translateY({virtualRow.start -
+                idx * virtualRow.size}px);"
+            >
+              {#each rows[virtualRow.index]?.getVisibleCells() ?? [] as cell (cell.id)}
+                <td
+                  class={`px-4 py-2 max-w-[200px] truncate ${cell.column.id === "actions" ? "w-1" : ""}`}
+                  data-label={cell.column.columnDef.header}
+                >
+                  <svelte:component
+                    this={flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext(),
+                    )}
+                  />
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        {/if}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style lang="postcss">
+  table {
+    @apply border-separate border-spacing-0 w-full;
+  }
+  table th,
+  table td {
+    @apply border-b border-gray-200;
+  }
+  thead {
+    @apply sticky top-0 z-30 bg-white;
+  }
+  thead tr th {
+    @apply border-t border-gray-200;
+  }
+  thead tr th:first-child {
+    @apply border-l;
+    @apply rounded-tl-sm;
+  }
+  thead tr th:last-child {
+    @apply border-r;
+    @apply rounded-tr-sm;
+  }
+  thead tr:last-child th {
+    @apply border-b;
+  }
+  tbody tr:first-child {
+    @apply border-t-0;
+  }
+  tbody td:first-child {
+    @apply border-l;
+  }
+  tbody td:last-child {
+    @apply border-r;
+  }
+  tbody tr:last-child td:first-child {
+    @apply rounded-bl-sm;
+  }
+  tbody tr:last-child td:last-child {
+    @apply rounded-br-sm;
+  }
+  .scroll-container {
+    width: 100%;
+    overflow-y: auto;
+  }
+</style>
diff --git a/web-admin/src/features/organizations/users/create-infinite-query-org-invites.ts b/web-admin/src/features/organizations/users/create-infinite-query-org-invites.ts
new file mode 100644
index 00000000000..b52618a34ba
--- /dev/null
+++ b/web-admin/src/features/organizations/users/create-infinite-query-org-invites.ts
@@ -0,0 +1,64 @@
+import {
+  adminServiceListOrganizationInvites,
+  getAdminServiceListOrganizationInvitesQueryKey,
+  type AdminServiceListOrganizationInvitesParams,
+  type RpcStatus,
+} from "@rilldata/web-admin/client";
+import {
+  createInfiniteQuery,
+  type CreateInfiniteQueryOptions,
+  type CreateInfiniteQueryResult,
+  type QueryFunction,
+  type QueryKey,
+} from "@tanstack/svelte-query";
+
+export const createAdminServiceListOrganizationInvitesInfiniteQuery = <
+  TData = Awaited<ReturnType<typeof adminServiceListOrganizationInvites>>,
+  TError = RpcStatus,
+>(
+  organization: string,
+  params?: AdminServiceListOrganizationInvitesParams,
+  options?: {
+    query?: CreateInfiniteQueryOptions<
+      Awaited<ReturnType<typeof adminServiceListOrganizationInvites>>,
+      TError,
+      TData
+    >;
+  },
+): CreateInfiniteQueryResult<TData, TError> & { queryKey: QueryKey } => {
+  const { query: queryOptions } = options ?? {};
+
+  const queryKey =
+    queryOptions?.queryKey ??
+    getAdminServiceListOrganizationInvitesQueryKey(organization, params);
+
+  const queryFn: QueryFunction<
+    Awaited<ReturnType<typeof adminServiceListOrganizationInvites>>
+  > = ({ pageParam, signal }) =>
+    adminServiceListOrganizationInvites(
+      organization,
+      { ...params, pageToken: pageParam },
+      signal,
+    );
+
+  const query = createInfiniteQuery<
+    Awaited<ReturnType<typeof adminServiceListOrganizationInvites>>,
+    TError,
+    TData
+  >({
+    queryKey,
+    queryFn,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextPageToken || lastPage.nextPageToken === "") {
+        return undefined;
+      }
+      return lastPage.nextPageToken;
+    },
+    enabled: !!organization,
+    ...queryOptions,
+  }) as CreateInfiniteQueryResult<TData, TError> & { queryKey: QueryKey };
+
+  query.queryKey = queryKey;
+
+  return query;
+};
diff --git a/web-admin/src/features/organizations/users/create-infinite-query-org-users.ts b/web-admin/src/features/organizations/users/create-infinite-query-org-users.ts
new file mode 100644
index 00000000000..beb16419529
--- /dev/null
+++ b/web-admin/src/features/organizations/users/create-infinite-query-org-users.ts
@@ -0,0 +1,64 @@
+import {
+  adminServiceListOrganizationMemberUsers,
+  getAdminServiceListOrganizationMemberUsersQueryKey,
+  type AdminServiceListOrganizationMemberUsersParams,
+  type RpcStatus,
+} from "@rilldata/web-admin/client";
+import {
+  createInfiniteQuery,
+  type CreateInfiniteQueryOptions,
+  type CreateInfiniteQueryResult,
+  type QueryFunction,
+  type QueryKey,
+} from "@tanstack/svelte-query";
+
+export const createAdminServiceListOrganizationMemberUsersInfiniteQuery = <
+  TData = Awaited<ReturnType<typeof adminServiceListOrganizationMemberUsers>>,
+  TError = RpcStatus,
+>(
+  organization: string,
+  params?: AdminServiceListOrganizationMemberUsersParams,
+  options?: {
+    query?: CreateInfiniteQueryOptions<
+      Awaited<ReturnType<typeof adminServiceListOrganizationMemberUsers>>,
+      TError,
+      TData
+    >;
+  },
+): CreateInfiniteQueryResult<TData, TError> & { queryKey: QueryKey } => {
+  const { query: queryOptions } = options ?? {};
+
+  const queryKey =
+    queryOptions?.queryKey ??
+    getAdminServiceListOrganizationMemberUsersQueryKey(organization, params);
+
+  const queryFn: QueryFunction<
+    Awaited<ReturnType<typeof adminServiceListOrganizationMemberUsers>>
+  > = ({ pageParam, signal }) =>
+    adminServiceListOrganizationMemberUsers(
+      organization,
+      { ...params, pageToken: pageParam },
+      signal,
+    );
+
+  const query = createInfiniteQuery<
+    Awaited<ReturnType<typeof adminServiceListOrganizationMemberUsers>>,
+    TError,
+    TData
+  >({
+    queryKey,
+    queryFn,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.nextPageToken || lastPage.nextPageToken === "") {
+        return undefined;
+      }
+      return lastPage.nextPageToken;
+    },
+    enabled: !!organization,
+    ...queryOptions,
+  }) as CreateInfiniteQueryResult<TData, TError> & { queryKey: QueryKey };
+
+  query.queryKey = queryKey;
+
+  return query;
+};
diff --git a/web-admin/src/routes/[organization]/-/users/+page.svelte b/web-admin/src/routes/[organization]/-/users/+page.svelte
index c842674ea23..5860197c4b0 100644
--- a/web-admin/src/routes/[organization]/-/users/+page.svelte
+++ b/web-admin/src/routes/[organization]/-/users/+page.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
   import { page } from "$app/stores";
-  import {
-    createAdminServiceListOrganizationMemberUsers,
-    createAdminServiceGetCurrentUser,
-    createAdminServiceListOrganizationInvites,
-  } from "@rilldata/web-admin/client";
+  import { createAdminServiceGetCurrentUser } from "@rilldata/web-admin/client";
   import type { V1UserInvite } from "@rilldata/web-admin/client";
   import DelayedSpinner from "@rilldata/web-common/features/entity-management/DelayedSpinner.svelte";
   import OrgUsersTable from "@rilldata/web-admin/features/organizations/users/OrgUsersTable.svelte";
@@ -12,6 +8,10 @@
   import { Plus } from "lucide-svelte";
   import AddUsersDialog from "@rilldata/web-admin/features/organizations/users/AddUsersDialog.svelte";
   import { Search } from "@rilldata/web-common/components/search";
+  import { createAdminServiceListOrganizationMemberUsersInfiniteQuery } from "@rilldata/web-admin/features/organizations/users/create-infinite-query-org-users";
+  import { createAdminServiceListOrganizationInvitesInfiniteQuery } from "@rilldata/web-admin/features/organizations/users/create-infinite-query-org-invites";
+
+  const PAGE_SIZE = 12;
 
   let userEmail = "";
   let userRole = "";
@@ -20,10 +20,24 @@
   let searchText = "";
 
   $: organization = $page.params.organization;
-  $: listOrganizationMemberUsers =
-    createAdminServiceListOrganizationMemberUsers(organization);
-  $: listOrganizationInvites =
-    createAdminServiceListOrganizationInvites(organization);
+
+  $: orgMemberUsersInfiniteQuery =
+    createAdminServiceListOrganizationMemberUsersInfiniteQuery(organization, {
+      pageSize: PAGE_SIZE,
+    });
+  $: orgInvitesInfiniteQuery =
+    createAdminServiceListOrganizationInvitesInfiniteQuery(organization, {
+      pageSize: PAGE_SIZE,
+    });
+
+  $: allOrgMemberUsersRows =
+    $orgMemberUsersInfiniteQuery.data?.pages.flatMap(
+      (page) => page.members ?? [],
+    ) ?? [];
+  $: allOrgInvitesRows =
+    $orgInvitesInfiniteQuery.data?.pages.flatMap(
+      (page) => page.invites ?? [],
+    ) ?? [];
 
   function coerceInvitesToUsers(invites: V1UserInvite[]) {
     return invites.map((invite) => ({
@@ -33,12 +47,12 @@
     }));
   }
 
-  $: usersWithPendingInvites = [
-    ...($listOrganizationMemberUsers.data?.members ?? []),
-    ...coerceInvitesToUsers($listOrganizationInvites.data?.invites ?? []),
+  $: combinedRows = [
+    ...allOrgMemberUsersRows,
+    ...coerceInvitesToUsers(allOrgInvitesRows),
   ];
 
-  $: filteredUsers = usersWithPendingInvites.filter((user) =>
+  $: filteredUsers = combinedRows.filter((user) =>
     user.userEmail.toLowerCase().includes(searchText.toLowerCase()),
   );
 
@@ -46,16 +60,18 @@
 </script>
 
 <div class="flex flex-col w-full">
-  {#if $listOrganizationMemberUsers.isLoading}
+  {#if $orgMemberUsersInfiniteQuery.isLoading || $orgInvitesInfiniteQuery.isLoading}
     <DelayedSpinner
-      isLoading={$listOrganizationMemberUsers.isLoading}
+      isLoading={$orgMemberUsersInfiniteQuery.isLoading ||
+        $orgInvitesInfiniteQuery.isLoading}
       size="1rem"
     />
-  {:else if $listOrganizationMemberUsers.isError}
+  {:else if $orgMemberUsersInfiniteQuery.isError || $orgInvitesInfiniteQuery.isError}
     <div class="text-red-500">
-      Error loading organization members: {$listOrganizationMemberUsers.error}
+      Error loading organization members: {$orgMemberUsersInfiniteQuery.error ??
+        $orgInvitesInfiniteQuery.error}
     </div>
-  {:else if $listOrganizationMemberUsers.isSuccess}
+  {:else if $orgMemberUsersInfiniteQuery.isSuccess && $orgInvitesInfiniteQuery.isSuccess}
     <div class="flex flex-col gap-4">
       <div class="flex flex-row gap-x-4">
         <Search
@@ -76,6 +92,8 @@
       </div>
       <OrgUsersTable
         data={filteredUsers}
+        usersQuery={$orgMemberUsersInfiniteQuery}
+        invitesQuery={$orgInvitesInfiniteQuery}
         currentUserEmail={$currentUser.data?.user.email}
       />
     </div>