From fe941c64bed3b2922bb60edda80f911fc99686c8 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 9c090f213..54befcecb 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 50320fd13..c6a26daad 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 000000000..48c7d58c5
--- /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 fd62043ad..aa903b42a 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 000000000..d7f6c243f
--- /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: () => {},
+  },
+};