admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add workspace favorites behind feature flag (#6904)

Browse Source 
- 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
This commit is contained in:
Thomas Trompette
2024-09-05 16:41:06 +02:00
committed by GitHub
parent bc8c961e30
commit 78d8df6a68
21 changed files with 339 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/favorites/components/Favorites.tsx → packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
View File

@ -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,

45
packages/twenty-front/src/modules/favorites/components/WorkspaceFavorites.tsx Normal file
View File

@ -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}
/>
);
};

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

@ -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';

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

@ -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,

48
packages/twenty-front/src/modules/favorites/utils/sort-favorites.util.ts Normal file
View File

@ -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);
};

21
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
View File

@ -3,12 +3,14 @@ import { useSetRecoilState } from 'recoil';
import { IconSearch, IconSettings } from 'twenty-ui';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { Favorites } from '@/favorites/components/Favorites';
import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
import { CurrentWorkspaceMemberFavorites } from '@/favorites/components/CurrentWorkspaceMemberFavorites';
import { WorkspaceFavorites } from '@/favorites/components/WorkspaceFavorites';
import { NavigationDrawerSectionForObjectMetadataItemsWrapper } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsWrapper';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
export const MainNavigationDrawerItems = () => {
const isMobile = useIsMobile();
@ -17,6 +19,9 @@ export const MainNavigationDrawerItems = () => {
const setNavigationMemorizedUrl = useSetRecoilState(
navigationMemorizedUrlState,
);
const isWorkspaceFavoriteEnabled = useIsFeatureEnabled(
'IS_WORKSPACE_FAVORITE_ENABLED',
);
return (
<>
@ -39,10 +44,16 @@ export const MainNavigationDrawerItems = () => {
</NavigationDrawerSection>
)}
<Favorites />
<CurrentWorkspaceMemberFavorites />
<NavigationDrawerSectionForObjectMetadataItems isRemote={false} />
<NavigationDrawerSectionForObjectMetadataItems isRemote={true} />
{isWorkspaceFavoriteEnabled ? (
<WorkspaceFavorites />
) : (
<NavigationDrawerSectionForObjectMetadataItemsWrapper
isRemote={false}
/>
)}
<NavigationDrawerSectionForObjectMetadataItemsWrapper isRemote={true} />
</>
);
};

36
packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems.tsx
View File

