From 9464b1d4089a06e339b860d5712dc67450cdd77b Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Thu, 30 May 2024 11:44:34 +0200
Subject: [PATCH 1/4] Add empty state for records

---
 .../components/RecordTableEmptyState.tsx      | 59 +++++++++++++++++++
 .../components/RecordTableWithWrappers.tsx    | 38 +++---------
 2 files changed, 67 insertions(+), 30 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmptyState.tsx

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
new file mode 100644
index 000000000000..48c7d58c52d5
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmptyState.tsx
@@ -0,0 +1,59 @@
+import { useNavigate } from 'react-router-dom';
+import { IconPlus, IconSettings } from 'twenty-ui';
+
+import { Button } from '@/ui/input/button/components/Button';
+import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
+import {
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+
+type RecordTableEmptyStateProps = {
+  objectLabel: string;
+  createRecord: () => void;
+  isRemote: boolean;
+};
+
+export const RecordTableEmptyState = ({
+  objectLabel,
+  createRecord,
+  isRemote,
+}: RecordTableEmptyStateProps) => {
+  const navigate = useNavigate();
+
+  const [title, subTitle, Icon, onClick, buttonTitle] = isRemote
+    ? [
+        'No Data Available for Remote Table',
+        'If this is unexpected, please verify your settings.',
+        IconSettings,
+        () => navigate('/settings/integrations'),
+        'Go to Settings',
+      ]
+    : [
+        `Add your first ${objectLabel}`,
+        `Use our API or add your first ${objectLabel} manually`,
+        IconPlus,
+        createRecord,
+        `Add a ${objectLabel}`,
+      ];
+
+  return (
+    <AnimatedPlaceholderEmptyContainer>
+      <AnimatedPlaceholder type="noRecord" />
+      <AnimatedPlaceholderEmptyTextContainer>
+        <AnimatedPlaceholderEmptyTitle>{title}</AnimatedPlaceholderEmptyTitle>
+        <AnimatedPlaceholderEmptySubTitle>
+          {subTitle}
+        </AnimatedPlaceholderEmptySubTitle>
+      </AnimatedPlaceholderEmptyTextContainer>
+      <Button
+        Icon={Icon}
+        title={buttonTitle}
+        variant={'secondary'}
+        onClick={onClick}
+      />
+    </AnimatedPlaceholderEmptyContainer>
+  );
+};
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 fd62043add38..2583091e8e1b 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
@@ -1,23 +1,15 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
-import { IconPlus } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { RecordTable } from '@/object-record/record-table/components/RecordTable';
+import { RecordTableEmptyState } from '@/object-record/record-table/components/RecordTableEmptyState';
 import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { Button } from '@/ui/input/button/components/Button';
-import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
-import {
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields';
@@ -115,27 +107,13 @@ export const RecordTableWithWrappers = ({
                 recordTableId={recordTableId}
                 tableBodyRef={tableBodyRef}
               />
-              {!isRecordTableInitialLoading &&
-                numberOfTableRows === 0 &&
-                !isRemote && (
-                  <AnimatedPlaceholderEmptyContainer>
-                    <AnimatedPlaceholder type="noRecord" />
-                    <AnimatedPlaceholderEmptyTextContainer>
-                      <AnimatedPlaceholderEmptyTitle>
-                        Add your first {objectLabel}
-                      </AnimatedPlaceholderEmptyTitle>
-                      <AnimatedPlaceholderEmptySubTitle>
-                        Use our API or add your first {objectLabel} manually
-                      </AnimatedPlaceholderEmptySubTitle>
-                    </AnimatedPlaceholderEmptyTextContainer>
-                    <Button
-                      Icon={IconPlus}
-                      title={`Add a ${objectLabel}`}
-                      variant={'secondary'}
-                      onClick={createRecord}
-                    />
-                  </AnimatedPlaceholderEmptyContainer>
-                )}
+              {!isRecordTableInitialLoading && numberOfTableRows === 0 && (
+                <RecordTableEmptyState
+                  objectLabel={objectLabel}
+                  createRecord={createRecord}
+                  isRemote={isRemote}
+                />
+              )}
             </StyledTableContainer>
           </StyledTableWithHeader>
         </RecordUpdateContext.Provider>

From d7230ec152156c874e4feeb9d029b80790cba859 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Thu, 30 May 2024 12:03:16 +0200
Subject: [PATCH 2/4] Rely on id list rather than count

---
 .../components/RecordTableWithWrappers.tsx    | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

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 2583091e8e1b..aa903b42a21f 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
@@ -48,15 +48,15 @@ export const RecordTableWithWrappers = ({
 }: RecordTableWithWrappersProps) => {
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
-  const { numberOfTableRowsState, isRecordTableInitialLoadingState } =
+  const { isRecordTableInitialLoadingState, tableRowIdsState } =
     useRecordTableStates(recordTableId);
 
-  const numberOfTableRows = useRecoilValue(numberOfTableRowsState);
-
   const isRecordTableInitialLoading = useRecoilValue(
     isRecordTableInitialLoadingState,
   );
 
+  const tableRowIds = useRecoilValue(tableRowIdsState);
+
   const { resetTableRowSelection, setRowSelected } = useRecordTable({
     recordTableId,
   });
@@ -107,13 +107,15 @@ export const RecordTableWithWrappers = ({
                 recordTableId={recordTableId}
                 tableBodyRef={tableBodyRef}
               />
-              {!isRecordTableInitialLoading && numberOfTableRows === 0 && (
-                <RecordTableEmptyState
-                  objectLabel={objectLabel}
-                  createRecord={createRecord}
-                  isRemote={isRemote}
-                />
-              )}
+              {!isRecordTableInitialLoading &&
+                // we cannot rely on count states because this is not available for remote objects
+                tableRowIds.length === 0 && (
+                  <RecordTableEmptyState
+                    objectLabel={objectLabel}
+                    createRecord={createRecord}
+                    isRemote={isRemote}
+                  />
+                )}
             </StyledTableContainer>
           </StyledTableWithHeader>
         </RecordUpdateContext.Provider>

From 0b0e35a661ac58cc79dede5c4c80e015ab8ae5eb Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Thu, 30 May 2024 16:10:13 +0200
Subject: [PATCH 3/4] Remove isLoading if error

---
 .../src/modules/object-record/hooks/useFindManyRecords.ts      | 3 +++
 .../record-index/hooks/useLoadRecordIndexTable.ts              | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts
index 9c090f2137c7..54befcecbb50 100644
--- a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts
+++ b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts
@@ -33,6 +33,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
   orderBy,
   limit,
   onCompleted,
+  onError,
   skip,
   recordGqlFields,
   fetchPolicy,
@@ -45,6 +46,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
         totalCount?: number;
       },
     ) => void;
+    onError?: (error?: Error) => void;
     skip?: boolean;
     recordGqlFields?: RecordGqlOperationGqlRecordFields;
     fetchPolicy?: WatchQueryFetchPolicy;
@@ -120,6 +122,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
             variant: SnackBarVariant.Error,
           },
         );
+        onError?.(error);
       },
     });
 
diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
index 50320fd1304b..c6a26daada1d 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
@@ -61,6 +61,9 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
       setLastRowVisible(false);
       setIsRecordTableInitialLoading(false);
     },
+    onError: () => {
+      setIsRecordTableInitialLoading(false);
+    },
   });
 
   return {

From ca2e6e9cfe0e6a755630f2cfeb7b6c246472d1c3 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Fri, 31 May 2024 11:08:58 +0200
Subject: [PATCH 4/4] Add storybook test

---
 .../RecordTableEmptyState.stories.tsx         | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-table/components/__stories__/RecordTableEmptyState.stories.tsx

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
new file mode 100644
index 000000000000..d7f6c243fc0d
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/__stories__/RecordTableEmptyState.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { RecordTableEmptyState } from '@/object-record/record-table/components/RecordTableEmptyState';
+import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
+
+const meta: Meta = {
+  title: 'Modules/ObjectRecord/RecordTable/RecordTableEmptyState',
+  component: RecordTableEmptyState,
+  decorators: [MemoryRouterDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof RecordTableEmptyState>;
+
+export const Default: Story = {
+  args: {
+    objectLabel: 'person',
+    isRemote: false,
+    createRecord: () => {},
+  },
+};
+
+export const Remote: Story = {
+  args: {
+    objectLabel: 'remote person',
+    isRemote: true,
+    createRecord: () => {},
+  },
+};