diff --git a/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx b/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx index 9fa8a8966..501f52a8d 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx +++ b/packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx @@ -14,11 +14,13 @@ import { RecordTableScopeInternalContext } from '@/object-record/record-table/sc import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { IconCheckbox, + IconClick, IconHeart, IconHeartOff, + IconMail, IconNotes, + IconPuzzle, IconTrash, - IconWand, } from '@/ui/display/icon'; import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState'; import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState'; @@ -218,9 +220,19 @@ export const useRecordTableContextMenuEntries = ( ...(dataExecuteQuickActionOnmentEnabled ? [ { - label: 'Quick Action', - Icon: IconWand, - onClick: () => handleExecuteQuickActionOnClick(), + label: 'Actions', + Icon: IconClick, + subActions: [ + { + label: 'Enrich', + Icon: IconPuzzle, + onClick: () => handleExecuteQuickActionOnClick(), + }, + { + label: 'Send to mailjet', + Icon: IconMail, + }, + ], }, ] : []), diff --git a/packages/twenty-front/src/modules/ui/display/icon/index.ts b/packages/twenty-front/src/modules/ui/display/icon/index.ts index d4c3c1fe2..8c2029c96 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/index.ts +++ b/packages/twenty-front/src/modules/ui/display/icon/index.ts @@ -33,6 +33,7 @@ export { IconChevronsRight, IconChevronUp, IconCircleDot, + IconClick, IconCoins, IconColorSwatch, IconMessageCircle as IconComment, @@ -90,6 +91,7 @@ export { IconPlus, IconPresentation, IconProgressCheck, + IconPuzzle, IconRefresh, IconRelationManyToMany, IconRelationOneToMany, diff --git a/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx b/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx index 3abdcfc74..c966c89ad 100644 --- a/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx @@ -55,6 +55,7 @@ export const ActionBar = ({ selectedIds }: ActionBarProps) => { label={item.label} onClick={item.onClick} key={item.label} + subActions={item?.subActions} /> ))} diff --git a/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBarItem.tsx b/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBarItem.tsx index 163576277..a94034e4e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBarItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBarItem.tsx @@ -1,7 +1,12 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { MenuItem } from 'tsup.ui.index'; +import { IconChevronDown } from '@/ui/display/icon'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { ActionBarItemAccent } from '../types/ActionBarItemAccent'; @@ -9,7 +14,8 @@ type ActionBarItemProps = { Icon: IconComponent; label: string; accent?: ActionBarItemAccent; - onClick: () => void; + onClick?: () => void; + subActions?: ActionBarItemProps[]; }; const StyledButton = styled.div<{ accent: ActionBarItemAccent }>` @@ -44,12 +50,49 @@ export const ActionBarItem = ({ Icon, accent = 'standard', onClick, + subActions, }: ActionBarItemProps) => { const theme = useTheme(); + const dropdownId = `action-bar-item-${label}`; + const { toggleDropdown, closeDropdown } = useDropdown(dropdownId); return ( - - {Icon && } - {label} - + <> + {Array.isArray(subActions) ? ( + + {Icon && } + {label} + + + } + dropdownComponents={ + + {subActions.map((subAction) => ( + { + closeDropdown(); + subAction.onClick?.(); + }} + /> + ))} + + } + /> + ) : ( + + {Icon && } + {label} + + )} + ); }; diff --git a/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts b/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts index 842de337f..f5324e03f 100644 --- a/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts +++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts @@ -6,5 +6,6 @@ export type ActionBarEntry = { label: string; Icon: IconComponent; accent?: ActionBarItemAccent; - onClick: () => void; + onClick?: () => void; + subActions?: ActionBarEntry[]; };