From 2c4a77a7b795194e8c4a54cf8d3f506f589796db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Wed, 11 Dec 2024 16:24:02 +0100 Subject: [PATCH] Refactor RecordShowActionMenu to use contextual actions (#9023) Closes #8736 --- .../useManageFavoritesSingleRecordAction.ts | 6 ++++ .../components/RecordShowActionMenu.tsx | 27 ++++++++++----- .../RecordShowActionMenuButtons.tsx | 33 +++++++++++++++++++ 3 files changed, 57 insertions(+), 9 deletions(-) create mode 100644 packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts index 25a56d6fec..12a81985a9 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts @@ -8,6 +8,7 @@ import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite'; import { useFavorites } from '@/favorites/hooks/useFavorites'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useRecoilValue } from 'recoil'; import { IconHeart, IconHeartOff, isDefined } from 'twenty-ui'; @@ -34,6 +35,10 @@ export const useManageFavoritesSingleRecordAction = ({ const isFavorite = !!foundFavorite; + const isPageHeaderV2Enabled = useIsFeatureEnabled( + 'IS_PAGE_HEADER_V2_ENABLED', + ); + const registerManageFavoritesSingleRecordAction = ({ position, }: { @@ -47,6 +52,7 @@ export const useManageFavoritesSingleRecordAction = ({ type: ActionMenuEntryType.Standard, scope: ActionMenuEntryScope.RecordSelection, key: 'manage-favorites-single-record', + isPinned: isPageHeaderV2Enabled, label: isFavorite ? 'Remove from favorites' : 'Add to favorites', position, Icon: isFavorite ? IconHeartOff : IconHeart, diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx index 177892d1d4..ba4467d9e3 100644 --- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx @@ -1,6 +1,7 @@ import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter'; import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect'; import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals'; +import { RecordShowActionMenuButtons } from '@/action-menu/components/RecordShowActionMenuButtons'; import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; @@ -29,6 +30,10 @@ export const RecordShowActionMenu = ({ const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED'); + const isPageHeaderV2Enabled = useIsFeatureEnabled( + 'IS_PAGE_HEADER_V2_ENABLED', + ); + // TODO: refactor RecordShowPageBaseHeader to use the context store return ( @@ -40,15 +45,19 @@ export const RecordShowActionMenu = ({ onActionExecutedCallback: () => {}, }} > - + {isPageHeaderV2Enabled ? ( + + ) : ( + + )} {isWorkflowEnabled && } diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx new file mode 100644 index 0000000000..3f827c609c --- /dev/null +++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx @@ -0,0 +1,33 @@ +import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; +import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { Button, useIsMobile } from 'twenty-ui'; + +export const RecordShowActionMenuButtons = () => { + const actionMenuEntries = useRecoilComponentValueV2( + actionMenuEntriesComponentSelector, + ); + + const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned); + + const isMobile = useIsMobile(); + + return ( + <> + {!isMobile && + pinnedEntries.map((entry, index) => ( +