#5761 Add "No XXX found" title to filtered empty state (#5838)

Issue: #5761

Changes: 
- Use `useFindManyRecords` in `RecordTableWithWrappers.tsx` to determine
if any records exist for that object
- Add `hasUnfilteredRecords` prop to `RecordTableEmptyState.tsx`. 


This changes to empty state title, but I'm guessing that we'll need to
change the button text and subheading as well you guys can let me know
what you think. If this works I can go on to do those next, thanks!

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
This commit is contained in:
Jovan
2024-06-13 05:30:13 -04:00
committed by GitHub
parent 7c1d9aebb9
commit d93c2d6408
3 changed files with 29 additions and 3 deletions

View File

@ -1,6 +1,7 @@
import { useNavigate } from 'react-router-dom';
import { IconPlus, IconSettings } from 'twenty-ui';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
@ -11,17 +12,21 @@ import {
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
type RecordTableEmptyStateProps = {
objectNameSingular: string;
objectLabel: string;
createRecord: () => void;
isRemote: boolean;
};
export const RecordTableEmptyState = ({
objectNameSingular,
objectLabel,
createRecord,
isRemote,
}: RecordTableEmptyStateProps) => {
const navigate = useNavigate();
const { totalCount } = useFindManyRecords({ objectNameSingular, limit: 1 });
const noExistingRecords = totalCount === 0;
const [title, subTitle, Icon, onClick, buttonTitle] = isRemote
? [
@ -32,8 +37,12 @@ export const RecordTableEmptyState = ({
'Go to Settings',
]
: [
`Add your first ${objectLabel}`,
`Use our API or add your first ${objectLabel} manually`,
noExistingRecords
? `Add your first ${objectLabel}`
: `No ${objectLabel} found`,
noExistingRecords
? `Use our API or add your first ${objectLabel} manually`
: 'No records matching the filter criteria were found.',
IconPlus,
createRecord,
`Add a ${objectLabel}`,

View File

@ -111,6 +111,7 @@ export const RecordTableWithWrappers = ({
// we cannot rely on count states because this is not available for remote objects
tableRowIds.length === 0 && (
<RecordTableEmptyState
objectNameSingular={objectNameSingular}
objectLabel={objectLabel}
createRecord={createRecord}
isRemote={isRemote}

View File

@ -1,12 +1,26 @@
import { Meta, StoryObj } from '@storybook/react';
import { RecordTableEmptyState } from '@/object-record/record-table/components/RecordTableEmptyState';
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
const meta: Meta = {
title: 'Modules/ObjectRecord/RecordTable/RecordTableEmptyState',
component: RecordTableEmptyState,
decorators: [MemoryRouterDecorator],
decorators: [
MemoryRouterDecorator,
(Story) => (
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<RecordTableScope
recordTableScopeId="persons"
onColumnsChange={() => {}}
>
<Story />
</RecordTableScope>
</SnackBarProviderScope>
),
],
};
export default meta;
@ -14,6 +28,7 @@ type Story = StoryObj<typeof RecordTableEmptyState>;
export const Default: Story = {
args: {
objectNameSingular: 'person',
objectLabel: 'person',
isRemote: false,
createRecord: () => {},
@ -22,6 +37,7 @@ export const Default: Story = {
export const Remote: Story = {
args: {
objectNameSingular: 'person',
objectLabel: 'remote person',
isRemote: true,
createRecord: () => {},