Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/api/createReactQuery.ts
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,

5
web/src/app/app/datasets/[datasetId]/permissions/dataset-groups/_PermissionDatasetGroups/PermissionListDatasetGroupContainer.tsx
View File

@ -81,8 +81,7 @@ export const PermissionListDatasetGroupContainer: React.FC<{
}, [filteredDatasetGroups]); }, [filteredDatasetGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -103,7 +102,7 @@ export const PermissionListDatasetGroupContainer: React.FC<{
} }
}, },
...cannotQueryPermissionGroups ...cannotQueryPermissionGroups
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionGroups, cannotQueryPermissionGroups, numberOfDatasetGroups] [canQueryPermissionGroups, cannotQueryPermissionGroups, numberOfDatasetGroups]
); );

24
web/src/app/app/datasets/[datasetId]/permissions/overview/_PermissionOverview/PermissionListUserContainer.tsx
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,8 +77,7 @@ export const PermissionListUserContainer: React.FC<{
}, [filteredUsers]); }, [filteredUsers]);
const rows: BusterListRowItem[] = useMemo( const rows: BusterListRowItem[] = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -95,7 +98,7 @@ export const PermissionListUserContainer: React.FC<{
} }
}, },
...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';

19
web/src/app/app/datasets/[datasetId]/permissions/permission-groups/_PermissionPermissionGroup/PermissionListPermissionGroupContainer.tsx
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,8 +82,7 @@ export const PermissionListPermissionGroupContainer: React.FC<{
}, [filteredPermissionGroups]); }, [filteredPermissionGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -104,7 +103,7 @@ export const PermissionListPermissionGroupContainer: React.FC<{
} }
}, },
...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';

26
web/src/app/app/datasets/[datasetId]/permissions/users/_PermissionUsers/PermissionListUsersContainer.tsx
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,8 +93,7 @@ export const PermissionListUsersContainer: React.FC<{
}, [filteredPermissionUsers]); }, [filteredPermissionUsers]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -112,7 +114,7 @@ export const PermissionListUsersContainer: React.FC<{
} }
}, },
...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';

5
web/src/app/app/settings/dataset-groups/[datasetGroupId]/datasets/DatasetGroupDatasetsListContainer.tsx
View File

@ -92,8 +92,7 @@ export const DatasetGroupDatasetsListContainer: React.FC<{
}, [filteredDatasets]); }, [filteredDatasets]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -114,7 +113,7 @@ export const DatasetGroupDatasetsListContainer: React.FC<{
} }
}, },
...cannotQueryPermissionUsers ...cannotQueryPermissionUsers
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

5
web/src/app/app/settings/dataset-groups/[datasetGroupId]/permission-groups/DatasetGroupDatasetsListContainer.tsx
View File

@ -88,8 +88,7 @@ export const DatasetGroupDatasetGroupsListContainer: React.FC<{
}, [filteredDatasetGroups]); }, [filteredDatasetGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -110,7 +109,7 @@ export const DatasetGroupDatasetGroupsListContainer: React.FC<{
} }
}, },
...cannotQueryPermissionDatasetGroups ...cannotQueryPermissionDatasetGroups
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionDatasetGroups, cannotQueryPermissionDatasetGroups] [canQueryPermissionDatasetGroups, cannotQueryPermissionDatasetGroups]
); );

5
web/src/app/app/settings/dataset-groups/[datasetGroupId]/users/DatasetGroupUsersListContainer.tsx
View File

@ -92,8 +92,7 @@ export const DatasetGroupUsersListContainer: React.FC<{
}, [filteredUsers]); }, [filteredUsers]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -114,7 +113,7 @@ export const DatasetGroupUsersListContainer: React.FC<{
} }
}, },
...cannotQueryPermissionUsers ...cannotQueryPermissionUsers
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

5
web/src/app/app/settings/permission-groups/[permissionGroupId]/dataset-groups/PermissionGroupDatasetsListContainer.tsx
View File

@ -87,8 +87,7 @@ export const PermissionGroupDatasetGroupsListContainer: React.FC<{
}, [filteredDatasetGroups]); }, [filteredDatasetGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -109,7 +108,7 @@ export const PermissionGroupDatasetGroupsListContainer: React.FC<{
} }
}, },
...cannotQueryPermissionDatasetGroups ...cannotQueryPermissionDatasetGroups
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionDatasetGroups, cannotQueryPermissionDatasetGroups] [canQueryPermissionDatasetGroups, cannotQueryPermissionDatasetGroups]
); );

