fix: clean up workspaces page (#16939)

Author: slate71

airbyte-webapp/src/area/layout/SideBar/components/AirbyteOrgPopoverPanel.module.scss

@@ -24,3 +24,7 @@
     border: none;
   }
 }
+
+.footerLoading {
+  border-top: variables.$border-thin solid colors.$grey-200;
+}

airbyte-webapp/src/area/layout/SideBar/components/AirbyteOrgPopoverPanel.tsx

@@ -11,9 +11,9 @@ import { LoadingSpinner } from "components/ui/LoadingSpinner";
 import { Text } from "components/ui/Text";
 
 import { useListOrganizationSummaries } from "core/api";
+import { OrganizationSummary } from "core/api/types/AirbyteClient";
 import { useCurrentUser } from "core/services/auth/AuthContext";
 import { useFeature, FeatureItem } from "core/services/features";
-import { isNonNullable } from "core/utils/isNonNullable";
 
 import styles from "./AirbyteOrgPopoverPanel.module.scss";
 import { OrganizationWithWorkspaces } from "./OrganizationWithWorkspaces";
@@ -36,13 +36,13 @@ export const AirbyteOrgPopoverPanel: React.FC<{ closePopover: () => void }> = ({
     },
   });
 
-  const organizationSummaries =
+  const organizationSummaries: OrganizationSummary[] =
     data?.pages.flatMap((page) => {
       if (showOSSWorkspaceName && page.organizationSummaries?.[0]?.workspaces?.[0]) {
         page.organizationSummaries[0].workspaces[0].name = formatMessage({ id: "sidebar.myWorkspace" });
       }
-      return page.organizationSummaries;
-    }) || [];
+      return page.organizationSummaries ?? [];
+    }) ?? [];
 
   const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
