Refactor RecordShowActionMenu to use contextual actions (#9023)

Closes #8736
This commit is contained in:
Raphaël Bosi 2024-12-11 16:24:02 +01:00 committed by GitHub
parent 224b6d1334
commit 2c4a77a7b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 57 additions and 9 deletions

View File

@ -8,6 +8,7 @@ import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite';
import { useFavorites } from '@/favorites/hooks/useFavorites'; import { useFavorites } from '@/favorites/hooks/useFavorites';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { IconHeart, IconHeartOff, isDefined } from 'twenty-ui'; import { IconHeart, IconHeartOff, isDefined } from 'twenty-ui';
@ -34,6 +35,10 @@ export const useManageFavoritesSingleRecordAction = ({
const isFavorite = !!foundFavorite; const isFavorite = !!foundFavorite;
const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
);
const registerManageFavoritesSingleRecordAction = ({ const registerManageFavoritesSingleRecordAction = ({
position, position,
}: { }: {
@ -47,6 +52,7 @@ export const useManageFavoritesSingleRecordAction = ({
type: ActionMenuEntryType.Standard, type: ActionMenuEntryType.Standard,
scope: ActionMenuEntryScope.RecordSelection, scope: ActionMenuEntryScope.RecordSelection,
key: 'manage-favorites-single-record', key: 'manage-favorites-single-record',
isPinned: isPageHeaderV2Enabled,
label: isFavorite ? 'Remove from favorites' : 'Add to favorites', label: isFavorite ? 'Remove from favorites' : 'Add to favorites',
position, position,
Icon: isFavorite ? IconHeartOff : IconHeart, Icon: isFavorite ? IconHeartOff : IconHeart,

View File

@ -1,6 +1,7 @@
import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter'; import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect'; import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals'; import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
import { RecordShowActionMenuButtons } from '@/action-menu/components/RecordShowActionMenuButtons';
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext'; import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState'; import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
@ -29,6 +30,10 @@ export const RecordShowActionMenu = ({
const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED'); const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
);
// TODO: refactor RecordShowPageBaseHeader to use the context store // TODO: refactor RecordShowPageBaseHeader to use the context store
return ( return (
@ -40,6 +45,9 @@ export const RecordShowActionMenu = ({
onActionExecutedCallback: () => {}, onActionExecutedCallback: () => {},
}} }}
> >
{isPageHeaderV2Enabled ? (
<RecordShowActionMenuButtons />
) : (
<RecordShowPageBaseHeader <RecordShowPageBaseHeader
{...{ {...{
isFavorite, isFavorite,
@ -49,6 +57,7 @@ export const RecordShowActionMenu = ({
handleFavoriteButtonClick, handleFavoriteButtonClick,
}} }}
/> />
)}
<ActionMenuConfirmationModals /> <ActionMenuConfirmationModals />
<RecordActionMenuEntriesSetter /> <RecordActionMenuEntriesSetter />
{isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />} {isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}

View File

@ -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) => (
<Button
key={index}
Icon={entry.Icon}
size="small"
variant="secondary"
accent="default"
title={entry.label}
onClick={() => entry.onClick?.()}
ariaLabel={entry.label}
/>
))}
<PageHeaderOpenCommandMenuButton key="more" />
</>
);
};