GH-3183 Add sub actions to quick actions in ActionBar (#3339)

* convert quick action into a dropdown

* GH-3183 import icons

* GH-3183 display dummy sub-actions in dropdown

* Migrate to new Dropdown API

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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',
+                label: 'Actions',
-                Icon: IconWand,
+                Icon: IconClick,
-                onClick: () => handleExecuteQuickActionOnClick(),
+                subActions: [
+                  {
+                    label: 'Enrich',
+                    Icon: IconPuzzle,
+                    onClick: () => handleExecuteQuickActionOnClick(),
+                  },
+                  {
+                    label: 'Send to mailjet',
+                    Icon: IconMail,
+                  },
+                ],
               },
             ]
           : []),

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,

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}
         />
       ))}
     </StyledContainerActionBar>

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 (
-    <StyledButton accent={accent} onClick={onClick}>
+    <>
-      {Icon && <Icon size={theme.icon.size.md} />}
+      {Array.isArray(subActions) ? (
-      <StyledButtonLabel>{label}</StyledButtonLabel>
+        <Dropdown
-    </StyledButton>
+          dropdownId={dropdownId}
+          dropdownPlacement="top-start"
+          dropdownHotkeyScope={{
+            scope: dropdownId,
+          }}
+          clickableComponent={
+            <StyledButton accent={accent} onClick={toggleDropdown}>
+              {Icon && <Icon size={theme.icon.size.md} />}
+              <StyledButtonLabel>{label}</StyledButtonLabel>
+              <IconChevronDown size={theme.icon.size.md} />
+            </StyledButton>
+          }
+          dropdownComponents={
+            <DropdownMenuItemsContainer>
+              {subActions.map((subAction) => (
+                <MenuItem
+                  key={subAction.label}
+                  text={subAction.label}
+                  LeftIcon={subAction.Icon}
+                  onClick={() => {
+                    closeDropdown();
+                    subAction.onClick?.();
+                  }}
+                />
+              ))}
+            </DropdownMenuItemsContainer>
+          }
+        />
+      ) : (
+        <StyledButton accent={accent} onClick={onClick}>
+          {Icon && <Icon size={theme.icon.size.md} />}
+          <StyledButtonLabel>{label}</StyledButtonLabel>
+        </StyledButton>
+      )}
+    </>
   );
 };

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[];
 };