Refactor RecordShowActionMenu to use contextual actions (#9023)

Closes #8736
twentyhq · Dec 11, 2024 · 2c4a77a · 2c4a77a
1 parent 224b6d1
commit 2c4a77a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 9 deletions.
diff --git a/...n-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts b/...n-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
@@ -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: () => {},
           }}
         >
-          <RecordShowPageBaseHeader
-            {...{
-              isFavorite,
-              record,
-              objectMetadataItem,
-              objectNameSingular,
-              handleFavoriteButtonClick,
-            }}
-          />
+          {isPageHeaderV2Enabled ? (
+            <RecordShowActionMenuButtons />
+          ) : (
+            <RecordShowPageBaseHeader
+              {...{
+                isFavorite,
+                record,
+                objectMetadataItem,
+                objectNameSingular,
+                handleFavoriteButtonClick,
+              }}
+            />
+          )}
           <ActionMenuConfirmationModals />
           <RecordActionMenuEntriesSetter />
           {isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx 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) => (
+          <Button
+            key={index}
+            Icon={entry.Icon}
+            size="small"
+            variant="secondary"
+            accent="default"
+            title={entry.label}
+            onClick={() => entry.onClick?.()}
+            ariaLabel={entry.label}
+          />
+        ))}
+      <PageHeaderOpenCommandMenuButton key="more" />
+    </>
+  );
+};