Introduce hooks to retrieve directly the registered actions without using actionMenuEntriesComponentState (#11359)

Introduce two hooks:
- `useRegisteredRecordActions`
- `useRegisteredRecordAgnosticActions`

These hooks will be used to read directly the registered actions
according to the context.
We will stop to rely on `actionMenuEntriesComponentState` to improve
performances and reduce state copies and updates.

This PR is part of
https://github.com/twentyhq/core-team-issues/issues/683, and at this
step, we still save the actions inside
`actionMenuEntriesComponentState`.

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

@@ -1,10 +1,7 @@
-import { RegisterRecordActionEffect } from '@/action-menu/actions/record-actions/components/RegisterRecordActionEffect';
+import { RegisterRecordActionEffects } from '@/action-menu/actions/record-actions/components/RegisterRecordActionEffects';
 import { WorkflowRunRecordActionMenuEntrySetterEffect } from '@/action-menu/actions/record-actions/workflow-run-record-actions/components/WorkflowRunRecordActionMenuEntrySetter';
-import { getActionConfig } from '@/action-menu/actions/utils/getActionConfig';
-import { getActionViewType } from '@/action-menu/actions/utils/getActionViewType';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
-import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -43,10 +40,6 @@ export const RecordActionMenuEntriesSetter = () => {
     contextStoreTargetedRecordsRuleComponentState,
   );
 
-  const contextStoreCurrentViewType = useRecoilComponentValueV2(
-    contextStoreCurrentViewTypeComponentState,
-  );
-
   const isWorkflowEnabled = useIsFeatureEnabled(
     FeatureFlagKey.IsWorkflowEnabled,
   );
@@ -55,28 +48,9 @@ export const RecordActionMenuEntriesSetter = () => {
     return null;
   }
 
-  const viewType = getActionViewType(
-    contextStoreCurrentViewType,
-    contextStoreTargetedRecordsRule,
-  );
-
-  const actionConfig = getActionConfig(objectMetadataItem);
-
-  const actionsToRegister = isDefined(viewType)
-    ? Object.values(actionConfig ?? {}).filter((action) =>
-        action.availableOn?.includes(viewType),
-      )
-    : [];
-
   return (
     <>
-      {actionsToRegister.map((action) => (
+      <RegisterRecordActionEffects objectMetadataItem={objectMetadataItem} />
-        <RegisterRecordActionEffect
-          key={action.key}
-          action={action}
-          objectMetadataItem={objectMetadataItem}
-        />
-      ))}
 
       {isWorkflowEnabled &&
         contextStoreTargetedRecordsRule?.mode === 'selection' &&

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

@@ -2,7 +2,6 @@ import { RecordConfigAction } from '@/action-menu/actions/types/RecordConfigActi
 import { wrapActionInCallbacks } from '@/action-menu/actions/utils/wrapActionInCallbacks';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
-import { useShouldActionBeRegisteredParams } from '@/action-menu/hooks/useShouldActionBeRegisteredParams';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useContext, useEffect } from 'react';
 
@@ -34,26 +33,13 @@ export const RegisterRecordActionEffect = ({
     onActionExecutedCallback,
   });
 
-  const params = useShouldActionBeRegisteredParams({
-    objectMetadataItem,
-  });
-
-  const shouldBeRegistered = action.shouldBeRegistered(params);
-
   useEffect(() => {
-    if (shouldBeRegistered) {
+    addActionMenuEntry(wrappedAction);
-      addActionMenuEntry(wrappedAction);
-    }
 
     return () => {
       removeActionMenuEntry(wrappedAction.key);
     };
-  }, [
+  }, [addActionMenuEntry, removeActionMenuEntry, wrappedAction]);
-    addActionMenuEntry,
-    removeActionMenuEntry,
-    shouldBeRegistered,
-    wrappedAction,
-  ]);
 
   return null;
 };

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

@@ -0,0 +1,27 @@
+import { RegisterRecordActionEffect } from '@/action-menu/actions/record-actions/components/RegisterRecordActionEffect';
+import { useRegisteredRecordActions } from '@/action-menu/hooks/useRegisteredRecordActions';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+
+type RegisterRecordActionEffectsProps = {
+  objectMetadataItem: ObjectMetadataItem;
+};
+
+export const RegisterRecordActionEffects = ({
+  objectMetadataItem,
+}: RegisterRecordActionEffectsProps) => {
+  const actionsToRegister = useRegisteredRecordActions({
+    objectMetadataItem,
+  });
+
+  return (
+    <>
+      {actionsToRegister.map((action) => (
+        <RegisterRecordActionEffect
+          key={action.key}
+          action={action}
+          objectMetadataItem={objectMetadataItem}
+        />
+      ))}
+    </>
+  );
+};

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

