prefetch on demand

web/src/api/busterv2/datasets/permissions/queryRequests.ts

@@ -46,7 +46,7 @@ export const useDatasetListPermissionGroups = (dataset_id: string) => {
   return useCreateReactQuery({
     queryKey: [PERMISSION_GROUP_QUERY_KEY, dataset_id],
     queryFn,
-    staleTime: 1000 * 5 // 5 seconds
+    enabled: !!dataset_id
   });
 };
 
@@ -81,7 +81,8 @@ export const useDatasetListDatasetGroups = (dataset_id: string) => {
 
   return useCreateReactQuery({
     queryKey: [LIST_DATASET_GROUPS_QUERY_KEY, dataset_id],
-    queryFn
+    queryFn,
+    enabled: !!dataset_id
   });
 };
 
@@ -90,7 +91,8 @@ export const useDatasetListPermissionUsers = (dataset_id: string) => {
 
   return useCreateReactQuery({
     queryKey: ['list_permission_users', dataset_id],
-    queryFn
+    queryFn,
+    enabled: !!dataset_id
   });
 };
 

web/src/api/createReactQuery.ts

@@ -27,6 +27,8 @@ interface CreateQueryProps<T> extends UseQueryOptions<T> {
   useErrorNotification?: boolean;
 }
 
+export const STALE_TIME = 1000 * 10;
+
 export const useCreateReactQuery = <T>({
   queryKey,
   queryFn,
@@ -50,6 +52,7 @@ export const useCreateReactQuery = <T>({
     retry: 1,
     refetchOnWindowFocus,
     refetchOnMount,
+    staleTime: STALE_TIME,
     ...rest
   });
 

web/src/app/app/datasets/[datasetId]/permissions/PermissionAppSegments.tsx

@@ -1,39 +1,64 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { AppSegmented } from '@/components';
 import { PermissionApps } from './config';
-import { useMemoizedFn } from 'ahooks';
+import { useMemoizedFn, useSet } from 'ahooks';
 import { SegmentedValue } from 'antd/es/segmented';
 import { Divider } from 'antd';
-
-const options: { label: string; value: PermissionApps }[] = [
-  {
-    label: 'Overview',
-    value: PermissionApps.OVERVIEW
-  },
-  {
-    label: 'Permission Groups',
-    value: PermissionApps.PERMISSION_GROUPS
-  },
-  {
-    label: 'Dataset Groups',
-    value: PermissionApps.DATASET_GROUPS
-  },
-  {
-    label: 'Users',
-    value: PermissionApps.USERS
-  }
-];
+import {
+  useDatasetListDatasetGroups,
+  useDatasetListPermissionGroups,
+  useDatasetListPermissionUsers
+} from '@/api/busterv2';
 
 export const PermissionAppSegments: React.FC<{
   selectedApp: PermissionApps;
   setSelectedApp: (app: PermissionApps) => void;
-}> = React.memo(({ selectedApp, setSelectedApp }) => {
+  datasetId: string;
+}> = React.memo(({ selectedApp, setSelectedApp, datasetId }) => {
+  const [prefetchedRoutes, setPrefetchedRoutes] = useSet<string>();
+
+  useDatasetListDatasetGroups(prefetchedRoutes.has(PermissionApps.DATASET_GROUPS) ? datasetId : '');
+  useDatasetListPermissionUsers(prefetchedRoutes.has(PermissionApps.USERS) ? datasetId : '');
+  useDatasetListPermissionGroups(
+    prefetchedRoutes.has(PermissionApps.PERMISSION_GROUPS) ? datasetId : ''
+  );
+
   const handleSelect = useMemoizedFn((app: SegmentedValue) => {
     setSelectedApp(app as PermissionApps);
   });
 
+  const onHoverRoute = useMemoizedFn((route: string) => {
+    setPrefetchedRoutes.add(route);
+  });
+
+  const options = React.useMemo(
+    () =>
+      [
+        {
+          label: 'Overview',
+          value: PermissionApps.OVERVIEW
+        },
+        {
+          label: 'Permission Groups',
+          value: PermissionApps.PERMISSION_GROUPS
+        },
+        {
+          label: 'Dataset Groups',
+          value: PermissionApps.DATASET_GROUPS
+        },
+        {
+          label: 'Users',
+          value: PermissionApps.USERS
+        }
+      ].map((option) => ({
+        ...option,
+        label: <PrefetchRouteSegmentItem {...option} onHover={onHoverRoute} />
+      })),
+    []
+  );
+
   return (
     <div className="flex flex-col justify-center space-x-0 space-y-2">
       <AppSegmented options={options} value={selectedApp} onChange={handleSelect} />
@@ -43,3 +68,23 @@ export const PermissionAppSegments: React.FC<{
 });
 
 PermissionAppSegments.displayName = 'PermissionAppSegments';
+
+const PrefetchRouteSegmentItem = React.memo(
+  ({
+    value,
+    label,
+    onHover
+  }: {
+    value: PermissionApps;
+    label: string;
+    onHover: (route: PermissionApps) => void;
+  }) => {
+    return (
+      <span className="" onMouseEnter={() => onHover(value)}>
+        {label}
+      </span>
+    );
+  }
+);
+
+PrefetchRouteSegmentItem.displayName = 'PrefetchRouteSegmentItem';

web/src/app/app/datasets/[datasetId]/permissions/PermissionsAppContainer.tsx

@@ -30,7 +30,11 @@ export const PermissionsAppContainer: React.FC<{ datasetId: string }> = React.me
 
     return (
       <>
-        <PermissionAppSegments selectedApp={selectedApp} setSelectedApp={setSelectedApp} />
+        <PermissionAppSegments
+          selectedApp={selectedApp}
+          setSelectedApp={setSelectedApp}
+          datasetId={datasetId}
+        />
 
         <AnimatePresence mode="wait" initial={false}>
           <motion.div {...memoizedAnimation} key={selectedApp} className="w-full">

web/src/app/app/datasets/[datasetId]/permissions/_PermissionDatasetGroups/PermissionDatasetGroups.tsx

@@ -1,4 +1,4 @@
-import { useDatasetListDatasetGroups, useListDatasetGroups } from '@/api/busterv2';
+import { useDatasetListDatasetGroups } from '@/api/busterv2';
 import React, { useState } from 'react';
 import { useDebounceSearch } from '../useDebounceSearch';
 import { useMemoizedFn } from 'ahooks';

web/src/app/app/datasets/[datasetId]/permissions/_PermissionPermissionGroup/PermissionListPermissionGroupContainer.tsx

@@ -119,11 +119,7 @@ export const PermissionListPermissionGroupContainer: React.FC<{
         showSelectAll={false}
         selectedRowKeys={selectedRowKeys}
         onSelectChange={setSelectedRowKeys}
-        emptyState={
-          <div className="py-12">
-            <Text type="tertiary">No permission groups found</Text>
-          </div>
-        }
+        emptyState={<EmptyState />}
       />
     </div>
   );
@@ -180,3 +176,13 @@ const PermissionGroupAssignedCell = React.memo(
 );
 
 PermissionGroupAssignedCell.displayName = 'PermissionGroupAssignedCell';
+
+const EmptyState = React.memo(() => {
+  return (
+    <div className="py-12">
+      <Text type="tertiary">No permission groups found</Text>
+    </div>
+  );
+});
+
+EmptyState.displayName = 'EmptyState';