add hidden prop to row listing component

This commit is contained in:
Nate Kelley 2025-01-23 10:20:01 -07:00
parent 237bf529e2
commit ac0caac99b
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
20 changed files with 369 additions and 409 deletions

View File

@ -50,7 +50,7 @@ export const useCreateReactQuery = <T>({
queryFn, queryFn,
enabled: baseEnabled && !!enabled, enabled: baseEnabled && !!enabled,
initialData, initialData,
retry: 1, retry: 0,
refetchOnWindowFocus, refetchOnWindowFocus,
refetchOnMount, refetchOnMount,
staleTime, staleTime,
@ -133,7 +133,7 @@ export const useCreateReactQueryPaginated = <T>({
queryFn, queryFn,
enabled: baseEnabled && !!enabled, enabled: baseEnabled && !!enabled,
initialData, initialData,
retry: 1, retry: 0,
refetchOnWindowFocus, refetchOnWindowFocus,
refetchOnMount, refetchOnMount,
placeholderData: keepPreviousData, placeholderData: keepPreviousData,

View File

@ -81,29 +81,28 @@ export const PermissionListDatasetGroupContainer: React.FC<{
}, [filteredDatasetGroups]); }, [filteredDatasetGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionGroups.length === 0,
hidden: canQueryPermissionGroups.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionGroups.length.toString()
secondaryTitle: canQueryPermissionGroups.length.toString() }
} },
}, ...canQueryPermissionGroups,
...canQueryPermissionGroups, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionGroups.length === 0,
hidden: cannotQueryPermissionGroups.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionGroups.length.toString()
secondaryTitle: cannotQueryPermissionGroups.length.toString() }
} },
}, ...cannotQueryPermissionGroups
...cannotQueryPermissionGroups ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionGroups, cannotQueryPermissionGroups, numberOfDatasetGroups] [canQueryPermissionGroups, cannotQueryPermissionGroups, numberOfDatasetGroups]
); );

View File

@ -1,7 +1,11 @@
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { DatasetPermissionOverviewUser } from '@/api/buster_rest/datasets'; import { DatasetPermissionOverviewUser } from '@/api/buster_rest/datasets';
import { BusterUserAvatar, Text } from '@/components'; import {
import { BusterListColumn, BusterListRowItem, InfiniteListContainer } from '@/components/list'; BusterListColumn,
BusterListRowItem,
EmptyStateList,
InfiniteListContainer
} from '@/components/list';
import { BusterInfiniteList } from '@/components/list'; import { BusterInfiniteList } from '@/components/list';
import { BusterRoutes, createBusterRoute } from '@/routes'; import { BusterRoutes, createBusterRoute } from '@/routes';
import { PermissionLineageBreadcrumb } from '../../../../../_components/PermissionComponents'; import { PermissionLineageBreadcrumb } from '../../../../../_components/PermissionComponents';
@ -73,29 +77,28 @@ export const PermissionListUserContainer: React.FC<{
}, [filteredUsers]); }, [filteredUsers]);
const rows: BusterListRowItem[] = useMemo( const rows: BusterListRowItem[] = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryUsers.length === 0,
hidden: canQueryUsers.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: numberOfUsers.toString()
secondaryTitle: numberOfUsers.toString() }
} },
}, ...canQueryUsers,
...canQueryUsers, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryUsers.length === 0,
hidden: cannotQueryUsers.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryUsers.length.toString()
secondaryTitle: cannotQueryUsers.length.toString() }
} },
}, ...cannotQueryUsers
...cannotQueryUsers ],
].filter((row) => !(row as any).hidden),
[canQueryUsers, cannotQueryUsers, numberOfUsers] [canQueryUsers, cannotQueryUsers, numberOfUsers]
); );
@ -107,7 +110,7 @@ export const PermissionListUserContainer: React.FC<{
rows={rows} rows={rows}
showHeader={false} showHeader={false}
showSelectAll={false} showSelectAll={false}
emptyState={<EmptyState />} emptyState={<EmptyStateList text="No users found" />}
/> />
</InfiniteListContainer> </InfiniteListContainer>
</> </>
@ -128,12 +131,3 @@ const UserLineageCell = React.memo(({ user }: { user: DatasetPermissionOverviewU
); );
}); });
UserLineageCell.displayName = 'UserLineageCell'; UserLineageCell.displayName = 'UserLineageCell';
const EmptyState = React.memo(() => {
return (
<div className="py-12">
<Text type="tertiary">No users found</Text>
</div>
);
});
EmptyState.displayName = 'EmptyState';

