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

favorite folders followup (#8570)

Browse Source 
Something changed, which affected the Favorite folder picker checkbox
styles -- fixed it!
Cleaned up code in `CurrentWorkspaceMemberFavoritesFolders` - removed
redundant filtering since favorites are already filtered in
`usePrefetchedFavoritesData`.
Regarding issue #8569 - I am not sure what to do in this case. Since
Folders data is gated by a feature flag, we can't use it in
`CurrentWorkspaceMemberFavoritesFolders` to ensure the favorite section
renders with empty folders. Currently, the section only appears when at
least one favorite exists - may be leave this section open at all times
or fix this bug after removal of the feature flag?

---------

Co-authored-by: Nitin Koche <nitinkoche@Nitins-MacBook-Pro.local>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2024-11-19 23:25:25 +05:30
committed by GitHub
parent 2773974459
commit 4f2019edae
45 changed files with 253 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,9 +61,9 @@ export const CurrentWorkspaceMemberFavorites = ({
const selectedFavoriteIndex = folder.favorites.findIndex((favorite) =>
isLocationMatchingFavorite(currentPath, currentViewPath, favorite),
);
const handleReorderFavorite = useReorderFavorite();
const { handleReorderFavorite } = useReorderFavorite();
const deleteFavorite = useDeleteFavorite();
const { deleteFavorite } = useDeleteFavorite();
const favoriteFolderContentLength = folder.favorites.length;
@ -154,6 +154,7 @@ export const CurrentWorkspaceMemberFavorites = ({
key={favorite.id}
draggableId={favorite.id}
index={index}
isInsideScrollableContainer
itemComponent={
<NavigationDrawerSubItem
key={favorite.id}

30
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx
View File

@ -4,8 +4,8 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import {
IconFolderPlus,
IconHeartOff,
isDefined,
LightIconButton,
isDefined,
} from 'twenty-ui';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@ -32,9 +32,9 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
const currentViewPath = useLocation().pathname + useLocation().search;
const theme = useTheme();
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const favorites = useFavorites();
const deleteFavorite = useDeleteFavorite();
const handleReorderFavorite = useReorderFavorite();
const { sortedFavorites: favorites } = useFavorites();
const { deleteFavorite } = useDeleteFavorite();
const { handleReorderFavorite } = useReorderFavorite();
const [isFavoriteFolderCreating, setIsFavoriteFolderCreating] =
useRecoilState(isFavoriteFolderCreatingState);
@ -50,24 +50,25 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
const toggleNewFolder = () => {
setIsFavoriteFolderCreating((current) => !current);
};
const shouldDisplayFavoritesWithFeatureFlagEnabled = true;
//todo: remove this logic once feature flag gating is removed
const shouldDisplayFavoritesWithoutFeatureFlagEnabled =
favorites.length > 0 || isFavoriteFolderCreating;
const shouldDisplayFavorites = isFavoriteFolderEnabled
? shouldDisplayFavoritesWithFeatureFlagEnabled
: shouldDisplayFavoritesWithoutFeatureFlagEnabled;
if (loading && isDefined(currentWorkspaceMember)) {
return <FavoritesSkeletonLoader />;
}
const currentWorkspaceMemberFavorites = favorites.filter(
(favorite) => favorite.workspaceMemberId === currentWorkspaceMember?.id,
);
const orphanFavorites = currentWorkspaceMemberFavorites.filter(
const orphanFavorites = favorites.filter(
(favorite) => !favorite.favoriteFolderId,
);
if (
(!currentWorkspaceMemberFavorites ||
currentWorkspaceMemberFavorites.length === 0) &&
!isFavoriteFolderCreating
) {
if (!shouldDisplayFavorites) {
return null;
}
@ -104,6 +105,7 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
key={favorite.id}
draggableId={favorite.id}
index={index}
isInsideScrollableContainer={true}
itemComponent={
<NavigationDrawerItem
key={favorite.id}

1
packages/twenty-front/src/modules/favorites/components/FavoriteFolderNavigationDrawerItemDropdown.tsx
View File

@ -38,6 +38,7 @@ export const FavoriteFolderNavigationDrawerItemDropdown = ({
dropdownHotkeyScope={{
scope: FavoriteFolderHotkeyScope.FavoriteFolderRightIconDropdown,
}}
usePortal
data-select-disable
clickableComponent={
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />

10
packages/twenty-front/src/modules/favorites/components/FavoritesFolders.tsx
View File

@ -18,8 +18,8 @@ export const FavoriteFolders = ({
}: FavoriteFoldersProps) => {
const [newFolderName, setNewFolderName] = useState('');
const favoritesByFolder = useFavoritesByFolder();
const createFavoriteFolder = useCreateFavoriteFolder();
const { favoritesByFolder } = useFavoritesByFolder();
const { createNewFavoriteFolder } = useCreateFavoriteFolder();
const [isFavoriteFolderCreating, setIsFavoriteFolderCreating] =
useRecoilState(isFavoriteFolderCreatingState);
@ -33,12 +33,12 @@ export const FavoriteFolders = ({
setIsFavoriteFolderCreating(false);
setNewFolderName('');
await createFavoriteFolder(value);
await createNewFavoriteFolder(value);
return true;
};
const handleClickOutside = async (
event: MouseEvent | TouchEvent,
_event: MouseEvent | TouchEvent,
value: string,
) => {
if (!value) {
@ -48,7 +48,7 @@ export const FavoriteFolders = ({
setIsFavoriteFolderCreating(false);
setNewFolderName('');
await createFavoriteFolder(value);
await createNewFavoriteFolder(value);
};
const handleCancelFavoriteFolderCreation = () => {

20
packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx Normal file
View File

@ -0,0 +1,20 @@
import { IconButton, IconHeart } from 'twenty-ui';
type PageFavoriteButtonProps = {
isFavorite: boolean;
onClick?: () => void;
};
export const PageFavoriteButton = ({
isFavorite,
onClick,
}: PageFavoriteButtonProps) => (
<IconButton
Icon={IconHeart}
size="medium"
variant="secondary"
data-testid="add-button"
accent={isFavorite ? 'danger' : 'default'}
onClick={onClick}
/>
);

51
packages/twenty-front/src/modules/favorites/components/PageFavoriteFolderDropdown.tsx Normal file
View File

@ -0,0 +1,51 @@
import { PageFavoriteButton } from '@/favorites/components/PageFavoriteButton';
import { FavoriteFolderPicker } from '@/favorites/favorite-folder-picker/components/FavoriteFolderPicker';
import { FavoriteFolderPickerEffect } from '@/favorites/favorite-folder-picker/components/FavoriteFolderPickerEffect';
import { FavoriteFolderPickerComponentInstanceContext } from '@/favorites/favorite-folder-picker/scopes/FavoriteFolderPickerScope';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
type PageFavoriteFoldersDropdownProps = {
dropdownId: string;
isFavorite: boolean;
record?: ObjectRecord;
objectNameSingular: string;
};
export const PageFavoriteFoldersDropdown = ({
dropdownId,
isFavorite,
record,
objectNameSingular,
}: PageFavoriteFoldersDropdownProps) => {
const { closeDropdown } = useDropdown(dropdownId);
return (
<FavoriteFolderPickerComponentInstanceContext
favoriteFoldersScopeId={dropdownId}
>
<DropdownScope dropdownScopeId={dropdownId}>
<Dropdown
dropdownId={dropdownId}
dropdownPlacement="bottom-start"
clickableComponent={<PageFavoriteButton isFavorite={isFavorite} />}
dropdownComponents={
<>
<FavoriteFolderPickerEffect record={record} />
<FavoriteFolderPicker
onSubmit={closeDropdown}
record={record}
objectNameSingular={objectNameSingular}
/>
</>
}
dropdownHotkeyScope={{
scope: dropdownId,
}}
/>
</DropdownScope>
</FavoriteFolderPickerComponentInstanceContext>
);
};