From edf5120d8532224b3cb54c7ac7c3182769dc0c8d Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Fri, 31 May 2024 11:24:42 +0200
Subject: [PATCH] Build empty state for remote tables (#5652)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remote tables could be in an empty state because:
- either we do not have data, which is normal
- either the connexion is broken (issue with the server, table requires
updates...)

Apollo throws errors but these will quickly disappear and do not provide
any tips to the user on how handle those.

This PR adds a new empty state placeholder for remote objects, that will
be display when the record list is empty. It will provide a link to the
settings page.

<img width="1512" alt="Capture d’écran 2024-05-30 à 11 49 33"
src="https://github.com/twentyhq/twenty/assets/22936103/fc2dd3cc-e90b-4033-b023-83ac9ff2a70b">
---
 .../object-record/hooks/useFindManyRecords.ts |  3 +
 .../hooks/useLoadRecordIndexTable.ts          |  3 +
 .../components/RecordTableEmptyState.tsx      | 59 +++++++++++++++++++
 .../components/RecordTableWithWrappers.tsx    | 42 ++++---------
 .../RecordTableEmptyState.stories.tsx         | 29 +++++++++
 5 files changed, 105 insertions(+), 31 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-table/components/RecordTableEmptyState.tsx
 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/hooks/useFindManyRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts
index 9c090f2137c79..54befcecbb508 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 50320fd1304bf..c6a26daada1da 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 {
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 0000000000000..48c7d58c52d58
--- /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 fd62043add381..aa903b42a21f7 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';
@@ -56,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,
   });
@@ -116,25 +108,13 @@ export const RecordTableWithWrappers = ({
                 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>
+                // 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>
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 0000000000000..d7f6c243fc0d9
--- /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: () => {},
+  },
+};