View File

@ -2,7 +2,7 @@ import {
ListPermissionGroupsResponse, ListPermissionGroupsResponse,
useDatasetUpdatePermissionGroups useDatasetUpdatePermissionGroups
} from '@/api/buster_rest/datasets'; } from '@/api/buster_rest/datasets';
import { BusterListColumn, BusterListRowItem } from '@/components/list'; import { BusterListColumn, BusterListRowItem, EmptyStateList } from '@/components/list';
import { useMemoizedFn } from 'ahooks'; import { useMemoizedFn } from 'ahooks';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { Text } from '@/components/text'; import { Text } from '@/components/text';
@ -82,29 +82,28 @@ export const PermissionListPermissionGroupContainer: React.FC<{
}, [filteredPermissionGroups]); }, [filteredPermissionGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionGroups.length === 0,
hidden: canQueryPermissionGroups.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionGroups.length.toString()
secondaryTitle: canQueryPermissionGroups.length.toString() }
} },
}, ...canQueryPermissionGroups,
...canQueryPermissionGroups, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionGroups.length === 0,
hidden: cannotQueryPermissionGroups.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionGroups.length.toString()
secondaryTitle: cannotQueryPermissionGroups.length.toString() }
} },
}, ...cannotQueryPermissionGroups
...cannotQueryPermissionGroups ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionGroups, cannotQueryPermissionGroups, numberOfPermissionGroups] [canQueryPermissionGroups, cannotQueryPermissionGroups, numberOfPermissionGroups]
); );
@ -124,7 +123,7 @@ export const PermissionListPermissionGroupContainer: React.FC<{
showSelectAll={false} showSelectAll={false}
selectedRowKeys={selectedRowKeys} selectedRowKeys={selectedRowKeys}
onSelectChange={setSelectedRowKeys} onSelectChange={setSelectedRowKeys}
emptyState={<EmptyState />} emptyState={<EmptyStateList text="No permission groups found" />}
useRowClickSelectChange={true} useRowClickSelectChange={true}
/> />
</InfiniteListContainer> </InfiniteListContainer>
@ -132,13 +131,3 @@ export const PermissionListPermissionGroupContainer: React.FC<{
}); });
PermissionListPermissionGroupContainer.displayName = 'PermissionListTeamContainer'; PermissionListPermissionGroupContainer.displayName = 'PermissionListTeamContainer';
const EmptyState = React.memo(() => {
return (
<div className="py-12">
<Text type="tertiary">No permission groups found</Text>
</div>
);
});
EmptyState.displayName = 'EmptyState';

View File