@@ -115,14 +115,16 @@ export const AirbyteOrgPopoverPanel: React.FC<{ closePopover: () => void }> = ({
           <Virtuoso
             ref={virtuosoRef}
             style={{ height: estimatedHeight }}
-            data={organizationSummaries?.filter(isNonNullable)}
+            data={organizationSummaries}
             endReached={handleEndReached}
             computeItemKey={(index, item) => item.organization.organizationId + index}
-            itemContent={OrganizationWithWorkspaces}
+            itemContent={(index, item) => (
+              <OrganizationWithWorkspaces {...item} lastItem={index === organizationSummaries.length - 1} />
+            )}
             components={{
               Footer: isFetchingNextPage
                 ? () => (
-                    <Box pt="md" pb="sm">
+                    <Box pt="md" pb="sm" className={styles.footerLoading}>
                       <LoadingSpinner />
                     </Box>
                   )

airbyte-webapp/src/area/layout/SideBar/components/OrganizationWithWorkspaces.module.scss

@@ -1,10 +1,6 @@
 @use "scss/colors";
 @use "scss/variables";
 
-.container {
-  border-bottom: 1px solid colors.$grey-200;
-}
-
 .organizationName {
   display: flex;
   align-items: center;
@@ -15,6 +11,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  width: 100%;
 
   &:hover {
     background-color: colors.$blue-40;
@@ -55,7 +52,7 @@
   align-items: center;
   justify-content: center;
   width: 32px;
-  height: 50px;
+  align-self: stretch;
 
   &:hover {
     background-color: colors.$blue-40;
@@ -70,6 +67,15 @@
   color: colors.$grey-400;
 }
 
+.workspaces {
+  box-sizing: border-box;
+  border-bottom: 1px solid colors.$grey-200;
+
+  &.lastItem {
+    border-bottom: none;
+  }
+}
+
 .workspaceItem {
   padding-left: calc(variables.$spacing-md * 2);
   padding-right: variables.$spacing-md;

airbyte-webapp/src/area/layout/SideBar/components/OrganizationWithWorkspaces.tsx

@@ -1,6 +1,6 @@
+import classNames from "classnames";
 import { FormattedMessage } from "react-intl";
 import { NavLink } from "react-router-dom";
-import { ItemContent } from "react-virtuoso";
 
 import { FlexContainer } from "components/ui/Flex";
 import { Icon } from "components/ui/Icon";
@@ -12,12 +12,15 @@ import { RoutePaths } from "pages/routePaths";
 
 import styles from "./OrganizationWithWorkspaces.module.scss";
 
-export const OrganizationWithWorkspaces: ItemContent<OrganizationSummary, null> = (
-  _index,
-  { organization, workspaces = [], memberCount, subscription }
-) => {
+export const OrganizationWithWorkspaces: React.FC<OrganizationSummary & { lastItem: boolean }> = ({
+  organization,
+  workspaces = [],
+  memberCount,
+  subscription,
+  lastItem,
+}) => {
   return (
-    <FlexContainer direction="column" gap="none" className={styles.container}>
+    <FlexContainer direction="column" gap="none">
       <FlexContainer direction="row" gap="xs" alignItems="center" justifyContent="space-between">
         <NavLink
           to={`${RoutePaths.Organization}/${organization.organizationId}/${RoutePaths.Workspaces}`}
@@ -28,8 +31,12 @@ export const OrganizationWithWorkspaces: ItemContent<OrganizationSummary, null>
               {organization.organizationName}
             </Text>
             <Text size="sm" color="grey400" className={styles.orgMeta}>
-              {subscription && <>{subscription.name} &bull; </>}
-              <FormattedMessage id="organization.members" values={{ count: memberCount || 0 }} />
+              {subscription && (
+                <FormattedMessage
+                  id="organization.members"
+                  values={{ subscriptionName: subscription.name, count: memberCount || 0 }}
+                />
+              )}
             </Text>
           </div>
         </NavLink>
@@ -40,7 +47,11 @@ export const OrganizationWithWorkspaces: ItemContent<OrganizationSummary, null>
           <Icon type="gear" className={styles.gearIcon} aria-hidden="true" />
         </NavLink>
       </FlexContainer>
-      <FlexContainer direction="column" gap="none">
+      <FlexContainer
+        direction="column"
+        gap="none"
+        className={classNames(styles.workspaces, { [styles.lastItem]: lastItem })}
+      >
         {workspaces.map((workspace) => (
           <NavLink
             key={workspace.workspaceId}

airbyte-webapp/src/components/ui/ListBox/ListboxOptions.tsx

@@ -14,15 +14,16 @@ export const ListboxOptions = React.forwardRef<
   HTMLElement,
   ExtractProps<typeof HeadlessUIListboxOptions> & ListboxOptionsProps
 >((props, ref) => {
+  const { fullWidth, ...restProps } = props;
   const mergedClassNames = classNames(
     styles.listboxOptions,
     {
-      [styles["listboxOptions--fullWidth"]]: !!props.fullWidth,
+      [styles["listboxOptions--fullWidth"]]: !!fullWidth,
     },
     props.className
   );
   return (
-    <HeadlessUIListboxOptions {...props} className={mergedClassNames} ref={ref}>
+    <HeadlessUIListboxOptions {...restProps} className={mergedClassNames} ref={ref}>
       {props.children}
     </HeadlessUIListboxOptions>
   );

airbyte-webapp/src/core/api/hooks/connections.tsx

@@ -3,6 +3,7 @@ import {
   useInfiniteQuery,
   useIsMutating,
   useMutation,
+  useQueries,
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
@@ -110,7 +111,7 @@ export const connectionsKeys = {
       requestBody.createdAtEnd,
     ] as const,
   event: (eventId: string) => [...connectionsKeys.all, "event", eventId] as const,
-  statusCounts: () => [...connectionsKeys.all, "statusCounts"] as const,
+  statusCounts: (workspaceId: string) => [...connectionsKeys.all, "statusCounts", workspaceId] as const,
 };
 
 export interface ConnectionValues {
@@ -895,7 +896,24 @@ export const useGetConnectionStatusesCounts = () => {
   const workspaceId = useCurrentWorkspaceId();
   const requestOptions = useRequestOptions();
 
-  return useQuery(connectionsKeys.statusCounts(), () =>
+  return useQuery(connectionsKeys.statusCounts(workspaceId), () =>
     webBackendGetConnectionStatusCounts({ workspaceId }, requestOptions)
   );
 };
+
+export const useGetWorkspacesStatusesCounts = (workspaceIds: string[], options?: { refetchInterval?: boolean }) => {
+  const requestOptions = useRequestOptions();
+
+  return useQueries({
+    queries: workspaceIds.map((workspaceId) => ({
+      queryKey: connectionsKeys.statusCounts(workspaceId),
+      queryFn: async () => ({
+        workspaceId,
+        statusCounts: await webBackendGetConnectionStatusCounts({ workspaceId }, requestOptions),
+      }),
+      staleTime: 1000 * 60, // 1 minute
+      cacheTime: 1000 * 60 * 2, // 2 minutes
+      refetchInterval: options?.refetchInterval ? 1000 * 60 : undefined, // 1 minute if enabled
+    })),
+  });
+};

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

@@ -28,9 +28,10 @@ import {
   OrganizationRead,
   OrganizationTrialStatusRead,
   OrganizationUserReadList,
-  WorkspaceReadList,
   OrganizationInfoRead,
   ListOrganizationSummariesResponse,
+  WorkspaceReadList,
+  ListWorkspacesInOrganizationRequestBody,
 } from "../types/AirbyteClient";
 import { useRequestOptions } from "../useRequestOptions";
 import { useSuspenseQuery } from "../useSuspenseQuery";
@@ -46,7 +47,8 @@ export const organizationKeys = {
   trialStatus: (organizationId: string) => [SCOPE_ORGANIZATION, "trial", organizationId] as const,
   usage: (organizationId: string, timeWindow: string) =>
     [SCOPE_ORGANIZATION, "usage", organizationId, timeWindow] as const,
-  workspaces: (organizationId: string) => [SCOPE_ORGANIZATION, "workspaces", "list", organizationId] as const,
+  workspaces: (organizationId: string, pageSize: number, nameContains?: string) =>
+    [SCOPE_ORGANIZATION, "workspaces", "list", organizationId, pageSize, nameContains] as const,
   listByUser: (requestBody: ListOrganizationsByUserRequestBody) =>
     [...organizationKeys.all, "byUser", requestBody] as const,
   summaries: (requestBody: ListOrganizationSummariesRequestBody) =>
@@ -150,11 +152,43 @@ export const useOrganizationUsage = ({ timeWindow }: { timeWindow: ConsumptionTi
   );
 };
 
-export const useListWorkspacesInOrganization = ({ organizationId }: { organizationId: string }): WorkspaceReadList => {
+export const useListWorkspacesInOrganization = ({
+  organizationId,
+  pagination,
+  nameContains,
+}: ListWorkspacesInOrganizationRequestBody): UseInfiniteQueryResult<WorkspaceReadList, unknown> => {
   const requestOptions = useRequestOptions();
-  const queryKey = organizationKeys.workspaces(organizationId);
+  const pageSize = pagination?.pageSize ?? 10;
+  const queryKey = organizationKeys.workspaces(organizationId, pageSize, nameContains?.trim());
+
+  const listWorkspacesQueryFn = async ({ pageParam = 0 }) => {
+    const rowOffset = pageParam * pageSize;
+    return listWorkspacesInOrganization(
+      {
+        organizationId,
+        pagination: pagination ? { pageSize, rowOffset } : undefined,
+        nameContains,
+      },
+      requestOptions
+    );
+  };
 
-  return useSuspenseQuery(queryKey, () => listWorkspacesInOrganization({ organizationId }, requestOptions));
+  return useInfiniteQuery({
+    queryKey,
+    queryFn: listWorkspacesQueryFn,
+    staleTime: 1000 * 60 * 5,
+    cacheTime: 1000 * 60 * 30,
+    getNextPageParam: (lastPage, allPages) => {
+      const pageSize = pagination?.pageSize ?? 10;
+      const workspaces = lastPage.workspaces ?? [];
+      return workspaces.length < pageSize ? undefined : allPages.length;
+    },
+    getPreviousPageParam: (firstPage, allPages) => {
+      const pageSize = pagination?.pageSize ?? 10;
+      const workspaces = firstPage.workspaces ?? [];
+      return workspaces.length < pageSize ? undefined : allPages.length - 1;
+    },
+  });
 };
 
 export const useListOrganizationsByUser = (requestBody: ListOrganizationsByUserRequestBody) => {

airbyte-webapp/src/locales/en.json

@@ -34,6 +34,9 @@
   "workspaces.sourceLimitReached.description": "You have {count} sources in this workspace. If you would like to add more, please change the limits for your instance.",
   "workspaces.destinationLimitReached.title": "You've reached the limit for destinations in a workspace.",
   "workspaces.destinationLimitReached.description": "You have {count} destinations in this workspace. If you would like to add more, please change the limits for your instance.",
+  "workspaces.status.runningSyncs": "Running syncs",
+  "workspaces.status.successfulSyncs": "Successful syncs",
+  "workspaces.status.failedSyncs": "Failed syncs",
 
   "teamsFeatures.modal.title": "Continue to experience Teams features",
   "teamsFeatures.modal.featuresTitle": "You're about to use one of the following Teams features:",
@@ -42,7 +45,7 @@
   "teamsFeatures.modal.features.sso": "SSO",
   "teamsFeatures.modal.features.rbac": "Role-based access control (RBAC)",
   "teamsFeatures.modal.features.mappers": "Mappers",
-  "teamsFeatures.modal.warningMessage": "Please note you will lost access to these features once your trial ends unless you upgrade to Teams. All syncs using these features will be disabled and all members invited will be deleted.",
+  "teamsFeatures.modal.warningMessage": "Please note you will lose access to these features once your trial ends unless you upgrade to Teams. All syncs using these features will be disabled and all members invited will be deleted.",
   "teamsFeatures.modal.button.continue": "Continue",
 
   "role.admin": "Admin",
@@ -2614,7 +2617,8 @@
   "embedded.onboarding.upsell.description": "Harness the power of Airbyte Embedded and add hundreds of integrations into your product instantly.",
   "embedded.onboarding.talkToSales": "Talk to sales",
 
-  "organization.members": "{count, plural, one {# member} other {# members}}",
+  "organization.members": "{subscriptionName} \u2022 {count, plural, one {# member} other {# members}}",
   "organization.unhealthyWorkspaces": "Unhealthy workspaces",
-  "organization.runningSyncs": "Running syncs"
+  "organization.runningSyncs": "Running syncs",
+  "workspaces.statusFilter.placeholder": "Filter by status"
 }

airbyte-webapp/src/pages/SettingsPage/components/RegionsTable.tsx

@@ -9,7 +9,8 @@ import { useListWorkspacesInOrganization, useGetDataplaneGroup } from "core/api"
 
 export const RegionsTable = () => {
   const organizationId = useCurrentOrganizationId();
-  const { workspaces } = useListWorkspacesInOrganization({ organizationId });
+  const { data: workspacesData } = useListWorkspacesInOrganization({ organizationId });
+  const workspaces = workspacesData?.pages[0].workspaces ?? [];
   const { getDataplaneGroup } = useGetDataplaneGroup();
   const { formatMessage } = useIntl();
 

airbyte-webapp/src/pages/workspaces/OrganizationWorkspacesPage.module.scss

@@ -19,12 +19,22 @@
   top: calc(variables.$spacing-xl * 3);
 }
 
+.loadingPage {
+  height: 100%;
+}
+
 .workspacesPage__loadingSpinner {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
 
+.footerLoading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .headerRow {
   padding-bottom: variables.$spacing-xl;
 
@@ -38,6 +48,10 @@
   margin-bottom: variables.$spacing-md;
 }
 
+.statusFilterButton {
+  width: 170px;
+}
+
 .emptyStateIconBackground {
   width: 44px;
   height: 44px;