Integrate NavigationMenuItem with feature flag support

packages/twenty-front/codegen-metadata.cjs

@@ -23,6 +23,7 @@ module.exports = {
     './src/modules/workflow/**/graphql/**/*.{ts,tsx}',
     './src/modules/analytics/graphql/**/*.{ts,tsx}',
     './src/modules/object-metadata/graphql/**/*.{ts,tsx}',
+    './src/modules/navigation-menu-item/graphql/**/*.{ts,tsx}',
     './src/modules/attachments/graphql/**/*.{ts,tsx}',
     './src/modules/file/graphql/**/*.{ts,tsx}',
     './src/modules/onboarding/graphql/**/*.{ts,tsx}',

packages/twenty-front/src/generated/graphql.ts

@@ -1425,6 +1425,7 @@ export enum FeatureFlagKey {
   IS_FILES_FIELD_ENABLED = 'IS_FILES_FIELD_ENABLED',
   IS_JSON_FILTER_ENABLED = 'IS_JSON_FILTER_ENABLED',
   IS_JUNCTION_RELATIONS_ENABLED = 'IS_JUNCTION_RELATIONS_ENABLED',
+  IS_NAVIGATION_MENU_ITEM_ENABLED = 'IS_NAVIGATION_MENU_ITEM_ENABLED',
   IS_PAGE_LAYOUT_ENABLED = 'IS_PAGE_LAYOUT_ENABLED',
   IS_PUBLIC_DOMAIN_ENABLED = 'IS_PUBLIC_DOMAIN_ENABLED',
   IS_RECORD_PAGE_LAYOUT_ENABLED = 'IS_RECORD_PAGE_LAYOUT_ENABLED',
@@ -3055,6 +3056,7 @@ export type NavigationMenuItem = {
   position: Scalars['Float'];
   targetObjectMetadataId?: Maybe<Scalars['UUID']>;
   targetRecordId?: Maybe<Scalars['UUID']>;
+  targetRecordIdentifier?: Maybe<RecordIdentifier>;
   updatedAt: Scalars['DateTime'];
   userWorkspaceId?: Maybe<Scalars['UUID']>;
   viewId?: Maybe<Scalars['UUID']>;
@@ -3878,6 +3880,13 @@ export type RatioAggregateConfig = {
   optionValue: Scalars['String'];
 };
 
+export type RecordIdentifier = {
+  __typename?: 'RecordIdentifier';
+  id: Scalars['UUID'];
+  imageIdentifier?: Maybe<Scalars['String']>;
+  labelIdentifier: Scalars['String'];
+};
+
 export type Relation = {
   __typename?: 'Relation';
   sourceFieldMetadata: Field;

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/components/AddToFavoritesSingleRecordAction.tsx

@@ -2,16 +2,24 @@ import { Action } from '@/action-menu/actions/components/Action';
 import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
 import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
 import { useCreateFavorite } from '@/favorites/hooks/useCreateFavorite';
+import { useCreateNavigationMenuItem } from '@/navigation-menu-item/hooks/useCreateNavigationMenuItem';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
+import { FeatureFlagKey } from '~/generated/graphql';
 
 export const AddToFavoritesSingleRecordAction = () => {
   const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
 
   const recordId = useSelectedRecordIdOrThrow();
 
+  const isNavigationMenuItemEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_ENABLED,
+  );
+
   const { createFavorite } = useCreateFavorite();
+  const { createNavigationMenuItem } = useCreateNavigationMenuItem();
 
   const selectedRecord = useRecoilValue(recordStoreFamilyState(recordId));
 
@@ -20,7 +28,11 @@ export const AddToFavoritesSingleRecordAction = () => {
       return;
     }
 
-    createFavorite(selectedRecord, objectMetadataItem.nameSingular);
+    if (isNavigationMenuItemEnabled) {
+      createNavigationMenuItem(selectedRecord, objectMetadataItem.nameSingular);
+    } else {
+      createFavorite(selectedRecord, objectMetadataItem.nameSingular);
+    }
   };
 
   return <Action onClick={handleClick} />;

packages/twenty-front/src/modules/favorites/constants/FavoriteDroppableIds.ts

@@ -1,5 +1,7 @@
+import { FOLDER_DROPPABLE_IDS } from '@/ui/layout/draggable-list/utils/folderDroppableIds';
+
 export const FAVORITE_DROPPABLE_IDS = {
   ORPHAN_FAVORITES: 'orphan-favorites',
-  FOLDER_PREFIX: 'folder-',
-  FOLDER_HEADER_PREFIX: 'folder-header-',
-};
+  FOLDER_PREFIX: FOLDER_DROPPABLE_IDS.FOLDER_PREFIX,
+  FOLDER_HEADER_PREFIX: FOLDER_DROPPABLE_IDS.FOLDER_HEADER_PREFIX,
+} as const;

packages/twenty-front/src/modules/favorites/hooks/useHandleFavoriteDragAndDrop.ts

@@ -1,10 +1,10 @@
 import { FAVORITE_DROPPABLE_IDS } from '@/favorites/constants/FavoriteDroppableIds';
 import { useSortedFavorites } from '@/favorites/hooks/useSortedFavorites';
 import { openFavoriteFolderIdsState } from '@/favorites/states/openFavoriteFolderIdsState';
-import { calculateNewPosition } from '@/favorites/utils/calculateNewPosition';
-import { validateAndExtractFolderId } from '@/favorites/utils/validateAndExtractFolderId';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { calculateNewPosition } from '@/ui/layout/draggable-list/utils/calculateNewPosition';
+import { validateAndExtractFolderId } from '@/ui/layout/draggable-list/utils/validateAndExtractFolderId';
 import { type OnDragEndResponder } from '@hello-pangea/dnd';
 import { useSetRecoilState } from 'recoil';
 import { usePrefetchedFavoritesData } from './usePrefetchedFavoritesData';
@@ -43,10 +43,14 @@ export const useHandleFavoriteDragAndDrop = () => {
     const draggedFavorite = favorites.find((f) => f.id === draggableId);
     if (!draggedFavorite) return;
 
-    const destinationFolderId = validateAndExtractFolderId(
-      destination.droppableId,
-    );
-    const sourceFolderId = validateAndExtractFolderId(source.droppableId);
+    const destinationFolderId = validateAndExtractFolderId({
+      droppableId: destination.droppableId,
+      orphanDroppableId: FAVORITE_DROPPABLE_IDS.ORPHAN_FAVORITES,
+    });
+    const sourceFolderId = validateAndExtractFolderId({
+      droppableId: source.droppableId,
+      orphanDroppableId: FAVORITE_DROPPABLE_IDS.ORPHAN_FAVORITES,
+    });
 
     if (
       destination.droppableId.startsWith(

packages/twenty-front/src/modules/favorites/utils/__tests__/getObjectMetadataNamePluralFromViewId.test.ts

@@ -0,0 +1,37 @@
+import { getObjectMetadataNamePluralFromViewId } from '@/favorites/utils/getObjectMetadataNamePluralFromViewId';
+import { type View } from '@/views/types/View';
+import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
+
+describe('getObjectMetadataNamePluralFromViewId', () => {
+  it('should return namePlural and view for matching objectMetadataId', () => {
+    const view: Pick<View, 'id' | 'name' | 'objectMetadataId'> = {
+      id: 'view-id',
+      name: 'All People',
+      objectMetadataId:
+        generatedMockObjectMetadataItems[0]?.id ?? 'metadata-id',
+    };
+
+    const result = getObjectMetadataNamePluralFromViewId(
+      view,
+      generatedMockObjectMetadataItems,
+    );
+
+    expect(result.namePlural).toBeDefined();
+    expect(result.view).toEqual(view);
+  });
+
+  it('should throw error when objectMetadataItem is not found', () => {
+    const view: Pick<View, 'id' | 'name' | 'objectMetadataId'> = {
+      id: 'view-id',
+      name: 'All People',
+      objectMetadataId: 'non-existent-id',
+    };
+
+    expect(() => {
+      getObjectMetadataNamePluralFromViewId(
+        view,
+        generatedMockObjectMetadataItems,
+      );
+    }).toThrow('Object metadata item not found for id non-existent-id');
+  });
+});

packages/twenty-front/src/modules/favorites/utils/__tests__/sortFavorites.test.ts

@@ -0,0 +1,233 @@
+import { type Favorite } from '@/favorites/types/Favorite';
+import { sortFavorites } from '@/favorites/utils/sortFavorites';
+import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { type ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
+import { type View } from '@/views/types/View';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+
+jest.mock('@/favorites/utils/getObjectMetadataNamePluralFromViewId', () => ({
+  getObjectMetadataNamePluralFromViewId: jest.fn(
+    (
+      view: Pick<View, 'id' | 'name' | 'objectMetadataId'>,
+      items: ObjectMetadataItem[],
+    ) => {
+      const item = items.find((item) => item.id === view.objectMetadataId);
+      return { namePlural: item?.namePlural ?? 'items' };
+    },
+  ),
+}));
+
+jest.mock('twenty-shared/utils', () => {
+  const actual = jest.requireActual('twenty-shared/utils');
+  return {
+    ...actual,
+    getAppPath: jest.fn((path, params, query) => {
+      const basePath = `/app/objects/${params.objectNamePlural}`;
+      const viewId = query?.viewId;
+      if (viewId !== undefined && viewId !== null) {
+        return `${basePath}?viewId=${viewId}`;
+      }
+      return basePath;
+    }),
+  };
+});
+
+describe('sortFavorites', () => {
+  const mockView: Pick<View, 'id' | 'name' | 'objectMetadataId' | 'icon'> = {
+    id: 'view-id',
+    name: 'All People',
+    objectMetadataId: 'metadata-id',
+    icon: 'IconUser',
+  };
+
+  const mockObjectMetadataItem: ObjectMetadataItem = {
+    id: 'metadata-id',
+    nameSingular: 'person',
+    namePlural: 'people',
+  } as ObjectMetadataItem;
+
+  const mockObjectRecord: ObjectRecord = {
+    __typename: 'ObjectRecord',
+    id: 'record-id',
+    name: 'John Doe',
+  } as ObjectRecord;
+
+  const mockObjectRecordIdentifier: ObjectRecordIdentifier = {
+    id: 'record-id',
+    name: 'John Doe',
+    avatarUrl: 'https://example.com/avatar.jpg',
+    avatarType: 'rounded',
+    linkToShowPage: '/app/objects/people/record-id',
+  };
+
+  const mockRelationField: FieldMetadataItem = {
+    name: 'person',
+    type: FieldMetadataType.RELATION,
+    relation: {
+      targetObjectMetadata: {
+        nameSingular: 'person',
+      },
+    },
+  } as FieldMetadataItem;
+
+  const getObjectRecordIdentifierByNameSingular = jest.fn(
+    (
+      record: ObjectRecord,
+      objectNameSingular: string,
+    ): ObjectRecordIdentifier => {
+      if (objectNameSingular === 'person') {
+        return mockObjectRecordIdentifier;
+      }
+      return {
+        id: record.id,
+        name: 'Unknown',
+      };
+    },
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should process favorite with viewId', () => {
+    const favorite = {
+      id: 'favorite-id',
+      viewId: 'view-id',
+      position: 1,
+    } as unknown as Favorite;
+
+    const result = sortFavorites(
+      [favorite],
+      [],
+      getObjectRecordIdentifierByNameSingular,
+      true,
+      [mockView],
+      [mockObjectMetadataItem],
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toMatchObject({
+      id: 'favorite-id',
+      objectNameSingular: 'view',
+      Icon: 'IconUser',
+    });
+  });
+
+  it('should handle favorite with viewId when view is not found', () => {
+    const favorite = {
+      id: 'favorite-id',
+      viewId: 'non-existent-view-id',
+      position: 1,
+    } as unknown as Favorite;
+
+    const result = sortFavorites(
+      [favorite],
+      [],
+      getObjectRecordIdentifierByNameSingular,
+      true,
+      [],
+      [mockObjectMetadataItem],
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result[0].objectNameSingular).toBe('view');
+  });
+
+  it('should process favorite with relation field', () => {
+    const favorite = {
+      id: 'favorite-id',
+      person: mockObjectRecord,
+      position: 2,
+    } as unknown as Favorite;
+
+    const result = sortFavorites(
+      [favorite],
+      [mockRelationField],
+      getObjectRecordIdentifierByNameSingular,
+      true,
+      [],
+      [],
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toMatchObject({
+      id: 'favorite-id',
+      objectNameSingular: 'person',
+      labelIdentifier: 'John Doe',
+    });
+  });
+
+  it('should return empty link when hasLinkToShowPage is false', () => {
+    const favorite = {
+      id: 'favorite-id',
+      person: mockObjectRecord,
+      position: 2,
+    } as unknown as Favorite;
+
+    const result = sortFavorites(
+      [favorite],
+      [mockRelationField],
+      getObjectRecordIdentifierByNameSingular,
+      false,
+      [],
+      [],
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result[0].link).toBe('');
+  });
+
+  it('should sort favorites by position', () => {
+    const favorites = [
+      {
+        id: 'favorite-3',
+        viewId: 'view-id',
+        position: 3,
+      },
+      {
+        id: 'favorite-1',
+        viewId: 'view-id',
+        position: 1,
+      },
+      {
+        id: 'favorite-2',
+        viewId: 'view-id',
+        position: 2,
+      },
+    ] as unknown as Favorite[];
+
+    const result = sortFavorites(
+      favorites,
+      [],
+      getObjectRecordIdentifierByNameSingular,
+      true,
+      [mockView],
+      [mockObjectMetadataItem],
+    );
+
+    expect(result).toHaveLength(3);
+    expect(result[0].id).toBe('favorite-1');
+    expect(result[1].id).toBe('favorite-2');
+    expect(result[2].id).toBe('favorite-3');
+  });
+
+  it('should filter out favorites with no viewId and no relation fields', () => {
+    const favorite = {
+      id: 'favorite-id',
+      position: 1,
+    } as unknown as Favorite;
+
+    const result = sortFavorites(
+      [favorite],
+      [],
+      getObjectRecordIdentifierByNameSingular,
+      true,
+      [],
+      [],
+    );
+
+    expect(result).toHaveLength(0);
+  });
+});