@ -3,13 +3,16 @@ import {
ListPermissionUsersResponse, ListPermissionUsersResponse,
useDatasetUpdatePermissionUsers useDatasetUpdatePermissionUsers
} from '@/api/buster_rest/datasets'; } from '@/api/buster_rest/datasets';
import { BusterUserAvatar } from '@/components'; import {
import { BusterListColumn, BusterListRowItem, InfiniteListContainer } from '@/components/list'; BusterListColumn,
BusterListRowItem,
EmptyStateList,
InfiniteListContainer
} from '@/components/list';
import { BusterInfiniteList } from '@/components/list/BusterInfiniteList'; import { BusterInfiniteList } from '@/components/list/BusterInfiniteList';
import { useMemoizedFn } from 'ahooks'; import { useMemoizedFn } from 'ahooks';
import { Select } from 'antd'; import { Select } from 'antd';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { Text } from '@/components/text';
import { PermissionUsersSelectedPopup } from './PermissionUsersSelectedPopup'; import { PermissionUsersSelectedPopup } from './PermissionUsersSelectedPopup';
import { PERMISSION_USERS_OPTIONS } from './config'; import { PERMISSION_USERS_OPTIONS } from './config';
import { BusterRoutes, createBusterRoute } from '@/routes'; import { BusterRoutes, createBusterRoute } from '@/routes';
@ -90,29 +93,28 @@ export const PermissionListUsersContainer: React.FC<{
}, [filteredPermissionUsers]); }, [filteredPermissionUsers]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionUsers.length === 0,
hidden: canQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionUsers.length.toString()
secondaryTitle: canQueryPermissionUsers.length.toString() }
} },
}, ...canQueryPermissionUsers,
...canQueryPermissionUsers, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionUsers.length === 0,
hidden: cannotQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionUsers.length.toString()
secondaryTitle: cannotQueryPermissionUsers.length.toString() }
} },
}, ...cannotQueryPermissionUsers
...cannotQueryPermissionUsers ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfPermissionUsers]
); );
@ -133,7 +135,7 @@ export const PermissionListUsersContainer: React.FC<{
selectedRowKeys={selectedRowKeys} selectedRowKeys={selectedRowKeys}
onSelectChange={setSelectedRowKeys} onSelectChange={setSelectedRowKeys}
useRowClickSelectChange={false} useRowClickSelectChange={false}
emptyState={<EmptyState />} emptyState={<EmptyStateList text="No users found" />}
/> />
</InfiniteListContainer> </InfiniteListContainer>
); );
@ -161,13 +163,3 @@ const PermissionGroupAssignedCell: React.FC<{
/> />
); );
}; };
const EmptyState = React.memo(() => {
return (
<div className="py-12">
<Text type="tertiary">No users found</Text>
</div>
);
});
EmptyState.displayName = 'EmptyState';

View File

@ -92,29 +92,28 @@ export const DatasetGroupDatasetsListContainer: React.FC<{
}, [filteredDatasets]); }, [filteredDatasets]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionUsers.length === 0,
hidden: canQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionUsers.length.toString()
secondaryTitle: canQueryPermissionUsers.length.toString() }
} },
}, ...canQueryPermissionUsers,
...canQueryPermissionUsers, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionUsers.length === 0,
hidden: cannotQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionUsers.length.toString()
secondaryTitle: cannotQueryPermissionUsers.length.toString() }
} },
}, ...cannotQueryPermissionUsers
...cannotQueryPermissionUsers ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

View File

@ -88,29 +88,28 @@ export const DatasetGroupDatasetGroupsListContainer: React.FC<{
}, [filteredDatasetGroups]); }, [filteredDatasetGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionDatasetGroups.length === 0,
hidden: canQueryPermissionDatasetGroups.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionDatasetGroups.length.toString()
secondaryTitle: canQueryPermissionDatasetGroups.length.toString() }
} },
}, ...canQueryPermissionDatasetGroups,
...canQueryPermissionDatasetGroups, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionDatasetGroups.length === 0,
hidden: cannotQueryPermissionDatasetGroups.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionDatasetGroups.length.toString()
secondaryTitle: cannotQueryPermissionDatasetGroups.length.toString() }
} },
}, ...cannotQueryPermissionDatasetGroups
...cannotQueryPermissionDatasetGroups ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionDatasetGroups, cannotQueryPermissionDatasetGroups] [canQueryPermissionDatasetGroups, cannotQueryPermissionDatasetGroups]
); );

View File

@ -92,29 +92,28 @@ export const DatasetGroupUsersListContainer: React.FC<{
}, [filteredUsers]); }, [filteredUsers]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionUsers.length === 0,
hidden: canQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionUsers.length.toString()
secondaryTitle: canQueryPermissionUsers.length.toString() }
} },
}, ...canQueryPermissionUsers,
...canQueryPermissionUsers, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionUsers.length === 0,
hidden: cannotQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionUsers.length.toString()
secondaryTitle: cannotQueryPermissionUsers.length.toString() }
} },
}, ...cannotQueryPermissionUsers
...cannotQueryPermissionUsers ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

