Fix post merge revamp navigation bar

packages/twenty-front/src/hooks/useScrollRestoration.ts

@@ -7,6 +7,7 @@ import { scrollPositionState } from '@/ui/utilities/scroll/states/scrollPosition
 import { isDefined } from '~/utils/isDefined';
 
 /**
+ * @deprecated We should now use useScrollToPosition instead
  * Note that `location.key` is used in the cache key, not `location.pathname`,
  * so the same path navigated to at different points in the history stack will
  * not share the same scroll position.

packages/twenty-front/src/modules/object-metadata/hooks/useActiveFieldMetadataItems.ts

@@ -0,0 +1,20 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useMemo } from 'react';
+
+export const useActiveFieldMetadataItems = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const activeFieldMetadataItems = useMemo(
+    () =>
+      objectMetadataItem
+        ? objectMetadataItem.fields.filter(
+            ({ isActive, isSystem }) => isActive && !isSystem,
+          )
+        : [],
+    [objectMetadataItem],
+  );
+
+  return { activeFieldMetadataItems };
+};

packages/twenty-front/src/modules/object-record/cache/utils/getCursorByRecordIdFromRecordConnection.ts

@@ -0,0 +1,19 @@
+import { RecordGqlConnection } from '@/object-record/graphql/types/RecordGqlConnection';
+
+export type CursorByRecordId = {
+  cursor: string;
+  recordId: string;
+};
+
+export const getCursorByRecordIdFromRecordConnection = ({
+  recordConnection,
+}: {
+  recordConnection: RecordGqlConnection | undefined;
+}): CursorByRecordId[] => {
+  return (
+    recordConnection?.edges.map((edge) => ({
+      cursor: edge.cursor,
+      recordId: edge.node.id,
+    })) ?? []
+  );
+};

packages/twenty-front/src/modules/object-record/cache/utils/getRecordsFromRecordConnection.ts

@@ -5,9 +5,11 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 export const getRecordsFromRecordConnection = <T extends ObjectRecord>({
   recordConnection,
 }: {
-  recordConnection: RecordGqlConnection;
+  recordConnection: RecordGqlConnection | undefined;
 }): T[] => {
-  return recordConnection.edges.map((edge) =>
-    getRecordFromRecordNode<T>({ recordNode: edge.node }),
+  return (
+    recordConnection?.edges.map((edge) =>
+      getRecordFromRecordNode<T>({ recordNode: edge.node }),
+    ) ?? []
   );
 };

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

@@ -26,6 +26,7 @@ import { getQueryIdentifier } from '@/object-record/utils/getQueryIdentifier';
 import { isDefined } from '~/utils/isDefined';
 import { capitalize } from '~/utils/string/capitalize';
 
+import { getCursorByRecordIdFromRecordConnection } from '@/object-record/cache/utils/getCursorByRecordIdFromRecordConnection';
 import { cursorFamilyState } from '../states/cursorFamilyState';
 import { hasNextPageFamilyState } from '../states/hasNextPageFamilyState';
 import { isFetchingMoreRecordsFamilyState } from '../states/isFetchingMoreRecordsFamilyState';
@@ -209,21 +210,30 @@ export const useFetchMoreRecordsWithPagination = <
 
   const totalCount = data?.[objectMetadataItem.namePlural]?.totalCount;
 
+  const recordConnection = data?.[objectMetadataItem.namePlural];
+
   const records = useMemo(
     () =>
-      data?.[objectMetadataItem.namePlural]
-        ? getRecordsFromRecordConnection<T>({
-            recordConnection: data?.[objectMetadataItem.namePlural],
-          })
-        : ([] as T[]),
+      getRecordsFromRecordConnection<T>({
+        recordConnection,
+      }),
+
+    [recordConnection],
+  );
 
-    [data, objectMetadataItem.namePlural],
+  const cursorsByRecordId = useMemo(
+    () =>
+      getCursorByRecordIdFromRecordConnection({
+        recordConnection,
+      }),
+    [recordConnection],
   );
 
   return {
     fetchMoreRecords,
     totalCount,
     records,
     hasNextPage,
+    cursorsByRecordId,
   };
 };

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

@@ -78,7 +78,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
       onError: handleFindManyRecordsError,
     });
 
-  const { fetchMoreRecords, records, hasNextPage } =
+  const { fetchMoreRecords, records, hasNextPage, cursorsByRecordId } =
     useFetchMoreRecordsWithPagination<T>({
       objectNameSingular,
       filter,
@@ -103,5 +103,6 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
     queryStateIdentifier: queryIdentifier,
     hasNextPage,
     pageInfo,
+    cursorsByRecordId,
   };
 };

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -13,7 +13,7 @@ import {
   RecordUpdateHookParams,
 } from '@/object-record/record-field/contexts/FieldContext';
 import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon';
-import { RecordIndexRecordChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
+import { RecordIdentifierChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
@@ -222,7 +222,7 @@ export const RecordBoardCard = () => {
         }}
       >
         <StyledBoardCardHeader showCompactView={isCompactModeActive}>
-          <RecordIndexRecordChip
+          <RecordIdentifierChip
             objectNameSingular={objectMetadataItem.nameSingular}
             record={record}
             variant={AvatarChipVariant.Transparent}

packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx

@@ -4,7 +4,8 @@ import { BooleanFieldDisplay } from '@/object-record/record-field/meta-types/dis
 import { LinksFieldDisplay } from '@/object-record/record-field/meta-types/display/components/LinksFieldDisplay';
 import { RatingFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RatingFieldDisplay';
 import { RelationFromManyFieldDisplay } from '@/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay';
-import { isFieldChipDisplay } from '@/object-record/record-field/meta-types/display/utils/isFieldChipDisplay';
+
+import { isFieldIdentifierDisplay } from '@/object-record/record-field/meta-types/display/utils/isFieldIdentifierDisplay';
 import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean';
 import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
 import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
@@ -46,7 +47,10 @@ import { isFieldUuid } from '../types/guards/isFieldUuid';
 export const FieldDisplay = () => {
   const { fieldDefinition, isLabelIdentifier } = useContext(FieldContext);
 
-  const isChipDisplay = isFieldChipDisplay(fieldDefinition, isLabelIdentifier);
+  const isChipDisplay = isFieldIdentifierDisplay(
+    fieldDefinition,
+    isLabelIdentifier,
+  );
 
   return isChipDisplay ? (
     <ChipFieldDisplay />

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx

@@ -1,6 +1,6 @@
 import { RecordChip } from '@/object-record/components/RecordChip';
 import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay';
-import { RecordIndexRecordChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
+import { RecordIdentifierChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
 
 export const ChipFieldDisplay = () => {
   const { recordValue, objectNameSingular, isLabelIdentifier } =
@@ -11,7 +11,7 @@ export const ChipFieldDisplay = () => {
   }
 
   return isLabelIdentifier ? (
-    <RecordIndexRecordChip
+    <RecordIdentifierChip
       objectNameSingular={objectNameSingular}
       record={recordValue}
     />

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/utils/isFieldChipDisplay.ts → packages/twenty-front/src/modules/object-record/record-field/meta-types/display/utils/isFieldIdentifierDisplay.ts

@@ -3,7 +3,7 @@ import { isFieldFullName } from '@/object-record/record-field/types/guards/isFie
 import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
 import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
 
-export const isFieldChipDisplay = (
+export const isFieldIdentifierDisplay = (
   field: Pick<FieldMetadataItem, 'type'>,
   isLabelIdentifier: boolean,
 ) =>

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx

@@ -1,17 +1,10 @@
 import styled from '@emotion/styled';
-import {
-  useRecoilCallback,
-  useRecoilState,
-  useRecoilValue,
-  useSetRecoilState,
-} from 'recoil';
+import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
 
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
-import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
 import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
-import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
 import { RecordIndexBoardContainer } from '@/object-record/record-index/components/RecordIndexBoardContainer';
 import { RecordIndexBoardDataLoader } from '@/object-record/record-index/components/RecordIndexBoardDataLoader';
 import { RecordIndexBoardDataLoaderEffect } from '@/object-record/record-index/components/RecordIndexBoardDataLoaderEffect';
@@ -26,22 +19,17 @@ import { recordIndexIsCompactModeActiveState } from '@/object-record/record-inde
 import { recordIndexKanbanFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState';
 import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
 import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
-import { useFindRecordCursorFromFindManyCacheRootQuery } from '@/object-record/record-show/hooks/useFindRecordCursorFromFindManyCacheRootQuery';
-import { findView } from '@/object-record/record-show/hooks/useRecordShowPagePagination';
+
+import { useHandleIndexIdentifierClick } from '@/object-record/record-index/hooks/useHandleIndexIdentifierClick';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
 import { ViewBar } from '@/views/components/ViewBar';
-import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
-import { View } from '@/views/types/View';
 import { ViewField } from '@/views/types/ViewField';
 import { ViewType } from '@/views/types/ViewType';
 import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
-import { useNavigate } from 'react-router-dom';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 const StyledContainer = styled.div`
@@ -124,54 +112,11 @@ export const RecordIndexContainer = ({
     [columnDefinitions, setTableColumns],
   );
 
-  const navigate = useNavigate();
-
-  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
-
-  const currentViewId = useRecoilValue(
-    currentViewIdComponentState({
-      scopeId: recordIndexId,
-    }),
-  );
-
-  const view = findView({
-    objectMetadataItemId: objectMetadataItem?.id ?? '',
-    viewId: currentViewId ?? null,
-    views,
-  });
-
-  const filter = turnObjectDropdownFilterIntoQueryFilter(
-    mapViewFiltersToFilters(view?.viewFilters ?? [], filterDefinitions),
-    objectMetadataItem?.fields ?? [],
-  );
-
-  const orderBy = turnSortsIntoOrderBy(
+  const { handleIndexIdentifierClick } = useHandleIndexIdentifierClick({
     objectMetadataItem,
-    mapViewSortsToSorts(view?.viewSorts ?? [], sortDefinitions),
-  );
-
-  const { findCursorInCache } = useFindRecordCursorFromFindManyCacheRootQuery({
-    fieldVariables: {
-      filter,
-      orderBy,
-    },
-    objectNamePlural: objectNamePlural,
+    recordIndexId,
   });
 
-  const handleIndexIdentifierClick = (recordId: string) => {
-    const cursor = findCursorInCache(recordId);
-
-    // TODO: use URL builder
-    navigate(
-      `/object/${objectNameSingular}/${recordId}?view=${currentViewId}`,
-      {
-        state: {
-          cursor,
-        },
-      },
-    );
-  };
-
   const handleIndexRecordsLoaded = useRecoilCallback(
     ({ set }) =>
       () => {

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx

@@ -5,17 +5,17 @@ import { RecordIndexEventContext } from '@/object-record/record-index/contexts/R
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { useContext } from 'react';
 
-export type RecordIndexRecordChipProps = {
+export type RecordIdentifierChipProps = {
   objectNameSingular: string;
   record: ObjectRecord;
   variant?: AvatarChipVariant;
 };
 
-export const RecordIndexRecordChip = ({
+export const RecordIdentifierChip = ({
   objectNameSingular,
   record,
   variant,
-}: RecordIndexRecordChipProps) => {
+}: RecordIdentifierChipProps) => {
   const { onIndexIdentifierClick } = useContext(RecordIndexEventContext);
 
   const { recordChipData } = useRecordChipData({

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

@@ -0,0 +1,55 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useFindRecordCursorFromFindManyCacheRootQuery } from '@/object-record/record-show/hooks/useFindRecordCursorFromFindManyCacheRootQuery';
+import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
+import { useQueryVariablesFromActiveFieldsOfViewOrDefaultView } from '@/views/hooks/useQueryVariablesFromActiveFieldsOfViewOrDefaultView';
+import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+
+export const useHandleIndexIdentifierClick = ({
+  objectMetadataItem,
+  recordIndexId,
+}: {
+  recordIndexId: string;
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const navigate = useNavigate();
+
+  const currentViewId = useRecoilValue(
+    currentViewIdComponentState({
+      scopeId: recordIndexId,
+    }),
+  );
+
+  const { filter, orderBy } =
+    useQueryVariablesFromActiveFieldsOfViewOrDefaultView({
+      objectMetadataItem,
+      viewId: currentViewId,
+    });
+
+  const { findCursorInCache } = useFindRecordCursorFromFindManyCacheRootQuery({
+    fieldVariables: {
+      filter,
+      orderBy,
+    },
+    objectNamePlural: objectMetadataItem.namePlural,
+  });
+
+  const handleIndexIdentifierClick = (recordId: string) => {
+    const cursor = findCursorInCache(recordId);
+
+    const showPageURL = buildShowPageURL(
+      objectMetadataItem.nameSingular,
+      recordId,
+      currentViewId,
+    );
+
+    navigate(showPageURL, {
+      state: {
+        cursor,
+      },
+    });
+  };
+
+  return { handleIndexIdentifierClick };
+};

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

@@ -52,6 +52,7 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
     totalCount,
     fetchMoreRecords,
     queryStateIdentifier,
+    cursorsByRecordId,
   } = useFindManyRecords({
     ...params,
     recordGqlFields,
@@ -73,5 +74,6 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => {
     fetchMoreRecords,
     queryStateIdentifier,
     setRecordTableData,
+    cursorsByRecordId,
   };
 };

packages/twenty-front/src/modules/object-record/record-show/graphql/operations/factories/findOneRecordForShowPageOperationSignatureFactory.ts

@@ -1,11 +1,10 @@
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { RecordGqlOperationSignatureFactory } from '@/object-record/graphql/types/RecordGqlOperationSignatureFactory';
 import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
 
-export const findOneRecordForShowPageOperationSignatureFactory: RecordGqlOperationSignatureFactory =
+export const buildFindOneRecordForShowPageOperationSignature: RecordGqlOperationSignatureFactory =
   ({ objectMetadataItem }: { objectMetadataItem: ObjectMetadataItem }) => ({
-    objectNameSingular: CoreObjectNameSingular.Activity,
+    objectNameSingular: objectMetadataItem.nameSingular,
     variables: {},
     fields: generateDepthOneRecordGqlFields({ objectMetadataItem }),
   });