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,10 +1,10 @@
|
||||
import { ActionConfig } from '@/action-menu/actions/types/ActionConfig';
|
||||
import { CommandGroup } from '@/command-menu/components/CommandGroup';
|
||||
import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
|
||||
import { ResetContextToSelectionCommandButton } from '@/command-menu/components/ResetContextToSelectionCommandButton';
|
||||
import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
|
||||
import { useMatchingCommandMenuCommands } from '@/command-menu/hooks/useMatchingCommandMenuCommands';
|
||||
import { useMatchingCommandMenuActions } from '@/command-menu/hooks/useMatchingCommandMenuActions';
|
||||
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
|
||||
import { Command } from '@/command-menu/types/Command';
|
||||
import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
|
||||
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
|
||||
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
|
||||
@ -13,9 +13,9 @@ import { useLingui } from '@lingui/react/macro';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
|
||||
export type CommandGroupConfig = {
|
||||
export type ActionGroupConfig = {
|
||||
heading: string;
|
||||
items?: Command[];
|
||||
items?: ActionConfig[];
|
||||
};
|
||||
|
||||
export const CommandMenu = () => {
|
||||
@ -26,14 +26,14 @@ export const CommandMenu = () => {
|
||||
|
||||
const {
|
||||
noResults,
|
||||
matchingStandardActionRecordSelectionCommands,
|
||||
matchingStandardActionObjectCommands,
|
||||
matchingWorkflowRunRecordSelectionCommands,
|
||||
matchingStandardActionGlobalCommands,
|
||||
matchingWorkflowRunGlobalCommands,
|
||||
matchingNavigateCommands,
|
||||
fallbackCommands,
|
||||
} = useMatchingCommandMenuCommands({
|
||||
matchingStandardActionRecordSelectionActions,
|
||||
matchingStandardActionObjectActions,
|
||||
matchingWorkflowRunRecordSelectionActions,
|
||||
matchingStandardActionGlobalActions,
|
||||
matchingWorkflowRunGlobalActions,
|
||||
matchingNavigateActions,
|
||||
fallbackActions,
|
||||
} = useMatchingCommandMenuActions({
|
||||
commandMenuSearch,
|
||||
});
|
||||
|
||||
@ -50,34 +50,32 @@ export const CommandMenu = () => {
|
||||
(item) => item.id === objectMetadataItemId,
|
||||
);
|
||||
|
||||
const commandGroups: CommandGroupConfig[] = [
|
||||
const commandGroups: ActionGroupConfig[] = [
|
||||
{
|
||||
heading: t`Record Selection`,
|
||||
items: matchingStandardActionRecordSelectionCommands.concat(
|
||||
matchingWorkflowRunRecordSelectionCommands,
|
||||
items: matchingStandardActionRecordSelectionActions.concat(
|
||||
matchingWorkflowRunRecordSelectionActions,
|
||||
),
|
||||
},
|
||||
{
|
||||
heading: currentObjectMetadataItem?.labelPlural ?? t`Object`,
|
||||
items: matchingStandardActionObjectCommands,
|
||||
items: matchingStandardActionObjectActions,
|
||||
},
|
||||
{
|
||||
heading: t`Global`,
|
||||
items: matchingStandardActionGlobalCommands
|
||||
.concat(matchingWorkflowRunGlobalCommands)
|
||||
.concat(matchingNavigateCommands),
|
||||
items: matchingStandardActionGlobalActions
|
||||
.concat(matchingWorkflowRunGlobalActions)
|
||||
.concat(matchingNavigateActions),
|
||||
},
|
||||
{
|
||||
heading: t`Search ''${commandMenuSearch}'' with...`,
|
||||
items: fallbackCommands,
|
||||
items: fallbackActions,
|
||||
},
|
||||
];
|
||||
|
||||
const selectableItems: Command[] = commandGroups.flatMap(
|
||||
(group) => group.items ?? [],
|
||||
);
|
||||
const selectableItems = commandGroups.flatMap((group) => group.items ?? []);
|
||||
|
||||
const selectableItemIds = selectableItems.map((item) => item.id);
|
||||
const selectableItemIds = selectableItems.map((item) => item.key);
|
||||
|
||||
if (isDefined(previousContextStoreCurrentObjectMetadataItemId)) {
|
||||
selectableItemIds.unshift(RESET_CONTEXT_TO_SELECTION);
|
||||
|
||||
@ -1,17 +1,9 @@
|
||||
import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
|
||||
import { NoSelectionRecordActionKeys } from '@/action-menu/actions/record-actions/no-selection/types/NoSelectionRecordActionsKeys';
|
||||
import { RecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionMenuEntriesSetter';
|
||||
import { RunWorkflowRecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RunWorkflowRecordAgnosticActionMenuEntriesSetter';
|
||||
import { RecordAgnosticActionsKeys } from '@/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKeys';
|
||||
import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
|
||||
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
|
||||
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
|
||||
import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
|
||||
import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
|
||||
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
|
||||
import { useCommandMenuCloseAnimationCompleteCleanup } from '@/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup';
|
||||
import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
|
||||
import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
|
||||
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
|
||||
import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
|
||||
import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
|
||||
@ -27,13 +19,11 @@ import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingC
|
||||
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
|
||||
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import { FeatureFlagKey } from '~/generated-metadata/graphql';
|
||||
import { useRecoilCallback, useRecoilValue } from 'recoil';
|
||||
import { useIsMobile } from 'twenty-ui/utilities';
|
||||
|
||||
const StyledCommandMenu = styled(motion.div)`
|
||||
@ -57,7 +47,7 @@ export const CommandMenuContainer = ({
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
const { toggleCommandMenu, closeCommandMenu } = useCommandMenu();
|
||||
const { closeCommandMenu } = useCommandMenu();
|
||||
|
||||
const { commandMenuCloseAnimationCompleteCleanup } =
|
||||
useCommandMenuCloseAnimationCompleteCleanup();
|
||||
@ -97,12 +87,6 @@ export const CommandMenuContainer = ({
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const isWorkflowEnabled = useIsFeatureEnabled(
|
||||
FeatureFlagKey.IsWorkflowEnabled,
|
||||
);
|
||||
|
||||
const setCommandMenuSearch = useSetRecoilState(commandMenuSearchState);
|
||||
|
||||
const objectMetadataItemId = useRecoilComponentValueV2(
|
||||
contextStoreCurrentObjectMetadataItemIdComponentState,
|
||||
COMMAND_MENU_COMPONENT_INSTANCE_ID,
|
||||
@ -140,53 +124,25 @@ export const CommandMenuContainer = ({
|
||||
<ActionMenuComponentInstanceContext.Provider
|
||||
value={{ instanceId: COMMAND_MENU_COMPONENT_INSTANCE_ID }}
|
||||
>
|
||||
<ActionMenuContext.Provider
|
||||
value={{
|
||||
isInRightDrawer: true,
|
||||
onActionExecutedCallback: ({ key }) => {
|
||||
if (
|
||||
key !== RecordAgnosticActionsKeys.SEARCH_RECORDS &&
|
||||
key !==
|
||||
RecordAgnosticActionsKeys.SEARCH_RECORDS_FALLBACK &&
|
||||
key !== NoSelectionRecordActionKeys.CREATE_NEW_RECORD
|
||||
) {
|
||||
toggleCommandMenu();
|
||||
}
|
||||
|
||||
if (
|
||||
key !== RecordAgnosticActionsKeys.SEARCH_RECORDS_FALLBACK
|
||||
) {
|
||||
setCommandMenuSearch('');
|
||||
}
|
||||
},
|
||||
}}
|
||||
<AnimatePresence
|
||||
mode="wait"
|
||||
onExitComplete={commandMenuCloseAnimationCompleteCleanup}
|
||||
>
|
||||
<RecordActionMenuEntriesSetter />
|
||||
<RecordAgnosticActionMenuEntriesSetter />
|
||||
{isWorkflowEnabled && (
|
||||
<RunWorkflowRecordAgnosticActionMenuEntriesSetter />
|
||||
{isCommandMenuOpened && (
|
||||
<StyledCommandMenu
|
||||
data-testid="command-menu"
|
||||
ref={commandMenuRef}
|
||||
className="command-menu"
|
||||
animate={targetVariantForAnimation}
|
||||
initial="closed"
|
||||
exit="closed"
|
||||
variants={COMMAND_MENU_ANIMATION_VARIANTS}
|
||||
transition={{ duration: theme.animation.duration.normal }}
|
||||
>
|
||||
{children}
|
||||
</StyledCommandMenu>
|
||||
)}
|
||||
<ActionMenuConfirmationModals />
|
||||
<AnimatePresence
|
||||
mode="wait"
|
||||
onExitComplete={commandMenuCloseAnimationCompleteCleanup}
|
||||
>
|
||||
{isCommandMenuOpened && (
|
||||
<StyledCommandMenu
|
||||
data-testid="command-menu"
|
||||
ref={commandMenuRef}
|
||||
className="command-menu"
|
||||
animate={targetVariantForAnimation}
|
||||
initial="closed"
|
||||
exit="closed"
|
||||
variants={COMMAND_MENU_ANIMATION_VARIANTS}
|
||||
transition={{ duration: theme.animation.duration.normal }}
|
||||
>
|
||||
{children}
|
||||
</StyledCommandMenu>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</ActionMenuContext.Provider>
|
||||
</AnimatePresence>
|
||||
</ActionMenuComponentInstanceContext.Provider>
|
||||
</ContextStoreComponentInstanceContext.Provider>
|
||||
</RecordSortsComponentInstanceContext.Provider>
|
||||
|
||||
@ -27,7 +27,6 @@ export const CommandMenuItem = ({
|
||||
onClick,
|
||||
Icon,
|
||||
hotKeys,
|
||||
shouldCloseCommandMenuOnClick,
|
||||
RightComponent,
|
||||
}: CommandMenuItemProps) => {
|
||||
const { onItemClick } = useCommandMenuOnItemClick();
|
||||
@ -47,7 +46,6 @@ export const CommandMenuItem = ({
|
||||
hotKeys={hotKeys}
|
||||
onClick={() =>
|
||||
onItemClick({
|
||||
shouldCloseCommandMenuOnClick,
|
||||
onClick,
|
||||
to,
|
||||
})
|
||||
|
||||
@ -1,26 +1,23 @@
|
||||
import { ActionComponent } from '@/action-menu/actions/display/components/ActionComponent';
|
||||
import { CommandGroup } from '@/command-menu/components/CommandGroup';
|
||||
import { CommandGroupConfig } from '@/command-menu/components/CommandMenu';
|
||||
import { ActionGroupConfig } from '@/command-menu/components/CommandMenu';
|
||||
import { CommandMenuDefaultSelectionEffect } from '@/command-menu/components/CommandMenuDefaultSelectionEffect';
|
||||
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
|
||||
import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
|
||||
import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
|
||||
import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
|
||||
import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
|
||||
import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
|
||||
import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
|
||||
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
|
||||
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
|
||||
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
|
||||
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
|
||||
import styled from '@emotion/styled';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
|
||||
|
||||
const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
|
||||
|
||||
export type CommandMenuListProps = {
|
||||
commandGroups: CommandGroupConfig[];
|
||||
commandGroups: ActionGroupConfig[];
|
||||
selectableItemIds: string[];
|
||||
children?: React.ReactNode;
|
||||
loading?: boolean;
|
||||
@ -63,10 +60,6 @@ export const CommandMenuList = ({
|
||||
loading = false,
|
||||
noResults = false,
|
||||
}: CommandMenuListProps) => {
|
||||
const { onItemClick } = useCommandMenuOnItemClick();
|
||||
|
||||
const commands = commandGroups.flatMap((group) => group.items ?? []);
|
||||
|
||||
const { resetPreviousCommandMenuContext } =
|
||||
useResetPreviousCommandMenuContext();
|
||||
|
||||
@ -90,19 +83,6 @@ export const CommandMenuList = ({
|
||||
resetPreviousCommandMenuContext();
|
||||
return;
|
||||
}
|
||||
|
||||
const command = commands.find((item) => item.id === itemId);
|
||||
|
||||
if (isDefined(command)) {
|
||||
const { to, onCommandClick, shouldCloseCommandMenuOnClick } =
|
||||
command;
|
||||
|
||||
onItemClick({
|
||||
shouldCloseCommandMenuOnClick,
|
||||
onClick: onCommandClick,
|
||||
to,
|
||||
});
|
||||
}
|
||||
}}
|
||||
onSelect={() => {
|
||||
setHasUserSelectedCommand(true);
|
||||
@ -112,24 +92,9 @@ export const CommandMenuList = ({
|
||||
{commandGroups.map(({ heading, items }) =>
|
||||
items?.length ? (
|
||||
<CommandGroup heading={heading} key={heading}>
|
||||
{items.map((item) => {
|
||||
return (
|
||||
<SelectableItem itemId={item.id} key={item.id}>
|
||||
<CommandMenuItem
|
||||
id={item.id}
|
||||
Icon={item.Icon}
|
||||
label={item.label}
|
||||
description={item.description}
|
||||
to={item.to}
|
||||
onClick={item.onCommandClick}
|
||||
hotKeys={item.hotKeys}
|
||||
shouldCloseCommandMenuOnClick={
|
||||
item.shouldCloseCommandMenuOnClick
|
||||
}
|
||||
/>
|
||||
</SelectableItem>
|
||||
);
|
||||
})}
|
||||
{items.map((item) => (
|
||||
<ActionComponent action={item} key={item.key} />
|
||||
))}
|
||||
</CommandGroup>
|
||||
) : null,
|
||||
)}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { ActionMenuContextProvider } from '@/action-menu/contexts/ActionMenuContextProvider';
|
||||
import { CommandMenuContainer } from '@/command-menu/components/CommandMenuContainer';
|
||||
import { CommandMenuContextChipRecordSetterEffect } from '@/command-menu/components/CommandMenuContextChipRecordSetterEffect';
|
||||
import { CommandMenuTopBar } from '@/command-menu/components/CommandMenuTopBar';
|
||||
@ -47,7 +48,13 @@ export const CommandMenuRouter = () => {
|
||||
<CommandMenuTopBar />
|
||||
</motion.div>
|
||||
<StyledCommandMenuContent>
|
||||
{commandMenuPageComponent}
|
||||
<ActionMenuContextProvider
|
||||
isInRightDrawer={true}
|
||||
displayType="listItem"
|
||||
actionMenuType="command-menu"
|
||||
>
|
||||
{commandMenuPageComponent}
|
||||
</ActionMenuContextProvider>
|
||||
</StyledCommandMenuContent>
|
||||
</CommandMenuPageComponentInstanceContext.Provider>
|
||||
</CommandMenuContainer>
|
||||
|
||||
@ -26,10 +26,10 @@ import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/reco
|
||||
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
|
||||
import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
|
||||
import { HttpResponse, graphql } from 'msw';
|
||||
import { IconDotsVertical } from 'twenty-ui/display';
|
||||
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
|
||||
import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
|
||||
import { CommandMenu } from '../CommandMenu';
|
||||
import { IconDotsVertical } from 'twenty-ui/display';
|
||||
|
||||
const openTimeout = 50;
|
||||
|
||||
@ -115,10 +115,10 @@ export const DefaultWithoutSearch: Story = {
|
||||
const canvas = within(document.body);
|
||||
|
||||
expect(await canvas.findByText('Go to People')).toBeVisible();
|
||||
expect(await canvas.findByText('Go to Companies')).toBeVisible();
|
||||
expect(await canvas.findByText('Go to Opportunities')).toBeVisible();
|
||||
expect(await canvas.findByText('Go to Settings')).toBeVisible();
|
||||
expect(await canvas.findByText('Go to Tasks')).toBeVisible();
|
||||
expect(await canvas.findByText('Go to Notes')).toBeVisible();
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user