twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-23 03:51:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor RecordShowActionMenu to use contextual actions (#9023)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts
View File

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

9
packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx
View File

@ -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,6 +45,9 @@ export const RecordShowActionMenu = ({
onActionExecutedCallback: () => {},
}}
>
{isPageHeaderV2Enabled ? (
<RecordShowActionMenuButtons />
) : (
<RecordShowPageBaseHeader
{...{
isFavorite,
@ -49,6 +57,7 @@ export const RecordShowActionMenu = ({
handleFavoriteButtonClick,
}}
/>
)}
<ActionMenuConfirmationModals />
<RecordActionMenuEntriesSetter />
{isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}

33
packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx Normal file
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" />
</>
);
};