Action menu refactoring (#11454)
# Description Closes [#696](https://github.com/twentyhq/core-team-issues/issues/696) - `useAction` hooks have been removed for all actions - Every action can now declare a react component - Some standard action components have been introduced: `Action`, `ActionLink` and `ActionModal` - The `ActionDisplay` component uses the new `displayType` prop of the `ActionMenuContext` to render the right component for the action according to its container: `ActionButton`, `ActionDropdownItem` or `ActionListItem` - The `ActionDisplayer` wraps the action component inside a context which gives it all the information about the action -`actionMenuEntriesComponenState` has been removed and now all actions are computed directly using `useRegisteredAction` - This computation is done inside `ActionMenuContextProvider` and the actions are passed inside a context - `actionMenuType` gives information about the container of the action, so the action can know wether or not to close this container upon execution
This commit is contained in:
Raphaël Bosi
@ -1,48 +0,0 @@
|
||||
import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
|
||||
import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
export const useActionMenuEntries = () => {
|
||||
const actionMenuEntryState = useRecoilComponentCallbackStateV2(
|
||||
actionMenuEntriesComponentState,
|
||||
);
|
||||
|
||||
const addActionMenuEntry = useRecoilCallback(
|
||||
({ snapshot, set }) =>
|
||||
async (entryToAdd: ActionMenuEntry) => {
|
||||
const currentEntries = snapshot
|
||||
.getLoadable(actionMenuEntryState)
|
||||
.getValue();
|
||||
|
||||
const newEntries = new Map([
|
||||
...currentEntries,
|
||||
[entryToAdd.key, entryToAdd],
|
||||
]);
|
||||
set(actionMenuEntryState, newEntries);
|
||||
},
|
||||
[actionMenuEntryState],
|
||||
);
|
||||
|
||||
const removeActionMenuEntry = useRecoilCallback(
|
||||
({ snapshot, set }) =>
|
||||
async (entryKeyToRemove: string) => {
|
||||
const currentEntries = snapshot
|
||||
.getLoadable(actionMenuEntryState)
|
||||
.getValue();
|
||||
|
||||
if (!currentEntries.has(entryKeyToRemove)) {
|
||||
return;
|
||||
}
|
||||
const newEntries = new Map(currentEntries);
|
||||
newEntries.delete(entryKeyToRemove);
|
||||
set(actionMenuEntryState, newEntries);
|
||||
},
|
||||
[actionMenuEntryState],
|
||||
);
|
||||
|
||||
return {
|
||||
addActionMenuEntry,
|
||||
removeActionMenuEntry,
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,43 @@
|
||||
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
|
||||
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
|
||||
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
|
||||
import { getRightDrawerActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getRightDrawerActionMenuDropdownIdFromActionMenuId';
|
||||
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
|
||||
import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
|
||||
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
|
||||
import { useContext } from 'react';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
|
||||
export const useCloseActionMenu = (preventCommandMenuClosing?: boolean) => {
|
||||
const { actionMenuType, isInRightDrawer } = useContext(ActionMenuContext);
|
||||
|
||||
const { closeCommandMenu } = useCommandMenu();
|
||||
|
||||
const { closeDropdown } = useDropdownV2();
|
||||
|
||||
const actionMenuId = useAvailableComponentInstanceIdOrThrow(
|
||||
ActionMenuComponentInstanceContext,
|
||||
);
|
||||
|
||||
const dropdownId = isInRightDrawer
|
||||
? getRightDrawerActionMenuDropdownIdFromActionMenuId(actionMenuId)
|
||||
: getActionMenuDropdownIdFromActionMenuId(actionMenuId);
|
||||
|
||||
const closeActionMenu = () => {
|
||||
if (actionMenuType === 'command-menu') {
|
||||
if (isDefined(preventCommandMenuClosing) && preventCommandMenuClosing) {
|
||||
return;
|
||||
}
|
||||
closeCommandMenu();
|
||||
}
|
||||
|
||||
if (
|
||||
actionMenuType === 'index-page-action-menu-dropdown' ||
|
||||
actionMenuType === 'command-menu-show-page-action-menu-dropdown'
|
||||
) {
|
||||
closeDropdown(dropdownId);
|
||||
}
|
||||
};
|
||||
|
||||
return { closeActionMenu };
|
||||
};
|
||||
@ -1,20 +1,18 @@
|
||||
import { RECORD_AGNOSTIC_ACTIONS_CONFIG } from '@/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig';
|
||||
import { ActionViewType } from '@/action-menu/actions/types/ActionViewType';
|
||||
import { ShouldBeRegisteredFunctionParams } from '@/action-menu/actions/types/ShouldBeRegisteredFunctionParams';
|
||||
import { getActionConfig } from '@/action-menu/actions/utils/getActionConfig';
|
||||
import { getActionViewType } from '@/action-menu/actions/utils/getActionViewType';
|
||||
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,
|
||||
shouldBeRegisteredParams,
|
||||
}: {
|
||||
objectMetadataItem: ObjectMetadataItem;
|
||||
shouldBeRegisteredParams: ShouldBeRegisteredFunctionParams;
|
||||
}) => {
|
||||
export const useRegisteredActions = (
|
||||
shouldBeRegisteredParams: ShouldBeRegisteredFunctionParams,
|
||||
) => {
|
||||
const { objectMetadataItem } = shouldBeRegisteredParams;
|
||||
|
||||
const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
|
||||
contextStoreTargetedRecordsRuleComponentState,
|
||||
);
|
||||
@ -28,19 +26,26 @@ export const useRegisteredRecordActions = ({
|
||||
contextStoreTargetedRecordsRule,
|
||||
);
|
||||
|
||||
const actionConfig = getActionConfig(objectMetadataItem);
|
||||
const recordActionConfig = getActionConfig(objectMetadataItem);
|
||||
|
||||
const recordAgnosticActionConfig = RECORD_AGNOSTIC_ACTIONS_CONFIG;
|
||||
|
||||
const actionsConfig = {
|
||||
...recordActionConfig,
|
||||
...recordAgnosticActionConfig,
|
||||
};
|
||||
|
||||
const actionsToRegister = isDefined(viewType)
|
||||
? Object.values(actionConfig ?? {}).filter(
|
||||
? Object.values(actionsConfig).filter(
|
||||
(action) =>
|
||||
action.availableOn?.includes(viewType) ||
|
||||
action.availableOn?.includes(ActionViewType.GLOBAL),
|
||||
)
|
||||
: [];
|
||||
|
||||
const actions = actionsToRegister.filter((action) =>
|
||||
action.shouldBeRegistered(shouldBeRegisteredParams),
|
||||
);
|
||||
const actions = actionsToRegister
|
||||
.filter((action) => action.shouldBeRegistered(shouldBeRegisteredParams))
|
||||
.sort((a, b) => a.position - b.position);
|
||||
|
||||
return actions;
|
||||
};
|
||||
@ -1,36 +0,0 @@
|
||||
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;
|
||||
};
|
||||
@ -1,3 +1,5 @@
|
||||
import { ShouldBeRegisteredFunctionParams } from '@/action-menu/actions/types/ShouldBeRegisteredFunctionParams';
|
||||
import { getActionViewType } from '@/action-menu/actions/utils/getActionViewType';
|
||||
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
|
||||
import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
|
||||
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
|
||||
@ -18,8 +20,8 @@ import { FeatureFlagKey } from '~/generated-metadata/graphql';
|
||||
export const useShouldActionBeRegisteredParams = ({
|
||||
objectMetadataItem,
|
||||
}: {
|
||||
objectMetadataItem: ObjectMetadataItem;
|
||||
}) => {
|
||||
objectMetadataItem?: ObjectMetadataItem;
|
||||
}): ShouldBeRegisteredFunctionParams => {
|
||||
const { sortedFavorites: favorites } = useFavorites();
|
||||
|
||||
const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
|
||||
@ -40,8 +42,6 @@ export const useShouldActionBeRegisteredParams = ({
|
||||
const selectedRecord =
|
||||
useRecoilValue(recordStoreFamilyState(recordId ?? '')) || undefined;
|
||||
|
||||
const isRemoteObject = objectMetadataItem.isRemote;
|
||||
|
||||
const hasObjectReadOnlyPermission = useHasObjectReadOnlyPermission();
|
||||
|
||||
const isNoteOrTask =
|
||||
@ -58,7 +58,7 @@ export const useShouldActionBeRegisteredParams = ({
|
||||
useRecoilComponentValueV2(contextStoreCurrentViewTypeComponentState) ===
|
||||
ContextStoreViewType.ShowPage;
|
||||
|
||||
const isWorkflowsEnabled = useIsFeatureEnabled(
|
||||
const isWorkflowEnabled = useIsFeatureEnabled(
|
||||
FeatureFlagKey.IsWorkflowEnabled,
|
||||
);
|
||||
|
||||
@ -66,16 +66,26 @@ export const useShouldActionBeRegisteredParams = ({
|
||||
contextStoreNumberOfSelectedRecordsComponentState,
|
||||
);
|
||||
|
||||
const contextStoreCurrentViewType = useRecoilComponentValueV2(
|
||||
contextStoreCurrentViewTypeComponentState,
|
||||
);
|
||||
|
||||
const viewType = getActionViewType(
|
||||
contextStoreCurrentViewType,
|
||||
contextStoreTargetedRecordsRule,
|
||||
);
|
||||
|
||||
return {
|
||||
objectMetadataItem,
|
||||
isFavorite,
|
||||
isRemoteObject,
|
||||
hasObjectReadOnlyPermission,
|
||||
isNoteOrTask,
|
||||
isInRightDrawer,
|
||||
isSoftDeleteFilterActive,
|
||||
isShowPage,
|
||||
selectedRecord,
|
||||
isWorkflowsEnabled,
|
||||
isWorkflowEnabled,
|
||||
numberOfSelectedRecords,
|
||||
viewType: viewType ?? undefined,
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user