Fix post merge revamp navigation bar (#6297)

Closes #6285 @charlesBochet Also added some more utils for our component state v2.
twentyhq · Jul 19, 2024 · 1b0759e · 1b0759e
1 parent 67e2d5c
commit 1b0759e
Show file tree

Hide file tree

Showing 31 changed files with 1,197 additions and 230 deletions.
diff --git a/packages/twenty-front/src/hooks/useScrollRestoration.ts b/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.

diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useActiveFieldMetadataItems.ts b/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 };
+};
diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFetchMoreRecordsWithPagination.ts b/packages/twenty-front/src/modules/object-record/hooks/useFetchMoreRecordsWithPagination.ts
@@ -209,15 +209,16 @@ export const useFetchMoreRecordsWithPagination = <
 
   const totalCount = data?.[objectMetadataItem.namePlural]?.totalCount;
 
+  const recordConnection = data?.[objectMetadataItem.namePlural];
+
   const records = useMemo(
     () =>
-      data?.[objectMetadataItem.namePlural]
+      isDefined(recordConnection)
         ? getRecordsFromRecordConnection<T>({
-            recordConnection: data?.[objectMetadataItem.namePlural],
+            recordConnection,
           })
-        : ([] as T[]),
-
-    [data, objectMetadataItem.namePlural],
+        : [],
+    [recordConnection],
   );
 
   return {

diff --git a/...t/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/...t/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}

diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx b/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 />

diff --git a/...src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx b/...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}
     />

diff --git a/...types/display/utils/isFieldChipDisplay.ts → ...display/utils/isFieldIdentifierDisplay.ts b/...types/display/utils/isFieldChipDisplay.ts → ...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,
 ) =>

diff --git a/...s/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/...s/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 }) =>
       () => {

diff --git a/.../twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx b/.../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({

diff --git a/...wenty-front/src/modules/object-record/record-index/hooks/useHandleIndexIdentifierClick.ts b/...wenty-front/src/modules/object-record/record-index/hooks/useHandleIndexIdentifierClick.ts
@@ -0,0 +1,33 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
+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 handleIndexIdentifierClick = (recordId: string) => {
+    const showPageURL = buildShowPageURL(
+      objectMetadataItem.nameSingular,
+      recordId,
+      currentViewId,
+    );
+
+    navigate(showPageURL);
+  };
+
+  return { handleIndexIdentifierClick };
+};
diff --git a/...rd-show/graphql/operations/factories/findOneRecordForShowPageOperationSignatureFactory.ts b/...rd-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 }),
   });
diff --git a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPage.ts b/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPage.ts
@@ -7,7 +7,7 @@ import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { useLabelIdentifierFieldMetadataItem } from '@/object-metadata/hooks/useLabelIdentifierFieldMetadataItem';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
-import { findOneRecordForShowPageOperationSignatureFactory } from '@/object-record/record-show/graphql/operations/factories/findOneRecordForShowPageOperationSignatureFactory';
+import { buildFindOneRecordForShowPageOperationSignature } from '@/object-record/record-show/graphql/operations/factories/findOneRecordForShowPageOperationSignatureFactory';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
@@ -39,7 +39,8 @@ export const useRecordShowPage = (
   const { getIcon } = useIcons();
   const headerIcon = getIcon(objectMetadataItem?.icon);
   const FIND_ONE_RECORD_FOR_SHOW_PAGE_OPERATION_SIGNATURE =
-    findOneRecordForShowPageOperationSignatureFactory({ objectMetadataItem });
+    buildFindOneRecordForShowPageOperationSignature({ objectMetadataItem });
+
   const { record, loading } = useFindOneRecord({
     objectRecordId,
     objectNameSingular,