View File

@ -87,29 +87,28 @@ export const PermissionGroupDatasetGroupsListContainer: React.FC<{
}, [filteredDatasetGroups]); }, [filteredDatasetGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionDatasetGroups.length === 0,
hidden: canQueryPermissionDatasetGroups.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionDatasetGroups.length.toString()
secondaryTitle: canQueryPermissionDatasetGroups.length.toString() }
} },
}, ...canQueryPermissionDatasetGroups,
...canQueryPermissionDatasetGroups, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionDatasetGroups.length === 0,
hidden: cannotQueryPermissionDatasetGroups.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionDatasetGroups.length.toString()
secondaryTitle: cannotQueryPermissionDatasetGroups.length.toString() }
} },
}, ...cannotQueryPermissionDatasetGroups
...cannotQueryPermissionDatasetGroups ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionDatasetGroups, cannotQueryPermissionDatasetGroups] [canQueryPermissionDatasetGroups, cannotQueryPermissionDatasetGroups]
); );

View File

@ -92,29 +92,28 @@ export const PermissionGroupDatasetsListContainer: React.FC<{
}, [filteredDatasets]); }, [filteredDatasets]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionUsers.length === 0,
hidden: canQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionUsers.length.toString()
secondaryTitle: canQueryPermissionUsers.length.toString() }
} },
}, ...canQueryPermissionUsers,
...canQueryPermissionUsers, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionUsers.length === 0,
hidden: cannotQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionUsers.length.toString()
secondaryTitle: cannotQueryPermissionUsers.length.toString() }
} },
}, ...cannotQueryPermissionUsers
...cannotQueryPermissionUsers ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

View File

@ -88,29 +88,28 @@ export const PermissionGroupUsersListContainer: React.FC<{
}, [filteredUsers]); }, [filteredUsers]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionUsers.length === 0,
hidden: canQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionUsers.length.toString()
secondaryTitle: canQueryPermissionUsers.length.toString() }
} },
}, ...canQueryPermissionUsers,
...canQueryPermissionUsers, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionUsers.length === 0,
hidden: cannotQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionUsers.length.toString()
secondaryTitle: cannotQueryPermissionUsers.length.toString() }
} },
}, ...cannotQueryPermissionUsers
...cannotQueryPermissionUsers ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

View File

@ -68,29 +68,28 @@ export const ListUsersComponent: React.FC<{
}, [users]); }, [users]);
const rows: BusterListRowItem[] = useMemo( const rows: BusterListRowItem[] = useMemo(
() => () => [
[ {
{ id: 'header-active',
id: 'header-active', data: {},
data: {}, hidden: users.length === 0,
hidden: users.length === 0, rowSection: {
rowSection: { title: 'Active',
title: 'Active', secondaryTitle: activeUsers.length.toString()
secondaryTitle: activeUsers.length.toString() }
} },
}, ...activeUsers,
...activeUsers, {
{ id: 'header-inactive',
id: 'header-inactive', data: {},
data: {}, hidden: inactiveUsers.length === 0,
hidden: inactiveUsers.length === 0, rowSection: {
rowSection: { title: 'Inactive',
title: 'Inactive', secondaryTitle: inactiveUsers.length.toString()
secondaryTitle: inactiveUsers.length.toString() }
} },
}, ...inactiveUsers
...inactiveUsers ],
].filter((row) => !(row as any).hidden),
[activeUsers, inactiveUsers] [activeUsers, inactiveUsers]
); );

View File