@ -1,14 +1,9 @@
import { useLocation } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { isDefined, useIcons } from 'twenty-ui';
import { useIcons } from 'twenty-ui';
import { currentUserState } from '@/auth/states/currentUserState';
import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
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 { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
@ -27,44 +22,37 @@ const ORDERED_STANDARD_OBJECTS = [
];
export const NavigationDrawerSectionForObjectMetadataItems = ({
sectionTitle,
isRemote,
views,
objectMetadataItems,
}: {
sectionTitle: string;
isRemote: boolean;
views: View[];
objectMetadataItems: ObjectMetadataItem[];
}) => {
const currentUser = useRecoilValue(currentUserState);
const { toggleNavigationSection, isNavigationSectionOpenState } =
useNavigationSection('Objects' + (isRemote ? 'Remote' : 'Workspace'));
const isNavigationSectionOpen = useRecoilValue(isNavigationSectionOpenState);
const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
const filteredActiveObjectMetadataItems = activeObjectMetadataItems.filter(
(item) => (isRemote ? item.isRemote : !item.isRemote),
);
const { getIcon } = useIcons();
const currentPath = useLocation().pathname;
const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
const loading = useIsPrefetchLoading();
const { getLastVisitedViewIdFromObjectMetadataItemId } = useLastVisitedView();
if (loading && isDefined(currentUser)) {
return <NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader />;
}
// TODO: refactor this by splitting into separate components
return (
filteredActiveObjectMetadataItems.length > 0 && (
objectMetadataItems.length > 0 && (
<NavigationDrawerSection>
<NavigationDrawerSectionTitle
label={isRemote ? 'Remote' : 'Workspace'}
label={sectionTitle}
onClick={() => toggleNavigationSection()}
/>
{isNavigationSectionOpen &&
[
...filteredActiveObjectMetadataItems
...objectMetadataItems
.filter((item) =>
ORDERED_STANDARD_OBJECTS.includes(item.nameSingular),
)
@ -82,7 +70,7 @@ export const NavigationDrawerSectionForObjectMetadataItems = ({
}
return indexA - indexB;
}),
...filteredActiveObjectMetadataItems
...objectMetadataItems
.filter(
(item) => !ORDERED_STANDARD_OBJECTS.includes(item.nameSingular),
)

40
packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsWrapper.tsx Normal file
View File

@ -0,0 +1,40 @@
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-ui';
import { currentUserState } from '@/auth/states/currentUserState';
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 NavigationDrawerSectionForObjectMetadataItemsWrapper = ({
isRemote,
}: {
isRemote: boolean;
}) => {
const currentUser = useRecoilValue(currentUserState);
const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
const filteredActiveObjectMetadataItems = activeObjectMetadataItems.filter(
(item) => (isRemote ? item.isRemote : !item.isRemote),
);
const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
const loading = useIsPrefetchLoading();
if (loading && isDefined(currentUser)) {
return <NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader />;
}
return (
<NavigationDrawerSectionForObjectMetadataItems
sectionTitle={isRemote ? 'Remote' : 'Workspace'}
objectMetadataItems={filteredActiveObjectMetadataItems}
views={views}
isRemote={isRemote}
/>
);
};

38
packages/twenty-front/src/modules/object-metadata/components/__stories__/NavigationDrawerSectionForObjectMetadataItems.stories.tsx → packages/twenty-front/src/modules/object-metadata/components/__stories__/NavigationDrawerSectionForObjectMetadataItemsWrapper.stories.tsx
View File

@ -7,28 +7,32 @@ import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadat
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
import { NavigationDrawerSectionForObjectMetadataItemsWrapper } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsWrapper';
import { within } from '@storybook/test';
import { PrefetchLoadedDecorator } from '~/testing/decorators/PrefetchLoadedDecorator';
const meta: Meta<typeof NavigationDrawerSectionForObjectMetadataItems> = {
title: 'Modules/ObjectMetadata/NavigationDrawerSectionForObjectMetadataItems',
component: NavigationDrawerSectionForObjectMetadataItems,
decorators: [
IconsProviderDecorator,
ObjectMetadataItemsDecorator,
ComponentWithRouterDecorator,
ComponentWithRecoilScopeDecorator,
SnackBarDecorator,
PrefetchLoadedDecorator,
],
parameters: {
msw: graphqlMocks,
},
};
const meta: Meta<typeof NavigationDrawerSectionForObjectMetadataItemsWrapper> =
{
title:
'Modules/ObjectMetadata/NavigationDrawerSectionForObjectMetadataItemsWrapper',
component: NavigationDrawerSectionForObjectMetadataItemsWrapper,
decorators: [
IconsProviderDecorator,
ObjectMetadataItemsDecorator,
ComponentWithRouterDecorator,
ComponentWithRecoilScopeDecorator,
SnackBarDecorator,
PrefetchLoadedDecorator,
],
parameters: {
msw: graphqlMocks,
},
};
export default meta;
type Story = StoryObj<typeof NavigationDrawerSectionForObjectMetadataItems>;
type Story = StoryObj<
typeof NavigationDrawerSectionForObjectMetadataItemsWrapper
>;
export const Default: Story = {
play: async ({ canvasElement }) => {

4
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx
View File

@ -16,13 +16,13 @@ import {
IconUsers,
} from 'twenty-ui';
import { Favorites } from '@/favorites/components/Favorites';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { CurrentWorkspaceMemberFavorites } from '@/favorites/components/CurrentWorkspaceMemberFavorites';
import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
import { NavigationDrawer } from '../NavigationDrawer';
import { NavigationDrawerItem } from '../NavigationDrawerItem';
@ -66,7 +66,7 @@ export const Default: Story = {
/>
</NavigationDrawerSection>
<Favorites />
<CurrentWorkspaceMemberFavorites />
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" />

3
packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts
View File

@ -8,4 +8,5 @@ export type FeatureFlagKey =
| 'IS_CRM_MIGRATION_ENABLED'
| 'IS_FREE_ACCESS_ENABLED'
| 'IS_MESSAGE_THREAD_SUBSCRIBER_ENABLED'
| 'IS_WORKFLOW_ENABLED';
| 'IS_WORKFLOW_ENABLED'
| 'IS_WORKSPACE_FAVORITE_ENABLED';