Add workspace favorites behind feature flag (#6904)

- make member nullable on favorites
- add potential relation with view entity
- add a new type of favorite list in front : workspace favorite
- build a new component for retrieving workspace favorite to display +
refacto the existing one

Bonus:
- removing activities seed since this is deprecated

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx

@@ -34,7 +34,7 @@ const StyledNavigationDrawerItem = styled(NavigationDrawerItem)`
   }
 `;
 
-export const Favorites = () => {
+export const CurrentWorkspaceMemberFavorites = () => {
   const currentUser = useRecoilValue(currentUserState);
 
   const { favorites, handleReorderFavorite } = useFavorites();
@@ -48,7 +48,15 @@ export const Favorites = () => {
     return <FavoritesSkeletonLoader />;
   }
 
-  if (!favorites || favorites.length === 0) return <></>;
+  const currentWorkspaceMemberFavorites = favorites.filter(
+    (favorite) => favorite.workspaceMemberId === currentUser?.id,
+  );
+
+  if (
+    !currentWorkspaceMemberFavorites ||
+    currentWorkspaceMemberFavorites.length === 0
+  )
+    return <></>;
 
   return (
     <StyledContainer>
@@ -61,7 +69,7 @@ export const Favorites = () => {
           onDragEnd={handleReorderFavorite}
           draggableItems={
             <>
-              {favorites.map((favorite, index) => {
+              {currentWorkspaceMemberFavorites.map((favorite, index) => {
                 const {
                   id,
                   labelIdentifier,

packages/twenty-front/src/modules/favorites/components/WorkspaceFavorites.tsx

@@ -0,0 +1,45 @@
+import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
+import { NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader';
+import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
+import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
+import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { View } from '@/views/types/View';
+
+export const WorkspaceFavorites = () => {
+  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
+  const loading = useIsPrefetchLoading();
+
+  const { workspaceFavorites } = useFavorites();
+
+  const workspaceFavoriteIds = new Set(
+    workspaceFavorites.map((favorite) => favorite.recordId),
+  );
+
+  const favoriteViewObjectMetadataIds = views.reduce<string[]>((acc, view) => {
+    if (workspaceFavoriteIds.has(view.id)) {
+      acc.push(view.objectMetadataId);
+    }
+    return acc;
+  }, []);
+
+  const { objectMetadataItems } = useFilteredObjectMetadataItems();
+
+  const objectMetadataItemsToDisplay = objectMetadataItems.filter((item) =>
+    favoriteViewObjectMetadataIds.includes(item.id),
+  );
+
+  if (loading) {
+    return <NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader />;
+  }
+
+  return (
+    <NavigationDrawerSectionForObjectMetadataItems
+      sectionTitle={'Workspace Favorites'}
+      objectMetadataItems={objectMetadataItemsToDisplay}
+      views={views}
+      isRemote={false}
+    />
+  );
+};

packages/twenty-front/src/modules/favorites/hooks/__tests__/useFavorites.test.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
 import { MockedProvider } from '@apollo/client/testing';
 import { DropResult, ResponderProvided } from '@hello-pangea/dnd';
 import { act, renderHook, waitFor } from '@testing-library/react';
+import { ReactNode } from 'react';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';

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

@@ -1,9 +1,10 @@
-import { useMemo } from 'react';
 import { OnDragEndResponder } from '@hello-pangea/dnd';
+import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { Favorite } from '@/favorites/types/Favorite';
+import { sortFavorites } from '@/favorites/utils/sort-favorites.util';
 import { useGetObjectRecordIdentifierByNameSingular } from '@/object-metadata/hooks/useGetObjectRecordIdentifierByNameSingular';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -13,7 +14,6 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
-import { isDefined } from '~/utils/isDefined';
 
 export const useFavorites = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -44,6 +44,15 @@ export const useFavorites = () => {
     },
   );
 
+  const { records: workspaceFavorites } = usePrefetchedData<Favorite>(
+    PrefetchKey.AllFavorites,
+    {
+      workspaceMemberId: {
+        eq: undefined,
+      },
+    },
+  );
+
   const favoriteRelationFieldMetadataItems = useMemo(
     () =>
       favoriteObjectMetadataItem.fields.filter(
@@ -58,43 +67,31 @@ export const useFavorites = () => {
     useGetObjectRecordIdentifierByNameSingular();
 
   const favoritesSorted = useMemo(() => {
-    return favorites
-      .map((favorite) => {
-        for (const relationField of favoriteRelationFieldMetadataItems) {
-          if (isDefined(favorite[relationField.name])) {
-            const relationObject = favorite[relationField.name];
-
-            const relationObjectNameSingular =
-              relationField.toRelationMetadata?.fromObjectMetadata
-                .nameSingular ?? '';
-
-            const objectRecordIdentifier =
-              getObjectRecordIdentifierByNameSingular(
-                relationObject,
-                relationObjectNameSingular,
-              );
-
-            return {
-              id: favorite.id,
-              recordId: objectRecordIdentifier.id,
-              position: favorite.position,
-              avatarType: objectRecordIdentifier.avatarType,
-              avatarUrl: objectRecordIdentifier.avatarUrl,
-              labelIdentifier: objectRecordIdentifier.name,
-              link: objectRecordIdentifier.linkToShowPage,
-            } as Favorite;
-          }
-        }
-
-        return favorite;
-      })
-      .sort((a, b) => a.position - b.position);
+    return sortFavorites(
+      favorites,
+      favoriteRelationFieldMetadataItems,
+      getObjectRecordIdentifierByNameSingular,
+      true,
+    );
   }, [
     favoriteRelationFieldMetadataItems,
     favorites,
     getObjectRecordIdentifierByNameSingular,
   ]);
 
+  const workspaceFavoritesSorted = useMemo(() => {
+    return sortFavorites(
+      workspaceFavorites.filter((favorite) => favorite.viewId),
+      favoriteRelationFieldMetadataItems,
+      getObjectRecordIdentifierByNameSingular,
+      false,
+    );
+  }, [
+    favoriteRelationFieldMetadataItems,
+    getObjectRecordIdentifierByNameSingular,
+    workspaceFavorites,
+  ]);
+
   const createFavorite = (
     targetRecord: Record<string, any>,
     targetObjectNameSingular: string,
@@ -157,6 +154,7 @@ export const useFavorites = () => {
 
   return {
     favorites: favoritesSorted,
+    workspaceFavorites: workspaceFavoritesSorted,
     createFavorite,
     handleReorderFavorite,
     deleteFavorite,

packages/twenty-front/src/modules/favorites/utils/sort-favorites.util.ts

@@ -0,0 +1,48 @@
+import { Favorite } from '@/favorites/types/Favorite';
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
+import { isDefined } from 'twenty-ui';
+
+export const sortFavorites = (
+  favorites: Favorite[],
+  favoriteRelationFieldMetadataItems: FieldMetadataItem[],
+  getObjectRecordIdentifierByNameSingular: (
+    record: any,
+    objectNameSingular: string,
+  ) => ObjectRecordIdentifier,
+  hasLinkToShowPage: boolean,
+) => {
+  return favorites
+    .map((favorite) => {
+      for (const relationField of favoriteRelationFieldMetadataItems) {
+        if (isDefined(favorite[relationField.name])) {
+          const relationObject = favorite[relationField.name];
+
+          const relationObjectNameSingular =
+            relationField.toRelationMetadata?.fromObjectMetadata.nameSingular ??
+            '';
+
+          const objectRecordIdentifier =
+            getObjectRecordIdentifierByNameSingular(
+              relationObject,
+              relationObjectNameSingular,
+            );
+
+          return {
+            id: favorite.id,
+            recordId: objectRecordIdentifier.id,
+            position: favorite.position,
+            avatarType: objectRecordIdentifier.avatarType,
+            avatarUrl: objectRecordIdentifier.avatarUrl,
+            labelIdentifier: objectRecordIdentifier.name,
+            link: hasLinkToShowPage
+              ? objectRecordIdentifier.linkToShowPage
+              : '',
+          } as Favorite;
+        }
+      }
+
+      return favorite;
+    })
+    .sort((a, b) => a.position - b.position);
+};