change a few empty state problems

web/src/app/app/(primary_layout)/datasets/[datasetId]/permissions/dataset-groups/_PermissionDatasetGroups/PermissionListDatasetGroupContainer.tsx

@@ -109,9 +109,7 @@ export const PermissionListDatasetGroupContainer: React.FC<{
     [canQueryPermissionGroups, cannotQueryPermissionGroups, numberOfDatasetGroups]
   );
 
-  const memoizedEmptyState = useMemo(() => {
+  const emptyStateComponent = useMemo(() => <EmptyStateList text="No dataset groups found" />, []);
-    return <EmptyStateList text="No dataset groups found" />;
-  }, []);
 
   return (
     <InfiniteListContainer
@@ -130,7 +128,7 @@ export const PermissionListDatasetGroupContainer: React.FC<{
         useRowClickSelectChange={true}
         selectedRowKeys={selectedRowKeys}
         onSelectChange={setSelectedRowKeys}
-        emptyState={memoizedEmptyState}
+        emptyState={emptyStateComponent}
       />
     </InfiniteListContainer>
   );

web/src/app/app/(primary_layout)/datasets/[datasetId]/permissions/permission-groups/_PermissionPermissionGroup/PermissionListPermissionGroupContainer.tsx

@@ -106,6 +106,11 @@ export const PermissionListPermissionGroupContainer: React.FC<{
     [canQueryPermissionGroups, cannotQueryPermissionGroups, numberOfPermissionGroups]
   );
 
+  const emptyStateComponent = useMemo(
+    () => <EmptyStateList text="No permission groups found" />,
+    []
+  );
+
   return (
     <InfiniteListContainer
       popupNode={
@@ -122,7 +127,7 @@ export const PermissionListPermissionGroupContainer: React.FC<{
         showSelectAll={false}
         selectedRowKeys={selectedRowKeys}
         onSelectChange={setSelectedRowKeys}
-        emptyState={<EmptyStateList text="No permission groups found" />}
+        emptyState={emptyStateComponent}
         useRowClickSelectChange={true}
       />
     </InfiniteListContainer>

web/src/app/app/(settings_layout)/settings/(permissions)/dataset-groups/ListDatasetGroupsComponent.tsx

@@ -6,8 +6,8 @@ import {
 } from '@/components/ui/list';
 import { BusterInfiniteList } from '@/components/ui/list/BusterInfiniteList';
 import React, { useMemo } from 'react';
-import { BusterRoutes, createBusterRoute } from '@/routes';
 import type { DatasetGroup } from '@/api/asset_interfaces';
+import { BusterRoutes, createBusterRoute } from '@/routes/busterRoutes';
 
 export const ListDatasetGroupsComponent: React.FC<{
   datasetGroups: DatasetGroup[];
@@ -24,20 +24,18 @@ export const ListDatasetGroupsComponent: React.FC<{
   );
 
   const datasetGroupsRows: BusterListRowItem[] = useMemo(() => {
-    return datasetGroups.reduce<BusterListRowItem[]>((acc, datasetGroup) => {
+    return datasetGroups.map((datasetGroup) => ({
-      const rowItem: BusterListRowItem = {
+      id: datasetGroup.id,
-        id: datasetGroup.id,
+      data: datasetGroup,
-        data: datasetGroup,
+      link: createBusterRoute({
-        link: createBusterRoute({
+        route: BusterRoutes.SETTINGS_DATASET_GROUPS_ID_DATASETS,
-          route: BusterRoutes.SETTINGS_DATASET_GROUPS_ID_DATASETS,
+        datasetGroupId: datasetGroup.id
-          datasetGroupId: datasetGroup.id
+      })
-        })
+    }));
-      };
-      acc.push(rowItem);
-      return acc;
-    }, []);
   }, [datasetGroups]);
 
+  const emptyStateComponent = useMemo(() => <EmptyStateList text="No dataset groups found" />, []);
+
   return (
     <InfiniteListContainer
       showContainerBorder={false}
@@ -54,7 +52,7 @@ export const ListDatasetGroupsComponent: React.FC<{
         showHeader={true}
         showSelectAll={false}
         rowClassName="pl-[30px]!"
-        emptyState={<EmptyStateList text="No dataset groups found" />}
+        emptyState={emptyStateComponent}
       />
     </InfiniteListContainer>
   );

web/src/app/app/(settings_layout)/settings/(permissions)/users/ListUsersComponent.tsx

@@ -94,6 +94,11 @@ export const ListUsersComponent: React.FC<{
     [activeUsers, inactiveUsers]
   );
 
+  const emptyStateComponent = useMemo(
+    () => <EmptyStateList text="No users found" variant="card" show={isFetched} />,
+    [isFetched]
+  );
+
   return (
     <InfiniteListContainer showContainerBorder={false}>
       <BusterInfiniteList
@@ -104,7 +109,7 @@ export const ListUsersComponent: React.FC<{
         rowClassName="pl-[30px]!"
         // onSelectChange={setSelectedRowKeys}
         // selectedRowKeys={selectedRowKeys}
-        emptyState={<EmptyStateList text="No users found" variant="card" show={isFetched} />}
+        emptyState={emptyStateComponent}
       />
     </InfiniteListContainer>
   );

web/src/app/app/(settings_layout)/settings/(permissions)/users/[userId]/_overview/UserDatasetListContainer.tsx

@@ -101,7 +101,12 @@ export const UserDatasetListContainer = React.memo(
           rows={rows}
           showHeader={false}
           showSelectAll={false}
-          emptyState={<EmptyStateList text="No datasets found" />}
+          emptyState={useMemo(
+            () => (
+              <EmptyStateList text="No datasets found" />
+            ),
+            []
+          )}
         />
       </InfiniteListContainer>
     );

web/src/app/app/(settings_layout)/settings/(permissions)/users/[userId]/dataset-groups/UserDatasetGroupListContainer.tsx

@@ -118,6 +118,8 @@ export const UserDatasetGroupListContainer: React.FC<{
     [canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfDatasetGroups]
   );
 
+  const emptyStateComponent = useMemo(() => <EmptyStateList text="No dataset groups found" />, []);
+
   return (
     <InfiniteListContainer
       popupNode={
@@ -135,7 +137,7 @@ export const UserDatasetGroupListContainer: React.FC<{
         useRowClickSelectChange={false}
         selectedRowKeys={selectedRowKeys}
         onSelectChange={setSelectedRowKeys}
-        emptyState={<EmptyStateList text="No dataset groups found" />}
+        emptyState={emptyStateComponent}
       />
     </InfiniteListContainer>
   );

web/src/app/app/(settings_layout)/settings/(permissions)/users/[userId]/teams/UserTeamsListContainer.tsx

@@ -128,6 +128,8 @@ export const UserTeamsListContainer: React.FC<{
     [managerTeams, memberTeams, notAMemberTeams]
   );
 
+  const emptyStateComponent = useMemo(() => <EmptyStateList text="No teams found" />, []);
+
   return (
     <InfiniteListContainer
       popupNode={
@@ -145,7 +147,7 @@ export const UserTeamsListContainer: React.FC<{
         useRowClickSelectChange={false}
         selectedRowKeys={selectedRowKeys}
         onSelectChange={setSelectedRowKeys}
-        emptyState={<EmptyStateList text="No datasets found" />}
+        emptyState={emptyStateComponent}
       />
     </InfiniteListContainer>
   );

web/src/controllers/DatasetPermissionUser/PermissionListUsersContainer.tsx

@@ -135,7 +135,12 @@ export const PermissionListUsersContainer: React.FC<{
         selectedRowKeys={selectedRowKeys}
         onSelectChange={setSelectedRowKeys}
         useRowClickSelectChange={false}
-        emptyState={<EmptyStateList text="No users found" />}
+        emptyState={useMemo(
+          () => (
+            <EmptyStateList text="No users found" />
+          ),
+          []
+        )}
       />
     </InfiniteListContainer>
   );