From d93c2d64088e59928994e68ffc6177d288b2f063 Mon Sep 17 00:00:00 2001
From: Jovan <71730487+jovanmedford@users.noreply.github.com>
Date: Thu, 13 Jun 2024 05:30:13 -0400
Subject: [PATCH] #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>
---
 .../components/RecordTableEmptyState.tsx       | 13 +++++++++++--
 .../components/RecordTableWithWrappers.tsx     |  1 +
 .../RecordTableEmptyState.stories.tsx          | 18 +++++++++++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

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 && (
                   <RecordTableEmptyState
+                    objectNameSingular={objectNameSingular}
                     objectLabel={objectLabel}
                     createRecord={createRecord}
                     isRemote={isRemote}
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/RecordTableEmptyState.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/RecordTableEmptyState.stories.tsx
index d7f6c243f..0cf38abda 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/RecordTableEmptyState.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/RecordTableEmptyState.stories.tsx
@@ -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: () => {},