@ -3,10 +3,10 @@ import {
BusterInfiniteList, BusterInfiniteList,
BusterListColumn, BusterListColumn,
BusterListRowItem, BusterListRowItem,
EmptyStateList,
InfiniteListContainer InfiniteListContainer
} from '@/components/list'; } from '@/components/list';
import { OrganizationUserDataset } from '@/api/buster_rest'; import { OrganizationUserDataset } from '@/api/buster_rest';
import { Text } from '@/components/text';
import { PermissionLineageBreadcrumb } from '@appComponents/PermissionComponents'; import { PermissionLineageBreadcrumb } from '@appComponents/PermissionComponents';
export const UserDatasetListContainer = React.memo( export const UserDatasetListContainer = React.memo(
@ -91,7 +91,7 @@ export const UserDatasetListContainer = React.memo(
} }
}, },
...disabled ...disabled
].filter((row) => !(row as any).hidden); ].filter((row) => !row.hidden);
}, [canQuery, cannotQuery, disabled]); }, [canQuery, cannotQuery, disabled]);
return ( return (
@ -101,7 +101,7 @@ export const UserDatasetListContainer = React.memo(
rows={rows} rows={rows}
showHeader={false} showHeader={false}
showSelectAll={false} showSelectAll={false}
emptyState={<EmptyState />} emptyState={<EmptyStateList text="No datasets found" />}
/> />
</InfiniteListContainer> </InfiniteListContainer>
); );
@ -118,12 +118,3 @@ const DatasetLineageCell = React.memo(({ dataset }: { dataset: OrganizationUserD
); );
}); });
DatasetLineageCell.displayName = 'DatasetLineageCell'; DatasetLineageCell.displayName = 'DatasetLineageCell';
const EmptyState = React.memo(() => {
return (
<div className="py-12">
<Text type="tertiary">No datasets found</Text>
</div>
);
});
EmptyState.displayName = 'EmptyState';

View File

@ -90,29 +90,28 @@ export const UserDatasetGroupListContainer: React.FC<{
}, [filteredDatasetGroups]); }, [filteredDatasetGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionUsers.length === 0,
hidden: canQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionUsers.length.toString()
secondaryTitle: canQueryPermissionUsers.length.toString() }
} },
}, ...canQueryPermissionUsers,
...canQueryPermissionUsers, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionUsers.length === 0,
hidden: cannotQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionUsers.length.toString()
secondaryTitle: cannotQueryPermissionUsers.length.toString() }
} },
}, ...cannotQueryPermissionUsers
...cannotQueryPermissionUsers ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfDatasetGroups] [canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfDatasetGroups]
); );

View File

@ -90,29 +90,28 @@ export const UserDatasetsListContainer: React.FC<{
}, [filteredDatasets]); }, [filteredDatasets]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionUsers.length === 0,
hidden: canQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionUsers.length.toString()
secondaryTitle: canQueryPermissionUsers.length.toString() }
} },
}, ...canQueryPermissionUsers,
...canQueryPermissionUsers, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionUsers.length === 0,
hidden: cannotQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionUsers.length.toString()
secondaryTitle: cannotQueryPermissionUsers.length.toString() }
} },
}, ...cannotQueryPermissionUsers
...cannotQueryPermissionUsers ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

View File

@ -95,29 +95,28 @@ export const UserPermissionGroupsListContainer: React.FC<{
}, [filteredPermissionGroups]); }, [filteredPermissionGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-assigned',
id: 'header-assigned', data: {},
data: {}, hidden: canQueryPermissionUsers.length === 0,
hidden: canQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Assigned',
title: 'Assigned', secondaryTitle: canQueryPermissionUsers.length.toString()
secondaryTitle: canQueryPermissionUsers.length.toString() }
} },
}, ...canQueryPermissionUsers,
...canQueryPermissionUsers, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: cannotQueryPermissionUsers.length === 0,
hidden: cannotQueryPermissionUsers.length === 0, rowSection: {
rowSection: { title: 'Not Assigned',
title: 'Not Assigned', secondaryTitle: cannotQueryPermissionUsers.length.toString()
secondaryTitle: cannotQueryPermissionUsers.length.toString() }
} },
}, ...cannotQueryPermissionUsers
...cannotQueryPermissionUsers ],
].filter((row) => !(row as any).hidden),
[canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfPermissionGroups] [canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfPermissionGroups]
); );

View File

