admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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`.
This commit is contained in:
Raphaël Bosi
2025-04-03 10:25:42 +02:00
committed by GitHub
parent a062a17229
commit 1240d39f56
8 changed files with 128 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) => (
<RegisterRecordActionEffect
key={action.key}
action={action}
objectMetadataItem={objectMetadataItem}
/>
))}
<RegisterRecordActionEffects objectMetadataItem={objectMetadataItem} />
{isWorkflowEnabled &&
contextStoreTargetedRecordsRule?.mode === 'selection' &&

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

@ -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,
shouldBeRegistered,
wrappedAction,
]);
}, [addActionMenuEntry, removeActionMenuEntry, wrappedAction]);
return null;
};

27
packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RegisterRecordActionEffects.tsx Normal file
View File

@ -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}
/>
))}
</>
);
};

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

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

19
packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/components/RegisterAgnosticRecordActionEffect.tsx → packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/components/RegisterAgnosticActionEffect.tsx
View File

@ -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,
shouldBeRegistered,
wrappedAction,
]);
}, [addActionMenuEntry, removeActionMenuEntry, wrappedAction]);
return null;
};

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

@ -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} />
))}
</>
);

48
packages/twenty-front/src/modules/action-menu/hooks/useRegisteredRecordActions.ts Normal file
View File

@ -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;
};

36
packages/twenty-front/src/modules/action-menu/hooks/useRegisteredRecordAgnosticActions.ts Normal file
View File

@ -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;
};