Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

fix: empty paginated table state (#5685)

Browse Source 
Table placeholder should be visible if search query returns no data.
This commit is contained in:
Tymoteusz Czech 2023-12-20 15:11:21 +01:00 committed by GitHub
parent 8e7e389d1d
commit 6d0e32810c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
View File

@ -46,7 +46,7 @@ import { FeatureNameCell } from 'component/common/Table/cells/FeatureNameCell/Fe
import { FeatureToggleCell } from './FeatureToggleCell/FeatureToggleCell';
import { ProjectOverviewFilters } from './ProjectOverviewFilters';
import { useDefaultColumnVisibility } from './hooks/useDefaultColumnVisibility';
import { Placeholder } from './TablePlaceholder/TablePlaceholder';
import { TableEmptyState } from './TableEmptyState/TableEmptyState';
import { useRowActions } from './hooks/useRowActions';
import { useUiFlag } from 'hooks/useUiFlag';
import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
@ -457,7 +457,12 @@ export const PaginatedProjectFeatureToggles = ({
totalItems={total}
/>
</SearchHighlightProvider>
<Placeholder total={total} query={tableState.query || ''} />
<ConditionallyRender
condition={!data.length && !isPlaceholder}
show={
<TableEmptyState query={tableState.query || ''} />
}
/>
{rowActionsDialogs}
<ConditionallyRender

12
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/TablePlaceholder/TablePlaceholder.tsx → frontend/src/component/project/Project/PaginatedProjectFeatureToggles/TableEmptyState/TableEmptyState.tsx
View File

@ -3,15 +3,10 @@ import { Box } from '@mui/material';
import { TablePlaceholder } from 'component/common/Table';
interface ITablePlaceholderProps {
total?: number;
query?: string;
}
export const Placeholder: FC<ITablePlaceholderProps> = ({ total, query }) => {
if (total !== 0) {
return null;
}
export const TableEmptyState: FC<ITablePlaceholderProps> = ({ query }) => {
if ((query || '')?.length > 0) {
return (
<Box
@ -34,10 +29,7 @@ export const Placeholder: FC<ITablePlaceholderProps> = ({ total, query }) => {
padding: theme.spacing(3),
})}
>
<TablePlaceholder>
No feature toggles available. Get started by adding a new
feature toggle.
</TablePlaceholder>
<TablePlaceholder>No feature toggles available.</TablePlaceholder>
</Box>
);
};