7339 implement contextual actions inside the commandmenu (#8000)

Closes #7339


https://github.com/user-attachments/assets/b623caa4-c1b3-448e-8880-4a8301802ba8

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx

@@ -1,5 +1,5 @@
+import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
-import { ActionMenuType } from '@/action-menu/types/ActionMenuType';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
@@ -12,17 +12,15 @@ import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTabl
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { IconTrash, isDefined } from 'twenty-ui';
 
 export const DeleteRecordsActionEffect = ({
   position,
   objectMetadataItem,
-  actionMenuType,
 }: {
   position: number;
   objectMetadataItem: ObjectMetadataItem;
-  actionMenuType: ActionMenuType;
 }) => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
 
@@ -93,6 +91,9 @@ export const DeleteRecordsActionEffect = ({
     contextStoreNumberOfSelectedRecords < DELETE_MAX_COUNT &&
     contextStoreNumberOfSelectedRecords > 0;
 
+  const { isInRightDrawer, onActionExecutedCallback } =
+    useContext(ActionMenuContext);
+
   useEffect(() => {
     if (canDelete) {
       addActionMenuEntry({
@@ -120,17 +121,14 @@ export const DeleteRecordsActionEffect = ({
             } can be recovered from the Options menu.`}
             onConfirmClick={() => {
               handleDeleteClick();
-
-              if (actionMenuType === 'recordShow') {
+              onActionExecutedCallback?.();
+              if (isInRightDrawer) {
                 closeRightDrawer();
               }
             }}
             deleteButtonText={`Delete ${
               contextStoreNumberOfSelectedRecords > 1 ? 'Records' : 'Record'
             }`}
-            modalVariant={
-              actionMenuType === 'recordShow' ? 'tertiary' : 'primary'
-            }
           />
         ),
       });
@@ -142,13 +140,14 @@ export const DeleteRecordsActionEffect = ({
       removeActionMenuEntry('delete');
     };
   }, [
-    actionMenuType,
     addActionMenuEntry,
     canDelete,
     closeRightDrawer,
     contextStoreNumberOfSelectedRecords,
     handleDeleteClick,
     isDeleteRecordsModalOpen,
+    isInRightDrawer,
+    onActionExecutedCallback,
     position,
     removeActionMenuEntry,
   ]);

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter.tsx

@@ -1,27 +0,0 @@
-import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect';
-import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect';
-import { ActionMenuType } from '@/action-menu/types/ActionMenuType';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-
-const actionEffects = [ExportRecordsActionEffect, DeleteRecordsActionEffect];
-
-export const MultipleRecordsActionMenuEntriesSetter = ({
-  objectMetadataItem,
-  actionMenuType,
-}: {
-  objectMetadataItem: ObjectMetadataItem;
-  actionMenuType: ActionMenuType;
-}) => {
-  return (
-    <>
-      {actionEffects.map((ActionEffect, index) => (
-        <ActionEffect
-          key={index}
-          position={index}
-          objectMetadataItem={objectMetadataItem}
-          actionMenuType={actionMenuType}
-        />
-      ))}
-    </>
-  );
-};

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx

@@ -1,16 +1,23 @@
-import { MultipleRecordsActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter';
-import { SingleRecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter';
-import { ActionMenuType } from '@/action-menu/types/ActionMenuType';
+import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect';
+import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect';
+import { ManageFavoritesActionEffect } from '@/action-menu/actions/record-actions/components/ManageFavoritesActionEffect';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
-export const RecordActionMenuEntriesSetter = ({
-  actionMenuType,
-}: {
-  actionMenuType: ActionMenuType;
-}) => {
+const singleRecordActionEffects = [
+  ManageFavoritesActionEffect,
+  ExportRecordsActionEffect,
+  DeleteRecordsActionEffect,
+];
+
+const multipleRecordActionEffects = [
+  ExportRecordsActionEffect,
+  DeleteRecordsActionEffect,
+];
+
+export const RecordActionMenuEntriesSetter = () => {
   const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2(
     contextStoreNumberOfSelectedRecordsComponentState,
   );
@@ -33,19 +40,20 @@ export const RecordActionMenuEntriesSetter = ({
     return null;
   }
 
-  if (contextStoreNumberOfSelectedRecords === 1) {
-    return (
-      <SingleRecordActionMenuEntriesSetter
-        objectMetadataItem={objectMetadataItem}
-        actionMenuType={actionMenuType}
-      />
-    );
-  }
+  const actions =
+    contextStoreNumberOfSelectedRecords === 1
+      ? singleRecordActionEffects
+      : multipleRecordActionEffects;
 
   return (
-    <MultipleRecordsActionMenuEntriesSetter
-      objectMetadataItem={objectMetadataItem}
-      actionMenuType={actionMenuType}
-    />
+    <>
+      {actions.map((ActionEffect, index) => (
+        <ActionEffect
+          key={index}
+          position={index}
+          objectMetadataItem={objectMetadataItem}
+        />
+      ))}
+    </>
   );
 };

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter.tsx

@@ -1,31 +0,0 @@
-import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect';
-import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect';
-import { ManageFavoritesActionEffect } from '@/action-menu/actions/record-actions/components/ManageFavoritesActionEffect';
-import { ActionMenuType } from '@/action-menu/types/ActionMenuType';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-
-export const SingleRecordActionMenuEntriesSetter = ({
-  objectMetadataItem,
-  actionMenuType,
-}: {
-  objectMetadataItem: ObjectMetadataItem;
-  actionMenuType: ActionMenuType;
-}) => {
-  const actionEffects = [
-    ManageFavoritesActionEffect,
-    ExportRecordsActionEffect,
-    DeleteRecordsActionEffect,
-  ];
-  return (
-    <>
-      {actionEffects.map((ActionEffect, index) => (
-        <ActionEffect
-          key={index}
-          position={index}
-          objectMetadataItem={objectMetadataItem}
-          actionMenuType={actionMenuType}
-        />
-      ))}
-    </>
-  );
-};