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) => (
+
+ }
+ />
+ ) : (
+
+ {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[];
};