5
web/src/app/app/settings/permission-groups/[permissionGroupId]/datasets/PermissionGroupDatasetsListContainer.tsx
View File

@ -92,8 +92,7 @@ export const PermissionGroupDatasetsListContainer: React.FC<{
}, [filteredDatasets]); }, [filteredDatasets]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -114,7 +113,7 @@ export const PermissionGroupDatasetsListContainer: React.FC<{
} }
}, },
...cannotQueryPermissionUsers ...cannotQueryPermissionUsers
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

5
web/src/app/app/settings/permission-groups/[permissionGroupId]/users/PermissionGroupUsersListContainer.tsx
View File

@ -88,8 +88,7 @@ export const PermissionGroupUsersListContainer: React.FC<{
}, [filteredUsers]); }, [filteredUsers]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -110,7 +109,7 @@ export const PermissionGroupUsersListContainer: React.FC<{
} }
}, },
...cannotQueryPermissionUsers ...cannotQueryPermissionUsers
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

5
web/src/app/app/settings/users/ListUsersComponent.tsx
View File

@ -68,8 +68,7 @@ export const ListUsersComponent: React.FC<{
}, [users]); }, [users]);
const rows: BusterListRowItem[] = useMemo( const rows: BusterListRowItem[] = useMemo(
() => () => [
[
{ {
id: 'header-active', id: 'header-active',
data: {}, data: {},
@ -90,7 +89,7 @@ export const ListUsersComponent: React.FC<{
} }
}, },
...inactiveUsers ...inactiveUsers
].filter((row) => !(row as any).hidden), ],
[activeUsers, inactiveUsers] [activeUsers, inactiveUsers]
); );

15
web/src/app/app/settings/users/[userId]/_overview/UserDatasetListContainer.tsx
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';

5
web/src/app/app/settings/users/[userId]/dataset-groups/UserDatasetGroupListContainer.tsx
View File

@ -90,8 +90,7 @@ export const UserDatasetGroupListContainer: React.FC<{
}, [filteredDatasetGroups]); }, [filteredDatasetGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -112,7 +111,7 @@ export const UserDatasetGroupListContainer: React.FC<{
} }
}, },
...cannotQueryPermissionUsers ...cannotQueryPermissionUsers
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfDatasetGroups] [canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfDatasetGroups]
); );

5
web/src/app/app/settings/users/[userId]/datasets/UserDatasetsListContainer.tsx
View File

@ -90,8 +90,7 @@ export const UserDatasetsListContainer: React.FC<{
}, [filteredDatasets]); }, [filteredDatasets]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -112,7 +111,7 @@ export const UserDatasetsListContainer: React.FC<{
} }
}, },
...cannotQueryPermissionUsers ...cannotQueryPermissionUsers
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionUsers, cannotQueryPermissionUsers] [canQueryPermissionUsers, cannotQueryPermissionUsers]
); );

5
web/src/app/app/settings/users/[userId]/permission-groups/UserPermissionGroupsListContainer.tsx
View File

@ -95,8 +95,7 @@ export const UserPermissionGroupsListContainer: React.FC<{
}, [filteredPermissionGroups]); }, [filteredPermissionGroups]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-assigned', id: 'header-assigned',
data: {}, data: {},
@ -117,7 +116,7 @@ export const UserPermissionGroupsListContainer: React.FC<{
} }
}, },
...cannotQueryPermissionUsers ...cannotQueryPermissionUsers
].filter((row) => !(row as any).hidden), ],
[canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfPermissionGroups] [canQueryPermissionUsers, cannotQueryPermissionUsers, numberOfPermissionGroups]
); );

5
web/src/app/app/settings/users/[userId]/teams/UserTeamsListContainer.tsx
View File

@ -95,8 +95,7 @@ export const UserTeamsListContainer: React.FC<{
}, [filteredTeams]); }, [filteredTeams]);
const rows = useMemo( const rows = useMemo(
() => () => [
[
{ {
id: 'header-manager', id: 'header-manager',
data: {}, data: {},
@ -127,7 +126,7 @@ export const UserTeamsListContainer: React.FC<{
} }
}, },
...notAMemberTeams ...notAMemberTeams
].filter((row) => !(row as any).hidden), ],
[managerTeams, memberTeams, notAMemberTeams] [managerTeams, memberTeams, notAMemberTeams]
); );

5
web/src/components/list/BusterInfiniteList/BusterInfiniteList.tsx
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 && (

2
web/src/components/list/BusterList/BusterListRowComponentSelector.tsx
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

3
web/src/components/list/BusterList/interfaces.ts
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 {