🪟 🎉 Paginated querying for workspaces picker (#9580)

Author: teallarson

airbyte-webapp/src/components/workspace/WorkspacesPicker.tsx

@@ -8,11 +8,9 @@ import { Icon } from "components/ui/Icon";
 import { Text } from "components/ui/Text";
 
 import { useCurrentWorkspace } from "core/api";
-import { CloudWorkspaceReadList } from "core/api/types/CloudApi";
-import { WorkspaceReadList } from "core/request/AirbyteClient";
 
 import styles from "./WorkspacesPicker.module.scss";
-import { WorkspacesPickerList } from "./WorkspacesPickerList";
+import { WorkspaceFetcher, WorkspacesPickerList } from "./WorkspacesPickerList";
 
 const WorkspaceButton = React.forwardRef<HTMLButtonElement | null, React.ButtonHTMLAttributes<HTMLButtonElement>>(
   ({ children, ...props }, ref) => {
@@ -26,11 +24,7 @@ const WorkspaceButton = React.forwardRef<HTMLButtonElement | null, React.ButtonH
 
 WorkspaceButton.displayName = "WorkspaceButton";
 
-interface WorkspacePickerProps {
-  workspaces?: WorkspaceReadList | CloudWorkspaceReadList;
-  loading: boolean;
-}
-export const WorkspacesPicker: React.FC<WorkspacePickerProps> = ({ workspaces, loading }) => {
+export const WorkspacesPicker: React.FC<{ useFetchWorkspaces: WorkspaceFetcher }> = ({ useFetchWorkspaces }) => {
   const currentWorkspace = useCurrentWorkspace();
 
   const { x, y, reference, floating, strategy } = useFloating({
@@ -70,7 +64,7 @@ export const WorkspacesPicker: React.FC<WorkspacePickerProps> = ({ workspaces, l
                   {currentWorkspace.name}
                 </Text>
               </Box>
-              <WorkspacesPickerList loading={loading} workspaces={workspaces} closePicker={close} />
+              <WorkspacesPickerList useFetchWorkspaces={useFetchWorkspaces} closePicker={close} />
             </div>
           </Popover.Panel>
         </>

airbyte-webapp/src/components/workspace/WorkspacesPickerList.tsx

@@ -1,6 +1,7 @@
-import { HTMLAttributes, useEffect, useMemo, useRef, useState, forwardRef, Ref } from "react";
+import { UseInfiniteQueryResult } from "@tanstack/react-query";
+import { HTMLAttributes, useRef, forwardRef, Ref, useState } from "react";
 import { FormattedMessage } from "react-intl";
-import { useLocation, useUpdateEffect } from "react-use";
+import { useDebounce, useLocation, useUpdateEffect } from "react-use";
 import { Virtuoso, ItemContent, ComputeItemKey, VirtuosoHandle } from "react-virtuoso";
 
 import { Box } from "components/ui/Box";
@@ -13,13 +14,24 @@ import { Text } from "components/ui/Text";
 import { CloudWorkspaceRead, CloudWorkspaceReadList } from "core/api/types/CloudApi";
 import { WorkspaceRead, WorkspaceReadList } from "core/request/AirbyteClient";
 import { RoutePaths } from "pages/routePaths";
+import { WORKSPACE_LIST_LENGTH } from "pages/workspaces/WorkspacesPage";
 
 import styles from "./WorkspacesPickerList.module.scss";
 
+export type WorkspaceFetcher = (
+  pageSize: number,
+  nameContains: string
+) => UseInfiniteQueryResult<
+  {
+    data: CloudWorkspaceReadList | WorkspaceReadList;
+    pageParam: number;
+  },
+  unknown
+>;
+
 interface WorkspacePickerListProps {
-  loading: boolean;
-  workspaces?: CloudWorkspaceReadList | WorkspaceReadList;
   closePicker: () => void;
+  useFetchWorkspaces: WorkspaceFetcher;
 }
 
 const ListRow: ItemContent<CloudWorkspaceRead | WorkspaceRead, null> = (_index, workspace) => {
@@ -49,39 +61,52 @@ const UlList = forwardRef<HTMLDivElement>((props, ref) => (
 ));
 UlList.displayName = "UlList";
 
-export const WorkspacesPickerList: React.FC<WorkspacePickerListProps> = ({ loading, closePicker, workspaces }) => {
-  const [workspaceFilter, setWorkspaceFilter] = useState("");
+export const WorkspacesPickerList: React.FC<WorkspacePickerListProps> = ({ closePicker, useFetchWorkspaces }) => {
   const location = useLocation();
 
+  const [searchValue, setSearchValue] = useState("");
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState("");
+
+  const {
+    data: workspacesData,
+    hasNextPage,
+    fetchNextPage,
+    isLoading,
+    isFetchingNextPage,
+  } = useFetchWorkspaces(WORKSPACE_LIST_LENGTH, debouncedSearchValue);
+
+  const workspaces =
+    workspacesData?.pages.flatMap<CloudWorkspaceRead | WorkspaceRead>((page) => page.data.workspaces) ?? [];
+
+  const handleEndReached = () => {
+    if (hasNextPage) {
+      fetchNextPage();
+    }
+  };
+
+  useDebounce(
+    () => {
+      setDebouncedSearchValue(searchValue);
+      virtuosoRef.current?.scrollTo({ top: 0 });
+    },
+    250,
+    [searchValue]
+  );
+
   useUpdateEffect(() => {
     closePicker();
   }, [closePicker, location.pathname, location.search]);
 
-  const filteredWorkspaces = useMemo(() => {
-    const filterableWorkspaces = workspaces?.workspaces as Array<WorkspaceRead | CloudWorkspaceRead>;
-
-    return (
-      filterableWorkspaces.filter((workspace) => {
-        return workspace.name?.toLowerCase().includes(workspaceFilter.toLowerCase());
-      }) ?? []
-    );
-  }, [workspaceFilter, workspaces]);
-
   const virtuosoRef = useRef<VirtuosoHandle | null>(null);
-  useEffect(() => {
-    virtuosoRef.current?.scrollTo({ top: 0 });
-  }, [filteredWorkspaces]);
 
-  return loading ? (
+  return isLoading ? (
     <Box p="lg">
       <LoadingSpinner />
     </Box>
   ) : (
     <div>
-      <div className={styles.workspaceSearch}>
-        <SearchInput value={workspaceFilter} onChange={(e) => setWorkspaceFilter(e.target.value)} inline />
-      </div>
-      {!filteredWorkspaces.length ? (
+      <SearchInput value={searchValue} onChange={(e) => setSearchValue(e.target.value)} inline />
+      {!workspaces || !workspaces.length ? (
         <Box p="md">
           <FormattedMessage id="workspaces.noWorkspaces" />
         </Box>
@@ -95,7 +120,9 @@ export const WorkspacesPickerList: React.FC<WorkspacePickerListProps> = ({ loadi
             ),
             width: "100%",
           }}
-          data={filteredWorkspaces}
+          data={workspaces}
+          endReached={handleEndReached}
+          increaseViewportBy={5}
           defaultItemHeight={37 /* single-line workspaces are 36.59 pixels in Chrome */}
           computeItemKey={computeItemKey}
           components={{
@@ -109,7 +136,11 @@ export const WorkspacesPickerList: React.FC<WorkspacePickerListProps> = ({ loadi
           itemContent={ListRow}
         />
       )}
-
+      {isFetchingNextPage && (
+        <Box pt="sm">
+          <LoadingSpinner />
+        </Box>
+      )}
       <Box py="lg">
         <Link variant="primary" to={`/${RoutePaths.Workspaces}`}>
           <Text color="blue" size="md" bold align="center">

airbyte-webapp/src/core/api/hooks/cloud/cloudWorkspaces.ts

@@ -27,7 +27,7 @@ import { useCurrentWorkspace } from "../workspaces";
 export const workspaceKeys = {
   all: [SCOPE_USER, "cloud_workspaces"] as const,
   lists: () => [...workspaceKeys.all, "list"] as const,
-  list: (filters: string) => [...workspaceKeys.lists(), { filters }] as const,
+  list: (filters: string | Record<string, string>) => [...workspaceKeys.lists(), { filters }] as const,
   detail: (id: number | string) => [...workspaceKeys.all, "detail", id] as const,
   usage: (id: number | string, timeWindow: string) => [...workspaceKeys.all, id, timeWindow, "usage"] as const,
 };
@@ -77,12 +77,12 @@ export function useCreateCloudWorkspace() {
   );
 }
 
-export const useListCloudWorkspacesInfinite = (pageSize: number, nameContains?: string) => {
+export const useListCloudWorkspacesInfinite = (pageSize: number, nameContains: string) => {
   const { userId } = useCurrentUser();
   const requestOptions = useRequestOptions();
 
   return useInfiniteQuery(
-    workspaceKeys.list(`paginated`),
+    workspaceKeys.list({ pageSize: pageSize.toString(), nameContains }),
     async ({ pageParam = 0 }: { pageParam?: number }) => {
       return {
         data: await webBackendListWorkspacesByUserPaginated(
@@ -96,6 +96,7 @@ export const useListCloudWorkspacesInfinite = (pageSize: number, nameContains?:
       suspense: true,
       getPreviousPageParam: (firstPage) => (firstPage.pageParam > 0 ? firstPage.pageParam - 1 : undefined),
       getNextPageParam: (lastPage) => (lastPage.data.workspaces.length < pageSize ? undefined : lastPage.pageParam + 1),
+      cacheTime: 10000,
     }
   );
 };

airbyte-webapp/src/core/api/hooks/workspaces.ts

@@ -29,7 +29,7 @@ import { useSuspenseQuery } from "../useSuspenseQuery";
 export const workspaceKeys = {
   all: [SCOPE_USER, "workspaces"] as const,
   lists: () => [...workspaceKeys.all, "list"] as const,
-  list: (filters: string) => [...workspaceKeys.lists(), { filters }] as const,
+  list: (filters: string | Record<string, string>) => [...workspaceKeys.lists(), { filters }] as const,
   allListUsers: [SCOPE_WORKSPACE, "users", "list"] as const,
   listUsers: (workspaceId: string) => [SCOPE_WORKSPACE, "users", "list", workspaceId] as const,
   detail: (workspaceId: string) => [...workspaceKeys.all, "details", workspaceId] as const,
@@ -149,25 +149,24 @@ export const useListUsersInWorkspace = (workspaceId: string) => {
   return useSuspenseQuery(queryKey, () => listUsersInWorkspace({ workspaceId }, requestOptions));
 };
 
-export const useListWorkspacesInfinite = (pageSize: number, nameContains?: string) => {
+export const useListWorkspacesInfinite = (pageSize: number, nameContains: string) => {
   const { userId } = useCurrentUser();
   const requestOptions = useRequestOptions();
 
   return useInfiniteQuery(
-    workspaceKeys.list(`paginated`),
-    async ({ pageParam = 0 }: { pageParam?: number }) => {
+    workspaceKeys.list({ pageSize: pageSize.toString(), nameContains }),
+    async ({ pageParam = 0 }) => {
+      const rowOffset = pageParam * pageSize;
       return {
-        data: await listWorkspacesByUser(
-          { userId, pagination: { pageSize, rowOffset: pageParam * pageSize }, nameContains },
-          requestOptions
-        ),
+        data: await listWorkspacesByUser({ userId, pagination: { pageSize, rowOffset }, nameContains }, requestOptions),
         pageParam,
       };
     },
     {
       suspense: true,
       getPreviousPageParam: (firstPage) => (firstPage.pageParam > 0 ? firstPage.pageParam - 1 : undefined),
       getNextPageParam: (lastPage) => (lastPage.data.workspaces.length < pageSize ? undefined : lastPage.pageParam + 1),
+      cacheTime: 10000,
     }
   );
 };

airbyte-webapp/src/packages/cloud/views/layout/CloudMainView/CloudMainView.tsx

@@ -11,7 +11,7 @@ import { ThemeToggle } from "components/ui/ThemeToggle";
 import { WorkspacesPicker } from "components/workspace/WorkspacesPicker";
 
 import { useCurrentOrganizationInfo, useCurrentWorkspace } from "core/api";
-import { useGetCloudWorkspaceAsync, useListCloudWorkspacesAsync } from "core/api/cloud";
+import { useGetCloudWorkspaceAsync, useListCloudWorkspacesInfinite } from "core/api/cloud";
 import { CloudWorkspaceReadWorkspaceTrialStatus as WorkspaceTrialStatus } from "core/api/types/CloudApi";
 import { useAuthService } from "core/services/auth";
 import { FeatureItem, useFeature } from "core/services/features";
@@ -41,7 +41,6 @@ const CloudMainView: React.FC<React.PropsWithChildren<unknown>> = (props) => {
   const workspace = useCurrentWorkspace();
   const organization = useCurrentOrganizationInfo();
   const cloudWorkspace = useGetCloudWorkspaceAsync(workspace.workspaceId);
-  const { data: workspaces, isLoading } = useListCloudWorkspacesAsync();
 
   const isShowAdminWarningEnabled = useFeature(FeatureItem.ShowAdminWarningInWorkspace);
   const isNewTrialPolicy = useExperiment("billing.newTrialPolicy", false);
@@ -65,7 +64,7 @@ const CloudMainView: React.FC<React.PropsWithChildren<unknown>> = (props) => {
         <SideBar>
           <AirbyteHomeLink />
           {isShowAdminWarningEnabled && <AdminWorkspaceWarning />}
-          <WorkspacesPicker loading={isLoading} workspaces={workspaces} />
+          <WorkspacesPicker useFetchWorkspaces={useListCloudWorkspacesInfinite} />
           <MenuContent>
             <MainNavItems />
             <MenuContent>

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/CloudWorkspacesPage.tsx

@@ -29,16 +29,16 @@ export const CloudWorkspacesPage: React.FC = () => {
   const { isLoading, mutateAsync: handleLogout } = useMutation(() => logout?.() ?? Promise.resolve());
   useTrackPage(PageTrackingCodes.WORKSPACES);
   const [searchValue, setSearchValue] = useState("");
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState("");
   const [isSearchEmpty, setIsSearchEmpty] = useState(true);
 
   const {
     data: workspacesData,
-    refetch,
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
     isFetching,
-  } = useListCloudWorkspacesInfinite(WORKSPACE_LIST_LENGTH, searchValue);
+  } = useListCloudWorkspacesInfinite(WORKSPACE_LIST_LENGTH, debouncedSearchValue);
 
   const { organizationsMemberOnly, organizationsToCreateIn } = useOrganizationsToCreateWorkspaces();
 
@@ -55,8 +55,8 @@ export const CloudWorkspacesPage: React.FC = () => {
 
   useDebounce(
     () => {
-      refetch();
-      setIsSearchEmpty(searchValue === "");
+      setDebouncedSearchValue(searchValue);
+      setIsSearchEmpty(debouncedSearchValue === "");
     },
     250,
     [searchValue]

airbyte-webapp/src/pages/workspaces/WorkspacesPage.tsx

@@ -29,14 +29,14 @@ const WorkspacesPage: React.FC = () => {
   const { isLoading, mutateAsync: handleLogout } = useMutation(() => logout?.() ?? Promise.resolve());
   useTrackPage(PageTrackingCodes.WORKSPACES);
   const [searchValue, setSearchValue] = useState("");
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState("");
 
   const {
     data: workspacesData,
-    refetch,
     hasNextPage,
     fetchNextPage,
     isFetchingNextPage,
-  } = useListWorkspacesInfinite(WORKSPACE_LIST_LENGTH, searchValue);
+  } = useListWorkspacesInfinite(WORKSPACE_LIST_LENGTH, debouncedSearchValue);
 
   const workspaces = workspacesData?.pages.flatMap((page) => page.data.workspaces) ?? [];
 
@@ -45,7 +45,7 @@ const WorkspacesPage: React.FC = () => {
 
   useDebounce(
     () => {
-      refetch();
+      setDebouncedSearchValue(searchValue);
     },
     250,
     [searchValue]
@@ -89,7 +89,7 @@ const WorkspacesPage: React.FC = () => {
         </Box>
         <WorkspacesList workspaces={workspaces} fetchNextPage={fetchNextPage} hasNextPage={hasNextPage} />
         {isFetchingNextPage && (
-          <Box py="2xl" className={styles.loadingSpinner}>
+          <Box py="2xl">
             <LoadingSpinner />
           </Box>
         )}

airbyte-webapp/src/views/layout/MainView/MainView.tsx

@@ -11,7 +11,7 @@ import { ThemeToggle } from "components/ui/ThemeToggle";
 import { WorkspacesPicker } from "components/workspace/WorkspacesPicker";
 
 import { useConfig } from "config";
-import { useListWorkspacesAsync } from "core/api";
+import { useListWorkspacesInfinite } from "core/api";
 import { FeatureItem, useFeature } from "core/services/features";
 import { links } from "core/utils/links";
 import { useAppMonitoringService } from "hooks/services/AppMonitoringService";
@@ -34,13 +34,12 @@ const MainView: React.FC<React.PropsWithChildren<unknown>> = (props) => {
   const { trackError } = useAppMonitoringService();
   const { hasNewVersions } = useGetConnectorsOutOfDate();
   const newWorkspacesUI = useFeature(FeatureItem.MultiWorkspaceUI);
-  const { data: workspaces, isLoading } = useListWorkspacesAsync();
 
   return (
     <FlexContainer className={classNames(styles.mainViewContainer)} gap="none">
       <SideBar>
         <AirbyteHomeLink />
-        {newWorkspacesUI && <WorkspacesPicker loading={isLoading} workspaces={workspaces} />}
+        {newWorkspacesUI && <WorkspacesPicker useFetchWorkspaces={useListWorkspacesInfinite} />}
         <MenuContent>
           <MainNavItems />
           <MenuContent>