@ -95,39 +95,38 @@ export const UserTeamsListContainer: React.FC<{
}, [filteredTeams]); }, [filteredTeams]);
const rows = useMemo( const rows = useMemo(
() => () => [
[ {
{ id: 'header-manager',
id: 'header-manager', data: {},
data: {}, hidden: managerTeams.length === 0,
hidden: managerTeams.length === 0, rowSection: {
rowSection: { title: 'Manager',
title: 'Manager', secondaryTitle: managerTeams.length.toString()
secondaryTitle: managerTeams.length.toString() }
} },
}, ...managerTeams,
...managerTeams, {
{ id: 'header-member',
id: 'header-member', data: {},
data: {}, hidden: memberTeams.length === 0,
hidden: memberTeams.length === 0, rowSection: {
rowSection: { title: 'Member',
title: 'Member', secondaryTitle: memberTeams.length.toString()
secondaryTitle: memberTeams.length.toString() }
} },
}, ...memberTeams,
...memberTeams, {
{ id: 'header-not-assigned',
id: 'header-not-assigned', data: {},
data: {}, hidden: notAMemberTeams.length === 0,
hidden: notAMemberTeams.length === 0, rowSection: {
rowSection: { title: 'Not a member',
title: 'Not a member', secondaryTitle: notAMemberTeams.length.toString()
secondaryTitle: notAMemberTeams.length.toString() }
} },
}, ...notAMemberTeams
...notAMemberTeams ],
].filter((row) => !(row as any).hidden),
[managerTeams, memberTeams, notAMemberTeams] [managerTeams, memberTeams, notAMemberTeams]
); );

View File

@ -5,6 +5,7 @@ import { getAllIdsInSection } from '../BusterList/helpers';
import { useEffect, useMemo } from 'react'; import { useEffect, useMemo } from 'react';
import { BusterListHeader } from '../BusterList/BusterListHeader'; import { BusterListHeader } from '../BusterList/BusterListHeader';
import { BusterListRowComponentSelector } from '../BusterList/BusterListRowComponentSelector'; import { BusterListRowComponentSelector } from '../BusterList/BusterListRowComponentSelector';
import { EmptyStateList } from '../EmptyStateList';
export interface BusterInfiniteListProps extends BusterListProps { export interface BusterInfiniteListProps extends BusterListProps {
onScrollEnd?: () => void; onScrollEnd?: () => void;
@ -152,7 +153,9 @@ export const BusterInfiniteList: React.FC<BusterInfiniteListProps> = ({
))} ))}
{showEmptyState && ( {showEmptyState && (
<div className="flex h-full items-center justify-center">{emptyState}</div> <div className="flex h-full items-center justify-center">
{typeof emptyState === 'string' ? <EmptyStateList text={emptyState} /> : emptyState}
</div>
)} )}
{loadingNewContent && ( {loadingNewContent && (

View File

@ -38,6 +38,8 @@ export const BusterListRowComponentSelector = React.forwardRef<
}, },
ref ref
) => { ) => {
if (row.hidden) return null;
if (row.rowSection) { if (row.rowSection) {
return ( return (
<BusterListSectionComponent <BusterListSectionComponent

View File

@ -11,7 +11,7 @@ export interface BusterListProps {
columnRowVariant?: 'default' | 'containerized'; columnRowVariant?: 'default' | 'containerized';
rows: BusterListRow[]; rows: BusterListRow[];
onSelectChange?: (selectedRowKeys: string[]) => void; onSelectChange?: (selectedRowKeys: string[]) => void;
emptyState?: undefined | React.ReactNode; emptyState?: undefined | React.ReactNode | string;
showHeader?: boolean; showHeader?: boolean;
selectedRowKeys?: string[]; selectedRowKeys?: string[];
contextMenu?: BusterListContextMenu; contextMenu?: BusterListContextMenu;
@ -39,6 +39,7 @@ export interface BusterListRowItem {
link?: string; link?: string;
onSelect?: () => void; onSelect?: () => void;
rowSection?: BusterListSectionRow; rowSection?: BusterListSectionRow;
hidden?: boolean;
} }
export interface BusterListSectionRow { export interface BusterListSectionRow {