@@ -1,11 +1,13 @@
-import { RegisterAgnosticRecordActionEffect } from '@/action-menu/actions/record-agnostic-actions/components/RegisterAgnosticRecordActionEffect';
+import { RegisterAgnosticActionEffect } from '@/action-menu/actions/record-agnostic-actions/components/RegisterAgnosticActionEffect';
-import { RECORD_AGNOSTIC_ACTIONS_CONFIG } from '@/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig';
+import { useRegisteredRecordAgnosticActions } from '@/action-menu/hooks/useRegisteredRecordAgnosticActions';
 
 export const RecordAgnosticActionMenuEntriesSetter = () => {
+  const actionsToRegister = useRegisteredRecordAgnosticActions();
+
   return (
     <>
-      {Object.values(RECORD_AGNOSTIC_ACTIONS_CONFIG).map((action) => (
+      {actionsToRegister.map((action) => (
-        <RegisterAgnosticRecordActionEffect key={action.key} action={action} />
+        <RegisterAgnosticActionEffect key={action.key} action={action} />
       ))}
     </>
   );

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

@@ -4,17 +4,15 @@ import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
 import { useContext, useEffect } from 'react';
 
-type RegisterAgnosticRecordActionEffectProps = {
+type RegisterAgnosticActionEffectProps = {
   action: RecordAgnosticConfigAction;
 };
 
-export const RegisterAgnosticRecordActionEffect = ({
+export const RegisterAgnosticActionEffect = ({
   action,
-}: RegisterAgnosticRecordActionEffectProps) => {
+}: RegisterAgnosticActionEffectProps) => {
   const { onClick, ConfirmationModal } = action.useAction();
 
-  const shouldBeRegistered = action.shouldBeRegistered({});
-
   const { onActionStartedCallback, onActionExecutedCallback } =
     useContext(ActionMenuContext);
 
@@ -31,19 +29,12 @@ export const RegisterAgnosticRecordActionEffect = ({
   });
 
   useEffect(() => {
-    if (shouldBeRegistered) {
+    addActionMenuEntry(wrappedAction);
-      addActionMenuEntry(wrappedAction);
-    }
 
     return () => {
       removeActionMenuEntry(wrappedAction.key);
     };
-  }, [
+  }, [addActionMenuEntry, removeActionMenuEntry, wrappedAction]);
-    addActionMenuEntry,
-    removeActionMenuEntry,
-    shouldBeRegistered,
-    wrappedAction,
-  ]);
 
   return null;
 };

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

@@ -1,4 +1,4 @@
-import { RegisterAgnosticRecordActionEffect } from '@/action-menu/actions/record-agnostic-actions/components/RegisterAgnosticRecordActionEffect';
+import { RegisterAgnosticActionEffect } from '@/action-menu/actions/record-agnostic-actions/components/RegisterAgnosticActionEffect';
 import { useRunWorkflowActions } from '@/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowActions';
 
 export const RunWorkflowRecordAgnosticActionMenuEntriesSetter = () => {
@@ -7,7 +7,7 @@ export const RunWorkflowRecordAgnosticActionMenuEntriesSetter = () => {
   return (
     <>
       {runWorkflowActions.map((action) => (
-        <RegisterAgnosticRecordActionEffect key={action.key} action={action} />
+        <RegisterAgnosticActionEffect key={action.key} action={action} />
       ))}
     </>
   );

packages/twenty-front/src/modules/action-menu/hooks/useRegisteredRecordActions.ts

@@ -0,0 +1,48 @@
+import { ActionViewType } from '@/action-menu/actions/types/ActionViewType';
+import { getActionConfig } from '@/action-menu/actions/utils/getActionConfig';
+import { getActionViewType } from '@/action-menu/actions/utils/getActionViewType';
+import { useShouldActionBeRegisteredParams } from '@/action-menu/hooks/useShouldActionBeRegisteredParams';
+import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { isDefined } from 'twenty-shared/utils';
+
+export const useRegisteredRecordActions = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const params = useShouldActionBeRegisteredParams({
+    objectMetadataItem,
+  });
+
+  const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const contextStoreCurrentViewType = useRecoilComponentValueV2(
+    contextStoreCurrentViewTypeComponentState,
+  );
+
+  const viewType = getActionViewType(
+    contextStoreCurrentViewType,
+    contextStoreTargetedRecordsRule,
+  );
+
+  const actionConfig = getActionConfig(objectMetadataItem);
+
+  const actionsToRegister = isDefined(viewType)
+    ? Object.values(actionConfig ?? {}).filter(
+        (action) =>
+          action.availableOn?.includes(viewType) ||
+          action.availableOn?.includes(ActionViewType.GLOBAL),
+      )
+    : [];
+
+  const actions = actionsToRegister.filter((action) =>
+    action.shouldBeRegistered(params),
+  );
+
+  return actions;
+};

packages/twenty-front/src/modules/action-menu/hooks/useRegisteredRecordAgnosticActions.ts

@@ -0,0 +1,36 @@
+import { RECORD_AGNOSTIC_ACTIONS_CONFIG } from '@/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig';
+import { ActionViewType } from '@/action-menu/actions/types/ActionViewType';
+import { getActionViewType } from '@/action-menu/actions/utils/getActionViewType';
+import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { isDefined } from 'twenty-shared/utils';
+
+export const useRegisteredRecordAgnosticActions = () => {
+  const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const contextStoreCurrentViewType = useRecoilComponentValueV2(
+    contextStoreCurrentViewTypeComponentState,
+  );
+
+  const viewType = getActionViewType(
+    contextStoreCurrentViewType,
+    contextStoreTargetedRecordsRule,
+  );
+
+  const actionsToRegister = isDefined(viewType)
+    ? Object.values(RECORD_AGNOSTIC_ACTIONS_CONFIG ?? {}).filter(
+        (action) =>
+          action.availableOn?.includes(viewType) ||
+          action.availableOn?.includes(ActionViewType.GLOBAL),
+      )
+    : [];
+
+  const actions = actionsToRegister.filter((action) =>
+    action.shouldBeRegistered({}),
+  );
+
+  return actions;
+};