diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmptyState.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmptyState.tsx index 48c7d58c5..18aef6779 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmptyState.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmptyState.tsx @@ -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}`, diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx index aa903b42a..63cced18d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx @@ -111,6 +111,7 @@ export const RecordTableWithWrappers = ({ // we cannot rely on count states because this is not available for remote objects tableRowIds.length === 0 && ( ( + + {}} + > + + + + ), + ], }; export default meta; @@ -14,6 +28,7 @@ type Story = StoryObj; 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: () => {},