feat: Revamp navigation bar (#6031)

closes: #4428

Testing for fetchMoreRecords is pending, along with component tests

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/object-record/hooks/useFetchAllRecordIds.ts

@@ -38,7 +38,7 @@ export const useFetchAllRecordIds = <T>({
     const firstQueryResult =
       findManyRecordsDataResult?.data?.[objectMetadataItem.namePlural];
 
-    const totalCount = firstQueryResult?.totalCount ?? 1;
+    const totalCount = firstQueryResult?.totalCount ?? 0;
 
     const recordsCount = firstQueryResult?.edges.length ?? 0;
 

packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts

@@ -34,6 +34,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
   fetchPolicy,
   onError,
   onCompleted,
+  cursorFilter,
 }: UseFindManyRecordsParams<T>) => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const { objectMetadataItem } = useObjectMetadataItem({
@@ -42,6 +43,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
   const { findManyRecordsQuery } = useFindManyRecordsQuery({
     objectNameSingular,
     recordGqlFields,
+    cursorDirection: cursorFilter?.cursorDirection,
   });
 
   const { handleFindManyRecordsError } = useHandleFindManyRecordsError({
@@ -67,15 +69,16 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
       skip: skip || !objectMetadataItem || !currentWorkspaceMember,
       variables: {
         filter,
-        limit,
         orderBy,
+        lastCursor: cursorFilter?.cursor ?? undefined,
+        limit: cursorFilter?.limit ?? limit,
       },
       fetchPolicy: fetchPolicy,
       onCompleted: handleFindManyRecordsCompleted,
       onError: handleFindManyRecordsError,
     });
 
-  const { fetchMoreRecords, totalCount, records, hasNextPage } =
+  const { fetchMoreRecords, records, hasNextPage } =
     useFetchMoreRecordsWithPagination<T>({
       objectNameSingular,
       filter,
@@ -87,6 +90,9 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
       objectMetadataItem,
     });
 
+  const pageInfo = data?.[objectMetadataItem.namePlural].pageInfo;
+  const totalCount = data?.[objectMetadataItem.namePlural].totalCount;
+
   return {
     objectMetadataItem,
     records,
@@ -96,5 +102,6 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
     fetchMoreRecords,
     queryStateIdentifier: queryIdentifier,
     hasNextPage,
+    pageInfo,
   };
 };

packages/twenty-front/src/modules/object-record/hooks/useFindManyRecordsQuery.ts

@@ -3,16 +3,21 @@ import { useRecoilValue } from 'recoil';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { RecordGqlOperationGqlRecordFields } from '@/object-record/graphql/types/RecordGqlOperationGqlRecordFields';
-import { generateFindManyRecordsQuery } from '@/object-record/utils/generateFindManyRecordsQuery';
+import {
+  generateFindManyRecordsQuery,
+  QueryCursorDirection,
+} from '@/object-record/utils/generateFindManyRecordsQuery';
 
 export const useFindManyRecordsQuery = ({
   objectNameSingular,
   recordGqlFields,
   computeReferences,
+  cursorDirection = 'after',
 }: {
   objectNameSingular: string;
   recordGqlFields?: RecordGqlOperationGqlRecordFields;
   computeReferences?: boolean;
+  cursorDirection?: QueryCursorDirection;
 }) => {
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
@@ -25,6 +30,7 @@ export const useFindManyRecordsQuery = ({
     objectMetadataItems,
     recordGqlFields,
     computeReferences,
+    cursorDirection,
   });
 
   return {

packages/twenty-front/src/modules/object-record/hooks/useRecordChipData.ts

@@ -0,0 +1,24 @@
+import { PreComputedChipGeneratorsContext } from '@/object-metadata/context/PreComputedChipGeneratorsContext';
+import { generateDefaultRecordChipData } from '@/object-metadata/utils/generateDefaultRecordChipData';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { useContext } from 'react';
+
+export const useRecordChipData = ({
+  objectNameSingular,
+  record,
+}: {
+  objectNameSingular: string;
+  record: ObjectRecord;
+}) => {
+  const { identifierChipGeneratorPerObject } = useContext(
+    PreComputedChipGeneratorsContext,
+  );
+
+  const generateRecordChipData =
+    identifierChipGeneratorPerObject[objectNameSingular] ??
+    generateDefaultRecordChipData;
+
+  const recordChipData = generateRecordChipData(record);
+
+  return { recordChipData };
+};